/* ══════════════════════════════════════════════════════════════════
   BRAVA HAIR LAB · Fiber x Scalp Studio
   Sistema reutilizado del proyecto Escobar Wellness (trabajo propio):
   imágenes en arco, titular con cursiva de acento, versalitas
   espaciadas, cifras, píldoras de familia, tarjetas compactas,
   proceso numerado, capa a pantalla completa y WhatsApp flotante.
   Identidad de BRAVA: paleta café/crema/camel, Fraunces + Instrument
   Sans, y la trama de líneas onduladas de la marca.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Marca ── */
  --camel:        #B4926F;   /* el color exacto del logo */
  --camel-claro:  #C9A67F;   /* sobre fondo oscuro */
  --camel-hover:  #8E6F4F;
  --camel-texto:  #7A5D40;   /* camel legible como texto sobre claro: 5,2:1 */

  /* ── Oscuros: la marca vive aquí ── */
  --cafe:         #1D160E;
  --cafe-alt:     #2A2118;
  --tabaco:       #3A2E22;

  /* ── Claros ── */
  --crema:        #F4EEE4;
  --arena:        #E7DDCE;
  --lino:         #DCCFBC;

  /* ── Texto ── */
  --tinta:        #241C14;   /* sobre claro */
  --tinta-suave:  #6A5B4B;   /* 5,7:1 sobre crema */
  --crema-texto:  #F4EEE4;   /* sobre oscuro */
  --crema-suave:  #B3A493;   /* 7,4:1 sobre café */

  /* La zona SCALP: mismo mundo, matiz frío (lino desaturado) */
  --frio:         #EAE7E1;
  --frio-alt:     #D8D3CA;

  --linea:    rgba(36,28,20,.16);
  --linea-2:  rgba(36,28,20,.09);
  --linea-o:  rgba(244,238,228,.14);
  --sombra:      0 1px 2px rgba(29,22,14,.05), 0 8px 26px -14px rgba(29,22,14,.28);
  --sombra-alta: 0 2px 6px rgba(29,22,14,.07), 0 26px 60px -26px rgba(29,22,14,.45);

  --f-disp: "Instrument Serif", Georgia, serif;
  --f-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  --nav-h: 66px;
  --wrap: 1220px;
  --r: 16px;

  /* Trama de la marca: líneas onduladas verticales */
  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='140' viewBox='0 0 58 140'%3E%3Cg fill='none' stroke='%23B4926F' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M14 -6 C23 12 5 26 14 44 C23 62 5 76 14 94 C23 112 5 126 14 146'/%3E%3Cpath d='M43 -6 C52 12 34 26 43 44 C52 62 34 76 43 94 C52 112 34 126 43 146'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

html{ overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; overflow-x:clip;
  background:var(--crema); color:var(--tinta);
  font-family:var(--f-body);
  font-size:clamp(1.0625rem,1rem + .22vw,1.125rem);
  line-height:1.7; letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--f-disp); font-weight:400; font-variation-settings:"SOFT" 40,"WONK" 1; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--camel); color:var(--cafe); }
[hidden]{ display:none !important; }

:focus-visible{ outline:2px solid var(--camel); outline-offset:3px; border-radius:4px; }
[tabindex="-1"]:focus{ outline:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--cafe); color:var(--crema-texto);
  padding:.8rem 1.2rem; border-radius:0 0 10px 0; text-decoration:none;
}
.skip:focus{ left:0; }

/* ───────────────────────── La trama de la marca ───────────────────── */
.trama{
  position:absolute; inset:0; pointer-events:none;
  background-image:var(--trama); background-size:58px 140px;
  opacity:.07;
}
.oscuro .trama, .arco .trama, .arco-sm .trama, .arco-hero .trama{ opacity:.10; }
/* El hero va liso: café sobrio, sin la trama de ondas. */
.hero .trama-fondo{ display:none; }
.trama-fondo{ z-index:0; opacity:.06; }

/* ───────────────────────────── Utilidades ─────────────────────────── */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; position:relative; z-index:1; }

.seccion{
  position:relative;
  /* Una sola separación para todas las secciones normales: 56px arriba y
     abajo: 72 arriba y 72 abajo, o sea 144 entre dos secciones seguidas. Las
     bandas estrechas (marquesina, banda de iconos) tienen su propia regla y no
     entran aquí. */
  padding-block:72px;
  /* El titular nunca queda tapado por el menú: alto real + 16 px, lo mide el JS */
  scroll-margin-top:calc(var(--nav-real, var(--nav-h)) + 16px);
}
.oscuro{ background:var(--cafe); color:var(--crema-texto); }
.oscuro h1,.oscuro h2,.oscuro h3,.oscuro h4{ color:var(--crema-texto); }

.seccion-cab{ max-width:46rem; margin-inline:auto; text-align:center; margin-bottom:clamp(2.75rem,6vw,4.5rem); }

.eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--camel-texto);
  display:flex; align-items:center; gap:.7rem; justify-content:center;
  margin-bottom:1.1rem;
}
.oscuro .eyebrow{ color:var(--camel-claro); }
.eyebrow .punto{ width:4px; height:4px; border-radius:50%; background:var(--camel); }

.titulo{
  font-size:clamp(2.5rem,1.6rem + 3.6vw,5.5rem);
  line-height:1.02; letter-spacing:-.03em;
  font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 100;
  text-wrap:balance; margin-bottom:1.5rem;
}
/* La cursiva de acento: la mitad del carácter de la página */
.titulo em, .hero-titulo em{
  font-style:italic; color:var(--camel-texto);
  font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 120;
}
.oscuro .titulo em{ color:var(--camel-claro); }
.titulo-c{ max-width:15ch; margin-inline:auto; }

.parrafo{ color:var(--tinta-suave); max-width:40rem; }
.parrafo + .parrafo{ margin-top:1.1rem; }
.parrafo.centro{ margin-inline:auto; }
.parrafo.destacado{ font-size:1.1em; color:var(--tinta); }
.oscuro .parrafo{ color:var(--crema-suave); }
.oscuro .parrafo.destacado{ color:var(--crema-texto); }

.num{
  font-family:var(--f-disp); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--camel-texto); margin-bottom:.85rem;
}
.oscuro .num{ color:var(--camel-claro); }

.nota-trabajo{
  display:inline-block; margin-top:1.25rem;
  font-size:.73rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--camel-texto); background:rgba(180,146,111,.12);
  border:1px solid rgba(180,146,111,.3);
  padding:.42rem .9rem; border-radius:999px;
}
.pendiente{
  display:inline-block;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--camel-texto); background:rgba(180,146,111,.12);
  border:1px dashed rgba(180,146,111,.45);
  padding:.32rem .75rem; border-radius:999px;
}
.oscuro .pendiente, .c-card-wa .pendiente{ color:var(--camel-claro); background:rgba(201,166,127,.14); border-color:rgba(201,166,127,.4); }
.pendiente-mini{ font-size:.64rem; padding:.24rem .6rem; }
.cargando{ color:var(--tinta-suave); font-size:.92rem; }

/* ─────────────────────────── Revelados ────────────────────────────── */
/* Solo se esconde si hay JS para volver a mostrarlo. Sin JS no se aplica
   nada de esto y la página se lee entera. */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  /* Red de seguridad en CSS: si el JS no llega a cargar, a los 5 s el
     contenido se muestra igualmente. Nunca una página en blanco. */
  animation:revelarSeguro .01s 5s forwards;
}
@keyframes revelarSeguro{ to{ opacity:1; transform:none; } }
.js .reveal.is-visible{ opacity:1; transform:none; }
.js .reveal[data-split]{ opacity:1; transform:none; }

/* Las fotos aparecen y ya: ni desplazamiento ni atenuado. Alcanza a los marcos
   que llevan el revelado encima y a las tarjetas construidas alrededor de una
   foto, porque si se desplaza la tarjeta se desplaza la foto con ella. Los
   bloques de solo texto conservan su entrada. */
.js .reveal.comparador,
.js .reveal.paso,
.js .reveal.piso,
.js .reveal.abordaje,
.js .reveal.fam-bloque,
.js .reveal.arco,
.js .reveal.arco-sm,
.js .reveal.arco-hero{
  opacity:1; transform:none; transition:none; animation:none;
}

.ln{
  display:block; overflow:hidden;
  /* La cursiva sobresale por los dos lados: si el recorte va justo al texto,
     se come la E de «Evolved.» y el punto final. */
  padding:0 .16em .07em .14em; margin-inline:-.14em -.16em;
}
.ln-i{ display:block; }
.js .ln-i{ transform:translateY(106%); transition:transform 1s var(--ease); }
.js [data-split].is-in .ln-i{ transform:none; }
[data-split] .ln:nth-child(2) .ln-i{ transition-delay:.09s; }
[data-split] .ln:nth-child(3) .ln-i{ transition-delay:.18s; }

.js [data-escalonado] > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
  animation:revelarSeguro .01s 5s forwards;
}
.js [data-escalonado].is-visible > *{ opacity:1; transform:none; }
.js [data-escalonado].is-visible > *:nth-child(2){ transition-delay:.07s; }
.js [data-escalonado].is-visible > *:nth-child(3){ transition-delay:.14s; }
.js [data-escalonado].is-visible > *:nth-child(4){ transition-delay:.21s; }
.js [data-escalonado].is-visible > *:nth-child(5){ transition-delay:.28s; }
.js [data-escalonado].is-visible > *:nth-child(6){ transition-delay:.35s; }
.js [data-escalonado].is-visible > *:nth-child(7){ transition-delay:.42s; }

/* ──────────────────────────── Botones ─────────────────────────────── */
.btn{
  --btn-bg:var(--cafe); --btn-fg:var(--crema-texto);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  padding:.95rem 1.7rem; border-radius:999px; border:1px solid transparent;
  font-size:.92rem; font-weight:500; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  box-shadow:0 1px 2px rgba(29,22,14,.08);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.btn-sm{ padding:.6rem 1.15rem; font-size:.84rem; }
.btn-grande{ padding:1.1rem 2.1rem; font-size:1rem; }
.btn-acento{ --btn-bg:var(--camel); --btn-fg:var(--cafe); }
.btn-acento:hover{ --btn-bg:var(--camel-hover); --btn-fg:var(--crema-texto); }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--tinta); border-color:var(--linea); box-shadow:none; }
.btn-ghost:hover{ --btn-bg:var(--arena); border-color:rgba(36,28,20,.28); }
.btn-claro{ --btn-fg:var(--crema-texto); border-color:var(--linea-o); }
.btn-claro:hover{ --btn-bg:rgba(244,238,228,.08); border-color:var(--camel-claro); }
/* El botón de WhatsApp: letra blanca sobre verde, como la marca.
   El verde oficial #25D366 con blanco da 1.98:1, inaceptable para un texto.
   Este es el mismo tono (142°) y la misma saturación, solo bajado de
   luminosidad hasta que el blanco pasa el 4.5:1 exigido, con un punto de
   margen: #17833F da 4.82:1. Sigue siendo verde WhatsApp, más oscuro. */
.btn-wa{ --btn-bg:#17833F; --btn-fg:#FFFFFF; font-weight:600; }
.btn-wa:hover{ --btn-bg:#136E35; --btn-fg:#FFFFFF; }
.btn-chispa{ font-size:.85em; opacity:.9; transition:transform .5s var(--ease); }
.btn:hover .btn-chispa{ transform:rotate(90deg) scale(1.15); }
.ic-wa{ display:inline-flex; }

/* Iconos de línea: sin relleno. Sin esta regla el SVG se pinta en negro. */
.ic{ width:42px; height:42px; }
/* Vale para path y para circle: el icono de embarazo usa los dos. */
.ic path, .ic circle{ fill:none; stroke:var(--camel); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ──────────────── Marco de arco: la firma visual del sistema ───────── */
.arco,.arco-sm,.arco-hero{
  position:relative; margin:0; overflow:hidden;
  background:var(--lino); box-shadow:var(--sombra);
}
.arco{ border-radius:50% 50% 14px 14px / 30% 30% 2% 2%; }
.arco-hero{ border-radius:50% 50% 18px 18px / 34% 34% 2% 2%; }
.arco-sm{ border-radius:50% 50% 12px 12px / 22% 22% 2% 2%; }
.oscuro .arco, .oscuro .arco-sm, .oscuro .arco-hero{ background:var(--cafe-alt); }

.arco img,.arco-sm img,.arco-hero img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  /* Tratamiento común: unifica fotos de origen distinto */
  filter:saturate(.86) contrast(1.04) brightness(1.02) sepia(.08);
}
/* Velo cálido en camel: iguala la temperatura de todas las fotos */
.arco::after,.arco-sm::after,.arco-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(155deg, rgba(180,146,111,.22), rgba(244,238,228,.08) 45%, rgba(29,22,14,.16));
  mix-blend-mode:soft-light;
}
.arco::before,.arco-hero::before,.arco-sm::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(244,238,228,.24); border-radius:inherit;
}
/* El isotipo en marca de agua, mientras no hay foto */
.arco .trama::after,.arco-sm .trama::after,.arco-hero .trama::after{
  content:""; position:absolute; inset:0;
  background:url("assets/img/marca/isotipo.webp") center / min(44%,190px) no-repeat;
  opacity:.5;
}
.llena .trama{ display:none; }
.llena .foto-tag{ display:none; }

.foto-tag{
  position:absolute; left:12px; bottom:12px; z-index:4;
  padding:.28rem .6rem; border-radius:999px;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--camel-claro); background:rgba(29,22,14,.62);
  border:1px solid rgba(180,146,111,.45);
  backdrop-filter:blur(3px);
}

/* ───────────────────────────── Nav ────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:90;
  background:rgba(244,238,228,0); border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.is-fija{ background:var(--crema); border-bottom-color:var(--linea-2); box-shadow:0 1px 24px -12px rgba(29,22,14,.34); }
/* Sobre la portada, que es café, el menú va en claro. Al fijarse vuelve al
   crema y el texto recupera la tinta. */
