/* ==========================================================================
   Cerveza Gaucho — Sistema visual según Manual de Elementos Gráficos
   Proporción 70 / 20 / 10  →  70% crema · 20% negro · 10% blanco
   Composición y ritmo vertical inspirados en firestonewalker.com
   Dorado = acento gráfico (nunca texto sobre crema: 2,06:1)
   ========================================================================== */

:root{
  --negro:#0D0D0D;
  --negro-2:#171717;
  --negro-3:#232120;
  --crema:#F2EDE4;
  --crema-2:#E7E0D3;
  --crema-3:#DCD3C2;
  --blanco:#FFFFFF;
  --dorado:#C9A24B;
  --madera:#B08A5E;

  --tinta:#0D0D0D;
  --tinta-2:#6B645C;       /* 5,00:1 sobre crema — AA */
  --sobre-negro:#F2EDE4;   /* 16,67:1 */
  --sobre-negro-2:#9A938A; /* 6,40:1 */

  --f-titulo:'Bebas Neue','Oswald',Impact,sans-serif;
  --f-texto:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;
  --e7:48px;--e8:64px;--e9:96px;--e10:128px;--e11:160px;
  --contenedor:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
:focus-visible{outline:2px solid var(--dorado);outline-offset:4px}
.skip-link{position:fixed;top:8px;left:8px;z-index:2100;padding:12px 18px;background:var(--crema);color:var(--negro);transform:translateY(-160%)}
.skip-link:focus{transform:none}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--f-texto);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
p{margin:0}
h1,h2,h3,h4{
  margin:0;font-family:var(--f-titulo);font-weight:400;
  text-transform:uppercase;letter-spacing:.01em;line-height:.95;text-wrap:balance;
}

.wrap{max-width:var(--contenedor);margin:0 auto;padding:0 22px}
@media (min-width:900px){.wrap{padding:0 48px}}

/* Textura de papel artesanal — manual §8 */
.papel{position:relative}
.papel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.papel > *{position:relative;z-index:1}

.eyebrow{
  font-family:var(--f-texto);font-weight:600;font-size:.7rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--tinta-2);
}
.eyebrow.on-negro{color:var(--dorado)}
.t-small{font-size:.85rem;line-height:1.55;color:var(--tinta-2)}

.estrella{display:flex;align-items:center;gap:.9rem;justify-content:center;margin:var(--e5) 0}
.estrella::before,.estrella::after{content:"";height:1px;flex:1;max-width:110px;background:var(--dorado);opacity:.55}
.estrella span{color:var(--dorado);font-size:.7rem;letter-spacing:.2em}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:100;background:var(--negro);border-bottom:1px solid #232120}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:92px}
.brand img{height:46px;width:auto}
/* La puerta de edad devuelve el foco acá al cerrarse: un contorno del sistema
   en vez del recuadro azul por defecto del navegador. */
.brand:focus-visible{outline:2px solid var(--dorado);outline-offset:6px;border-radius:2px}
.main-nav{display:none}
.main-nav ul{display:flex;align-items:center;gap:2rem}
.main-nav a{
  font-family:var(--f-texto);font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.4em 0;border-bottom:2px solid transparent;color:var(--crema);
  transition:border-color .18s ease,color .18s ease;
}
.main-nav a:hover{border-color:var(--dorado);color:var(--dorado)}
.header-actions{display:flex;align-items:center;gap:.9rem}
.header-actions .btn-1{display:none;background:var(--dorado);color:var(--negro)}
.header-actions .btn-1:hover{background:var(--crema)}
.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid #3A3734}
.nav-toggle span{display:block;height:1.5px;width:16px;background:var(--crema);margin:0 auto;transition:transform .2s ease,opacity .2s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-nav{display:none;position:fixed;inset:92px 0 0 0;background:var(--negro);z-index:90;padding:2.2rem 22px;overflow-y:auto}
.mobile-nav.is-open{display:block}
.mobile-nav ul{display:flex;flex-direction:column;gap:1.2rem}
.mobile-nav a{font-family:var(--f-titulo);font-size:2rem;text-transform:uppercase;color:var(--crema)}
.mobile-nav .btn-1{background:var(--dorado);color:var(--negro)}
.mobile-nav .btn-1{margin-top:2rem}
@media (min-width:1000px){
  .main-nav{display:block}
  .nav-toggle{display:none}
  .header-actions .btn-1{display:inline-flex}
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-texto);font-weight:600;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;min-height:44px;justify-content:center;text-align:center;padding:1.05em 2em;border:1px solid transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-1{background:var(--negro);color:var(--crema)}
.btn-1:hover{background:var(--dorado);color:var(--negro)}
.btn-2{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-2:hover{background:var(--tinta);color:var(--crema)}
.on-negro .btn-1{background:var(--dorado);color:var(--negro)}
.on-negro .btn-1:hover{background:var(--crema)}
.on-negro .btn-2{color:var(--crema);border-color:var(--sobre-negro-2)}
.on-negro .btn-2:hover{background:var(--crema);color:var(--negro);border-color:var(--crema)}

/* ==========================================================================
   SECCIONES — ritmo amplio, encabezados centrados y grandes (modelo FW)
   ========================================================================== */
.section{padding:clamp(64px,10vw,128px) 0}
@media (min-width:900px){.section{padding:var(--e11) 0}}
.bg-crema{background:var(--crema)}
.bg-blanco{background:var(--blanco)}

.section-head{max-width:660px;margin-bottom:clamp(32px,5vw,64px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(2.8rem,6.5vw,5rem);margin-top:.6rem}
.section-foot{margin-top:var(--e8);display:flex;justify-content:center}

/* ==========================================================================
   PANEL 1 — HERO cinematográfico: fotografía real en sucesión lenta
   ========================================================================== */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--negro)}
.hero > .wrap{width:100%;position:relative;z-index:3;padding-top:var(--e9);padding-bottom:var(--e8)}

.hero-fondo{position:absolute;inset:0;z-index:0}
.hero-foto{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:opacity 1.6s ease-in-out;
  will-change:opacity,transform;
}
.hero-foto.is-activa{opacity:1;animation:derivaLenta 26s linear forwards}
@keyframes derivaLenta{from{transform:scale(1.02)}to{transform:scale(1.09)}}

/* Las cuatro escenas */
.hero-foto:nth-child(1){background-image:url("../img/escena/chata.jpg")}
.hero-foto:nth-child(2){background-image:url("../img/escena/equipo.jpg")}
.hero-foto:nth-child(3){background-image:url("../img/escena/cleta.jpg")}
.hero-foto:nth-child(4){background-image:url("../img/escena/latas.jpg")}

/* Velo que garantiza legibilidad del lema sobre cualquier foto */
.hero-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.22) 34%, rgba(13,13,13,.72) 78%, rgba(13,13,13,.92) 100%),
    linear-gradient(90deg, rgba(13,13,13,.78) 0%, rgba(13,13,13,.30) 46%, transparent 72%);
}

.hero .eyebrow{color:var(--dorado)}
.h1-volanta{display:block;font-family:var(--f-texto);font-weight:600;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dorado);margin-bottom:1rem}
.hero h1{color:var(--crema);font-size:clamp(2.8rem,6.4vw,5.2rem);margin:.7rem 0 2rem;max-width:14ch;
  text-shadow:0 2px 24px rgba(13,13,13,.5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero .btn-1{background:var(--dorado);color:var(--negro)}
.hero .btn-1:hover{background:var(--crema)}
.hero .btn-2{color:var(--crema);border-color:rgba(242,237,228,.5)}
.hero .btn-2:hover{background:var(--crema);color:var(--negro);border-color:var(--crema)}

/* Pie: rótulo de la escena + marcas */
.hero-pie{
  display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
  margin-top:var(--e8);padding-top:1.2rem;border-top:1px solid rgba(242,237,228,.18);
}
.hero-rotulo{min-height:2.4em;max-width:34ch}
.hero-rotulo b{
  display:block;font-family:var(--f-titulo);font-weight:400;font-size:1.25rem;
  letter-spacing:.05em;color:var(--crema);text-transform:uppercase;
}
.hero-rotulo span{font-size:.8rem;color:rgba(242,237,228,.62);letter-spacing:.02em}
.hero-rotulo.cambiando{opacity:0}
.hero-rotulo{transition:opacity .5s ease}

.hero-marcas{display:flex;gap:.55rem}
.hero-marcas button{
  width:34px;height:44px;padding:0;border:0;cursor:pointer;background:linear-gradient(rgba(242,237,228,.3),rgba(242,237,228,.3)) center/100% 2px no-repeat;
  transition:background .35s ease,transform .35s ease;
}
.hero-marcas button:hover{background-image:linear-gradient(var(--crema),var(--crema))}
.hero-marcas button.is-activa{background-image:linear-gradient(var(--dorado),var(--dorado));background-size:100% 4px}
.hero-marcas button:focus-visible{outline:2px solid var(--dorado);outline-offset:5px}

@media (max-width:900px){
  .hero{min-height:78vh}
  .hero > .wrap{padding-top:var(--e8)}
  .hero-velo{background:linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.35) 30%, rgba(13,13,13,.86) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .hero-foto{transition:none}
  .hero-foto.is-activa{animation:none;transform:scale(1.02)}
}

/* ==========================================================================
   ORIGEN — invitación · historia en primera persona · proyección
   El video manda: el texto sólo prepara. Todo acotado a .origen.
   ========================================================================== */
/* Menos aire que el resto de las secciones: acá el vacío no suma, separa. */
.origen{padding-block:clamp(56px,7vw,96px)}

.origen-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,40px);align-items:start}
/* Dos columnas recién cuando texto y video conviven sin apretarse.
   Debajo de 900 —tablet vertical incluida— el video va a ancho completo. */
@media (min-width:900px){
  .origen-grid{grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:clamp(32px,3.2vw,48px)}
}

