/* Visual evolution preview, 2026-09-12 */

:root{
  --editorial-gap:clamp(72px,10vw,150px);
}

body{
  background:#09090a;
}

/* Hero: the current garments become the main visual. */
.hero{
  min-height:100dvh;
  isolation:isolate;
  background:#09090a url("fotos/cold-signal-environment.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,5,6,.98) 0%,rgba(5,5,6,.84) 38%,rgba(5,5,6,.22) 70%,rgba(5,5,6,.58) 100%),
    linear-gradient(0deg,rgba(5,5,6,.88),transparent 38%);
}
.hero-video{opacity:.2;mix-blend-mode:screen}
.hero-poster{display:none}
#heroMonograma{opacity:.42;filter:grayscale(1)}
.hero-grid{
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  align-items:center;
  /* El heroe ya pone `min-height:100dvh` y este grid vive DENTRO de su
     padding (82 arriba + 38 abajo), asi que repetir el 100dvh aqui hacia un
     heroe de 1,14 pantallas: 170 px que empujaban los atajos por debajo del
     pliegue. Descontando el padding cuadra en una pantalla justa. */
  min-height:calc(100dvh - 120px);
  padding-top:70px;
  padding-bottom:34px;
}
.hero-copy{position:relative;z-index:4;max-width:680px}
/* El maximo estaba en 8.7rem y a partir de ~1750px de ancho la palabra
   FUTURE ya no cabia en su columna —que deja de crecer en 505px— y el
   navegador partia la E a una tercera linea. 8.1rem es el tamano mas grande
   que cabe entero en esa columna; el `nowrap` de abajo es el cinturon. */
.hero-title{font-size:clamp(4.7rem,8.2vw,7.7rem);letter-spacing:-.065em}
.hero-title .ln{white-space:nowrap}
.hero-sub{max-width:500px;font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.55}
.hero-sub span{display:block}
.hero-cta{margin-top:30px}
.scroll-cue{display:none}