.nav:not(.is-fija){ background:var(--cafe); }
.nav:not(.is-fija) .logo-txt,
.nav:not(.is-fija) .nav-links a{ color:var(--crema-texto); }
.nav:not(.is-fija) .logo-txt em{ color:var(--crema-suave); }
.nav:not(.is-fija) .nav-links a:hover{ color:var(--camel-claro); }
.nav:not(.is-fija) .burger{ border-color:var(--linea-o); }
.nav:not(.is-fija) .burger span{ background:var(--crema-texto); }
@supports (backdrop-filter:blur(14px)){
  .nav.is-fija{ background:rgba(244,238,228,.94); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); }
}
.nav-in{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  height:var(--nav-h); display:flex; align-items:center; gap:1.5rem;
  transition:height .4s var(--ease);
}
.nav.is-fija .nav-in{ height:calc(var(--nav-h) - 8px); }
.logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.logo img{ height:30px; width:auto; }
.logo-txt{ display:flex; flex-direction:column; line-height:1.2; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; }
.logo-txt em{ font-style:normal; font-size:.56rem; letter-spacing:.2em; color:var(--tinta-suave); }
.nav-links{ display:flex; gap:1.6rem; }
.nav-links a{ position:relative; text-decoration:none; font-size:.89rem; color:var(--tinta-suave); padding-block:.35rem; transition:color .3s var(--ease); }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav-links a:hover{ color:var(--tinta); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-cta{ --btn-bg:var(--camel); --btn-fg:var(--cafe); }
.nav-cta:hover{ --btn-bg:var(--camel-hover); --btn-fg:var(--crema-texto); }

.burger{ display:none; position:relative; width:42px; height:42px; border:1px solid var(--linea); background:transparent; border-radius:999px; cursor:pointer; padding:0; }
.burger span{ position:absolute; left:50%; top:50%; width:17px; height:1.5px; background:var(--tinta); border-radius:2px; transition:transform .4s var(--ease); }
.burger span:first-child{ transform:translate(-50%,-50%) translateY(-3.5px); }
.burger span:last-child{ transform:translate(-50%,-50%) translateY(3.5px); }
.burger[aria-expanded="true"] span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:88; background:var(--crema);
  padding:calc(var(--nav-h) + 2rem) 1.5rem 2rem;
  display:flex; flex-direction:column; justify-content:flex-start; gap:1.2rem;
  /* Con el acordeón de servicios el menú puede pasar del alto de la pantalla:
     tiene que poder desplazarse o las últimas entradas quedan inalcanzables. */
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .4s var(--ease);
}
.menu.is-abierto{ opacity:1; }
.menu nav{ display:flex; flex-direction:column; gap:.3rem; }
.menu nav a{ font-family:var(--f-disp); font-size:clamp(1.5rem,6.5vw,2rem); text-decoration:none; padding-block:.35rem; border-bottom:1px solid var(--linea-2); font-variation-settings:"SOFT" 60,"WONK" 1; }
.menu-cta{ align-self:flex-start; }
.menu-pie{ font-size:.85rem; color:var(--tinta-suave); font-style:normal; }
.menu-pie span{ font-size:.75rem; opacity:.7; }
/* La dirección es un enlace a Google Maps: se subraya para que se vea que lo
   es, sin gritarlo. <address> viene en cursiva por defecto en el navegador y
   aquí no la queremos. */
.menu-pie a, .pie-datos address a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--linea-o); padding-bottom:.1rem; }
.menu-pie a{ border-bottom-color:var(--linea); }
.menu-pie a:hover, .pie-datos address a:hover{ border-bottom-color:var(--camel); }
.pie-datos address{ font-style:normal; line-height:1.55; }
.c-card address a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(29,22,14,.35); padding-bottom:.12rem; }
.c-card address a:hover{ border-bottom-color:var(--cafe); }


.hero{
  position:relative; overflow:hidden;
  background:var(--cafe); color:var(--crema-texto);
}
.hero h1{ color:var(--crema-texto); }
.hero .eyebrow{ color:var(--camel-claro); justify-content:flex-start; }
.hero em{ color:var(--camel-claro); }
.hero .btn-ghost{ --btn-fg:var(--crema-texto); border-color:var(--linea-o); }
.hero .btn-ghost:hover{ --btn-bg:rgba(244,238,228,.08); border-color:var(--camel-claro); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* Las escenas y sus mandos son comunes a las dos propuestas */
.escena{
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity 1.1s var(--ease);
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(180,146,111,.30), transparent 62%),
    linear-gradient(152deg, #2E2825 0%, #1C1917 55%, #241F1C 100%);
}
.escena.esta-activa{ opacity:1; }
.escena img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.escena .trama::after{
  content:""; position:absolute; inset:0;
  background:url("assets/img/marca/isotipo.webp") center / min(44%,190px) no-repeat; opacity:.45;
}
.marco-tag{ position:absolute; left:14px; bottom:14px; z-index:6; }
/* En el marco de curvas, la esquina inferior izquierda queda fuera de la
   forma: la etiqueta va centrada abajo, donde sí hay superficie. */
.ha-marco .marco-tag{ left:50%; transform:translateX(-50%); bottom:16px; }
.marco-tag .foto-tag{ position:static; }
.marco-mandos{ display:flex; align-items:center; gap:.5rem; }
.marco-flecha{
  width:32px; height:32px; border-radius:50%; flex:none; padding:0;
  border:1px solid var(--linea-o); background:transparent; color:var(--crema-suave);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.marco-flecha:hover{ border-color:var(--camel-claro); color:var(--crema-texto); }
.marco-puntos{ display:flex; gap:.45rem; align-items:center; }
.marco-puntos button{ width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(244,238,228,.3); transition:background .3s var(--ease), transform .3s var(--ease); }
.marco-puntos button:hover{ background:var(--crema-suave); }
.marco-puntos button[aria-current="true"]{ background:var(--camel); transform:scale(1.5); }

/* ──────────── Portada · carrusel de cuatro banners ────────────
   La foto va en <img> y no como background: así el generador le pone la
   ruta relativa (relativas() toca src, no los style) y la primera se puede
   precargar. Las cuatro traen la mitad izquierda oscura y vacía, que es
   donde cae el texto.
   Los cuatro banners se apilan en la MISMA celda de rejilla: así la sección
   mide lo que el más alto y no da saltos al cambiar. */
.hero-ban{ padding:0; display:grid; grid-template-columns:1fr;
  min-height:calc(100svh - var(--tope,66px) - var(--banda-h,170px)); }
.ban-pista{ grid-area:1/1; display:grid; grid-template-columns:1fr; }
.ban{
  grid-area:1/1; position:relative; display:flex; align-items:center;
  padding-block:clamp(2rem,5vh,3.5rem);
  padding-inline:calc((100% - min(100% - 2.5rem, var(--wrap))) / 2);
  opacity:0; transition:opacity .8s ease;
}
/* visibility corta el foco del teclado en los banners ocultos: sin esto se
   tabula a botones que no se ven. */
.ban:not(.esta-activa){ visibility:hidden; }
.ban.esta-activa{ opacity:1; visibility:visible; }
.ban-foto{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
}
/* El rostro del cuarto banner está bajo en la foto: con el encuadre centrado
   el recorte le corta la barbilla en cuanto la sección es ancha y baja. */
.ban-foto-rostro-bajo{ object-position:50% 82%; }
/* Y el del segundo está arriba del todo: el capilógrafo empieza a un 1 % del
   borde superior, así que el recorte tiene que arrancar en 0 o lo decapita. */
.ban-foto-sujeto-alto{ object-position:50% 0%; }
/* Velo del café de marca (#1D160E), no negro: fuerte sobre la mitad del
   texto y casi nulo sobre la de la foto, para no apagar al sujeto.
   Los valores salen de medir, no de calcular: la mitad izquierda no está
   tan vacía como parece —la camisa clara del banner 1 llega hasta un
   tercio del ancho— y con el velo flojo el párrafo caía a 2,2:1. */
.ban-velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to right,
    rgba(29,22,14,.91) 0%,
    rgba(29,22,14,.88) 42%,
    rgba(29,22,14,.55) 72%,
    rgba(29,22,14,.18) 100%);
}
/* El ancho NO va aquí: si el contenedor lo limita, la fila de tres
   botones se parte. Lo lleva cada texto por su cuenta. */
.ban-txt{ position:relative; z-index:2;
  /* La bajada del h1 y el párrafo van uno encima del otro: cortan a la
     misma medida o se ven desalineados. Antes eran 34ch y 30rem, que con
     cuerpos de letra distintos daban 391 y 480 px. */
  --ban-medida:30rem;
}
.ban-ante{ justify-content:flex-start; margin-bottom:clamp(.7rem,1.3vh,1.05rem); }
.ban-titulo{ max-width:38rem; line-height:.95; letter-spacing:-.03em; text-wrap:balance; }
h1.ban-titulo{ font-size:clamp(56px,7.4vw,124px); line-height:.9; letter-spacing:-.035em; }
/* Los otros tres no son un logotipo sino una frase: con el cuerpo del h1 se
   comen el banner entero.
   Y respiran más que el primero: el h1 lleva debajo su segunda línea, que
   ya separa el titular del párrafo. Aquí no hay nada en medio, así que con
   los 12 y 16 px de serie el antetítulo, el titular y el párrafo quedaban
   casi pegados. El margen va en el propio h2 porque entre hermanos de
   bloque los márgenes se funden: manda el mayor, no la suma. */
h2.ban-titulo{
  font-size:clamp(2.1rem,1.2rem + 2.6vw,3.7rem);
  margin-top:clamp(1.5rem,3.2vh,2.2rem);
  margin-bottom:clamp(1.7rem,3.6vh,2.5rem);
}
.ban-titulo em{ font-style:italic; }
.ban-titulo-g{ display:block; }
/* La segunda línea vive dentro del mismo h1, pero no hereda su cuerpo. */
.ban-titulo-sub{
  display:block; font-family:var(--f-body); font-weight:400;
  font-variation-settings:normal; text-transform:none;
  margin-top:.8rem; max-width:var(--ban-medida);
  font-size:clamp(.92rem,.86rem + .3vw,1.08rem); line-height:1.45;
  letter-spacing:.01em; color:var(--crema-suave);
}
/* 30rem y no más: con el párrafo más ancho la última palabra de cada
   línea se metía en la zona clara de la foto. */
.ban-sub{ margin-top:clamp(.9rem,1.7vh,1.35rem); color:var(--crema-suave);
  max-width:var(--ban-medida); font-size:clamp(1.02rem,.94rem + .36vw,1.22rem); line-height:1.55; }
.ban-ctas{ margin-top:clamp(1.1rem,2.2vh,1.7rem); display:flex; flex-wrap:wrap; gap:.8rem; }
/* El enlace propio de cada banner: texto con flecha, no un cuarto botón,
   para que no compita con los tres de agendar. */
.ban-enlace{ margin-top:clamp(.85rem,1.6vh,1.15rem); }
.ban-enlace a{ display:inline-flex; align-items:center; gap:.5rem;
  font-size:.95rem; letter-spacing:.01em; color:var(--camel-claro);
  border-bottom:1px solid rgba(201,166,127,.4); padding-bottom:2px;
  transition:color .2s, border-color .2s; }
.ban-enlace a:hover{ color:var(--crema-texto); border-color:var(--crema-texto); }
.ban-enlace span{ transition:transform .2s; }
.ban-enlace a:hover span{ transform:translateX(3px); }
.ban-ctas .btn{ padding:1.05rem 1.7rem; font-size:1rem; white-space:nowrap; }

/* Los mandos, en la misma celda que los banners y abajo a la izquierda,
   alineados con la columna de texto. */
.ban-mandos{
  grid-area:1/1; z-index:3; align-self:end; justify-self:end;
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:clamp(1.1rem,2.6vh,1.9rem);
  margin-inline-end:calc((100% - min(100% - 2.5rem, var(--wrap))) / 2);
}
.ban-flecha, .ban-pausa{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  color:var(--crema-texto); background:rgba(29,22,14,.5);
  border:1px solid var(--linea-o); transition:background .2s, border-color .2s;
}
.ban-flecha:hover, .ban-pausa:hover{ background:rgba(29,22,14,.8); border-color:var(--camel-claro); }
/* El botón trae los dos iconos y se enseña el que toca: así no hay que
   escribir SVG desde el JS. */
.ban-pausa svg:last-child{ display:none; }
.ban-pausa[aria-pressed="true"] svg:first-child{ display:none; }
.ban-pausa[aria-pressed="true"] svg:last-child{ display:block; }
.ban-puntos{ display:flex; align-items:center; gap:.5rem; list-style:none; margin:0 .3rem; padding:0; }
.ban-puntos button{
  display:block; width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(244,238,228,.35); border:0; transition:background .25s, transform .25s;
}
.ban-puntos button:hover{ background:rgba(244,238,228,.6); }
.ban-puntos button[aria-current="true"]{ background:var(--camel-claro); transform:scale(1.35); }

/* ────────────── Banda de sellos, pegada a la portada ────────────── */
.banda-apto{
  position:relative; overflow:hidden;
  background:var(--crema); color:var(--tinta);
  padding-block:clamp(1.35rem,2.4vw,1.9rem);
  border-bottom:1px solid var(--linea-2);
}
/* La tira se desliza sola, en bucle. El JS duplica los siete sellos y pone
   la duración a partir del ancho medido, para que la velocidad sea la misma
   en cualquier pantalla: 26 px por segundo, que da tiempo a leer cada sello.
   Sin JS no hay duplicado, y entonces no se anima: media tira deslizándose
   dejaría un hueco. Se para al pasar el cursor y al entrar el foco. */
.apto-fila{ display:flex; align-items:stretch; gap:clamp(1.6rem,3.4vw,3.2rem); }
.apto-fila.en-bucle{ width:max-content; animation:sellos var(--sellos-dur,70s) linear infinite; }
.banda-apto:hover .apto-fila, .banda-apto:focus-within .apto-fila{ animation-play-state:paused; }
@keyframes sellos{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.apto-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.7rem; flex:0 0 auto;
  --ic-caja:clamp(48px,4.2vw,62px);
}
.apto-item .ic{ width:var(--ic-caja); height:var(--ic-caja); flex:none; }
/* Trazo fino: el icono es grande, así que la línea se afina para que no pese */
/* Alcanza a path y a circle: el icono de embarazo usa los dos, y con la
   regla solo sobre path el círculo se quedaba con otro grosor y otro
   color que el resto de la fila. */
.apto-item .ic path, .apto-item .ic circle{ stroke:var(--camel-texto); stroke-width:1.15; }
/* El icono de embarazo viene con su propio grosor y tamaño ya medidos, así
   que NO lleva la clase .ic: esas reglas le pisarían el stroke-width. Aquí
   solo se le da el color, que su trazo toma de currentColor, para que herede
   el mismo que los otros seis de la fila. */
