/* María Prohibida · prototipo de rediseño (24-sep-2026)
   Una sola base con dos direcciones: html[data-dir="roja"] y html[data-dir="glitter"].
   Fondo claro siempre; el rojo de marca (#E32A02) es el único color que grita. */

@view-transition { navigation: auto; }

:root{
  --blanco:#fff;
  --hueso:#F6F2EE;
  --tinta:#161212;
  --tinta-2:#433b39;
  --gris:#766d69;
  --linea:#E6DFDA;
  --rojo:#E32A02;
  --rojo-hondo:#C42402;
  --plata:#ECEDEF;

  --display:"Archivo","Arial Narrow",sans-serif;
  --texto:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --italica:"Bodoni Moda","Bodoni 72",Didot,serif;

  --aviso:30px;
  --proto:0px;   /* alto de la barra del prototipo; en producción no existe */
  --cab:64px;
  --g:clamp(16px,3.2vw,44px);
  --max:1480px;
  --curva:cubic-bezier(.22,.8,.2,1);
  --rapida:180ms;
  --media:340ms;

  --logo:var(--rojo);
}
html[data-dir="glitter"]{ --logo:var(--tinta); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font:400 16px/1.55 var(--texto); font-stretch:100%;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- tipografía ---------- */
.disp{
  font-family:var(--display); font-stretch:62%; font-weight:900;
  text-transform:uppercase; line-height:.84; letter-spacing:-.004em; margin:0;
}
/* la cursiva de los títulos en 700 y óptica 12: con la óptica de tamaño grande la raya de la «t» era un hilo
   que desaparecía sobre el rojo y el «tu» no se entendía (25-sep) */
.ital{
  font-family:var(--italica); font-style:italic; font-weight:700; font-variation-settings:"opsz" 12; white-space:nowrap;
  text-transform:none; letter-spacing:-.015em;
}
.eti{
  font:700 14px/1.2 var(--texto); font-stretch:80%;
  text-transform:uppercase; letter-spacing:.1em;
}
@media (max-width:899px){ .eti{ font-size:13px; } }
.titulo{ font-size:clamp(44px,6.4vw,104px); }
/* etiquetas de sección («La colección», «Sin adivinar», «La pasarela»…): David las quiere grandes (25-sep) */
.sec-cab .eti, .col-cab > .eti, .pasa-titulo, .regalo-txt > .eti, .bol-grid .eti{ font-size:clamp(18px,1.9vw,28px); letter-spacing:.07em; }
.bajada{ max-width:34em; color:var(--tinta-2); font-size:clamp(17px,1.3vw,20px); }

/* ---------- botones ---------- */
/* píldora; si trae flecha, la flecha va en un círculo pegado a la derecha (25-sep) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:16px;
  min-height:56px; padding:0 30px; border:1.5px solid var(--tinta); border-radius:999px; background:transparent;
  color:var(--tinta); text-decoration:none; cursor:pointer;
  font:800 16px/1 var(--texto); font-stretch:74%; text-transform:uppercase; letter-spacing:.06em;
  transition:background var(--rapida),color var(--rapida),border-color var(--rapida),transform var(--rapida);
}
.btn:has(> .flecha){ padding-right:8px; }
.btn > .flecha{
  display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--tinta); color:#fff; font-size:18px; font-stretch:100%; letter-spacing:0;
  transition:transform var(--media) var(--curva),background var(--rapida),color var(--rapida);
}
.btn:active{ transform:scale(.98); }
.btn-lleno{ background:var(--tinta); color:#fff; }
.btn-lleno:hover{ background:var(--rojo); border-color:var(--rojo); }
.btn:not(.btn-lleno):not(.btn-blanco):hover{ background:var(--tinta); color:#fff; }
.btn-blanco{ background:#fff; color:var(--rojo); border-color:#fff; }
.btn-blanco:hover{ background:transparent; color:#fff; }
.btn-ancho{ width:100%; position:relative; }
.btn-ancho:has(> .flecha){ padding:0 60px; }
.btn-ancho > .flecha{ position:absolute; right:8px; top:50%; margin-top:-20px; }
.btn-lleno > .flecha{ background:#fff; color:var(--tinta); }
.btn-lleno:hover > .flecha{ color:var(--rojo); }
.btn:not(.btn-lleno):not(.btn-blanco):hover > .flecha{ background:#fff; color:var(--tinta); }
.btn-blanco > .flecha{ background:var(--rojo); color:#fff; }
.btn-blanco:hover > .flecha{ background:#fff; color:var(--rojo); }
.btn:hover > .flecha{ transform:scale(1.08); }
.flecha{ transition:transform var(--rapida) var(--curva); }
.liga:hover .flecha{ transform:translateX(4px); }
.liga{
  display:inline-flex; align-items:center; gap:.4em; text-decoration:none; cursor:pointer;
  background:none; border:0; padding:6px 0; font:700 15px/1 var(--texto); font-stretch:80%;
  text-transform:uppercase; letter-spacing:.08em; border-bottom:1.5px solid currentColor;
}

/* ---------- aviso + cabecera ---------- */
.aviso{
  height:var(--aviso); display:flex; align-items:center; justify-content:center; padding:0 12px;
  background:var(--rojo); color:#fff; font:600 13.5px/1 var(--texto); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden;
}
.aviso span{ overflow:hidden; text-overflow:ellipsis; }
.aviso .corto{ display:none; }
@media (max-width:899px){ .aviso .largo{ display:none; } .aviso .corto{ display:inline; } }
.cab{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linea); transition:transform var(--media) var(--curva);
}
.cab.oculta{ transform:translateY(-101%); }
.cab-in{
  height:var(--cab); max-width:var(--max); margin:0 auto; padding:0 var(--g);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.cab-izq{ display:flex; align-items:center; min-width:0; }
.cab-nav{ display:flex; gap:26px; }
.cab-nav a, .cab-der button, .cab-der .cab-cuenta{
  position:relative; text-decoration:none; background:none; border:0; cursor:pointer; padding:8px 0;
  font:700 14px/1 var(--texto); font-stretch:78%; text-transform:uppercase; letter-spacing:.09em;
}
.cab-nav a::after, .cab-der .cab-talla::after, .cab-cuenta span::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform var(--media) var(--curva);
}
.cab-nav a:hover::after, .cab-der .cab-talla:hover::after{ transform:scaleX(1); }
/* Mi cuenta (29-sep, David no la encontraba): texto junto a «Mi talla» en escritorio; en celular, silueta a la
   izquierda junto al menú (a la derecha no cabía: en 360 px «Bolsa» se partía en dos renglones) */