.hero-products{
  position:relative;
  z-index:3;
  align-self:stretch;
  min-height:610px;
  pointer-events:none;
}
.hero-product{
  position:absolute;
  margin:0;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  pointer-events:auto;          /* el contenedor los tiene apagados */
  perspective:760px;            /* espacio 3D para el aviso de abajo */
  filter:drop-shadow(0 35px 45px rgba(0,0,0,.72));
  transition:transform .55s cubic-bezier(.16,1,.3,1),filter .45s ease;
}
.hero-product:hover{filter:drop-shadow(0 40px 55px rgba(255,61,31,.38)) brightness(1.08)}
.hero-product:active{transform:scale(.97)}
.hero-product:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:12px}
.hero-product span i{
  font-style:normal;
  margin-left:7px;
  color:var(--bone);
}
.hero-product img{display:block;width:100%;height:100%;object-fit:contain}
.hero-product span{
  position:absolute;
  left:50%;
  bottom:6%;
  transform:translateX(-50%);
  color:rgba(242,239,230,.72);
  font-size:9px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* EL AVISO DE DEBAJO DE CADA CONJUNTO.
   Es la broma de la portada: te dice que NO pulses justo donde quieres que
   pulses. Va en dos alturas: la advertencia en gris, y «no hagas click aqui»
   girando en 3D hacia el visitante, que es lo que le hace mirar.
   `aria-hidden` en el HTML: quien navega con lector de pantalla ya oye
   «Ver el Conjunto Thorn Signal, 70 euros» y la ironia solo estorbaria. */
.hero-product .hp-aviso{
  position:absolute;
  left:50%;
  bottom:6%;
  /* cae por debajo del nombre: se baja su propia altura y 6px mas */
  transform:translate(-50%,calc(100% + 6px));
  width:max-content;
  max-width:min(250px,96%);
  perspective:420px;            /* la profundidad la pone el padre */
  color:rgba(242,239,230,.5);
  font-size:8.5px;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  text-wrap:balance;
}
.hero-product .hp-aviso b{
  display:block;
  margin-top:3px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.14em;
  transform-origin:50% 0;
  animation:avisoGira 6.2s cubic-bezier(.45,0,.2,1) infinite;
  transition:transform .4s cubic-bezier(.16,1,.3,1),color .3s ease;
}
/* Se asoma y se retira, como una chapa colgada: nunca llega a ponerse de
   canto, asi que se lee en todo el recorrido. */
@keyframes avisoGira{
  0%,66%,100%{transform:rotateX(0) translateZ(0)}
  20%{transform:rotateX(-30deg) translateZ(20px)}
  42%{transform:rotateX(12deg) translateZ(7px)}
}
/* Al pasar por encima se para el vaiven y salta hacia delante: el 3D deja de
   ser adorno y se convierte en la senal de «si, es aqui». */
.hero-product:hover .hp-aviso b,
.hero-product:focus-visible .hp-aviso b{
  animation:none;
  transform:translateZ(30px);
  color:var(--bone);
}
.hero-product:hover .hp-aviso{color:rgba(242,239,230,.78)}
.hero-product--main{
  z-index:1;
  width:min(48vw,600px);
  height:92%;
  right:-2%;
  top:2%;
  animation:productFloat 7s ease-in-out infinite;
}
.hero-product--support{
  /* Mas a la izquierda y algo mas pequeno que el conjunto principal: son dos
     conjuntos completos (sudadera + pantalon), y con el encuadre anterior el
     negro se metia debajo del gris y los dos rotulos se tocaban. Asi queda
     detras, en segundo plano, y cada nombre tiene su sitio. */
  /* Por encima del conjunto principal: sus cajas se solapan y la foto es
     casi toda transparente, asi que sin esto el rectangulo invisible del
     conjunto gris se tragaba los toques sobre la sudadera negra y abria la
     ficha equivocada (pasaba en tablet). La caja del negro es mas pequena y
     cae en la esquina donde el gris no tiene tela, asi que no le roba nada. */
  z-index:2;
  width:min(23vw,300px);
  height:52%;
  left:-20%;
  bottom:0;
  opacity:.86;
  /* Flota igual que la principal pero medio ciclo despues, para que las dos
     no suban y bajen a la vez como un ascensor. */
  animation:productFloat 8.4s ease-in-out -4.2s infinite;
}
@keyframes productFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(2deg)}
  50%{transform:translate3d(0,-13px,0) rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){
  .hero-product--main,.hero-product--support{animation:none}
  .hero-product .hp-aviso b{animation:none;transform:none}
}

.proof-strip{
  min-height:72px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  border-top:1px solid rgba(242,239,230,.12);
  border-bottom:1px solid rgba(242,239,230,.12);
  background:#0d0d0f;
  color:rgba(242,239,230,.76);
  text-align:center;
  text-transform:uppercase;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
}
.proof-strip span+span{border-left:1px solid rgba(242,239,230,.12)}