.ic-embarazo{ color:var(--camel-texto); margin-block:calc((var(--ic-caja) - 38px) / 2); }
/* Su caja mide 38 px fijos y la de los otros seis escala de 48 a 62, así que
   sin este hueco su etiqueta subiría 11 px y rompería la línea de la fila.
   El margen se calcula solo a partir de --ic-caja: es hueco alrededor, el
   icono sigue midiendo 38. */
.apto-t{ font-size:clamp(.74rem,.6rem + .28vw,.82rem); line-height:1.35; color:var(--tinta); white-space:nowrap; }

/* ─────────────────────────── Marquesina ───────────────────────────── */
.marquesina{ overflow:hidden; background:var(--arena); border-block:1px solid var(--linea-2); padding-block:.9rem; }
.marquesina-pista{
  display:flex; align-items:center; gap:1.5rem; width:max-content;
  animation:marq 28s linear infinite;
  font-family:var(--f-disp); font-size:1.05rem; color:var(--tinta-suave);
  font-variation-settings:"SOFT" 70,"WONK" 1;
}
.marquesina-pista i{ color:var(--camel); font-style:normal; font-size:.7rem; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ───────────────────── Comparador antes / después ──────────────────── */
.antesdespues{ background:var(--crema); }
/* La sección va apretada para caber en una pantalla de 900 px: marcos más
   bajos, pareja más estrecha y cabecera con poco aire.
   El titular NO se achica: usa el mismo tamaño que los del resto de secciones.
   Antes tenía una regla propia que lo topaba en 2.4rem contra los 5.5rem del
   estándar, y cantaba al lado de los demás. */
.antesdespues .seccion-cab{ margin-bottom:clamp(.7rem,1.3vw,1rem); }
.antesdespues .seccion-cab .parrafo{ font-size:.94rem; max-width:52rem; }
.comparadores{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,3vw,2rem); max-width:900px; margin-inline:auto; }
.comparador{
  --p:50%;
  position:relative; margin:0; aspect-ratio:3/4; overflow:hidden;
  border-radius:50% 50% 14px 14px / 30% 30% 2% 2%;
  background:var(--lino); box-shadow:var(--sombra); touch-action:pan-y;
}
.cmp-cara{ position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 22% 12%, var(--oro-22, rgba(180,146,111,.2)), transparent 62%),
    linear-gradient(152deg, var(--lino) 0%, var(--arena) 52%, var(--lino) 100%); }
.cmp-despues{ background:
    radial-gradient(120% 90% at 78% 14%, rgba(180,146,111,.3), transparent 62%),
    linear-gradient(152deg, var(--arena) 0%, var(--crema) 52%, var(--arena) 100%); }
.cmp-cara img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) contrast(1.04) brightness(1.02) sepia(.08); }
.cmp-cara .trama::after{
  content:""; position:absolute; inset:0;
  background:url("assets/img/marca/isotipo.webp") center / min(40%,170px) no-repeat; opacity:.42;
}
/* La cara "antes" se recorta hasta donde esté el tirador */
.cmp-antes{ clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.cmp-tirador{ position:absolute; top:0; bottom:0; left:var(--p); width:2px; z-index:5;
  background:var(--crema); transform:translateX(-1px); pointer-events:none;
  box-shadow:0 0 14px rgba(29,22,14,.35); }
.cmp-tirador i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--crema); border:1px solid var(--camel);
  box-shadow:var(--sombra-alta);
}
.cmp-tirador i::before, .cmp-tirador i::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-block:5px solid transparent;
}
.cmp-tirador i::before{ left:11px; border-right:7px solid var(--camel-texto); transform:translateY(-50%); }
.cmp-tirador i::after{ right:11px; border-left:7px solid var(--camel-texto); transform:translateY(-50%); }
.cmp-rango{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; z-index:6; cursor:ew-resize; }
.cmp-rango:focus-visible + .cmp-et{ outline:none; }
.comparador:focus-within{ outline:2px solid var(--camel); outline-offset:3px; }
/* Las etiquetas van ABAJO, no arriba. El marco tiene forma de arco: el radio
   de arriba es 30 % del alto, así que cualquier cosa pegada a una esquina
   superior queda fuera de la silueta y el overflow la corta. Ahí estas dos
   píldoras se veían como dos medias lunas oscuras sin texto, que parecían un
   fondo asomando por detrás de la foto. Abajo el radio es del 2 %, o sea
   prácticamente recto, y caben enteras. */
.cmp-et{
  /* 1.4rem, a juego con el 1.1 de los lados. Estaban a 3.4 para dejar sitio a
     la nota que iba debajo; sin ella, ese hueco no lo justificaba nada. */
  position:absolute; bottom:1.4rem; z-index:5;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.28rem .7rem; border-radius:999px;
  background:rgba(29,22,14,.6); color:var(--crema-texto); border:1px solid var(--linea-o);
}
.cmp-et-a{ left:1.1rem; }
.cmp-et-b{ right:1.1rem; }
.comparador .foto-tag{ bottom:auto; top:3.4rem; }

.banda-cta{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  background:var(--cafe); color:var(--crema-texto); border-radius:20px;
  padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,4vw,2.5rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
}
/* En la sans del sitio, no en la serif de titulares: era el único texto
   corrido de la web en serif y desentonaba. Sube el peso para que siga
   pesando como llamada y no se lea como un párrafo cualquiera. */
.banda-cta p{ font-family:var(--f-body); font-size:clamp(1.05rem,.95rem + .6vw,1.35rem); font-weight:500; line-height:1.45; letter-spacing:0; max-width:34ch; }

/* ─────────────────────────── Dos abordajes ────────────────────────── */
/* La cabecera de esta sección se separa la mitad que en el resto: entre la
   bajada y las imágenes sobraba aire. 72px medidos → 36. */
#abordajes .seccion-cab{ margin-bottom:clamp(1.4rem,3vw,2.25rem); }
.abordaje-par{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.8rem,4vw,3.5rem); }
/* El marco se queda en 1:1 y lo que baja es su tamaño: a la mitad de ancho,
   la mitad de alto. Pasarlo a una banda 2:1 habría recortado la foto por arriba
   y por abajo, y en la de la melena eso se come justo las puntas.
   El ancho va explícito y por eso se puede centrar con margin auto: un figure
   vacío no tiene contenido en flujo, así que con margin:auto y sin ancho
   declarado se quedaría en cero. Con el 50 % puesto, el centrado es seguro. */
.abordaje .arco{ aspect-ratio:1/1; width:62.5%; margin:0 auto 1.4rem; }
.abordaje-cta{ margin-top:1.2rem; }
.abordaje-t{ font-size:clamp(2rem,1.6rem + 1.8vw,3rem); letter-spacing:-.025em; margin-bottom:.8rem; }
.abordaje-n{ margin-top:1.1rem; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); }
.abordaje-frio .arco{ background:var(--frio-alt); }

/* ──────────────────────── Proceso numerado ────────────────────────── */
.metodo{ background:var(--arena); }
.pasos{ display:grid; gap:clamp(2.5rem,5vw,4rem); max-width:1000px; margin-inline:auto; position:relative; }
.pasos::before{ content:""; position:absolute; left:calc(24% + 1px); top:4%; bottom:4%; width:1px; background:linear-gradient(to bottom, transparent, var(--linea), transparent); }
.paso{ display:grid; grid-template-columns:24% 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.paso figure{ margin:0; aspect-ratio:3/4; }
.paso-txt{ padding-left:clamp(.5rem,2vw,1.5rem); }
.paso-n{ font-family:var(--f-disp); font-size:.8rem; letter-spacing:.22em; color:var(--camel-texto); margin-bottom:.7rem; }
.paso-txt h3{ font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem); letter-spacing:-.025em; margin-bottom:.7rem; }
.paso-txt p{ color:var(--tinta-suave); max-width:36rem; }
/* Va entre el título y el párrafo, no debajo de todo: el margen de arriba
   lo pone ya el h3. */
.paso-t{ margin-bottom:.75rem; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--camel-texto); }
/* Desalineadas en vertical entre un paso y el siguiente */
.paso:nth-child(even) figure{ transform:translateY(14px); }

/* ──────────────────────────── Cita de marca ───────────────────────── */

/* ──────────────────────────── El catálogo ─────────────────────────── */
/* Ninguna de las dos filas de pestañas se fija: el menú ya es fijo. */
.fam-tabs{ display:flex; gap:.55rem; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,3.5rem); position:relative; z-index:1; }
.fam{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--crema); border:1px solid var(--linea); border-radius:999px;
  padding:.62rem 1.25rem; font-size:.86rem; color:var(--tinta-suave); cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.fam span{ font-size:.72rem; color:var(--camel-texto); background:rgba(180,146,111,.16); border-radius:999px; min-width:1.5rem; padding:.05rem .45rem; text-align:center; }
.fam:hover{ border-color:var(--camel); color:var(--tinta); transform:translateY(-2px); }
.fam[aria-selected="true"]{ background:var(--cafe); color:var(--crema-texto); border-color:var(--cafe); }
.fam[aria-selected="true"] span{ background:rgba(244,238,228,.16); color:var(--camel-claro); }


.fam-cab{ display:grid; grid-template-columns:.42fr .58fr; gap:clamp(1.8rem,5vw,4rem); align-items:center; margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.fam-fig{ aspect-ratio:4/5; }
.fam-titulo{ font-size:clamp(1.8rem,1.3rem + 2vw,2.9rem); letter-spacing:-.028em; line-height:1.06; margin-bottom:1rem; }
.grupo-cab{ max-width:46rem; margin-bottom:1.8rem; }
.grupo-sep{ margin-top:clamp(2.5rem,5vw,4rem); }
.grupo-titulo{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); letter-spacing:-.025em; margin-bottom:.7rem; }

.ciencia{ margin:2rem 0; }
.ciencia-et{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--camel-texto); margin-bottom:1rem; }
.ciencia-par{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.ciencia-col{ background:var(--arena); border:1px solid var(--linea-2); border-radius:var(--r); padding:1.5rem 1.4rem; }
.ciencia-si{ background:var(--cafe); color:var(--crema-texto); border-color:transparent; }
.ciencia-cab{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); margin-bottom:.9rem; }
.ciencia-si .ciencia-cab{ color:var(--camel-claro); }
.ciencia-col ul{ display:grid; gap:.7rem; }
.ciencia-col li{ font-size:.93rem; line-height:1.55; padding-left:1.1rem; position:relative; color:var(--tinta-suave); }
.ciencia-si li{ color:var(--crema-suave); }
.ciencia-col li::before{ content:"✦"; position:absolute; left:0; font-size:.62rem; color:var(--camel); top:.35em; }

.sellos{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.8rem 0; }
.sellos-centro{ justify-content:center; margin-top:clamp(2.5rem,5vw,3.5rem); }
.sellos li{ padding:.42rem 1rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-suave); border:1px solid var(--linea); border-radius:999px; }

.avisos-par{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin:1.8rem 0 2.4rem; }
.aviso-nota{ padding-left:1.1rem; border-left:2px solid var(--camel); font-size:.92rem; color:var(--tinta-suave); line-height:1.65; }
.aviso-medico{
  background:rgba(180,146,111,.1); border:1px solid rgba(180,146,111,.35);
  border-radius:var(--r); padding:1.3rem 1.5rem; margin:2rem 0;
  font-size:.96rem; color:var(--tinta); max-width:58rem;
}

.ideas-par{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin:0 0 2.4rem; }
.idea{ background:var(--arena); border:1px solid var(--linea-2); border-radius:var(--r); padding:1.7rem 1.6rem; }
.idea-marcada{ background:var(--cafe); color:var(--crema-texto); border-color:transparent; }
.idea h5{ font-size:1.25rem; letter-spacing:-.02em; margin-bottom:.7rem; }
.idea p{ font-size:.93rem; line-height:1.66; color:var(--tinta-suave); }
.idea-marcada p{ color:var(--crema-suave); }
.idea-pie{ margin-top:.8rem; font-size:.8rem !important; letter-spacing:.06em; }

/* Tarjetas compactas */

.descansos{ margin-top:2.2rem; background:var(--arena); border:1px solid var(--linea-2); border-radius:var(--r); padding:1.5rem 1.6rem; max-width:44rem; }
.descansos-t{ font-family:var(--f-disp); font-size:1.15rem; margin-bottom:.9rem; }
.descansos ul{ display:grid; gap:.55rem; }
.descansos li{ font-size:.93rem; color:var(--tinta-suave); display:flex; gap:.7rem; }
.descansos span{ color:var(--camel); font-size:.65rem; margin-top:.45rem; }


/* ──────────────────────────── Tecnología ──────────────────────────── */

/* ───────────────────────── Los dos espacios ───────────────────────── */
.espacios{ background:var(--arena); }
.pisos{ display:grid; gap:clamp(3rem,6vw,4.5rem); }
.piso{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,5vw,4rem); align-items:center; }
.piso:nth-child(even) .piso-fig{ order:2; }
.piso-fig{ aspect-ratio:3/2; }
.piso-frio .piso-fig{ background:var(--frio-alt); }
.piso-txt h3{ font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem); letter-spacing:-.028em; margin-bottom:.9rem; }

/* ── El cruce de pisos ─────────────────────────────────────────────────
   Subir de piso: el Piso 1 se va hacia arriba mientras el Piso 2 entra
   desde abajo y acaba cubriéndolo. Se apoya en position:sticky, o sea que
   el scroll sigue siendo el del navegador: no se bloquea, no se secuestra
   y no hay pin de ningún tipo. GSAP solo añade el desplazamiento y el
   atenuado, enganchados al scroll (scrub).
   La clase .cruce la pone el JS, y solo en escritorio, con GSAP cargado y
   si el usuario no ha pedido menos movimiento. Sin ella los dos pisos se
   quedan uno debajo del otro, que es lo que pasa en celular. */
