/* ══════════════════════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FAF8F4;
  --cream:#F3EDE4;
  --beige:#E7DCCB;
  --beige-deep:#D8C8B0;
  --ink:#1C1917;
  --ink-soft:#57534E;
  --ink-mute:#685E55;   /* 5.4:1 sobre cream · antes #8A8178 daba 3.3:1 */
  --accent:#A16207;
  --accent-text:#985C07;  /* el mismo dorado, legible como texto: 4.7:1 */
  --accent-on-dark:#D9A441;  /* y su versión para el hero en tinta */
  --line:rgba(28,25,23,.13);
  --line-strong:rgba(28,25,23,.28);

  /* Una sola familia. Montserrat en display va en 600/700 con el
     tracking cerrado; en texto, en 300/400. La diferencia de voz la
     hace el peso, no una segunda tipografía. */
  --serif:'Montserrat', system-ui, -apple-system, sans-serif;
  --sans:'Montserrat', system-ui, -apple-system, sans-serif;

  /* Esquinas continuas al estilo de iOS. El navegador que soporta
     corner-shape dibuja la squircle real; el resto redondea normal. */
  --r-xs:12px;
  --r-sm:16px;
  --r-md:22px;
  --r-lg:30px;
  --r-xl:40px;
  --r-full:999px;

  /* Escala tipográfica. Había nueve cuerpos distintos entre 11 y 16 px
     —.7, .72, .74, .78, .82, .84, .86, .88, .9, .92, .94, .95, .98, 1.02—
     que a esa distancia no crean jerarquía, solo ruido. Cuatro pasos:
     etiqueta, secundario, texto y destacado. Los titulares van aparte,
     con clamp(). */
  --fs-micro:.75rem;   /* 12px · etiquetas en versales */
  --fs-sm:.875rem;     /* 14px · texto secundario, pies, metadatos */
  --fs-base:1rem;      /* 16px · texto corrido */
  --fs-lg:1.125rem;    /* 18px · entradillas y subtítulos de tarjeta */

  /* Ritmo vertical de las secciones. Antes cada bloque elegía su propio
     relleno —de 8 a 12 rem— y la página se hacía larga sin decir más.
     Dos valores: el normal y el de las secciones que abren capítulo. */
  --sec-y:clamp(3.5rem,7vw,6rem);
  --sec-y-lg:clamp(4.5rem,9vw,7.5rem);

  --container:1360px;
  --gap:clamp(1.25rem, 4vw, 3rem);
  --announce-h:34px;

  --ease-out:cubic-bezier(.23,1,.32,1);      /* salida fuerte, para entradas y salidas */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* para lo que se mueve por pantalla */
  --ease-expo:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:var(--fs-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.1; letter-spacing:-.01em;}
::selection{background:var(--ink); color:var(--bg);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}

.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--gap);}
/* la cabecera es fija: sin esto, los enlaces del menú dejan el título debajo */
section[id]{scroll-margin-top:calc(var(--cabecera-h, 66px) + 1.2rem);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.eyebrow{font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); font-weight:500;}

.split-word{display:inline-block; will-change:transform;}
.fx-up{opacity:0; transform:translateY(28px);}
.no-gsap .fx-up{opacity:1; transform:none;}

/* ══════════ HEADER ══════════ */
.site-header{
  position:fixed; inset:var(--announce-h) 0 auto 0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem var(--gap);
  /* nada de padding aquí: animarlo recalcula el layout en cada frame */
  transition:background .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{
  /* opaca de verdad: con el hero oscuro debajo, un 94 % dejaba
     fantasmas del contenido al pasar por debajo */
  background:var(--bg);
  border-bottom-color:var(--line); padding-block:.8rem;
}
.brand{font-family:var(--serif); font-size:var(--fs-base); letter-spacing:.22em; white-space:nowrap;}
.brand em{font-style:normal; color:var(--accent);}
.head-nav{display:flex; gap:1.6rem; align-items:center;}
.head-nav a{font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); position:relative; padding-block:.3rem;}
.head-nav a::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-expo);}
.head-nav a:hover::after{transform:scaleX(1); transform-origin:left;}
.head-cta{font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ink); padding:.55rem 1.1rem; color:var(--ink); transition:background .35s var(--ease-out), color .35s var(--ease-out);}
.head-cta:hover{background:var(--ink); color:var(--bg);}

/* ══════════ HERO ══════════ */
.hero{position:relative; height:460vh;}
.hero-pin{position:sticky; top:0; height:100svh; width:100%; overflow:hidden; background:var(--cream); display:grid; place-items:center;}
.hero-media{position:absolute; inset:0; overflow:hidden;}
.hero-media video,
.hero-media img.poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%; will-change:transform;}
.hero-media img.poster{z-index:1;}
.hero-media video{z-index:2; opacity:0; transition:opacity .5s var(--ease-out);}
.hero-media video.is-ready{opacity:1;}

.hero-acts{position:relative; z-index:10; width:100%; height:100%;}
.act{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.1rem; padding:0 1.5rem; pointer-events:none;}
.act-1 h1{font-size:clamp(2.4rem, 7.6vw, 6.4rem); max-width:13ch;}
.act-1 h1 .ital{font-style:italic; font-weight:400;}
/* velo detrás del texto de los actos: el vídeo cambia de claridad
   fotograma a fotograma y el contraste no puede depender de eso */
.act-2 p.big, .act-3 p.big, .act-4 p.big{position:relative; font-family:var(--serif); font-size:clamp(1.5rem, 4.2vw, 3.1rem); max-width:19ch; line-height:1.22;}
.act-3{gap:1.6rem;}
.act-3 .hero-btn{pointer-events:auto;}
.hero-sub{font-size:var(--fs-sm); color:var(--ink-soft); max-width:34ch; letter-spacing:.01em;}
/* El CTA no forma parte de los actos: se queda quieto mientras el texto
   se releva encima, para que la invitación a comprar no desaparezca. */
.hero-cta{position:absolute; z-index:12; left:50%; transform:translateX(-50%);
  bottom:clamp(6.4rem,14vh,9.5rem); display:flex; flex-direction:column; align-items:center;
  gap:.85rem; pointer-events:auto; text-align:center; padding:1.4rem 2.2rem;}
/* frase larga: en caja baja se lee, en versales no */
.hero-wa{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-micro); letter-spacing:.01em;
  color:var(--ink); border-bottom:1px solid var(--line-strong);
  padding-bottom:.3rem; min-height:44px; transition:color .3s var(--ease-out),
  border-color .3s var(--ease-out);}
.hero-wa:hover{color:var(--accent); border-color:var(--accent);}
.hero-wa svg{width:15px; height:15px; flex:none;}
@media (max-width:640px){
  .hero-cta{bottom:clamp(3.4rem,9vh,5rem); gap:.7rem;}
  /* en minúscula corrida el tracking ancho estorba: se queda en el
     mismo .01em que en escritorio */
  .hero-wa{font-size:var(--fs-micro);}
}
.hero-btn{display:inline-flex; align-items:center; gap:.7rem; font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; padding:1rem 2rem; background:var(--ink); color:var(--bg); transition:transform .4s var(--ease-expo), background .35s;}
.hero-btn:hover{transform:translateY(-3px); background:var(--accent);}
.hero-btn svg{width:14px; height:14px;}

/* Entrada del eyebrow del Acto 1 en desktop (CSS puro, no toca el nodo
   editable [data-wk] por dentro — solo transiciona el propio elemento). */

.hero-hud{position:absolute; z-index:12; left:var(--gap); right:var(--gap); bottom:1.7rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; color:var(--bg); mix-blend-mode:difference; pointer-events:none;}
.hero-hud .meta{font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; font-variant-numeric:tabular-nums;}
.hero-progress{position:absolute; z-index:12; left:var(--gap); right:var(--gap); bottom:1.05rem; height:1px; background:rgba(28,25,23,.18);}
.hero-progress span{display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left; will-change:transform;}
.scroll-hint{transition:opacity .5s var(--ease-out);
  position:absolute; z-index:12; left:50%; bottom:3rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:var(--fs-micro); letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);}
.scroll-hint i{display:block; width:1px; height:38px; background:var(--line-strong); position:relative; overflow:hidden;}
.scroll-hint i::after{content:''; position:absolute; inset:0; background:var(--ink); animation:trickle 1.9s var(--ease-out) infinite;}
@keyframes trickle{0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)}}

/* ══════════ MANIFIESTO ══════════ */
.manifesto{padding:var(--sec-y-lg) var(--gap); max-width:1000px; margin-inline:auto; text-align:center;}
.manifesto h2{font-size:clamp(1.9rem,4.6vw,3.4rem); margin:1.4rem auto 2rem; max-width:18ch;}
.manifesto h2 em{font-style:italic; color:var(--accent);}
.manifesto p{color:var(--ink-soft); font-size:clamp(1rem,1.35vw,1.12rem); max-width:58ch; margin-inline:auto;}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:760px; margin:clamp(2.2rem,4.5vw,3.2rem) auto 0; padding-top:2.2rem; border-top:1px solid var(--line);}
.stat .num{font-family:var(--serif); font-size:clamp(2rem,4.5vw,3rem); line-height:1; display:block;}
.stat .lbl{font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:.6rem; display:block;}

/* ══════════ MARQUEE ══════════ */
.marquee{overflow:hidden; border-block:1px solid var(--line); padding-block:1.1rem; background:var(--cream);}
.marquee-track{display:flex; width:max-content; will-change:transform;}
.marquee-track span{font-family:var(--serif); font-size:clamp(1rem,2vw,1.5rem); font-style:italic; color:var(--ink-soft); padding-inline:1.6rem; white-space:nowrap; display:inline-flex; align-items:center; gap:1.6rem;}
.marquee-track span::after{content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.6;}

/* ══════════════════════════════════════════════════════════════
   CATEGORÍAS · las tres colecciones, como tres puertas
   ══════════════════════════════════════════════════════════════ */
.cats{padding:clamp(4rem,9vh,7rem) 0 clamp(2rem,5vh,3.5rem); background:var(--cream);}
.cats-head{text-align:center; margin-bottom:clamp(2rem,5vh,3.4rem); padding-inline:var(--gap);}
.cats-head h2,.cats-head h1{font-size:clamp(2.1rem,6.5vw,4.6rem); letter-spacing:.02em; text-transform:uppercase;
  font-weight:500;}
.cats-head p{color:var(--ink-soft); margin-top:.7rem; font-size:var(--fs-base);}

.cats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.4vw,1.1rem);
  padding-inline:var(--gap); max-width:var(--container); margin-inline:auto;}
.cat-card{position:relative; display:block; overflow:hidden; background:var(--beige);
  aspect-ratio:3/4; isolation:isolate; border-radius:var(--r-lg);}
.cat-card img{width:100%; height:100%; object-fit:cover; transition:transform .26s var(--ease-out);}
.cat-card::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,25,23,0) 26%, rgba(28,25,23,.42) 56%,
    rgba(28,25,23,.9) 100%);}
.cat-card:hover img, .cat-card:focus-visible img{transform:scale(1.06);}
.cat-body{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:clamp(1.1rem,2.4vw,1.9rem);
  color:#fff;}
.cat-body .eyebrow{color:rgba(255,255,255,.82); margin-bottom:.4rem; display:block;}
.cat-body h3{font-family:var(--sans); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,1.9rem); letter-spacing:.02em; line-height:1.05; color:#fff;}
.cat-body p{font-size:var(--fs-sm); color:rgba(255,255,255,.86); margin-top:.45rem; max-width:30ch;
  line-height:1.45;}
.cat-go{display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem; font-size:var(--fs-micro);
  letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:.25rem;}
.cat-go svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8;
  transition:transform .4s var(--ease-out);}
.cat-card:hover .cat-go svg{transform:translateX(4px);}

/* ══════════════════════════════════════════════════════════════
   CATÁLOGO · rejilla con filtros
   La barra se queda pegada bajo la cabecera para que los filtros
   sigan a mano mientras se baja por las piezas.
   ══════════════════════════════════════════════════════════════ */
/* el dock flota sobre el contenido: se le reserva su altura al final */
.catalogo{background:var(--bg); padding-bottom:clamp(6rem,12vh,9rem);}

.cat-bar{position:sticky; top:calc(var(--cabecera-h, 66px) + .55rem); z-index:60;
  background:var(--bg);
  border-block:1px solid var(--line); padding:.75rem var(--gap);}
/* Cuando la barra se queda pegada, las tarjetas pasaban por los lados de
   la cápsula y por el hueco que queda bajo la cabecera. Este fondo a todo
   lo ancho tapa esa franja y se desvanece por abajo, para que las fotos
   se disuelvan en vez de cortarse. Solo aparece cuando está pegada. */
.cat-bar::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:50%; transform:translateX(-50%); width:100vw;
  top:calc(-1 * (var(--cabecera-h, 66px) + .55rem) - 1px);
  bottom:-1.7rem;
  background:linear-gradient(180deg,
    var(--bg) 0%, var(--bg) calc(100% - 1.7rem), rgba(250,248,244,0) 100%);
  opacity:0; transition:opacity .25s var(--ease-out);
}
.cat-bar.is-stuck::before{opacity:1;}
.cat-bar-in{max-width:var(--container); margin-inline:auto; display:flex; align-items:center;
  gap:clamp(.6rem,2vw,1.6rem); flex-wrap:wrap;}
.chips{display:flex; gap:.4rem; flex-wrap:wrap; flex:1 1 auto; min-width:0;}
.chip{font-size:var(--fs-micro); letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  padding:.62rem 1.05rem; border:1px solid var(--line-strong); color:var(--ink-soft);
  background:transparent; white-space:nowrap; min-height:44px; display:inline-flex;
  align-items:center; transition:background .28s var(--ease-out), color .28s var(--ease-out),
  border-color .28s var(--ease-out);}
.chip:hover{border-color:var(--ink); color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.cat-count{font-size:var(--fs-micro); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute);
  white-space:nowrap;}