.origen-texto h2{
  font-size:clamp(2.25rem,4.2vw,4rem);   /* 36px en mobile · 64px en desktop */
  margin-top:.55rem;
}
/* Tablet: el título todavía es de una columna ancha, pero la escala de mobile
   queda chica contra 700px de texto. Escalón intermedio antes de las dos columnas. */
@media (min-width:700px) and (max-width:899px){
  .origen-texto h2{font-size:clamp(2.6rem,5.6vw,3rem)}
}
.origen-intro{
  margin-top:1.25rem;max-width:34ch;
  font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.65;color:var(--tinta-2);
}
.origen-identidad{
  margin-top:1.1rem;font-weight:600;font-size:.95rem;
  letter-spacing:.02em;color:var(--tinta);
}

/* --- Pieza de video --- */
.origen-pieza{margin:0}
.origen-marco{
  position:relative;overflow:hidden;
  /* La proporción real la fija el data-relacion; 16/9 es sólo el arranque.
     Reservar el alto desde el primer pintado evita el salto al reproducir. */
  aspect-ratio:16 / 9;
  background:var(--crema-3);
}
.origen-marco > video,
.origen-marco > iframe{
  display:block;width:100%;height:100%;border:0;background:var(--negro);
  /* El relevo de la portada por el reproductor, apenas insinuado. El hueco ya
     estaba reservado, así que esto funde sin mover nada. La regla global de
     reduced-motion lo anula solo. */
  animation:origenReleva .22s ease both;
}
@keyframes origenReleva{from{opacity:0}to{opacity:1}}

/* Cartel de material pendiente: neutro y declarado, nunca un play sin destino */
.origen-pendiente{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;text-align:center;
  font-family:var(--f-texto);font-weight:600;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2);
  border:1px dashed var(--crema-3);background:var(--crema-2);
}

/* La portada entera es el control */
.origen-play{
  position:absolute;inset:0;width:100%;padding:0;
  display:flex;align-items:flex-end;justify-content:flex-start;
  background:var(--crema-3);cursor:pointer;
}
.origen-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Apenas el velo necesario para que la etiqueta se lea sobre cualquier fotograma */
.origen-play::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,13,0) 45%,rgba(13,13,13,.55) 100%);
  transition:background .25s ease;
}
.origen-play-rotulo{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:.7em;
  margin:clamp(14px,2vw,22px);padding:.85em 1.5em;
  background:var(--crema);color:var(--negro);
  font-family:var(--f-texto);font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.origen-play-rotulo b{font-size:.85em;line-height:1;font-weight:400}
.origen-play:hover .origen-play-rotulo{background:var(--dorado)}
.origen-play:hover::after{background:linear-gradient(180deg,rgba(13,13,13,0) 35%,rgba(13,13,13,.62) 100%)}
.origen-play:focus-visible{outline:2px solid var(--dorado);outline-offset:4px}

.origen-firma{
  margin-top:1rem;font-size:.85rem;line-height:1.5;font-weight:600;color:var(--tinta);
}

/* --- Proyección --- */
/* Cierre de la historia: centrado, con aire propio, escrito a máquina.
   --------------------------------------------------------------------------
   Dos capas superpuestas con el mismo texto y la misma estructura de líneas.
   La base ocupa el lugar y es la que se lee; la de tipeo va encima, en
   position:absolute, y es la única que se anima. Como la base nunca se saca
   del flujo, el alto del bloque es el definitivo desde el primer pintado:
   no hay medición, no hay carrera con la carga de la tipografía y no hay
   forma de que la página salte cuando el texto termina de escribirse. */
.origen-cierre{
  position:relative;
  margin:clamp(72px,9vw,128px) auto 0;
  max-width:min(100%,660px);text-align:center;
  font-family:var(--f-titulo);font-weight:400;text-transform:uppercase;
  line-height:1;letter-spacing:.01em;
  font-size:clamp(1.55rem,2.4vw,2.25rem);   /* 25px en mobile · 36px en desktop */
}
.origen-cierre .origen-linea{display:block}
/* Sin JS o con movimiento reducido esta capa nunca se muestra y la frase se ve
   entera, que es el estado por defecto. */
.origen-tipeo{position:absolute;inset:0;visibility:hidden}
.origen-cierre.tipeando .origen-base{color:transparent}
.origen-cierre.tipeando .origen-tipeo{visibility:visible}

/* Cursor: firme mientras escribe, tres parpadeos al terminar y se va. */
.origen-cursor{
  display:inline-block;width:.06em;height:.82em;
  margin-left:.09em;vertical-align:-.04em;
  background:currentColor;
}
.origen-cursor.despide{animation:origen-parpadeo .42s steps(1,end) 3}
@keyframes origen-parpadeo{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ==========================================================================
   PANEL 2 — Las cinco: ronda ceremonial + ficha viva de la lata activa
   ========================================================================== */
.cinco-grid{display:grid;grid-template-columns:1fr;gap:var(--e7);align-items:center}
@media (min-width:900px){.cinco-grid{grid-template-columns:.95fr 1.05fr;gap:var(--e6)}}

/* --- Ficha viva (izquierda) --- */
/* Grilla apilada: el alto lo fija la ficha más larga, así nada salta al rotar */
.ficha{display:grid;align-items:start}
.ficha-slide{
  grid-area:1/1;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.ficha-slide.is-activa{opacity:1;transform:none;pointer-events:auto}
.ficha-slide:not(.is-activa){visibility:hidden}
.ficha-estilo{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--tinta-2);font-weight:600;display:block}
.ficha h3{font-size:clamp(3rem,6.5vw,4.8rem);margin:.5rem 0 .9rem;line-height:.9}
.ficha p{font-size:1.05rem;line-height:1.6;color:var(--tinta-2);max-width:34ch;margin-bottom:1.6rem}
.ficha-datos{display:flex;gap:2.2rem;margin-bottom:2rem}
.ficha-datos div{border-top:2px solid var(--dorado);padding-top:.7rem;min-width:66px}
.ficha-datos dd{margin:0;font-family:var(--f-titulo);font-size:2rem;line-height:1}
.ficha-datos dt{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2);font-weight:600;margin-top:.15rem}
.ficha-nota{font-size:.74rem;color:var(--tinta-2);opacity:.8;margin-top:-1.2rem;margin-bottom:1.4rem;line-height:1.4}

/* --- Escena de la lata (derecha) --- */
.cinco-escena{position:relative;min-height:590px;display:flex;align-items:flex-end;justify-content:center}
@media (max-width:900px){.cinco-escena{min-height:510px}}
@media (max-width:560px){.cinco-escena{min-height:440px}}

.cinco-luz{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(760px,105%);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at center, rgba(201,162,75,.16), rgba(201,162,75,.05) 45%, transparent 68%);
}
.cinco-sombra{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  width:330px;height:30px;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center, rgba(13,13,13,.26), rgba(13,13,13,.10) 55%, transparent 74%);
  filter:blur(9px);transition:width .65s cubic-bezier(.22,1,.36,1);
}
.cinco-escena.is-servida .cinco-sombra{width:540px}

.cinco-slide{
  position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}
.cinco-slide.is-activa{opacity:1;transform:translateY(0)}
.cinco-slide .lata{position:relative;z-index:3;height:560px;width:auto;max-width:none;filter:drop-shadow(0 20px 26px rgba(13,13,13,.20))}
.cinco-slide .vaso{
  position:absolute;bottom:0;left:50%;z-index:2;height:560px;width:auto;max-width:none;
  transform:translateX(-50%) scale(.94);opacity:0;
  /* Sólo drop-shadow: exactamente el mismo tratamiento que la lata, que en el
     teléfono del cliente se ve bien. Antes acá había blur() y brightness()
     encadenados, y blur(0) incluso en el estado visible. Un blur —incluso de
     radio cero— obliga a WebKit a rasterizar la imagen en una capa de filtro
     propia; con cinco copas grandes en la escena eso agota el presupuesto de
     capas de iOS y la imagen se pinta como un rectángulo vacío. La sensación
     de "viene de atrás" la dan igual la escala, el z-index y la sombra. */
  filter:drop-shadow(0 14px 20px rgba(13,13,13,.20));
  transition:opacity .65s ease-out, transform .65s cubic-bezier(.22,1,.36,1);
}
.cinco-escena.is-servida .cinco-slide.is-activa .vaso{
  opacity:1;transform:translateX(-50%) translateX(-140px) scale(1);
}
.cinco-escena:not(.is-servida) .cinco-slide .vaso{transition-duration:.28s,.28s;transition-timing-function:ease-in,ease-in}


/* La lata como control. Es un botón transparente que cubre la escena entera:
   así el área de toque es la lata grande y no sólo las miniaturas. Los slides
   ya son pointer-events:none, así que nada le compite el click. */
.cinco-toggle{
  position:absolute;inset:0;z-index:4;
  margin:0;padding:0;border:0;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.cinco-toggle:focus-visible{outline:2px solid var(--dorado);outline-offset:4px}

/* Pista discreta: el texto cambia según el puntero, sin JS ni user-agent.
   La variante que no corresponde se saca del flujo, no sólo se oculta, para
   que un lector de pantalla no lea las dos. */
.cinco-pista{
  margin-top:1rem;text-align:center;min-height:1.3em;
  font-family:var(--f-texto);font-weight:600;font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2);
}
.cinco-pista-toque,.cinco-pista-volver{display:none}
@media (hover:none),(pointer:coarse){
  .cinco-pista-puntero{display:none}
  .cinco-pista-toque{display:inline}
  /* is-fijada refleja sólo la decisión del usuario, no el hover ni la ronda:
     el texto dice siempre lo que hará el próximo toque. */
  .cinco-escena.is-fijada ~ .cinco-pista .cinco-pista-toque{display:none}
  .cinco-escena.is-fijada ~ .cinco-pista .cinco-pista-volver{display:inline}
}