.pisos.cruce{
  /* flow-root, no block: hace falta que el margen de abajo del segundo piso
     cuente DENTRO de la caja de contenido del contenedor. Si se colapsa hacia
     fuera —lo que hace un block normal—, el sticky del segundo se queda sin
     recorrido y el piso pasa de largo sin llegar nunca a su posición fija. */
  display:flow-root;
  /* El aire que queda por encima y por debajo de cada tarjeta cuando está
     fija. Un solo número: lo usan el top del sticky y el alto. */
  --aire-piso:3vh;
}
.pisos.cruce .piso{
  position:sticky;
  /* alto real del menú, medido por el JS; nunca un valor a ojo */
  top:calc(var(--nav-real, var(--nav-h)) + var(--aire-piso));
  /* Cada piso ocupa casi toda la pantalla, pero no toda: queda aire por
     arriba y por abajo para que se vea que hay algo antes y después.
     Y NUNCA más de lo que cabe entre el menú fijo y el borde de abajo: si
     no cabe, encoge la tarjeta entera. La imagen no se recorta jamás. */
  height:min(85vh, calc(100svh - var(--nav-real, var(--nav-h)) - var(--aire-piso) * 2));
  grid-template-rows:1fr;
  padding:clamp(1.4rem,2.4vw,2.2rem);
  border-radius:28px;
  background:var(--crema);
  box-shadow:var(--sombra);
}
/* La imagen crece con la tarjeta; el texto se queda centrado en vertical. */
.pisos.cruce .piso-fig{ align-self:stretch; aspect-ratio:auto; height:100%; }
/* La cola: el recorrido que el Piso 2 necesita para quedarse fijo. Solo
   existe con el cruce activo; sin él no pinta nada. */
.pisos-cola{ display:none; }
.pisos.cruce .pisos-cola{ display:block; height:40vh; }
.pisos.cruce .piso-txt{ align-self:center; }
/* El segundo piso llega desde abajo con su propio matiz: el gris claro
   del Santuario. Al cubrir al primero se nota el cambio de mundo. */
.pisos.cruce .piso-frio{
  margin-top:32vh;
  background:var(--frio);
  box-shadow:var(--sombra-alta);
}

/* ─────────────────────────── ADN de marca ─────────────────────────── */
/* ── ADN de marca: la única sección en camel ─────────────────────────────
   Fondo #B4926F a sangre. El texto principal va en café oscuro; el
   antetítulo y la línea de cierre, en crema, que sobre camel destacan. */
.adn{ background:var(--camel); color:var(--cafe); }
.adn h2, .adn h3{ color:var(--cafe); }
.adn .parrafo, .adn .parrafo.destacado{ color:var(--cafe); }
/* Sobre camel la trama se nota mucho más que sobre café: se baja. */
.adn .trama-fondo{ opacity:.035; }
.adn .eyebrow{ color:var(--crema-texto); }
.adn .eyebrow .punto{ background:var(--crema-texto); }
.adn .titulo em{ color:var(--crema-texto); font-style:italic; }
.adn-cierre{ font-style:italic; }
/* Los marcos de foto, en café: contra el camel se leen como huecos. */
.adn .arco, .adn .arco-sm{ background:var(--cafe-alt); }
.adn .arco .trama, .adn .arco-sm .trama{ opacity:.14; }
/* Si aparece un botón, relleno café con texto crema. */
.adn .btn{ --btn-bg:var(--cafe); --btn-fg:var(--crema-texto); border-color:var(--cafe); }
.adn .btn:hover{ --btn-bg:var(--tabaco); --btn-fg:var(--crema-texto); border-color:var(--tabaco); }
/* Etiquetas de trabajo: legibles sobre camel. */
.adn .pendiente, .adn .nota-trabajo{ color:var(--cafe); background:rgba(244,238,228,.42);
  border-color:rgba(29,22,14,.34); }

.adn-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.2rem,6vw,5rem); align-items:center; }
.adn-txt .eyebrow{ justify-content:flex-start; }
.adn-txt .parrafo + .parrafo{ margin-top:1.2rem; }
.adn-cierre{ margin-top:1.8rem; font-family:var(--f-disp); font-style:italic; font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem); color:var(--crema-texto); letter-spacing:-.02em; }
.adn-fig{ aspect-ratio:3/4; }

/* ────────────────────────────── FAQ ───────────────────────────────── */
.faq-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem 1.2rem; align-items:start; }
.fq{ background:var(--arena); border:1px solid var(--linea-2); border-radius:14px; padding:0 1.3rem; transition:border-color .35s var(--ease), box-shadow .35s var(--ease); }
.fq[open]{ border-color:rgba(180,146,111,.4); box-shadow:var(--sombra); }
/* Las preguntas van en la sans del sitio. La serif de titulares, a este tamaño
   y dentro de una caja de interfaz, se lee como una tipografía de fuera y rompe
   el esquema del resto de la página. */
.fq summary{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding-block:1.15rem; cursor:pointer; list-style:none; font-family:var(--f-body); font-size:clamp(.95rem,.9rem + .28vw,1.08rem); font-weight:500; letter-spacing:0; line-height:1.4; }
.fq summary::-webkit-details-marker{ display:none; }
.fq summary::after{ content:""; flex:none; width:11px; height:11px; border-right:1.5px solid var(--camel-texto); border-bottom:1.5px solid var(--camel-texto); transform:rotate(45deg) translateY(-3px); transition:transform .4s var(--ease); }
.fq[open] summary::after{ transform:rotate(225deg) translateY(-3px); }
.fq > div{ padding-bottom:1.3rem; }
.fq p{ font-size:.93rem; color:var(--tinta-suave); line-height:1.7; }

/* ──────────────────────────── Contacto ────────────────────────────── */
/* Las tres tarjetas miden lo mismo y sus botones se apoyan abajo: si una
   lleva dos acciones, no se dispara de alto respecto a las otras. */
/* En /contacto/ esta sección es lo primero de la página. El menú es sticky y ya
   ocupa su sitio en el flujo, así que este relleno ES el hueco que se ve: 40
   arriba, sin sumarle nada por la barra. Misma solución que en las páginas de
   categoría. */
#contacto{ padding-block:72px; }
/* El mapa de la tarjeta de Ubicación. Carga diferida porque es contenido de
   Google y no tiene que frenar la página; ocupa el ancho de la tarjeta. */
.c-mapa{ margin-top:.9rem; border-radius:14px; overflow:hidden; border:1px solid var(--linea-o); background:var(--cafe-alt); }
.c-mapa iframe{ display:block; width:100%; height:200px; border:0; filter:grayscale(.25) contrast(1.05); }
.contacto-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1rem; align-items:stretch; }
/* Las tres van en camel. Antes solo la de reservas: las otras dos eran
   #2A2118 sobre el #1D160E de la sección, dos marrones oscuros que casi
   no se distinguían. El color claro lo lleva .c-card, y .c-card-wa queda
   solo para lo propio de la tarjeta de reservas (sus dos botones). */
.c-card{ display:flex; flex-direction:column; background:var(--camel); color:var(--cafe);
  border:1px solid transparent;
  border-radius:20px; padding:1.8rem 1.6rem; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.c-card .btn:first-of-type{ margin-top:auto; }
.c-card .btn{ justify-content:center; }
.c-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta); }
.c-et{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--camel-claro); margin-bottom:.55rem; }
/* 0,72 dejaba el letrerito en 3,86:1 sobre el camel, por debajo del
   mínimo para texto pequeño; con 0,85 sube a 4,92:1 y sigue viéndose
   más apagado que el título. Lo mismo con el alfa del párrafo. */
.c-card .c-et{ color:var(--cafe); opacity:.85; }
.c-card h3{ font-size:1.5rem; letter-spacing:-.025em; margin-bottom:.8rem; color:var(--cafe); }
.c-dato{ margin-bottom:.9rem; }
.c-txt{ font-size:.9rem; line-height:1.65; color:var(--crema-suave); margin-bottom:1rem; }
.c-card .c-txt{ color:rgba(29,22,14,.88); }
.c-card .c-txt a{ color:var(--cafe); }
.c-card address{ font-style:normal; font-family:var(--f-disp); font-size:1.18rem; line-height:1.45; margin-bottom:.9rem; }
/* El recuadro del mapa y el aviso pendiente también cambian de fondo: sus
   bordes claros desaparecían sobre el camel. */
.c-card .c-mapa{ border-color:rgba(29,22,14,.25); background:rgba(29,22,14,.06); }
.c-card .pendiente{ color:var(--cafe); background:rgba(29,22,14,.1); border-color:rgba(29,22,14,.3); }

/* ────────────────────────────── Pie ───────────────────────────────── */
.pie{ background:var(--cafe); color:var(--crema-suave); padding-block:clamp(3rem,6vw,4.5rem) 2rem; font-size:.9rem; }
.pie-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--linea-o); }
.pie-logo{ width:min(150px,50vw); height:auto; margin-bottom:1rem; }
.pie-marca p{ line-height:1.6; max-width:22rem; }
.pie-nav{ display:grid; gap:.5rem; align-content:start; }
.pie-nav a{ text-decoration:none; transition:color .3s var(--ease); width:fit-content; }
.pie-nav a:hover{ color:var(--camel-claro); }
.pie-datos{ display:grid; gap:.55rem; align-content:start; justify-items:start; }
.pie-redes{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.pie-redes a::after{ content:" ↗"; font-size:.78em; opacity:.6; }
.pie-legal{ padding-top:1.75rem; display:grid; gap:.7rem; font-size:.78rem; line-height:1.6; }
.pie-legal strong{ color:var(--camel-claro); }
.pie-mini{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.4rem; font-size:.74rem; opacity:.8; }
.pie-credito a{ color:var(--camel-claro); text-decoration:none; border-bottom:1px solid var(--linea-o); }
.pie-credito a:hover{ border-bottom-color:var(--camel-claro); }

/* ─────────────────────── WhatsApp flotante ────────────────────────── */
.wa-flotante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70;
  width:54px; height:54px; border-radius:50%;
  /* El flotante lleva el mismo verde que el botón, para que la marca sea una
     sola. Aquí no hay rótulo: solo el glifo blanco. */
  background:#17833F; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px -10px rgba(23,131,63,.7), 0 2px 6px rgba(0,0,0,.14);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.wa-flotante.se-ve{ opacity:1; visibility:visible; transform:none; }
.wa-flotante:hover{ transform:translateY(-4px) scale(1.05); }

/* ─────────────────────── Guion de fotos ───────────────────────────── */

/* ══════════════ Capas a pantalla completa (detalle y buscador) ══════ */
body.capa-abierta{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

.capa{
  position:fixed; inset:0; z-index:200; height:100dvh;
  display:flex; flex-direction:column;
  background:rgba(244,238,228,.86);
  opacity:0; transition:opacity .32s var(--ease);
}
@supports (backdrop-filter:blur(18px)){
  /* La página se difumina detrás, no se corta a negro */
  .capa{ background:rgba(244,238,228,.72); backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%); }
}
.capa.esta-abierta{ opacity:1; }

.capa-cab{ flex:none; display:flex; align-items:center; gap:1.25rem; padding:.85rem clamp(1rem,3vw,2rem); border-bottom:1px solid var(--linea-2); }
.capa-marca{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--camel-texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.capa-guia{ display:flex; align-items:center; gap:.3rem; margin-inline:auto; font-size:.78rem; color:var(--tinta-suave); }
.capa-guia li{ display:flex; align-items:center; gap:.45rem; padding:.28rem .75rem; border-radius:999px; border:1px solid transparent; white-space:nowrap; transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.capa-guia li span{ width:19px; height:19px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.66rem; background:rgba(36,28,20,.09); color:var(--tinta-suave); }
.capa-guia li[aria-current="step"]{ color:var(--tinta); background:var(--arena); border-color:rgba(180,146,111,.35); }
.capa-guia li[aria-current="step"] span{ background:var(--camel); color:var(--cafe); }
.capa-guia li.hecho span{ background:var(--camel-claro); color:var(--cafe); }
.capa-x{ flex:none; margin-left:auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--linea); background:var(--crema); color:var(--tinta); display:grid; place-items:center; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.capa-x:hover{ background:var(--cafe); color:var(--crema-texto); transform:rotate(90deg); }

.capa-scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.capa-dentro{ width:min(100% - 2.5rem, 1000px); margin-inline:auto; padding-block:clamp(1.75rem,5vw,3.25rem) clamp(2rem,6vw,4rem); }
.paso-c{ animation:pasoIn .45s var(--ease) both; }
@keyframes pasoIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.capa-pie{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem clamp(1rem,3vw,2rem); border-top:1px solid var(--linea-2); background:rgba(231,221,206,.75); font-size:.85rem; color:var(--tinta-suave); }
.capa-nav{ display:flex; gap:.5rem; }
.capa-flecha{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border:1px solid var(--linea); border-radius:999px; font-size:.78rem; background:var(--crema); cursor:pointer; transition:border-color .3s var(--ease), color .3s var(--ease); }
.capa-flecha:hover{ border-color:var(--camel); color:var(--camel-texto); }
.capa-indice{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }

/* Detalle del protocolo */
.detalle{ display:grid; grid-template-columns:.42fr .58fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:start; }
.detalle-fig{ aspect-ratio:4/5; position:sticky; top:0; }
.detalle-t{ font-family:var(--f-disp); font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); line-height:1.03; letter-spacing:-.03em; margin-bottom:.5rem; }
.detalle-sub{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); margin-bottom:1.5rem; }
.detalle-cuerpo > p{ color:var(--tinta-suave); margin-bottom:1.2rem; }
.detalle-datos{ display:grid; gap:1rem; padding:1.4rem 0; border-block:1px solid var(--linea-2); margin-bottom:1.4rem; }
.detalle-datos dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); margin-bottom:.2rem; }
.detalle-datos dd{ margin:0; font-size:.94rem; color:var(--tinta-suave); }
.detalle-lista{ display:grid; gap:.55rem; margin-bottom:1.4rem; }
.detalle-lista li{ font-size:.92rem; color:var(--tinta-suave); display:flex; gap:.7rem; }
.detalle-lista li::before{ content:"✦"; color:var(--camel); font-size:.62rem; margin-top:.45rem; }
.detalle-aviso{ padding-left:1.1rem; border-left:2px solid var(--camel); font-size:.92rem; color:var(--tinta-suave); }

