/* components.css */

/* ============ Cabecera ============ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--header-h);background:var(--canvas);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.header[data-scrolled="true"]{border-bottom-color:var(--line)}
.header__inner{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  height:100%;display:flex;align-items:center;gap:var(--s-lg);
}
/* flex:none — el logo JAMÁS cede ancho: si cediera, con la altura fijada la
   imagen se comprimiría solo en horizontal y el wordmark saldría deformado
   (visto en móvil). max-width:none anula el img{max-width:100%} global por el
   mismo motivo. El encaje en pantallas pequeñas se resuelve por tamaños, abajo. */
.header__logo{margin-right:auto;display:flex;align-items:center;flex:none}
/* El recorte logo-wordmark.png es solo el texto "Palumbo", sin el lienzo con
   aire del archivo original: a 30px se lee de verdad. */
.header__logo img{height:30px;width:auto;max-width:none}
.header__nav{display:flex;align-items:center;gap:var(--s-lg)}
.header__nav a{
  font-size:14px;font-weight:550;color:var(--body);text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.header__nav a:hover,.header__nav a[aria-current="page"]{color:var(--ink)}

/* El botón de cabecera nunca se parte en dos líneas */
.header__cta{white-space:nowrap}

/* Conmutador del menú móvil: oculto en escritorio */
.nav-toggle{
  display:none;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;gap:5px;flex-direction:column;
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;transition:border-color var(--dur) var(--ease);
}
.nav-toggle:hover{border-color:var(--muted)}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink)}

/* En móvil la cabecera queda en logo + menú (decisión del cliente): el botón
   de reserva desaparece — la CTA vive en el hero, visible sin scroll, y se
   repite a lo largo de cada página; el menú lleva también a Contacto. */
@media(max-width:860px){
  /* .btn.header__cta, no .header__cta: la definición base .btn{display:inline-flex}
     va después en el archivo y a igual especificidad ganaría ella. */
  .btn.header__cta{display:none}
  .nav-toggle{display:flex}
  .header__inner{position:relative;gap:var(--s-sm)}
  .header__nav{
    display:none;
    position:absolute;right:var(--gutter);top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;gap:0;
    min-width:210px;padding:var(--s-xs);
    background:var(--canvas);
    border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--shadow);
  }
  .header__nav[data-open="true"]{display:flex}
  .header__nav a{
    display:flex;align-items:center;min-height:44px;
    padding:0 var(--s-sm);border-radius:var(--r-sm);
  }
  .header__nav a:hover{background:var(--warm)}
}

/* Escalado por ancho de pantalla: logo y botón se reducen por pasos para que
   logo + botón + menú quepan SIEMPRE sin que nada se deforme ni se parta. */
/* Con solo logo + menú en móvil, el logo cabe holgado a 26px hasta en 320px
   de ancho; ya no hacen falta los escalones diminutos de cuando competía con
   el botón de reserva. */
@media(max-width:600px){
  .header__logo img{height:26px}
}

/* ============ Botones ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding-inline:28px;
  background:var(--ink);color:#fff;
  font-family:var(--font-sans);font-size:15px;font-weight:600;
  line-height:1.2;text-decoration:none;text-align:center;
  border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.btn:hover{background:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress}
.btn--sm{min-height:40px;padding-inline:18px;font-size:14px}
.btn--lg{min-height:56px;padding-inline:32px;font-size:16px}
/* Flecha que asoma y se desplaza en los CTA principales */
.btn--lg::after{
  content:"→";display:inline-block;margin-left:10px;
  transition:transform var(--dur) var(--ease);
}
.btn--lg:hover::after{transform:translateX(4px)}
.btn--block{display:flex;width:100%}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--warm);border-color:var(--muted)}
.section--dark .btn{background:var(--on-dark);color:var(--ink)}
.section--dark .btn:hover{background:#fff}

/* Objetivo táctil mínimo de 44px en pantallas de dedo. Va aquí, después de
   .btn--sm, porque una regla de igual especificidad declarada antes no gana. */
@media(max-width:860px){
  .btn--sm{min-height:44px}
}

.link-cta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:600;color:var(--accent-deep);
  text-decoration:none;
  transition:gap var(--dur) var(--ease);
}
.link-cta:hover{gap:10px}