@media (max-width:900px){
  .cinco-slide .lata,.cinco-slide .vaso{height:480px}
  .cinco-escena.is-servida .cinco-slide.is-activa .vaso{transform:translateX(-50%) translateX(-120px) scale(1)}
  .cinco-sombra{width:250px}
  .cinco-escena.is-servida .cinco-sombra{width:420px}
}
@media (max-width:560px){
  .cinco-slide .lata,.cinco-slide .vaso{height:400px}
  .cinco-escena.is-servida .cinco-slide.is-activa .vaso{transform:translateX(-50%) translateX(-100px) scale(1)}
  .cinco-sombra{width:180px;height:20px}
  .cinco-escena.is-servida .cinco-sombra{width:300px}
}

/* --- Con el dedo: el mismo cuadro que con mouse, con otro disparador ---------
   La lata queda adelante y la copa sale de atrás hacia la izquierda: las dos a
   la vista, la copa por detrás. El concepto no cambia; lo que cambia es cuánto
   se corre cada una.
   El corrimiento de desktop está en píxeles fijos (-140px) y una escena de
   teléfono mide unos 346px: con esa medida la copa quedaba 132px debajo de la
   lata y 21px fuera de la pantalla — un 34% visible, pegado al borde.
   Acá el reparto va en porcentajes del ancho de la propia imagen, así la copa
   asoma siempre la misma proporción que en desktop (43%) y ninguna de las dos
   se corta, de 360px a una tablet. La escala baja apenas para hacer lugar.
   Va después de los bloques max-width a propósito: con la misma especificidad
   gana el que está más abajo, y estas reglas tienen que pisar el corrimiento. */
@media (hover:none),(pointer:coarse){
  .cinco-slide .lata{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .cinco-escena.is-servida .cinco-slide.is-activa .lata{transform:translateX(16%) scale(.88)}
  .cinco-slide .vaso{transition-duration:.3s,.3s}
  .cinco-escena.is-servida .cinco-slide.is-activa .vaso{
    transform:translateX(-50%) translateX(-22%) scale(.88);
  }
}

/* --- Selector: las cinco latas en miniatura --- */
.cinco-selector{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:var(--e7)}
.cinco-selector button{
  width:clamp(52px,15vw,74px);height:96px;padding:.3rem;border:1px solid transparent;background:transparent;
  cursor:pointer;position:relative;transition:border-color .3s ease,background .3s ease;
}
.cinco-selector button img{height:100%;width:auto;margin:0 auto;opacity:.42;transition:opacity .3s ease,transform .3s ease}
.cinco-selector button:hover img{opacity:.8}
.cinco-selector button.is-activa{border-color:var(--crema-3);background:var(--crema)}
.cinco-selector button.is-activa img{opacity:1;transform:translateY(-3px)}
.cinco-selector button:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}
.cinco-selector .rot{
  position:absolute;left:0;right:0;bottom:-1.1rem;font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2);font-weight:600;opacity:0;transition:opacity .3s ease;
}
.cinco-selector button.is-activa .rot{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cinco-slide,.cinco-slide .vaso,.cinco-slide .lata,.cinco-sombra,.ficha-slide{transition:none}
}

/* ==========================================================================
   BANDA NEGRA — La manada indomable
   Capas: negro › paisaje « fondo del campo indomable » › animal activo › contenido
   Los animales son trazo claro sobre negro: se integran con mezcla "lighten",
   igual que la luz sobre el campo. Sin recortes duros ni PNG pegados.
   ========================================================================== */
.banda-negra{background:var(--negro);color:var(--sobre-negro);position:relative;overflow:hidden;isolation:isolate}
/* El header es sticky y ocupa 93px fijos: sin esto, entrar por el menú
   "Salvajes" recorta el título justo debajo del header. Ahora la sección
   se completa exactamente. */
#salvajes{scroll-margin-top:0}
/* Densidad vertical propia de esta sección: la meta es que el título, la
   bajada y los cuatro estilos entren en un viewport de notebook sin scroll
   relevante. El resto del sitio no usa estos valores. */
.banda-negra .wrap{padding-top:2.2rem;padding-bottom:2.4rem;position:relative;z-index:5}
@media (min-width:900px){.banda-negra .wrap{padding-top:2.8rem;padding-bottom:2.6rem}}
.banda-negra .section-head{margin-bottom:1.5rem}
@media (min-width:900px){.banda-negra .section-head{margin-bottom:1.8rem}}
.banda-negra h2{color:var(--crema);font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:.98;margin-top:.4rem}
.banda-negra .lede{font-size:1rem;line-height:1.5;color:var(--sobre-negro-2);max-width:52ch;margin-top:.7rem}

/* --- Capa 1 · El campo: siempre presente, sin filtros que alteren la ilustración --- */
.escena-campo{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.escena-paisaje{
  position:absolute;inset:0;
  background-image:url("../img/escena/campo.jpg");
  background-size:cover;background-position:88% 58%;
  opacity:.9;
}
/* Velo: oscurece donde vive el texto y asienta los bordes. La ilustración se sigue leyendo. */
.escena-velo{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(95deg, rgba(13,13,13,.94) 0%, rgba(13,13,13,.82) 34%, rgba(13,13,13,.42) 60%, rgba(13,13,13,.28) 100%),
    linear-gradient(180deg, rgba(13,13,13,.75) 0%, transparent 22%, transparent 68%, rgba(13,13,13,.7) 100%);
}

/* --- Capa 2 · La criatura activa --- */
.escena-animales{position:absolute;inset:0;z-index:2;pointer-events:none}
.escena-animal{
  position:absolute;opacity:0;
  background-repeat:no-repeat;background-size:contain;
  transition:opacity .5s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

/* Ubicación de cada una, leída sobre el paisaje real */
/* El carancho no se ubica contra el layout: vive dentro del paisaje.
   Comparte lienzo (1536x1024), background-size y background-position con
   .escena-paisaje, así que su poste cae siempre exactamente sobre el poste
   del portón, a cualquier ancho de pantalla. Anclaje medido sobre el
   original: poste real en x=1296, línea de terreno en y=722. */
.escena-animal[data-animal="carancho"]{
  inset:0;width:auto;height:auto;aspect-ratio:auto;
  background-image:url("../img/escena/carancho-campo.png");
  background-size:cover;background-position:88% 58%;
  transform:translateY(-9px);
}
/* La sección se compactó (ver §escala) y las posiciones viejas, pensadas
   para una caja mucho más alta, ya quedaban debajo del botón. Los tres
   animales sueltos (liebre, mulita, oso) ahora viven en la franja libre a la
   derecha de la grilla de texto (x>=74%, la grilla termina en 72.8%), sobre
   el mismo pastizal, sin invadir texto ni botón. */
.escena-animal[data-animal="liebre"]{
  background-image:url("../img/escena/liebre.png");
  left:74%;bottom:16%;width:min(230px,19vw);aspect-ratio:620/413;
  background-position:left bottom;
  transform:translateX(-30px) scale(.98);
}
.escena-animal[data-animal="mulita"]{
  background-image:url("../img/escena/mulita.png");
  left:76%;bottom:16%;width:min(200px,17vw);aspect-ratio:520/347;
  background-position:center bottom;
  transform:translateX(-16px) scale(.98);
}
/* El oso comparte la misma franja libre que liebre y mulita (ver comentario
   junto a liebre): con la sección compacta, su posición vieja quedaba tapada
   por el botón. No se ata al lienzo del paisaje —no tiene que caer sobre un
   elemento concreto— así que reubicarlo es sólo cambiar left/bottom. La
   integración con el terreno sigue viniendo horneada en el asset: base
   disuelta y pastos reales del campo pasando por delante. */
.escena-animal[data-animal="oso"]{
  background-image:url("../img/escena/oso-pastizal.png");
  left:80%;bottom:16%;width:min(185px,16vw);aspect-ratio:248/165;
  background-position:center bottom;
  transform:translateX(-14px);
}

/* Una sola criatura por vez — la lógica de data-zona no cambió */
.banda-negra[data-zona="carancho"] .escena-animal[data-animal="carancho"],
.banda-negra[data-zona="liebre"]   .escena-animal[data-animal="liebre"],
.banda-negra[data-zona="mulita"]   .escena-animal[data-animal="mulita"],
.banda-negra[data-zona="oso"]      .escena-animal[data-animal="oso"]{opacity:1}
/* el carancho se asienta a la misma luz que la ilustración, no por encima */
.banda-negra[data-zona="carancho"] .escena-animal[data-animal="carancho"]{opacity:.92}

/* Los recorridos narrativos que ya teníamos, ajustados a los assets definitivos */
.banda-negra[data-zona="liebre"]   .escena-animal[data-animal="liebre"]  {animation:cruzaCampo 2.6s cubic-bezier(.28,0,.35,1) forwards}
.banda-negra[data-zona="mulita"]   .escena-animal[data-animal="mulita"]  {animation:caminaLento 3.2s ease-in-out forwards}
.banda-negra[data-zona="oso"]      .escena-animal[data-animal="oso"]     {animation:rondaLenta 3.6s ease-in-out forwards}
.banda-negra[data-zona="carancho"] .escena-animal[data-animal="carancho"]{animation:sePosa 2.4s cubic-bezier(.22,1,.36,1) forwards}
@keyframes cruzaCampo {from{transform:translateX(-44px) scale(.98)} to{transform:translateX(40px) scale(1)}}
@keyframes caminaLento{from{transform:translateX(-22px) scale(.98)} to{transform:translateX(18px) scale(1)}}
/* el oso avanza de izquierda a derecha y cierra en registro con el terreno */
@keyframes rondaLenta {from{transform:translateX(-16px)} to{transform:translateX(0)}}
/* el carancho no escala: escalar el lienzo lo sacaría de registro con el paisaje */
@keyframes sePosa     {from{transform:translateY(-9px)} to{transform:translateY(0)}}

/* --- Tablet: se verifica y ajusta más abajo, tras medir --- */

/* --- Mobile: el campo se recompone y las criaturas viven en la franja baja --- */
@media (max-width:760px){
  .escena-paisaje{background-position:64% 62%;opacity:.8}
  .escena-velo{background:linear-gradient(180deg, rgba(13,13,13,.9) 0%, rgba(13,13,13,.72) 30%, rgba(13,13,13,.5) 62%, rgba(13,13,13,.88) 100%)}
  /* Los 4 bloques ocupan todo el ancho en columna única y ya no queda ninguna
     franja libre al costado. Se reserva una franja baja fija, propia de este
     breakpoint, sólo para el animal — el resto de la sección sigue compacto. */
  .banda-negra .wrap{padding-bottom:8.6rem}
  /* En móvil el recorte del paisaje es demasiado angosto para contener el poste
     del portón, así que el carancho vuelve al PNG suelto — apoyado abajo a la
     derecha, sobre la línea de campo, nunca contra el borde superior. */
  .escena-animal[data-animal="carancho"]{
    inset:auto;right:4%;bottom:0;width:min(86px,22vw);aspect-ratio:440/660;
    background-image:url("../img/escena/carancho.png");
    background-size:contain;background-position:right bottom;transform:none;
  }
  /* Los offset extra en los calc() compensan lo que cada animación recorre
     hacia la derecha al terminar (cruzaCampo +40px, caminaLento +18px). */
  .escena-animal[data-animal="liebre"]{left:auto;right:calc(4% + 42px);bottom:0;width:min(100px,26vw)}
  .escena-animal[data-animal="mulita"]{left:auto;right:calc(4% + 20px);bottom:0;width:min(92px,23vw)}
  .escena-animal[data-animal="oso"]{left:auto;right:4%;bottom:0;width:min(82px,21vw)}
}

@media (prefers-reduced-motion:reduce){
  .escena-animal{transition:opacity .35s ease}
  .banda-negra[data-zona] .escena-animal{animation:none !important;transform:none !important}
}

/* --- La manada: cuatro bloques que revelan carácter al acercarse --- */
.animal-list{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:1.3rem;max-width:760px}
@media (min-width:700px){.animal-list{grid-template-columns:1fr 1fr;gap:1.1rem 2.4rem}}

.salvaje{
  position:relative;padding:.1rem 0 .1rem 1.2rem;
  outline:none;
  transition:opacity .35s ease;
}
/* La línea dorada: reacciona antes que nada */
.salvaje::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--dorado) 0%,rgba(201,162,75,.22) 100%);
  transform:scaleY(.5);transform-origin:top center;opacity:.55;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease;
}
.salvaje .salvaje-nombre{
  display:block;font-family:var(--f-titulo);font-weight:400;font-size:1.22rem;
  letter-spacing:.02em;color:var(--crema);line-height:1.05;
  transition:transform .45s cubic-bezier(.22,1,.36,1), color .3s ease;
}
.salvaje .salvaje-estilo{
  display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sobre-negro-2);font-weight:600;margin-top:.2rem;
  transition:transform .45s cubic-bezier(.22,1,.36,1), color .3s ease;
}
/* El detalle vive siempre en el flujo: reserva su espacio y nunca hay salto.
   Ancho un poco mayor que antes (38ch->46ch) para que el texto entre en
   menos líneas: es la reserva vertical que más pesa en cada bloque. */