/* Buscador */
.capa-titulo{ font-family:var(--f-disp); font-size:clamp(1.9rem,1.4rem + 2.2vw,3rem); line-height:1.06; letter-spacing:-.03em; }
.capa-sub{ margin-top:1rem; color:var(--tinta-suave); max-width:44rem; }
.opciones{ display:grid; gap:.7rem; margin-top:2.2rem; }
.opciones-2{ grid-template-columns:repeat(2,1fr); }
.opcion{ display:flex; align-items:center; gap:1rem; text-align:left; width:100%; padding:1.05rem 1.2rem; background:var(--crema); border:1px solid var(--linea); border-radius:14px; cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.opcion:hover{ border-color:var(--camel); transform:translateY(-2px); }
.opcion.elegida{ border-color:var(--camel); background:rgba(180,146,111,.12); }
.opcion-dib{ flex:none; width:42px; height:42px; }
.opcion-dib path{ fill:none; stroke:var(--camel); stroke-width:2.2; stroke-linecap:round; }
.opcion-txt{ font-size:.98rem; }
.opcion-marca{ margin-left:auto; width:18px; height:18px; flex:none; border:1px solid var(--linea); border-radius:50%; }
.opcion.elegida .opcion-marca{ border-color:var(--camel); background:var(--camel); }
.capa-acciones{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:2rem; }
.volver{ background:none; border:0; cursor:pointer; font-size:.8rem; letter-spacing:.06em; color:var(--tinta-suave); }
.volver:hover{ color:var(--camel-texto); }

.res-item{ background:var(--crema); border:1px solid var(--linea-2); border-radius:var(--r); padding:1.4rem 1.3rem; display:grid; gap:.7rem; }
.res-lista{ display:grid; gap:.8rem; margin-top:2rem; }
.res-item.elegido{ border-color:var(--camel); background:rgba(180,146,111,.1); }
.res-cab{ display:flex; align-items:flex-start; gap:.9rem; cursor:pointer; }
.res-cab input{ margin-top:.35em; width:18px; height:18px; flex:none; accent-color:var(--camel); }
.res-nombre{ display:block; font-family:var(--f-disp); font-size:1.24rem; letter-spacing:-.02em; }
.res-sub{ display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); margin-top:.3rem; }
.res-que{ font-size:.92rem; color:var(--tinta-suave); }
.res-porque{ font-size:.92rem; padding-left:1rem; border-left:2px solid var(--camel); }
.bloque-res{ margin-top:2.5rem; }
.bloque-res > h3{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-suave); padding-bottom:.8rem; border-bottom:1px solid var(--linea-2); margin-bottom:1.2rem; }
.nota-regla{ margin-top:.8rem; font-size:.9rem; padding-left:1rem; border-left:2px solid var(--camel); color:var(--tinta-suave); }
.tambien{ margin-top:1.2rem; font-size:.88rem; color:var(--tinta-suave); }
.descartes summary{ cursor:pointer; list-style:none; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:1rem 0; border-block:1px solid var(--linea-2); position:relative; }
.descartes summary::-webkit-details-marker{ display:none; }
.descartes summary::after{ content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); color:var(--camel-texto); font-size:1.1rem; }
.descartes[open] summary::after{ content:"−"; }
.descartes-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 2rem; padding:1.4rem 0 .4rem; }
.desc-n{ display:block; font-size:.95rem; }
.desc-m{ display:block; font-size:.85rem; color:var(--tinta-suave); }

/* Sin resultado: el mensaje que corresponda, nunca una pantalla vacía */
.sin-res{ background:var(--cafe); color:var(--crema-texto); border-radius:20px; padding:clamp(1.8rem,4vw,2.6rem); margin-top:1.5rem; position:relative; overflow:hidden; }
.sin-res-t{ font-family:var(--f-disp); font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); letter-spacing:-.025em; margin-bottom:.9rem; }
.sin-res p{ color:var(--crema-suave); }
.sin-res-et{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--camel-claro); margin-bottom:.8rem; }

/* En contacto, la pareja de botones va una encima de otra dentro de la tarjeta. */
.c-card-wa .btn + .btn{ margin-top:.6rem; }
/* La tarjeta es camel: un botón camel encima no se vería. Va en café. */
.c-card-wa .c-agenda{ --btn-bg:var(--cafe); --btn-fg:var(--crema-texto); border-color:var(--cafe); }
.c-card-wa .c-agenda:hover{ --btn-bg:var(--tabaco); border-color:var(--tabaco); }
.wa-caja{ margin-top:2.5rem; background:var(--arena); border:1px solid rgba(180,146,111,.4); border-radius:20px; padding:1.8rem 1.6rem; }
.wa-caja h3{ font-size:1.3rem; margin-bottom:.6rem; }
.wa-msg{ margin-top:1.2rem; padding:1.1rem 1.2rem; background:var(--crema); border:1px dashed rgba(180,146,111,.5); border-radius:12px; font-family:var(--f-body); font-size:.88rem; white-space:pre-wrap; line-height:1.6; }

/* ── Pantallas de poca altura (portátiles de 768–900 px) ──
   Se aprieta lo que no es titular ni botones para que la banda de
   iconos siga entrando entera en la primera pantalla. */
@media (max-height: 900px) and (min-height: 841px) and (min-width: 1081px){
  h1.ban-titulo{ font-size:min(clamp(56px,7.4vw,124px), 12.2vh); }
  h2.ban-titulo{ font-size:min(clamp(2.1rem,1.2rem + 2.6vw,3.7rem), 7.4vh); }
  .ban-ante{ margin-bottom:.75rem; }
  .ban-sub{ margin-top:1rem; font-size:1.18rem; }
  .ban-ctas{ margin-top:1.2rem; }
}

@media (max-height: 840px) and (min-width: 1081px){
  h1.ban-titulo{ font-size:min(clamp(56px,7.4vw,124px), 13vh); }
  h2.ban-titulo{ font-size:min(clamp(2.1rem,1.2rem + 2.6vw,3.7rem), 7.6vh); }
  .ban-ante{ margin-bottom:.7rem; }
  .ban-sub{ margin-top:.8rem; font-size:1.1rem; line-height:1.48; }
  .ban-ctas{ margin-top:1rem; gap:.6rem; }
  .ban-ctas .btn{ padding:.82rem 1.6rem; font-size:.97rem; }
}

/* Portatiles de 768 px: lo que no es titular ni botones se aprieta para
   que la banda de sellos siga entrando en la primera pantalla. */
@media (max-height: 790px) and (min-width: 1081px){
  h1.ban-titulo{ font-size:min(clamp(56px,7.4vw,124px), 11.6vh); }
  h2.ban-titulo{ font-size:min(clamp(2.1rem,1.2rem + 2.6vw,3.7rem), 6.8vh); }
  .ban-titulo-sub{ margin-top:.6rem; }
  .ban-sub{ margin-top:.7rem; font-size:1.08rem; line-height:1.45; }
  .ban-ctas{ margin-top:.9rem; }
}

/* ── El catálogo: en la página solo la entrada ──────────────────────────
   Un bloque pequeño —titular, dos líneas y un botón— que abre el catálogo
   entero en la misma capa a pantalla completa que usa el buscador. */
/* Banda en café profundo, a todo el ancho: un corte entre la sección de
   arriba y la de abajo. El color, el antetítulo en camel claro, la cursiva
   del titular y el texto en crema los pone la clase .oscuro, la misma que
   usan las demás bandas oscuras. */
.catalogo-entrada{ padding-block:clamp(1.4rem,2vw,2.2rem); }
/* El aire muerto estaba en la sección de encima, no aquí: la banda arranca
   mucho antes. Se recorta solo cuando es la banda la que viene detrás. */
.seccion:has(+ .catalogo-entrada){ padding-bottom:clamp(1.4rem,2.2vw,2rem); }
/* En portátiles de poca altura media pantalla son menos píxeles: la banda
   se aprieta un punto más para no pasarse. */
@media (max-height:800px) and (min-width:1081px){
  .catalogo-entrada{ padding-block:1rem; }
  .cat-entrada .parrafo{ margin-bottom:.9rem; }
}
.cat-entrada{ max-width:48rem; margin-inline:auto; text-align:center; }
.cat-entrada .eyebrow{ margin-bottom:.4rem; }
/* 15ch parte "Veinticuatro protocolos." por la mitad: aquí cabe entero. */
.cat-entrada .titulo{ font-size:clamp(2.4rem,2rem + 2.2vw,3.8rem); line-height:1.03; margin-bottom:.8rem; max-width:24ch; }
/* Las dos líneas tienen que ser dos, no tres: 40rem parte la primera. */
.cat-entrada .parrafo{ max-width:48rem; font-size:1rem; margin-bottom:clamp(1rem,1.6vw,1.35rem); }
/* El botón es la única acción de la banda: que pese. */
.cat-entrada .btn{ padding:1.22rem 2.8rem; font-size:1.1rem; font-weight:500; letter-spacing:.005em; box-shadow:var(--sombra-alta); }
.cat-entrada .btn:hover{ transform:translateY(-3px); }
.contexto-fuente[hidden]{ display:none; }

/* ── El catálogo dentro de la capa ── */
#capa-catalogo .fam-tabs{ margin-bottom:clamp(1.8rem,3.5vw,2.75rem); }
.cat-bloque + .cat-bloque{ margin-top:clamp(2.2rem,4vw,3.25rem); }
.cat-bloque-t{
  display:flex; align-items:baseline; gap:.6rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--camel-texto);
  padding-bottom:.7rem; border-bottom:1px solid var(--camel); margin-bottom:1.2rem;
}
.cat-bloque-t span{ margin-left:auto; color:var(--tinta-suave); letter-spacing:.1em; }

.tarjetas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:1rem; }
.tarjeta{
  display:flex; flex-direction:column; text-align:left; width:100%;
  padding:1.4rem 1.35rem; background:var(--crema); border:1px solid var(--linea-2);
  border-radius:var(--r); cursor:pointer; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  /* Llegada escalonada: la tarjeta sube al abrirse la capa. */
  animation:tarjetaEntra .5s var(--ease) both;
}
.tarjeta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--camel);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.tarjeta:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:transparent; }
.tarjeta:hover::before{ transform:scaleX(1); }
.tarjeta-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.9rem; margin-bottom:.65rem; }
.tarjeta-nombre{ font-family:var(--f-disp); font-size:1.2rem; letter-spacing:-.018em; line-height:1.2; }
.tarjeta-meta{ font-size:.76rem; color:var(--camel-texto); white-space:nowrap; }
.tarjeta-sub{ font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-suave); margin-bottom:.7rem; }
.tarjeta-txt{ font-size:.92rem; color:var(--tinta-suave); line-height:1.6; margin-bottom:.8rem; }
.tarjeta-para{ font-size:.85rem; color:var(--tinta-suave); line-height:1.55; margin-bottom:1rem; }
.tarjeta-para-et{ color:var(--camel-texto); font-weight:600; }
.tarjeta-mas{ margin-top:auto; border-top:1px solid var(--linea-2); padding-top:.7rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); }
.tarjeta-mas::after{ content:"+"; font-size:1.05rem; color:var(--camel-texto); transition:transform .35s var(--ease); }
.tarjeta:hover .tarjeta-mas::after{ transform:rotate(90deg); }
.tarjeta-destacada{ border-color:var(--camel); }
@keyframes tarjetaEntra{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.tarjeta:nth-child(2){ animation-delay:.04s; }
.tarjeta:nth-child(3){ animation-delay:.08s; }
.tarjeta:nth-child(4){ animation-delay:.12s; }
.tarjeta:nth-child(5){ animation-delay:.16s; }
.tarjeta:nth-child(n+6){ animation-delay:.2s; }

/* El contexto del grupo dentro de la capa: plegado, no estorba al detalle. */
.detalle-ctx{ grid-column:1 / -1; margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--linea); padding-top:1.3rem; }
.detalle-ctx summary{ cursor:pointer; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--camel-texto); }
.detalle-ctx summary:hover{ color:var(--camel-hover); }
.detalle-ctx-in{ margin-top:1.8rem; }
.detalle-ctx-in .fam-cab{ grid-template-columns:1fr; }
.detalle-ctx-in .fam-fig{ max-width:360px; }

}

/* El contexto del grupo dentro de la capa: plegado, no estorba al detalle. */
.detalle-ctx{ grid-column:1 / -1; margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--linea); padding-top:1.3rem; }
.detalle-ctx summary{ cursor:pointer; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--camel-texto); }
.detalle-ctx summary:hover{ color:var(--camel-hover); }
.detalle-ctx-in{ margin-top:1.8rem; }
.detalle-ctx-in .fam-cab{ grid-template-columns:1fr; }
.detalle-ctx-in .fam-fig{ max-width:360px; }

/* ── Galería "El Lab, por dentro" ───────────────────────────────────────
   Dos marcos quietos, uno al lado del otro. No se mueven, no giran y no
   cambian de tamaño: lo único que cambia es la imagen de dentro, que se
   releva con el scroll. Los marcos se quedan en su sitio con
   position:sticky.
   OJO: aquí no se puede usar overflow:hidden en la sección. Un ancestro con
   overflow distinto de visible/clip se convierte en el scrollport del sticky
   y lo deja sin efecto. Por eso el recorte lateral es overflow-x:clip. */
/* El camel del ADN entra justo detrás: 120 px de respiro entre el final de
   las fotos y el corte de color. */
.galeria{ overflow-x:clip; overflow-y:visible; }
.reel-cab{ display:flex; align-items:baseline; gap:1rem 1.4rem; flex-wrap:wrap; margin-bottom:0; }
.reel-t{ font-family:var(--f-disp); font-size:clamp(1.6rem,1.1rem + 1.5vw,2.4rem);
  line-height:1.05; letter-spacing:-.03em; color:var(--crema-texto); }
.reel-t em{ font-style:italic; color:var(--camel-claro); }

/* El recorrido: cada pareja aguanta una pantalla entera de scroll.
   Cuatro esperas de 100vh + tres cambios de 25vh + el alto de la escena. */
.reel{ position:relative; z-index:1; height:560vh; }
.reel-escena{
  position:sticky;
  /* alto real del menú, medido por el JS; nunca un valor a ojo */
  top:calc(var(--nav-real, var(--nav-h)) + 3vh);
  height:calc(100svh - var(--nav-real, var(--nav-h)) - 6vh);
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.5rem,4vw,4rem);
}
.reel-marco{
  position:relative; margin:0; overflow:hidden; flex:none;
  /* 30vw, salvo que no quepa de alto: entonces manda el alto de la escena. */
  width:min(30vw, calc((100svh - var(--nav-real, var(--nav-h)) - 6vh) * .5625));
  aspect-ratio:9/16;
  border-radius:22px; background:var(--cafe-alt); box-shadow:var(--sombra-alta);
}
/* Las cuatro tomas de cada marco ocupan el mismo sitio y se relevan. */
.reel-toma{ position:absolute; inset:0; opacity:0; }
.reel-toma[data-primera]{ opacity:1; }
.reel-toma img, .reel-toma video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) contrast(1.04) brightness(1.02) sepia(.08);
}
.reel-toma .foto-tag{ z-index:3; }