.cat-count b{color:var(--ink); font-weight:600;}
.cat-sort{font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--line-strong); background:transparent; padding:.6rem .8rem; min-height:44px;
  cursor:pointer;}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.5vw,1.4rem);
  padding:clamp(1.6rem,4vh,2.6rem) var(--gap) 0; max-width:var(--container); margin-inline:auto;}

.card{position:relative; display:flex; flex-direction:column; text-align:left; background:none;
  padding:0; cursor:pointer;}
.card-media{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--beige);
  background-size:cover; background-position:center; border-radius:var(--r-md);}
.card-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .35s var(--ease-out), transform .26s var(--ease-out);}
.card-media img.b{opacity:0;}
.card:hover .card-media img.a{opacity:0;}
.card:hover .card-media img.b{opacity:1;}
.card:hover .card-media img{transform:scale(1.04);}
.card:focus-visible .card-media{outline:2px solid var(--accent); outline-offset:3px;}

.badge{position:absolute; z-index:2; top:.6rem; left:.6rem; font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; padding:.38rem .6rem; background:var(--bg);
  color:var(--ink); display:inline-flex; align-items:center; gap:.32rem;}
.badge.is-last{background:var(--accent); color:#fff;}
.badge svg{width:9px; height:9px; fill:currentColor;}

.card-look{position:absolute; z-index:2; right:.6rem; bottom:.6rem; font-size:var(--fs-micro);
  letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(28,25,23,.62);
  padding:.34rem .6rem; opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);}
.card:hover .card-look, .card:focus-visible .card-look{opacity:1; transform:none;}

.card-body{padding:.85rem .1rem 0; display:flex; flex-direction:column; gap:.22rem;}
.card-name{font-family:var(--serif); font-size:var(--fs-base); line-height:1.2; color:var(--ink);}
.card-mat{font-size:var(--fs-micro); color:var(--ink-mute);}
.card-foot{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  margin-top:.35rem;}
.card-price{font-size:var(--fs-sm); color:var(--ink); font-variant-numeric:tabular-nums;}
.card-price.ask{font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); font-weight:500;}

.grid-empty{grid-column:1/-1; text-align:center; padding:4rem 1rem; color:var(--ink-mute);}

/* remate del catálogo: la llamada a la acción que cierra la sección */
.cat-cta{max-width:var(--container); margin:clamp(2.4rem,6vh,4rem) auto 0; padding-inline:var(--gap);
  display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap;
  text-align:center;}
.cat-cta p{font-family:var(--serif); font-size:clamp(1.15rem,2.6vw,1.6rem); color:var(--ink);}

/* ══════════════════════════════════════════════════════════════
   EDITORIAL EN PROFUNDIDAD · capas con parallax
   Cinco fotos a distintas velocidades. Solo decoración: el texto
   nunca se mueve, que es lo que dice el manual de accesibilidad.
   ══════════════════════════════════════════════════════════════ */
.depth{position:relative; background:var(--ink); color:var(--bg); overflow:hidden;
  padding:clamp(6rem,16vh,11rem) 0;}
.depth-stage{position:relative; max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gap); min-height:clamp(30rem,72vh,46rem);}
.depth-copy{position:relative; z-index:5; max-width:34ch; margin-inline:auto; text-align:center;
  padding-block:clamp(3rem,10vh,7rem);}
.depth-copy .eyebrow{color:var(--beige-deep);}
.depth-copy h2{font-size:clamp(2rem,5.4vw,3.9rem); margin:.8rem 0 1.1rem; color:var(--bg);}
.depth-copy p{color:rgba(243,237,228,.76); font-size:var(--fs-base);}
/* el botón por defecto es tinta sobre crema: aquí el fondo ya es tinta */
.depth .hero-btn{background:var(--bg); color:var(--ink);}
.depth .hero-btn:hover{background:var(--accent); color:#fff;}

.depth-layer{position:absolute; z-index:1; overflow:hidden; will-change:transform;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.5); background:#231d17; background-size:cover;
  border-radius:var(--r-md);}
.depth-layer img{width:100%; height:100%; object-fit:cover; display:block;}
/* Cuatro capas, dos por margen. El texto ocupa la franja central y
   ninguna foto entra ahí: el titular nunca compite con una imagen. */
.depth-layer.l1{width:clamp(12rem,21vw,20rem);   aspect-ratio:16/9; left:-2%;  top:2%;}
.depth-layer.l2{width:clamp(9rem,15vw,14.5rem);  aspect-ratio:3/4;  left:4%;   bottom:2%;}
.depth-layer.l3{width:clamp(10rem,16vw,15.5rem); aspect-ratio:3/4;  right:-2%; top:0;}
.depth-layer.l4{width:clamp(9rem,14vw,13rem);    aspect-ratio:3/4;  right:6%;  bottom:1%;}
/* La foto es más alta que su marco: así puede desplazarse dentro sin
   descubrir el fondo. Es lo que hace que el parallax se note. */
.depth-layer img{height:132%; margin-top:-16%; will-change:transform;}

/* la tira de vídeo, debajo del collage: el mismo día de rodaje, en
   movimiento de verdad. Se reproducen solo cuando entran en pantalla. */
.depth-reel{position:relative; z-index:5; max-width:var(--container); margin:clamp(2rem,5vw,3.5rem) auto 0;
  padding-inline:var(--gap); display:flex; gap:clamp(.9rem,2vw,1.4rem);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  scrollbar-width:none;}
.depth-reel::-webkit-scrollbar{display:none;}
.depth-reel video{flex:0 0 clamp(9.5rem,20vw,13.5rem); min-width:0; aspect-ratio:9/16; object-fit:cover;
  border-radius:var(--r-md); background:#231d17; scroll-snap-align:start;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.55);}
/* min-width:0 es imprescindible: sin él, el min-width:auto de todo flex-item
   deja que el <video> crezca hasta su ancho intrínseco (464 px) en cuanto
   carga los metadatos, ignorando el flex-basis. Eso engordaba .depth ~480 px
   DESPUÉS de que GSAP hubiera medido los pins —al volver a subir, el pin del
   editorial quedaba anclado en el sitio equivocado: pantalla en negro,
   secciones montadas y scroll atascado. */
@supports (corner-shape: squircle){ .depth-reel video{corner-shape:squircle;} }

/* ══════════════════════════════════════════════════════════════
   EVENTOS · dónde se ha visto la marca
   ══════════════════════════════════════════════════════════════ */
.eventos{background:var(--cream); padding:clamp(4.5rem,11vh,8rem) 0;}
.ev-head{max-width:var(--container); margin:0 auto clamp(2rem,5vh,3.2rem); padding-inline:var(--gap);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem); align-items:end;}
.ev-head h2{font-size:clamp(1.9rem,4.6vw,3.3rem);}
.ev-head p{color:var(--ink-soft); font-size:var(--fs-base);}

.ev-wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--gap);}

/* alfombra roja: en vez de rojo literal (chocaría con la paleta de la
   marca), la misma tinta oscura del hero y un foco cálido detrás del
   título — el trato que se le da a una entrada de gala, no un cartel. */
.eventos.red-carpet{background:var(--ink); color:var(--bg); position:relative; overflow:hidden;}
.eventos.red-carpet::before{content:''; position:absolute; z-index:0; top:-20%; left:50%;
  width:60vw; height:60vw; max-width:900px; max-height:900px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(217,164,65,.16), transparent 70%);
  pointer-events:none;}
.eventos.red-carpet .ev-head,
.eventos.red-carpet .ev-wrap{position:relative; z-index:1;}
.eventos.red-carpet .ev-head h2{color:var(--bg);}
.eventos.red-carpet .ev-head p{color:rgba(243,237,228,.72);}
/* el eyebrow por defecto va en gris tinta: sobre el fondo oscuro no se lee */
.eventos.red-carpet .ev-head .eyebrow{color:var(--beige-deep); display:block;
  margin-bottom:.7rem;}
.eventos.red-carpet .bg-type{color:var(--bg); opacity:.05;}

.ev-hero{position:relative; display:grid; grid-template-columns:1.25fr .95fr; overflow:hidden;
  background:var(--ink); color:var(--bg); margin-bottom:clamp(.7rem,1.5vw,1.2rem);
  border-radius:var(--r-lg);}
.ev-hero-media{position:relative; overflow:hidden; background:#231d17;
  background-size:cover; min-height:clamp(20rem,42vh,30rem);}
.ev-hero-media img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;}
.ev-hero-body{padding:clamp(1.6rem,3.4vw,3rem); display:flex; flex-direction:column;
  justify-content:center; gap:.75rem;}
.ev-flag{display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bg); background:var(--accent); padding:.4rem .7rem;
  align-self:flex-start; font-weight:600;}
.ev-hero-body h3{font-size:clamp(1.5rem,3.2vw,2.4rem); color:var(--bg); line-height:1.12;}
.ev-meta{display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; font-size:var(--fs-micro); color:var(--beige-deep);
  letter-spacing:.06em;}
.ev-meta span{display:inline-flex; align-items:center; gap:.4rem;}
.ev-meta svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5;}
.ev-hero-body p.note{color:rgba(243,237,228,.75); font-size:var(--fs-sm); line-height:1.62;}
.ev-link{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--bg); border:1px solid rgba(243,237,228,.4);
  padding:.7rem 1.1rem; align-self:flex-start; min-height:44px; margin-top:.4rem;
  transition:background .3s var(--ease-out), color .3s var(--ease-out);}
.ev-link:hover{background:var(--bg); color:var(--ink);}
/* Los medios que cubrieron el evento, con su nombre delante. Un enlace
   que dice «MALVIÉ Magazine · Portada digital» pesa mucho más que uno
   que diga «ver más»: el nombre del medio ES la prueba. */
.ev-prensa{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem;}
.ev-medio{display:inline-flex; flex-direction:column; gap:.1rem;
  padding:.5rem .85rem; border-radius:var(--r-sm);
  background:rgba(250,248,244,.07); border:1px solid rgba(250,248,244,.16);
  transition:background .3s var(--ease-out), border-color .3s;}
.ev-medio:hover{background:rgba(250,248,244,.14); border-color:var(--accent-on-dark);}
.ev-medio b{font-size:var(--fs-sm); font-weight:600; color:var(--bg); letter-spacing:-.01em;}
.ev-medio i{font-style:normal; font-size:var(--fs-micro); color:var(--beige-deep);}

/* varias fichas de evento: separadas, no pegadas */
#ev-mas{display:grid; gap:clamp(.7rem,1.5vw,1.2rem); margin-top:clamp(.7rem,1.5vw,1.2rem);}

/* La foto del evento como botón de play. El iframe de Instagram solo
   entra al pulsar y entra aquí dentro: no se sale de la web ni se le
   pide nada a Meta a quien no vaya a ver el vídeo. */
.ev-hero-media.es-video{display:block; padding:0; border:0; cursor:pointer;
  text-align:left; -webkit-appearance:none; appearance:none;}
.ev-hero-media.es-video::after{content:''; position:absolute; inset:0;
  pointer-events:none; transition:opacity .45s var(--ease-out);
  background:linear-gradient(180deg, rgba(28,25,23,.1), rgba(28,25,23,.55));}
