/* TIENDA DE ROPA · la web pública (resources/views/public/ropa). Diseño: Mockups/Tienda ropa/handoff («Alisson Studio»).
   Los colores llegan en variables desde Ropa::paleta (siempre con contraste AA): --ink (lo oscuro) y su letra --ink-t,
   --bg (la página), --soft (las tarjetas claras), --line y --line2 (las rayas), --mute (letra suave), --text2 (párrafos),
   --acc (palabras en color), --muted y --lined (letra suave y rayas sobre lo oscuro).
   Letras: Urbanist (títulos) y DM Sans (texto), servidas por el propio sitio (public/comun/fuentes).
   «Detener animaciones» pone html[data-quieto]: todo se queda quieto (también los videos, en ropa.js). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:'Urbanist','DM Sans',sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.02}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saltar{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--ink-t);padding:12px 18px;border-radius:0 0 12px 12px;font-weight:700;text-decoration:none}
.saltar:focus{top:0}
main{display:block;outline:none}
.envoltura{width:100%;max-width:1520px;margin:0 auto;padding:0 clamp(16px,2.8vw,40px)}
.envoltura--angosta{max-width:900px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Piezas comunes ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;font:700 11px/1.2 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.kicker--rayas::before,.kicker--rayas::after{content:'';width:28px;height:1px;background:currentColor}
.kicker--mute{color:var(--mute);font-weight:800;letter-spacing:.16em}
.kicker--claro{color:var(--muted)}
.h1{font-size:clamp(46px,6.6vw,108px);line-height:1}
.h2{font-size:clamp(38px,4.4vw,68px)}
.tit em{font-style:normal;font-weight:400;color:var(--acc)}
.fina{font-weight:400}
.lead{font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--text2)}
.seccion{padding:clamp(44px,5vw,88px) 0 0}
.seccion--corta{padding-top:clamp(32px,3.6vw,56px)}
.seccion--pagina{padding:clamp(20px,2.4vw,36px) 0 clamp(48px,5vw,80px)}
.cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
.cabeza--centro{flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:clamp(28px,3vw,44px)}
.cabeza--centro .kicker{margin:0}
.cabeza__texto{max-width:460px;font-size:15px;line-height:1.6;color:var(--text2);text-wrap:balance}
.ver-todo{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-underline-offset:5px;padding:8px 0}
.ver-todo:hover{color:var(--acc)}
.ruta{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mute);margin-bottom:12px}
.ruta a{color:var(--mute);text-underline-offset:3px}
.ruta strong{color:var(--ink);font-weight:600}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:1.5px solid transparent;font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,transform .25s,border-color .25s}
.boton--ink{background:var(--ink);color:var(--ink-t)}
.boton--ink:hover{background:var(--ink2)}
.boton--ink:disabled{opacity:.55;cursor:not-allowed}
.boton--linea{border-color:var(--ink);color:var(--ink);background:transparent}
.boton--linea:hover{background:var(--ink);color:var(--ink-t)}
.boton--grande{min-height:56px}
.boton--chico{min-height:42px;padding:0 18px;font-size:11px}
.boton--ancho{width:100%}
.boton--wa{background:#25d366;color:#0b2e17;letter-spacing:.04em;text-transform:none;font-size:14px}
.boton--wa:hover{transform:translateY(-2px)}
.boton--wa-linea{border-color:#25d366;color:#0f6b36;background:transparent;width:100%;margin-top:10px}
.boton--wa-linea:hover{background:#e9fbef}
.boton-wa-redondo{flex:none;width:56px;height:56px;border-radius:50%;background:#25d366;color:#0b2e17;display:grid;place-items:center;transition:transform .25s}
.boton-wa-redondo:hover{transform:translateY(-2px)}

.chip{position:absolute;top:10px;left:10px;z-index:2;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--ink-t);font:800 10px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.chip--acc{background:var(--acc-f);color:var(--acc-t)}
.chip--oferta{background:#a3271f;color:#fff}
.chip--agotado{background:#fff;color:#5a2a2a;box-shadow:inset 0 0 0 1.5px #5a2a2a}
.chip--video{left:auto;right:10px;background:rgba(26,24,22,.62);color:#fff}
.chip--vidrio{top:12px;left:12px;background:rgba(26,24,22,.58);color:#fff;backdrop-filter:blur(6px)}
.chip--punto{top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;padding:7px 11px}
.chip--punto::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:punto 1.2s infinite}
.ficha .chip,.ficha__arriba .chip{position:static}

/* ---------- Fotos y videos ---------- */
.medio{position:absolute;inset:0;display:block;overflow:hidden;background:var(--soft)}
.medio__archivo{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.medio--vacio{background:linear-gradient(135deg,var(--soft),var(--line2))}

/* ---------- Cabecera ---------- */
.cab{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.barra{position:relative;display:flex;align-items:center;height:34px;background:var(--ink);color:var(--ink-t);overflow:hidden}
.barra__pista{flex:1;overflow:hidden}
.barra__cinta{display:flex;width:max-content;animation:cinta 44s linear infinite}
.barra__item{display:flex;align-items:center;gap:28px;padding:0 14px;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.barra__item::after{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}
.barra__pausa{flex:none;display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;border:0;border-left:1px solid var(--lined);background:var(--ink);color:var(--ink-t);font:700 11px/1 'DM Sans',sans-serif;cursor:pointer}
.barra__pausa span[data-pausa-ico]{font-size:9px}
.cab__fila{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;padding:8px clamp(10px,2.8vw,40px)}
.cab__menu{width:44px;height:44px;border:0;background:transparent;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 10px;cursor:pointer}
.cab__menu span{display:block;height:1.6px;background:var(--ink)}
.cab__menu span:last-child{width:65%}
.cab__deptos{display:none}
.marca{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;text-decoration:none}
.marca__logo{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.marca__logo img{width:100%;height:100%;object-fit:contain}
html[data-logo="s"] .marca__logo{width:28px;height:28px}
html[data-logo="l"] .marca__logo{width:44px;height:44px}
.marca__nombre{font:700 19px/1 'Urbanist',sans-serif;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab__der{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.cab__der .buscador,.cab__link{display:none}
.cab__link{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:8px 0}
.cab__link:hover{color:var(--acc)}
.buscador{position:relative;display:flex;align-items:center}
.buscador input{width:230px;height:44px;border:1px solid var(--line2);background:#fff;padding:0 46px 0 18px;border-radius:999px;font-size:14px;outline:none}
.buscador input:focus-visible{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.buscador button{position:absolute;right:4px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer}
.bolsa{position:relative;display:inline-flex;align-items:center;gap:10px;height:44px;min-width:44px;justify-content:center;border-radius:999px;text-decoration:none;font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.bolsa__txt{display:none}
.bolsa__n{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--ink-t);display:grid;place-items:center;font-size:10px;letter-spacing:0}
.bolsa__n.cero{display:none}
@media (min-width:1200px){
  .cab__fila{grid-template-columns:1fr auto 1fr;padding:14px clamp(16px,2.8vw,40px)}
  .cab__menu{display:none}
  .cab__deptos{display:flex;flex-wrap:nowrap;gap:4px 22px;font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
  .cab__deptos a{text-decoration:none;padding:8px 0;border-bottom:1.5px solid transparent;transition:border-color .3s}
  .cab__deptos a:hover,.cab__deptos a[aria-current]{border-bottom-color:currentColor}
  .cab__deptos .es-oferta{color:#a3271f}
  .marca__nombre{font-size:24px;letter-spacing:.04em}
  .cab__der{gap:20px}
  .cab__der .buscador,.cab__link{display:flex}
  .bolsa{background:var(--ink);color:var(--ink-t);padding:0 8px 0 18px}
  .bolsa__ico{display:none}
  .bolsa__txt{display:inline}
  .bolsa__n{position:static;background:var(--bg);color:var(--ink);min-width:22px;height:22px}
}
@media (min-width:1200px) and (max-width:1399px){.cab__deptos{gap:4px 16px}.cab__der{gap:14px}.cab__der .buscador input{width:200px}}

/* Menú del celular */
.menu-lateral{position:fixed;inset:0;z-index:60}
.menu-lateral[hidden]{display:none}
.menu-lateral__velo{position:absolute;inset:0;border:0;background:rgba(20,12,16,.45);cursor:pointer}
.menu-lateral__panel{position:absolute;left:0;top:0;bottom:0;width:min(86vw,360px);background:var(--bg);padding:16px 18px 32px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;animation:entraIzq .35s cubic-bezier(.2,.7,.1,1)}
.menu-lateral__cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:700 18px 'Urbanist',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.menu-lateral__cerrar{width:44px;height:44px;border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer}
.menu-lateral__panel>a{padding:13px 4px;border-bottom:1px solid var(--line);text-decoration:none;font:600 17px 'DM Sans',sans-serif}
.menu-lateral__panel>a[aria-current]{color:var(--acc)}
.menu-lateral__sub{padding-left:18px!important;font-size:15px!important;color:var(--text2)}
.buscador--menu{margin-bottom:10px}
.buscador--menu input{width:100%}

/* ---------- Portada ---------- */
.portada{padding:clamp(24px,3vw,44px) 0 0}
.portada__texto{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(16px,1.8vw,24px);padding:clamp(8px,1.6vw,24px) clamp(16px,2.8vw,40px) clamp(24px,2.8vw,40px)}
.portada__texto .kicker{margin:0;animation:sube 0.9s cubic-bezier(.2,.7,.1,1) both}
.portada__titulo{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.22em;font-size:clamp(56px,8.6vw,156px);line-height:.98;letter-spacing:-.03em}
.sube{display:block;overflow:hidden;padding-bottom:.06em}
.sube__p{display:inline-block;animation:palabra 1.1s var(--d,0s) cubic-bezier(.2,.7,.1,1) both}
.sube__p.fina{color:var(--acc)}
.portada__lead{max-width:470px;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--text2);text-wrap:balance;animation:sube 1s .35s cubic-bezier(.2,.7,.1,1) both}
.portada__botones{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;animation:sube 1s .45s cubic-bezier(.2,.7,.1,1) both}

/* Carruseles (portada y redes): se deslizan con el dedo y tienen flechas que dicen «hay más». */
.carrusel{position:relative}
.carrusel__pista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 clamp(16px,2.8vw,40px);scroll-padding:0 clamp(16px,2.8vw,40px)}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista>li{scroll-snap-align:start}
.carrusel__flecha{position:absolute;top:50%;z-index:5;width:46px;height:46px;margin-top:-23px;border:0;border-radius:50%;background:color-mix(in srgb,var(--bg) 94%,transparent);color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 26px -10px rgba(0,0,0,.45);cursor:pointer;transition:transform .2s}
.carrusel__flecha:hover{transform:scale(1.06)}
.carrusel__flecha--ant{left:clamp(6px,1.4vw,22px)}
.carrusel__flecha--sig{right:clamp(6px,1.4vw,22px)}
.carrusel__flecha[hidden]{display:none}
/* 23-oct (Kevin): en el celular y la tableta se desliza con el dedo, sin flechas; en la computadora las flechas van
   AFUERA de los videos (en su propio margen), nunca encima. */
@media (max-width:899px),(hover:none){.carrusel__flecha{display:none!important}}
@media (min-width:900px) and (hover:hover){
  .carrusel{padding-inline:62px}
  .carrusel .carrusel__pista{padding-inline:0;scroll-padding:0}
  .carrusel__flecha--ant{left:4px}
  .carrusel__flecha--sig{right:4px}
}
.tira{position:relative;flex:0 0 74%;aspect-ratio:9/16;overflow:hidden;border-radius:6px;background:var(--ink2);animation:sube 1.1s calc(.2s + var(--i,0)*.12s) cubic-bezier(.2,.7,.1,1) both}
.tira__boton{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-radius:999px;padding:8px 8px 8px 16px;text-decoration:none;transition:background .25s}
.tira__boton:hover{background:#fff}
.tira__nombre{font-weight:600;font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tira__precio{flex:none;background:var(--ink);color:var(--ink-t);border-radius:999px;padding:8px 12px;font-weight:700;font-size:12px}
@media (min-width:640px){.tira{flex-basis:42%}}
@media (min-width:1000px){.tira{flex-basis:calc(25% - 9px)}}

/* ---------- Departamentos (mosaico) ---------- */
.mosaico{display:grid;gap:clamp(8px,1vw,14px);grid-template-columns:1fr 1fr;grid-auto-rows:clamp(210px,30vw,280px)}
.mosaico__tarjeta{position:relative;border-radius:18px;overflow:hidden;background:var(--ink2)}
.mosaico__tarjeta:first-child{grid-column:1/-1;grid-row:span 2}
.mosaico--1 .mosaico__tarjeta:first-child{grid-row:span 2}
.mosaico--2 .mosaico__tarjeta:nth-child(2),.mosaico--4 .mosaico__tarjeta:nth-child(4){grid-column:1/-1}
.mosaico__tarjeta>a{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.mosaico__tarjeta .medio__archivo{transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.mosaico__tarjeta:hover .medio__archivo{transform:scale(1.07)}
.mosaico__velo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.7));pointer-events:none}
.mosaico__pie{position:absolute;z-index:2;left:clamp(14px,1.6vw,24px);right:clamp(12px,1.4vw,20px);bottom:clamp(14px,1.6vw,22px);display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.mosaico__pie>span:first-child{display:flex;flex-direction:column;gap:6px;min-width:0}
.mosaico__pie small{font-size:12px;font-weight:700}
.mosaico__pie b{font:700 clamp(22px,3vw,44px)/1.02 'Urbanist',sans-serif;letter-spacing:-.025em;overflow-wrap:anywhere}
.mosaico__tarjeta:first-child .mosaico__pie b{font-size:clamp(40px,5vw,84px)}
.mosaico__flecha{flex:none;width:clamp(34px,3vw,44px);height:clamp(34px,3vw,44px);border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:transform .3s}
.mosaico__tarjeta:hover .mosaico__flecha{transform:translateX(4px)}
@media (min-width:900px){
  .mosaico{grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:clamp(220px,19vw,300px)}
  .mosaico__tarjeta:first-child{grid-column:1;grid-row:span 2}
  .mosaico--1{grid-template-columns:1fr}
  .mosaico--2{grid-template-columns:1.4fr 1fr}
  .mosaico--2 .mosaico__tarjeta:nth-child(2){grid-column:2;grid-row:span 2}
  .mosaico--3 .mosaico__tarjeta:nth-child(2),.mosaico--3 .mosaico__tarjeta:nth-child(3){grid-column:span 2}
  .mosaico--4 .mosaico__tarjeta:nth-child(4){grid-column:span 2}
}

/* ---------- Pastillas (compra por prenda, categorías, filtros) ---------- */
.pastillas{display:flex;flex-wrap:wrap;gap:8px}
.pastillas--fila{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:14px 0}
.pastillas--fila::-webkit-scrollbar{display:none}
.pastilla{flex:none;display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;border:1px solid var(--line2);background:transparent;color:var(--ink);padding:12px 20px;border-radius:999px;font:600 14px/1.2 'DM Sans',sans-serif;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.pastilla small{font-size:11px;opacity:.7}
.pastilla:hover,.pastilla[aria-current],.pastilla[aria-pressed="true"]{background:var(--ink);color:var(--ink-t);border-color:var(--ink)}
.pastilla--oscura{border-color:var(--lined);color:var(--ink-t);padding:10px 18px;font-size:12px;font-weight:700;letter-spacing:.06em}
.pastilla--oscura:hover,.pastilla--oscura[aria-pressed="true"]{background:var(--ink-t);color:var(--ink);border-color:var(--ink-t)}

/* ---------- Tarjetas de prenda ---------- */
.rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.4vw,36px) clamp(10px,1.2vw,16px)}
@media (min-width:700px){.rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tarjeta{position:relative;display:flex;flex-direction:column;gap:10px}
.tarjeta__enlace{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.tarjeta__foto{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:6px;background:var(--soft);transition:transform .4s cubic-bezier(.2,.7,.1,1)}
.tarjeta__foto .medio__archivo{transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.tarjeta:hover .tarjeta__foto{transform:translateY(-4px)}
.tarjeta:hover .medio__archivo{transform:scale(1.06)}
.tarjeta--agotada .tarjeta__foto{filter:grayscale(.6)}
.tarjeta__info{display:flex;flex-direction:column;gap:8px;padding:0 2px}
.tarjeta__cat{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.tarjeta__nombre{font-size:14px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.tarjeta__precio{display:flex;gap:8px;align-items:baseline}
.tarjeta__precio b{font-size:15px;font-weight:800}
.tarjeta__precio s{font-size:13px;color:var(--mute)}
.tarjeta__consultar{font-size:13px!important;font-weight:700!important;color:var(--text2)}
.tarjeta__colores{display:flex;gap:6px;align-items:center;padding:0 2px}
.tarjeta__colores i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.tarjeta__colores small{font-size:11px;color:var(--mute);font-weight:700}

/* ---------- Estudio de color ---------- */
.estudio{display:grid;align-items:center;background:var(--soft);border-radius:28px;overflow:hidden}
.estudio__foto{position:relative;display:flex;justify-content:center;align-items:center;padding:clamp(28px,3.6vw,56px)}
.estudio__halo{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--halo) 0,transparent 68%);opacity:.6;transition:background .8s ease}
.estudio__marco{position:relative;width:min(100%,360px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--line);box-shadow:0 40px 80px -40px rgba(0,0,0,.55);animation:flota 7s ease-in-out infinite}
.estudio__capa{position:absolute;inset:0;animation:aparece .6s ease both}
.estudio__capa[hidden]{display:none}
.estudio__etiqueta{position:absolute;left:58%;top:58%;z-index:3;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);color:var(--ink);border-radius:999px;padding:6px 14px 6px 6px;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.estudio__etiqueta i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background .5s}
.estudio__datos{padding:clamp(8px,3.6vw,64px) clamp(20px,3.6vw,64px) clamp(32px,3.6vw,64px);display:flex;flex-direction:column;gap:22px;max-width:580px}
.estudio__datos .kicker{margin:0;font-weight:800;letter-spacing:.16em}
.estudio__titulo{font-size:clamp(48px,5.6vw,92px);line-height:.98}
.estudio__titulo a{text-decoration:none}
.estudio__texto{font-size:16px;line-height:1.6;color:var(--text2)}
@media (min-width:860px){.estudio{grid-template-columns:1fr 1fr}}

/* ---------- Elegir color, talla y cantidad ---------- */
.elegir{display:flex;flex-direction:column;gap:20px}
.elegir__grupo{border:0;margin:0;padding:0;min-width:0}
.elegir__grupo[hidden]{display:none}
.elegir__fila{display:flex;justify-content:space-between;align-items:baseline;width:100%;padding:0 0 10px;margin-bottom:12px;border-bottom:1px solid var(--line2);float:left}
.elegir__fila+*{clear:both}
.elegir__rot{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.elegir__valor{font:600 22px/1 'Urbanist',sans-serif;letter-spacing:-.02em}
.elegir__guia{font-size:13px;font-weight:600;text-underline-offset:3px}
.colores{display:flex;flex-wrap:wrap;gap:14px 16px;padding:4px}
.color{position:relative;cursor:pointer}
.color input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.color__circulo{display:block;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);transition:box-shadow .3s,transform .35s cubic-bezier(.2,.7,.1,1)}
.color:hover .color__circulo{transform:translateY(-3px)}
.color input:checked+.color__circulo{box-shadow:0 0 0 3px var(--soft),0 0 0 4.5px var(--ink);transform:scale(1.04)}
.color input:focus-visible+.color__circulo{outline:3px solid var(--acc);outline-offset:6px}
.ficha .color input:checked+.color__circulo{box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px var(--ink)}
.tallas{display:flex;flex-wrap:wrap;gap:6px}
.talla{position:relative}
.talla input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.talla span{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:#fff;font-weight:700;font-size:14px;transition:all .2s;cursor:pointer}
.talla input:checked+span{background:var(--ink);color:var(--ink-t);border-color:var(--ink)}
.talla input:focus-visible+span{outline:3px solid var(--acc);outline-offset:2px}
.talla input:disabled+span{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.elegir__tela{margin-top:10px;font-size:14px;color:var(--text2)}
.elegir__tela span{font-weight:700;color:var(--ink)}
.elegir__error{font-size:14px;font-weight:700;color:#a3271f}
.elegir__acciones{display:flex;gap:10px;align-items:center}
.elegir__acciones .boton--grande{flex:1}
.cantidad{display:flex;align-items:center;border:1px solid var(--line2);background:#fff;border-radius:999px;height:56px}
.cantidad button{width:44px;height:100%;border:0;background:transparent;font-size:20px;cursor:pointer;border-radius:999px}
.cantidad input{width:34px;border:0;background:transparent;text-align:center;font-weight:800;-moz-appearance:textfield;appearance:textfield}
.cantidad input::-webkit-inner-spin-button,.cantidad input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ---------- Lo viste en redes ---------- */
.seccion--oscura{margin-top:clamp(48px,5.4vw,96px);padding:clamp(48px,5.4vw,96px) 0;background:var(--ink);color:var(--ink-t)}
.seccion--oscura .tit em{color:var(--muted)}
.seccion--oscura .cabeza__texto{color:var(--muted)}
.filtro-redes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding-top:4px}
.carrusel--redes .carrusel__pista{padding:0}
.reels{gap:12px}
/* Cada video se ve como en su red: TikTok, Instagram o Facebook (íconos, letra y botones de cada una; sin números). */
.reel{position:relative;flex:0 0 72%;aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:#000;color:#fff;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.reel[hidden]{display:none}
.reel__sombra{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent 20%,transparent 46%,rgba(0,0,0,.78))}
.reel__cab,.reel__acciones,.reel__abajo,.reel__post{position:absolute;z-index:2}
.reel__cab{top:12px;left:12px;right:12px;display:flex;align-items:center;gap:8px;font-size:17px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.reel__cab b{font-weight:700;letter-spacing:-.01em}
.reel__cab-der{margin-left:auto}
.reel__post{top:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;padding:7px 11px;border-radius:999px;font-size:11.5px;font-weight:700;text-decoration:none}
.reel__post:hover{text-decoration:underline}
.reel__acciones{right:8px;bottom:76px;display:flex;flex-direction:column;align-items:center;gap:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.reel__abajo{left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.reel__autor,.reel__texto,.reel__musica{margin-right:46px}
.reel__autor{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px}
.reel__autor b{min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel__texto{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel__musica{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel__avatar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;font-size:13px;font-weight:800;text-shadow:none}
.reel__seguir{flex:none;border:1px solid rgba(255,255,255,.85);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700}
/* TikTok: logo con sus dos sombras, foto de perfil con «+» rojo arriba de los íconos y «sonido original». */
.reel--tiktok .reel__logo{display:inline-flex;filter:drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55)}
.reel__avatar--tt{position:relative;width:44px;height:44px;border:2px solid #fff;margin-bottom:6px;font-size:16px}
.reel__avatar--tt i{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:19px;height:19px;border-radius:50%;background:#fe2c55;color:#fff;font:800 14px/19px system-ui,sans-serif;text-align:center}
/* Instagram: «Reels» arriba, aro de colores en la foto de perfil y «Seguir» con borde. */
.reel__avatar--instagram{box-shadow:0 0 0 2px #000,0 0 0 4px #d62976;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
/* Facebook: su «f» en azul y «Seguir» como texto. */
.reel__fb{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0866ff;color:#fff}
.reel__avatar--facebook{background:#0866ff}
.reel--facebook .reel__seguir{border:0;padding:0;color:#7fb2ff}
.reel--facebook .reel__seguir::before{content:'· ';color:#fff}
.reel__comprar{display:flex;align-items:center;gap:10px;margin-top:4px;background:var(--bg);color:var(--ink);padding:7px;border-radius:10px;text-decoration:none;text-shadow:none;font-family:'DM Sans',sans-serif;transition:background .2s}
.reel__comprar:hover{background:#fff}
.reel__comprar>span:first-child{flex:1;display:flex;flex-direction:column;min-width:0;padding-left:6px}
.reel__comprar b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel__comprar small{font-size:12px;font-weight:800}
.reel__boton{flex:none;background:var(--ink);color:var(--ink-t);border-radius:7px;padding:9px 10px;font:800 10px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase}
@media (min-width:640px){.reel{flex-basis:calc(33.333% - 8px)}}
@media (min-width:1000px){.reel{flex-basis:calc(25% - 9px)}}
.sigue{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.sigue a{display:flex;gap:10px;align-items:center;border:1px solid var(--lined);color:var(--ink-t);padding:12px 20px;border-radius:999px;font-size:13px;text-decoration:none;transition:background .25s,color .25s}
.sigue a:hover{background:var(--ink-t);color:var(--ink)}
.sigue span{opacity:.75}

/* ---------- Cómo comprar: tres pasos ---------- */
#pasos{padding-bottom:clamp(56px,6vw,110px)}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.paso{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--ink2);color:#fff}
.paso__escena{position:absolute;inset:0}
.paso__num{position:absolute;top:16px;left:20px;z-index:3;font:700 56px/1 'Urbanist',sans-serif;letter-spacing:-.03em}
.paso__txt{position:absolute;z-index:3;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px}
.paso__txt h3{font-size:clamp(24px,2.1vw,30px);line-height:1.08}
.paso__txt p{font-size:14px;line-height:1.5;opacity:.92}
.paso__mini{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
/* 01 · las fotos de cada color se turnan y el panelito marca el color */
.paso--1::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.32) 0,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 52%,rgba(0,0,0,.8) 100%);pointer-events:none}
.paso1__fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;animation:turno calc(var(--n)*2.4s) calc(var(--k)*2.4s) infinite}
.paso1__fotos img:only-child{opacity:1;animation:none}
.paso1__panel{position:absolute;right:16px;top:18px;z-index:3;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.96);border-radius:16px;padding:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.paso1__colores{display:flex;gap:7px}
.paso1__colores i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);animation:anillo calc(var(--n)*2.4s) calc(var(--k)*2.4s) infinite}
.paso1__tallas{display:flex;gap:5px}
.paso1__tallas b{display:grid;place-items:center;min-width:28px;height:26px;padding:0 5px;border-radius:7px;border:1px solid var(--line2);color:var(--ink);font-size:11px}
.paso1__tallas b.es-la{background:var(--ink);color:var(--ink-t);border-color:var(--ink)}
/* 02 · el comprobante se sube y se marca */
.paso--2{background:var(--soft);color:var(--ink)}
.paso2__recibo{position:absolute;left:50%;top:44%;width:70%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:18px;padding:16px;box-shadow:0 24px 50px -24px rgba(0,0,0,.4)}
.paso2__fila{display:flex;justify-content:space-between;align-items:center}
.paso2__ok{width:22px;height:22px;border-radius:50%;background:#25d366;color:#0b2e17;display:grid;place-items:center;animation:salta 6s infinite}
.paso2__ok svg{animation:verse 6s infinite}
.paso2__monto{font:700 34px/1 'Urbanist',sans-serif;letter-spacing:-.02em}
.paso2__barra{position:relative;height:8px;border-radius:999px;background:var(--soft);overflow:hidden}
.paso2__barra i{position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:llena 6s infinite}
.paso2__archivo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text2)}
.paso2__archivo svg{color:#137a3e}
/* 03 · el chat de la tienda confirma */
.paso--3{background:#dcefe2;color:var(--ink)}
.paso3__chat{position:absolute;left:50%;top:44%;width:72%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:8px}
.paso3__cab{display:flex;align-items:center;gap:9px;background:#1f6b4f;color:#fff;border-radius:16px 16px 6px 6px;padding:10px 12px}
.paso3__cab b{width:28px;height:28px;border-radius:50%;background:#fff;color:#1f6b4f;display:grid;place-items:center;font-size:13px}
.paso3__cab span{display:flex;flex-direction:column;line-height:1.2;font-size:13px}
.paso3__cab small{font-size:10px;opacity:.85}
.paso3__escribe{align-self:flex-start;display:flex;gap:4px;background:#fff;border-radius:14px 14px 14px 4px;padding:9px 12px;animation:escribe 7s infinite}
.paso3__escribe i{width:6px;height:6px;border-radius:50%;background:#6f6a63;animation:punto 1s infinite}
.paso3__escribe i:nth-child(2){animation-delay:.15s}.paso3__escribe i:nth-child(3){animation-delay:.3s}
.paso3__burbuja{align-self:flex-start;max-width:92%;margin-top:-34px;display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:14px 14px 14px 4px;padding:8px 10px;font-size:12px;line-height:1.4;color:#1c2b20;box-shadow:0 10px 24px -14px rgba(0,0,0,.4);animation:burbuja 7s infinite}
.paso3__prenda{display:flex;gap:8px;align-items:center;background:#eef6f0;border-radius:10px;padding:6px}
.paso3__prenda img{width:36px;height:48px;object-fit:cover;object-position:50% 40%;border-radius:6px}
.paso3__prenda span{display:flex;flex-direction:column;font-size:11px}
.paso3__estados{display:flex;flex-direction:column;gap:7px;background:rgba(255,255,255,.7);border-radius:14px;padding:10px 12px;font-size:12px;font-weight:700;color:#1c2b20}
.paso3__estados span{display:flex;align-items:center;gap:8px}
.paso3__estados i{width:10px;height:10px;border-radius:50%;background:#1f8f4e}
.paso3__estados span:nth-child(2){animation:enciende 7s infinite}
.paso3__estados .paso3__camino{width:34px;height:8px;border-radius:999px;background:linear-gradient(90deg,#1f8f4e 40%,rgba(31,143,78,.25) 40%);background-size:200% 100%;animation:camino 2.4s linear infinite}
.paso--3 .paso__num,.paso--2 .paso__num{color:var(--ink)}
.dudas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:15px;font-weight:600;color:var(--text2);text-decoration:none}
.dudas b{font-weight:800;color:#0f6b36;text-decoration:underline;text-underline-offset:4px}

/* ---------- La tienda ---------- */
.tienda__cab{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.tienda__cuantas{font-size:14px;color:var(--mute);font-weight:600}
/* Mientras llega la lista nueva (la tienda cambia sin recargar), la de ahora se atenúa. */
#tienda.cargando .rejilla,#tienda.cargando .vacio{opacity:.45;transition:opacity .15s;pointer-events:none}
#tienda[aria-busy="true"]{cursor:progress}
.pestanas{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;margin-top:22px;border-bottom:1px solid var(--line)}
.pestanas::-webkit-scrollbar{display:none}
.pestanas a{flex:none;padding:12px 0;margin-bottom:-1px;border-bottom:1.5px solid transparent;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mute)}
.pestanas a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.pestanas .es-oferta{color:#a3271f}
.filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:4px 0 16px}
.filtro{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.filtro select{height:44px;min-width:130px;border:1px solid var(--line2);background:#fff;padding:0 14px;border-radius:999px;font:600 14px 'DM Sans',sans-serif;color:var(--ink);text-transform:none;letter-spacing:0}
.filtro--orden{margin-left:auto}
.js .filtros__aplicar{display:none}
.activos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:20px}
.activo{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:#fff;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;text-decoration:none}
.activo i{width:12px;height:12px;border-radius:50%}
.activos__limpiar{font-size:12px;font-weight:700;color:var(--mute);padding:6px}
.vacio{padding:64px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.vacio__titulo{font:600 28px/1.2 'Urbanist',sans-serif}

/* ---------- Ficha ---------- */
.ficha__grilla{display:grid;gap:clamp(24px,4vw,72px);align-items:start}
.ficha__galeria{background:var(--soft);border-radius:26px;padding:clamp(10px,1.4vw,20px)}
.ficha__fotos{display:grid;gap:10px;justify-items:center}
.ficha__fotos[hidden]{display:none}
.ficha__foto{position:relative;width:100%;aspect-ratio:var(--r,.5625);max-width:min(100%,calc((100vh - 230px) * var(--r,.5625)),520px);border-radius:18px;overflow:hidden;animation:aparece .6s ease both}
.ficha__datos{display:flex;flex-direction:column;gap:18px;max-width:500px}
.ficha__arriba{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ficha__arriba .kicker{margin:0}
.ficha__nombre{font-size:clamp(34px,3.2vw,52px);line-height:1.04;text-wrap:balance}
.ficha__precio{display:flex;gap:10px;align-items:baseline}
.ficha__precio b{font:700 30px/1 'Urbanist',sans-serif;letter-spacing:-.02em}
.ficha__precio s{font-size:16px;color:var(--mute)}
.ficha__desc{font-size:15px;line-height:1.65;color:var(--text2)}
.ficha__marca{font-size:13px;line-height:1.5;color:var(--text2);background:var(--soft);border-radius:12px;padding:10px 12px}
.ficha__hechos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ficha__hechos li{display:flex;flex-direction:column;gap:3px;background:var(--soft);border-radius:14px;padding:12px}
.ficha__hechos span{font-size:11px;color:var(--mute);font-weight:700}
.ficha__hechos b{font-size:13px;font-weight:800;line-height:1.25}
.ficha__combina{margin:clamp(56px,6vw,96px) 0 22px;font-size:clamp(34px,3.6vw,56px)}
@media (min-width:900px){
  .ficha__grilla{grid-template-columns:1.15fr .85fr}
  .ficha__datos{position:sticky;top:130px}
  .ficha__fotos:has(.ficha__foto:nth-child(2)){grid-template-columns:1fr 1fr}
}

/* ---------- Bolsa y pedido ---------- */
.bolsa-pag .h1{margin-bottom:24px}
.bolsa-grilla{display:grid;gap:24px;align-items:start}
.bolsa-grilla[hidden],.bolsa-vacia[hidden]{display:none}
@media (min-width:960px){.bolsa-grilla{grid-template-columns:1fr 360px}.resumen{position:sticky;top:130px}}
.bolsa-vacia{padding:32px 0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.lineas{display:flex;flex-direction:column}
.linea{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.linea img{width:72px;height:96px;object-fit:cover;object-position:50% 30%;border-radius:10px;background:var(--soft)}
.linea__nombre{font-weight:700;line-height:1.3;text-decoration:none}
.linea__meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);margin-top:4px}
.linea__meta i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.linea__der{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.linea__total{font-weight:800}
.linea .cantidad{height:40px}
.linea .cantidad button{width:36px}
.linea__quitar{border:0;background:transparent;color:var(--mute);font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px}
.linea__error{grid-column:1/-1;font-size:13px;font-weight:700;color:#a3271f}
.bolsa-col>.ver-todo{display:inline-block;margin:10px 0 6px}
.pedido{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.caja{border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px;margin:0;min-width:0}
.caja__titulo{float:left;width:100%;padding:0;margin-bottom:6px;font:700 22px/1.1 'Urbanist',sans-serif;letter-spacing:-.015em}
.caja__titulo+*{clear:both}
.caja__nota{font-size:14px;color:var(--text2);margin:8px 0 12px}
.opciones{display:grid;gap:10px;margin-top:10px}
.opcion{position:relative;display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line2);border-radius:14px;padding:14px;cursor:pointer;transition:border-color .2s,background .2s}
.opcion input{margin-top:3px;width:20px;height:20px;accent-color:var(--ink);flex:none}
.opcion span{display:flex;flex-direction:column;gap:4px;line-height:1.4}
.opcion small{font-size:13px;color:var(--text2)}
.opcion:has(input:checked){border-color:var(--ink);background:var(--bg)}
.campos{display:grid;gap:12px;margin-top:10px}
@media (min-width:640px){.campos{grid-template-columns:1fr 1fr}.campo--ancho{grid-column:1/-1}}
.campo{display:flex;flex-direction:column;gap:6px}
.campo[hidden]{display:none}
.campo label{font-size:14px;font-weight:700;line-height:1.4}
.campo label small{font-weight:400;color:var(--mute)}
.campo input,.campo textarea{width:100%;min-height:48px;border:1px solid var(--line2);border-radius:12px;background:#fff;padding:10px 14px;font-size:16px}
.campo input:focus-visible,.campo textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 45%,transparent);outline-offset:1px;border-color:var(--ink)}
.campo input[aria-invalid="true"]{border-color:#a3271f}
.campo .error{font-size:13px;font-weight:700;color:#a3271f}
.subir small{font-size:12px;color:var(--mute)}
.subir{gap:8px}
.subir__rot{font-size:14px;font-weight:700;line-height:1.4}
.subir{position:relative}
.campo .subir__input{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}
.subir__boton{align-self:flex-start;display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--ink-t);font:700 14px/1 'DM Sans',sans-serif!important;cursor:pointer}
.subir__boton:hover{background:var(--ink2)}
.subir__input:focus-visible+.subir__boton{outline:3px solid var(--acc);outline-offset:3px}
.subir__input[aria-invalid="true"]+.subir__boton{box-shadow:0 0 0 2px #a3271f}
.subir__nombre{font-size:14px;line-height:1.45;color:var(--text2);overflow-wrap:anywhere}
.subir__nombre--ok{color:var(--ink);font-weight:700}
.cuentas{display:grid;gap:10px}
.cuenta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--bg)}
.cuenta__elige input{width:20px;height:20px;accent-color:var(--ink)}
.cuenta__datos{display:flex;flex-direction:column;gap:2px;font-size:14px}
.cuenta__num{font-weight:800;letter-spacing:.04em}
.cuenta__datos small{color:var(--text2)}
.acepto{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:start;font-size:14.5px;line-height:1.6}
.acepto input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink)}
.acepto label{cursor:pointer}
.acepto a{font-weight:700;text-underline-offset:3px}
.acepto__ayuda{grid-column:2;margin:0;font-size:13px;line-height:1.55;color:var(--text2)}
.error-form{padding:12px 14px;border-radius:12px;background:#fdecea;color:#7a1f17;font-weight:700;font-size:14px}
.resumen{border-radius:20px;background:var(--soft);padding:20px}
.resumen__titulo{font-size:24px;margin-bottom:12px}
.resumen dl{margin:0;display:flex;flex-direction:column;gap:10px}
.resumen dl>div{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.resumen dt{color:var(--text2)}
.resumen dd{margin:0;font-weight:700}
.resumen__total{padding-top:12px;border-top:1px solid var(--line2);font-size:18px!important}
.resumen__total dd{font:700 26px/1 'Urbanist',sans-serif}
.gracias{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 0;outline:none}
.gracias[hidden]{display:none}
.gracias__ok{width:56px;height:56px;border-radius:50%;background:#25d366;color:#0b2e17;display:grid;place-items:center}
.gracias__codigo{font-size:16px}
.gracias__codigo b{font:700 26px/1 'Urbanist',sans-serif;letter-spacing:.04em;margin-left:6px}
.seguir{margin-top:36px;border-top:1px solid var(--line);padding-top:18px}
.seguir summary{cursor:pointer;font-weight:800;font-size:15px;list-style-position:inside}
.seguir__form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:14px}
.seguir__form .campo{flex:1 1 200px}
.seguir__res{margin-top:14px;font-size:15px}
.seguir__estado{display:inline-block;padding:6px 12px;border-radius:999px;font-weight:800;font-size:13px;background:var(--soft)}
.seguir__estado--ok{background:#dcefe2;color:#0f5132}
.aviso{padding:12px 14px;border-radius:12px;background:var(--soft);font-size:14px}

/* ---------- Ayuda y legales ---------- */
.preguntas{margin-top:28px}
.preguntas__tema{font-size:28px;margin-bottom:10px}
.pregunta{border-bottom:1px solid var(--line)}
.pregunta summary{cursor:pointer;padding:16px 4px;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:'+';font-size:22px;line-height:1;color:var(--acc)}
.pregunta[open] summary::after{content:'−'}
.pregunta__resp{padding:0 4px 18px;color:var(--text2);line-height:1.65;white-space:pre-line}
.legal__texto{margin-top:20px;white-space:pre-line;line-height:1.7;color:var(--text2)}
.vacia-inicio{padding-bottom:64px}
.vacia-inicio .envoltura{display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* ---------- Pie ---------- */
.pie{background:var(--ink);color:var(--ink-t);padding:clamp(44px,4.4vw,72px) 0 calc(96px + env(safe-area-inset-bottom))}
.pie__grilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,3.4vw,56px) clamp(24px,2.4vw,40px)}
.pie__marca{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:380px}
.pie__nombre{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 30px/1 'Urbanist',sans-serif;letter-spacing:.02em}
.pie__nombre img{width:44px;height:44px;border-radius:50%;background:#fff;object-fit:contain}
.pie__marca p{font-size:14px;line-height:1.65;color:var(--muted)}
.pie__dato{font-size:13px!important}
.pie__col{display:flex;flex-direction:column;gap:12px;font-size:14px}
.pie__col h2{font:700 11px/1.2 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pie__col a{text-decoration:none}
.pie__col a:hover{text-decoration:underline;text-underline-offset:4px}
.pie__col small{font-size:13px;line-height:1.5;color:var(--muted)}
.pie__marcas{margin-top:28px;font-size:12px;line-height:1.5;color:var(--muted);max-width:760px}
.pie__fin{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:clamp(32px,3.4vw,56px);padding-top:22px;border-top:1px solid var(--lined);font-size:13px;color:var(--muted)}
.pie__fin a{color:var(--ink-t)}
.pie__redes{display:flex;gap:8px;flex-wrap:wrap}
.pie__redes a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--lined);border-radius:999px;padding:8px 14px;color:var(--ink-t);text-decoration:none;font-weight:600}
.pie__redes a:hover{background:var(--ink-t);color:var(--ink)}
@media (min-width:900px){.pie{padding-bottom:clamp(44px,4.4vw,72px)}.pie__grilla{grid-template-columns:1.6fr 1fr 1fr 1fr}.pie__marca{grid-column:auto}}

/* ---------- Barra de abajo (celular) y aviso de «agregado» ---------- */
.nav-abajo{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.nav-abajo a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--mute)}
.nav-abajo a[aria-current]{color:var(--ink)}
.nav-abajo a[aria-current]::before{content:'';width:18px;height:2px;background:var(--ink);margin:-6px 0 2px}
.nav-abajo__bolsa{position:relative;display:block;height:21px}
.nav-abajo .bolsa__n{top:-6px;right:-10px}
@media (min-width:900px){.nav-abajo{display:none}}
.aviso-agregado{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:70;transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100vw - 32px);background:var(--ink);color:var(--ink-t);padding:10px 10px 10px 22px;border-radius:999px;font-weight:700;font-size:14.5px;line-height:1.4;white-space:nowrap;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);animation:sube .35s cubic-bezier(.2,.7,.1,1)}
.aviso-agregado[hidden]{display:none}
.aviso-agregado a{flex:none;background:var(--ink-t);color:var(--ink);padding:10px 16px;border-radius:999px;text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:900px){.aviso-agregado{bottom:28px}}

/* ---------- Entrar al verse ---------- */
.js .revela{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--i,0)*.05s)}
.js .revela.visto{opacity:1;transform:none}

@keyframes cinta{to{transform:translateX(-50%)}}
@keyframes sube{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes palabra{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes entraIzq{from{transform:translateX(-100%)}to{transform:none}}
@keyframes flota{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes punto{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes turno{0%{opacity:0}4%,25%{opacity:1}29%,100%{opacity:0}}
@keyframes anillo{0%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}4%,25%{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}29%,100%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}}
@keyframes llena{0%,10%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
@keyframes salta{0%,55%{transform:scale(0)}62%{transform:scale(1.25)}68%,100%{transform:scale(1)}}
@keyframes verse{0%,60%{opacity:0}68%,100%{opacity:1}}
@keyframes escribe{0%,14%{opacity:0}18%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes burbuja{0%,42%{opacity:0;transform:translateY(10px) scale(.95)}48%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes enciende{0%,58%{opacity:.3}64%,100%{opacity:1}}
@keyframes camino{to{background-position:-200% 0}}

/* Quieto: «Detener animaciones» o el sistema pide menos movimiento. */
html[data-quieto] *,html[data-quieto] *::before,html[data-quieto] *::after{animation-play-state:paused!important;transition:none!important;scroll-behavior:auto!important}
html[data-quieto] .revela{opacity:1;transform:none}
html[data-quieto] .paso1__fotos img:first-child,html[data-quieto] .paso3__burbuja,html[data-quieto] .paso2__ok svg{opacity:1}
html[data-quieto] .paso2__ok{transform:none}
html[data-quieto] .paso2__barra i{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .revela{opacity:1;transform:none}
  .paso1__fotos img:first-child,.paso3__burbuja{opacity:1}
}

/* Vista previa del panel: sin barra de abajo encima de lo que se edita. */
.en-preview .nav-abajo{display:none}
.en-preview .pie{padding-bottom:clamp(44px,4.4vw,72px)}
/* La marca amarilla de lo que se edita en el panel (la misma de las otras plantillas). */
.en-preview .ed-campo{outline:3px solid #FFD43B;outline-offset:5px;border-radius:6px;box-shadow:0 0 0 9px rgba(255,212,59,.28);animation:ed-pulso 1.4s ease-in-out 2}
@keyframes ed-pulso{50%{box-shadow:0 0 0 14px rgba(255,212,59,.12)}}

/* ---------- BOTÓN DE ACCESIBILIDAD (23-oct, Kevin: «no se ve») ----------
   El del común toma el acento de la tienda, que en la paleta Ciruela es casi negro: con su ícono negro desaparecía.
   Aquí va del color oscuro de la tienda con el ícono claro y un borde del color de la página que lo despega de
   cualquier fondo (también de la sección oscura de redes). Su ventana usa --color-acento (Ropa::paleta 'a11y'): claro,
   legible sobre la ventana oscura y con la letra casi negra encima. */
html .wa11y-fab{width:50px;height:56px;background:var(--ink);color:var(--ink-t);box-shadow:0 0 0 2px var(--bg),6px 8px 22px rgba(0,0,0,.35)}
html .wa11y-fab:hover{filter:none;background:var(--ink2)}
html .wa11y-fab:focus-visible{outline:3px solid var(--acc);outline-offset:4px}
@media (max-width:600px){html .wa11y-fab{width:44px;height:50px}}

/* ---------- MODO DALTÓNICO EN LAS PRENDAS (23-oct, Kevin: «dale full énfasis») ----------
   Además del filtro común (que separa los colores que se confunden en toda la página, también en las fotos), en una
   tienda de ropa lo que de verdad ayuda es SABER qué color es: cada círculo dice su nombre, el elegido lleva un visto
   (y la talla elegida también), y las tarjetas dicen los nombres de sus colores. El color nunca es la única pista. */
.color__nombre,.tarjeta__nombres-color{display:none}
html[data-cb] .colores{gap:16px 12px}
html[data-cb] .color{display:flex;flex-direction:column;align-items:center;gap:7px;width:72px}
html[data-cb] .color__circulo{position:relative}
html[data-cb] .color__nombre{display:block;max-width:100%;font-size:12.5px;font-weight:700;line-height:1.2;text-align:center;color:var(--text2);overflow-wrap:anywhere}
html[data-cb] .color input:checked~.color__nombre{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
html[data-cb] .color input:checked+.color__circulo::after{content:'✓';position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--ink-t);display:grid;place-items:center;font:900 14px/1 'DM Sans',sans-serif;box-shadow:0 0 0 2px var(--bg)}
html[data-cb] .talla input:checked+span::before{content:'✓';margin-right:5px;font-weight:900}
html[data-cb] .tarjeta__colores{flex-wrap:wrap}
html[data-cb] .tarjeta__nombres-color{display:block;flex-basis:100%;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--text2)}
html[data-cb] .estudio__etiqueta{font-size:13px}
html[data-cb] .paso1__colores i:nth-child(n){outline:1px solid rgba(0,0,0,.25)}
html[data-cb] .cab__deptos .es-oferta::after,html[data-cb] .pestanas .es-oferta::after{content:' %'}

/* La cuenta en el celular: el botón «Copiar número» va debajo (antes apretaba el nombre del banco en dos líneas). */
@media (max-width:560px){.cuenta{grid-template-columns:auto minmax(0,1fr)}.cuenta [data-copiar]{grid-column:2;justify-self:start}}

/* El botón de accesibilidad en el CELULAR: abajo a la izquierda, sobre la barra de abajo (a media altura tapaba lo que
   va pegado al borde, como la casilla «Acepto»). Su ventana se abre hacia arriba. El aviso «Agregado» sube un poco. */
@media (max-width:899px){
  html .wa11y{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));transform:none}
  html .wa11y-fab{width:44px;height:44px;border-radius:0 12px 12px 0}
  html .wa11y-pop{top:auto;bottom:0;transform:none}
  .aviso-agregado{bottom:calc(132px + env(safe-area-inset-bottom))}
  .pie{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
}
.en-preview .wa11y{display:none}

/* ---------- TE PUEDE GUSTAR (debajo de la bolsa) ---------- */
.sugeridas{margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--line)}
.sugeridas__t{margin-bottom:clamp(18px,2vw,28px)}
.sugerida:not([hidden]){display:contents}

/* ---------- ARMA TU LOOK (23-oct, Kevin: «como las cucas»): el maniquí que se viste ---------- */
.lk-moldes{position:absolute;width:0;height:0;overflow:hidden}
/* Cada prenda le cae encima al maniquí al elegirla; otro color de la misma aparece suave (24-oct). */
.lk-entra{transform-box:fill-box;transform-origin:50% 0;animation:lk-entra .62s cubic-bezier(.2,.85,.3,1.12) both}
@keyframes lk-entra{from{opacity:0;transform:translateY(-26px) scale(1.04,.92)}55%{opacity:1}to{opacity:1;transform:none}}
.lk-cambia{animation:lk-cambia .45s ease-out both}
@keyframes lk-cambia{from{opacity:.2}to{opacity:1}}
html[data-quieto] .lk-entra,html[data-quieto] .lk-cambia{animation:none}
@media (prefers-reduced-motion:reduce){.lk-entra,.lk-cambia{animation:none}}
.lk-etq rect{fill:var(--ink);stroke:var(--bg);stroke-width:2}
.lk-etq text{fill:var(--ink-t);font:800 11px 'DM Sans',sans-serif;letter-spacing:.04em}
.lk-etq--falta rect{fill:#fff;stroke:#a3271f;stroke-dasharray:3 2}
.lk-etq--falta text{fill:#a3271f}
/* El estudio: una pared clara con su luz detrás del maniquí (la sombra en el piso ya viene en la foto del maniquí).
   Se desliza el dedo de lado sobre él para cambiar de prenda: el scroll de la página sigue con el dedo hacia arriba. */
.look__marco{position:relative;display:grid;place-items:center;aspect-ratio:3/4;max-height:min(78vh,720px);width:100%;border-radius:28px;overflow:hidden;
  background:radial-gradient(60% 52% at 50% 36%,#fff 0,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--soft) 50%,#fff) 0,var(--soft) 100%);
  box-shadow:inset 0 0 0 1px var(--line);touch-action:pan-y}
.look__svg{width:100%;height:100%;display:block}
.look__flecha{position:absolute;top:50%;translate:0 -50%;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);
  color:var(--ink);display:grid;place-items:center;box-shadow:0 10px 22px -14px rgba(0,0,0,.45);cursor:pointer;z-index:2}
.look__flecha--ant{left:10px}
.look__flecha--sig{right:10px}
.look__flecha[hidden]{display:none}
.look__flecha:hover{background:#fff}
.look__flecha:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.look__desliza{display:none;margin:8px 0 0;padding:0 52px;font-size:13px;font-weight:700;color:var(--mute);text-align:center}
@media (pointer:coarse){.look__desliza{display:block}}
.look__vacio{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--mute);text-align:center;padding:24px}
.look__vacio[hidden]{display:none}
.look__vacio p{font-size:15px;font-weight:700}
.look__insets{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.look__insets li{width:74px;height:74px;border-radius:50%;background:#fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.4),0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden}
.look__insets svg{width:62px;height:62px}
.look__marco--solos .look__insets{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:14px}
.look__marco--solos .look__insets li{width:120px;height:120px}
.look__marco--solos .look__insets svg{width:100px;height:100px}
.look__nota{margin-top:12px;font-size:13px;line-height:1.5;color:var(--mute);text-align:center}
.look{display:grid;gap:clamp(20px,3vw,44px);margin-top:clamp(10px,1.4vw,20px)}
.look__panel{display:flex;flex-direction:column;gap:18px;min-width:0}
.look__tallas{display:flex;flex-wrap:wrap;gap:12px}
.campo--linea{flex-direction:row;align-items:center;gap:10px}
.campo select{min-height:46px;border:1px solid var(--line2);border-radius:12px;background:#fff;padding:0 12px;font-size:15px;font-weight:700}
.campo select:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 45%,transparent);outline-offset:1px}
.look__zonas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.look__zonas::-webkit-scrollbar{display:none}
.look__ops{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;margin:0;padding:2px 2px 10px;list-style:none}
.look__ops[hidden]{display:none}
.look__ops li{flex:0 0 132px;scroll-snap-align:start}
.look-op{width:100%;display:flex;flex-direction:column;gap:5px;padding:6px;border:1.5px solid var(--line);border-radius:16px;background:#fff;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.look-op:hover{border-color:var(--line2)}
.look-op[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.look-op:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.look-op__foto{position:relative;display:grid;place-items:center;aspect-ratio:3/4;border-radius:11px;overflow:hidden;padding:10px;
  background:radial-gradient(70% 60% at 50% 40%,#fff 0,var(--soft) 100%)}
.look-op__foto img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(40,25,30,.18));transition:transform .3s}
.look-op:hover .look-op__foto img{transform:translateY(-3px) scale(1.03)}
.look-op[aria-pressed="true"] .look-op__foto::after{content:'✓';position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--ink-t);display:grid;place-items:center;font-weight:900;font-size:13px}
.look-op__nombre{font-size:13px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.look-op__precio{font-size:13px;font-weight:800}
.look-op__colores{display:flex;gap:4px}
.look-op__colores i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.look__resumen{border:1px solid var(--line);border-radius:22px;background:#fff;padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:14px}
.look__resumen .h3{font-size:22px;font-weight:700}
.look__lista{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.look__vacia{color:var(--mute);font-size:14px}
.look__vacia[hidden]{display:none}
.look-item{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:0 34px 12px 0;border-bottom:1px solid var(--line)}
.look-item__foto{display:grid;place-items:center;width:72px;aspect-ratio:3/4;border-radius:12px;padding:6px;background:radial-gradient(70% 60% at 50% 40%,#fff 0,var(--soft) 100%)}
.look-item__foto img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(40,25,30,.16))}
.look-item__info{display:flex;flex-direction:column;gap:8px;min-width:0}
.look-item__nombre{font-weight:800;font-size:15px;line-height:1.3;color:var(--ink);text-decoration:none}
.look-item__nombre:hover{text-decoration:underline}
.look-item__precio{font-size:14px;font-weight:700;color:var(--text2)}
.look-item__grupo{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.look-item__grupo legend{padding:0;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.look-item__grupo legend b{color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px}
.look-item__grupo--falta legend{color:#a3271f}
.look-item__grupo .talla span{min-width:44px;height:40px;font-size:13px}
.look-item__colores{display:flex;flex-wrap:wrap;gap:8px}
.look-color{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.look-color input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.look-color__circulo{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.look-color input:checked+.look-color__circulo{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.look-color input:focus-visible+.look-color__circulo{outline:3px solid var(--acc);outline-offset:4px}
.look-color--agotado{opacity:.4}
.look-color__nombre{display:none;font-size:11px;font-weight:700;color:var(--text2)}
html[data-cb] .look-color__nombre{display:block}
.look-item__quitar{position:absolute;top:0;right:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);background:#fff;font-size:18px;line-height:1;cursor:pointer;color:var(--ink)}
.look-item__quitar:hover{background:var(--ink);color:var(--ink-t)}
.look__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700}
.look__total b{font-size:24px;font-weight:800}
.look__acciones{display:flex;flex-direction:column;gap:10px}
.look__acciones .boton{width:100%}
.look__mas{display:flex;gap:10px}
.look__mas .boton{flex:1}
.ficha__look{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:4px 0 14px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-underline-offset:5px}
.look-inicio{background:var(--soft);margin-top:clamp(48px,5.4vw,96px);padding:clamp(40px,5vw,80px) 0}
.look-inicio__caja{display:grid;gap:clamp(24px,4vw,64px);align-items:center}
.look-inicio__texto{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.look-inicio__texto .h2{margin:0}
.look-inicio__maniqui .look__marco{max-height:560px;background:radial-gradient(110% 80% at 50% 18%,#fff 0,var(--bg) 70%)}
/* Computadora y tableta: el maniquí a la izquierda (se queda a la vista al bajar) y las prendas a la derecha. */
@media (min-width:760px){
  .look{grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);align-items:start}
  .look__escena{position:sticky;top:104px}
  .look-inicio__caja{grid-template-columns:1.1fr .9fr}
}
@media (min-width:1100px){.look__ops{flex-wrap:wrap;overflow:visible}.look__ops li{flex-basis:140px}}
@media (max-width:759px){
  /* En el celular el maniquí se queda arriba, más bajito, mientras se eligen las prendas. */
  .look__escena{position:sticky;top:72px;z-index:2;background:var(--bg);padding-bottom:8px}
  .look__marco{aspect-ratio:auto;height:min(54vh,520px);max-height:none}
  .look__nota{display:none}
  .look__insets li{width:58px;height:58px}
  .look__insets svg{width:48px;height:48px}
  .look-inicio__maniqui .look__marco{height:min(60vh,480px)}
}