.salvaje-detalle{
  opacity:0;visibility:hidden;transform:translateY(6px);
  margin-top:.4rem;max-width:46ch;
  transition:opacity .38s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility .38s;
}
.salvaje-detalle p{font-size:.82rem;line-height:1.4;color:var(--sobre-negro-2)}
.salvaje-detalle .salvaje-datos{
  display:flex;gap:1.2rem;margin-top:.45rem;
  font-family:var(--f-titulo);font-size:.95rem;letter-spacing:.06em;color:var(--dorado);
}
.salvaje-detalle .salvaje-datos span i{font-style:normal;font-size:.6rem;letter-spacing:.16em;color:var(--sobre-negro-2);margin-left:.3rem;font-family:var(--f-texto);font-weight:600}


/* Estado activo: hover, teclado o toque */
.salvaje:hover::before,.salvaje:focus-visible::before,.salvaje.is-abierto::before{transform:scaleY(1);opacity:1}
.salvaje:hover .salvaje-nombre,.salvaje:focus-visible .salvaje-nombre,.salvaje.is-abierto .salvaje-nombre{transform:translateX(7px);color:#fff}
.salvaje:hover .salvaje-estilo,.salvaje:focus-visible .salvaje-estilo,.salvaje.is-abierto .salvaje-estilo{transform:translateX(7px);color:var(--dorado)}
.salvaje:hover .salvaje-detalle,.salvaje:focus-visible .salvaje-detalle,.salvaje.is-abierto .salvaje-detalle{opacity:1;visibility:visible;transform:none}
.salvaje:focus-visible{outline:1px solid rgba(201,162,75,.5);outline-offset:10px}

/* El resto se atenúa apenas, sin perder legibilidad */
.animal-list:hover .salvaje:not(:hover),
.animal-list:focus-within .salvaje:not(:focus-visible):not(:hover){opacity:.9}

@media (prefers-reduced-motion:reduce){
  .salvaje,.salvaje::before,.salvaje .salvaje-nombre,.salvaje .salvaje-estilo,.salvaje-detalle{transition:none}
}

/* --- Tablet y notebooks angostas (700-1279px): la grilla ya no gana el
   margen extra que .wrap suma recién a partir de 1280px, así que la franja
   libre de la derecha se angosta mucho. Se achica la grilla y los tres
   animales sueltos para que sigan cabiendo sin tocar texto ni botón. --- */
@media (min-width:700px) and (max-width:1279px){
  .animal-list{max-width:min(600px,58vw)}
  /* Se ancla por la derecha en vez de por izquierda: así no depende de dónde
     termine la grilla, sólo de no comerse el margen derecho del wrap.
     El offset extra en cada calc() compensa el tramo que cada animación
     recorre hacia la derecha al terminar (cruzaCampo +40px, caminaLento
     +18px) — si no, el animal termina asomado fuera del borde. */
  .escena-animal[data-animal="liebre"]{left:auto;right:calc(3% + 42px);bottom:15%;width:min(115px,12vw)}
  .escena-animal[data-animal="mulita"]{left:auto;right:calc(2% + 20px);bottom:15%;width:min(105px,10.5vw)}
  .escena-animal[data-animal="oso"]{left:auto;right:2%;bottom:15%;width:min(95px,9.5vw)}
}

/* ==========================================================================
   ALIANZA — tarjetas numeradas con ventana de detalle al pasar el cursor
   ========================================================================== */
.pilares{display:grid;grid-template-columns:1fr;gap:.85rem}
@media (min-width:760px){.pilares{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.pilares{grid-template-columns:repeat(3,1fr);gap:1rem}}

/* Tarjeta compacta: es el CONTROL de la franja, no el protagonista visual.
   La altura se fija (no crece con hover) para que la grilla nunca se mueva. */
.pilar{
  position:relative;background:var(--blanco);border:1px solid var(--crema-3);
  padding:1.15rem 1.35rem;min-height:150px;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
@media (min-width:1000px){.pilar{min-height:134px;padding:1rem 1.25rem}}
.pilar:hover,.pilar:focus-within{border-color:var(--negro)}
.pilar .n{font-family:var(--f-titulo);font-size:1.05rem;color:#806322;line-height:1;display:block;margin-bottom:.25rem}
.pilar h3{font-size:1.22rem;margin-bottom:.3rem;line-height:1.05}
.pilar > p{font-size:.82rem;color:var(--tinta-2);line-height:1.42;margin:0}

/* La ventana de detalle: misma altura que la tarjeta cerrada. Si el
   contenido no entra, se recorre con scroll interno en vez de crecer. */
.pilar-detalle{
  position:absolute;inset:0;background:var(--negro);color:var(--sobre-negro);
  padding:.85rem 1.35rem;display:flex;flex-direction:column;justify-content:flex-start;
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dorado) var(--negro);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1), visibility .38s;
  z-index:3;
}
.pilar:hover .pilar-detalle,.pilar:focus-within .pilar-detalle{opacity:1;visibility:visible;transform:translateY(0)}
.pilar-detalle .n{color:var(--dorado);font-size:.88rem;margin-bottom:.2rem}
.pilar-detalle h4{font-family:var(--f-titulo);font-weight:400;text-transform:uppercase;font-size:.98rem;color:var(--crema);margin:0 0 .3rem;letter-spacing:.02em}
.pilar-detalle ul{display:flex;flex-direction:column;gap:.2rem}
.pilar-detalle li{
  font-size:.82rem;line-height:1.45;color:var(--sobre-negro-2);
  padding-left:.8rem;position:relative;
}
.pilar-detalle li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:1px;background:var(--dorado)}
/* Salida más rápida que la entrada */
.pilar:not(:hover):not(:focus-within) .pilar-detalle{transition-duration:.2s,.2s,.2s}
@media (prefers-reduced-motion:reduce){.pilar,.pilar-detalle{transition:none}}
/* Táctil: sin hover, la ventana se abre al tocar (focus) */
.pilar-toggle{position:absolute;inset:0;z-index:4;opacity:0;cursor:pointer}
@media (hover:hover){.pilar-toggle{display:none}}

/* --------------------------------------------------------------------------
   Franja fotográfica: vive dentro de la misma grilla que las tarjetas, así que
   sus tres columnas caen exactamente sobre las de los pilares. El orden la
   ubica entre las dos filas en cada breakpoint.
   -------------------------------------------------------------------------- */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Sin JS no hay riel que mostrar: la sección queda como estaba */
.franja{display:none}
/* El espaciado ya lo da el gap de .pilares: acá solo se evita que quede pegada */
.franja.is-lista{display:block;grid-column:1 / -1;margin:.2rem 0}
@media (min-width:1000px){.franja.is-lista{margin:.3rem 0}}

/* 1 columna: la franja parte los seis servicios por la mitad */
.pilar{order:1}
.pilar[data-servicio="activaciones"],
.pilar[data-servicio="academia"],
.pilar[data-servicio="colaboraciones"]{order:3}
.franja{order:2}
.franja-ventana{overflow:hidden}
.franja-riel{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;width:100%;
  gap:1.2rem;
  transform:translateX(calc(var(--g,0) * (-100% - 1.2rem)));
  transition:transform .68s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
@media (min-width:1000px){
  .franja-riel{gap:1.4rem;transform:translateX(calc(var(--g,0) * (-100% - 1.4rem)))}
}
/* Cambio de servicio: corte breve, para que dos categorías no parezcan la misma secuencia */
.franja.is-cambiando .franja-riel{opacity:0;transform:translateX(-14px);transition:opacity .18s ease, transform .18s ease}

.franja-grupo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;gap:0}

/* Panorámica: es la demostración, no el protagonista. Aporta menos altura
   que un recorte 3:2 clásico, para que la sección entre casi entera en pantalla. */
.franja-foto{
  position:relative;margin:0;overflow:hidden;
  background:var(--crema-2);border:1px solid var(--crema-3);
  aspect-ratio:5 / 2;
}
.franja-foto img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,center);
  opacity:0;transition:opacity .5s ease;
}
.franja-foto img.is-cargada{opacity:1}