.ev-hero-media.es-video .reel-play{transition:transform .4s var(--ease-expo), background .3s;}
.ev-hero-media.es-video:hover .reel-play{transform:translate(-50%,-50%) scale(1.08); background:#fff;}
.ev-hero-media.es-video iframe{position:absolute; inset:0; z-index:3;
  width:100%; height:100%; border:0; display:block; background:var(--bg);}
/* con el vídeo puesto, la portada y el degradado sobran */
.ev-hero-media.es-video.reel-puesto{cursor:default;}
.ev-hero-media.es-video.reel-puesto img,
.ev-hero-media.es-video.reel-puesto .reel-play,
.ev-hero-media.es-video.reel-puesto .reel-fuente,
.ev-hero-media.es-video.reel-puesto::after{opacity:0; pointer-events:none;}
/* el embed de Instagram trae cabecera y barra de acciones: en el alto de
   la ficha se cortaba por abajo, así que aquí manda su proporción */
.ev-hero:has(.reel-puesto){grid-template-columns:1fr;}
.ev-hero-media.es-video.reel-puesto{aspect-ratio:40/85; min-height:0;
  max-width:26rem; margin-inline:auto; width:100%;}

/* Una portada de revista se enseña ENTERA. Recortada a 16:9 se pierden
   la cabecera y el titular, que son justo lo que la convierte en prueba:
   sin «MALVIÉ» arriba es una foto de moda cualquiera. */
.ev-hero-media.es-portada{background:#17130f; padding:clamp(1rem,2.4vw,2rem);
  display:grid; place-items:center; min-height:clamp(22rem,46vh,32rem);}
.ev-hero-media.es-portada img{position:static; width:auto; height:100%;
  max-height:clamp(20rem,42vh,29rem); object-fit:contain;
  border-radius:var(--r-xs); box-shadow:0 24px 50px -22px rgba(0,0,0,.75);}

.ev-acciones{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:auto;}
.ev-link.ghost{background:transparent; color:var(--bg); border:1px solid rgba(250,248,244,.45);}
.ev-link.ghost:hover{background:var(--bg); color:var(--ink); border-color:var(--bg);}
.ev-link svg{width:14px; height:14px; fill:currentColor;}

/* Rótulos dentro de Eventos. El bloque tenía un titular y, debajo, una
   tarjeta grande y una rejilla de fotos sin decir qué era cada cosa:
   se veía bien pero no se entendía. Estas dos líneas lo ordenan. */
.ev-sub{display:flex; align-items:baseline; gap:.4rem .9rem; flex-wrap:wrap;
  border-top:1px solid rgba(250,248,244,.16); padding-top:1.1rem;
  margin:clamp(1.8rem,4vh,2.6rem) 0 clamp(.9rem,2vh,1.3rem);}
.ev-sub:first-child{margin-top:0; border-top:none; padding-top:0;}
.ev-sub h3{font-family:var(--sans); font-size:var(--fs-lg); font-weight:600;
  letter-spacing:-.01em; color:var(--bg);}
.ev-sub p{font-size:var(--fs-sm); color:rgba(243,237,228,.68);}

/* ── tira de fotos por evento ────────────────────────────────
   Sustituye al bento común. Aquel juntaba las fotos de todos los
   eventos al final del bloque: no se sabía de cuál era cada una y la
   sección se hacía pesadísima. Una tira baja debajo de cada ficha se
   lee de un vistazo y ocupa la cuarta parte de alto. */
.ev-bloque + .ev-bloque{margin-top:clamp(1.6rem,3.5vw,2.8rem);
  padding-top:clamp(1.6rem,3.5vw,2.8rem); border-top:1px solid rgba(250,248,244,.14);}
.ev-tira-caja{position:relative; margin-top:clamp(.6rem,1.4vw,1rem);}
.ev-tira{display:flex; gap:.75rem; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scrollbar-width:none; cursor:grab;
  overscroll-behavior-x:contain; padding-bottom:.2rem;}
.ev-tira::-webkit-scrollbar{display:none;}
.ev-tira:focus-visible{outline:2px solid var(--accent-on-dark); outline-offset:3px;
  border-radius:var(--r-sm);}
.ev-t-foto{position:relative; flex:0 0 clamp(9rem,17vw,13rem); aspect-ratio:4/5;
  overflow:hidden; border-radius:var(--r-md); scroll-snap-align:start;
  background:#241f1b; display:block;}
@supports (corner-shape: squircle){ .ev-t-foto{corner-shape:squircle;} }
.ev-t-foto img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .26s var(--ease-out);}
.ev-t-foto:hover img{transform:scale(1.06);}
.ev-t-foto::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 52%, rgba(28,25,23,.8) 100%);}
.ev-t-foto span{position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:.6rem .7rem; color:#fff; font-size:var(--fs-micro); letter-spacing:.02em;}
.ev-t-nav{position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:rgba(250,248,244,.94); color:var(--ink);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
  transition:background .3s, transform .3s var(--ease-expo);}
.ev-t-nav[hidden]{display:none;}
.ev-t-nav:hover{background:#fff; transform:translateY(-50%) scale(1.08);}
.ev-t-nav svg{width:17px; height:17px;}
.ev-t-prev{left:-6px;} .ev-t-next{right:-6px;}
@media (max-width:640px){ .ev-t-nav{display:none;} }
.ev-card{position:relative; display:block; overflow:hidden; aspect-ratio:3/4; background:var(--beige);
  background-size:cover; border-radius:var(--r-md);}
.ev-card img{width:100%; height:100%; object-fit:cover; transition:transform .26s var(--ease-out);}
.ev-card::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(28,25,23,.78) 100%);}
.ev-card:hover img{transform:scale(1.06);}
.ev-card-body{position:absolute; z-index:2; inset:auto 0 0 0; padding:1rem; color:#fff;}
.ev-kind{display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.85);}
.ev-kind svg{width:11px; height:11px; fill:currentColor;}
.ev-card-body h4{font-family:var(--sans); font-weight:500; font-size:var(--fs-sm); color:#fff;
  margin-top:.3rem; line-height:1.3;}

/* ── el catálogo en pantallas pequeñas ─────────────────────────
   1200 → tres columnas | 900 → dos | 640 → dos apretadas       */
@media (max-width:1200px){
  .grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .cats-grid{grid-template-columns:1fr; gap:.8rem;}
  .cat-card{aspect-ratio:4/5;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .cat-bar{padding-inline:1rem;}
  .cat-bar-in{gap:.6rem;}
  .cat-count{order:3; width:100%;}
  .ev-head{grid-template-columns:1fr; gap:.9rem;}
  /* dos columnas: la banda ancha sigue siendo la que da el ritmo */
  .ev-grid{grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(2, clamp(7rem,20vw,10rem)) clamp(8rem,24vw,12rem);}
  .ev-grid .ev-card:nth-child(1){grid-area:1 / 1 / 3 / 2;}
  .ev-grid .ev-card:nth-child(2){grid-area:1 / 2 / 2 / 3;}
  .ev-grid .ev-card:nth-child(3){grid-area:2 / 2 / 3 / 3;}
  .ev-grid .ev-card:nth-child(4){grid-area:3 / 1 / 4 / 2;}
  .ev-grid .ev-card:nth-child(5){grid-area:3 / 2 / 4 / 3;}
  .ev-hero{grid-template-columns:1fr;}
  .ev-hero-media{min-height:0; aspect-ratio:4/3;}
  /* el parallax se apila: cinco capas flotando no caben en un móvil */
  .depth-stage{min-height:0;}
  .depth-layer{position:relative; inset:auto; width:100%; margin-bottom:.7rem; box-shadow:none;}
  .depth-layer.l1,.depth-layer.l2,.depth-layer.l3,.depth-layer.l4{
    width:100%; aspect-ratio:3/4;}
  .depth-layer.l4{display:none;}
  .depth-layer img{height:100%; margin-top:0;}
  .depth-copy{padding-block:2rem 2.6rem; text-align:left; margin-inline:0;}
}
@media (max-width:640px){
  .chips{gap:.32rem;}
  .chip{padding:.6rem .8rem; font-size:var(--fs-micro);}
  .card-name{font-size:var(--fs-sm);}
}

/* Con «reducir movimiento» activado se quitan los desplazamientos
   decorativos: quedan las fotos quietas y todo sigue legible. */
@media (prefers-reduced-motion:reduce){
  .cat-card img, .card-media img, .ev-card img, .depth-layer{transition:none !important;
    transform:none !important;}
}
/* ══════════ EDITORIAL ══════════ */
.editorial{position:relative; background:var(--ink); color:var(--bg);}
/* Carrusel horizontal de verdad, no un pin de GSAP.
   ANTES: .ed-pin medía 100svh y ScrollTrigger la fijaba mientras movía
   .ed-track por transform. Ese pin nacía con las coordenadas corruptas
   (medía #editorial en y=-2766 cuando está en y=4534), así que la tira
   arrancaba ya aparcada al final del recorrido y no se movía nunca —
   y de paso descolocaba todo lo que venía debajo. Ahora la tira se
   arrastra sola: rueda con shift, dedo en táctil, teclado. No depende
   de ninguna medición y no puede romper el resto de la página. */
.ed-pin{display:flex; align-items:center; overflow-x:auto; overflow-y:hidden;
  padding-block:clamp(3.5rem,8vw,6rem);
  overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  scrollbar-width:none;}
.ed-pin::-webkit-scrollbar{display:none;}
.ed-track{display:flex; gap:clamp(1rem,2.5vw,2rem); padding-inline:var(--gap);}
.ed-intro{flex:0 0 clamp(260px,30vw,420px); align-self:center;}
.ed-intro .eyebrow{color:rgba(250,248,244,.5);}
.ed-intro h2{font-size:clamp(1.7rem,3.4vw,2.8rem); margin:1rem 0 1.2rem;}
.ed-intro p{color:rgba(250,248,244,.62); font-size:var(--fs-base); max-width:34ch;}
.ed-slide{flex:0 0 clamp(260px,32vw,460px); aspect-ratio:4/5; overflow:hidden; position:relative; background:#241f1b; margin:0; scroll-snap-align:start;}
/* 100%, no 112%: el 112 con translateX(-5%) era el margen que necesitaba
   el parallax horizontal, que ya no existe. Las fotos vienen recortadas a
   4:5 desde el original, así que ahora encajan sin perder los lados. */
.ed-slide img{width:100%; height:100%; object-fit:cover;}
.ed-slide figcaption{position:absolute; left:1rem; bottom:1rem; font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; color:rgba(250,248,244,.78);}

/* ══════════ PROCESO ══════════ */
.process{padding:var(--sec-y) 0;}
.process-inner{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center;}
.process .visual{aspect-ratio:4/5; overflow:hidden; position:relative; background:var(--beige);}
.process .visual img{width:100%; height:118%; object-fit:cover; position:absolute; top:-9%; will-change:transform;}
.process .copy h2{font-size:clamp(1.7rem,3.6vw,2.7rem); margin:1rem 0 1.4rem; max-width:16ch;}
.process .copy p{color:var(--ink-soft); margin-bottom:1.1rem; max-width:46ch;}
.steps{list-style:none; margin-top:2.2rem; border-top:1px solid var(--line);}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:baseline; padding:1.1rem 0; border-bottom:1px solid var(--line);}
.steps .k{font-size:var(--fs-micro); letter-spacing:.16em; color:var(--accent);}
.steps .v{font-size:var(--fs-base); color:var(--ink-soft);}

/* ══════════ PRENSA · carrusel circular ══════════
   Centro grande, vecinos más chicos y girados en 3D — el mismo aire que
   un carrusel «circular testimonials», pero en CSS/JS propio: aquí no hay
   React ni Tailwind que instalar. */
.press{padding:var(--sec-y) 0; background:var(--cream); overflow:hidden;}
/* vertical, como una historia: la foto manda y el texto la sigue debajo,
   sin la columna a dos caras de antes — se lee de un tirón, de arriba
   abajo, igual en el móvil que en escritorio. */
.testi{display:grid; gap:clamp(1.6rem,4vw,2.4rem); max-width:460px; margin-inline:auto; text-align:center;}
.testi-stage{position:relative; aspect-ratio:4/5; height:auto; perspective:1000px;}
.testi-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-md); box-shadow:0 20px 40px rgba(28,25,23,.16);
  will-change:transform, opacity;}
.testi-body{min-width:0;}
.testi-quote{font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.65rem); line-height:1.48; min-height:4.5em;}
.testi-quote .w{display:inline-block;}
.testi-cite{display:block; margin-top:1.3rem; font-style:normal; font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);}
.testi-nav{display:flex; gap:.9rem; margin-top:2.2rem; justify-content:center;}
.testi-arrow{width:2.7rem; height:2.7rem; border-radius:var(--r-full); border:1px solid var(--line-strong);
  display:grid; place-items:center; color:var(--ink); background:transparent; cursor:pointer;
  transition:background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);}
.testi-arrow:hover{background:var(--ink); border-color:var(--ink); color:var(--bg);}
.testi-arrow svg{width:16px; height:16px;}
.testi-video{margin:clamp(2.6rem,6vw,4rem) auto 0; max-width:400px;}

/* ══════════ CTA + FOOTER ══════════ */
.cta{position:relative; overflow:hidden; padding:var(--sec-y-lg) var(--gap); text-align:center; background:radial-gradient(ellipse 70% 60% at 50% 40%, var(--beige) 0%, var(--bg) 72%);}
/* el cierre de la página: más aire, una línea que marca «hasta aquí
   llega el recorrido» y el nombre de fondo se deja ver un poco más. */
.cta-close{padding-block:clamp(6rem,14vh,9.5rem); border-top:1px solid var(--line);}
.cta-close .bg-type{opacity:.07;}
.cta-eyebrow{display:block; font-size:var(--fs-micro); letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:1rem;}
.cta h2{font-size:clamp(2.1rem,5.6vw,4rem); max-width:15ch; margin:1.2rem auto;}
.cta p{color:var(--ink-soft); max-width:46ch; margin:0 auto 2.4rem;}
.cta-actions{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;}
.btn{min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:.95rem 2.1rem; font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--ink); transition:background .35s var(--ease-out), color .35s var(--ease-out), transform .4s var(--ease-expo);}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--ink); color:var(--bg);}
.btn-primary:hover{background:var(--accent); border-color:var(--accent);}
.btn-ghost:hover{background:var(--ink); color:var(--bg);}
footer{padding:2.6rem var(--gap); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:var(--fs-sm); letter-spacing:.01em; color:var(--ink-mute); border-top:1px solid var(--line);}

/* ══════════ QUICK VIEW ══════════ */
.qv{position:fixed; inset:0; z-index:500; display:grid; place-items:center;
  padding:clamp(.5rem,2vw,1.5rem);}
.qv[hidden]{display:none !important;}
.qv-backdrop{position:absolute; inset:0; background:rgba(28,25,23,.62); opacity:0;}
.qv-panel{position:relative; width:min(1080px, 100%); border-radius:var(--r-lg); background:var(--bg); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); height:min(88svh, 720px); box-shadow:0 40px 120px -40px rgba(28,25,23,.5); overflow:hidden;}
.qv-img{position:relative; overflow:hidden; background:var(--beige);
  cursor:zoom-in; touch-action:none; user-select:none;}
.qv-img img{width:100%; height:100%; object-fit:cover; object-position:50% 26%;
  transform-origin:50% 26%; will-change:transform;
  transition:transform .55s var(--ease-expo);}
.qv-img.zoomed{cursor:zoom-out;}
.qv-img.zoomed img{transition:transform .1s linear;}

.qv-hint{top:.7rem; left:.7rem; 
  position:absolute; z-index:3;  
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase;
  background:rgba(250,248,244,.92); color:var(--ink);
  padding:.5rem .8rem; border-radius:999px; pointer-events:none;
  transition:opacity .35s var(--ease-out);
}
.qv-img.zoomed .qv-hint{opacity:0;}
/* tira de miniaturas: cada pieza se fotografió de tres a cinco veces */
.qv-thumbs{position:absolute; z-index:4; left:.7rem; bottom:.7rem; display:flex; gap:.4rem;
  flex-wrap:wrap; max-width:calc(100% - 1.4rem);}
.qv-thumbs button{width:44px; height:56px; overflow:hidden; border:2px solid transparent;
  background:var(--beige); opacity:.72; transition:opacity .3s, border-color .3s;}