@media (max-width:760px){
  /* Los dos marcos uno debajo de otro, y las imágenes cambiando igual. */
  .reel{ height:480vh; }
  .reel-escena{ flex-direction:column; gap:1rem;
    top:calc(var(--nav-real, var(--nav-h)) + 2vh);
    height:calc(100svh - var(--nav-real, var(--nav-h)) - 4vh); }
  .reel-marco{
    width:min(58vw, calc(((100svh - var(--nav-real, var(--nav-h)) - 4vh - 1rem) / 2) * .5625));
  }
}

/* Sin GSAP o con movimiento reducido: las ocho seguidas, sin sticky. */
.reel.suelto{ height:auto; }
.reel.suelto .reel-escena{ position:static; height:auto; display:grid;
  grid-template-columns:minmax(0,1fr); gap:clamp(1rem,3vw,1.6rem);
  padding:clamp(1.2rem,3vw,2rem) 1.25rem; }
.reel.suelto .reel-marco{ width:100%; max-width:420px; margin-inline:auto;
  aspect-ratio:auto; background:none; box-shadow:none; overflow:visible;
  display:grid; gap:clamp(1rem,3vw,1.6rem); }
.reel.suelto .reel-toma{ position:relative; inset:auto; opacity:1 !important;
  aspect-ratio:9/16; border-radius:22px; overflow:hidden;
  background:var(--cafe-alt); box-shadow:var(--sombra-alta); }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:1080px){
  .nav-links,.nav-cta{ display:none; }
  .burger{ display:block; }
  .hero-in{ grid-template-columns:1fr; gap:2.5rem; }
  .hero-media{ max-width:440px; margin-inline:auto; width:100%; }
  .fam-cab{ grid-template-columns:1fr; }
  .fam-fig{ width:min(340px,100%); max-width:none; aspect-ratio:16/10; margin-inline:auto; }
  .adn-grid{ grid-template-columns:1fr; }
  .adn-fig{ width:min(400px,100%); max-width:none; margin-inline:auto; }
  .piso{ grid-template-columns:1fr; }
  .piso:nth-child(even) .piso-fig{ order:0; }
  .detalle{ grid-template-columns:1fr; }
  .detalle-fig{ position:static; width:min(360px,100%); max-width:none; margin-inline:auto; }
  .pie-top{ grid-template-columns:1fr 1fr; }
  .pie-marca{ grid-column:1 / -1; }
}

@media (max-width:1080px){
  .comparadores{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  /* El texto ya no se queda en la mitad izquierda: ocupa casi todo el
     ancho, así que el degradado horizontal deja de proteger y el velo
     pasa a ser parejo. Medido banner a banner: con 0,72 el párrafo del
     tercero caía a 3,0:1; 0,86 es el primer valor que deja los cuatro
     por encima de 4,8:1 a 430, 390 y 360 px. */
  .ban-velo{ background:rgba(29,22,14,.86); }
}

@media (max-width:760px){
  :root{ --nav-h:58px; }
  /* En celular la portada se aprieta todo lo que se puede para que la
     banda de sellos quede justo al borde de la primera pantalla. */
  /* ── Portada en celular ── */
  /* En una pantalla estrecha el recorte se queda con la franja central de
     la foto, que es justo la parte vacía: el sujeto se iba fuera y los
     banners quedaban en café liso. Corriendo el encuadre al 72 % entra. */
  .ban-foto{ object-position:72% 50%; }
  .ban-foto-rostro-bajo{ object-position:72% 82%; }
  .ban-foto-sujeto-alto{ object-position:72% 0%; }
  /* Con el sujeto dentro hay más luz detrás del texto: 0,86 se quedaba en
     4,84:1 y con 0,88 lo peor sube a 5,21:1. */
  .ban-velo{ background:rgba(29,22,14,.88); }
  .ban{ padding-block:1.6rem 4.6rem;
    padding-inline:calc((100% - min(100% - 2rem, var(--wrap))) / 2); }
  /* La etiqueta iba en flex y se partía en bloques descolocados con el punto
     colgando. Aquí fluye como texto normal y, si no cabe, parte en dos. */
  .ban-ante{ display:block; line-height:1.7; }
  .ban-ante .punto{ display:inline-block; vertical-align:middle; margin-inline:.5rem; }
  h1.ban-titulo{ font-size:clamp(2.4rem,11.5vw,3.1rem); }
  h2.ban-titulo{ font-size:clamp(1.75rem,7.6vw,2.4rem); }
  .ban-ctas{ gap:.45rem; }
  .ban-ctas .btn{ padding:.85rem 1.4rem; font-size:.94rem; }
  .ban-mandos{ margin-inline-end:calc((100% - min(100% - 2rem, var(--wrap))) / 2); }
  .hero-ctas{ gap:.45rem; }

  /* La B también llena la primera pantalla en celular: el min-height
     sale de la fórmula común, no se anula. */
  /* En celular los dos paneles a 4:5 no caben flotando al lado del texto:
     la banda pasa al flujo, debajo, a todo el ancho. */
  .hero-card{ right:-6%; left:auto; top:auto; bottom:12%; padding:.6rem .85rem; }
  .marco-mandos{ margin-top:.7rem; }

  /* En celular los dos grupos van a dos columnas: una sola columna con los
     quince nombres estiraría la sección muchísimo. */
  .fam{ padding:.5rem .8rem; font-size:.74rem; }
  /* Ya no hace falta el carrusel a dedo: la tira se desliza sola. */
  .apto-fila{ gap:1.9rem; }
  .apto-item{ gap:.6rem; --ic-caja:50px; }
  .apto-t{ font-size:.78rem; }
  .banda-cta{ flex-direction:column; align-items:flex-start; }
  .marquesina-pista{ font-size:.95rem; animation-duration:21s; }
  .wrap,.nav-in,.hero-in{ width:calc(100% - 2rem); }
  .seccion{ padding-block:48px; }
  .hero{ padding-block:1.5rem 3rem; }
  .ban-ctas{ flex-direction:column; align-items:stretch; }
  .ban-ctas .btn{ width:100%; }
  .hero-ctas{ flex-direction:column; align-items:stretch; width:100%; }
  .hero-ctas .btn{ width:100%; }
  .hero-meta{ gap:1rem 1.4rem; }
  .hero-card{ right:auto; left:-3%; top:5%; padding:.6rem .9rem; }
  .scroll-cue{ display:none; }
  .abordaje-par{ grid-template-columns:1fr; }
  .paso{ grid-template-columns:1fr; gap:1.2rem; }
  .pasos::before{ display:none; }
  /* En columna única la foto del paso iba pegada a la izquierda mientras el
     texto iba centrado. Se centra con un ancho explícito: la figura no tiene
     contenido en flujo (la imagen va absoluta), así que con solo márgenes
     automáticos se quedaría en cero. */
  .paso figure{ width:min(200px,100%); max-width:none; aspect-ratio:3/4; margin-inline:auto; }
  .paso:nth-child(even) figure{ transform:none; }
  .paso-txt{ padding-left:0; }
  .ciencia-par,.avisos-par,.ideas-par,.faq-lista,.descartes-lista,.opciones-2{ grid-template-columns:1fr; }
  .tarjetas{ grid-template-columns:1fr; }
  .fam-tabs,.sub-tabs{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; margin-inline:-1rem; padding:.25rem 1rem; }
  .fam-tabs::-webkit-scrollbar,.sub-tabs::-webkit-scrollbar{ display:none; }
  .fam,.sub{ flex:none; }
  .capa-guia{ display:none; }
  .pie-top{ grid-template-columns:1fr; gap:1.75rem; }
  .wa-flotante{ width:50px; height:50px; right:.9rem; bottom:.9rem; }
}

@media (min-width:1600px){ :root{ --wrap:1320px; } }

/* ════════════ Movimiento reducido ════════════
   Se apagan los bucles y los desplazamientos largos. Los micro-efectos
   siguen, porque Windows trae esta preferencia activada de fábrica en
   muchas instalaciones y apagarlo todo deja la página muerta. */

/* ══════════════════════════════════════════════════════════════════════════
   MULTIPÁGINA
   La web dejó de ser una sola página: estas clases son las que viven solo en
   las páginas nuevas (portada → familia → ficha). Todo lo demás se reaprovecha
   tal cual desde la versión de una sola página.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Portada · las tres familias, que se relevan al bajar ────────────────
   Van justo después de la banda de sellos. Mismo mecanismo que el cruce de
   pisos: position:sticky, o sea que el scroll sigue siendo el del navegador.
   No se bloquea, no se secuestra y no hay pin de ningún tipo. GSAP solo añade
   el desplazamiento y el atenuado, enganchados al scroll (scrub).
   La clase .cruce la pone el JS, y solo en escritorio. Sin ella los tres
   bloques quedan uno debajo de otro, que es lo que pasa en celular. */
.fam-bloques{ display:grid; gap:clamp(3rem,6vw,4.5rem); margin-top:clamp(2rem,4vw,3.2rem); }
.fam-bloque{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,5vw,4rem); align-items:center; }
/* La banda cambia de lado en el bloque de en medio: la fila no se lee igual
   tres veces seguidas. */
.fam-bloque:nth-child(even) .fam-bloque-fig{ order:2; }
/* El marco declara 3:2 y la foto se genera a 3:2: no hay doble recorte. */
.fam-bloque-fig{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:3/2; border-radius:20px;
  background:var(--lino); box-shadow:var(--sombra);
}
.fam-bloque-fig img{
  width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  filter:saturate(.86) contrast(1.04) brightness(1.02) sepia(.08);
}
/* Mismo velo cálido que el resto de fotos de la página. */
.fam-bloque-fig::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(155deg, rgba(180,146,111,.22), rgba(244,238,228,.08) 45%, rgba(29,22,14,.16));
  mix-blend-mode:soft-light;
}
.fam-bloque-fig::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1px rgba(244,238,228,.24); border-radius:inherit;
}
/* El isotipo en marca de agua, mientras el hueco esté vacío. */
.fam-bloque-fig .trama::after{
  content:""; position:absolute; inset:0;
  background:url("assets/img/marca/isotipo.webp") center / min(38%,170px) no-repeat;
  opacity:.5;
}
.fam-bloque-et{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--camel-texto); margin-bottom:.7rem; }
.fam-bloque-t{ font-family:var(--f-disp); font-size:clamp(2.2rem,1.6rem + 2.6vw,3.6rem); line-height:1.02; letter-spacing:-.03em; margin-bottom:1rem; }
.fam-bloque-txt .parrafo{ margin-bottom:1.2rem; max-width:44ch; }
.fam-bloque-n{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave); margin-bottom:1.6rem; }
.fam-bloque-n strong{ font-family:var(--f-disp); font-size:2.2rem; font-weight:400; letter-spacing:-.02em; color:var(--tinta); margin-right:.4rem; vertical-align:-.12em; }

/* ── El relevo ───────────────────────────────────────────────────────── */
.fam-bloques.cruce{
  /* flow-root, no block: hace falta que el margen de abajo del último bloque
     cuente DENTRO de la caja de contenido del contenedor. Si se colapsa hacia
     fuera —lo que hace un block normal—, el sticky del último se queda sin
     recorrido y el bloque pasa de largo sin llegar nunca a su posición fija. */
  display:flow-root;
  /* El aire que queda por encima y por debajo de cada bloque cuando está fijo.
     Un solo número: lo usan el top del sticky y el alto. */
  --aire-fam:3vh;
}
.fam-bloques.cruce .fam-bloque{
  position:sticky;
  /* alto real del menú, medido por el JS; nunca un valor a ojo */
  top:calc(var(--nav-real, var(--nav-h)) + var(--aire-fam));
  /* Cada bloque ocupa casi toda la pantalla, pero no toda: queda aire por
     arriba y por abajo para que se vea que hay algo antes y después. Y NUNCA
     más de lo que cabe entre el menú fijo y el borde de abajo. */
  /* Algo más bajo que el cruce de pisos: aquí la banda no se estira, así que
     con 85vh sobraba aire por arriba y por abajo. */
  height:min(78vh, calc(100svh - var(--nav-real, var(--nav-h)) - var(--aire-fam) * 2));
  grid-template-columns:1.18fr 1fr;
  grid-template-rows:1fr;
  /* Ojo: la columna ancha es la de la banda, y en el bloque par la banda se
     va a la derecha. Si no se gira también el reparto, esa banda sale más
     estrecha que las otras dos y la serie deja de leerse pareja. */
  padding:clamp(1.4rem,2.4vw,2.2rem);
  border-radius:28px;
  background:var(--crema);
  box-shadow:var(--sombra);
  /* La banda entra desplazada hacia un lado: aquí se recorta lo que se sale.
     El overflow de un sticky no rompe su propia fijación, solo el de un
     ancestro, y este elemento es el sticky. */
  overflow:hidden;
}
/* La banda NO se estira con el bloque: mantiene su 3:2 y se centra en
   vertical. Si se estirara, el marco pasaría a ser vertical y la foto,
   generada en 3:2, se recortaría por los lados: doble recorte, justo lo que
   no puede pasar. El texto también va centrado. */
.fam-bloques.cruce .fam-bloque-fig{ align-self:center; aspect-ratio:3/2; height:auto; width:100%; }
.fam-bloques.cruce .fam-bloque-txt{ align-self:center; }
/* Cada bloque llega desde abajo y acaba cubriendo al anterior. */
.fam-bloques.cruce .fam-bloque + .fam-bloque{ margin-top:32vh; }
.fam-bloques.cruce .fam-bloque:nth-child(even){ grid-template-columns:1fr 1.18fr; }
.fam-bloques.cruce .fam-bloque:nth-child(2){ background:var(--frio); box-shadow:var(--sombra-alta); }
.fam-bloques.cruce .fam-bloque:nth-child(2) .fam-bloque-fig{ background:var(--frio-alt); }
.fam-bloques.cruce .fam-bloque:nth-child(3){ background:var(--arena); box-shadow:var(--sombra-alta); }
/* La cola: el recorrido que el último bloque necesita para quedarse fijo.
   Solo existe con el relevo activo; sin él no pinta nada. */
.fam-cola{ display:none; }
.fam-bloques.cruce .fam-cola{ display:block; height:40vh; }