/* Una sola banda con dos uniones diagonales, como el boceto de Alianza.
   Se recorta el contenedor: las fotografías conservan sus proporciones.
   Los solapes compensan el corte, sin huecos ni inclinación de las imágenes. */
@media (min-width:760px){
  .franja-grupo{--corte:clamp(40px,5vw,72px);--medio-corte:calc(var(--corte) / 2);height:clamp(140px,12vw,180px)}
  .franja-foto{height:100%;aspect-ratio:auto;border:0;width:calc(100% + var(--corte));margin-left:calc(-1 * var(--medio-corte))}
  .franja-foto:first-child{
    width:calc(100% + var(--medio-corte));margin-left:0;
    clip-path:polygon(0 0,calc(100% - 2px) 0,calc(100% - var(--corte) - 2px) 100%,0 100%);
  }
  .franja-foto:nth-child(2){
    background:var(--crema-3);
    clip-path:polygon(var(--corte) 0,calc(100% - 2px) 0,calc(100% - var(--corte) - 2px) 100%,0 100%);
  }
  .franja-foto:last-child{
    width:calc(100% + var(--medio-corte));
    clip-path:polygon(var(--corte) 0,100% 0,100% 100%,0 100%);
  }
  .franja-foto .franja-marca{padding-left:calc(var(--medio-corte) + 1.1rem)}
  .franja-foto .franja-marca::before{left:calc(var(--corte) + 1.1rem)}
  .franja-foto:first-child .franja-marca{padding-left:1.1rem}
  .franja-foto:first-child .franja-marca::before{left:1.1rem}
}

/* Marca temporal: se ve solo mientras no exista la fotografía real */
.franja-marca{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:.15rem;padding:1rem 1.1rem;pointer-events:none;
  font-family:var(--f-texto);font-weight:600;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-2);
}
.franja-marca::before{
  content:"";position:absolute;left:1.1rem;top:1.1rem;width:22px;height:1px;background:var(--dorado);
}
.franja-marca b{font-weight:600;color:var(--tinta)}

/* Pie editorial: rótulo del servicio y las dos reglas de grupo */
.franja-pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.2rem;
  margin-top:.9rem;
}
.franja-rotulo{
  font-family:var(--f-texto);font-weight:600;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-2);margin:0;
}
.franja-grupos{display:flex;align-items:center;gap:.5rem}
.franja-grupo-btn{
  width:32px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;
}
.franja-grupo-btn::before{
  content:"";width:100%;height:1px;background:var(--crema-3);
  transition:background .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
  transform-origin:left center;
}
.franja-grupo-btn.is-activo::before{background:var(--dorado);transform:scaleY(2)}
.franja-grupo-btn:focus-visible{outline:1px solid rgba(201,162,75,.6);outline-offset:4px}

/* La tarjeta que manda la franja: una regla dorada arriba, nada más */
.pilar::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--dorado);
  transform:scaleX(0);transform-origin:left center;z-index:5;pointer-events:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.pilar[data-activo]::after{transform:scaleX(1)}
.pilar[data-activo]{border-color:var(--dorado)}

/* En móvil tres fotos quedarían comprimidas: la franja pasa a
   recorrerse con el dedo, siempre en el mismo orden de los dos grupos. */
@media (max-width:759px){
  .franja-ventana{
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .franja-ventana::-webkit-scrollbar{display:none}
  .franja-riel{
    display:flex;width:auto;gap:.8rem;transform:none;transition:none;
  }
  .franja-grupo{display:contents}
  /* Una foto completa y el borde de la siguiente, con swipe nativo. */
  .franja-foto{flex:0 0 78%;aspect-ratio:4 / 3;scroll-snap-align:start}
  .franja-grupo:last-child .franja-foto:last-child{margin-right:22%}
}

@media (prefers-reduced-motion:reduce){
  .franja-riel{transition:opacity .2s ease}
  .franja-foto img{transition:none}
  .pilar::after{transition:none}
  .franja.is-cambiando .franja-riel{transform:none}
}


/* ==========================================================================
   MATERIA PRIMA — «De esta tierra. A nuestra manera.»
   --------------------------------------------------------------------------
   La frase es también la lógica visual: cada capítulo separa lo que viene del
   campo de lo que pasa adentro de la fábrica, con dos etiquetas chicas.

   En desktop la foto queda sticky a la izquierda y cambia sola al entrar cada
   ingrediente; el texto avanza a la derecha con el scroll normal de la página
   (no hay snap, ni bloqueo, ni scroll secuestrado). Debajo de 1024 el sticky
   se apaga y la foto vuelve a vivir adentro de su capítulo.

   El dorado marca la etapa activa, los filetes y los números. Nada más.
   ========================================================================== */
/* El recorrido de la sección se acortó a propósito: es un capítulo, no una
   travesía. Se recortó el aire de la sección, el que separa los capítulos y el
   interlineado, sin tocar ni un carácter del texto. */
.materia{padding-block:clamp(60px,7vw,104px)}
.materia .section-head{max-width:720px;margin-bottom:clamp(26px,3.5vw,44px)}
.materia-bajada{
  margin-top:1.15rem;max-width:58ch;color:var(--tinta-2);
  font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.65;
}

/* --- Capítulos ---------------------------------------------------------- */
.materia-lista{
  display:grid;grid-template-columns:1fr;
  gap:clamp(36px,4.5vw,52px);
  margin:0;padding:0;list-style:none;
}
.materia-numero{
  font-family:var(--f-titulo);font-size:clamp(1.9rem,2.6vw,2.6rem);
  line-height:1;color:var(--dorado);letter-spacing:.03em;
  transition:color .4s ease;
}
.materia-titulo{font-size:clamp(1.9rem,3vw,2.5rem);margin-top:.3rem}
.materia-sub{
  font-family:var(--f-titulo);font-weight:400;
  font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.15;
  text-transform:uppercase;letter-spacing:.05em;color:var(--tinta);
  margin-top:.55rem;
}
/* Filete dorado: separa el titular del cuerpo sin meter una caja. */
.materia-sub::after{
  content:"";display:block;width:54px;height:1px;
  background:var(--dorado);margin-top:.85rem;
}

/* Foto dentro del capítulo: es la que se ve en mobile y tablet. En desktop la
   reemplaza el visual sticky y ésta se saca del flujo. */
.materia-foto{
  margin:1.1rem 0 0;overflow:hidden;
  background:var(--crema-2);aspect-ratio:3/2;
}
.materia-foto img{width:100%;height:100%;object-fit:cover}

.materia-texto{margin-top:1.1rem;max-width:68ch}
.materia-texto > p{
  margin-top:.85rem;color:var(--tinta-2);
  font-size:clamp(.92rem,1.05vw,.98rem);line-height:1.66;
}
.materia-texto > p:first-child{margin-top:0}

/* Las etiquetas «De esta tierra» / «A nuestra manera», el dato técnico y las
   chips de proceso salieron con el copy nuevo: el relato ya los absorbió. Se
   quitan sus reglas para no dejar CSS que no pinta nada.
   Ver CHANGELOG 2026-09-16 si alguna vez hay que recuperarlas. */

/* Microcopy y destacado: la frase que se lleva el capítulo. */
.materia-micro{
  margin-top:1.25rem;padding-left:1.1rem;
  border-left:2px solid var(--dorado);color:var(--tinta);
  font-family:var(--f-titulo);font-weight:400;
  font-size:clamp(1.12rem,1.6vw,1.4rem);line-height:1.12;
  text-transform:uppercase;letter-spacing:.02em;
}

/* --- Visual sticky (sólo desktop) --------------------------------------- */
.materia-visual{display:none}
.materia-visual-fotos{position:relative;overflow:hidden;background:var(--crema-2)}
.materia-visual-foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);
  transition:opacity .55s ease,transform .9s ease;
}
.materia-visual-foto.es-activa{opacity:1;transform:none}

/* Indicador: cuatro etapas y dónde estás parado. No es navegación, es contexto. */
.materia-pasos{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(16px,2vh,26px);
  margin:0;padding:0;list-style:none;flex:0 0 auto;
}
.materia-paso{position:relative;display:flex;align-items:center;gap:.55rem}
.materia-paso::after{
  content:"";position:absolute;left:4px;top:calc(100% + 3px);
  width:1px;height:clamp(13px,2vh,23px);background:var(--crema-3);
}
.materia-paso:last-child::after{display:none}
.materia-punto{
  width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--crema-3);background:transparent;
  transition:background-color .4s ease,border-color .4s ease;
}
.materia-paso-n{
  font-size:.58rem;letter-spacing:.16em;font-weight:600;color:var(--tinta-2);
  transition:color .4s ease;
}
.materia-paso.es-activo .materia-punto{background:var(--dorado);border-color:var(--dorado)}
.materia-paso.es-activo .materia-paso-n{color:var(--tinta)}