/* ============ Retícula hairline ============ */
/* El gap de 1px NO es hueco: es la línea, producida por el fondo del contenedor. */
.rule-grid{
  display:grid;gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.rule-grid>*{
  background:var(--cell);padding:var(--s-lg);
  transition:background-color var(--dur) var(--ease);
}
/* La celda se ilumina al pasar: profundidad sin sombras, fiel al sistema */
.rule-grid>article:hover{background:var(--canvas)}
.section--dark .rule-grid>article:hover{background:#1e1a15}
.rule-grid>article.cell--feature:hover{background:#faf5ea}
.rule-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rule-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rule-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){
  .rule-grid--3,.rule-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .rule-grid--2,.rule-grid--3,.rule-grid--6{grid-template-columns:1fr}
}
/* El título de celda es una etiqueta, no prosa: siempre sans 17px,
   sea cual sea el nivel de encabezado que exija la jerarquía del documento. */
.cell__title{
  font-family:var(--font-sans);
  font-size:17px;font-weight:600;line-height:1.35;
  letter-spacing:-.003em;color:var(--ink);
  margin-bottom:var(--s-xs);
}
.section--dark .cell__title{color:var(--on-dark)}
.cell__body{font-size:15px;line-height:1.6}

/* Celda destacada: el gatillo de escasez real de la firma (cartera cerrada) */
.rule-grid>.cell--feature{background:var(--accent-wash)}

/* La retícula sobre fondo oscuro invierte sus valores */
.section--dark .rule-grid{
  background:rgba(245,242,236,.16);
  border-color:rgba(245,242,236,.16);
}
.section--dark .rule-grid>*{background:var(--ink)}
.section--dark .cell__body{color:var(--on-dark-mut)}

/* ============ Listas con marca de módulo ============ */
.marked{list-style:none}
.marked li{position:relative;padding-left:22px;margin-bottom:var(--s-sm);font-size:15px}
.marked li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;background:var(--accent);
}
.marked--no li::before{background:transparent;box-shadow:inset 0 0 0 1px var(--muted)}

/* ============ Franja de logos ============ */
/* El arte original es blanco sobre transparente: se usa el alfa como máscara
   y se pinta desde CSS. Altura = 28px x factor óptico medido por logo. */
.logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-3xl);
  --logo-s:.78;   /* escala global de la franja: -22% en escritorio */
}
.logo{
  -webkit-mask:var(--logo) no-repeat center/contain;
  mask:var(--logo) no-repeat center/contain;
  background-color:var(--muted);
  transition:background-color var(--dur) var(--ease);
}
.logo:hover{background-color:var(--ink)}
/* Los px por logo son la altura óptica medida (28px x factor por logo);
   la escala real la aplica --logo-s */
.logo--irepack{--logo:url("../img/logos/irepack.png");height:calc(31.8px*var(--logo-s));width:calc(155px*var(--logo-s))}
.logo--alfacae{--logo:url("../img/logos/alfacae.png");height:calc(38px*var(--logo-s));  width:calc(148px*var(--logo-s))}
.logo--ephone {--logo:url("../img/logos/ephone.png"); height:calc(28.8px*var(--logo-s));width:calc(138px*var(--logo-s))}
.logo--nuvex  {--logo:url("../img/logos/nuvex.svg");  height:calc(28px*var(--logo-s));  width:calc(164px*var(--logo-s))}
@media(max-width:620px){
  .logos{gap:var(--s-lg) var(--s-xl);--logo-s:.66}   /* -34% en móvil */
}

/* Marquesina: la franja desliza hacia la izquierda en bucle continuo.
   Dos mitades idénticas y desplazamiento del -50%: el padding-right de cada
   mitad iguala su gap para que el bucle cierre sin salto. */
.logos-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.logos-track{display:flex;width:max-content}
.logos-track .logos{flex-wrap:nowrap}
/* El hueco de cierre del bucle lo genera el propio gap del flex ante un
   ::after vacío: las dos mitades son idénticas por construcción y el -50%
   siempre cierra exacto, sin reglas de padding dependientes de estado. */
.logos-track .logos::after{content:""}
html.fx .logos-track{animation:logos-marquee 36s linear infinite}
html.fx .logos-marquee:hover .logos-track{animation-play-state:paused}
@keyframes logos-marquee{to{transform:translateX(-50%)}}
/* Sin fx (reduced motion, watchdog): franja estática centrada, sin duplicado */
html:not(.fx) .logos-track{width:100%;justify-content:center}
html:not(.fx) .logos-track .logos::after{display:none}
html:not(.fx) .logos-track .logos+.logos{display:none}