/* ── Página de familia ───────────────────────────────────────────────────── */
/* La cabecera de categoría: migas, etiqueta, titular y bajada, y se acabó. Su
   alto sale del contenido, no de la pantalla: aquí no hay ningún alto mínimo.

   Sobre el relleno de arriba. El menú es sticky, así que en lo alto de la
   página ocupa su sitio en el flujo y <main> empieza justo en su borde de
   abajo. Medido: html, body, main, la sección, el .wrap y las migas tienen
   todos 0 de margen y de relleno, o sea que NADA se acumula: el hueco que se ve
   entre el menú y las migas es este número y solo este. 40 aquí son 40 en
   pantalla. Si alguna vez hay que cambiarlo, se mide y se pone el número que
   se quiera ver, sin restarle nada al menú. */
.fam-cab-pag{ padding-block:24px 72px; }
/* .seccion-cab lleva un margen abajo para separarse del contenido que suele ir
   debajo dentro de la misma sección. Aquí la cabecera ES la sección entera, así
   que ese margen no separa nada: solo sumaba 72px de aire muerto al relleno. */
.fam-cab-pag .seccion-cab{ margin-bottom:0; }
/* El contexto del grupo vive dentro de la sección del listado: 72px por
   encima los pone la propia sección, y estos 32 lo separan de la banda de
   agendar que viene justo debajo. */
.fam-contexto{ margin-bottom:32px; }
.fam-contexto > :last-child{ margin-bottom:0; }
.prot-grupos{ display:grid; gap:clamp(2rem,4vw,3rem); margin-top:clamp(1.6rem,3vw,2.4rem); }
.prot-grupo-t{
  display:flex; align-items:baseline; gap:.8rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto);
  padding-bottom:.8rem; border-bottom:1px solid var(--linea);
}
.prot-grupo-t span{ font-size:.66rem; color:var(--tinta-suave); }
.prot-lista{ display:grid; }
/* Cada protocolo es una fila-enlace: nombre, bajada y llamada, con el mismo
   gesto en toda la lista para que se lea de un golpe. */
.prot-fila{
  display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr) auto;
  gap:1.2rem; align-items:baseline;
  padding:1.25rem .4rem; border-bottom:1px solid var(--linea-2);
  color:inherit; text-decoration:none;
  transition:background .3s var(--ease), padding-inline .3s var(--ease);
}
.prot-fila:hover{ background:var(--arena); padding-inline:1rem .4rem; }
/* La llamada que parte la lista de protocolos. Va en el tono de esta zona de
   la página, no en la tarjeta café del final. */
.prot-llamada{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem; margin-bottom:2.5rem; padding:1.4rem 1.5rem;
  background:var(--arena); border-radius:18px;
}
.prot-llamada p{ font-size:1rem; font-weight:500; max-width:40ch; }
.prot-llamada-btns{ display:flex; flex-wrap:wrap; gap:.6rem; }

.prot-nombre{ font-family:var(--f-disp); font-size:clamp(1.15rem,1rem + .5vw,1.5rem); letter-spacing:-.02em; }
.prot-sub{ font-size:.92rem; line-height:1.5; color:var(--tinta-suave); }
.prot-mas{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); white-space:nowrap; }
.prot-mas::after{ content:" →"; }

/* ── Ficha de protocolo ──────────────────────────────────────────────────── */
.protocolo{ padding-block:24px 72px; }
.migas{ display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:28px; color:var(--tinta-suave); }
.migas a{ color:var(--camel-texto); text-decoration:none; border-bottom:1px solid transparent; }
.migas a:hover{ border-bottom-color:currentColor; }
.migas [aria-current]{ color:var(--tinta); }
/* En la ficha el título es el h1 de la página, no el de una tarjeta. */
.detalle-pag .detalle-t{ font-size:clamp(2.4rem,1.8rem + 2.8vw,4rem); }
/* El .eyebrow viene centrado de la portada; aquí encabeza una columna
   alineada a la izquierda, así que se alinea con el titular. */
.detalle-pag .eyebrow,
.banda-reserva .eyebrow{ justify-content:flex-start; }
.detalle-pag .detalle-fig{ top:calc(var(--nav-real, 84px) + 1.5rem); }
.detalle-pag .hero-ctas{ margin-top:1.8rem; }
.detalle-porque{ padding-left:1.1rem; border-left:2px solid var(--camel); font-size:.94rem; line-height:1.6; color:var(--tinta-suave); margin-block:1.2rem; }
.detalle-porque strong{ color:var(--tinta); font-weight:500; }
.volver-fam{ margin-top:2rem; font-size:.78rem; letter-spacing:.06em; }
.volver-fam a{ color:var(--camel-texto); text-decoration:none; border-bottom:1px solid var(--linea); padding-bottom:.15rem; }
.volver-fam a:hover{ border-bottom-color:var(--camel); }

/* ── Buscador · el resultado lleva a su ficha ────────────────────────────── */
.res-ficha{
  display:inline-block; margin-top:.9rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--camel-texto); text-decoration:none;
  border-bottom:1px solid var(--linea); padding-bottom:.2rem;
}
.res-ficha:hover{ border-bottom-color:var(--camel); }
.res-ficha::after{ content:" →"; }


/* ── Banda de reserva · las dos vías de cita en todas las páginas ───────── */
.reserva-in{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem); align-items:center; justify-content:space-between; }
.reserva-t{ font-family:var(--f-disp); font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem); line-height:1.08; letter-spacing:-.025em; color:var(--crema-texto); max-width:20ch; }
.banda-reserva .hero-ctas{ display:flex; flex-wrap:wrap; gap:.7rem; }

@media (max-width: 760px){
  .reserva-in{ flex-direction:column; align-items:flex-start; }
  .banda-reserva .hero-ctas{ width:100%; }
  .banda-reserva .hero-ctas .btn{ width:100%; justify-content:center; }
}

@media (max-width: 900px){
  .fam-bloque{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }
  /* En celular la banda va siempre arriba, aunque el bloque sea par. */
  .fam-bloque:nth-child(even) .fam-bloque-fig{ order:0; }
  .prot-fila{ grid-template-columns:minmax(0,1fr); gap:.35rem; }
  .prot-mas{ margin-top:.3rem; }
  .detalle-pag .detalle-fig{ position:static; }
}


/* ══════════════════════════════════════════════════════════════════════════
   EL DESPLEGABLE DE SERVICIOS
   Las cinco categorías con sus protocolos dentro. En escritorio es un panel
   que cae del menú; en celular, el acordeón de <details> que hay más abajo.
   ══════════════════════════════════════════════════════════════════════════ */
/* Relativo, no estático: el panel ya no va a todo lo ancho de la barra, sino
   colgando del propio botón. */
.nav-desp{ position:relative; }
.nav-desp-b{
  position:relative; font:inherit; font-size:.89rem; color:var(--tinta-suave);
  background:none; border:0; padding:.35rem 0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:color .3s var(--ease);
}
.nav-desp-b::after{
  content:""; width:5px; height:5px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.nav-desp-b[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:1px; }
.nav-desp-b:hover, .nav-desp-b.es-actual{ color:var(--tinta); }
/* Sobre la portada el menú va en claro: el botón acompaña. */
.nav:not(.is-fija) .nav-desp-b{ color:var(--crema-texto); }
.nav:not(.is-fija) .nav-desp-b:hover{ color:var(--camel-claro); }

/* El panel cae a todo lo ancho del menú, justo por debajo de la barra. Se
   posiciona contra .nav, que es sticky y por tanto ya es un ancestro colocado.
   Ojo con z-index negativo: pintaría por detrás del fondo de .nav y el panel
   desaparecería. Como cuelga por debajo de la barra no hace falta. */
.nav-desp-panel{
  position:absolute; left:0; top:calc(100% + .6rem); z-index:1;
  width:max-content; min-width:17rem; max-width:min(22rem, 90vw);
  background:var(--crema); border:1px solid var(--linea-2); border-radius:16px;
  box-shadow:0 18px 40px -20px rgba(29,22,14,.5);
  opacity:0; transform:translateY(-8px);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.nav-desp-panel.is-abierto{ opacity:1; transform:translateY(0); }
.nav-desp-in{ padding:.7rem; display:grid; gap:.1rem; }
/* Cinco líneas: título de la categoría y su número. Los protocolos se ven
   dentro de cada categoría, no aquí. */
/* Las cinco líneas van en la sans del sitio, la misma del resto del menú: la
   serif de titulares aquí, a 14px y dentro de una caja pequeña, se leía como
   una tipografía de fuera. */
.nav-cat-t{
  display:flex; align-items:baseline; gap:.6rem;
  font-family:var(--f-body); font-size:.89rem; letter-spacing:0;
  padding:.55rem .7rem; border-radius:10px;
  transition:background .25s var(--ease);
}
.nav-cat-t:hover{ background:var(--arena); }
.nav-cat-t span{ margin-left:auto; font-family:var(--f-body); font-size:.68rem; letter-spacing:.1em; color:var(--camel-texto); }

/* Mismo tratamiento que los enlaces de acento del resto de la página
   (.familias-todos a, .res-ficha, .volver-fam a): versal fina con su espaciado,
   camel, subrayado que abraza el texto y la flecha detrás. */
.nav-desp-panel .nav-desp-todo{
  justify-self:start;
  margin:1.1rem .7rem .35rem; padding:0 0 .2rem;
  border-top:0; border-bottom:1px solid var(--linea);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--camel-texto); text-decoration:none;
}
/* Sobre la portada el menú va en claro y hay una regla que tiñe de tinta-suave
   todo enlace del panel; pesa más que una clase suelta, así que el camel del
   acento hay que declararlo también para ese caso. */
.nav:not(.is-fija) .nav-desp-panel .nav-desp-todo{ color:var(--camel-texto); }
.nav-desp-panel .nav-desp-todo:hover,
.nav:not(.is-fija) .nav-desp-panel .nav-desp-todo:hover{ color:var(--camel-texto); border-bottom-color:var(--camel); }
/* Sin línea separadora: los enlaces de acento del sitio no la llevan, y su
   propio subrayado ya lo distingue de las cinco líneas de arriba. El aire lo
   pone el margen. */
/* La flecha. El panel vive dentro de .nav-links, así que este ::after hereda
   el subrayado animado del menú (.nav-links a::after): absoluto, de 1px de alto
   y con scaleX(0). Con solo cambiarle el content la flecha existía pero salía
   invisible, así que hay que deshacer también lo demás. */
.nav-desp-panel .nav-desp-todo::after{
  content:" →";
  position:static; left:auto; right:auto; bottom:auto;
  height:auto; background:none; transform:none;
}
/* Dentro del panel los enlaces son texto de lista, no pestañas del menú: ni
   heredan el color claro de la portada ni llevan el subrayado animado. */
.nav-desp-panel a{ color:var(--tinta-suave); text-decoration:none; }
.nav:not(.is-fija) .nav-desp-panel a{ color:var(--tinta-suave); }
.nav-desp-panel .nav-cat-t{ color:var(--tinta); }
.nav:not(.is-fija) .nav-desp-panel .nav-cat-t{ color:var(--tinta); }
/* El subrayado animado del menú se apaga solo en las cinco categorías. Antes
   esta regla alcanzaba a todos los enlaces del panel y se llevaba por delante
   la flecha del enlace de acento, que también es un ::after. */
.nav-desp-panel .nav-cat-t::after{ display:none; }
.nav-desp-panel a:hover,
.nav:not(.is-fija) .nav-desp-panel a:hover{ color:var(--camel-texto); }
.nav-desp-panel .nav-cat-t:hover,
.nav:not(.is-fija) .nav-desp-panel .nav-cat-t:hover{ color:var(--camel-texto); }

/* ── El acordeón del menú de celular ─────────────────────────────────────
   <details> nativo: no necesita JS y funciona aunque el JS falle. */
.menu-et{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--camel-texto); margin-bottom:.2rem; }
.menu-cat{ border-bottom:1px solid var(--linea-2); }
.menu-cat summary{
  display:flex; align-items:baseline; gap:.5rem; cursor:pointer; list-style:none;
  font-family:var(--f-disp); font-size:clamp(1.25rem,5.2vw,1.6rem);
  padding-block:.55rem;
}
.menu-cat summary::-webkit-details-marker{ display:none; }
.menu-cat summary::after{
  content:""; width:6px; height:6px; margin-left:auto; margin-top:-4px;
  border-right:1.5px solid var(--camel-texto); border-bottom:1.5px solid var(--camel-texto);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.menu-cat[open] summary::after{ transform:rotate(-135deg); margin-top:2px; }
.menu-cat summary span{ font-family:var(--f-body); font-size:.66rem; letter-spacing:.14em; color:var(--camel-texto); }
.menu-cat ul{ display:grid; gap:.1rem; padding:0 0 .8rem .2rem; }
/* Dentro del acordeón los enlaces son lista, no titulares del menú.
   Van calificados con `.menu nav` a propósito: la regla general de las
   entradas del menú es `.menu nav a`, que pesa más que una clase suelta y si
   no se iguala la especificidad se los lleva por delante y salen enormes. */
.menu nav .menu-cat li a,
.menu nav .menu-cat-todo{
  font-family:var(--f-body); font-size:.95rem; padding-block:.3rem;
  border-bottom:0; text-decoration:none; color:var(--tinta-suave);
  font-variation-settings:normal;
}
.menu nav .menu-cat-todo{
  display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--camel-texto); padding-block:.5rem;
}
.menu nav .menu-cat-todos{ border-bottom:1px solid var(--linea-2); margin-bottom:.6rem; }

/* ── Página /servicios/ · el índice de las cinco ───────────────────────── */
.servicios{ padding-block:72px; }
/* Los tres grupos de /servicios/: los dos abordajes de marca con su anclaje,
   y los complementarios aparte. El scroll-margin-top ya lo pone la regla
   general de las secciones, así que al llegar desde la portada el titular del
   grupo queda por debajo del menú y no detrás. */
.serv-grupo{ margin-top:clamp(2.6rem,5vw,4rem); scroll-margin-top:calc(var(--nav-real, var(--nav-h)) + 16px); }
.serv-grupo-cab{ max-width:44rem; margin-bottom:clamp(1rem,2vw,1.4rem); }
.serv-grupo-et{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--camel-texto); margin-bottom:.5rem; }
.serv-grupo-t{
  display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem); letter-spacing:-.028em; margin-bottom:.7rem;
}
.serv-grupo-t span{ font-family:var(--f-body); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); }
.serv-grupo-cab .parrafo{ color:var(--tinta-suave); }
/* El grupo de fuera del par se separa con una línea: no es uno de los dos
   abordajes y tiene que leerse como otra cosa. */
.serv-grupo-aparte{ border-top:1px solid var(--linea-2); padding-top:clamp(2rem,4vw,3rem); }