.qv-thumbs button img{width:100%; height:100%; object-fit:cover;}
.qv-thumbs button:hover{opacity:1;}
.qv-thumbs button[aria-current="true"]{opacity:1; border-color:var(--bg);}
.qv-img.zoomed .qv-thumbs{opacity:0; pointer-events:none;}
.qv-hint svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7;}
.qv-body{padding:clamp(1.5rem,3.5vw,3rem); overflow-y:auto; display:flex; flex-direction:column; gap:1rem;}
.qv-body h3{font-size:clamp(1.5rem,2.6vw,2.2rem);}
.qv-note{color:var(--ink-soft);}
.qv-specs{list-style:none; border-top:1px solid var(--line); margin-top:.4rem;}
.qv-specs li{display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm);}
.qv-specs .k{color:var(--ink-mute); font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase;}
.qv-close{position:absolute; top:.7rem; right:.7rem; z-index:5; width:44px; height:44px; display:grid; place-items:center; background:rgba(250,248,244,.92); border-radius:50%; transition:background .3s, color .3s, transform .4s var(--ease-expo);}
.qv-close:hover{background:var(--ink); color:var(--bg); transform:rotate(90deg);}

/* ══════════════════════════════════════════════════════════════
   PARALLAX · capas de profundidad
   ══════════════════════════════════════════════════════════════ */
.par{will-change:transform;}

/* tipografía de fondo que viaja más lenta que el contenido */
.bg-type{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(6rem,20vw,17rem); line-height:.82; letter-spacing:-.04em;
  color:var(--ink); opacity:.05; white-space:nowrap;
  pointer-events:none; user-select:none; z-index:0;
}
.manifesto,.press,.cta{position:relative; overflow:hidden;}
.manifesto>*:not(.bg-type),
.press>*:not(.bg-type),
.cta>*:not(.bg-type){position:relative; z-index:1;}

/* el hero respira: la imagen empuja hacia dentro al hacer scroll */
.hero-media{transform-origin:50% 45%;}

/* niebla de profundidad sobre el vídeo, se mueve a otra velocidad */


/* el marquee se inclina con la velocidad del scroll */
.marquee-track{transform-origin:50% 50%;}

@media (prefers-reduced-motion:reduce){
  .bg-type{display:none;}
}

/* ══════════════════════════════════════════════════════════════
   PRELOADER
   El logotipo se monta letra a letra en el espacio. Solo aparece
   en la primera visita de la sesión y solo mientras hay carga real
   que cubrir: el vídeo del hero pesa y esto tapa el salto.
   ══════════════════════════════════════════════════════════════ */
.pre{
  position:fixed; inset:0; z-index:9500;
  display:grid; place-items:center; gap:1.5rem;
  background:var(--cream);
  align-content:center;
}
.pre[hidden]{display:none;}

/* ── el monograma en órbita ─────────────────────────────────────
   Dos cuadrados huecos recorren el marco animando `inset`, medio
   ciclo desfasados; dentro, la W de WAUKE se traza una sola vez al
   entrar. El bucle no tiene principio ni final visibles, que es lo
   que hace falta para una espera que puede durar veinte segundos.
   Sustituye a la vitrina de fotos: enseñar producto a medio cargar
   era prometer la tienda antes de abrir la puerta. */
/* alto explícito, no aspect-ratio: como item de grid el alto se
   resolvía contra la fila y salían rectángulos, no cuadrados */
.pre-mark{position:relative; width:150px; height:150px; flex:none;}
/* ── controles de la tira del editorial ───────────────────────── */
.ed-nav{
  position:absolute; z-index:6; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; color:var(--ink); background:rgba(250,248,244,.94);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
  transition:background .3s var(--ease-out), transform .3s var(--ease-expo), opacity .3s;
}
.ed-nav[hidden]{display:none;}
.ed-nav:hover{background:#fff; transform:translateY(-50%) scale(1.07);}
.ed-nav:active{transform:translateY(-50%) scale(.95);}
.ed-nav svg{width:20px; height:20px;}
.ed-nav-prev{left:clamp(.5rem,1.6vw,1.2rem);}
.ed-nav-next{right:clamp(.5rem,1.6vw,1.2rem);}

/* la tira se corta con un degradado: dice «sigue habiendo» sin gritar */
.editorial::after{
  content:''; position:absolute; z-index:5; top:0; bottom:0; right:0;
  width:clamp(2.5rem,7vw,5.5rem); pointer-events:none;
  background:linear-gradient(90deg, rgba(28,25,23,0), var(--ink));
  opacity:0; transition:opacity .4s var(--ease-out);
}
.editorial.hay-mas::after{opacity:1;}

/* La tira avanza de lado mientras bajas: la sección es alta, la caja se
   queda pegada arriba con position:sticky —CSS puro, como el hero— y el
   JS traduce el avance vertical en scrollLeft.

   Es lo mismo que hacía el pin de GSAP, pero sin GSAP: el pin medía mal
   sus coordenadas, se anclaba en el sitio equivocado y arrastraba en su
   caída a todas las secciones de debajo. Sticky no mide nada, y asignar
   scrollLeft es instantáneo, así que no depende del bucle de animación
   (que es lo que dejaba las flechas sin hacer nada). */
.editorial.tira-viva .ed-pin{
  position:sticky; top:0; height:100svh; align-items:center;
  scroll-snap-type:none;
}
/* overflow-x sigue en auto SIEMPRE, también con el avance automático.
   Antes lo ponía en hidden «porque lo mueve el scroll»: si el avance
   automático no engancha —y en el navegador del cliente no engancha—
   eso dejaba la tira imposible de mover por ningún medio. */
.ed-pin{cursor:grab;}
.ed-pin.arrastrando{cursor:grabbing; scroll-snap-type:none;}
.ed-pin.arrastrando .ed-slide{pointer-events:none;}
.ed-pin:focus-visible{outline:2px solid var(--accent-on-dark); outline-offset:-4px;}
/* en cuanto se toca a mano, la sección deja de ser alta y se comporta
   como un carrusel normal: no tiene sentido reservar 2400 px de scroll
   para un recorrido que ya está haciendo el usuario */
.editorial.a-mano{height:auto !important;}
.editorial.a-mano .ed-pin{position:relative; height:auto;
  padding-block:clamp(3.5rem,8vw,6rem);}

.pre-orb{
  position:absolute; border-radius:var(--r-xs);
  box-shadow:inset 0 0 0 2px var(--ink);
  animation:pre-orbita 2.6s cubic-bezier(.75,0,.25,1) infinite;
}
.pre-orb:nth-child(2){
  box-shadow:inset 0 0 0 2px var(--accent);
  animation-delay:-1.3s;
}
@supports (corner-shape: squircle){ .pre-orb{corner-shape:squircle;} }

/* 104px = 150 del marco − 46 del cuadrado */
@keyframes pre-orbita{
  0%   {inset:0 104px 104px 0;}
  12.5%{inset:0 104px 0 0;}
  25%  {inset:104px 104px 0 0;}
  37.5%{inset:104px 0 0 0;}
  50%  {inset:104px 0 0 104px;}
  62.5%{inset:0 0 0 104px;}
  75%  {inset:0 0 104px 104px;}
  87.5%{inset:0 0 104px 0;}
  100% {inset:0 104px 104px 0;}
}

/* el monograma de verdad (PNG recortado a su tinta) entra con un fundido
   y un leve acercamiento; los cuadrados huecos lo cruzan por encima pero
   nunca lo tapan porque son solo un contorno. */
.pre-mono{
  position:absolute; left:50%; top:50%; max-width:70px; max-height:92px;
  width:auto; height:auto;
  transform:translate(-50%,-50%) scale(.9);
  opacity:0;
  animation:pre-mono-in 1.1s cubic-bezier(.16,1,.3,1) .2s forwards;
}
@keyframes pre-mono-in{
  to{opacity:1; transform:translate(-50%,-50%) scale(1);}
}

/* el porcentaje pertenece a la barra, no al logotipo: iba suelto en
   medio de la pantalla y se leía como un tercer elemento */
.pre-pct{position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(clamp(2.4rem,8vh,4.5rem) + 1rem);
  font-size:var(--fs-micro); letter-spacing:.22em; color:var(--ink-mute);
  font-variant-numeric:tabular-nums;}
.pre-pct span{opacity:.5;}
/* En html (no solo body) porque en algunos navegadores el scroll real
   corre en el elemento raíz: bloquear solo body dejaba pasar un
   resto de scroll de unos pocos píxeles durante la carga. */
html.loading, body.loading{overflow:hidden; overscroll-behavior:none;}

/* El wordmark oficial de la marca (el mismo PNG en todas partes), no
   texto simulado: así el preloader enseña el logo real, no una imitación
   con la tipografía del sitio. */
.pre-word{
  display:block; width:min(200px,42vw); height:auto;
  opacity:0; animation:pre-word .9s var(--ease-out) .9s forwards;
}
@keyframes pre-word{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.pre-bar{
  position:absolute; left:50%; bottom:clamp(2.4rem,8vh,4.5rem);
  transform:translateX(-50%); width:min(190px,42vw); height:1px;
  background:var(--line);
}
.pre-bar i{
  display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}

/* salida: el logo se aleja y el telón se abre hacia arriba */
.pre.done{
  clip-path:inset(0 0 0 0);
  animation:pre-out .9s cubic-bezier(.76,0,.24,1) forwards;
  pointer-events:none;
}
.pre.done .pre-mark,
.pre.done .pre-word{
  animation:pre-away .9s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes pre-out{to{clip-path:inset(0 0 100% 0);}}
@keyframes pre-away{to{transform:translateY(-10%); opacity:0;}}

@media (prefers-reduced-motion:reduce){
  /* sin órbita ni fundido: los dos cuadrados se quedan quietos en
     esquinas opuestas y el logo aparece entero de una vez. Sigue
     leyéndose como "está cargando" por la barra de abajo, que no es
     movimiento decorativo sino progreso real. */
  .pre-orb{animation:none !important; inset:0 64px 64px 0;}
  .pre-orb:nth-child(2){inset:64px 0 0 64px;}
  .pre-mono{animation:none !important; opacity:1 !important; transform:translate(-50%,-50%) !important;}
  .pre-word{animation:none !important; opacity:1 !important; transform:none !important;}
  .pre.done{animation:pre-fade .3s linear forwards;}
  .pre.done .pre-mark,.pre.done .pre-word{animation:none !important;}
  @keyframes pre-fade{to{opacity:0}}
}

/* ══════════════════════════════════════════════════════════════
   BARRA DE ANUNCIOS
   ══════════════════════════════════════════════════════════════ */
.announce{
  position:relative; z-index:210; background:var(--ink); color:var(--bg);
  height:var(--announce-h); display:grid; place-items:center; overflow:hidden;
}
.announce p{
  position:absolute; margin:0; font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap; padding-inline:1rem;
  opacity:0; transform:translateY(100%);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-expo);
}
.announce p.on{opacity:1; transform:none;}
.announce p.out{opacity:0; transform:translateY(-100%);}

/* ══════════════════════════════════════════════════════════════
   MENÚ MÓVIL
   ══════════════════════════════════════════════════════════════ */
.nav-toggle{
  display:none; width:44px; height:44px; place-items:center; margin-right:-.5rem;
}
.nav-toggle i{
  display:block; width:20px; height:1px; background:var(--ink); position:relative;
  transition:background .3s;
}
.nav-toggle i::before,.nav-toggle i::after{
  content:''; position:absolute; left:0; width:20px; height:1px; background:var(--ink);
  transition:transform .4s var(--ease-expo);
}
.nav-toggle i::before{top:-6px;} .nav-toggle i::after{top:6px;}
body.nav-open .nav-toggle i{background:transparent;}
body.nav-open .nav-toggle i::before{transform:translateY(6px) rotate(45deg);}
body.nav-open .nav-toggle i::after{transform:translateY(-6px) rotate(-45deg);}

.drawer{
  position:fixed; inset:0; z-index:190; background:var(--cream);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:5rem var(--gap) 7rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease-expo);
  visibility:hidden;
}
body.nav-open .drawer{clip-path:inset(0 0 0 0); visibility:visible;}
.drawer a{
  font-family:var(--serif); font-size:clamp(1.7rem,7vw,2.6rem); line-height:1.35;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-expo);
}
body.nav-open .drawer a{opacity:1; transform:none;}
body.nav-open .drawer a:nth-child(1){transition-delay:.12s}
body.nav-open .drawer a:nth-child(2){transition-delay:.18s}
body.nav-open .drawer a:nth-child(3){transition-delay:.24s}
body.nav-open .drawer a:nth-child(4){transition-delay:.30s}
.drawer .drawer-foot{
  position:absolute; left:var(--gap); right:var(--gap); bottom:2.4rem;
  display:flex; gap:1.4rem; font-family:var(--sans); font-size:var(--fs-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.drawer .drawer-foot a{font-family:var(--sans); font-size:var(--fs-micro); opacity:1; transform:none;}

/* ══════════════════════════════════════════════════════════════
   DOCK FLOTANTE
   ══════════════════════════════════════════════════════════════ */
/* botón flotante de WhatsApp: siempre visible, esquina inferior derecha,
   por encima del dock. Verde reconocible a propósito — aquí sí conviene
   el código de color de la app, no el de la marca. */
/* ══════════════════════════════════════════════════════════════
   BACKSTAGE · cursor propio
   Solo se monta con JS cuando hay mouse de verdad (backstage.js pone
   la clase bs-on) — sin eso, esto no hace nada. */
html.bs-on, html.bs-on *{cursor:none !important;}
.bs-dot, .bs-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; opacity:0; transition:opacity .25s var(--ease-out);}
/* 10 px y no 7: por debajo de eso el punto se pierde sobre las fotos
   claras, y el cursor propio tiene que verse al menos tanto como el
   del sistema al que sustituye. Aro a 1.5 px por el mismo motivo. */
.bs-dot{width:10px; height:10px; margin:-5px 0 0 -5px; background:var(--accent);
  box-shadow:0 0 0 1px rgba(28,25,23,.25);}
/* El aro animaba width, height y margin: tres propiedades de layout, y
   en el elemento que más se repinta de la página (sigue al ratón con un
   bucle de animación). Ahora la caja es fija y crece por transform, que
   va en la GPU. El JS escribe translate(...) scale(var(--bs-s)), así que
   la escala viaja por una propiedad registrada y se puede transicionar. */
@property --bs-s{ syntax:'<number>'; initial-value:1; inherits:false; }
.bs-ring{width:32px; height:32px; margin:-16px 0 0 -16px; border:1.5px solid var(--accent);
  --bs-s:1;
  transition:--bs-s .3s var(--ease-out), opacity .25s var(--ease-out),
    background .3s var(--ease-out);}
html.bs-hover .bs-ring{--bs-s:1.625; background:rgba(217,164,65,.12);}
html.bs-hover-foto .bs-ring{width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(217,164,65,.16);}

.wa-fab{
  position:fixed; z-index:190; right:1.3rem; bottom:1.3rem;
  width:3.6rem; height:3.6rem; border-radius:50%;
  display:grid; place-items:center; background:#25D366; color:#fff;
  box-shadow:0 14px 32px -10px rgba(37,211,102,.6), 0 4px 14px rgba(28,25,23,.25);
  transition:transform .35s var(--ease-expo), box-shadow .35s var(--ease-out);
}
.wa-fab svg{width:1.7rem; height:1.7rem; fill:currentColor;}
.wa-fab:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 18px 38px -8px rgba(37,211,102,.7), 0 6px 18px rgba(28,25,23,.3);}
.wa-fab::after{content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; opacity:.6; animation:wa-pulse 2.6s ease-out infinite;}
@keyframes wa-pulse{0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.55); opacity:0;}}
@media (prefers-reduced-motion:reduce){ .wa-fab::after{animation:none; display:none;} }
@media (max-width:640px){ .wa-fab{width:3.2rem; height:3.2rem; right:1rem; bottom:1rem;} .wa-fab svg{width:1.5rem; height:1.5rem;} }