/* ============ Testimonios ============ */
.testimonials{display:grid;gap:var(--s-lg);grid-template-columns:repeat(3,minmax(0,1fr))}
.testimonials--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){
  .testimonials,.testimonials--2{grid-template-columns:1fr}
}
.testimonial{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-lg);background:var(--cell);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.testimonial:hover{border-color:#d9cbb2;box-shadow:var(--shadow)}
.testimonial blockquote{font-size:15px;line-height:1.65;color:var(--body)}
.testimonial figcaption{
  margin-top:var(--s-md);padding-top:var(--s-md);
  border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;
}
.testimonial figcaption strong{display:block;color:var(--ink);font-weight:600}
.testimonial figcaption span{color:var(--muted)}

/* Testimonio suelto, centrado y en grande */
.testimonial-solo figcaption{margin-top:var(--s-md);font-size:13px;color:var(--muted)}
.testimonial-solo figcaption strong{color:var(--ink);font-weight:600}

/* ============ FAQ ============ */
.faq{max-width:var(--maxw-prose);margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:var(--s-lg) var(--s-xl) var(--s-lg) 0;position:relative;
  font-family:var(--font-serif);font-size:19px;font-weight:500;
  line-height:1.35;letter-spacing:-.008em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:calc(var(--s-lg) + .5em);
  width:10px;height:10px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);transform-origin:center;
  transition:transform var(--dur) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding-bottom:var(--s-lg)}
.faq details>div p{font-size:15px;line-height:1.7}

/* ============ Formularios ============ */
.form-card{
  max-width:var(--maxw-form);margin-inline:auto;
  background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-xl);box-shadow:var(--shadow);
}

/* Formulario incrustado de GoHighLevel (contacto): el script del proveedor
   ajusta la altura del iframe; el alto inicial evita el colapso mientras carga. */
.form-embed{max-width:660px;margin-inline:auto}
.form-embed iframe{display:block}
.field{margin-bottom:var(--s-md)}
.field label{
  display:block;margin-bottom:6px;
  font-size:13px;font-weight:600;color:var(--ink);
}
.field .req{color:var(--accent-deep)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:var(--font-sans);font-size:15px;color:var(--ink);
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--dur) var(--ease);
}
.field textarea{min-height:88px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field-error{
  display:none;margin-top:6px;font-size:13px;font-weight:500;color:#a4331f;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:#a4331f}
.field[data-invalid="true"] .field-error{display:block}

.field--check{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
/* 24px es el mínimo de WCAG 2.2 SC 2.5.8 para un objetivo pulsable */
.field--check input{width:24px;min-height:24px;height:24px;margin-top:1px;flex:none}
.field--check label{
  font-size:13px;font-weight:450;color:var(--body);line-height:1.55;
  margin-bottom:0;flex:1;
}
.field--check .field-error{flex-basis:100%}

.form-note{margin-top:var(--s-sm);font-size:13px;color:var(--muted);text-align:center;max-width:none}

.form-status{
  padding:var(--s-md);border-radius:var(--r);
  font-size:14px;line-height:1.6;margin-bottom:var(--s-md);
}
.form-status--warn{background:#fdf3e7;border:1px solid #e8b988;color:#7d4f0d}
.form-status--ok{background:var(--accent-wash);border:1px solid var(--accent);color:var(--ink)}
.form-status code{
  font-family:ui-monospace,'Cascadia Mono','Segoe UI Mono',monospace;
  font-size:.9em;background:rgba(22,19,15,.06);padding:1px 5px;border-radius:3px;
}

/* ============ Pasos numerados ============ */
.steps{counter-reset:step}
.steps>*{counter-increment:step}
.steps>*::before{
  content:counter(step);
  display:block;margin-bottom:var(--s-sm);
  font-family:var(--font-serif);font-size:32px;line-height:1;
  color:var(--accent);
}

/* ============ Hero ============ */
.hero{padding-block:var(--s-4xl)}
@media(max-width:900px){.hero{padding-block:var(--s-2xl)}}
/* Compresión del hero en teléfono para ganar altura por encima del pliegue */
@media(max-width:600px){
  .hero{padding-block:var(--s-xl) var(--s-2xl)}
  .hero__grid{gap:var(--s-lg)}
  .hero .lead,.hero .accent-line{margin-top:var(--s-md)}
  .hero .btn--lg{min-height:52px}
}
.hero__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s-3xl);align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr;gap:var(--s-xl)}}
.hero__media img{
  width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);
}