/* --- Puente al cierre --- */
.materia-puente{
  margin:clamp(36px,4.5vw,60px) 0 0;
  font-family:var(--f-titulo);font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.02;
  text-transform:uppercase;letter-spacing:.01em;color:var(--tinta-2);
}

/* --- Cierre --- */
.materia-cierre{
  display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px);
  margin-top:clamp(24px,3vw,38px);
  padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--crema-3);
}
.materia-cierre-foto{margin:0;overflow:hidden;background:var(--crema-2);aspect-ratio:2/1}
.materia-cierre-foto img{width:100%;height:100%;object-fit:cover}
.materia-cierre-texto h3{font-size:clamp(2rem,4.4vw,3.4rem);line-height:.98}
.materia-cierre-texto p{
  margin-top:1.2rem;max-width:46ch;color:var(--tinta-2);
  font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.7;
}

/* --- Tablet: sin sticky, foto al costado del capítulo ---------------------
   A 768 y 820 una columna de texto al lado de un visual fijo quedaría en unos
   30 caracteres por línea. Antes que achicar el texto se usa el ancho: foto a
   la izquierda, capítulo a la derecha, y la página scrollea normal. */
@media (min-width:700px){
  .materia-bloque{
    display:grid;
    grid-template-columns:minmax(0,36%) minmax(0,1fr);
    column-gap:clamp(26px,3.2vw,44px);
    align-items:start;
  }
  .materia-foto{grid-column:1;grid-row:1 / span 4;margin-top:.4rem;aspect-ratio:3/4}
  .materia-numero{grid-column:2;grid-row:1}
  .materia-titulo{grid-column:2;grid-row:2}
  .materia-sub{grid-column:2;grid-row:3}
  .materia-texto{grid-column:2;grid-row:4}
  .materia-cierre{flex-direction:row;align-items:center;gap:clamp(32px,4vw,64px)}
  .materia-cierre-foto{flex:1 1 54%;aspect-ratio:2/1}
  .materia-cierre-texto{flex:1 1 44%}
  .materia-puente{max-width:20ch}
}

/* --- Desktop: la foto se queda quieta y el texto avanza ------------------ */
@media (min-width:1024px){
  .materia-experiencia{
    display:grid;
    grid-template-columns:minmax(0,44fr) minmax(0,56fr);
    gap:clamp(36px,4vw,72px);
    align-items:start;
  }
  .materia-visual{
    display:flex;align-items:stretch;gap:clamp(14px,1.3vw,20px);
    position:sticky;top:clamp(116px,15vh,146px);
  }
  .materia-visual-fotos{flex:1 1 auto;height:min(62vh,580px)}
  /* La foto de cada capítulo sale del flujo: la cuenta el visual sticky. Queda
     en el HTML porque es la que se ve, y se lee, abajo de 1024. */
  .materia-bloque .materia-foto{display:none}
  .materia-bloque{display:block}
  .materia-lista{gap:clamp(44px,5vh,64px)}
  .materia-texto{max-width:58ch}
  /* El capítulo que no está activo baja un punto de intensidad: guía la
     lectura sin esconder nada. */
  .materia-bloque:not(.es-activo) .materia-numero{color:var(--crema-3)}
  .materia-puente{max-width:none;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .materia-visual-foto{transition:none;transform:none}
  .materia-visual-foto.es-activa{transform:none}
  .materia-numero,.materia-punto,.materia-paso-n{transition:none}
}

/* ==========================================================================
   PANEL 2 — PEDIDO
   ========================================================================== */
.pedido-layout{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start}
@media (min-width:980px){.pedido-layout{grid-template-columns:1.4fr .6fr;gap:2rem}}
.pedido-lista{background:var(--blanco);border:1px solid var(--crema-3)}
.pedido-fila{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1.2rem 1.4rem;border-bottom:1px solid var(--crema-2)}
.pedido-fila:last-child{border-bottom:0}
.pedido-fila .thumb{height:64px;width:auto}
.pedido-fila .info h3{font-size:1.4rem;margin-bottom:.1rem}
.pedido-fila .info .meta{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);font-weight:600}
.pedido-ctrls{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:.4rem}
@media (min-width:520px){.pedido-ctrls{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));margin-top:.6rem}}
.ctrl{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:var(--crema);border:1px solid var(--crema-3);padding:.45rem .6rem}
.ctrl .lbl{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);font-weight:600}
.ctrl .grp{display:flex;align-items:center;gap:.45rem}
.ctrl button{width:44px;height:44px;background:var(--blanco);border:1px solid var(--crema-3);color:var(--tinta);font-size:1.05rem;line-height:1;transition:background .15s,border-color .15s,color .15s}
.ctrl button:hover{background:var(--negro);color:var(--crema);border-color:var(--negro)}
.ctrl .q{font-family:var(--f-titulo);font-size:1.2rem;min-width:18px;text-align:center;font-variant-numeric:tabular-nums}

.pedido-resumen{position:sticky;top:108px}
.pedido{background:var(--negro);color:var(--sobre-negro)}
.pedido-h{padding:1.2rem 1.4rem;border-bottom:1px solid #2A2724;display:flex;justify-content:space-between;align-items:center}
.pedido-h .t{font-family:var(--f-titulo);font-size:1.25rem;color:var(--crema);letter-spacing:.04em}
.pedido-h .n{font-size:.7rem;color:var(--dorado);font-variant-numeric:tabular-nums;letter-spacing:.08em;font-weight:600}
.pedido-lineas{max-height:330px;overflow-y:auto}
.pedido-linea{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:.9rem 1.4rem;border-bottom:1px solid #1E1C1A}
.pedido-linea .nm{font-family:var(--f-titulo);font-size:1.1rem;color:var(--crema);letter-spacing:.03em}
.pedido-linea .fm{display:block;font-family:var(--f-texto);font-size:.74rem;color:var(--sobre-negro-2);letter-spacing:0;text-transform:none;margin-top:.1rem}
.pedido-linea > span:last-child{font-family:var(--f-titulo);font-size:1.1rem;color:var(--dorado)}
.pedido-vacio{padding:2.2rem 1.4rem;text-align:center;color:var(--sobre-negro-2);font-size:.85rem;margin:0}
.pedido-f{padding:1.4rem}
.pedido-f .btn{width:100%;justify-content:center;background:var(--dorado);color:var(--negro)}
.pedido-f .btn:hover{background:var(--crema)}
.pedido-f .btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.pedido-f .btn[aria-disabled="true"]:hover{background:var(--dorado)}
.pedido-f .aclara{font-size:.72rem;color:var(--sobre-negro-2);margin:.9rem 0 0;text-align:center;line-height:1.5}

/* ==========================================================================
   CTA + FOOTER
   ========================================================================== */
.cta-band{background:var(--negro);color:var(--sobre-negro);text-align:center;padding:var(--e10) 0}
@media (min-width:900px){.cta-band{padding:var(--e11) 0}}
.cta-band h2{color:var(--crema);font-size:clamp(2.8rem,7vw,5.4rem);margin:.7rem auto 2rem;max-width:16ch}

/* ==========================================================================
   FOOTER — cierre de marca: compacto, sobrio, editorial
   ========================================================================== */
.site-footer{background:var(--negro);color:var(--sobre-negro-2)}

.footer-top{
  padding-top:var(--e8);padding-bottom:var(--e7);
  display:grid;grid-template-columns:1fr;gap:2.4rem;
}
@media (min-width:600px){.footer-top{grid-template-columns:1fr 1fr;gap:2.6rem 2rem}}
@media (min-width:900px){
  .footer-top{
    padding-top:88px;padding-bottom:64px;
    grid-template-columns:1.6fr .95fr 1.05fr 1.1fr;gap:2.4rem;
  }
}

/* --- Bloque de marca --- */
.footer-brand img{height:52px;width:auto;margin-bottom:1.1rem}
.footer-claim{
  font-family:var(--f-titulo);font-weight:400;font-size:1.32rem;line-height:1.1;
  letter-spacing:.015em;color:var(--crema);margin:0;
}
.footer-sub{
  display:block;margin-top:.5rem;font-family:var(--f-texto);font-weight:600;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dorado);
}

/* --- Columnas ---
   El selector decía h4: los títulos pasaron a h2 para arreglar el salto de
   jerarquía y esta regla se quedó sin aplicar, así que perdieron el dorado, el
   tracking y el aire de abajo. */
.footer-col h2{
  font-family:var(--f-titulo);font-weight:400;font-size:1.05rem;letter-spacing:.1em;
  color:var(--dorado);margin-bottom:1.35rem;text-transform:uppercase;
}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col li{font-size:.85rem;line-height:1.5;color:var(--sobre-negro-2)}

/* Enlaces: gris cálido más legible, con acento dorado al acercarse */
.footer-col a{
  position:relative;display:inline-block;font-size:.85rem;color:#B5ADA2;
  transition:color .24s ease, transform .24s ease;
}
.footer-col a::before{
  content:"";position:absolute;left:-.7rem;top:50%;width:4px;height:1px;
  background:var(--dorado);opacity:0;transform:translateY(-50%) scaleX(0);transform-origin:left;
  transition:opacity .24s ease, transform .24s ease;
}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--crema);transform:translateX(4px)}
.footer-col a:hover::before,.footer-col a:focus-visible::before{opacity:1;transform:translateY(-50%) scaleX(1)}
.footer-col a:focus-visible{outline:1px solid rgba(201,162,75,.55);outline-offset:5px}

/* Datos fiscales: presentes pero en segundo plano */
.footer-col li.footer-fiscal{
  margin-top:.5rem;padding-top:.6rem;border-top:1px solid #1F1D1B;
  font-size:.72rem;line-height:1.6;color:#8A837A;letter-spacing:.02em;
}