.dock{
  position:fixed; z-index:180; left:50%; bottom:1.1rem; transform:translate(-50%, 150%);
  display:flex; align-items:center; gap:.2rem; padding:.35rem;
  background:rgba(250,248,244,.97);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:0 18px 44px -20px rgba(28,25,23,.4);
  transition:transform .6s var(--ease-expo);
  max-width:calc(100vw - 1.6rem);
}
.dock.on{transform:translate(-50%,0);}
.dock a{
  display:inline-flex; align-items:center; gap:.45rem; min-height:40px;
  padding:.5rem .85rem; border-radius:999px; white-space:nowrap;
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  transition:background .3s var(--ease-out), color .3s;
}
.dock a:hover,.dock a.here{background:var(--ink); color:var(--bg);}
.dock a.wa{background:var(--accent); color:#fff;}
.dock a.wa:hover{background:var(--ink);}
.dock svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6;}
.dock .lbl{display:inline;}
@media (max-width:520px){ .dock .lbl{display:none;} .dock a{padding:.5rem .7rem;} }

/* ══════════════════════════════════════════════════════════════
   NOSOTRAS
   ══════════════════════════════════════════════════════════════ */
.about{padding:var(--sec-y) 0; position:relative; overflow:hidden;}
.about-lead{max-width:900px; margin-inline:auto; text-align:center;}
.about-lead h2{font-size:clamp(1.9rem,4.6vw,3.3rem); margin:1.2rem auto 1.6rem; max-width:20ch;}
.about-lead p{color:var(--ink-soft); max-width:60ch; margin-inline:auto; font-size:var(--fs-base);}
.about-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(2.2rem,4.5vw,3.2rem);
}
.about-card{border-top:1px solid var(--line-strong); padding-top:1.3rem;}
.about-card h3{font-size:var(--fs-lg); margin-bottom:.7rem;}
.about-card p{color:var(--ink-soft); font-size:var(--fs-base);}

/* ══════════════════════════════════════════════════════════════
   BENEFICIOS
   ══════════════════════════════════════════════════════════════ */
.benefits{border-block:1px solid var(--line); background:var(--cream);}
.benefits-inner{display:grid; grid-template-columns:repeat(3,1fr);}
.benefit{padding:clamp(2rem,4.5vw,3rem) clamp(1.2rem,3vw,2.2rem); border-left:1px solid var(--line);}
.benefit:first-child{border-left:none;}
.benefit h3{font-size:var(--fs-base); margin-bottom:.5rem;}
.benefit p{color:var(--ink-soft); font-size:var(--fs-sm);}

/* ══════════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════════ */
/* En tinta, no en blanco. Es el momento de escribir: el bloque se
   cierra sobre sí mismo en vez de diluirse en el fondo de la página,
   y el formulario deja de parecer un trámite pegado a un lado. */
.contact{padding:var(--sec-y) 0; background:var(--ink); color:var(--bg);}

/* Una sola tarjeta partida en dos: la colección puesta a un lado, el
   formulario al otro. El bloque deja de ser «un texto y un formulario
   sueltos sobre el fondo» y pasa a ser una pieza cerrada. */
.contact-inner{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:0; align-items:stretch; overflow:hidden;
  border-radius:var(--r-xl); border:1px solid rgba(250,248,244,.13);
  background:#221e1b; box-shadow:0 40px 90px -50px rgba(0,0,0,.8);}
@supports (corner-shape: squircle){ .contact-inner{corner-shape:squircle;} }

.cont-foto{position:relative; overflow:hidden; background:#2c2622; min-height:clamp(24rem,52vh,34rem);}
.cont-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s var(--ease-out);}
.cont-foto img.on{opacity:1;}
/* un degradado por abajo para que los puntos se lean sobre cualquier foto */
.cont-foto::after{content:''; position:absolute; inset:auto 0 0 0; height:35%;
  pointer-events:none; background:linear-gradient(180deg, rgba(28,25,23,0), rgba(28,25,23,.6));}
.cont-puntos{position:absolute; z-index:2; left:1.2rem; bottom:1.2rem;
  display:flex; gap:.4rem;}
.cont-puntos button{width:22px; height:7px; border-radius:999px; transform-origin:left;
  background:rgba(250,248,244,.4); transform:scaleX(.318);
  transition:transform .35s var(--ease-out), background .35s var(--ease-out);}
.cont-puntos button.on{transform:none; background:var(--bg);}

.cont-panel{padding:clamp(1.8rem,3.4vw,3rem); display:flex; flex-direction:column;}
.cont-panel .eyebrow{color:var(--beige-deep); display:block;}
.contact h2{font-size:clamp(1.6rem,3.2vw,2.4rem); margin:.7rem 0 1rem; max-width:18ch;
  color:var(--bg);}
.contact .intro{color:rgba(243,237,228,.74); max-width:40ch; margin-bottom:1.4rem;
  font-size:var(--fs-sm);}

/* Los tres canales directos, como fichas pulsables. Eran filas de una
   lista con la etiqueta a la izquierda y un guion al lado: ocupaban
   cinco renglones para decir tres cosas, y no invitaban a pulsar. */
.contact-data{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.5rem;}
.contact-data li{display:block;}
.contact-data .k{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;}   /* la etiqueta queda para lectores de pantalla */
.contact-data a{display:inline-flex; align-items:center; gap:.45rem; min-height:40px;
  padding:.5rem .9rem; border-radius:999px; font-size:var(--fs-sm);
  color:var(--bg); background:rgba(250,248,244,.07);
  border:1px solid rgba(250,248,244,.16);
  transition:background .3s var(--ease-out), border-color .3s, color .3s;}
.contact-data a::before{content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent-on-dark); flex:none;}
.contact-data a:hover{background:rgba(250,248,244,.14); border-color:var(--accent-on-dark);
  color:#fff;}

.cform{display:grid; gap:.9rem;}
.cform label{display:grid; gap:.3rem;}
.cform span{font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--beige-deep);}
.cform input,.cform textarea,.cform select{
  width:100%; padding:.8rem .95rem; border:1px solid rgba(250,248,244,.22);
  background:rgba(250,248,244,.05);
  font:inherit; font-size:var(--fs-sm); color:var(--bg); border-radius:var(--r-sm);
  transition:border-color .25s, background .25s;
}
@supports (corner-shape: squircle){
  .cform input,.cform textarea,.cform select{corner-shape:squircle;}
}
/* el marcador de posición en crema al 45 %: legible, pero sin
   competir con lo que la clienta escribe */
.cform ::placeholder{color:rgba(243,237,228,.45); opacity:1;}
/* el desplegable pinta sus opciones con los colores del sistema:
   sin esto, en Windows salía texto blanco sobre lista blanca */
.cform select option{background:var(--ink); color:var(--bg);}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;
  border-color:var(--accent-on-dark); background:rgba(250,248,244,.09);}
.cform textarea{resize:vertical; min-height:110px; line-height:1.5;}
.cform .row{display:grid; grid-template-columns:1fr 1fr; gap:.9rem;}
.cform .hint{font-size:var(--fs-micro); color:rgba(243,237,228,.6); line-height:1.6;}
/* el botón por defecto es tinta sobre claro: aquí el fondo ya es tinta */
.contact .btn-primary{background:var(--bg); color:var(--ink); border-color:var(--bg);}
.contact .btn-primary:hover{background:var(--accent-on-dark); border-color:var(--accent-on-dark);
  color:var(--ink);}
/* el anillo de foco general es el dorado oscuro: sobre tinta no se ve */
.contact :focus-visible{outline-color:var(--accent-on-dark);}
.contact .btn-primary{border-radius:999px; margin-top:.3rem;}

/* horario y cobertura: letra fina al pie del panel, no dos filas más de
   la lista. Son datos de consulta, no una llamada a la acción. */
.cont-pie{margin-top:auto; padding-top:1.2rem; font-size:var(--fs-micro);
  color:rgba(243,237,228,.55); display:flex; flex-wrap:wrap; gap:.4rem .6rem;}
.cont-pie i{font-style:normal; opacity:.5;}

@media (max-width:900px){
  /* apilado: la foto arriba, en apaisado, y el formulario debajo */
  .contact-inner{grid-template-columns:1fr; border-radius:var(--r-lg);}
  .cont-foto{min-height:0; aspect-ratio:4/3;}
  .cont-puntos{left:1rem; bottom:1rem;}
}
@media (prefers-reduced-motion:reduce){
  .cont-foto img{transition:none;}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE · tres puntos de corte y nada más
   1200 → escritorio estrecho | 900 → tableta | 640 → móvil
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1200px){
  .contact-data li{grid-template-columns:7rem 1fr;}
}

@media (max-width:900px){
  .head-nav{display:none;}
  .nav-toggle{display:grid;}
  .process-inner{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr; gap:1.6rem;}
  .benefits-inner{grid-template-columns:1fr;}
  .benefit{border-left:none; border-top:1px solid var(--line);}
  .benefit:first-child{border-top:none;}
  .contact-inner{grid-template-columns:1fr;}
  .qv-panel{grid-template-columns:1fr; grid-template-rows:42% 1fr; height:92svh;}
  /* el editorial se apila al mismo umbral que el catálogo, para que no
     convivan una sección apilada y otra con scroll lateral */
  /* apilado: sin scroll lateral y sin recorte — overflow:visible es
     imprescindible aquí, si no el overflow-y:hidden de escritorio
     cortaría la columna de diapositivas */
  .ed-pin{height:auto; padding-block:clamp(3rem,10vw,5rem);
    overflow:visible; scroll-snap-type:none;}
  .ed-track{flex-direction:column; transform:none;}
  .ed-slide{flex:none; width:100%; scroll-snap-align:none;}
  /* la foto sigue siendo más ancha que el marco: así puede hacer parallax
     vertical al pasar, igual que en escritorio pero en otro eje */
  .ed-slide img{width:100%; height:118%; object-fit:cover; position:absolute; top:-9%;}
  /* El hero deja de fijarse y hacer scrub aquí, no en 640px: el JS decide
     el modo «sin vídeo scrubbeado» con el mismo corte (heroMobile, 900px).
     Con los dos umbrales desalineados, entre 641 y 900px el CSS seguía
     fijando el hero de escritorio (460vh, sticky) mientras el JS ya
     corría la lógica simple de móvil — la mezcla se sentía a tirones. */
  .hero{height:auto;}
  .hero-pin{position:relative; height:88svh;}
}

/* ── Respuesta al toque ────────────────────────────────────────
   Sin ratón no hay hover, así que el feedback tiene que venir
   de la pulsación. Corto y sutil: 140 ms y escala 0.97. */
@media (hover:none){
  .btn,.hero-btn,.head-cta,.chip,.dock a,.qv-close,.card{
    transition:transform .14s ease-out, background .3s var(--ease-out), color .3s;
  }
  .btn:active,.hero-btn:active,.head-cta:active,.chip:active,
  .dock a:active,.qv-close:active{transform:scale(.97);}
  .card:active .card-media{transform:scale(.985);}
  /* sin hover no hay segunda foto: se enseña siempre el aviso de la ficha */
  .card-look{opacity:1; transform:none;}
}

@media (max-width:640px){
  .stats{grid-template-columns:1fr; gap:1.6rem;}
  .scroll-hint{display:none;}
  .cform .row{grid-template-columns:1fr;}
  .contact-data li{grid-template-columns:1fr; gap:.15rem;}
  .drawer{padding-inline:var(--gap);}
}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  .hero{height:auto;}
  .hero-pin{position:relative; height:88svh;}
  .fx-up{opacity:1; transform:none;}
  .act-2,.act-3{display:none;}
}

/* ══════════════════════════════════════════════════════════════
   PULIDO · esquinas continuas, aire medido y superficies del navegador
   Este bloque va al final a propósito: cierra la hoja imponiendo la
   forma sobre todo lo anterior, para que no quede ni una esquina viva.
   ══════════════════════════════════════════════════════════════ */

/* ── Montserrat como display ────────────────────────────────────
   Sin segunda familia, la jerarquía la marcan el peso y el tracking:
   los titulares cierran el espaciado y suben a 600. */
h1,h2,h3{font-weight:600; letter-spacing:-.025em;}
h1{letter-spacing:-.035em;}
.card-name{font-weight:500; letter-spacing:-.015em;}
.act-2 p.big, .act-3 p.big, .act-4 p.big,
.cat-cta p{font-weight:500; letter-spacing:-.02em;}
.eyebrow{font-weight:600;}