.cab-cuenta{ display:inline-flex; align-items:center; color:inherit; }
.cab-cuenta span{ position:relative; }
.cab-cuenta:hover span::after{ transform:scaleX(1); }
.cab-cuenta svg{ display:none; width:24px; height:24px; }
.cab-cuenta-movil{ display:none; }
.cab-logo{
  justify-self:center; display:block; height:46px; aspect-ratio:422/299; background:var(--logo);
  -webkit-mask:url(media/wordmark.svg) center/contain no-repeat; mask:url(media/wordmark.svg) center/contain no-repeat;
}
.cab-der{ justify-self:end; display:flex; align-items:center; gap:22px; }
.cab-bolsa b{
  display:inline-grid; place-items:center; min-width:22px; height:22px; margin-left:6px; padding:0 6px;
  border-radius:11px; background:var(--tinta); color:#fff; font-size:12.5px; font-stretch:100%; letter-spacing:0;
}
.cab-bolsa.brinca b{ animation:brinca .5s var(--curva); }
@keyframes brinca{ 0%{transform:scale(1)} 35%{transform:scale(1.35)} 100%{transform:scale(1)} }
.cab-menu{ display:none; width:40px; height:40px; margin-left:-8px; background:none; border:0; cursor:pointer; position:relative; }
.cab-menu span{ position:absolute; left:9px; right:9px; height:2px; background:var(--tinta); transition:transform var(--media) var(--curva); }
.cab-menu span:first-child{ top:15px; } .cab-menu span:last-child{ top:23px; }

@media (max-width:899px){
  :root{ --cab:58px; --aviso:28px; }
  .aviso{ font-size:12.5px; }
  .cab-nav, .cab-talla{ display:none; }
  .cab-der .cab-cuenta{ display:none; }
  .cab-cuenta-movil{ display:inline-flex; flex:none; justify-content:center; width:44px; height:44px; padding:0; margin-left:2px; }
  .cab-cuenta-movil svg{ display:block; }
  .cab-menu{ display:block; }
  .cab-logo{ height:40px; }
}

/* ---------- menú de celular ---------- */
.menu{
  position:fixed; inset:0; z-index:90; background:#fff; display:flex; flex-direction:column;
  padding:calc(var(--aviso) + 8px) var(--g) 28px; transform:translateY(-100%);
  transition:transform 520ms var(--curva); visibility:hidden;
}
.menu.abierto{ transform:none; visibility:visible; }
.menu-top{ display:flex; justify-content:space-between; align-items:center; height:var(--cab); }
.menu-x{ width:44px; height:44px; border:0; background:none; font-size:28px; line-height:1; cursor:pointer; }
.menu nav{ display:flex; flex-direction:column; margin-top:18px; }
.menu nav a{ text-decoration:none; font-size:clamp(48px,14vw,76px); padding:4px 0; }
.menu nav a:nth-child(odd){ color:var(--rojo); }
html[data-dir="glitter"] .menu nav a:nth-child(odd){ color:var(--tinta); }
.menu-pie{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px 22px; }
.menu-pie a{ font:600 14px/1 var(--texto); text-decoration:none; color:var(--tinta-2); }