/* Mystery Boxes preview, placed before the main store. */
.mystery{
  position:relative;
  overflow:hidden;
  padding:clamp(90px,11vw,160px) 0;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,61,31,.12),transparent 34%),
    #09090a;
  border-bottom:1px solid rgba(242,239,230,.1);
}
.mystery::before{
  content:"?";
  position:absolute;
  right:-.04em;
  top:-.28em;
  color:rgba(242,239,230,.018);
  font:900 min(70vw,920px)/1 var(--font-display);
  pointer-events:none;
}
.mystery-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.42fr 1fr;
  align-items:end;
  gap:30px;
  margin-bottom:clamp(48px,7vw,90px);
}
.mystery-head>span{
  color:var(--accent);
  font-size:10px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding-bottom:12px;
}
.mystery-head h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(4rem,10vw,10rem);
  font-weight:900;
  line-height:.76;
  letter-spacing:-.065em;
  text-transform:uppercase;
}
.mystery-head h2 i{
  color:transparent;
  font-style:normal;
  -webkit-text-stroke:1.5px var(--bone);
}
.mystery-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.92fr 1.12fr .96fr;
  gap:14px;
  align-items:center;
}
.mystery-card{
  position:relative;
  min-height:560px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:24px;
  border:1px solid rgba(242,239,230,.12);
  background:linear-gradient(155deg,#17171a,#0c0c0e);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease;
}
.mystery-card--m{
  min-height:620px;
  border-color:rgba(255,61,31,.52);
  background:linear-gradient(155deg,#1d1716,#0c0c0e 58%);
  box-shadow:0 38px 90px -60px rgba(255,61,31,.9);
}
.mystery-card--xl{background:linear-gradient(155deg,#24120f,#0c0c0e 60%)}
.mystery-card:hover{transform:translateY(-8px);border-color:rgba(242,239,230,.34)}
.mystery-meta,.mystery-foot{position:relative;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.mystery-meta span,.mystery-meta b{
  font-size:9px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.mystery-meta b{color:var(--muted)}
/* `max-width:70%` no sujeta una palabra larga: TRANSMISSION no cabia, se
   salia de su caja y se montaba encima del precio. Con `min-width:0` el
   titulo si puede encoger, el precio se queda fijo y, si algun dia vuelve a
   haber un nombre kilometrico, se parte en vez de invadir. */
.mystery-foot h3{
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.55rem,2.8vw,2.8rem);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.mystery-foot strong{flex:none;font:900 clamp(1.55rem,2.8vw,2.8rem)/.9 var(--font-display);white-space:nowrap}
.mystery-card>em{
  position:absolute;
  right:18px;
  top:54px;
  z-index:6;
  padding:8px 10px;
  border-radius:99px;
  background:var(--accent);
  color:#fff;
  font-size:8px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.mystery-orbit{
  position:absolute;
  inset:64px 0 68px;
  z-index:2;
  perspective:800px;
  transform-style:preserve-3d;
  animation:mysteryOrbit 8s linear infinite;
}
.mystery-orbit i{
  position:absolute;
  left:50%;
  top:50%;
  width:70%;
  aspect-ratio:1;
  border:1px solid rgba(255,61,31,.22);
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(68deg);
  box-shadow:0 0 60px rgba(255,61,31,.07),inset 0 0 45px rgba(255,61,31,.05);
}
.mystery-q{
  position:absolute;
  left:50%;
  top:50%;
  width:1em;
  color:var(--bone);
  font:900 clamp(7rem,12vw,12rem)/1 var(--font-display);
  text-align:center;
  text-shadow:0 18px 40px rgba(0,0,0,.78);
  transform-style:preserve-3d;
  backface-visibility:visible;
}
.mystery-q--1{transform:translate(-50%,-50%) rotateY(0deg) translateZ(142px)}
.mystery-q--2{transform:translate(-50%,-50%) rotateY(120deg) translateZ(142px)}
.mystery-q--3{transform:translate(-50%,-50%) rotateY(240deg) translateZ(142px)}
.mystery-card--s .mystery-orbit{animation-duration:9.5s}
.mystery-card--m .mystery-orbit{animation-duration:7.5s;animation-direction:reverse}
.mystery-card--xl .mystery-orbit{animation-duration:6.5s}
@keyframes mysteryOrbit{
  from{transform:rotateX(-8deg) rotateY(0deg)}
  to{transform:rotateX(-8deg) rotateY(360deg)}
}
.mystery-note{
  position:relative;
  z-index:2;
  margin:30px auto 0;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-align:center;
  text-transform:uppercase;
}

/* Store: fewer columns give each garment more presence. */
#tienda{padding-top:var(--editorial-gap)}
#tienda .sec-head{margin-bottom:32px}
#tienda .lead{max-width:620px}
#grid.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 18px}
.card{background:#111113;border-color:rgba(242,239,230,.1)}
.card-media{aspect-ratio:4/4.65;background:linear-gradient(155deg,#17171a,#0d0d0f)}
.card:hover{border-color:rgba(255,61,31,.48)}
.drop-intro{
  max-width:980px;
  margin-left:auto;
  margin-right:0;
  padding:clamp(34px,5vw,70px);
  background:linear-gradient(145deg,#151517,#0c0c0e);
  border-left:2px solid var(--accent);
}

/* Editorial archive: real brand imagery already available in the project. */
.archive{
  overflow:hidden;
  padding:var(--editorial-gap) 0;
  background:#d9d7d0;
  color:#0b0b0d;
}
.archive-head{
  display:grid;
  grid-template-columns:minmax(170px,.35fr) 1fr;
  align-items:end;
  gap:40px;
  margin-bottom:clamp(38px,6vw,82px);
}
.archive-head p{
  margin:0 0 10px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.archive-head h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(3rem,7.4vw,8.2rem);
  line-height:.83;
  letter-spacing:-.06em;
  text-transform:uppercase;
}
.archive-head h2 span{color:transparent;-webkit-text-stroke:1.5px #0b0b0d}
.archive-grid{
  width:min(1500px,calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns:1.35fr .8fr .8fr;
  gap:14px;
  align-items:end;
}
.archive-shot{position:relative;margin:0;overflow:hidden;background:#151517}
.archive-shot--wide{transform:translateY(-4vw)}
.archive-shot img{
  display:block;
  width:100%;
  height:clamp(430px,57vw,780px);
  object-fit:cover;
  object-position:center top;
  filter:saturate(.75) contrast(1.06);
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.archive-shot:not(.archive-shot--wide) img{height:clamp(360px,43vw,620px)}
.archive-shot:hover img{transform:scale(1.025);filter:saturate(1) contrast(1.03)}
.archive-shot figcaption{
  position:absolute;
  left:18px;
  bottom:16px;
  padding:9px 12px;
  background:rgba(8,8,9,.82);
  color:#f2efe6;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Keep long sections quieter and easier to read. */
.sec{padding-top:var(--editorial-gap);padding-bottom:var(--editorial-gap)}
.pillars{grid-template-columns:1.2fr .9fr .9fr;gap:14px}
.pillar{background:#0d0d0f}
.manifesto{margin-top:clamp(80px,11vw,150px)}
.cto-grid{gap:14px}
.cto-card{background:#0d0d0f}

/* The offer waits for interest and no longer blocks the whole site. */
.pop{place-items:end;padding:22px;pointer-events:none}
.pop-velo{display:none}
.pop-caja{
  pointer-events:auto;
  width:min(390px,100%);
  padding:28px 24px 22px;
  text-align:left;
  box-shadow:0 35px 90px -28px rgba(0,0,0,.92);
}
.pop-marca{width:58px;margin:0 0 16px}
.pop-caja h2{font-size:1.4rem;max-width:300px}
.pop-caja p{font-size:.88rem;line-height:1.5}
.pop-cta{align-items:stretch;margin-top:18px}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:.9fr 1.1fr}
  /* En tablet la columna se estrecha: el conjunto negro no se esconde (es
     una de las dos compras de la portada), solo se aparta y encoge. */
  .hero-product--support{width:min(30vw,250px);height:46%;left:-12%;opacity:.8}
  #grid.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:700px){
  .hero{min-height:100dvh;background-position:62% center}
  .hero::after{background:linear-gradient(0deg,rgba(5,5,6,.98) 0%,rgba(5,5,6,.72) 52%,rgba(5,5,6,.34) 100%)}
  .hero-grid{
    display:block;
    min-height:100dvh;
    padding-top:96px;
    padding-bottom:40px;
  }
  .hero-copy{position:relative;z-index:5;width:100%}
  .hero-title{font-size:clamp(3.65rem,18vw,4.65rem);line-height:.8;max-width:100%}
  .hero-sub{max-width:300px;margin-top:24px;font-size:.98rem}
  .hero-products{position:absolute;inset:82px -58px auto 42%;height:52vh;min-height:390px;z-index:2;opacity:.72}
  .hero-product--main{width:100%;height:100%;right:0;top:0}
  .hero-product span{display:none}
  .hero-cta{margin-top:25px}
  .proof-strip{grid-template-columns:1fr;gap:0;padding:6px 18px}
  .proof-strip span{padding:10px 0}
  .proof-strip span+span{border-left:0;border-top:1px solid rgba(242,239,230,.1)}
  .mystery{padding:82px 0}
  .mystery-head{display:block;margin-bottom:42px}
  .mystery-head>span{display:block;margin-bottom:22px;padding:0}
  .mystery-head h2{font-size:clamp(4rem,20vw,5.3rem);line-height:.78}
  .mystery-grid{display:flex;width:100%;padding:0 18px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}
  .mystery-card,.mystery-card--m{flex:0 0 84vw;min-height:540px;scroll-snap-align:center}
  .mystery-q{font-size:9rem}
  .mystery-q--1{transform:translate(-50%,-50%) rotateY(0deg) translateZ(105px)}
  .mystery-q--2{transform:translate(-50%,-50%) rotateY(120deg) translateZ(105px)}
  .mystery-q--3{transform:translate(-50%,-50%) rotateY(240deg) translateZ(105px)}
  #grid.grid{gap:22px 10px}
  .archive-head{display:block}
  .archive-head p{margin-bottom:22px}
  .archive-head h2{font-size:clamp(3rem,15vw,5rem);line-height:.88}
  .archive-grid{display:flex;width:100%;padding:0 18px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}
  .archive-shot,.archive-shot--wide{flex:0 0 82vw;transform:none;scroll-snap-align:center}
  .archive-shot img,.archive-shot:not(.archive-shot--wide) img{height:68vh;min-height:480px}
  .pillars{grid-template-columns:1fr}
  .pop{padding:0;align-items:end}
  .pop-caja{width:100%;border-left:0;border-right:0;border-bottom:0;border-radius:18px 18px 0 0;padding:25px 20px 18px}
  .pop-marca{display:none}
  .pop-caja h2{font-size:1.25rem;margin-top:0;padding-right:36px}
  .pop-caja p{margin-top:10px}
  .pop-cta{margin-top:15px}
}

@media (prefers-reduced-motion:reduce){
  .hero-product--main{animation:none}
  .archive-shot img{transition:none}
  .mystery-orbit{animation:none}
}

/* Two anonymous product silhouettes, beneath the orbit. */
.mystery-card{cursor:pointer;min-height:690px}
.mystery-card--m{min-height:740px}
.mystery-scene{position:absolute;inset:0;pointer-events:none}
.mystery-shadows{position:absolute;inset:95px 10px 210px;overflow:hidden}
.mystery-shadows img{position:absolute;width:70%;height:100%;object-fit:contain;filter:brightness(0);opacity:.65;transform:rotate(-13deg)}
.mystery-shadows img+img{right:0;transform:rotate(14deg)}
.mystery-scene .mystery-orbit{inset:75px 0 215px}
.mystery-foot{margin-top:auto;padding-top:370px}
.mystery-purchase{position:relative;z-index:6;margin-top:22px}
.mystery-purchase p{font-size:12px;color:#bab8b3;line-height:1.8;margin:0 0 14px}
.mystery-purchase b{display:block;color:var(--bone)}
.mystery-purchase .btn{width:100%;font-size:9px;padding:18px 10px}
.mystery-purchase small{display:block;text-align:center;color:#bab8b3;margin-top:12px}
#mArt .mystery-scene .mystery-orbit,.card-media .mystery-scene .mystery-orbit{inset:15% 0}
#mArt .mystery-shadows,.card-media .mystery-shadows{inset:12% 5%}
@media(max-width:700px){.mystery-card,.mystery-card--m{min-height:690px}.mystery-foot{padding-top:355px}}


/* =========================================================================
   MOVIL — pasada de optimizacion
   -------------------------------------------------------------------------
   Medido en un iPhone de 390x844 con la pagina real, no a ojo. Lo que se
   arregla aqui, en orden de gravedad:

     1. La prenda del heroe se montaba encima del titular y del subtitulo, y
        se salia 58 px por la derecha. Ahora baja al pie, detras del texto.
     2. El heroe ocupaba una pantalla entera con el 40 % inferior vacio.
     3. Las tarjetas Mystery median 690 px con el precio y el boton fuera de
        la pantalla: habia que hacer scroll dentro de la tarjeta para saber
        cuanto costaba.
     4. La nota de debajo se salia por los dos lados, sin margen.
     5. Los carruseles no tenian `scroll-padding-inline`, asi que el
        scroll-snap se alineaba al borde del contenedor ignorando el padding
        y la primera tarjeta aparecia cortada.

   Va al final del archivo a proposito: misma especificidad que los bloques
   de arriba, asi que gana por orden y no hace falta ensuciar con !important.
   ========================================================================= */
@media (max-width:700px){

  /* --- 1 y 2. HEROE ------------------------------------------------------
     El texto manda. La prenda pasa a ser fondo: mas abajo, mas pequena, mas
     apagada y por detras (z-index 1 contra el 5 del texto). Y el contenido
     se centra en vertical, que es lo que quita el hueco muerto de abajo. */
  /* `min-height:100dvh` estaba puesto en .hero Y en .hero-grid, y el grid
     vive DENTRO del padding del hero: 82 + 844 + 38 = 964 px. O sea que el
     heroe media 1,14 pantallas y siempre sobraba una banda negra por abajo.
     El alto de pantalla ya lo garantiza .hero; aqui sobra. */
  .hero-grid{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    /* el padding del hero son 82+38: se descuentan aqui para que el grid
       llene justo su caja y ni sobre ni falte pantalla */
    min-height:calc(100dvh - 120px);
    padding-top:16px;
    padding-bottom:22px;
  }
  /* LAS DOS PRENDAS, EN LA MITAD DE ABAJO.
     Arriba viven el titular y el monograma; aqui abajo estaba el hueco muerto
     que obligaba a scrollear pantalla y media para ver una prenda. Con los
     conjuntos puestos ahi, lo primero que se ve al entrar ya es algo que se
     puede comprar de un toque. */
  .hero-products{
    display:block;
    position:absolute;
    /* Suben 26px y ganan alto: antes quedaba media pantalla de hormigon
       vacio entre el boton y la primera prenda, que es justo lo que le
       hacia pensar que la portada estaba rota. */
    inset:auto 0 26px 0;
    height:54vh;
    min-height:372px;
    z-index:3;
    opacity:1;
  }
  /* Los dos conjuntos van pegados a los bordes pero SIN salirse: el recorte
     de la foto ya trae aire alrededor, asi que con 0 basta. Con `left:-5%`
     la sudadera negra se cortaba por la izquierda en pantallas de 390px. */
  .hero-product--main{width:58%;height:100%;right:0;top:0}
  .hero-product--support{display:block;width:50%;height:80%;left:0;bottom:0;opacity:.94}
  /* El rotulo vuelve: con el precio al lado deja de ser un adorno y pasa a
     decir lo unico que hace falta saber antes de tocar. */
  /* LOS DOS ROTULOS EN UN MOVIL.
     Centrados no caben: las dos prendas estan una al lado de la otra y los
     avisos, que ocupan tres lineas, se montaban uno encima del otro y el de
     la izquierda se salia de la pantalla. Asi que cada rotulo se pega a SU
     borde —el negro a la izquierda, el gris a la derecha— y entre los dos
     queda un pasillo limpio. */
  .hero-product span{
    display:block;
    /* sube para dejarle sitio al aviso, que cuelga justo debajo */
    bottom:34px;
    font-size:8.5px;
    letter-spacing:.16em;
  }
  .hero-product span i{margin-left:5px}
  .hero-product .hp-aviso{
    bottom:34px;
    font-size:7.5px;
    line-height:1.5;
    letter-spacing:.08em;
  }
  .hero-product .hp-aviso b{margin-top:2px;letter-spacing:.1em}

  .hero-product--main span{left:auto;right:22px;transform:none;text-align:right}
  .hero-product--main .hp-aviso{
    left:auto;
    right:22px;
    max-width:min(168px,41vw);
    transform:translate(0,calc(100% + 6px));
    text-align:right;
  }
  .hero-product--support span{left:24px;transform:none;text-align:left}
  .hero-product--support .hp-aviso{
    left:24px;
    max-width:min(162px,41vw);
    transform:translate(0,calc(100% + 6px));
    text-align:left;
  }

  /* EL MONOGRAMA NF DEJA DE SER FONDO.
     En escritorio es un 3D tenue detras del texto (opacidad .62, en gris).
     Aqui se convierte en LA pieza: su propia caja encima del titular, a todo
     color y a plena opacidad.

     No hay canvas nuevo ni contexto WebGL nuevo: es el MISMO que ya existia,
     solo cambia su caja, y `ajusta()` de hero3d.js recalcula el encuadre a
     partir de ella. Un movil no aguanta dos contextos WebGL vivos, asi que se
     reaprovecha en vez de anadir otro.

     Va ENCIMA del titular y no al costado porque al costado no cabe: a 390 px
     de ancho «FUTURE» llega hasta el 70 % del viewport y el logo acababa por
     detras de las letras. Encima se lee entero y ademas puede ser grande.

     Se gira con el dedo: el canvas lleva `touch-action:pan-y`, asi que el
     arrastre horizontal gira la pieza y el vertical sigue bajando la pagina. */
  #heroMonograma{
    /* «FUTURE» acaba en el pixel 247 (20 de margen + 227 de palabra), asi
       que la caja del logo empieza en el 258 y sobresale 6 px por la
       derecha: cabe entera, sin comerse el titular ni salirse de la
       pantalla. Si se toca el tamano del titular hay que rehacer esta
       cuenta. */
    inset:140px -6px auto auto;
    width:clamp(96px,32vw,130px);
    aspect-ratio:1;
    height:auto;
    z-index:4;
    filter:none;
    opacity:0;
  }
  #heroMonograma[data-estado="listo"]{opacity:1}
  /* 14,4vw = 56 px en un movil de 390. «FUTURE» mide 4,05 em, o sea 227 px,
     y deja libres los ~100 px de la derecha donde vive el logo. Si se agranda
     el titular, el logo se le echa encima. */
  .hero-title{font-size:clamp(2.85rem,14.4vw,3.6rem);line-height:.82}
  /* 30ch es lo que cabe en dos lineas comodas a este tamano */
  .hero-sub{max-width:30ch;margin-top:20px;font-size:.95rem}
  .hero-cta{margin-top:22px}

  /* --- 3. MYSTERY --------------------------------------------------------
     La tarjeta baja de 690 a 500 px y el hueco sobre el precio de 355 a 236.
     Con eso el nombre, el ahorro y el boton entran en la primera pantalla de
     la tarjeta. La orbita y las siluetas se recolocan para no quedar
     apretadas contra el pie. */
  .mystery{padding:64px 0}
  .mystery-head{margin-bottom:30px}
  .mystery-head>span{margin-bottom:16px}
  .mystery-head h2{font-size:clamp(2.9rem,14.5vw,3.9rem);line-height:.82}
  .mystery-card,.mystery-card--m{min-height:500px;padding:20px}
  .mystery-foot{padding-top:236px}
  .mystery-scene .mystery-orbit{inset:54px 0 186px}
  .mystery-shadows{inset:66px 8px 180px}
  .mystery-q{font-size:6.2rem}
  .mystery-q--1{transform:translate(-50%,-50%) rotateY(0deg)   translateZ(78px)}
  .mystery-q--2{transform:translate(-50%,-50%) rotateY(120deg) translateZ(78px)}
  .mystery-q--3{transform:translate(-50%,-50%) rotateY(240deg) translateZ(78px)}
  .mystery-foot h3{font-size:1.45rem}
  .mystery-foot strong{font-size:1.45rem}
  .mystery-card>em{top:46px;right:14px}

  /* --- 4. la nota se salia por los dos lados ---------------------------- */
  .mystery-note{padding:0 20px;margin-top:22px;line-height:1.7}

  /* --- 5. carruseles: que la primera tarjeta no salga cortada ----------- */
  .mystery-grid,.archive-grid{
    scroll-padding-inline:18px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .mystery-grid::-webkit-scrollbar,.archive-grid::-webkit-scrollbar{display:none}

  /* El archivo ocupaba 68vh por foto: media pantalla por imagen decorativa. */
  .archive{padding:66px 0}
  .archive-head{margin-bottom:26px}
  .archive-head h2{font-size:clamp(2.6rem,13vw,4rem)}
  .archive-shot img,.archive-shot:not(.archive-shot--wide) img{height:46vh;min-height:320px}

  /* Aire entre secciones: 150 px arriba y abajo en un movil es una pantalla
     entera de nada. 56 px siguen separando sin obligar a scrollear en vacio. */
  :root{--editorial-gap:clamp(56px,9vw,150px)}
  #tienda .sec-head{margin-bottom:22px}
}

/* La tira de tallas ya tenia su degradado de «sigue» y su aire a la derecha,
   pero le faltaba lo mismo que a los filtros: sin `scroll-padding-inline` el
   scroll-snap se alinea al borde del contenedor e ignora el padding, asi que
   la primera talla nace medio metida debajo del borde. */
@media (hover:none){
  .sizes{scroll-padding-inline:10px 26px}
}


}