/* ── nada cuadrado ──────────────────────────────────────────────
   La escala completa. Lo pequeño lleva radio pequeño; lo que se toca,
   cápsula entera. */
.chip,
.head-cta,
.hero-btn,
.btn,
.badge,
.card-look,
.ev-link,
.ev-flag,
.cat-sort,
.vit-open{border-radius:var(--r-full);}

.qv-img,
.qv-thumbs button,
.ev-hero-media,
.about-card,
.benefit,
.press-card,
.field input,
.field textarea,
.process .visual,
.process .visual img{border-radius:var(--r-sm);}

.qv-thumbs button{border-radius:var(--r-xs);}
.about-card,.benefit,.press-card{padding:clamp(1.2rem,2.4vw,1.8rem);}

/* el visor y su foto comparten la curva del panel */
.qv-panel{overflow:hidden;}
.qv-img{border-radius:var(--r-lg) 0 0 var(--r-lg);}

/* la barra de filtros deja de ser una franja de borde a borde */
.cat-bar{border:0; border-radius:var(--r-full);
  max-width:var(--container); margin:0 auto; width:calc(100% - var(--gap)*2);
  box-shadow:0 1px 0 var(--line), 0 10px 30px -18px rgba(28,25,23,.28);
  padding:.6rem .9rem;}

/* Esquina continua real donde el navegador la dibuja. Es lo que
   diferencia el borde de un iPhone de un simple border-radius. */
@supports (corner-shape: squircle){
  .cat-card,.card-media,.ev-card,.ev-hero,.ev-hero-media,.depth-layer,
  .qv-panel,.qv-img,.about-card,.benefit,.press-card,
  .field input,.field textarea,.process .visual{corner-shape:squircle;}
}

/* ── el aire: grupos apretados, separaciones generosas ──────────
   Antes todas las secciones respiraban igual y la página se hacía larga
   sin decir más. Se recorta el vacío y se deja el que separa bloques. */
.cats{padding:clamp(3rem,6vh,4.5rem) 0 clamp(1.4rem,3vh,2.2rem);}
.cats-head{margin-bottom:clamp(1.4rem,3vh,2.2rem);}
.catalogo{padding-bottom:clamp(3.5rem,7vh,5.5rem);}
.grid{padding-top:clamp(1.1rem,2.4vh,1.6rem);}
.depth{padding:clamp(3.5rem,8vh,6rem) 0;}
.depth-copy{padding-block:clamp(1.6rem,5vh,3.4rem);}
.eventos{padding:clamp(3.5rem,7vh,5.5rem) 0;}
.ev-head{margin-bottom:clamp(1.4rem,3vh,2.2rem);}
.cat-cta{margin-top:clamp(1.8rem,4vh,2.8rem);}

/* más espacio encima de un titular que debajo */
.cats-head h2,.cats-head h1,.ev-head h2,.depth-copy h2{margin-top:0;}
.cats-head p{margin-top:.5rem;}

/* ── superficies que pinta el navegador, no el diseño ───────────
   Selección, cursor, barra y anillo de foco salen de la paleta. Es lo
   más barato que separa una página construida de una ensamblada. */
::selection{background:var(--ink); color:var(--bg);}
:root{accent-color:var(--accent); caret-color:var(--accent);}
html{scrollbar-color:var(--beige-deep) transparent; scrollbar-width:thin;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--beige-deep); border-radius:var(--r-full);
  border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--ink-mute);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs);}
a{text-underline-offset:.22em; text-decoration-thickness:1px;}
.card-price,.cat-count,.vit-count{font-variant-numeric:tabular-nums;}

/* el dorado como texto necesita su propio tono para llegar a 4.5:1 */
.card-price.ask{color:var(--accent-text);}
.hero-wa:hover{color:var(--accent-text); border-color:var(--accent-text);}

/* ── el gesto de pulsar ─────────────────────────────────────────
   160 ms y 0.97: lo justo para que la interfaz acuse el toque. */
.card,.cat-card,.ev-card,.chip,.hero-btn,.btn,.head-cta{
  transition:transform 160ms var(--ease-out);}
.card:active,.cat-card:active,.ev-card:active{transform:scale(.988);}
.chip:active,.hero-btn:active,.btn:active,.head-cta:active{transform:scale(.97);}

@media (max-width:900px){
  .cat-bar{border-radius:var(--r-md); width:calc(100% - 1.6rem);}
  .qv-img{border-radius:var(--r-lg) var(--r-lg) 0 0;}
  .cat-card{border-radius:var(--r-md);}
}

@media (prefers-reduced-motion:reduce){
  .card:active,.cat-card:active,.ev-card:active,
  .chip:active,.hero-btn:active,.btn:active,.head-cta:active{transform:none;}
}

/* ══════════════════════════════════════════════════════════════
   HERO CINEMATOGRÁFICO
   El vídeo es un escaparate: marcos negros puros y un vestido casi
   blanco en el mismo fotograma. Con la tipografía en tinta hacía
   falta un velo CLARO del 49 % (medido sobre el vídeo, fotograma a
   fotograma) para que el titular llegara a 4.5:1 — y ese velo era
   lo que se veía como «un blur»: la imagen se volvía lechosa.
   Se invierte. Velo de tinta, tipografía crema: la foto conserva
   sus negros y sus blancos, se lee nítida, y el texto pasa
   contraste incluso en el fotograma más claro.
   ══════════════════════════════════════════════════════════════ */
.hero-pin{background:var(--ink);}

/* El degradado abre en la banda del rostro (30 %) y cierra donde hay
   texto: cabecera arriba, titular al centro, CTA abajo. */
.hero-grade{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(28,25,23,.80) 0%,
    rgba(28,25,23,.66) 10%,
    rgba(28,25,23,.36) 19%,
    rgba(28,25,23,.30) 28%,
    rgba(28,25,23,.56) 36%,
    rgba(28,25,23,.64) 44%,
    rgba(28,25,23,.64) 62%,
    rgba(28,25,23,.63) 76%,
    rgba(28,25,23,.70) 88%,
    rgba(28,25,23,.82) 100%);
}

/* ── la tipografía del hero, en crema ─────────────────────────── */
.hero-pin h1,
.hero-pin .act p.big{color:var(--bg);}
.hero-pin .hero-sub{color:rgba(250,248,244,.80);}

/* el dorado no llega a contraste sobre tinta: sube de tono */
.hero-pin .accent,
.site-header.on-hero .brand em{color:var(--accent-on-dark);}

/* ── el botón se invierte: claro sobre oscuro ─────────────────── */
.hero-pin .hero-btn{background:var(--bg); color:var(--ink);}
.hero-pin .hero-btn:hover{background:var(--accent-on-dark); color:var(--ink);}
.hero-wa{color:var(--bg); border-bottom-color:rgba(250,248,244,.42);}
.hero-wa:hover{color:var(--bg); border-color:var(--bg);}

/* ── indicadores ──────────────────────────────────────────────── */
.hero-hud{color:var(--bg); mix-blend-mode:normal; opacity:.66;}
.hero-progress{background:rgba(250,248,244,.20);}
.hero-progress span{background:var(--accent-on-dark);}
.scroll-hint{color:rgba(250,248,244,.74);}
.scroll-hint i{background:rgba(250,248,244,.28);}
.scroll-hint i::after{background:var(--bg);}

/* ── la cabecera mientras flota sobre el vídeo ────────────────── */
.site-header .brand,.site-header .head-nav a,.site-header .head-cta,
.site-header .brand em{transition:color .4s var(--ease-out), border-color .4s var(--ease-out);}
.site-header.on-hero .brand{color:var(--bg);}
.site-header.on-hero .head-nav a{color:rgba(250,248,244,.86);}
.site-header.on-hero .head-cta{color:var(--bg); border-color:rgba(250,248,244,.5);}
.site-header.on-hero .head-cta:hover{background:var(--bg); color:var(--ink); border-color:var(--bg);}
.site-header.on-hero .nav-toggle i,
.site-header.on-hero .nav-toggle i::before,
.site-header.on-hero .nav-toggle i::after{background:var(--bg);}


/* ── el hero en pantalla estrecha ─────────────────────────────── */
@media (max-width:640px){
  /* 48 px era sitio para dos renglones. Los avisos van de uno en uno, así
     que sobraba franja negra; 40 px dejan la línea holgada y siguen
     cabiendo dos si algún día se escribe un mensaje largo desde el panel
     —se aprieta, pero no se corta—. */
  :root{--announce-h:40px;}
  /* el botón se partía en dos líneas: menos tracking y sin corte */
  .hero-pin .hero-btn{font-size:var(--fs-micro); letter-spacing:.12em;
    padding:.95rem 1.5rem; white-space:nowrap;}
  /* ancho propio: si no, la caja la marcaba el botón y el texto de
     WhatsApp caía en tres líneas */
  .hero-cta{padding:1rem 1.1rem; width:min(88vw, 25rem);}
  .hero-wa{text-align:center; line-height:1.45;}
  /* el aviso de arriba se cortaba por los dos lados: en vez de encoger
     la letra por debajo del suelo de 11 px, la barra crece y el mensaje
     se parte en dos líneas — sirve para cualquier texto que escriban
     desde el panel, no solo para estos tres */
  .announce p{white-space:normal; line-height:1.35; letter-spacing:.05em;
    padding-inline:.9rem; text-wrap:balance;}
  .hero-hud{bottom:1.35rem;}
  .hero-hud .meta{letter-spacing:.1em; text-transform:uppercase;}
  .hero-hud #hud-season{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
}

/* ── superficie que quedaba con esquina viva ─────────────────────
   Las diapositivas del editorial: foto propia, así que entra en la
   misma escala que el resto. */
.ed-slide{border-radius:var(--r-md);}
@supports (corner-shape: squircle){
  .ed-slide{corner-shape:squircle;}
}

/* ── la barra de filtros en pantalla estrecha ───────────────────
   Los chips se envolvían en dos filas y, con el selector debajo, la
   barra pegada se comía 195 px de pantalla. Ahora los chips se
   desplazan en horizontal —el gesto natural en móvil— y el contador
   comparte fila con el orden: la mitad de alto. */
@media (max-width:640px){
  .cat-bar-in{flex-wrap:wrap; gap:.5rem .6rem;}
  .chips{flex-wrap:nowrap; width:100%; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
  .chips::-webkit-scrollbar{display:none;}
  .cat-count{order:2; flex:0 1 auto; width:auto;}
  .cat-count .cc-extra{display:none;}
  .cat-sort{order:3; flex:0 0 auto; margin-left:auto; padding-inline:.7rem;}
}

/* ══════════════════════════════════════════════════════════════
   LA TIRA DE PASARELA
   El carrusel deja de ser un muestrario de fotos y pasa a contar algo
   en orden: llama la atención, da el dato, enseña el movimiento y
   termina pidiendo la compra. Vídeo, foto y cierre comparten medida,
   así que la tira se lee como una sola pieza.
   ══════════════════════════════════════════════════════════════ */
.ed-flag{display:inline-flex; align-items:center; font-size:var(--fs-micro);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--ink); background:var(--accent-on-dark);
  padding:.42rem .9rem; border-radius:var(--r-full); margin-bottom:1.1rem;}
.ed-intro-cta{display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  margin-top:1.6rem; padding:.85rem 1.5rem; border-radius:var(--r-full);
  background:var(--bg); color:var(--ink); font-size:var(--fs-micro);
  letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  transition:transform 160ms var(--ease-out), background .3s var(--ease-out);}
.ed-intro-cta:hover{background:var(--accent-on-dark);}
.ed-intro-cta:active{transform:scale(.97);}
.ed-intro-mas{display:inline-block; margin-top:.9rem; font-size:var(--fs-sm);
  color:rgba(250,248,244,.72); text-decoration:underline; text-underline-offset:.22em;
  text-decoration-thickness:1px; transition:color .3s var(--ease-out);}
.ed-intro-mas:hover{color:var(--bg);}


/* ── la tarjeta de vídeo ─────────────────────────────────────── */
.ed-video{display:block; padding:0; border:0; cursor:pointer; text-align:left;
  color:var(--bg); font:inherit; -webkit-appearance:none; appearance:none;
  transition:transform .5s var(--ease-expo);}
.ed-video img{filter:saturate(.9) brightness(.72);
  transition:filter .35s var(--ease-out), transform .26s var(--ease-out);}
.ed-video::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,25,23,.28) 0%, transparent 34%,
    transparent 46%, rgba(28,25,23,.86) 100%);}
.ed-video:hover img{filter:saturate(1) brightness(.82); transform:translateX(-5%) scale(1.04);}
.ed-video:active{transform:scale(.988);}

.ed-play{position:absolute; z-index:2; left:50%; top:44%; transform:translate(-50%,-50%);
  width:4.4rem; height:4.4rem; border-radius:var(--r-full);
  background:var(--bg); color:var(--ink);
  display:grid; place-items:center; pointer-events:none;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  transition:transform .45s var(--ease-expo), background .3s var(--ease-out);}
.ed-play svg{width:1.5rem; height:1.5rem; fill:currentColor; margin-left:.18rem;}
.ed-video:hover .ed-play{transform:translate(-50%,-50%) scale(1.09);
  background:var(--accent-on-dark);}

.ed-video-body{position:absolute; z-index:2; inset:auto 0 0 0;
  padding:1.1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.22rem;}
.ed-kind{font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-on-dark); font-weight:600;}
.ed-title{font-size:var(--fs-lg); font-weight:600; letter-spacing:-.02em; line-height:1.2;}
.ed-credit{font-size:var(--fs-micro); color:rgba(250,248,244,.7);}

/* ── la tarjeta de cierre ────────────────────────────────────── */
.ed-cierre{aspect-ratio:4/5; background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:.55rem;
  padding:clamp(1.4rem,3vw,2.2rem); overflow:visible;}