/* La fábrica: razón social con algo más de presencia que la calle */
.footer-fabrica b{display:block;font-weight:600;color:#B5ADA2;font-size:.85rem}

/* --- Franja inferior --- */
.footer-bottom{
  border-top:1px solid #1F1D1B;padding-top:1.2rem;padding-bottom:1.8rem;
  display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;justify-content:space-between;align-items:center;
  font-size:.74rem;line-height:1.5;
}
.footer-bottom p{color:var(--sobre-negro-2)}
@media (max-width:700px){
  .footer-bottom{flex-direction:column;text-align:center;gap:1rem;padding-bottom:2rem}
}

.wa-float{
  position:fixed;right:28px;bottom:28px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:120;width:54px;height:54px;border-radius:50%;
  background:var(--negro);color:var(--crema);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(13,13,13,.28);transition:transform .2s ease,background .2s ease,color .2s ease;
}
.wa-float:hover{transform:scale(1.07);background:var(--dorado);color:var(--negro)}
.wa-float svg{width:27px;height:27px}
.wa-float[hidden]{display:none}

.reveal{opacity:1;transform:none}
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --------------------------------------------------------------------------
   Preguntas frecuentes de la Alianza: texto plano, sin acordeón, para que lo
   lean tanto una persona como un buscador o un motor generativo.
   -------------------------------------------------------------------------- */
.preguntas{margin-top:var(--e8);padding-top:var(--e6);border-top:1px solid var(--crema-3)}
.preguntas-titulo{
  font-family:var(--f-texto);font-weight:600;font-size:.7rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--tinta-2);margin:0 0 1.8rem;
}
.preguntas-lista{display:grid;grid-template-columns:1fr;gap:1.6rem;margin:0}
@media (min-width:900px){.preguntas-lista{grid-template-columns:1fr 1fr;gap:2rem 3rem}}
.pregunta dt{
  font-family:var(--f-titulo);font-weight:400;font-size:1.25rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--tinta);margin-bottom:.5rem;line-height:1.1;
}
.pregunta dd{margin:0;font-size:.88rem;line-height:1.6;color:var(--tinta-2);max-width:52ch}
.section-foot{gap:1rem;flex-wrap:wrap}

/* Redes oficiales en el footer: mismo tratamiento que el resto de la columna */
.footer-redes{margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(242,237,228,.12);display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.footer-redes li{margin:0}

/* --------------------------------------------------------------------------
   Verificación de edad: capa negra sobre el sitio. El contenido no se elimina
   ni se oculta con display:none, así que sigue siendo rastreable.
   -------------------------------------------------------------------------- */
.edad-abierta,
.edad-abierta body{overflow:hidden}
.edad{
  position:fixed;inset:0;z-index:2000;
  background:var(--negro);
  display:flex;align-items:center;justify-content:center;
  padding:2rem 22px;overflow-y:auto;
}
/* El atributo hidden nativo pierde contra el display:flex de arriba (misma
   especificidad, la hoja del autor gana): sin esto, sacar "hidden" con JS no
   alcanza para ocultar la puerta. Esta regla desempata a favor de hidden. */
.edad[hidden]{display:none}
.edad-caja{
  width:100%;max-width:520px;text-align:center;margin:auto;
  display:flex;flex-direction:column;align-items:center;
}
.edad-logo{height:64px;width:auto;margin-bottom:var(--e7)}
@media (min-width:700px){.edad-logo{height:78px}}
.edad-titulo{
  font-family:var(--f-titulo);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,7vw,3.2rem);line-height:1;color:var(--crema);margin:0;
}
.edad-texto{
  font-size:.92rem;line-height:1.6;color:var(--sobre-negro-2);
  margin-top:.9rem;max-width:34ch;
}
.edad-acciones{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:var(--e6)}
/* es la primera interacción del sitio: el área táctil va cómoda */
.edad-acciones .btn{min-width:170px;justify-content:center;padding-top:1.3em;padding-bottom:1.3em}
.edad-legal{
  margin-top:var(--e7);padding-top:1.2rem;border-top:1px solid rgba(242,237,228,.14);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--sobre-negro-2);max-width:38ch;
}
/* Una raya dorada arriba, como el resto del sistema */
.edad-caja::before{
  content:"";width:34px;height:2px;background:var(--dorado);
  margin-bottom:var(--e6);
}

/* Shared interaction safeguards. */
.ctrl button:disabled{opacity:.45;cursor:default}
.pedido-ctrls{min-width:0}
.t-small a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:699px){.footer-bottom{padding-bottom:96px}.hero-pie{margin-top:32px}.hero h1{max-width:100%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.js-reveal .reveal{opacity:1;transform:none}}

/* ==========================================================================
   Banner de consentimiento — sólo aparece si hay GA4 configurado
   ========================================================================== */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:1500;
  background:var(--negro);color:var(--sobre-negro);padding:1.1rem 22px;
  border-top:2px solid var(--dorado)}
.cookies[hidden]{display:none}
.cookies-wrap{max-width:var(--contenedor);margin:0 auto;display:flex;
  flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}
.cookies p{margin:0;font-size:.85rem;line-height:1.5;max-width:62ch;color:var(--sobre-negro)}
.cookies p a{color:var(--dorado);text-decoration:underline;text-underline-offset:3px}
.cookies-botones{display:flex;gap:.6rem;flex-wrap:wrap}
.cookies .btn{min-height:44px;font-size:.7rem;padding:.8em 1.5em}
/* Botón de preferencias dentro del pie: se ve igual que los enlaces vecinos */
.footer-cookies{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-align:left;text-decoration:underline;text-underline-offset:3px;
}

/* ==========================================================================
   LUZ DE CONTORNO — rim light reactivo al cursor
   --------------------------------------------------------------------------
   Principio: NO se ilumina el área detrás del cursor, se ilumina el TRAMO DEL
   CONTORNO más cercano a él. El lado opuesto queda apagado.

   Lo comparten tres piezas: los dos CTA de la franja y el isologo del cierre.
   Todas leen las mismas variables, que escribe el mismo módulo de JS:
     --luz        intensidad (0 a 1), para el fade de entrada y salida
     --luz-x/y    posición del cursor dentro de la pieza
   Toda la luz es blanca neutra. Ningún matiz de color.
   ========================================================================== */

/* --------------------------------------------------------------- LA FRANJA */
/* Franja contenida: es un corte entre dos secciones crema, no un capítulo
   propio. El aire de arriba y abajo alcanza para despegar los botones del
   borde sin que la banda se coma media pantalla. */
.cta-franja{background:var(--negro);padding-block:clamp(32px,4vw,56px)}
.cta-par{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.2vw,28px)}

.cta-luz{
  position:relative;z-index:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;min-width:clamp(240px,26vw,320px);
  padding:1.15em 2.4em;
  font-family:var(--f-texto);font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  color:var(--blanco);cursor:pointer;
  --luz:0;--luz-x:50%;--luz-y:50%;
}
.cta-luz.is-encendido{z-index:1}

/* La superficie. Negra siempre: nunca se vuelve gris ni se le pone una mancha
   translúcida encima. En reposo la separa del fondo un filo casi invisible. */
.cta-luz-cara{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--negro);
  border:1px solid rgba(255,255,255,.12);
}

/* EL EFECTO · un marco de 2px al que se le recorta el centro. Encima, un
   degradado chico anclado al cursor: sólo el tramo de borde que le queda cerca
   se enciende. El resto del perímetro sigue oscuro. */