.serv-lista{ display:grid; }
.serv-fila{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1rem,2.5vw,2rem); align-items:baseline;
  padding:1.5rem .4rem; border-bottom:1px solid var(--linea-2);
  color:inherit; text-decoration:none;
  transition:background .3s var(--ease), padding-inline .3s var(--ease);
}
.serv-fila:hover{ background:var(--arena); padding-inline:1rem .4rem; }
.serv-n{ font-family:var(--f-disp); font-size:1rem; color:var(--camel-texto); }
.serv-t{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--f-disp); font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem); letter-spacing:-.025em; margin-bottom:.35rem; }
.serv-t em{ font-style:normal; font-family:var(--f-body); font-size:.66rem; letter-spacing:.14em; color:var(--camel-texto); }
.serv-x{ display:block; font-size:.86rem; line-height:1.5; color:var(--tinta-suave); }
.serv-mas{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); white-space:nowrap; }
.serv-mas::after{ content:" →"; }
/* Las migas sobre fondo oscuro, en la cabecera de categoría. */
.migas-o{ color:var(--crema-suave); }
.migas-o a{ color:var(--camel-claro); }
.migas-o [aria-current]{ color:var(--crema-texto); }
.detalle-marca{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--camel-texto); margin-bottom:1.2rem; }
.familias-todos{ text-align:center; margin-top:clamp(2rem,4vw,3rem); }
.familias-todos a{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); text-decoration:none; border-bottom:1px solid var(--linea); padding-bottom:.2rem; }
.familias-todos a:hover{ border-bottom-color:var(--camel); }

@media (max-width: 1080px){
  /* Por debajo de esto el menú de escritorio ya no se ve: manda el acordeón. */
  .nav-desp-panel{ display:none; }
}
@media (max-width: 760px){
  .serv-fila{ grid-template-columns:auto minmax(0,1fr); gap:.9rem; }
  .serv-mas{ grid-column:2; margin-top:.4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   /resultados/
   Como la pidió la clienta: título centrado, dos columnas, la foto grande
   arriba de cada tarjeta y debajo un pie de dos líneas. Sin marcos ni sombras,
   fondo limpio y mucho aire entre tarjetas.
   ══════════════════════════════════════════════════════════════════════════ */
.resultados-pag{ padding-block:72px; }
.res-rejilla{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.res-tarjeta{ margin:0; }
/* Nada de marco ni sombra: solo la foto. El radio es mínimo, lo justo para que
   no cante contra el resto de la web. */
.res-foto{
  position:relative; overflow:hidden;
  aspect-ratio:4/5; width:100%;
  border-radius:10px; background:var(--arena);
}
.res-foto img, .res-foto video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) contrast(1.04) brightness(1.02) sepia(.08);
}
/* El isotipo en marca de agua mientras el hueco esté vacío. */
.res-foto .trama::after{
  content:""; position:absolute; inset:0;
  background:url("assets/img/marca/isotipo.webp") center / min(40%,150px) no-repeat;
  opacity:.5;
}
.res-pie{ margin-top:.9rem; display:grid; gap:.25rem; }
.res-protocolo{ font-family:var(--f-disp); font-size:clamp(1.1rem,1rem + .5vw,1.4rem); letter-spacing:-.02em; }
.res-que{ font-size:.9rem; line-height:1.5; color:var(--tinta-suave); }

/* ── Tarjetas de vídeo: miniatura con play ──────────────────────────────── */
.res-play{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:4;
  width:58px; height:58px; border-radius:50%;
  background:rgba(29,22,14,.55); border:1px solid rgba(244,238,228,.5);
  backdrop-filter:blur(3px);
  transition:background .3s var(--ease), scale .3s var(--ease);
}
/* El triángulo, con un pelín de desplazamiento para que se vea centrado. */
.res-play::after{
  content:""; position:absolute; left:calc(50% + 2px); top:50%; translate:-50% -50%;
  border-left:15px solid var(--crema-texto);
  border-block:9px solid transparent;
}
.res-tarjeta.es-video .res-foto{ cursor:pointer; }
.res-tarjeta.es-video .res-foto:hover .res-play{ background:rgba(29,22,14,.72); scale:1.06; }
/* Mientras no exista el archivo de vídeo la tarjeta no es pulsable: el play se
   queda como marca del hueco y no lleva a un clic muerto. */
.res-tarjeta.es-video .res-foto:not(.hay-video){ cursor:default; }
.res-tarjeta.es-video .res-foto:not(.hay-video) .res-play{ opacity:.55; }

/* El vídeo abierto, dentro de la capa a pantalla completa. */
.capa-video-caja{ width:min(92vw, calc(92vh * 0.5625)); aspect-ratio:9/16; margin:auto; }
.capa-video-caja video{ width:100%; height:100%; border-radius:14px; background:#000; }

@media (max-width: 760px){
  .res-rejilla{ grid-template-columns:minmax(0,1fr); gap:clamp(2rem,7vw,2.8rem); }
}


/* ══════════════════════════════════════════════════════════════════════════
   EL BLOG
   ══════════════════════════════════════════════════════════════════════════ */
.blog{ padding-block:72px; }
.post-lista{ display:grid; margin-top:clamp(1.8rem,3vw,2.6rem); }
.post-fila{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:.4rem 1.5rem; align-items:baseline;
  padding:1.5rem .4rem; border-bottom:1px solid var(--linea-2);
  color:inherit; text-decoration:none;
  transition:background .3s var(--ease), padding-inline .3s var(--ease);
}
.post-fila:hover{ background:var(--arena); padding-inline:1rem .4rem; }
.post-fila-t{ font-family:var(--f-disp); font-size:clamp(1.2rem,1rem + .7vw,1.6rem); letter-spacing:-.025em; }
.post-fila-x{ grid-column:1; font-size:.92rem; line-height:1.5; color:var(--tinta-suave); }
.post-fila-mas{ grid-row:1; grid-column:2; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); white-space:nowrap; }
.post-fila-mas::after{ content:" →"; }

/* ── Una entrada ─────────────────────────────────────────────────────────
   Columna de lectura estrecha: un texto largo a todo el ancho no se lee. */
.post{ padding-block:24px 72px; }
.post-t{ font-family:var(--f-disp); font-size:clamp(2rem,1.5rem + 2.2vw,3.2rem); line-height:1.06; letter-spacing:-.03em; margin-bottom:1rem; }
.post-entradilla{ font-size:1.1rem; line-height:1.55; color:var(--tinta-suave); margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--linea-2); }
.post-cuerpo p{ margin-bottom:1.15rem; line-height:1.75; }
.post-h2{ font-family:var(--f-disp); font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem); letter-spacing:-.025em; margin:2.2rem 0 .9rem; }
.post-lista{ display:grid; gap:.7rem; margin:0 0 1.4rem; }
.post-cuerpo .post-lista li{ position:relative; padding-left:1.2rem; line-height:1.7; }
.post-cuerpo .post-lista li::before{ content:"✦"; position:absolute; left:0; top:.45em; font-size:.6rem; color:var(--camel); }
.post-cuerpo .post-lista li strong{ font-weight:600; }
/* El aviso de cierre: es donde se dice lo que la entrada NO es. */
.post-aviso{
  margin-top:2rem; padding:1.2rem 1.3rem;
  background:var(--arena); border-left:3px solid var(--camel); border-radius:0 12px 12px 0;
  font-size:.92rem; line-height:1.65; color:var(--tinta-suave);
}

@media (max-width: 760px){
  .post-fila{ grid-template-columns:minmax(0,1fr); }
  .post-fila-mas{ grid-row:auto; grid-column:1; margin-top:.3rem; }
}


/* ── El índice del blog: tarjetas con foto ─────────────────────────────── */
.post-rejilla{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.post-tarjeta{
  display:grid; gap:1rem; color:inherit; text-decoration:none;
  align-content:start;
}
.post-foto{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/2; width:100%; border-radius:12px; background:var(--arena);
}
.post-foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) contrast(1.04) brightness(1.02) sepia(.08);
  transition:transform .6s var(--ease);
}
.post-tarjeta:hover .post-foto img{ transform:scale(1.03); }
.post-foto .trama::after{
  content:""; position:absolute; inset:0;
  background:url("assets/img/marca/isotipo.webp") center / min(36%,120px) no-repeat;
  opacity:.5;
}
.post-cuerpo-t{ display:grid; gap:.4rem; }
.post-tarjeta .post-fila-t{ font-family:var(--f-disp); font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem); line-height:1.15; letter-spacing:-.025em; }
.post-tarjeta:hover .post-fila-t{ color:var(--camel-texto); }
.post-tarjeta .post-fila-x{ font-size:.94rem; line-height:1.55; color:var(--tinta-suave); }
.post-tarjeta .post-fila-mas{ margin-top:.3rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-texto); }
.post-tarjeta .post-fila-mas::after{ content:" →"; }

@media (max-width: 760px){
  .post-rejilla{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   LA ENTRADA DEL BLOG
   La columna de lectura NO se ensancha: 40rem es lo correcto para leer. Lo que
   cambia es que los márgenes dejan de estar vacíos: el índice vive a la
   izquierda y la frase destacada se sale hacia fuera.
   ══════════════════════════════════════════════════════════════════════════ */
.post-cab{ max-width:40rem; margin-inline:auto; }
.post-portada{
  position:relative; overflow:hidden; margin:2rem auto 3rem;
  width:100%; max-width:62rem; aspect-ratio:3/2;
  border-radius:20px; background:var(--arena);
}
.post-portada img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) contrast(1.04) brightness(1.02) sepia(.08);
}
.post-portada .trama::after{
  content:""; position:absolute; inset:0;
  background:url("assets/img/marca/isotipo.webp") center / min(30%,150px) no-repeat;
  opacity:.5;
}

/* La rejilla: índice a la izquierda, lectura en el centro. La columna de
   lectura se queda en su ancho; el índice ocupa el margen que estaba vacío. */
.post-marco{
  display:grid; grid-template-columns:14rem minmax(0,40rem) 14rem;
  justify-content:center; column-gap:clamp(1.5rem,3vw,3rem);
}
.post-cuerpo{ grid-column:2; max-width:none; margin:0; }

.post-indice{
  grid-column:1; position:sticky; align-self:start;
  top:calc(var(--nav-real, var(--nav-h)) + 28px);
  padding-right:1rem; border-right:1px solid var(--linea-2);
}
.post-indice-t{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--camel-texto); margin-bottom:.9rem;
}
.post-indice ol{ display:grid; gap:.6rem; counter-reset:idx; }
.post-indice li{ counter-increment:idx; }
.post-indice a{
  display:flex; gap:.55rem; font-size:.86rem; line-height:1.4;
  color:var(--tinta-suave); text-decoration:none;
  transition:color .25s var(--ease);
}
.post-indice a::before{ content:counter(idx,decimal-leading-zero); color:var(--camel); font-size:.7rem; }
.post-indice a:hover{ color:var(--camel-texto); }
/* Al saltar desde el índice, el título queda por debajo del menú. */
.post-h2{ scroll-margin-top:calc(var(--nav-real, var(--nav-h)) + 24px); }

/* La frase destacada se sale de la columna por los dos lados. */
.post-destacado{
  margin:2.4rem -3.5rem; padding:1.6rem 0;
  border-block:1px solid var(--linea);
}
.post-destacado p{
  margin:0; font-family:var(--f-disp);
  font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem); line-height:1.3;
  letter-spacing:-.025em; color:var(--tinta); text-align:center;
}

/* La tarjeta de cierre, con la trama y el arco de marca. */
.post-servicio{
  position:relative; overflow:hidden;
  max-width:52rem; margin:3.5rem auto 0;
  background:var(--cafe); color:var(--crema-texto);
  border-radius:28px; padding:clamp(2rem,4vw,3rem);
}
.post-servicio .trama-fondo{ opacity:.08; }
/* El arco de marca, asomando por la esquina. */
.post-servicio::after{
  content:""; position:absolute; right:-70px; bottom:-90px; width:230px; height:270px;
  border-radius:50% 50% 14px 14px / 30% 30% 2% 2%;
  border:1px solid rgba(180,146,111,.28); pointer-events:none;
}
.post-servicio-in{ position:relative; z-index:2; max-width:34rem; }
.post-servicio .eyebrow{ justify-content:flex-start; color:var(--camel-claro); }
.post-servicio-t{ font-family:var(--f-disp); font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem); letter-spacing:-.028em; margin-bottom:.7rem; }
.post-servicio-x{ color:var(--crema-suave); line-height:1.6; margin-bottom:1.5rem; }
.post-servicio-btns{ display:flex; flex-wrap:wrap; gap:.7rem; }
/* Debajo de los botones, el enlace al servicio del que habla la entrada. */
.post-servicio-enlace{ margin-top:1.1rem; font-size:.8rem; color:var(--crema-suave); }
.post-servicio-enlace a{ color:var(--camel-claro); text-decoration:none; border-bottom:1px solid var(--linea-o); padding-bottom:.1rem; }
.post-servicio-enlace a:hover{ border-bottom-color:var(--camel-claro); }
.post-servicio .btn-ghost{ --btn-fg:var(--crema-texto); border-color:var(--linea-o); }
.post-servicio .btn-ghost:hover{ --btn-bg:rgba(244,238,228,.08); border-color:var(--camel-claro); }

@media (max-width: 1180px){
  /* Sin sitio para el margen: el índice pasa arriba, en horizontal. */
  .post-marco{ grid-template-columns:minmax(0,40rem); justify-content:center; }
  .post-indice{
    grid-column:1; position:static; margin-bottom:2rem;
    padding:1.1rem 1.3rem; padding-right:1.3rem;
    border:1px solid var(--linea-2); border-radius:14px; background:var(--arena);
  }
  .post-indice ol{ gap:.45rem; }
  .post-destacado{ margin-inline:-1.5rem; }
}
@media (max-width: 760px){
  .post-destacado{ margin-inline:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .scroll-cue span{ animation:none; }
  .marquesina-pista{ animation:none; }
  .apto-fila.en-bucle{ animation:none; }
  .tarjeta{ animation:none; }
  .escena{ transition-duration:.3s; }
  .js .reveal{ transition-duration:.35s; transform:none; }
  .js .ln-i{ transition-duration:.35s; }
  .js [data-escalonado] > *{ transition-duration:.35s; transform:none; }
  .btn:hover,.tarjeta:hover,.c-card:hover,.wa-flotante:hover{ transform:none; }
}