.ed-cierre .ed-kind{color:var(--accent-text);}
.ed-cierre h3{font-size:clamp(1.3rem,2.6vw,1.9rem); letter-spacing:-.025em; line-height:1.16;}
.ed-cierre-p{color:var(--ink-soft); font-size:var(--fs-sm); max-width:26ch;}
.ed-cierre-btns{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem;}
.ed-btn{display:inline-flex; align-items:center; min-height:44px; padding:.8rem 1.3rem;
  border-radius:var(--r-full); border:1px solid var(--line-strong);
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; white-space:nowrap;
  transition:transform 160ms var(--ease-out), background .3s var(--ease-out),
             color .3s var(--ease-out);}
.ed-btn.solid{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.ed-btn.solid:hover{background:var(--accent-text); border-color:var(--accent-text);}
.ed-btn:not(.solid):hover{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.ed-btn:active{transform:scale(.97);}

.ed-slide figcaption{background:none;}

/* ── el visor del reel ───────────────────────────────────────── */
.rl{position:fixed; inset:0; z-index:600; display:grid; place-items:center;
  padding:clamp(.6rem,2.5vw,2rem);}
.rl-fondo{position:absolute; inset:0; background:rgba(28,25,23,.86);
  animation:rl-entra .3s var(--ease-out);}
.rl-caja{position:relative; width:min(420px,100%); height:min(88svh,760px);
  border-radius:var(--r-lg); overflow:hidden; background:var(--ink);
  animation:rl-sube .45s var(--ease-out);}
.rl-caja iframe{width:100%; height:100%; border:0; display:block; background:#fff;}
.rl-cerrar{position:absolute; z-index:3; top:.6rem; right:.6rem;
  width:40px; height:40px; border-radius:var(--r-full); border:0; cursor:pointer;
  background:rgba(250,248,244,.94); color:var(--ink); display:grid; place-items:center;
  transition:transform 160ms var(--ease-out), background .3s var(--ease-out);}
.rl-cerrar svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round;}
.rl-cerrar:hover{background:var(--bg);}
.rl-cerrar:active{transform:scale(.94);}
@keyframes rl-entra{from{opacity:0} to{opacity:1}}
@keyframes rl-sube{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

@supports (corner-shape: squircle){
  .ed-video,.ed-cierre,.rl-caja{corner-shape:squircle;}
}

@media (max-width:900px){
  .ed-video img{transform:none;}
  .ed-video:hover img{transform:scale(1.03);}
  .ed-cierre{aspect-ratio:auto;}
}

@media (prefers-reduced-motion:reduce){
  .rl-fondo,.rl-caja{animation:none;}
  .ed-video,.ed-video img,.ed-play{transition:none;}
}

/* ══════════════════════════════════════════════════════════════
   LA PASARELA EN VÍDEO
   Los reels se ven dentro de la página, sin salir a Instagram, pero
   detrás de un clic: hasta entonces solo hay una foto nuestra y a Meta
   no se le pide nada. El marco de Instagram es blanco, así que la
   sección va en crema: el recuadro se apoya en el fondo en vez de
   recortarse encima.
   ══════════════════════════════════════════════════════════════ */
.reels{background:var(--cream); padding:var(--sec-y) 0;}
.reels-head{max-width:var(--container); text-align:center; margin-bottom:clamp(1.8rem,4vh,2.8rem);}
.reels-head .ed-flag{color:var(--ink); background:var(--accent-on-dark);}
.reels-head h2{font-size:clamp(1.8rem,4.4vw,3rem); margin:.9rem auto .8rem; max-width:18ch;}
.reels-head p{color:var(--ink-soft); max-width:52ch; margin-inline:auto;}
/* ── carrusel en profundidad ─────────────────────────────────────
   El vídeo del centro de frente, los laterales girados hacia dentro
   y apagados. Detrás, el fotograma del activo muy desenfocado: la
   sección se tiñe con la luz del propio vídeo, que es lo que hace
   que no parezca una rejilla de recuadros. */
.cf{position:relative; max-width:var(--container); margin-inline:auto;
  min-height:600px; display:flex; align-items:center; justify-content:center;
  perspective:1400px; isolation:isolate;
  /* Las tarjetas laterales giradas y el fondo desenfocado se salen de la
     sección a propósito — es lo que da la profundidad — pero en pantallas
     estrechas eso ensanchaba el documento 49 px por encima del viewport.
     `clip` y no `hidden`: recorta sin crear un contenedor de scroll, así
     no aplana el 3D ni se traga el desplazamiento de la página. */
  overflow-x:clip;}
.cf:focus-visible{outline:2px solid var(--accent); outline-offset:6px; border-radius:var(--r-lg);}

/* El sangrado es horizontal y hacia arriba, nunca hacia abajo: un 10%
   de alto son 52 px en móvil, y ahí abajo es donde empiezan los botones
   —se montaba justo encima del primero—. Cortar en seco no se nota
   porque el velo de ::after ya llega a var(--cream) en el borde, que es
   exactamente el fondo de .reels. */
.cf-fondo{position:absolute; inset:-10% -5% 0; z-index:0; overflow:hidden;
  pointer-events:none; border-radius:var(--r-xl);}
.cf-fondo img{width:100%; height:100%; object-fit:cover;
  filter:blur(44px) saturate(1.35); transform:scale(1.2); opacity:.34;
  transition:opacity .8s var(--ease-out);}
/* el velo devuelve la sección a crema por los bordes: el desenfoque
   solo tiene que insinuar el color, no competir con las tarjetas */
.cf-fondo::after{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,
    rgba(243,237,228,.15) 0%, rgba(243,237,228,.86) 72%, var(--cream) 100%);}

.cf-escena{position:relative; z-index:1; width:100%; height:533px;
  transform-style:preserve-3d;}
.cf-card{position:absolute; left:50%; top:0; width:300px; height:533px;
  margin-left:-150px; border-radius:var(--r-lg); overflow:hidden;
  background:#241f1b; border:1px solid rgba(28,25,23,.12);
  transform-origin:center center; cursor:pointer;
  transition:transform .8s cubic-bezier(.25,1,.5,1), opacity .8s var(--ease-out),
             box-shadow .8s var(--ease-out);
  box-shadow:0 14px 34px -18px rgba(28,25,23,.5);}
.cf-card.es-centro{cursor:default;
  box-shadow:0 34px 70px -26px rgba(28,25,23,.55);}
@supports (corner-shape: squircle){ .cf-card{corner-shape:squircle;} }
.cf-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; background:#241f1b;}

/* los laterales van apagados: el ojo tiene que ir al del centro */
.cf-velo{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,25,23,0) 45%, rgba(28,25,23,.82) 100%),
             rgba(243,237,228,.42);
  transition:background .8s var(--ease-out);}
.cf-card.es-centro .cf-velo{
  background:linear-gradient(180deg, rgba(28,25,23,0) 52%, rgba(28,25,23,.8) 100%);}

.cf-pie{position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:1.1rem 1.1rem 1.2rem; color:#fff; text-align:left;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);}
.cf-card.es-centro .cf-pie{opacity:1; transform:none;}
.cf-pie b{display:block; font-family:var(--serif); font-weight:600;
  font-size:var(--fs-lg); letter-spacing:-.01em; line-height:1.15;}
.cf-pie i{display:block; font-style:normal; margin-top:.2rem;
  font-size:var(--fs-sm); color:rgba(243,237,228,.8);}

/* pausado: un triángulo de play encima para invitar a volver a darle */
.cf-card.en-pausa::after{content:''; position:absolute; z-index:3;
  left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px;
  border-radius:50%; background:rgba(250,248,244,.94);}
.cf-card.en-pausa::before{content:''; position:absolute; z-index:4;
  left:50%; top:50%; margin:-9px 0 0 -5px; border-style:solid;
  border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--ink);}

.cf-nav{position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  background:rgba(250,248,244,.92); color:var(--ink); border:1px solid var(--line);
  box-shadow:0 12px 30px -14px rgba(28,25,23,.5);
  transition:background .3s var(--ease-out), transform .3s var(--ease-expo);}
.cf-nav:hover{background:#fff; transform:translateY(-50%) scale(1.08);}
.cf-nav:active{transform:translateY(-50%) scale(.95);}
.cf-nav svg{width:20px; height:20px;}
.cf-prev{left:clamp(.5rem,3vw,2.5rem);}
.cf-next{right:clamp(.5rem,3vw,2.5rem);}

.cf-puntos{position:absolute; z-index:5; left:0; right:0; bottom:-6px;
  display:flex; justify-content:center; align-items:center; gap:.5rem;}
/* ancho fijo + scaleX: animar width es layout, transform va en la GPU */
.cf-punto{width:26px; height:8px; border-radius:999px; background:var(--line-strong);
  transform-origin:left; transform:scaleX(.308);
  transition:transform .35s var(--ease-out), background .35s var(--ease-out);}
.cf-punto.on{transform:none; background:var(--accent);}

@media (max-width:760px){
  .cf{min-height:520px; perspective:900px;}
  .cf-escena{height:440px;}
  .cf-card{width:240px; height:440px; margin-left:-120px;}
  .cf-nav{width:40px; height:40px;}
}
@media (prefers-reduced-motion:reduce){
  /* sin giros ni reproducción automática: solo el póster del activo */
  .cf-card{transition:none !important;}
  .cf-fondo{display:none;}
}
.reel{display:flex; flex-direction:column; gap:.7rem;}
.reel-marco{position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg); border:1px solid var(--line);
  box-shadow:0 24px 60px -34px rgba(28,25,23,.45);
  aspect-ratio:9/16; margin-inline:auto; width:100%; max-width:400px;}
/* Portada del reel: foto nuestra + botón. El iframe de Instagram solo
   entra al pulsar, y entra aquí dentro: la clienta no sale de la web. */
.reel-marco{display:block; cursor:pointer; padding:0; border:1px solid var(--line);
  font:inherit; color:inherit; text-align:inherit; -webkit-appearance:none; appearance:none;}
.reel-marco iframe{position:absolute; inset:0; z-index:3; width:100%; height:100%;
  border:0; display:block; background:var(--bg);}
/* Una vez puesto el vídeo la portada estorba. Y la caja se hace más
   alta: el embed de Instagram no es solo el vídeo —trae cabecera y
   barra de acciones—, así que en un 9/16 exacto se cortaba por abajo. */
.reel-marco.reel-puesto{cursor:default; aspect-ratio:40/85;}
.reel-marco .reel-play,.reel-marco .reel-fuente,
.reel-marco::after{transition:opacity .45s var(--ease-out);}
.reel-marco.reel-puesto img,
.reel-marco.reel-puesto .reel-play,
.reel-marco.reel-puesto .reel-fuente,
.reel-marco.reel-puesto::after{opacity:0; pointer-events:none;}
.reel-marco img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .26s var(--ease-out), opacity .45s var(--ease-out);}
.reel-marco::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,25,23,0) 45%, rgba(28,25,23,.72) 100%);}
.reel-marco:hover img{transform:scale(1.05);}
.reel-play{position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3.4rem; height:3.4rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(250,248,244,.94); color:var(--ink);
  transition:transform .4s var(--ease-expo), background .3s;}