/* ============ Pie ============ */
.footer{background:var(--ink);color:var(--on-dark-mut);padding-block:var(--s-3xl) var(--s-xl)}
.footer a{color:var(--on-dark-mut);text-decoration:none;transition:color var(--dur) var(--ease)}
.footer a:hover{color:var(--on-dark)}
.footer :focus-visible{outline-color:var(--accent)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-xl)}
@media(max-width:800px){.footer__grid{grid-template-columns:1fr;gap:var(--s-lg)}}
.footer__logo{height:30px;width:auto;filter:invert(1);margin-bottom:var(--s-md)}
.footer h2{
  font-family:var(--font-sans);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);
  margin-bottom:var(--s-sm);
}
.footer ul{list-style:none;font-size:14px;line-height:2}
.footer p{font-size:14px;max-width:34ch}
/* LinkedIn de la empresa: único enlace social del sitio, y solo en el pie
   (zona sin conversión). El logotipo es un cuadrado sólido con la marca en
   negativo, así que NO lleva marco: el propio icono ya es la forma. La caja
   de 40px es solo objetivo táctil. */
.footer__social{
  display:inline-flex;align-items:center;justify-content:center;
  /* -9px = los 7px de centrado en la caja táctil + los ~2px de margen interno
     que trae el propio archivo (el cuadrado va de 4 a 46 en un lienzo de 50).
     Así el borde del logotipo cae a plomo con el texto del pie. */
  width:40px;height:40px;margin-top:var(--s-sm);margin-left:-9px;
  color:var(--on-dark-mut);
  transition:color var(--dur) var(--ease);
}
.footer__social:hover{color:var(--on-dark)}
.footer__social svg{width:26px;height:26px;fill:currentColor;display:block}

.footer__bottom{
  margin-top:var(--s-xl);padding-top:var(--s-md);
  border-top:1px solid rgba(245,242,236,.12);
  font-size:13px;max-width:none;
}
.footer--min{padding-block:var(--s-xl);text-align:center;font-size:13px}

/* Botón que se comporta como enlace (Preferencias de cookies en el pie) */
.linklike{
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;text-align:inherit;
}
.footer .linklike{color:var(--on-dark-mut);transition:color var(--dur) var(--ease)}
.footer .linklike:hover{color:var(--on-dark)}

/* ============ Banner de cookies — vestido con los tokens de la marca ============ */
#cc-main{
  --cc-font-family:var(--font-sans);
  --cc-bg:var(--canvas);
  --cc-primary-color:var(--ink);
  --cc-secondary-color:var(--body);
  --cc-btn-primary-bg:var(--ink);
  --cc-btn-primary-color:#fff;
  --cc-btn-primary-hover-bg:var(--ink-2);
  --cc-btn-primary-hover-color:#fff;
  --cc-btn-secondary-bg:var(--warm);
  --cc-btn-secondary-color:var(--ink);
  --cc-btn-secondary-hover-bg:#efece5;
  --cc-btn-secondary-hover-color:var(--ink);
  --cc-btn-border-radius:6px;
  --cc-modal-border-radius:10px;
  --cc-separator-border-color:var(--line);
  --cc-toggle-on-bg:var(--accent);
  --cc-toggle-off-bg:#cfc9bf;
  --cc-toggle-readonly-bg:var(--line);
  --cc-cookie-category-block-bg:var(--cell);
  --cc-cookie-category-block-border:var(--line);
  --cc-cookie-category-block-hover-bg:var(--warm);
  --cc-overlay-bg:rgba(22,19,15,.45);
  --cc-footer-bg:var(--warm);
  --cc-footer-color:var(--muted);
  --cc-modal-margin:16px;
}
#cc-main a{color:var(--accent-deep)}
#cc-main .cm__title,#cc-main .pm__title{font-family:var(--font-serif);font-weight:500;letter-spacing:-.008em}

/* ============ Animaciones de entrada ============ */
/* main.js añade html.fx solo si no hay prefers-reduced-motion, reparte los
   elementos en .reveal con un retardo por posición entre hermanos (--rd) y
   un IntersectionObserver los pasa a .in al entrar en el viewport. */
html.fx .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--rd,0s);
}
html.fx .reveal.in{opacity:1;transform:none}
/* Al imprimir no hay scroll que dispare nada: todo visible */
@media print{html.fx .reveal{opacity:1;transform:none}}