.cta-luz-rim{
  position:absolute;inset:-1px;z-index:2;pointer-events:none;
  padding:2px;
  background:radial-gradient(70px circle at var(--luz-x) var(--luz-y),
    rgba(255,255,255,.95), rgba(255,255,255,.45) 38%, rgba(255,255,255,0) 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:var(--luz);
  transition:opacity .26s ease;
}
/* Un bloom mínimo que acompaña al borde encendido. Nunca protagonista. */
.cta-luz-bloom{
  position:absolute;inset:-6px;z-index:0;pointer-events:none;
  padding:7px;
  background:radial-gradient(70px circle at var(--luz-x) var(--luz-y),
    rgba(255,255,255,.34), rgba(255,255,255,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:blur(5px);
  opacity:var(--luz);
  transition:opacity .26s ease;
}

.cta-luz-texto{position:relative;z-index:3}
.cta-luz:focus-visible{outline:2px solid var(--blanco);outline-offset:5px}

@media (max-width:560px){
  .cta-par{flex-direction:column;align-items:stretch}
  .cta-luz{min-width:0;width:100%;padding-inline:1.4em}
}

/* --------------------------------------------------------------- EL ISOLOGO */
.isologo-luz{
  position:relative;display:inline-block;
  padding:18px;
  margin-bottom:clamp(16px,2.2vw,30px);
  --luz:0;--luz-x:50%;--luz-y:50%;
}
.isologo-figura{position:relative;display:block}
.isologo-marca{
  position:relative;z-index:1;display:block;height:auto;
  width:clamp(150px,45vw,200px);
}
@media (min-width:700px){ .isologo-marca{width:clamp(200px,30vw,260px)} }
@media (min-width:1100px){ .isologo-marca{width:clamp(260px,22vw,320px)} }

/* EL EFECTO · una luz dorada con la forma exacta del isologo, difuminada y
   puesta DETRÁS del símbolo. El PNG blanco es opaco, así que tapa toda la parte
   interior: lo único que queda a la vista es lo que se derrama por fuera del
   contorno. Como el derrame es parejo en todas direcciones, no hay copia
   desplazada ni lectura de sombra; la luz nace del borde real.
   Qué tramo se enciende lo decide el degradado radial, anclado al cursor: sólo
   se ilumina la parte de la silueta que le queda cerca.

   El desenfoque va en el contenedor y la máscara en el hijo, a propósito. Si
   estuvieran en el mismo elemento el filtro se aplicaría ANTES de la máscara y
   el recorte volvería a dejar el borde duro, sin derrame. */
.isologo-luzcontorno{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  filter:blur(12px);
  opacity:var(--luz);
  transition:opacity .26s ease;
}
.isologo-luzcontorno-forma{
  position:absolute;inset:0;
  /* Dorado como LUZ, no como color plano: núcleo claro junto al cursor,
     ámbar en el medio, transparente enseguida. */
  background:radial-gradient(104px circle at var(--luz-x) var(--luz-y),
    rgba(244,206,118,1) 0%,
    rgba(224,183,89,.88) 30%,
    rgba(201,162,75,.38) 54%,
    rgba(201,162,75,0) 76%);
  -webkit-mask-image:url("../img/isologo-blanco.png");
  -webkit-mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-image:url("../img/isologo-blanco.png");
  mask-size:100% 100%;
  mask-repeat:no-repeat;
}

/* Sin seguimiento con movimiento reducido: un filo estático y discreto. */
@media (prefers-reduced-motion:reduce){
  .cta-luz{--luz:.28;--luz-x:50%;--luz-y:50%}
  .isologo-luz{--luz:0}
  .cta-luz-rim,.cta-luz-bloom,.isologo-luzcontorno{transition:none}
}

/* ==========================================================================
   COMUNIDAD — «Que hablen los nuestros»
   --------------------------------------------------------------------------
   Fondo crema, igual que el resto de la página: la franja negra de CTA queda
   como corte y las opiniones vuelven al papel del sitio. Las cards en blanco
   sobre crema hacen el contraste, apoyadas en una línea fina.
   Sin rim-light acá: las opiniones necesitan calma y lectura, no protagonismo.
   ========================================================================== */
.comunidad{
  background:var(--crema);color:var(--tinta);
  padding-block:clamp(56px,8vw,120px) clamp(40px,5vw,72px);
  overflow:hidden;              /* la cinta se desborda a propósito; el body no */
  /* La sección siguiente también es crema: una línea fina las separa sin
     meter otra franja de color. */
  border-bottom:1px solid var(--crema-3);
}

/* --- Encabezado --- */
.comunidad-intro{text-align:center;max-width:44ch;margin:0 auto clamp(36px,5vw,64px)}
.comunidad-intro h2{
  color:var(--tinta);font-size:clamp(2.4rem,6vw,4.6rem);
  margin-top:.7rem;line-height:.95;
}
.comunidad-bajada{
  margin-top:1.2rem;color:var(--tinta-2);
  font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.65;
}

/* --- Cinta -------------------------------------------------------------
   Rotación automática continua, con el mismo esquema que el marquee de
   reseñas de esmel.mx: dos sets idénticos (A visible + B aria-hidden) y un
   keyframe que recorre exactamente -50%, o sea un set completo. Al volver a 0
   la cinta ya muestra el set B en el mismo lugar, así que el corte no se ve.
   El movimiento es una sola animación CSS sobre transform: sin timers, sin
   sumar scrollLeft y sin librerías. js/main.js la toma con la Web Animations
   API para pausarla y para que las flechas y el dedo la muevan. */
.op-riel{position:relative}
.op-marquee{
  overflow:hidden;
  /* Los bordes se desvanecen: deja claro que la fila sigue de los dos lados
     en vez de cortarse contra el aire. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  /* Capa propia de composición: en WebKit un elemento animado dentro de un
     ancestro con mask-image puede dejar de repintarse y verse congelado. */
  transform:translateZ(0);
}
.op-lista{
  display:flex;gap:clamp(14px,1.6vw,22px);
  /* Cada card toma su alto natural: una opinión de seis palabras no se estira
     para igualar a una de cinco líneas. El min-height evita que las más cortas
     queden diminutas y da ritmo a la fila. */
  align-items:flex-start;
  width:max-content;
  margin:0;padding:4px 0 clamp(20px,2.5vw,28px);list-style:none;
  animation:op-cinta var(--op-duracion,90s) linear infinite;
  will-change:transform;
  /* pan-y: el gesto vertical sigue scrolleando la página; el horizontal lo
     toma el listener de main.js, que recién hace preventDefault cuando ya
     confirmó que el gesto es horizontal. */
  touch-action:pan-y;
}
@keyframes op-cinta{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.op-lista:focus-visible{outline:2px solid var(--dorado);outline-offset:6px}
@media (hover:none){
  .op-lista{cursor:grab}
  .op-lista.arrastrando{cursor:grabbing;user-select:none}
}

.op-card{
  /* Ancho en vw, no en %: el contenedor es width:max-content, así que un
     porcentaje se resolvería contra un ancho indefinido y la card colapsaría. */
  flex:0 0 min(78vw,320px);
  display:flex;
}
.op-card > article{
  display:flex;flex-direction:column;
  width:100%;min-height:clamp(190px,17vw,230px);
  background:var(--blanco);color:var(--tinta);
  border:1px solid var(--crema-3);
  padding:clamp(20px,2vw,28px);
}

/* --- Quién --- */
.op-quien{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:1rem}
.op-avatar{
  flex:0 0 auto;width:44px;height:44px;
  display:grid;place-items:center;
  background:var(--negro);color:var(--crema);
  font-family:var(--f-titulo);font-size:1.4rem;line-height:1;
}
.op-datos{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.op-nombre{font-weight:600;font-size:.92rem;line-height:1.3;color:var(--tinta)}
/* Facebook dice «recomienda», no da un puntaje: por eso un tilde y no estrellas. */
.op-recomienda{
  display:inline-flex;align-items:center;gap:.35em;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--madera);
}
.op-recomienda::before{content:"✓";font-size:.85em}
.op-fecha{font-size:.7rem;color:var(--tinta-2)}

.op-texto{
  font-size:.94rem;line-height:1.6;color:var(--tinta);
  margin:0 0 1.2rem;
}
/* Altura variable a propósito: las opiniones cortas no se estiran. El pie
   siempre queda abajo para que las cards tengan un pie de página parejo. */
.op-pie{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--crema-3)}
.op-fuente{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--tinta-2);text-decoration:none;
}
/* Sin fill acá: cada ícono trae el suyo. Forzarlo rellenaba macizo el contorno
   de Instagram y el de YouTube, que están dibujados con trazo. */
.op-fuente svg{width:14px;height:14px;flex:0 0 auto}
a.op-fuente:hover{color:var(--tinta)}
a.op-fuente:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}

/* --- Controles: ayuda, no protagonista ---
   La cinta ya se mueve sola; las flechas sirven para adelantar o volver sin
   esperar. Como el recorrido es un loop, nunca se apagan: siempre hay a dónde
   ir. Sólo quedan deshabilitadas en el respaldo sin movimiento, donde la lista
   vuelve a ser un scroll con principio y final. */
.op-controles{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.2rem}
.op-flecha{
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:1px solid var(--crema-3);color:var(--tinta-2);
  cursor:pointer;transition:border-color .2s,color .2s;
}
.op-flecha svg{width:20px;height:20px}
.op-flecha:hover{border-color:var(--madera);color:var(--tinta)}
.op-flecha:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}
.op-flecha[disabled]{opacity:.3;cursor:default}
.op-flecha[disabled]:hover{border-color:var(--crema-3);color:var(--tinta-2)}

/* --- Cierre de comunidad --- */
/* 52ch en lugar de 46 para que los cuatro logos entren en una sola fila. El
   texto conserva sus 46ch, así que el ritmo de lectura no cambia.
   El aire de arriba y el de abajo se recortaron: es una invitación breve, no
   un capítulo, y no tiene por qué ocupar media pantalla. */
.comunidad-cierre{
  text-align:center;max-width:52ch;
  margin:clamp(30px,4vw,56px) auto 0;
}
.comunidad-cierre h3{
  color:var(--tinta);font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1;
}
.comunidad-cierre p{
  margin:.85rem auto 0;max-width:46ch;color:var(--tinta-2);
  font-size:clamp(.9rem,1.1vw,1rem);line-height:1.65;
}
/* También es un <p>, pero no es texto: no le corresponde el ancho de lectura. */
.comunidad-cierre .op-redes{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:none;margin-top:.9rem}
/* Sólo el logo, en grande y sin caja: el nombre de cada red se lee en el dibujo
   y viaja como aria-label. El cuadrado sigue existiendo, invisible, para que el
   área táctil no se reduzca al trazo del ícono. */
.op-red{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(54px,5.4vw,62px);height:clamp(54px,5.4vw,62px);
  border:0;color:var(--negro);
  text-decoration:none;
  transition:color .2s;
}
.op-red svg{width:clamp(38px,4.2vw,48px);height:clamp(38px,4.2vw,48px);flex:0 0 auto}
/* Sin caja, un fondo negro al pasar el mouse aparecería de la nada: el logo
   cambia de tono y listo. */
.op-red:hover{color:var(--madera)}
.op-red:focus-visible{outline:2px solid var(--dorado);outline-offset:3px}

/* --- Anchos de card por breakpoint ---
   mobile: 1 card + ~12% de la siguiente · tablet: 2 + asomo · desktop: 3 + asomo */
@media (min-width:700px){ .op-card{flex-basis:min(44vw,360px)} }
@media (min-width:1100px){ .op-card{flex-basis:min(28vw,352px)} }

/* Respaldo sin movimiento: nada rota solo. La cinta vuelve a ser la lista de
   siempre, con scroll horizontal nativo y snap, y la copia inerte se saca para
   que nadie tenga que pasar dos veces por las mismas opiniones. main.js detecta
   que no hay animación y las flechas vuelven a scrollear. */
@media (prefers-reduced-motion:reduce){
  .op-marquee{
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:none;mask-image:none;
    scroll-snap-type:x mandatory;
  }
  .op-marquee::-webkit-scrollbar{display:none}
  .op-lista{animation:none;transform:none;width:auto}
  .op-card{scroll-snap-align:start}
  .op-card[aria-hidden="true"]{display:none}
  .op-flecha,.op-red,.op-fuente{transition:none}
}