.reel-play svg{width:1.5rem; height:1.5rem; fill:currentColor; margin-left:.18rem;}
.reel-marco:hover .reel-play{transform:translate(-50%,-50%) scale(1.09); background:#fff;}
.reel-fuente{position:absolute; z-index:2; left:0; right:0; bottom:.9rem; text-align:center;
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:#fff;}
.reel-pie{text-align:center; font-size:var(--fs-sm); color:var(--ink-soft);}
.reel-pie b{display:block; color:var(--ink); font-weight:600; letter-spacing:-.015em;
  font-size:var(--fs-base);}
.reel-pie a{color:var(--accent-text); text-decoration:underline;
  text-underline-offset:.22em; text-decoration-thickness:1px;}
.reel-evento{color:var(--accent-text); font-weight:600;}
.reels-cta{max-width:var(--container); display:flex; gap:.8rem; justify-content:center;
  flex-wrap:wrap; margin-top:clamp(1.8rem,4vh,2.8rem);}
/* Va detrás de la regla de arriba a propósito: misma especificidad, así
   que sólo gana la que se declara después. Apilados en columna, .8rem
   los deja pegados, y hay que despejar los puntos del carrusel, que
   cuelgan 6 px por debajo de él. */
@media (max-width:760px){
  .reels-cta{margin-top:2.6rem; row-gap:1.1rem;}
}
@supports (corner-shape: squircle){ .reel-marco{corner-shape:squircle;} }

/* ══════════════════════════════════════════════════════════════
   ENTREVISTAS · voz propia, aparte de la cobertura de pasarela
   ══════════════════════════════════════════════════════════════ */
/* ── PRENSA · una publicación cada vez ─────────────────────────
   Medio a la izquierda, información a la derecha, barra abajo. Fondo
   blanco: la sección queda entre dos bloques en tinta y el blanco es el
   respiro — además el marco de Instagram es blanco y así se apoya en el
   fondo en vez de recortarse encima. */
.prensa{background:#fff; padding:var(--sec-y) 0;}
.pr-wrap{max-width:var(--container);}
/* El visor reserva el alto real del embed: 336 px de ancho por 40/85
   son 714 px. Con menos, el marco se desbordaba y se comía el titular. */
.pr-visor{position:relative; min-height:46rem;}
.pr-slide{position:absolute; inset:0; display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .26s var(--ease-out), transform .26s var(--ease-out),
             visibility 0s linear .26s;}
.pr-slide.on{opacity:1; visibility:visible; transform:none; transition-delay:0s;}

/* El marco tiene DESDE EL PRINCIPIO la proporción del embed de Instagram
   (40/85: el vídeo más su cabecera y su barra de acciones). Antes era 4/5
   y al montarse el iframe la caja cambiaba de forma: se salía del sitio y
   pisaba el titular. Reservando la forma correcta no hay salto ninguno.
   El ancho mínimo del embed oficial son 326 px, de ahí las 21rem. */
.pr-media{position:relative; display:block; width:100%; aspect-ratio:40/85;
  max-width:21rem; margin-inline:auto; padding:0; border:0;
  background:var(--cream); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 1px 2px rgba(28,25,23,.06), 0 18px 40px -18px rgba(28,25,23,.34);}
@supports (corner-shape: squircle){ .pr-media{corner-shape:squircle;} }
.pr-media img{width:100%; height:100%; object-fit:cover; display:block;}
.pr-media.sin-foto{display:grid; place-items:center; background:var(--ink);}
.pr-marca{font-family:var(--serif); font-weight:500; font-size:clamp(4rem,9vw,7rem);
  line-height:1; color:rgba(243,237,228,.16);}
.pr-media iframe{position:absolute; inset:0; z-index:3; width:100%; height:100%;
  border:0; display:block; background:#fff;
  opacity:0; transition:opacity .3s var(--ease-out);}
/* el embed tarda un momento en pintar: la portada se queda debajo y el
   iframe entra por encima con un fundido, sin parpadeo blanco */
.pr-media.con-embed iframe{opacity:1;}
.pr-media img,.pr-marca{transition:opacity .3s var(--ease-out);}

.pr-info{min-width:0;}
.pr-ig{display:block; width:20px; height:20px; color:var(--accent); margin-bottom:.9rem;}
.pr-ig svg{width:100%; height:100%; fill:currentColor;}
.pr-info h3{font-size:clamp(1.5rem,3.2vw,2.3rem); letter-spacing:-.015em; color:var(--ink);}
.pr-cuenta{font-size:var(--fs-sm); color:var(--ink-mute); margin-top:.2rem;}
.pr-que{font-size:var(--fs-lg); color:var(--ink-soft); line-height:1.5;
  margin-top:1.1rem; max-width:38ch;}
.pr-ev{display:inline-block; margin-top:1.1rem; font-size:var(--fs-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text);}

.pr-barra{display:flex; align-items:center; gap:.9rem;
  margin-top:clamp(1.4rem,3vw,2.2rem); padding-top:clamp(1.2rem,2.5vw,1.8rem);
  border-top:1px solid var(--line);}
.pr-nav{width:44px; height:44px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line-strong); color:var(--ink);
  transition:transform .16s var(--ease-out), background .22s var(--ease-out),
             border-color .22s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .pr-nav:hover{background:var(--ink); color:var(--bg); border-color:var(--ink);}
}
.pr-nav:active{transform:scale(.97);}      /* 160ms, feedback de pulsación */
.pr-nav svg{width:18px; height:18px;}
.pr-puntos{display:flex; align-items:center; gap:.4rem; margin-left:.4rem;}
.pr-punto{width:24px; height:6px; border-radius:999px; background:var(--line-strong);
  transform-origin:left; transform:scaleX(.25);
  transition:transform .3s var(--ease-out), background .3s var(--ease-out);}
.pr-punto.on{transform:none; background:var(--accent);}
.pr-cuenta-n{margin-left:auto; font-size:var(--fs-micro); letter-spacing:.18em;
  color:var(--ink-mute); font-variant-numeric:tabular-nums;}
.pr-cuenta-n b{color:var(--ink); font-weight:600;}

@media (max-width:820px){
  .pr-slide{grid-template-columns:1fr; gap:1.4rem; align-content:start;}
  /* apilado: el marco encima y la info debajo, así que el alto suma */
  .pr-media{max-width:19rem;}
  .pr-visor{min-height:57rem;}
}
@media (prefers-reduced-motion:reduce){
  /* sin desplazamiento: solo el fundido, que sí ayuda a entender el cambio */
  .pr-slide{transform:none !important;}
  .pr-media,.pr-play,.pr-nav{transition:opacity .2s linear !important;}
}
.int-head{max-width:var(--container); text-align:center; margin-bottom:clamp(1.8rem,4vh,2.8rem);}
.int-head .ed-flag{color:var(--ink); background:var(--accent-on-dark);}
.int-head h2{font-size:clamp(1.8rem,4.4vw,3rem); margin:.9rem auto .8rem;}
.int-head p{color:var(--ink-soft); max-width:52ch; margin-inline:auto;}
.testi-mas{text-align:center; margin-top:clamp(1.8rem,4vh,2.6rem);
  font-size:var(--fs-sm); color:var(--ink-soft);}
.testi-mas a{color:var(--accent-text); text-decoration:underline;
  text-underline-offset:.22em; text-decoration-thickness:1px;}

.int-grid{max-width:920px; display:grid; gap:clamp(2rem,5vw,3.5rem);}
.int-card{display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:center;}
/* ancho explícito, no solo max-width: en la columna `auto` de .int-card
   el marco ya no lleva contenido en flujo (antes lo daba el texto del
   «Cargando el vídeo…»), así que un width:100% se quedaba en 0 y la
   miniatura colapsaba a 4 px de alto. */
.int-marco{width:300px; max-width:100%;}
.int-copy .eyebrow{color:var(--accent-text);}
.int-copy h3{font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.2rem); margin:.6rem 0 .9rem; line-height:1.25;}
.int-copy p{color:var(--ink-soft); max-width:38ch;}
.int-autor{display:inline-block; margin-top:1.1rem; font-size:var(--fs-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
  border-bottom:1px solid var(--line-strong); padding-bottom:.25em;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out);}
.int-autor:hover{color:var(--accent); border-color:var(--accent);}
@media (min-width:640px){ .int-card{grid-template-columns:auto 1fr;} }

/* ══════════════════════════════════════════════════════════════
   HERO · slider de portada
   Todo bajo .hero2 / .hero2-* para no chocar con el hero antiguo
   (.hero, el del vídeo scrubbeado, que sigue en muestra.php) ni con
   sus selectores de GSAP. Comportamiento: bloque if($('.hero2')) de
   assets/wauke.js.
   ══════════════════════════════════════════════════════════════ */
.hero2{position:relative; height:460vh;}
.hero2-pin{position:sticky; top:0; height:100svh; width:100%; overflow:hidden;
  background:var(--ink); display:grid; place-items:center;}
.hero2-media{position:absolute; inset:0; overflow:hidden;}
.hero2-poster{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%; z-index:1;
  transition:opacity .6s var(--ease-out);}
.hero2-slides{position:absolute; inset:0; z-index:2;}

.hero2-slide{position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1s var(--ease-out), visibility 0s linear 1s;}
.hero2-slide.is-active{opacity:1; visibility:visible; transition-delay:0s;}

/* fondo: la misma imagen/vídeo, ampliada y desenfocada, para rellenar
   las bandas que deja un medio vertical en pantalla ancha */
.hero2-bg{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background-size:cover; background-position:center;
  transform:scale(1.18); filter:blur(34px) brightness(.55) saturate(1.08);
  will-change:transform;}
.hero2-fg{position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;}

.hero2-media .hero-grade{z-index:3;}

.hero2-acts{position:relative; z-index:10; width:100%; height:100%;}

/* indicadores propios (no reutilizo .hero-hud/.hero-progress para no
   cruzarme con los gsap.set del hero A, que van por clase) */
.hero2-hud{position:absolute; z-index:12; left:var(--gap); right:var(--gap);
  bottom:1.7rem; display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; color:var(--bg); opacity:.66; pointer-events:none;}
.hero2-hud .meta{font-size:var(--fs-micro); letter-spacing:.22em;
  text-transform:uppercase; font-variant-numeric:tabular-nums;}
.hero2-progress{position:absolute; z-index:12; left:var(--gap); right:var(--gap);
  bottom:1.05rem; height:1px; background:rgba(250,248,244,.20);}
.hero2-progress span{display:block; height:100%; width:100%;
  background:var(--accent-on-dark); transform:scaleX(0); transform-origin:left;
  will-change:transform;}

/* controles del slider */
.hero2-slider-ui{position:absolute; inset:0; z-index:11; pointer-events:none;}
.hero2-arrow{position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center; pointer-events:auto;
  color:var(--bg); background:rgba(28,25,23,.30);
  border:1px solid rgba(250,248,244,.28); border-radius:var(--r-full);
  opacity:.6; transition:background .3s var(--ease-out), opacity .3s var(--ease-out);}
.hero2-arrow:hover{background:rgba(28,25,23,.6); opacity:1;}
.hero2-arrow svg{width:18px; height:18px;}
.hero2-prev{left:clamp(.8rem,2.5vw,1.8rem);}
.hero2-next{right:clamp(.8rem,2.5vw,1.8rem);}
.hero2-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:2.7rem;
  display:flex; gap:.55rem; pointer-events:auto;}
.hero2-dots button{width:7px; height:7px; border-radius:var(--r-full);
  background:rgba(250,248,244,.34);
  transition:background .3s var(--ease-out), transform .3s var(--ease-out);}
.hero2-dots button.is-on{background:var(--bg); transform:scale(1.35);}

/* tipografía clara sobre tinta (igual criterio que .hero-pin) */
.hero2-pin h1, .hero2-pin .act p.big{color:var(--bg);}
.hero2-pin .hero-sub{color:rgba(250,248,244,.80);}
.hero2-pin .hero-btn{background:var(--bg); color:var(--ink);}
.hero2-pin .hero-btn:hover{background:var(--accent-on-dark); color:var(--ink);}
.hero2-pin .hero-wa{color:var(--bg); border-bottom-color:rgba(250,248,244,.42);}
.hero2-pin .hero-wa:hover{color:var(--bg); border-color:var(--bg);}

@media (max-width:900px){
  .hero2{height:auto;}
  .hero2-pin{position:relative; height:88svh;}
  .hero2-bg{display:none;}
  .hero2-fg{object-fit:cover;}
  .hero2-poster{object-position:50% 28%;}
  .hero2-arrow{display:none;}
  .hero2-dots{bottom:1.9rem;}
}
@media (prefers-reduced-motion:reduce){
  .hero2{height:auto;}
  .hero2-pin{position:relative; height:88svh;}
  .hero2-slide{transition-duration:.01ms;}
}

/* ── qué hero se ve según el ancho ──────────────────────────────
   La portada lleva los dos en el HTML. Escritorio y tablet (>900px):
   el vídeo scrubbeado #top .hero. Móvil (≤900px): el slider #top-m .hero2.
   El JS (HERO_MOBIL, mismo umbral) solo inicializa el que se ve. */
@media (max-width:900px){ .hero{display:none !important;} }
@media (min-width:901px){ .hero2{display:none !important;} }

/* Secciones ocultadas desde el panel (data.layout). Va al final para
   ganar a cualquier display: de la propia sección. */
section[hidden], .marquee[hidden]{display:none !important;}

/* Un vídeo puesto donde iba una foto (portadas de colección, tira de la
   pasarela, editorial outdoor, eventos, testimonios) ocupa el mismo
   hueco que la <img> a la que sustituye. */
.cat-card video{width:100%; height:100%; object-fit:cover; display:block;}
.ed-slide video{width:100%; height:100%; object-fit:cover; display:block;}
.ev-hero-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.ev-t-foto video{width:100%; height:100%; object-fit:cover; display:block;}
.depth-layer video{width:100%; height:132%; margin-top:-16%; object-fit:cover;
  display:block; will-change:transform;}
@media (max-width:900px){ .depth-layer video{height:100%; margin-top:0;} }
@media (max-width:640px){ .ed-slide video{height:118%; position:absolute; top:-9%;} }

/* ══════════════════════════════════════════════════════════════
   POPUP NAVIDAD
   Aparece solo, una vez por sesión, con retraso corto tras cargar.
   Reutiliza los tokens de siempre; el rojo navideño es local al
   popup, no toca el resto de la web. */
.xm{position:fixed; inset:0; z-index:600; display:grid; place-items:center;
  padding:1rem;}
.xm[hidden]{display:none !important;}
.xm-backdrop{position:absolute; inset:0; background:rgba(28,25,23,.66); opacity:0;}
.xm-panel{position:relative; width:min(760px, 100%); max-height:min(92svh, 640px);
  border-radius:var(--r-lg); background:var(--bg); display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  box-shadow:0 40px 120px -40px rgba(28,25,23,.55); overflow:hidden;}
.xm-media{position:relative; background:#151210; overflow:hidden;}
.xm-media video{width:100%; height:100%; object-fit:cover; display:block;}
.xm-tag{position:absolute; left:.8rem; top:.8rem; z-index:3;
  font-size:var(--fs-micro); letter-spacing:.06em; font-weight:500;
  color:var(--ink); background:rgba(250,248,244,.92); border-radius:var(--r-full);
  padding:.4rem .8rem;}
.xm-body{padding:clamp(1.4rem,3.4vw,2.4rem); display:flex; flex-direction:column;
  gap:.6rem; overflow-y:auto;}
.xm-body .eyebrow{color:#B3251E; letter-spacing:.16em; text-transform:uppercase;
  font-size:var(--fs-micro); font-weight:500;}
.xm-body h3{font-size:clamp(1.5rem,3vw,2rem); line-height:1.12;}
.xm-note{color:var(--ink-soft); font-size:var(--fs-sm);}
.xm-btns{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:.6rem;}
.xm-later{background:none; border:0; padding:0; font-size:var(--fs-sm);
  color:var(--ink-mute); text-decoration:underline; text-underline-offset:.2em;
  cursor:pointer; min-height:44px;}
.xm-later:hover{color:var(--ink);}
.xm-close{position:absolute; top:.7rem; right:.7rem; z-index:5; width:44px; height:44px;
  display:grid; place-items:center; background:rgba(250,248,244,.92); border-radius:50%;
  transition:background .3s, color .3s, transform .4s var(--ease-expo);}
.xm-close:hover{background:var(--ink); color:var(--bg); transform:rotate(90deg);}

@media (max-width:720px){
  .xm-panel{grid-template-columns:1fr; grid-template-rows:min(46svh,340px) 1fr;
    max-height:94svh; width:100%;}
}
@supports (corner-shape: squircle){ .xm-panel{corner-shape:squircle;} }