/* ---------- paneles laterales (bolsa, talla) ---------- */
.velo{
  position:fixed; inset:0; z-index:80; background:rgba(22,18,18,.28); opacity:0; visibility:hidden;
  transition:opacity var(--media) var(--curva),visibility var(--media);
}
.velo.on{ opacity:1; visibility:visible; }
.panel{
  position:fixed; top:0; right:0; bottom:0; z-index:85; width:min(440px,100%); background:#fff;
  display:flex; flex-direction:column; transform:translateX(100%); visibility:hidden;
  transition:transform 460ms var(--curva),visibility 460ms; box-shadow:-18px 0 50px rgba(22,18,18,.10);
}
.panel.on{ transform:none; visibility:visible; }
.panel-cab{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--linea); }
.panel-cab .disp{ font-size:34px; }
.panel-x{ width:40px; height:40px; border:0; background:none; font-size:26px; line-height:1; cursor:pointer; }
.panel-cuerpo{ flex:1; overflow-y:auto; padding:8px 22px; overscroll-behavior:contain; }
.panel-pie{ padding:18px 22px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea); display:grid; gap:10px; }
.bl-it{ display:grid; grid-template-columns:84px 1fr auto; gap:14px; padding:14px 0; border-bottom:1px solid var(--linea); align-items:start; }
.bl-it img{ width:84px; aspect-ratio:4/5; object-fit:cover; background:var(--hueso); }
.bl-it b{ display:block; font-weight:600; line-height:1.3; }
.bl-it small{ display:block; color:var(--gris); font-size:14.5px; margin-top:4px; }
.bl-it .quitar{ margin-top:10px; background:none; border:0; padding:0; font-size:14px; color:var(--gris); text-decoration:underline; cursor:pointer; }
.bl-it.nuevo{ animation:resalta 1.4s var(--curva); }
@keyframes resalta{ 0%{ background:#FDEAE3; } 100%{ background:transparent; } }
.bl-nota{ margin:14px 0 4px; padding:12px 14px; border-radius:14px; background:var(--hueso); font-size:15px; }
.bl-vacia{ padding:40px 0; text-align:center; color:var(--gris); }
.bl-fila{ display:flex; justify-content:space-between; font-size:16px; }
.bl-fila.total{ font-size:20px; font-weight:700; }
.bl-legal{ font-size:13.5px; color:var(--gris); text-align:center; margin:2px 0 0; }

/* ---------- héroe ---------- */
.v{ position:relative; overflow:hidden; background:var(--plata); }
.v video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 280ms ease; }
.v video.on{ opacity:1; }
/* póster fijo del héroe en celular (index.html): se ve antes de que cargue el JS; el video lo reemplaza */
.v > img.v-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-a, .hero-b{ display:none; }
html[data-dir="roja"] .hero-a{ display:grid; }
html[data-dir="glitter"] .hero-b, html[data-dir="mezcla"] .hero-b{ display:block; }
/* mezcla: las pasarelas de glitter de B enmarcadas por el rojo de A */
html[data-dir="mezcla"] .hero-b{ background:var(--rojo); color:#fff; }
html[data-dir="mezcla"] .hero-b h1 .ital{ color:#fff; }
.talla .titulo .ital{ color:var(--rojo); }
/* escritorio: la cursiva sube para quedar centrada con las mayúsculas (su renglón caía hacia abajo) */
@media (min-width:900px){ .hero-b h1 .ital{ position:relative; top:-.12em; } }
html[data-dir="mezcla"] .hero-b .bajada{ color:rgba(255,255,255,.92); }
html[data-dir="mezcla"] .hero-b .btn-lleno{ background:#fff; color:var(--rojo); border-color:#fff; }
html[data-dir="mezcla"] .hero-b .btn-lleno:hover{ background:transparent; color:#fff; }
html[data-dir="mezcla"] .hero-b .btn-lleno > .flecha{ background:var(--rojo); color:#fff; }
html[data-dir="mezcla"] .hero-b .btn-lleno:hover > .flecha{ background:#fff; color:var(--rojo); }
html[data-dir="mezcla"] .hero-b .liga{ color:#fff; }

.hero-a{ grid-template-columns:5fr 7fr; height:calc(100svh - var(--cab) - var(--aviso) - var(--proto)); min-height:600px; max-height:1000px; }
.hero-a .bloque{
  background:var(--rojo); color:#fff; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(24px,3.6vw,56px);
}
.hero-a h1{ font-size:clamp(64px,8.9vw,156px); }
.hero-a h1 .ital{ display:block; font-size:.86em; line-height:.95; margin-top:.04em; }
.hero-a .bajada{ color:rgba(255,255,255,.92); margin:22px 0 28px; }
.hero-a .vids{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.hero-a .v{ background:#A5171B; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.hero-a .liga{ color:#fff; }

.hero-b .tri{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  height:calc(100svh - var(--cab) - var(--aviso) - var(--proto) - 250px); min-height:420px; max-height:820px;
}
.hero-b .banda{
  max-width:var(--max); margin:0 auto; padding:20px var(--g) 26px;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.hero-b h1{ font-size:clamp(56px,7.6vw,132px); }
.hero-b h1 .ital{ color:var(--rojo); font-size:.9em; }
.hero-b .lado{ max-width:340px; padding-bottom:6px; }
.hero-b .bajada{ margin:0 0 16px; }
.hero-movil{ display:none; }

@media (max-width:899px){
  .hero-a{ grid-template-columns:1fr; height:auto; min-height:0; max-height:none; }
  .hero-a .vids, .hero-b .tri{ display:none; }
  .hero-movil{ display:block; aspect-ratio:4/5; max-height:calc(50svh - var(--proto)); width:100%; }
  html[data-dir="roja"] .hero-movil{ background:#A5171B; }
  .hero-a .bloque{ padding:18px var(--g) 24px; }
  .hero-a .bloque > .eti{ display:none; }
  .hero-a h1{ font-size:clamp(56px,17vw,92px); }
  .hero-a .bajada, .hero-b .bajada{ margin:10px 0 18px; font-size:16.5px; }
  /* celular: el botón a todo lo ancho (ya no se parte en dos renglones) y la liga abajo */
  .hero-cta{ flex-direction:column; align-items:stretch; gap:16px; }
  .hero-cta .btn{ width:100%; position:relative; padding:0 60px; }
  .hero-cta .btn > .flecha{ position:absolute; right:8px; top:50%; margin-top:-20px; }
  .hero-cta .liga{ align-self:flex-start; }
  .hero-b .banda{ display:block; padding:16px var(--g) 24px; }
  .hero-b h1{ font-size:clamp(54px,16.6vw,92px); white-space:normal; }
  .hero-b h1 .ital{ display:block; }
  .hero-b .lado{ max-width:none; padding:6px 0 0; }
}

/* ---------- secciones ---------- */
.sec{ padding:clamp(64px,8vw,128px) 0; }
.sec-in{ max-width:var(--max); margin:0 auto; padding:0 var(--g); }
.sec-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(24px,3vw,40px); }
.sec-cab .eti{ color:var(--rojo); margin-bottom:12px; display:block; }
html[data-dir="glitter"] .sec-cab .eti{ color:var(--gris); }

/* ---------- carrusel ---------- */
.carr{ position:relative; }
.carr-pista{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2*var(--g) - 3*16px)/3.4);
  gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:0 var(--g); scroll-padding:0 var(--g); scrollbar-width:none; cursor:grab;
}
.carr-pista::-webkit-scrollbar{ display:none; }
.carr-pista.arrastra{ cursor:grabbing; scroll-snap-type:none; }
.carr-pista.arrastra *{ pointer-events:none; }
.carr-pista > *{ scroll-snap-align:start; }
.carr-ctl{ display:flex; align-items:center; gap:10px; }
.carr-btn{
  width:48px; height:48px; border:1.5px solid var(--tinta); border-radius:50%; background:#fff; cursor:pointer;
  display:grid; place-items:center; font-size:20px; transition:background var(--rapida),color var(--rapida),opacity var(--rapida);
}
.carr-btn:hover{ background:var(--tinta); color:#fff; }
.carr-btn:disabled{ opacity:.25; pointer-events:none; }
.carr-barra{ max-width:var(--max); margin:22px auto 0; padding:0 var(--g); }
.carr-barra div{ height:2px; background:var(--linea); position:relative; overflow:hidden; }
.carr-barra i{ position:absolute; top:0; bottom:0; left:0; background:var(--tinta); transition:transform 120ms linear; transform-origin:left; }
@media (max-width:899px){
  .carr-pista{ grid-auto-columns:64%; gap:10px; }
  .carr-ctl .carr-btn{ display:none; }
}

/* ---------- tarjeta ---------- */
.tj{ position:relative; min-width:0; }
.tj-caja{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--hueso); }
.tj-media{ position:absolute; inset:0; display:block; }
.tj-media img, .tj-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  transition:opacity var(--media) var(--curva),transform 1100ms var(--curva);
}
.tj-media .alt, .tj-media video{ opacity:0; }
.tj-media video.jugando{ opacity:1; }
@media (hover:hover){
  .tj:hover .tj-media .alt{ opacity:1; }
  .tj.con-video:hover .tj-media .alt{ opacity:0; }
  .tj:hover .tj-media img{ transform:scale(1.035); }
}
.tj-chip{
  position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px 7px 10px; border-radius:999px; background:rgba(255,255,255,.92); font:700 12.5px/1 var(--texto); font-stretch:80%;
  text-transform:uppercase; letter-spacing:.1em;
}
.tj-chip::before{ content:""; width:0; height:0; border-left:6px solid var(--rojo); border-top:4px solid transparent; border-bottom:4px solid transparent; }
.tj-add{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:3; height:46px; border:0; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--tinta); font:800 14px/1 var(--texto); font-stretch:74%; text-transform:uppercase; letter-spacing:.08em;
  transform:translateY(14px); opacity:0; transition:opacity var(--media) var(--curva),transform var(--media) var(--curva),background var(--rapida),color var(--rapida);
}
.tj-add:hover{ background:var(--tinta); color:#fff; }
.tj-add.ok{ background:var(--rojo); color:#fff; }
@media (hover:hover){ .tj:hover .tj-add, .tj-add:focus-visible{ opacity:1; transform:none; } }
@media (hover:none){
  .tj-add{ left:auto; right:8px; bottom:8px; width:42px; height:42px; border-radius:50%; opacity:1; transform:none; font-size:0; box-shadow:0 4px 14px rgba(0,0,0,.12); }
  .tj-add::before{ content:"+"; font:400 26px/1 var(--texto); }
  .tj-add.ok::before{ content:"✓"; font-size:18px; }
}
.tj-info{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 1px 0; text-decoration:none; }
.tj-nom{ font-weight:600; font-size:17px; line-height:1.25; }
.tj-pre{ font-size:17px; white-space:nowrap; }
.tj-talla{ margin-top:8px; font:700 13px/1 var(--texto); font-stretch:80%; text-transform:uppercase; letter-spacing:.1em; color:var(--gris); }

/* ---------- mi talla ---------- */
.talla{ background:var(--hueso); }
.talla-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,80px); align-items:start; }
.talla-paso{ margin-bottom:22px; }
.talla-paso .eti{ display:block; margin-bottom:12px; color:var(--gris); font-size:16px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  min-width:60px; height:56px; padding:0 18px; border:1.5px solid var(--tinta); border-radius:999px; background:transparent; cursor:pointer;
  font:800 19px/1 var(--texto); font-stretch:74%; letter-spacing:.03em; transition:background var(--rapida),color var(--rapida);
}
.chip:hover{ background:rgba(22,18,18,.06); }
.chip[aria-pressed="true"]{ background:var(--tinta); color:#fff; }
.talla-res{ min-height:230px; padding:28px; border-radius:24px; background:#fff; border:1.5px solid var(--tinta); display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
.talla-res .grande{ font-size:clamp(88px,11vw,168px); line-height:.8; }
html[data-dir="roja"] .talla-res .grande, html[data-dir="mezcla"] .talla-res .grande{ color:var(--rojo); }
.talla-res p{ margin:0; }
.talla-res p:not(.eti){ font-size:18px; line-height:1.45; }
.talla-mini{ display:flex; gap:6px; }
.talla-mini img{ width:52px; aspect-ratio:4/5; object-fit:cover; background:var(--hueso); }
.panel .talla-grid{ grid-template-columns:1fr; gap:18px; }
.panel .talla-res{ min-height:0; }
@media (max-width:899px){
  .talla-grid{ grid-template-columns:1fr; }
  .chips{ gap:6px; }
  .chip{ min-width:50px; height:52px; padding:0 12px; font-size:18px; }
}

/* ---------- la pasarela ---------- */
.pasa{ position:relative; height:calc(var(--n,6) * 88svh); }
.pasa-fija{ position:sticky; top:0; height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden; }
.pasa-media{ position:relative; overflow:hidden; background:var(--plata); }
html[data-dir="roja"] .pasa-media{ background:#A5171B; }
.pasa-media > *{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  opacity:0; transform:scale(1.05); transition:opacity 650ms var(--curva),transform 1400ms var(--curva);
}
.pasa-media > .on{ opacity:1; transform:none; }
.pasa-info{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--cab) + 20px) clamp(24px,6vw,110px) 40px; }
html[data-dir="roja"] .pasa-info, html[data-dir="mezcla"] .pasa-info{ background:var(--rojo); color:#fff; }
.pasa-cont{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.pasa-cont .barra{ flex:1; max-width:180px; height:2px; background:currentColor; opacity:.25; position:relative; }
.pasa-cont .barra i{ position:absolute; inset:0; background:currentColor; transform-origin:left; transition:transform 400ms var(--curva); }
.pasa-texto{ transition:opacity 280ms ease,transform 420ms var(--curva); }
.pasa-texto.sale{ opacity:0; transform:translateY(18px); }
.pasa-nombre{ font-size:clamp(54px,7vw,124px); }
.pasa-precio{ margin:18px 0 26px; font-size:20px; }
.pasa-precio span{ opacity:.75; margin-left:10px; font-size:15.5px; }
.pasa-acc{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; }
html[data-dir="roja"] .pasa-info .btn-lleno, html[data-dir="mezcla"] .pasa-info .btn-lleno{ background:#fff; color:var(--rojo); border-color:#fff; }
html[data-dir="roja"] .pasa-info .btn-lleno:hover, html[data-dir="mezcla"] .pasa-info .btn-lleno:hover{ background:transparent; color:#fff; }
html[data-dir="mezcla"] .pasa-info .btn-lleno > .flecha{ background:var(--rojo); color:#fff; }
.pasa-titulo{ position:absolute; top:calc(var(--cab) + 18px); left:clamp(24px,6vw,110px); }
@media (max-width:899px){
  .pasa{ height:calc(var(--n,6) * 80svh); }
  .pasa-fija{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .pasa-info{ padding:18px var(--g) calc(20px + env(safe-area-inset-bottom)); }
  .pasa-titulo{ display:none; }
  .pasa-cont{ margin-bottom:12px; }
  .pasa-nombre{ font-size:clamp(42px,12vw,64px); }
  .pasa-precio{ margin:8px 0 14px; font-size:17px; }
}

/* ---------- el detalle ---------- */
.det-fila{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.det a{ display:block; text-decoration:none; }
.det video{ width:100%; aspect-ratio:1; object-fit:cover; background:#fff; border:1px solid var(--linea); }
.det span{ display:block; margin-top:10px; font-weight:600; font-size:16.5px; }
.det small{ color:var(--gris); font-size:14.5px; }
@media (max-width:899px){
  .det-fila{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:62%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 calc(-1 * var(--g)); padding:0 var(--g); }
  .det{ scroll-snap-align:start; }
}

/* ---------- regalo ---------- */
.regalo{ display:grid; grid-template-columns:1fr 1fr; min-height:min(88svh,860px); }
.regalo-foto{ position:relative; overflow:hidden; background:var(--hueso); }
.regalo-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.regalo-txt{ display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,7vw,120px) clamp(24px,6vw,110px); background:var(--hueso); }
html[data-dir="roja"] .regalo-txt, html[data-dir="mezcla"] .regalo-txt{ background:var(--rojo); color:#fff; }
html[data-dir="roja"] .regalo-txt .btn, html[data-dir="mezcla"] .regalo-txt .btn{ border-color:#fff; color:#fff; }
html[data-dir="roja"] .regalo-txt .btn:hover, html[data-dir="mezcla"] .regalo-txt .btn:hover{ background:#fff; color:var(--rojo); }
html[data-dir="mezcla"] .regalo-txt .btn > .flecha{ background:#fff; color:var(--rojo); }
html[data-dir="mezcla"] .regalo-txt .btn:hover > .flecha{ background:var(--rojo); color:#fff; }
.pasos{ list-style:none; margin:28px 0 34px; padding:0; counter-reset:paso; max-width:30em; }
.pasos li{ counter-increment:paso; display:grid; grid-template-columns:52px 1fr; padding:16px 0; font-size:clamp(17px,1.35vw,20px); border-top:1px solid currentColor; border-color:rgba(22,18,18,.14); }
html[data-dir="roja"] .pasos li, html[data-dir="mezcla"] .pasos li{ border-color:rgba(255,255,255,.3); }
.pasos li::before{ content:counter(paso,decimal-leading-zero); font:900 22px/1.3 var(--display); font-stretch:62%; }
@media (max-width:899px){ .regalo{ grid-template-columns:1fr; } .regalo-foto{ aspect-ratio:4/5; } }

/* ---------- confianza ---------- */
.conf{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.conf-fila{ display:grid; grid-template-columns:repeat(4,1fr); }
.conf-it{ display:flex; gap:14px; align-items:center; padding:26px var(--g); }
.conf-it + .conf-it{ border-left:1px solid var(--linea); }
.conf-it svg{ flex:none; width:30px; height:30px; stroke:var(--rojo); }
html[data-dir="glitter"] .conf-it svg{ stroke:var(--tinta); }
.conf-it b{ display:block; font-size:16.5px; }
.conf-it small{ color:var(--gris); font-size:14.5px; }
@media (max-width:899px){
  .conf-fila{ grid-template-columns:1fr 1fr; }
  .conf-it{ padding:18px var(--g); flex-direction:column; align-items:flex-start; gap:8px; }
  .conf-it:nth-child(3){ border-left:0; }
  .conf-it:nth-child(n+3){ border-top:1px solid var(--linea); }
}

/* ---------- boletín ---------- */
.bol-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,5vw,80px); align-items:end; }
.bol-form{ display:flex; border-bottom:2px solid var(--tinta); }
.bol-form input{ flex:1; min-width:0; height:58px; border:0; background:transparent; font:500 18px var(--texto); outline:none; }
.bol-form button{ border:0; background:none; cursor:pointer; font:800 16px/1 var(--texto); font-stretch:72%; text-transform:uppercase; letter-spacing:.08em; padding:0 4px 0 16px; }
.bol-msg{ min-height:22px; margin-top:10px; font-size:15px; color:var(--gris); }
@media (max-width:899px){ .bol-grid{ grid-template-columns:1fr; } }

/* ---------- pie ---------- */
.pie{ padding:clamp(48px,6vw,90px) 0 calc(28px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--linea); }
.pie-marca{
  width:100%; aspect-ratio:422/299; max-height:min(34vw,430px); background:var(--logo);
  -webkit-mask:url(media/wordmark.svg) left center/contain no-repeat; mask:url(media/wordmark.svg) left center/contain no-repeat;
}
.pie-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:clamp(36px,5vw,64px); }
.pie-cols h4{ margin:0 0 12px; }
.pie-cols a{ display:block; text-decoration:none; color:var(--tinta-2); padding:6px 0; font-size:16px; }
.pie-cols a:hover{ color:var(--rojo); }
.pie-legal{ display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:18px; border-top:1px solid var(--linea); font-size:13.5px; color:var(--gris); }
@media (max-width:899px){ .pie-cols{ grid-template-columns:1fr 1fr; } .pie-legal{ flex-direction:column; } }

/* ---------- flotantes: chat + selector de dirección ---------- */
.chat{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:70;
  display:flex; align-items:center; gap:8px; height:48px; padding:0 18px 0 14px; border:0; border-radius:24px; cursor:pointer;
  background:var(--tinta); color:#fff; font:700 13.5px/1 var(--texto); font-stretch:80%; text-transform:uppercase; letter-spacing:.07em;
  box-shadow:0 10px 28px rgba(22,18,18,.22); transition:transform var(--media) var(--curva),opacity var(--media) var(--curva),background var(--rapida);
}
.chat:hover{ background:var(--rojo); transform:translateY(-2px); }
.chat svg{ width:20px; height:20px; }
:root{ --proto:40px; }
html[data-prototipo="0"]{ --proto:0px; }
.proto-barra{
  height:var(--proto); box-sizing:border-box; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; padding:0 12px;
  background:var(--tinta); color:#fff; font:600 12px/1.2 var(--texto);
}
.proto-barra span{ opacity:.7; }
.proto-barra button{
  height:26px; padding:0 12px; border:1px solid rgba(255,255,255,.35); background:none; color:#fff; cursor:pointer;
  font:800 11.5px/1 var(--texto); font-stretch:78%; text-transform:uppercase; letter-spacing:.07em;
}
.proto-barra button[aria-pressed="true"]{ background:#fff; color:var(--tinta); border-color:#fff; }
body.con-barra .chat{ bottom:calc(86px + env(safe-area-inset-bottom)); }
body.en-pasarela .chat{ opacity:0; pointer-events:none; transform:translateY(12px); }
@media (max-width:899px){ .chat{ padding:0 14px; } .chat b{ display:none; } }
/* ficha en celular: el chat no tapa la foto ni la talla XL; sale junto con la barra de compra */
@media (max-width:899px){ body[data-pagina="producto"]:not(.con-barra) .chat{ opacity:0; pointer-events:none; transform:translateY(12px); } }
/* el chat se aparta de botones y campos (mp.js · chatAparte); nace escondido y aparece solo */
body.chat-aparte .chat{ opacity:0; pointer-events:none; transform:translateY(12px); }
/* celular: aire al final para que ni el chat ni la barra de compra se queden sobre los últimos enlaces del pie */
@media (max-width:899px){
  .pie{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  body[data-pagina="producto"] .pie{ padding-bottom:calc(152px + env(safe-area-inset-bottom)); }
}

.vuela{ position:fixed; z-index:95; object-fit:cover; pointer-events:none; transition:all 650ms cubic-bezier(.5,0,.3,1); }

/* ---------- colección ---------- */
.col-cab{ padding-top:clamp(36px,5vw,72px); padding-bottom:clamp(18px,2vw,28px); }
.col-cab .eti{ display:block; margin-bottom:12px; } /* el acento de la Ó ya no roza la línea de arriba */
.col-cab .titulo{ font-size:clamp(56px,9vw,150px); }
.col-cab .fila{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.filtros{
  position:sticky; top:var(--cab); z-index:40; background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  transition:top var(--media) var(--curva);
}
body.cab-oculta .filtros{ top:0; }
.filtros-in{ max-width:var(--max); margin:0 auto; padding:10px var(--g); display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; }
.f-grupo{ display:flex; align-items:center; gap:6px; }
.f-grupo .eti{ color:var(--gris); margin-right:4px; font-size:13px; }
.f-chip{
  height:44px; padding:0 18px; border:1.5px solid var(--linea); border-radius:999px; background:#fff; cursor:pointer;
  font:700 15px/1 var(--texto); font-stretch:78%; text-transform:uppercase; letter-spacing:.06em; transition:border-color var(--rapida),background var(--rapida),color var(--rapida);
}
.f-chip:hover{ border-color:var(--tinta); }
.f-chip[aria-pressed="true"]{ background:var(--tinta); border-color:var(--tinta); color:#fff; }
.f-mitalla{ margin-left:auto; }
.f-copa{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px 0 18px; border-radius:999px; background:var(--rojo); color:#fff; border:0; cursor:pointer; font:700 15px/1 var(--texto); font-stretch:78%; text-transform:uppercase; letter-spacing:.06em; }
.f-orden{ height:44px; border:1.5px solid var(--linea); border-radius:999px; background:#fff; padding:0 14px; font:600 15px var(--texto); color:var(--tinta); }
.rejilla{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 16px; padding:28px 0 clamp(64px,8vw,120px); }
.rejilla-vacia{ grid-column:1/-1; padding:60px 0; text-align:center; color:var(--gris); }
@media (max-width:1100px){ .rejilla{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:899px){
  .filtros-in{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:8px var(--g); }
  .filtros-in::-webkit-scrollbar{ display:none; }
  .f-grupo{ flex:none; } .f-mitalla{ margin-left:0; flex:none; }
  .rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 10px; }
  .tj-nom, .tj-pre{ font-size:15.5px; }
  .tj-info{ flex-direction:column; gap:3px; }
}

/* ---------- ficha ---------- */
.ficha{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); max-width:var(--max); margin:0 auto; padding:0 var(--g); }
.gal{ display:grid; gap:10px; padding-top:10px; }
.gal-it{ position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--hueso); }
.gal-it img, .gal-it video{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.gal-it .tj-chip{ top:14px; left:14px; }
.gal-cuenta{ display:none; }
.info{ position:sticky; top:calc(var(--cab) + 24px); align-self:start; padding:28px 0 60px; }
body.cab-oculta .info{ top:24px; }
.migas{ display:flex; gap:8px; font-size:14.5px; color:var(--gris); margin-bottom:18px; }
.migas a{ text-decoration:none; } .migas a:hover{ color:var(--tinta); }
.info h1{ font-size:clamp(46px,4.6vw,84px); }
.info .precio{ margin:14px 0 24px; font-size:24px; font-weight:600; }
.info .precio small{ display:block; margin-top:4px; font-size:14.5px; font-weight:400; color:var(--gris); }
.talla-box{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:18px 0; margin-bottom:18px; }
.talla-box .fila{ display:flex; align-items:center; gap:16px; }
.talla-letra{ display:grid; place-items:center; width:56px; height:56px; background:var(--tinta); color:#fff; font:900 26px/1 var(--display); font-stretch:62%; }
html[data-dir="roja"] .talla-letra{ background:var(--rojo); }
.talla-box p{ margin:0; font-size:16px; }
.talla-box p b{ font-weight:700; }
.talla-box .quien{ margin-top:12px; font-size:15.5px; color:var(--tinta-2); }
.talla-box .quien b{ color:var(--tinta); }
.acc{ border-bottom:1px solid var(--linea); }
.acc summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:18px 0; font:800 15.5px/1 var(--texto); font-stretch:76%; text-transform:uppercase; letter-spacing:.08em; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:"+"; font:400 22px/1 var(--texto); transition:transform var(--media) var(--curva); }
.acc[open] summary::after{ transform:rotate(45deg); }
.acc .acc-in{ padding:0 0 18px; font-size:16.5px; color:var(--tinta-2); }
.acc ul{ margin:0; padding-left:18px; }
.acc li{ margin:4px 0; }
.avisame{ margin:14px 0 6px; }
.avisame form{ display:none; margin-top:10px; }
.avisame.on form{ display:flex; border-bottom:1.5px solid var(--tinta); }
.avisame input{ flex:1; min-width:0; height:46px; border:0; background:transparent; font:500 16px var(--texto); outline:none; }
.avisame button[type=submit]{ border:0; background:none; font:800 14px/1 var(--texto); font-stretch:74%; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.mini-conf{ display:grid; gap:8px; margin:20px 0 8px; font-size:15px; color:var(--tinta-2); }
.mini-conf span::before{ content:"—"; color:var(--rojo); margin-right:8px; }
.barra-compra{
  position:fixed; left:0; right:0; bottom:0; z-index:65; display:none; align-items:center; gap:14px;
  padding:10px var(--g) calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--linea);
  transform:translateY(100%); transition:transform var(--media) var(--curva);
}
.barra-compra.on{ transform:none; }
.barra-compra div{ flex:1; min-width:0; }
.barra-compra b{ display:block; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barra-compra span{ font-size:14.5px; color:var(--gris); }
.barra-compra .btn{ min-height:48px; padding:0 22px; }
@media (max-width:899px){
  .ficha{ grid-template-columns:1fr; padding:0; gap:0; }
  .gal{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:0; padding:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .gal::-webkit-scrollbar{ display:none; }
  .gal-it{ scroll-snap-align:start; }
  .gal-envoltura{ position:relative; }
  .gal-cuenta{ display:block; position:absolute; right:12px; bottom:12px; z-index:3; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.92); font:700 13px/1 var(--texto); letter-spacing:.06em; }
  .info{ position:static; padding:20px var(--g) 40px; }
  .barra-compra{ display:flex; }
}

/* ---------- aparición al hacer scroll ---------- */
.js [data-rev]{ opacity:0; transform:translateY(26px); transition:opacity 800ms var(--curva),transform 1000ms var(--curva); transition-delay:var(--d,0ms); }
.js [data-rev="foto"]{ transform:scale(1.07); }
.js [data-rev="linea"]{ transform:translateY(38%); clip-path:inset(0 0 100% 0); transition:transform 900ms var(--curva),clip-path 900ms var(--curva),opacity 300ms; }
.js [data-rev].visto{ opacity:1; transform:none; clip-path:inset(-20% -5% -20% -5%); }

/* ---------- transición entre páginas ---------- */
::view-transition-old(root), ::view-transition-new(root){ animation-duration:260ms; }
::view-transition-group(pieza){ animation-duration:520ms; animation-timing-function:cubic-bezier(.22,.8,.2,1); }

/* ---------- scroll suave (Lenis) ---------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms !important; transition-duration:1ms !important; }
  .js [data-rev]{ opacity:1; transform:none; clip-path:none; }
}

/* ---------- tallas reales (proforma): tarjeta, panel rápido y ficha ---------- */
.tj-talla s{ opacity:.4; }
.tj-rapido{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:3; display:flex; gap:6px; align-items:center; padding:6px 6px 6px 12px;
  border-radius:999px; background:rgba(255,255,255,.96); opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity var(--media) var(--curva),transform var(--media) var(--curva);
}
.tj-rapido::before{ content:"Tu talla"; margin-right:auto; padding-left:4px; font:700 12px/1 var(--texto); font-stretch:80%; text-transform:uppercase; letter-spacing:.1em; color:var(--gris); }
.tj-rapido button{ min-width:40px; height:38px; padding:0 10px; border:1.5px solid var(--tinta); border-radius:999px; background:#fff; cursor:pointer; font:800 14.5px/1 var(--texto); font-stretch:74%; transition:background var(--rapida),color var(--rapida); }
.tj-rapido button:hover{ background:var(--tinta); color:#fff; }
.tj-rapido button:disabled{ opacity:.3; text-decoration:line-through; cursor:default; background:#fff; color:var(--tinta); }
@media (hover:hover){
  .tj:hover .tj-rapido, .tj-rapido:focus-within{ opacity:1; transform:none; pointer-events:auto; }
  .tj-add{ display:none; }
}
@media (hover:none){ .tj-rapido{ display:none; } }

.rp-pieza{ display:flex; gap:14px; align-items:center; margin-top:14px; }
.rp-pieza img{ width:72px; aspect-ratio:4/5; object-fit:cover; background:var(--hueso); }
.rp-pieza b{ display:block; font-weight:600; }
.rp-pieza span{ color:var(--tinta-2); }
.rp-tallas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.rp-t{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px 16px; border:1.5px solid var(--tinta); border-radius:18px; background:#fff; cursor:pointer; text-align:left; transition:background var(--rapida),color var(--rapida); }
.rp-t b{ font:900 28px/1 var(--display); font-stretch:62%; }
.rp-t small{ font-size:13.5px; color:var(--gris); line-height:1.3; }
.rp-t i{ position:absolute; top:10px; right:10px; padding:5px 8px; border-radius:999px; background:var(--rojo); color:#fff; font:700 11px/1 var(--texto); font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
.rp-t:hover{ background:var(--tinta); color:#fff; }
.rp-t:hover small{ color:rgba(255,255,255,.75); }
.rp-t:disabled{ opacity:.35; cursor:default; background:#fff; color:var(--tinta); }
.rp-nota{ margin:16px 0 0; font-size:15.5px; color:var(--tinta-2); }

.tb-cab{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.tb-cab .eti{ color:var(--gris); }
.tallas-sel{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.ts{
  height:64px; border:1.5px solid var(--linea); border-radius:999px; background:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font:800 20px/1 var(--texto); font-stretch:74%; transition:border-color var(--rapida),background var(--rapida),color var(--rapida);
}
.ts small{ font:600 13px/1 var(--texto); font-stretch:92%; color:var(--rojo); }
.ts:hover{ border-color:var(--tinta); }
.ts[aria-checked="true"]{ background:var(--tinta); border-color:var(--tinta); color:#fff; }
.ts[aria-checked="true"] small{ color:#fff; }
.ts:disabled{ color:var(--gris); background:var(--hueso); border-color:var(--hueso); cursor:default; }
.ts:disabled small{ color:var(--gris); }
.talla-box .quien:empty{ display:none; }
#btn-agregar.pide{ animation:pide .45s; }
@keyframes pide{ 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }
@media (max-width:899px){
  .proto-barra{ gap:6px; padding:0 8px; }
  .proto-barra span{ display:none; }
  .proto-barra button{ padding:0 10px; font-size:11px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Páginas de apoyo con el diseño Mezcla (pago, gracias, guía de tallas,
   envíos y cambios, mi cuenta). Se agrega al final de assets/mp.css al armar
   el sitio. Esas páginas traen estilos propios que usaban las variables del
   diseño anterior: aquí se vuelven alias de las nuevas.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --tinta-dim: var(--gris); --borde: var(--linea); --fondo: #fff;
  --vino: var(--rojo); --vino-oscuro: var(--tinta); --marfil: var(--hueso); --crema: var(--hueso);
}
body[data-shell="mezcla"] .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.doc{ max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.doc h1, .serif{
  font-family: var(--display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  line-height: .9; letter-spacing: -.004em;
}
.doc h1{ font-size: clamp(44px, 7vw, 84px); margin: 0 0 14px; }
.doc h2{ font-size: clamp(28px, 3.6vw, 40px); margin: 38px 0 10px; }
.doc h3{ font-size: 22px; margin: 24px 0 8px; }
.doc p, .doc li{ color: var(--tinta-2); font-size: 17.5px; line-height: 1.65; }
.doc ul, .doc ol{ padding-left: 20px; }
.doc a{ color: var(--tinta); }
.sub{ color: var(--tinta-2); font-size: 17.5px; }
.secmark{ font: 700 14px/1.2 var(--texto); font-stretch: 80%; text-transform: uppercase; letter-spacing: .12em; color: var(--rojo); margin-bottom: 12px; }
.cta{
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px;
  border: 1.5px solid var(--tinta); background: var(--tinta); color: #fff; text-decoration: none; cursor: pointer;
  font: 800 16px/1 var(--texto); font-stretch: 74%; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px;
  transition: background var(--rapida), color var(--rapida), border-color var(--rapida);
}
.cta:hover{ background: var(--rojo); border-color: var(--rojo); color: #fff; }
.cta.ghost{ background: transparent; color: var(--tinta); }
.cta.ghost:hover{ background: var(--tinta); color: #fff; border-color: var(--tinta); }
.cta:disabled{ opacity: .5; cursor: default; }
/* dentro de .doc los enlaces van en tinta: sin esto el botón lleno quedaba negro sobre negro */
.doc a.cta{ color: #fff; }
.doc a.cta.ghost{ color: var(--tinta); }
.doc a.cta.ghost:hover{ color: #fff; }
.alert-tallas{ padding: 14px 16px; background: var(--hueso); border-left: 3px solid var(--rojo); margin: 18px 0; font-size: 16.5px; line-height: 1.6; border-radius: 0 14px 14px 0; }
.tbl-scroll{ overflow-x: auto; margin: 10px 0 18px; border: 1px solid var(--linea); border-radius: 14px; }
.doc table{ border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td{ padding: 9px 12px; border-bottom: 1px solid var(--linea); text-align: left; white-space: nowrap; }
.doc th{ font: 700 12.5px/1.2 var(--texto); font-stretch: 85%; text-transform: uppercase; letter-spacing: .07em; color: var(--gris); background: var(--hueso); }
.doc tr:last-child td{ border-bottom: 0; }

/* avisos cortos de assets/store.js (MP.toast) */
#toast{
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 96; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px; background: var(--tinta); color: #fff; font-size: 15px; opacity: 0; pointer-events: none;
  transform: translate(-50%, 20px); transition: opacity var(--media) var(--curva), transform var(--media) var(--curva);
}
#toast.on{ opacity: 1; transform: translate(-50%, 0); }
#toast img{ width: 36px; height: 44px; object-fit: cover; }

/* pago y mi cuenta: campos redondeados como los botones; 16px para que el iPhone no haga zoom al escribir */
body[data-shell="mezcla"] .campo input, body[data-shell="mezcla"] .campo textarea,
body[data-shell="mezcla"] .mc-form input{ border-radius: 14px; border-color: var(--linea); font-size: 16px; }
body[data-shell="mezcla"] .campo input:focus, body[data-shell="mezcla"] .campo textarea:focus,
body[data-shell="mezcla"] .mc-form input:focus{ border-color: var(--tinta); }
body[data-shell="mezcla"] .metodo{ border-radius: 18px; }
body[data-shell="mezcla"] .co-resumen, body[data-shell="mezcla"] .mc-card, body[data-shell="mezcla"] .ped{ border-radius: 22px; }
body[data-shell="mezcla"] .co-item img{ border-radius: 0; }
body[data-shell="mezcla"] .metodo.on{ border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
body[data-shell="mezcla"] .co-resumen{ top: calc(var(--cab) + 24px); }
body[data-shell="mezcla"] .error-msg{ color: var(--rojo); }

/* ---------- ventana de 10 % en la primera compra (P.salida, 29-sep) ---------- */
.panel-salida .panel-cuerpo{ padding:28px 22px calc(28px + env(safe-area-inset-bottom)); }
.salida-tit{
  margin:0 0 14px; font-family:var(--display); font-stretch:62%; font-weight:900; text-transform:uppercase;
  font-size:clamp(44px,5vw,56px); line-height:.9; letter-spacing:-.004em;
}
.salida-tit .ital{ display:block; margin-top:.08em; color:var(--rojo); }
.panel-salida .bajada{ margin:0 0 24px; }
.salida-form{ display:grid; gap:10px; }
.salida-form[hidden], .salida-codigo[hidden]{ display:none; }
.salida-form .eti{ margin-bottom:2px; }
.salida-form input{
  height:56px; padding:0 16px; border:1.5px solid var(--tinta); border-radius:14px; background:#fff;
  font:500 17px var(--texto); color:var(--tinta);
}
.salida-form input:focus{ outline:none; border-color:var(--rojo); }
.salida-codigo{ display:grid; gap:10px; margin-top:6px; padding:22px 18px; border:2px dashed var(--rojo); text-align:center; }
.salida-codigo .eti{ margin:0; color:var(--gris); }
.salida-cod{ margin:0; font:800 32px/1.1 var(--texto); letter-spacing:.08em; color:var(--tinta); user-select:all; }
.salida-nota{ margin:0 0 6px; color:var(--tinta-2); font-size:17px; }
.salida-legal{ margin:22px 0 0; font-size:14px; color:var(--gris); }
.salida-no{
  margin-top:10px; padding:12px 0; border:0; background:none; cursor:pointer;
  color:var(--tinta-2); font:600 16px var(--texto); text-decoration:underline; text-underline-offset:3px;
}
.pie-legal a{ color:inherit; }

/* fecha tentativa de llegada bajo el precio (30-sep-2026) */
.info .llegada{ margin:6px 0 16px; font-size:15px; line-height:1.45; color:var(--tinta-2); }
.info .llegada b{ color:var(--tinta); font-weight:700; }

/* página de error (404.html, 30-sep-2026) */
.e404{ padding-bottom:clamp(24px,4vw,48px); }
.e404 > .eti{ color:var(--rojo); margin:0 0 14px; }
.e404-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 22px; }
/* .doc a pinta las ligas de tinta y le ganaba al botón lleno: negro sobre negro */
.e404 .btn-lleno{ color:#fff; }
.e404-ayuda{ font-size:16px; }
.e404-piezas{ border-top:1px solid rgba(22,18,18,.12); padding-top:clamp(28px,4vw,48px); }
.e404-piezas > .eti{ font-size:clamp(18px,1.9vw,28px); letter-spacing:.07em; }
.e404-piezas .rejilla{ padding-top:20px; }
@media (max-width:899px){ .e404-acciones .btn{ flex:1 1 100%; } }