/* Un kicker centrado (hero de la landing) centra también su cuadrado */
.center .kicker{justify-content:center}

/* ============ Arte del hero (home) ============ */
/* Composición abstracta sobre la retícula: módulos desordenados a la
   izquierda que se ordenan en una escalera ascendente — el argumento de la
   firma (de caos a método) dibujado con el módulo de la "P" del logo. */
.hero__art{
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--cell);
}
.hero__art svg{display:block;width:100%;height:auto}
/* El estado oculto inicial vive bajo html.fx: sin él (reduced motion, entorno
   sin ciclo de render, watchdog de main.js) el arte se pinta completo y estático. */
html.fx .hero__art .mod{
  opacity:0;transform:translateY(12px);transform-box:fill-box;
  animation:mod-in .6s var(--ease) forwards;
}
html.fx .hero__art .ghost{opacity:0;animation:ghost-in .9s var(--ease) forwards}
/* La partida no arranca hasta que el tablero entra en pantalla: en móvil el
   arte queda bajo el pliegue y una animación al cargar terminaría sin público.
   El svg recibe .reveal/.in del observador de main.js; eso da el pistoletazo. */
html.fx .hero__art svg.reveal .mod,
html.fx .hero__art svg.reveal .ghost{animation-play-state:paused}
html.fx .hero__art svg.reveal.in .mod,
html.fx .hero__art svg.reveal.in .ghost{animation-play-state:running}
.hero__art .coords text{
  font-family:var(--font-sans);font-size:10px;font-weight:600;
  letter-spacing:.06em;fill:#a89f93;text-anchor:middle;
}
.hero__art .coords .rank{text-anchor:end}
@keyframes mod-in{to{opacity:1;transform:none}}
@keyframes ghost-in{to{opacity:1}}

/* ============ Libro — aggiunta del sito italiano ============
   Unico blocco che il sito spagnolo non ha. Non introduce colori nuovi:
   la copertina è un'immagine, non una variabile dei token. Le ombre e i
   raggi sono quelli già definiti; il finto dorso è una sfumatura di nero
   sull'immagine, non un colore di marca. */
.libro__grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:var(--s-3xl);align-items:center;
}
@media(max-width:900px){.libro__grid{grid-template-columns:1fr;gap:var(--s-xl)}}

/* La copertina come oggetto: bordo hairline, ombra del sistema e un dorso
   accennato sul lato sinistro. Il limite di larghezza evita che in colonna
   piena diventi una torre di 700px. */
.libro__cover{
  position:relative;display:block;
  width:100%;max-width:320px;margin-inline:auto;
  border-radius:var(--r-sm);overflow:hidden;
  box-shadow:var(--shadow);
}
.libro__cover img{display:block;width:100%;height:auto}
.libro__cover::after{
  content:"";position:absolute;inset:0 auto 0 0;width:14px;
  background:linear-gradient(90deg,rgba(22,19,15,.28),rgba(22,19,15,0));
  pointer-events:none;
}
@media(max-width:900px){.libro__cover{max-width:240px}}

/* Riga di richiamo in home: copertina piccola a sinistra, promessa a destra. */
.libro-strip{
  display:grid;grid-template-columns:auto 1fr;
  gap:var(--s-2xl);align-items:center;
}
@media(max-width:700px){
  .libro-strip{grid-template-columns:1fr;gap:var(--s-lg);text-align:center}
  .libro-strip .libro__cover{max-width:180px}
}
.libro-strip .libro__cover{width:180px;margin-inline:0}
@media(max-width:700px){.libro-strip .libro__cover{margin-inline:auto}}

/* Dati del libro: coppie etichetta/valore su una riga hairline, stesso
   linguaggio della retícula delle celle. */
.libro__dati{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.libro__dati div{background:var(--cell);padding:var(--s-md) var(--s-lg)}
.libro__dati dt{
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.libro__dati dd{margin:4px 0 0;font-size:15px;color:var(--ink);font-weight:500}

/* Due bottoni affiancati che su telefono diventano una colonna. */
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-md);align-items:center}
.center .btn-row{justify-content:center}
@media(max-width:520px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
}

/* Un <p class="center"> eredita il max-width:68ch della regola di base sui
   paragrafi: senza margini automatici il testo si centra dentro una scatola
   che però resta a sinistra del contenitore. Si nota su pulsanti e firme
   isolati, fuori da .prose e senza .measure — che i margini ce li hanno già. */
p.center{margin-inline:auto}