/* ===================== v32: una sola escala tipográfica =====================
Antes había 303 declaraciones de font-size con ~40 valores sueltos, y subir
el texto de lectura era ir parchando selector por selector. Ahora todo
apunta a esta escala: se cambia aquí y cambia el sitio entero.
Los tres primeros escalones son para ETIQUETAS en versalitas, no para leer.
La prosa nunca baja de --fs-sm.
=========================================================================== */
:root{
--fs-3xs:.72rem; /* 12 px · etiquetas micro en versalitas */
--fs-2xs:.82rem; /* 14 px · etiquetas, chips, pies de dato */
--fs-xs:.92rem; /* 16 px · apoyo, metadatos */
--fs-sm:1rem; /* 17 px · prosa */
--fs-md:1.1rem; /* 19 px · prosa destacada */
--fs-lg:1.3rem; /* 22 px · entradillas */
--fs-t5:1.45rem;
--fs-t4:1.62rem;
--fs-t3:1.95rem;
--fs-t2:2.6rem;
--fs-t1:3rem;
--lh-prosa:1.65;
}
/* ===== beaüra — tokens ===== */
:root{
--cream:#F7F3EE;
--white:#ffffff;
--tint:#F4ECF5; /* soft lilac section */
--soft:#EBDCEE; /* lilac chip */
--lilac:#C69ED4; /* primary accent */
--lilac-deep:#B487C6;/* hover */
--logo:#D9B8DD;
--gold:#E8C79E;
--ink:#342A3B; /* deep plum text */
--muted:#71667C;
--line:#E9E0EC;
--shadow:0 18px 40px -24px rgba(80,50,90,.35);
--radius:18px;
--wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--cream);color:var(--ink);
font-family:'Jost',system-ui,-apple-system,Segoe UI,sans-serif;
font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.08;margin:0}
.eyebrow{font-size:var(--fs-3xs);letter-spacing:.32em;text-transform:uppercase;color:var(--lilac-deep);font-weight:500;margin:0 0 .8rem}
.eyebrow--light{color:#fff;opacity:.9}
/* ===== buttons ===== */
.btn{display:inline-block;padding:.85rem 1.8rem;border-radius:100px;font-size:var(--fs-2xs);letter-spacing:.12em;
text-transform:uppercase;font-weight:500;transition:.25s ease;cursor:pointer;border:1px solid transparent}
.btn--solid{background:var(--lilac);color:#fff}
.btn--solid:hover{background:var(--lilac-deep);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--outline{background:transparent;color:var(--lilac-deep);border-color:var(--lilac)}
.btn--outline:hover{background:var(--lilac);color:#fff}
/* ===== topbar ===== */
.topbar{background:var(--ink);color:#fff;overflow:hidden;font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase}
.topbar__track{display:flex;gap:4rem;white-space:nowrap;padding:.55rem 0;width:max-content;animation:marquee 26s linear infinite}
.topbar span{opacity:.9}
@keyframes marquee{to{transform:translateX(-50%)}}
/* ===== header ===== */
.header{position:sticky;top:0;z-index:50;background:rgba(247,243,238,.82);backdrop-filter:blur(10px);
border-bottom:1px solid transparent;transition:.3s}
.header.is-scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(80,50,90,.5)}
.header__inner{max-width:var(--wrap);margin:0 auto;padding:.7rem 1.4rem;display:grid;
grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.nav{display:flex;gap:1.6rem;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.nav a{position:relative;padding:.3rem 0;color:var(--ink);opacity:.85}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--lilac-deep);transition:.25s}
.nav a:hover{opacity:1}.nav a:hover::after{width:100%}
.brand{justify-self:center;display:flex;align-items:center;gap:.55rem}
.brand__mark{height:44px;width:auto}
.brand__text{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.brand__word{height:25px;width:auto}
.brand__tag{font-size:var(--fs-3xs);letter-spacing:.44em;text-transform:uppercase;color:var(--lilac-deep);margin-top:4px;padding-left:2px}
.actions{justify-self:end;display:flex;align-items:center;gap:.35rem}
.iconbtn{background:none;border:0;padding:.35rem;cursor:pointer;position:relative;border-radius:50%;transition:.2s}
.iconbtn img{height:30px;width:30px;object-fit:contain;transition:.2s}
.iconbtn:hover{background:rgba(120,80,130,.08)}
.iconbtn:hover img{transform:scale(1.08)}
.badge{position:absolute;top:0;right:0;background:var(--lilac-deep);color:#fff;font-size:var(--fs-3xs);
min-width:16px;height:16px;border-radius:10px;display:grid;place-items:center;padding:0 3px}
.header__menu{display:none}
/* ===== hero ===== */
.hero{position:relative;height:min(88vh,760px);overflow:hidden;display:flex;align-items:center}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;z-index:0}
.hero__slide.is-active{opacity:1}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
linear-gradient(90deg,rgba(40,26,46,.55),rgba(40,26,46,.15) 55%,transparent),
linear-gradient(0deg,rgba(40,26,46,.35),transparent 40%)}
.hero__content{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 1.6rem;width:100%;color:#fff}
.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;
border:1px solid rgba(255,255,255,.5);background:rgba(40,26,46,.22);color:#fff;font-size:var(--fs-t4);line-height:1;
cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:.25s;display:grid;place-items:center}
.hero__arrow:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero__arrow--prev{left:1.4rem}.hero__arrow--next{right:1.4rem}
.hero__dots{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.5rem}
.hero__dots button{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.85);
background:transparent;cursor:pointer;transition:.25s;padding:0}
.hero__dots button.is-on{background:#fff;width:26px;border-radius:6px}
.hero__title{font-size:clamp(3rem,6.5vw,5.6rem);font-weight:600;line-height:1.02;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.28)}
.hero__title .t1{display:block;font-size:.5em;font-weight:500;letter-spacing:.05em;opacity:.92;margin-bottom:.12em}
.hero__title em{font-style:italic;font-weight:600;color:var(--gold);padding-right:.06em}
.hero__sub{max-width:30rem;margin:1.1rem 0 1.8rem;font-size:var(--fs-md);opacity:.95}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}
/* ===== sections ===== */
.section{max-width:var(--wrap);margin:0 auto;padding:5.5rem 1.6rem}
.section--tint{max-width:none;background:var(--tint)}
.section--tint .section__head,.section--tint .grid,.section--tint .section__foot{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.section__head{text-align:center;margin-bottom:3rem}
.section__title{font-size:clamp(2rem,4vw,3rem)}
.section__lead{color:var(--muted);max-width:34rem;margin:.8rem auto 0}
.section__foot{text-align:center;margin-top:3rem}
/* categories */
.cats{display:grid;grid-template-columns:repeat(8,1fr);gap:1.2rem}
.cat{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.cat__img{width:100%;aspect-ratio:1;border-radius:50%;background:#FCFAF7;
display:grid;place-items:center;box-shadow:0 14px 30px -22px rgba(80,50,90,.32);transition:.3s;border:1px solid var(--line)}
.cat__img img{width:56%;height:56%;object-fit:contain;transition:.3s}
.cat:hover .cat__img{transform:translateY(-6px);border-color:var(--lilac);box-shadow:0 22px 42px -22px rgba(150,100,160,.5)}
.cat:hover .cat__img img{transform:scale(1.06)}
.cat__name{font-size:var(--fs-xs);letter-spacing:.04em}
/* product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
transition:.3s;box-shadow:0 10px 30px -26px rgba(80,50,90,.4)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card__media{position:relative;aspect-ratio:1;background:#fff;display:grid;place-items:center;padding:9%}
.card__media img{width:100%;height:100%;object-fit:contain}
.card__fav{position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;border-radius:50%;border:0;
background:rgba(255,255,255,.85);color:var(--lilac-deep);font-size:var(--fs-md);cursor:pointer;transition:.2s;line-height:1}
.card__fav:hover{background:#fff;transform:scale(1.1)}
.card__fav.is-on{color:#d9679a}
.card__body{padding:1rem 1.1rem 1.3rem;text-align:center}
.card__cat{font-size:var(--fs-3xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.card__name{font-size:var(--fs-t5);margin:.15rem 0 .35rem}
.card__price{color:var(--lilac-deep);font-weight:500;letter-spacing:.04em;margin:0}
/* brand band */
.brandband{max-width:var(--wrap);margin:1rem auto;padding:3rem 1.6rem;display:grid;
grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.brandband__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.brandband__copy p{color:var(--muted);margin:.6rem 0 1.6rem;max-width:30rem}
/* benefits */
.benefits{max-width:var(--wrap);margin:0 auto;padding:2rem 1.6rem 4rem;display:grid;
grid-template-columns:repeat(4,1fr);gap:1.4rem}
.benefit{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--line);
border-radius:14px;padding:1rem 1.2rem}
.benefit img{width:44px;height:44px;object-fit:contain;flex:none}
.benefit h4{font-family:'Jost',sans-serif;font-size:var(--fs-sm);font-weight:500;margin:0}
.benefit p{margin:.1rem 0 0;font-size:var(--fs-2xs);color:var(--muted)}
/* newsletter */
.news{background:var(--ink);color:#fff;text-align:center;padding:4.5rem 1.6rem}
.news__inner{max-width:34rem;margin:0 auto}
.news .section__title{color:#fff}
.news p{opacity:.85;margin:.7rem 0 1.6rem}
.news__form{display:flex;gap:.6rem}
.news__form input{flex:1;padding:.85rem 1.2rem;border-radius:100px;border:1px solid rgba(255,255,255,.3);
background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:var(--fs-sm)}
.news__form input::placeholder{color:rgba(255,255,255,.6)}
/* footer */
.footer{background:#fff;border-top:1px solid var(--line);padding:3.5rem 1.6rem 1.5rem}
.footer__grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.footer__brand img{height:74px;width:auto;margin-bottom:.4rem}
.footer__brand p{color:var(--muted);font-size:var(--fs-sm);max-width:16rem}
.footer__col h5{font-family:'Jost',sans-serif;font-size:var(--fs-3xs);letter-spacing:.2em;text-transform:uppercase;
color:var(--ink);margin:0 0 .9rem}
.footer__col a{display:block;color:var(--muted);font-size:var(--fs-sm);padding:.28rem 0;transition:.2s}
.footer__col a:hover{color:var(--lilac-deep)}
.footer__bar{max-width:var(--wrap);margin:2.5rem auto 0;padding-top:1.3rem;border-top:1px solid var(--line);
display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--muted)}
/* ===== responsive ===== */
@media(max-width:960px){
.cats{grid-template-columns:repeat(4,1fr);gap:1.4rem 1rem}
.grid{grid-template-columns:repeat(3,1fr)}
.brandband{grid-template-columns:1fr;gap:1.8rem}
.benefits{grid-template-columns:repeat(2,1fr)}
.footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.header__inner{grid-template-columns:auto 1fr auto}
.header__menu{display:inline-flex}
.nav{position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;
padding:0 1.4rem;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s}
.nav.is-open{max-height:60vh;padding:.6rem 1.4rem 1rem}
.nav a{padding:.75rem 0;border-bottom:1px solid var(--line)}
.is-hide-sm{display:none}
.grid{grid-template-columns:repeat(2,1fr);gap:1rem}
.cats{grid-template-columns:repeat(3,1fr)}
.benefits{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr}
.news__form{flex-direction:column}
.hero{height:78vh}
.brand{gap:.4rem}.brand__mark{height:34px}.brand__word{height:18px}.brand__tag{display:none}
}
/* ===================== v3 additions ===================== */
:root{--accent:#C56E90;--accent-deep:#AE5A7D}
/* accent + decorated titles */
.eyebrow{color:var(--accent-deep)}
.eyebrow--light{color:#fff}
.hero__title em{color:var(--accent)}
.section__title em{font-style:italic;color:var(--accent)}
.section__mark{height:34px;width:auto;display:block;margin:0 auto .7rem;opacity:.92}
.section__mark--light{filter:brightness(0) invert(1);opacity:.8}
/* dropdown nav */
.nav__item{position:relative}
.nav__item>a{display:flex;align-items:center;gap:.28rem;position:relative;padding:.3rem 0;color:var(--ink);
opacity:.85;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;font-weight:400;cursor:pointer}
.nav__item>a:hover{opacity:1}
/* La flecha va en ::before con order:1 —o sea, después del texto— porque
::after ya lo ocupa el subrayado, y un elemento solo tiene un ::after. Antes
compartían el mismo: la flecha heredaba el subrayado absoluto (left:0,
bottom:-2px, width:0) y por eso caía suelta abajo a la izquierda del rótulo.
Y es un cuadro girado, no el carácter ⌄: ese glifo no existe en Jost, cada
sistema lo sustituía por otra fuente y con ella cambiaba su alineación. */
.nav__item--has>a::before{content:"";order:1;flex:none;width:.36em;height:.36em;
border:solid currentColor;border-width:0 1.2px 1.2px 0;opacity:.5;
transform:translateY(-.19em) rotate(45deg);transition:transform .25s,opacity .25s}
.nav__item--has:hover>a::before{opacity:.9;transform:translateY(.02em) rotate(225deg)}
.nav__item>a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:.25s}
.nav__item>a:hover::after{width:100%}
/* en los que llevan flecha el subrayado se para en la palabra: se descuentan
la flecha y su separación, los mismos valores de arriba */
.nav__item--has>a:hover::after{width:calc(100% - .36em - .28rem)}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:214px;
background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.5rem;
opacity:0;visibility:hidden;transition:.22s;z-index:60}
.nav__item--has:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.dropdown__link{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .8rem;
border-radius:9px;font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:none;color:var(--ink);opacity:1;transition:.18s}
.dropdown__link::after{display:none}
.dropdown__link span{font-size:var(--fs-3xs);color:var(--muted)}
.dropdown__link:hover{background:var(--tint);color:var(--accent-deep)}
/* product card: hover zoom + quick add */
.card__media{overflow:hidden}
.card__media img{transition:transform .5s ease}
.card:hover .card__media img{transform:scale(1.09)}
.card__add{position:absolute;left:12px;right:12px;bottom:12px;padding:.72rem;border:0;border-radius:100px;
background:var(--ink);color:#fff;font-family:'Jost',sans-serif;font-size:var(--fs-3xs);letter-spacing:.14em;
text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(14px);transition:.28s;z-index:2}
.card:hover .card__add{opacity:1;transform:translateY(0)}
.card__add:hover{background:var(--accent-deep)}
/* lookbook gallery (masonry) */
.lookbook{padding-bottom:5.5rem}
.gallery{columns:4;column-gap:14px}
.gallery img{width:100%;margin:0 0 14px;border-radius:14px;break-inside:avoid;display:block;
box-shadow:0 12px 30px -24px rgba(80,50,90,.5);transition:.4s;cursor:pointer}
.gallery img:hover{transform:translateY(-4px);box-shadow:var(--shadow);filter:saturate(1.06)}
/* cart drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(40,26,46,.4);opacity:0;visibility:hidden;transition:.3s;z-index:90;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drawer-overlay.is-on{opacity:1;visibility:visible}
.cart{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--cream);z-index:100;
display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:-20px 0 50px -30px rgba(0,0,0,.5)}
.cart.is-open{transform:none}
.cart__head{display:flex;justify-content:space-between;align-items:center;padding:1.3rem 1.5rem;border-bottom:1px solid var(--line)}
.cart__head h3{font-size:var(--fs-t3)}
.cart__close{background:none;border:0;font-size:var(--fs-t3);line-height:1;cursor:pointer;color:var(--ink)}
.cart__items{flex:1;overflow-y:auto;padding:1rem 1.5rem}
.cart__empty{color:var(--muted);text-align:center;margin-top:2.5rem}
.citem{display:flex;gap:.9rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line);position:relative}
.citem>img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:10px;flex:none;border:1px solid var(--line)}
.citem__info{flex:1}
.citem__name{margin:0;font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);line-height:1.1}
.citem__price{margin:.1rem 0 .45rem;color:var(--accent-deep);font-size:var(--fs-xs)}
.citem__qty{display:inline-flex;align-items:center;gap:.7rem}
.citem__qty button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:var(--fs-sm);line-height:1}
.citem__rm{position:absolute;top:.6rem;right:0;background:none;border:0;font-size:var(--fs-lg);color:var(--muted);cursor:pointer;line-height:1}
.cart__foot{padding:1.3rem 1.5rem;border-top:1px solid var(--line);background:#fff}
.cart__row{display:flex;justify-content:space-between;font-size:var(--fs-md);font-weight:500}
.cart__note{color:var(--muted);font-size:var(--fs-2xs);margin:.3rem 0 1rem}
.cart__checkout{display:block;text-align:center}
.badge{opacity:0;transition:.2s}
.badge.is-on{opacity:1}
/* promo popup */
.promo{position:fixed;inset:0;z-index:110;background:rgba(40,26,46,.5);display:grid;place-items:center;padding:1.2rem;
opacity:0;visibility:hidden;transition:.3s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.promo.is-on{opacity:1;visibility:visible}
.promo__box{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:720px;width:100%;background:var(--cream);
border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);transform:translateY(16px) scale(.98);transition:.35s}
.promo.is-on .promo__box{transform:none}
.promo__media{overflow:hidden}
.promo__media img{width:100%;height:100%;object-fit:cover;min-height:360px}
.promo__close{position:absolute;top:.7rem;right:.8rem;background:rgba(255,255,255,.85);border:0;width:32px;height:32px;
border-radius:50%;font-size:var(--fs-t5);line-height:1;cursor:pointer;z-index:2}
.promo__body{padding:2.4rem 2rem}
.promo__mark{height:34px;margin-bottom:.5rem}
.promo__title{font-size:var(--fs-t2);line-height:1.05;margin:.1rem 0 .5rem}
.promo__title em{font-style:italic;color:var(--accent)}
.promo__text{color:var(--muted);font-size:var(--fs-sm);margin:0 0 1.2rem}
.promo__form{display:flex;flex-direction:column;gap:.6rem}
.promo__form input{padding:.85rem 1.1rem;border-radius:100px;border:1px solid var(--line);font-family:inherit;font-size:var(--fs-sm)}
.promo__skip{background:none;border:0;color:var(--muted);font-size:var(--fs-2xs);margin-top:.8rem;cursor:pointer;text-decoration:underline}
/* v3 responsive */
@media(max-width:960px){ .gallery{columns:3} }
@media(max-width:640px){
.gallery{columns:2;column-gap:10px}
.gallery img{margin-bottom:10px;border-radius:10px}
.promo__box{grid-template-columns:1fr;max-width:380px}
.promo__media{display:none}
.promo__body{padding:2rem 1.5rem}
.nav.is-open{max-height:82vh;overflow:auto}
.nav__item>a{padding:.8rem 0;border-bottom:1px solid var(--line);width:100%}
.nav__item--has>a::before{margin-left:auto;margin-right:.2rem}
.dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:transparent;
padding:0 0 .5rem .8rem;min-width:0;max-height:0;overflow:hidden;transition:max-height .3s}
.nav__item.is-open .dropdown{max-height:320px}
.dropdown__link{padding:.55rem .4rem}
}
/* ===================== v4: softer titles, full-bleed lookbook, scroll motion ===================== */
.section__title{color:#6E5A85}
.news .section__title{color:#fff}
/* full-bleed lookbook */
.lookbook{max-width:none;padding:5rem clamp(14px,2.2vw,42px) 5.5rem}
.gallery{columns:5}
@media(max-width:1280px){.gallery{columns:4}}
@media(max-width:920px){.gallery{columns:3}}
@media(max-width:600px){.gallery{columns:2}}
/* scroll motion */
.hero__content{will-change:transform,opacity}
.hero__slide video{will-change:transform}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}
/* ===================== v5: shake band + lightbox ===================== */
.shakeband{background:#F5F2EE;padding:3.5rem 0 2.2rem;overflow:hidden;text-align:center}
.shakeband .section__head{margin-bottom:.3rem}
.shakeband__video{width:100%;max-width:1500px;margin:0 auto;display:block;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%)}
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(28,18,32,.92);display:grid;place-items:center;padding:2rem;
opacity:0;visibility:hidden;transition:.3s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lightbox.is-on{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lightbox__close{position:absolute;top:1rem;right:1.3rem;background:none;border:0;color:#fff;font-size:var(--fs-t2);line-height:1;cursor:pointer}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);
color:#fff;width:52px;height:52px;border-radius:50%;font-size:var(--fs-t3);line-height:1;cursor:pointer;transition:.2s}
.lightbox__nav:hover{background:#fff;color:var(--ink)}
.lightbox__nav.prev{left:1.3rem}.lightbox__nav.next{right:1.3rem}
@media(max-width:640px){.lightbox__nav{width:40px;height:40px;font-size:var(--fs-t5)}.lightbox__nav.prev{left:.6rem}.lightbox__nav.next{right:.6rem}}
/* ===================== v6: mega menu, search, heart, shimmer, richer hovers ===================== */
/* Agregar: permanent, bottom of card */
.card__add{position:static;opacity:1;transform:none;width:100%;margin-top:.9rem;padding:.72rem;border:0;border-radius:100px;
background:var(--ink);color:#fff;font-family:'Jost',sans-serif;font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.2s}
.card:hover .card__add{opacity:1;transform:none}
.card__add:hover{background:var(--accent-deep)}
.card__add:active{transform:scale(.97)}
/* richer hovers */
.card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.card:hover{transform:translateY(-8px);border-color:#E7CBDD;box-shadow:0 26px 50px -26px rgba(150,80,120,.45)}
.card__media img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__media img{transform:scale(1.25)}
.cat__img{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s,border-color .35s}
.cat:hover .cat__img{transform:translateY(-8px) rotate(-3deg);border-color:var(--accent)}
.cat:hover .cat__img img{transform:scale(1.12) rotate(3deg)}
/* heart pop */
.card__fav{transition:transform .2s,color .2s,background .2s}
.card__fav:hover{transform:scale(1.14)}
.card__fav.is-on{color:#DB5E93}
@keyframes heartpop{0%{transform:scale(1)}25%{transform:scale(.7)}55%{transform:scale(1.4)}100%{transform:scale(1)}}
.card__fav.pop{animation:heartpop .5s ease}
.card__fav.is-on::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #DB5E93;opacity:0;animation:heartring .5s ease;pointer-events:none}
@keyframes heartring{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(1.5)}}
.favbadge{position:absolute;top:0;right:0;background:#DB5E93;color:#fff;font-size:var(--fs-3xs);min-width:16px;height:16px;border-radius:10px;display:grid;place-items:center;padding:0 3px;opacity:0;transform:scale(.5);transition:.2s}
.favbadge.is-on{opacity:1;transform:scale(1)}
@keyframes favpulse{0%,100%{transform:scale(1)}40%{transform:scale(1.35)}}
.iconbtn.pulse img{animation:favpulse .5s ease}
/* search overlay */
.search{position:fixed;top:0;left:0;right:0;z-index:105;background:rgba(247,243,238,.98);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 40px -30px rgba(0,0,0,.4)}
.search.is-on{transform:none}
.search__panel{max-width:760px;margin:0 auto;padding:2.2rem 1.5rem 2rem;position:relative}
.search__form{display:flex;align-items:center;gap:.8rem;border-bottom:2px solid var(--ink);padding-bottom:.7rem}
.search__form img{width:26px;height:26px;opacity:.6}
.search__form input{flex:1;border:0;background:none;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t3);color:var(--ink);outline:none}
.search__form input::placeholder{color:var(--muted)}
.search__sugg{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:var(--fs-2xs);color:var(--muted)}
.search__sugg a{padding:.4rem .9rem;border:1px solid var(--line);border-radius:100px;color:var(--ink);transition:.2s}
.search__sugg a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.search__close{position:absolute;top:1rem;right:1rem;background:none;border:0;font-size:var(--fs-t3);line-height:1;cursor:pointer;color:var(--ink)}
/* mega dropdown */
.dropdown--mega{left:0;transform:translateX(0) translateY(8px);width:560px;display:flex;gap:.6rem;padding:.7rem}
.nav__item--has:hover .dropdown--mega{transform:translateX(0) translateY(4px)}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem;flex:1}
.dditem{display:flex;align-items:center;gap:.7rem;padding:.5rem;border-radius:12px;transition:.18s}
.dditem img{width:46px;height:46px;object-fit:contain;background:#F6F2EC;border-radius:11px;padding:5px;flex:none;transition:.2s}
.dditem span{display:flex;flex-direction:column;font-size:var(--fs-xs);color:var(--ink);line-height:1.25}
.dditem small{color:var(--muted);font-size:var(--fs-3xs);letter-spacing:.02em;margin-top:1px}
.dditem:hover{background:var(--tint)}
.dditem:hover img{transform:scale(1.07)}
.mega__feat{position:relative;width:172px;flex:none;border-radius:12px;overflow:hidden}
.mega__feat img{width:100%;height:100%;object-fit:cover;min-height:210px;transition:.5s}
.mega__feat:hover img{transform:scale(1.06)}
.mega__featlabel{position:absolute;left:0;right:0;bottom:0;padding:.8rem;background:linear-gradient(0deg,rgba(40,26,46,.72),transparent);
color:#fff;font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);display:flex;flex-direction:column;line-height:1.1}
.mega__featlabel em{font-style:normal;font-family:'Jost',sans-serif;font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;opacity:.92;margin-top:.35rem}
/* gallery shimmer + asymmetric reveal */
.gallery img{background:linear-gradient(100deg,#e9dfec 30%,#f5eef7 50%,#e9dfec 70%);background-size:200% 100%;animation:shimmer 1.5s linear infinite;min-height:170px}
.gallery img.loaded{animation:none;background:#efe7f1}
@keyframes shimmer{to{background-position:-200% 0}}
.gallery img.reveal{transform:translateY(40px) scale(.95)}
.gallery img.reveal.in{transform:none}
.gallery img:hover{transform:translateY(-6px) scale(1.06)!important;filter:saturate(1.12) brightness(1.05);position:relative;z-index:2;box-shadow:0 28px 46px -22px rgba(80,50,90,.6)}
/* empty cart */
.cart__empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 1rem;color:var(--muted)}
.cart__empty img{width:86px;height:86px;object-fit:contain;opacity:.85;margin-bottom:1rem}
.cart__empty strong{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t3);color:var(--ink);font-weight:600}
.cart__empty span{font-size:var(--fs-sm);margin:.3rem 0 1.4rem;max-width:16rem}
/* v6 responsive */
@media(max-width:640px){
.dropdown--mega{flex-direction:column;width:auto}
.mega__feat{display:none}.mega__grid{grid-template-columns:1fr}
.search__form input{font-size:var(--fs-t5)}
}
.lightbox img{will-change:opacity,transform}
@keyframes lbin{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
/* v7: equal-height cards, Agregar pinned to bottom */
.grid{grid-auto-rows:1fr}
.card{display:flex;flex-direction:column}
.card__body{display:flex;flex-direction:column;flex:1}
.card__add{margin-top:auto}
/* ===================== v8: PDP — página de producto ===================== */
.crumbs{max-width:var(--wrap);margin:0 auto;padding:1.5rem 1.6rem .3rem;font-size:var(--fs-2xs);letter-spacing:.05em;
color:var(--muted);display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.crumbs a{transition:.2s}
.crumbs a:hover{color:var(--accent-deep)}
.crumbs i{font-style:normal;opacity:.45}
.crumbs strong{font-weight:400;color:var(--ink)}
.pdp{max-width:var(--wrap);margin:0 auto;padding:1rem 1.6rem 4rem;display:grid;
grid-template-columns:1.05fr .95fr;gap:3.4rem;align-items:start}
/* --- galería --- */
.pdp__gallery{position:sticky;top:92px;display:grid;grid-template-columns:74px 1fr;gap:.9rem}
.pdp__thumbs{display:flex;flex-direction:column;gap:.55rem}
.pdp__thumb{width:74px;height:74px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
background:#fff;padding:6px;cursor:pointer;transition:.22s}
.pdp__thumb img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.pdp__thumb[data-fit="contain"] img{object-fit:contain}
.pdp__thumb:hover{border-color:var(--accent);transform:translateY(-2px)}
.pdp__thumb.is-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pdp__stage{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
background:#fff;aspect-ratio:1;display:grid;place-items:center;cursor:zoom-in;
box-shadow:0 18px 44px -34px rgba(80,50,90,.5)}
.pdp__stage img{width:100%;height:100%;object-fit:contain;padding:6%;transition:opacity .25s}
.pdp__stage[data-fit="cover"] img{object-fit:cover;padding:0}
.pdp__stage.is-zoom{background-repeat:no-repeat;background-size:215%;cursor:zoom-out}
.pdp__stage.is-zoom img{opacity:0}
.pdp__flag{position:absolute;top:1rem;left:1rem;z-index:2;background:var(--accent);color:#fff;font-size:var(--fs-3xs);
letter-spacing:.18em;text-transform:uppercase;padding:.42rem .85rem;border-radius:100px}
.pdp__hint{position:absolute;bottom:1rem;right:1rem;z-index:2;font-size:var(--fs-3xs);letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.88);padding:.36rem .75rem;
border-radius:100px;pointer-events:none;transition:.25s}
.pdp__stage.is-zoom .pdp__hint{opacity:0}
/* --- info --- */
.pdp__title{font-size:clamp(2.2rem,3.6vw,3.1rem);color:#6E5A85;margin:.1rem 0 .5rem}
.pdp__title em{font-style:italic;color:var(--accent)}
.pdp__meta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--muted);margin-bottom:1.1rem}
.pdp__sku{letter-spacing:.1em;text-transform:uppercase}
.pdp__stars{color:var(--gold);letter-spacing:.08em}
.pdp__stars span{color:var(--muted);margin-left:.35rem;letter-spacing:0}
.pdp__pricerow{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.25rem}
.pdp__price{font-size:var(--fs-t3);font-weight:500;color:var(--accent-deep);letter-spacing:.01em}
.pdp__was{color:var(--muted);text-decoration:line-through;font-size:var(--fs-md)}
.pdp__save{background:var(--soft);color:var(--accent-deep);font-size:var(--fs-3xs);letter-spacing:.12em;
text-transform:uppercase;padding:.3rem .7rem;border-radius:100px}
.pdp__msi{font-size:var(--fs-2xs);color:var(--muted);margin:0 0 1.4rem}
.pdp__desc{color:var(--muted);margin:0 0 1.6rem;max-width:32rem}
/* opciones */
.opt{margin-bottom:1.4rem}
.opt__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem}
.opt__label{font-size:var(--fs-3xs);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.opt__label b{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:.02em;margin-left:.4rem}
.opt__aside{font-size:var(--fs-2xs);color:var(--accent-deep);text-decoration:underline;background:none;border:0;
cursor:pointer;font-family:inherit;padding:0}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:100px;padding:.55rem 1.05rem;font-family:inherit;
font-size:var(--fs-2xs);color:var(--ink);cursor:pointer;transition:.2s;position:relative}
.chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip--swatch{padding-left:2.1rem}
.chip__dot{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);width:15px;height:15px;
border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.chip--out{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.chip--out:hover{border-color:var(--line);transform:none}
.opt__input{width:100%;padding:.8rem 1.1rem;border-radius:100px;border:1px solid var(--line);
font-family:inherit;font-size:var(--fs-sm);color:var(--ink);background:#fff}
.opt__input:focus{outline:none;border-color:var(--accent)}
.opt__count{font-size:var(--fs-3xs);color:var(--muted);margin:.4rem 0 0;text-align:right}
/* stock */
.stock{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-2xs);color:var(--ink);margin:0 0 1.3rem}
.stock__dot{width:8px;height:8px;border-radius:50%;background:#6FBF8B;box-shadow:0 0 0 3px rgba(111,191,139,.2)}
.stock--low .stock__dot{background:#E0A050;box-shadow:0 0 0 3px rgba(224,160,80,.2)}
.stock--low{color:#9A6A24}
/* acciones */
.buy{display:flex;gap:.7rem;align-items:stretch;margin-bottom:.9rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;background:#fff;flex:none}
.qty button{width:42px;height:100%;border:0;background:none;font-size:var(--fs-md);color:var(--ink);cursor:pointer;
transition:.2s;line-height:1;border-radius:100px}
.qty button:hover{color:var(--accent-deep)}
.qty input{width:36px;border:0;text-align:center;font-family:inherit;font-size:var(--fs-sm);color:var(--ink);
background:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy__add{flex:1;border:0;border-radius:100px;background:var(--ink);color:#fff;font-family:'Jost',sans-serif;
font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.25s;padding:1rem}
.buy__add:hover{background:var(--accent-deep)}
.buy__add:active{transform:scale(.985)}
.buy__add.is-done{background:#6FBF8B}
.buy__fav{flex:none;width:52px;border:1px solid var(--line);border-radius:100px;background:#fff;
color:var(--accent-deep);font-size:var(--fs-lg);cursor:pointer;transition:.2s;line-height:1}
.buy__fav:hover{border-color:var(--accent);transform:translateY(-1px)}
.buy__fav.is-on{color:#DB5E93}
.buy__wa{display:block;text-align:center;width:100%;margin-bottom:1.8rem}
/* trust */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.8rem}
.trust div{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-2xs);color:var(--muted)}
.trust img{width:32px;height:32px;object-fit:contain;flex:none}
/* acordeón */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:1.05rem .2rem;display:flex;justify-content:space-between;
align-items:center;font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);transition:.2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--accent-deep)}
.acc summary::after{content:"+";font-size:var(--fs-lg);color:var(--muted);transition:.25s;line-height:1}
.acc details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.acc__body{padding:0 .2rem 1.3rem;color:var(--muted);font-size:var(--fs-sm)}
.acc__body ul{margin:.5rem 0 0;padding-left:1.1rem}
.acc__body li{margin:.3rem 0}
.acc__body dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;margin:0}
.acc__body dt{color:var(--ink);font-size:var(--fs-2xs)}
.acc__body dd{margin:0;font-size:var(--fs-xs)}
/* barra sticky móvil */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(247,243,238,.96);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);
padding:.7rem 1rem;display:none;gap:.7rem;align-items:center;transform:translateY(110%);transition:transform .3s}
.buybar.is-on{transform:none}
.buybar img{width:42px;height:42px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;flex:none}
.buybar__info{flex:1;min-width:0}
.buybar__name{font-family:'Cormorant Garamond',serif;font-size:var(--fs-md);line-height:1.1;margin:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__price{margin:0;font-size:var(--fs-2xs);color:var(--accent-deep)}
.buybar button{border:0;border-radius:100px;background:var(--ink);color:#fff;font-family:'Jost',sans-serif;
font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;padding:.8rem 1.3rem;cursor:pointer;flex:none}
/* guía de tallas */
.sizeguide{position:fixed;inset:0;z-index:115;background:rgba(40,26,46,.5);display:grid;place-items:center;
padding:1.2rem;opacity:0;visibility:hidden;transition:.3s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sizeguide.is-on{opacity:1;visibility:visible}
.sizeguide__box{position:relative;background:var(--cream);border-radius:20px;max-width:460px;width:100%;
padding:2.2rem 2rem;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);transform:translateY(14px);transition:.32s}
.sizeguide.is-on .sizeguide__box{transform:none}
.sizeguide__box h3{font-size:var(--fs-t3);margin-bottom:.3rem}
.sizeguide__box p{color:var(--muted);font-size:var(--fs-xs);margin:.2rem 0 1.2rem}
.sizeguide table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.sizeguide th,.sizeguide td{padding:.55rem .4rem;text-align:left;border-bottom:1px solid var(--line)}
.sizeguide th{font-family:'Jost',sans-serif;font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sizeguide__close{position:absolute;top:.7rem;right:.9rem;background:none;border:0;font-size:var(--fs-t3);
line-height:1;cursor:pointer;color:var(--ink)}
/* v8 responsive */
@media(max-width:960px){
.pdp{grid-template-columns:1fr;gap:2.2rem}
.pdp__gallery{position:static;grid-template-columns:1fr}
.pdp__thumbs{flex-direction:row;order:2;overflow-x:auto;padding-bottom:.2rem}
.pdp__thumb{flex:none}
.trust{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.pdp{padding:.6rem 1.1rem 5.5rem}
.crumbs{padding:1rem 1.1rem .2rem}
.pdp__stage{cursor:default}
.pdp__hint{display:none}
.buybar{display:flex}
.trust{grid-template-columns:1fr}
.buy__add{letter-spacing:.12em}
}
/* ===================== v9: listado / resultados de búsqueda ===================== */
.shophead{max-width:var(--wrap);margin:0 auto;padding:2rem 1.6rem .4rem;text-align:center}
.shophead h1{font-size:clamp(2.1rem,4vw,3rem);color:#6E5A85}
.shophead h1 em{font-style:italic;color:var(--accent)}
.shophead p{color:var(--muted);margin:.6rem auto 0;max-width:34rem}
.shop{max-width:var(--wrap);margin:0 auto;padding:1.4rem 1.6rem 4.5rem;display:grid;
grid-template-columns:236px 1fr;gap:2.4rem;align-items:start}
/* filtros */
.filters{position:sticky;top:92px}
.filters__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.filters__top h2{font-family:'Jost',sans-serif;font-size:var(--fs-3xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.filters__clear{background:none;border:0;font-family:inherit;font-size:var(--fs-2xs);color:var(--accent-deep);
text-decoration:underline;cursor:pointer;padding:0}
.facet{border-top:1px solid var(--line);padding:1rem 0}
.facet__title{font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 .7rem}
.check{display:flex;align-items:center;gap:.6rem;padding:.32rem 0;cursor:pointer;font-size:var(--fs-xs);color:var(--ink);transition:.18s}
.check:hover{color:var(--accent-deep)}
.check input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid var(--line);
border-radius:5px;background:#fff;flex:none;cursor:pointer;transition:.18s;position:relative}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:var(--fs-3xs);display:grid;place-items:center}
.check small{margin-left:auto;color:var(--muted);font-size:var(--fs-2xs)}
.price{display:flex;align-items:center;gap:.5rem}
.price input{width:100%;padding:.5rem .7rem;border:1px solid var(--line);border-radius:100px;font-family:inherit;
font-size:var(--fs-2xs);color:var(--ink);background:#fff;min-width:0}
.price input:focus{outline:none;border-color:var(--accent)}
.price span{color:var(--muted);font-size:var(--fs-2xs)}
/* barra de herramientas */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:1.4rem}
.toolbar__count{font-size:var(--fs-xs);color:var(--muted)}
.toolbar__count b{color:var(--ink);font-weight:500}
.toolbar__right{display:flex;align-items:center;gap:.7rem}
.sort{padding:.55rem 2.1rem .55rem 1rem;border:1px solid var(--line);border-radius:100px;background:#fff;
font-family:inherit;font-size:var(--fs-2xs);color:var(--ink);cursor:pointer;appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right .9rem center;background-size:10px}
.sort:focus{outline:none;border-color:var(--accent)}
.filtersToggle{display:none}
/* chips de filtros activos */
.active{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.active:empty{display:none}
.active button{border:1px solid var(--accent);background:var(--soft);color:var(--accent-deep);border-radius:100px;
padding:.35rem .8rem .35rem .9rem;font-family:inherit;font-size:var(--fs-2xs);cursor:pointer;display:flex;align-items:center;gap:.45rem;transition:.18s}
.active button:hover{background:var(--accent);color:#fff}
.active button::after{content:"×";font-size:var(--fs-sm);line-height:1}
/* estado vacío */
.noresults{text-align:center;padding:4rem 1rem}
.noresults img{width:80px;height:80px;object-fit:contain;opacity:.75;margin:0 auto 1.2rem}
.noresults strong{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t3);color:var(--ink)}
.noresults p{color:var(--muted);margin:.4rem 0 1.5rem}
.noresults__sugg{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.noresults__sugg a{padding:.4rem .9rem;border:1px solid var(--line);border-radius:100px;font-size:var(--fs-2xs);transition:.2s}
.noresults__sugg a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* skeleton de carga */
.skel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.skel__media{aspect-ratio:1;background:linear-gradient(100deg,#efe7f1 30%,#f8f3f9 50%,#efe7f1 70%);
background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel__line{height:11px;border-radius:6px;margin:.7rem 1.1rem;background:linear-gradient(100deg,#efe7f1 30%,#f8f3f9 50%,#efe7f1 70%);
background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel__line--sm{width:44%;margin-bottom:1.2rem}
.loadmore{text-align:center;margin-top:3rem}
/* la tarjeta enlaza al PDP */
.card__link{display:block;color:inherit}
.card__link:hover .card__name{color:var(--accent-deep)}
/* v9 responsive */
@media(max-width:960px){
.shop{grid-template-columns:1fr;gap:1.2rem}
.filters{position:fixed;top:0;left:0;bottom:0;width:min(320px,88vw);background:var(--cream);z-index:100;
padding:1.4rem 1.3rem;overflow-y:auto;transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
box-shadow:20px 0 50px -30px rgba(0,0,0,.5)}
.filters.is-open{transform:none}
.filtersToggle{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.1rem;border:1px solid var(--line);
border-radius:100px;background:#fff;font-family:inherit;font-size:var(--fs-2xs);color:var(--ink);cursor:pointer}
.toolbar{justify-content:space-between}
}
@media(max-width:640px){
.shop{padding:1rem 1.1rem 4rem}
.shophead{padding:1.4rem 1.1rem .2rem}
.toolbar__count{width:100%;order:3}
}
/* ===================== v10: identidad de categoría =====================
El icono ilustra la categoría en el encabezado del listado.
No es una foto de producto y nunca aparece en una tarjeta de compra. */
.shophead__icon{width:96px;height:96px;margin:0 auto .9rem;border-radius:50%;background:#FCFAF7;
border:1px solid var(--line);display:grid;place-items:center;
box-shadow:0 16px 34px -24px rgba(80,50,90,.38);animation:catin .5s cubic-bezier(.2,.7,.2,1)}
.shophead__icon img{width:56%;height:56%;object-fit:contain}
@keyframes catin{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.shophead__icon{animation:none}}
@media(max-width:640px){.shophead__icon{width:74px;height:74px}}
/* vacío de categoría: la categoría existe, todavía no hay piezas */
.noresults__icon{width:92px;height:92px;margin:0 auto 1.2rem;border-radius:50%;background:#FCFAF7;
border:1px solid var(--line);display:grid;place-items:center}
.noresults__icon img{width:54%;height:54%;object-fit:contain;opacity:.9}
/* v11: unidad de venta junto a la cantidad (cm, g, par) */
.qty__unit{align-self:center;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none}
.pdp__price small{font-size:.55em;letter-spacing:.06em;color:var(--muted);font-weight:400}
.card__price small{font-size:.72em;color:var(--muted)}
/* ===================== v12: checkout ===================== */
.co-head{border-bottom:1px solid var(--line);background:rgba(247,243,238,.9);position:sticky;top:0;z-index:40;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.co-head__inner{max-width:var(--wrap);margin:0 auto;padding:1rem 1.6rem;display:flex;align-items:center;
justify-content:space-between;gap:1rem}
.co-head__brand{display:flex;align-items:center;gap:.55rem}
.co-head__brand img{height:38px;width:auto}
.co-head__secure{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
display:flex;align-items:center;gap:.45rem}
.co-head__secure img{width:20px;height:20px;object-fit:contain}
.co{max-width:1120px;margin:0 auto;padding:2rem 1.6rem 5rem;display:grid;grid-template-columns:1.35fr .85fr;gap:3rem;align-items:start}
/* progreso */
.prog{display:flex;align-items:center;gap:.6rem;margin-bottom:2rem}
.prog__step{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--muted)}
.prog__num{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;
display:grid;place-items:center;font-size:var(--fs-3xs);flex:none;transition:.25s}
.prog__step.is-on{color:var(--ink)}
.prog__step.is-on .prog__num{background:var(--ink);color:#fff;border-color:var(--ink)}
.prog__step.is-done .prog__num{background:var(--accent);color:#fff;border-color:var(--accent)}
.prog__line{flex:1;height:1px;background:var(--line);min-width:14px}
/* pasos */
.step{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:1rem;overflow:hidden}
.step__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;cursor:default}
.step__title{display:flex;align-items:center;gap:.7rem;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t4);color:var(--ink)}
.step__title span{width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--accent-deep);
display:grid;place-items:center;font-family:'Jost',sans-serif;font-size:var(--fs-2xs);flex:none}
.step__edit{background:none;border:0;font-family:inherit;font-size:var(--fs-2xs);color:var(--accent-deep);
text-decoration:underline;cursor:pointer;padding:0}
.step__body{padding:0 1.4rem 1.4rem;display:none}
.step.is-open .step__body{display:block}
.step.is-done .step__title span{background:var(--accent);color:#fff}
.step__summary{padding:0 1.4rem 1.1rem;color:var(--muted);font-size:var(--fs-xs);display:none}
.step.is-done:not(.is-open) .step__summary{display:block}
/* formulario */
.field{margin-bottom:.9rem}
.field label{display:block;font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;
font-family:inherit;font-size:var(--fs-sm);color:var(--ink);background:#fff;transition:.18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px rgba(197,110,144,.12)}
.field input[aria-invalid="true"]{border-color:#D9534F;box-shadow:0 0 0 3px rgba(217,83,79,.12)}
.field__err{display:none;color:#C0392B;font-size:var(--fs-2xs);margin-top:.3rem}
.field input[aria-invalid="true"] ~ .field__err{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field-row--3{grid-template-columns:1fr 1fr 1fr}
.field__hint{font-size:var(--fs-2xs);color:var(--muted);margin:.3rem 0 0}
.check-inline{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-xs);color:var(--ink);cursor:pointer;margin:.2rem 0 1rem}
.check-inline input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1px solid var(--line);
border-radius:5px;background:#fff;cursor:pointer;position:relative;flex:none}
.check-inline input:checked{background:var(--ink);border-color:var(--ink)}
.check-inline input:checked::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:var(--fs-3xs);display:grid;place-items:center}
/* opciones de envío */
.ship{display:grid;gap:.7rem;margin-bottom:.4rem}
.ship__opt{display:flex;align-items:center;gap:.9rem;border:1px solid var(--line);border-radius:14px;
padding:1rem 1.1rem;cursor:pointer;transition:.2s;background:#fff}
.ship__opt:hover{border-color:var(--accent)}
.ship__opt.is-on{border-color:var(--accent);background:var(--tint);box-shadow:0 0 0 1px var(--accent)}
.ship__radio{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);flex:none;position:relative;background:#fff}
.ship__opt.is-on .ship__radio{border-color:var(--accent)}
.ship__opt.is-on .ship__radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}
.ship__info{flex:1}
.ship__name{font-size:var(--fs-sm);color:var(--ink)}
.ship__desc{font-size:var(--fs-2xs);color:var(--muted)}
.ship__price{font-size:var(--fs-sm);color:var(--accent-deep);white-space:nowrap}
.ship__price.is-free{color:#5AA575}
/* pago: pendiente de integración */
.paynote{border:1px dashed var(--line);border-radius:14px;padding:1.3rem;background:#FCFAF7;text-align:center}
.paynote strong{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t5);color:var(--ink);margin-bottom:.2rem}
.paynote p{color:var(--muted);font-size:var(--fs-xs);margin:0 0 .9rem}
.paynote__logos{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.paynote__logos span{border:1px solid var(--line);border-radius:8px;padding:.4rem .8rem;font-size:var(--fs-2xs);
color:var(--muted);background:#fff;opacity:.65}
.co__next{width:100%;border:0;border-radius:100px;background:var(--ink);color:#fff;font-family:'Jost',sans-serif;
font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;padding:1rem;cursor:pointer;transition:.22s;margin-top:.4rem}
.co__next:hover{background:var(--accent-deep)}
.co__back{background:none;border:0;font-family:inherit;font-size:var(--fs-2xs);color:var(--muted);cursor:pointer;
margin-top:.7rem;text-decoration:underline;display:block;width:100%}
/* resumen */
.summary{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.4rem}
.summary h2{font-size:var(--fs-t4);margin-bottom:1rem}
.summary__items{max-height:320px;overflow-y:auto;margin:0 -.3rem 1rem;padding:0 .3rem}
.sitem{display:flex;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line);align-items:center}
.sitem img{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;flex:none}
.sitem__q{position:absolute;transform:translate(46px,-12px);background:var(--ink);color:#fff;font-size:var(--fs-3xs);
min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 4px}
.sitem__info{flex:1;min-width:0}
.sitem__name{margin:0;font-size:var(--fs-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem__var{margin:.1rem 0 0;font-size:var(--fs-2xs);color:var(--muted)}
.sitem__price{font-size:var(--fs-xs);color:var(--ink);white-space:nowrap}
.summary__row{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--muted);padding:.35rem 0}
.summary__row b{color:var(--ink);font-weight:400}
.summary__total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);
margin-top:.6rem;padding-top:.9rem;font-size:var(--fs-md);color:var(--ink)}
.summary__total b{font-size:var(--fs-t4);font-family:'Cormorant Garamond',serif;color:var(--accent-deep)}
.summary__free{background:var(--tint);border-radius:10px;padding:.6rem .8rem;font-size:var(--fs-2xs);color:var(--accent-deep);margin-top:.9rem}
.summary__free b{font-weight:500}
.summary__bar{height:5px;border-radius:5px;background:#fff;border:1px solid var(--line);margin-top:.45rem;overflow:hidden}
.summary__bar i{display:block;height:100%;background:var(--accent);transition:width .4s}
.coupon{display:flex;gap:.5rem;margin-top:1rem}
.coupon input{flex:1;padding:.65rem .9rem;border:1px solid var(--line);border-radius:100px;font-family:inherit;font-size:var(--fs-xs)}
.coupon button{border:1px solid var(--line);background:#fff;border-radius:100px;padding:.65rem 1.1rem;
font-family:inherit;font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.2s}
.coupon button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* confirmación */
.done{max-width:640px;margin:0 auto;padding:4rem 1.6rem 5rem;text-align:center}
.done__mark{width:82px;height:82px;border-radius:50%;background:var(--tint);display:grid;place-items:center;
margin:0 auto 1.4rem;animation:pop .5s cubic-bezier(.2,.7,.2,1)}
.done__mark span{font-size:var(--fs-t2);color:var(--accent)}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.done h1{font-size:clamp(2rem,4vw,2.8rem);color:#6E5A85;margin-bottom:.5rem}
.done h1 em{font-style:italic;color:var(--accent)}
.done__lead{color:var(--muted);margin-bottom:2rem}
.done__card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.5rem;text-align:left;margin-bottom:1.4rem}
.done__row{display:flex;justify-content:space-between;padding:.4rem 0;font-size:var(--fs-sm);color:var(--muted)}
.done__row b{color:var(--ink);font-weight:400}
.done__next{display:grid;gap:.7rem;text-align:left;margin-bottom:2rem}
.done__next div{display:flex;gap:.8rem;align-items:flex-start;font-size:var(--fs-xs);color:var(--muted)}
.done__next i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--accent-deep);
display:grid;place-items:center;font-size:var(--fs-2xs);flex:none}
@media(max-width:900px){
.co{grid-template-columns:1fr;gap:1.6rem;padding-top:1.4rem}
.summary{position:static;order:-1}
.summary__items{max-height:none}
}
@media(max-width:640px){
.co{padding:1rem 1.1rem 3rem}
.field-row,.field-row--3{grid-template-columns:1fr}
.prog__step span:not(.prog__num){display:none}
}
/* ===================== v13: página de kits ===================== */
.kits-hero{max-width:var(--wrap);margin:0 auto;padding:3rem 1.6rem 1rem;text-align:center}
.kits-hero h1{font-size:clamp(2.3rem,5vw,3.6rem);color:#6E5A85}
.kits-hero h1 em{font-style:italic;color:var(--accent)}
.kits-hero p{color:var(--muted);max-width:44rem;margin:.9rem auto 0}
.kits-hero__note{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;background:var(--tint);
color:var(--accent-deep);border-radius:100px;padding:.5rem 1.1rem;font-size:var(--fs-2xs)}
/* Espacio extra arriba de cada tarjeta: las piezas se salen del contenedor
a propósito, así que la rejilla necesita aire para que no se corten. */
.kits{max-width:var(--wrap);margin:0 auto;padding:2rem 1.6rem 4rem;display:grid;
grid-template-columns:repeat(2,1fr);gap:9rem 2rem;position:relative}
.kit{border:1px solid var(--line);border-radius:22px;background:#fff;
display:flex;flex-direction:column;position:relative;overflow:visible;
transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.kit:hover{transform:translateY(-6px);border-color:#E7CBDD;box-shadow:0 34px 60px -30px rgba(150,80,120,.4);z-index:20}
/* --- escenario: la bolsa y las piezas saliendo --- */
.kit__stage{position:relative;aspect-ratio:1/.82;border-radius:21px 21px 0 0;
background:radial-gradient(120% 90% at 50% 105%, #F7EEF6 0%, #FCFAF7 55%, #fff 100%);
overflow:visible;display:grid;place-items:end center;padding-bottom:6%}
.kit__bag{position:relative;z-index:3;width:50%;height:auto;filter:drop-shadow(0 18px 26px rgba(120,80,130,.22))}
.kit__floor{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);width:56%;height:16px;z-index:2;
background:radial-gradient(50% 50% at 50% 50%, rgba(120,80,130,.22), transparent 70%)}
/* Envoltorio = posición (se mueve al hacer hover).
La imagen de dentro = movimiento propio en bucle, para que cada pieza
flote a su ritmo y no todas a la vez. */
/* z-index 1 SIEMPRE: por debajo de la bolsa (z-3). Lo que quede sobre la
silueta se oculta detrás, y por eso se lee como que salen de adentro. */
.fly{position:absolute;left:50%;bottom:24%;width:var(--w,10%);z-index:1;pointer-events:none;
transform:translate(-50%,24px) scale(.62);opacity:.35;
transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.kit:hover .fly{transform:translate(calc(-50% + var(--x)), var(--y)) scale(1);opacity:1}
.fly img{display:block;width:100%;transform:rotate(var(--r,0deg));
filter:drop-shadow(0 12px 16px rgba(120,80,130,.26))}
.kit:hover .fly img{animation:bob var(--dur,3.2s) ease-in-out var(--d,0s) infinite}
@keyframes bob{
0%,100%{transform:rotate(var(--r)) translate(0,0)}
25%{transform:rotate(calc(var(--r) + 2.5deg)) translate(var(--dx,4px), calc(var(--dy,-10px)*.55))}
50%{transform:rotate(var(--r)) translate(0, var(--dy,-10px))}
75%{transform:rotate(calc(var(--r) - 2.5deg)) translate(calc(var(--dx,4px)*-1), calc(var(--dy,-10px)*.45))}
}
@media(prefers-reduced-motion:reduce){
.fly{transition:none}
.kit:hover .fly img{animation:none}
}
/* --- cuerpo de la tarjeta --- */
.kit__body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1;
border-top:1px solid var(--line);background:#fff;border-radius:0 0 21px 21px;position:relative;z-index:5}
.kit__eyebrow{font-size:var(--fs-3xs);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 .3rem}
.kit__name{font-size:var(--fs-t2);color:#6E5A85;margin:0 0 .3rem}
.kit__name em{font-style:italic;color:var(--accent)}
.kit__why{color:var(--muted);font-size:var(--fs-xs);margin:0 0 1rem}
.kit__figs{display:flex;gap:1.6rem;padding:.9rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:1rem}
.kit__fig b{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t3);color:var(--ink);line-height:1}
.kit__fig span{font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kit__price{margin-left:auto;text-align:right}
.kit__price b{color:var(--accent-deep);font-size:var(--fs-t2)}
.kit__list{margin:0 0 1rem;padding:0;list-style:none;font-size:var(--fs-xs)}
.kit__list li{display:grid;grid-template-columns:40px 30px 1fr auto;gap:.75rem;align-items:center;
padding:.42rem 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.kit__thumb{width:40px;height:40px;object-fit:contain;background:#fff;border:1px solid var(--line);
border-radius:9px;padding:2px}
.kit__qty{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);color:var(--accent-deep);text-align:center}
.kit__what{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.kit__what b{color:var(--ink);font-weight:400;font-size:var(--fs-sm)}
.kit__what small{color:var(--muted);font-size:var(--fs-3xs);letter-spacing:.1em;text-transform:uppercase}
.kit__lp{white-space:nowrap;color:var(--ink);font-size:var(--fs-xs)}
.kit__list.is-clipped li:nth-child(n+6){display:none}
.kit__more{background:none;border:0;font-family:inherit;font-size:var(--fs-2xs);color:var(--accent-deep);
text-decoration:underline;cursor:pointer;padding:0;margin-bottom:1.1rem;align-self:flex-start}
.kit__add{margin-top:auto;width:100%;border:0;border-radius:100px;background:var(--ink);color:#fff;
font-family:'Jost',sans-serif;font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
padding:1rem;cursor:pointer;transition:.22s}
.kit__add:hover{background:var(--accent-deep)}
.kit__add.is-done{background:#6FBF8B}
.kit__hint{text-align:center;font-size:var(--fs-2xs);color:var(--muted);margin:.6rem 0 0}
@media(max-width:900px){ .kits{grid-template-columns:1fr;gap:4.5rem} }
@media(max-width:640px){
.kits{padding:1.2rem 1.1rem 3rem;gap:3.5rem}
.kit__stage{aspect-ratio:1/.9}
.kit__figs{gap:1rem}
}
/* ===================== v14: carrito, cuenta, pedidos, tendencias ===================== */
.page{max-width:var(--wrap);margin:0 auto;padding:2.4rem 1.6rem 4.5rem}
.page__head{text-align:center;margin-bottom:2.2rem}
.page__head h1{font-size:clamp(2rem,4vw,3rem);color:#6E5A85}
.page__head h1 em{font-style:italic;color:var(--accent)}
.page__head p{color:var(--muted);margin:.7rem auto 0;max-width:36rem}
/* --- carrito completo --- */
.cartpage{display:grid;grid-template-columns:1.5fr .8fr;gap:2.4rem;align-items:start}
.lines{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.line{display:grid;grid-template-columns:96px 1fr auto;gap:1.1rem;padding:1.1rem 1.3rem;
border-bottom:1px solid var(--line);align-items:center}
.line:last-child{border-bottom:0}
.line__img{width:96px;height:96px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:12px}
.line__name{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t5);margin:0;color:var(--ink)}
.line__var{font-size:var(--fs-2xs);color:var(--muted);margin:.15rem 0 .5rem}
.line__unit{font-size:var(--fs-xs);color:var(--accent-deep);margin:0 0 .55rem}
.line__right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.line__total{font-size:var(--fs-md);color:var(--ink)}
.line__rm{background:none;border:0;font-family:inherit;font-size:var(--fs-2xs);color:var(--muted);
text-decoration:underline;cursor:pointer;padding:0}
.line__rm:hover{color:#C0392B}
.emptybox{text-align:center;padding:4rem 1.5rem;border:1px dashed var(--line);border-radius:var(--radius);background:#fff}
.emptybox img{width:84px;height:84px;object-fit:contain;opacity:.8;margin:0 auto 1rem}
.emptybox strong{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t3);color:var(--ink)}
.emptybox p{color:var(--muted);margin:.4rem 0 1.4rem}
/* --- cuenta --- */
.authbox{max-width:430px;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:2rem}
.tabs{display:flex;gap:.4rem;background:var(--tint);border-radius:100px;padding:.3rem;margin-bottom:1.6rem}
.tabs button{flex:1;border:0;background:none;font-family:inherit;font-size:var(--fs-2xs);letter-spacing:.06em;
padding:.6rem;border-radius:100px;cursor:pointer;color:var(--muted);transition:.2s}
.tabs button.is-on{background:#fff;color:var(--ink);box-shadow:0 4px 12px -8px rgba(80,50,90,.5)}
.authnote{background:var(--tint);border-radius:12px;padding:.9rem 1rem;font-size:var(--fs-2xs);color:var(--accent-deep);margin-bottom:1.2rem}
/* --- pedidos --- */
.orders{display:grid;gap:1rem}
.order{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.order__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
padding:1rem 1.3rem;background:#FCFAF7;border-bottom:1px solid var(--line)}
.order__ref{font-size:var(--fs-sm);color:var(--ink)}
.order__ref b{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t5)}
.order__state{font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;border-radius:100px;
padding:.32rem .8rem;background:var(--soft);color:var(--accent-deep)}
.order__state.is-done{background:#E3F3E9;color:#3F7A55}
.order__body{padding:1rem 1.3rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.order__body img{width:54px;height:54px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff}
.order__more{font-size:var(--fs-2xs);color:var(--muted)}
/* --- tendencias --- */
.trendbadge{position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--ink);color:#fff;
font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;padding:.34rem .7rem;border-radius:100px}
.trendbadge.is-new{background:var(--accent)}
.rankwrap{position:relative}
.rank{position:absolute;top:.7rem;left:.7rem;z-index:2;width:30px;height:30px;border-radius:50%;
background:var(--ink);color:#fff;display:grid;place-items:center;font-size:var(--fs-2xs);
font-family:'Cormorant Garamond',serif}
@media(max-width:900px){ .cartpage{grid-template-columns:1fr} }
@media(max-width:640px){
.line{grid-template-columns:72px 1fr;gap:.8rem}
.line__img{width:72px;height:72px}
.line__right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}
/* chip activo en "más vendidos" del home */
.search__sugg a.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* ===================== v15: tendencias — carril de movimiento ===================== */
.tr-summary{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.6rem 0 .4rem}
.tr-summary span{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #DDD2E2;
background:#fff;border-radius:100px;padding:.55rem 1.15rem;font-size:var(--fs-xs);color:#5C5165}
.tr-summary b{color:var(--ink);font-weight:500;font-size:var(--fs-md)}
.tr-summary i{font-style:normal;width:10px;height:10px;border-radius:50%}
.i-up{background:var(--lilac-deep)} .i-down{background:#B3A9BB} .i-new{background:var(--lilac)}
.tr-scale{display:grid;grid-template-columns:58px 66px 156px 1fr auto;gap:1.1rem;
max-width:1080px;margin:2.2rem auto .6rem;padding:0 1.6rem;align-items:end}
.tr-scale u{grid-column:4;display:flex;justify-content:space-between;text-decoration:none;
font-size:var(--fs-3xs);letter-spacing:.18em;text-transform:uppercase;color:#8E8296;
border-bottom:1px solid #DDD2E2;padding-bottom:.4rem}
.tr-list{max-width:1080px;margin:0 auto;padding:0 1.6rem 1rem;list-style:none}
.tr-row{display:grid;grid-template-columns:58px 66px 156px 1fr auto;gap:1.1rem;align-items:center;
padding:.85rem 1rem;margin-bottom:.5rem;border-radius:16px;background:#fff;
border:1px solid #E6DCE9;transition:.22s}
.tr-row:hover{border-color:var(--lilac);box-shadow:0 18px 34px -26px rgba(120,80,150,.5);transform:translateX(3px)}
.tr-pos{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t2);font-weight:600;
color:#4A3D55;text-align:center;line-height:1}
.tr-row:nth-child(-n+3) .tr-pos{color:#fff;background:var(--ink);border-radius:12px;
width:48px;height:48px;display:grid;place-items:center;margin:0 auto;font-size:var(--fs-t3)}
.tr-thumb{width:66px;height:66px;object-fit:contain;background:#fff;border:1px solid #E6DCE9;border-radius:13px}
.tr-name{margin:.1rem 0 0;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t4);
color:var(--ink);line-height:1.1;letter-spacing:.01em}
.tr-cat{font-size:var(--fs-3xs);letter-spacing:.18em;text-transform:uppercase;color:#8B7C99;font-weight:500}
/* carril: izquierda = puesto 20 · derecha = puesto 1 */
.lane{position:relative;height:44px;min-width:150px}
.lane__track{position:absolute;left:0;right:0;top:50%;height:3px;border-radius:3px;
background:#E0D4E5;transform:translateY(-50%)}
.lane__tick{position:absolute;top:50%;width:1px;height:13px;background:#E0D4E5;transform:translateY(-50%)}
.lane__seg{position:absolute;top:50%;height:5px;border-radius:4px;transform:translateY(-50%);z-index:1}
.lane__seg.up{background:linear-gradient(90deg,#E3D3EA,var(--lilac-deep))}
.lane__seg.down{background:linear-gradient(90deg,var(--lilac-deep),#BDB2C4)}
.lane__seg.new{background:repeating-linear-gradient(90deg,var(--lilac) 0 7px,transparent 7px 14px);height:4px}
.lane__seg.far{background:linear-gradient(90deg,rgba(180,135,198,0),var(--lilac-deep))}
.lane__dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
transform:translate(-50%,-50%);background:var(--ink);box-shadow:0 0 0 3px #fff,0 0 0 4px #DFD2E6;z-index:3}
.lane__dot--from{width:12px;height:12px;background:#C3B8CB;box-shadow:0 0 0 3px #fff,0 0 0 4px #E6DCE9}
.lane__tag{position:absolute;top:50%;transform:translate(0,-50%);font-size:var(--fs-3xs);font-weight:500;
letter-spacing:.1em;text-transform:uppercase;color:#7A6E82;white-space:nowrap;z-index:4;
background:#fff;padding:.1rem .5rem .1rem 0}
.tr-right{text-align:right;display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;min-width:132px}
.tr-move{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-2xs);font-weight:500;
border-radius:100px;padding:.34rem .8rem;white-space:nowrap}
.tr-move.up{background:var(--lilac-deep);color:#fff}
.tr-move.down{background:#EFEAF2;color:#5C5165}
.tr-move.new{background:var(--soft);color:#6E5A85}
.tr-pct{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t4);line-height:1;color:#6E5A85}
.tr-pct.is-down{color:#6E6277}
.tr-price{font-size:var(--fs-sm);color:#5C5165}
@media(max-width:900px){
.tr-scale{display:none}
.tr-row{grid-template-columns:52px 58px 1fr;gap:.8rem;row-gap:.7rem;padding:.9rem}
.lane{grid-column:1/-1;order:5;height:38px}
.tr-right{grid-column:1/-1;order:6;flex-direction:row;justify-content:space-between;
align-items:center;width:100%;min-width:0}
.tr-name{font-size:var(--fs-t5)}
}
/* v16: el nombre del kit vive arriba del escenario, sobre la bolsa */
.kit__title{position:absolute;top:0;left:0;right:0;z-index:0;text-align:center;
padding:1.4rem 1.2rem 2.6rem;pointer-events:none;
background:linear-gradient(180deg,#FFFDFB 0%,rgba(255,253,251,.92) 42%,rgba(255,253,251,0) 100%)}
.kit__tagline{font-size:var(--fs-3xs);letter-spacing:.22em;text-transform:uppercase;
color:var(--accent-deep);margin:0 0 .35rem;font-weight:500}
.kit__title h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.1rem,3.4vw,2.9rem);
line-height:1;color:#5A4A6B;margin:0}
.kit__title h2 em{font-style:italic;color:var(--accent)}
/* el cuerpo empieza directo en la descripción */
.kit__body .kit__why{margin-top:.2rem}
@media(max-width:640px){
.kit__title{padding:1.1rem .9rem 2.2rem}
.kit__title h2{font-size:var(--fs-t3)}
}
/* v17: las piezas pasan POR ENCIMA del título; la bolsa se sacude al pasar el cursor */
.kit__stage{isolation:isolate} /* contexto propio: el z-index no se escapa de la tarjeta */
.kit__bag{transform-origin:50% 100%} /* pivota en la base, como bolsa apoyada */
.kit:hover .kit__bag{animation:bagshake .78s cubic-bezier(.3,.7,.3,1) both}
@keyframes bagshake{
0%{transform:rotate(0deg) translateY(0)}
10%{transform:rotate(-1.7deg) translateY(-3px)}
26%{transform:rotate(1.5deg) translateY(-1px)}
42%{transform:rotate(-1.1deg) translateY(-2px)}
58%{transform:rotate(.8deg) translateY(0)}
74%{transform:rotate(-.5deg) translateY(-1px)}
88%{transform:rotate(.25deg) translateY(0)}
100%{transform:rotate(0deg) translateY(0)}
}
@media(prefers-reduced-motion:reduce){ .kit:hover .kit__bag{animation:none} }
/* v18: titular con la fuente de Nano Studio Pro en las portadas de categoría */
.shophead nano-type{display:block;width:100%;
/* la caja de la em deja aire arriba y bajo la línea base; el componente
publica cuánto, así que se recorta con sus propias medidas */
margin-top:calc(var(--nano-cap-top, 0px) * -1);
margin-bottom:calc((var(--nano-content-height, 0px) - var(--nano-baseline, 0px)) * -1)}
.shophead h1:has(nano-type){line-height:1;max-width:none;display:block;margin:0}
/* la caja del glifo ya trae su propio aire: no hace falta añadir más */
.shophead:has(nano-type){padding-top:1.6rem;padding-bottom:0}
.shophead:has(nano-type) .eyebrow{margin-bottom:.35rem}
.shophead:has(nano-type) #headLead{margin-top:.5rem}
/* v19: el atributo hidden debe ganarle a cualquier display de autor.
Sin esto, .shophead__icon{display:grid} anulaba el hidden y se veía
un roto en la tienda sin categoría. */
[hidden]{display:none !important}
/* ===================== v20: legibilidad de los encabezados ===================== */
/* El cuerpo va en Jost 300; a 16px y en gris claro los textos de apoyo
costaban leerse. Suben tamaño, peso y contraste. */
.section__title{font-size:clamp(2.3rem,4.4vw,3.4rem)}
.section__lead{font-size:var(--fs-md);line-height:1.6;font-weight:400;color:#5F5468;max-width:36rem}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:.26em}
.shophead p,.page__head p,.kits-hero p{font-size:var(--fs-md);line-height:1.6;font-weight:400;color:#5F5468}
.card__cat{font-size:var(--fs-3xs);letter-spacing:.18em}
.card__name{font-size:var(--fs-t5)}
.benefit h4{font-size:var(--fs-sm)}
.benefit p{font-size:var(--fs-xs);font-weight:400}
.footer__col a{font-size:var(--fs-sm);font-weight:400}
.footer__brand p{font-size:var(--fs-sm);font-weight:400}
.kit__why{font-size:var(--fs-sm);font-weight:400;color:#5F5468}
.news p{font-size:var(--fs-md);opacity:.92}
/* ===================== v21: pie con iconos ===================== */
.footer{padding-top:3rem}
.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem}
.footer__brand img{height:66px}
.footer__brand p{margin-bottom:1.1rem}
/* redes */
.social{display:flex;gap:.55rem}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
display:grid;place-items:center;color:var(--accent-deep);transition:.22s}
.social a:hover{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep);transform:translateY(-2px)}
.social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.social svg .fill{fill:currentColor;stroke:none}
/* enlaces con icono */
.footer__col a{display:flex;align-items:center;gap:.6rem;padding:.34rem 0;transition:.2s}
.footer__col a img{width:22px;height:22px;object-fit:contain;opacity:.62;transition:.2s;flex:none}
.footer__col a:hover img{opacity:1;transform:scale(1.12)}
.footer__col a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:.2s}
.footer__col a:hover svg{opacity:1}
/* franja de garantías */
.footer__trust{max-width:var(--wrap);margin:2.6rem auto 0;padding:1.4rem 0 0;border-top:1px solid var(--line);
display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.footer__trust span{display:flex;align-items:center;gap:.65rem;font-size:var(--fs-xs);color:var(--muted)}
.footer__trust img{width:34px;height:34px;object-fit:contain;flex:none;opacity:.8}
.footer__trust b{display:block;color:var(--ink);font-weight:400;font-size:var(--fs-sm)}
@media(max-width:960px){
.footer__grid{grid-template-columns:1fr 1fr;gap:1.8rem}
.footer__trust{grid-template-columns:1fr 1fr;gap:.9rem}
}
@media(max-width:560px){
.footer__grid{grid-template-columns:1fr}
.footer__trust{grid-template-columns:1fr}
}
/* ===================== v22: shake band — el video se expande, se va, y cae el texto ===================== */
.shakeband__stage{position:relative}
.shakeband__video{aspect-ratio:1928/1072;transition:opacity 1.1s ease}
.shakeband__stage.is-clean .shakeband__video{opacity:0}
.shakeband__type{position:absolute;inset:0;margin:0;z-index:2;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:clamp(6px,1.1vw,18px);padding:0 1.2rem;
text-align:center;pointer-events:none}
.shakeband__stage.is-clean .shakeband__type{pointer-events:auto}
/* sin transición propia: el movimiento es la caída glifo por glifo del componente */
.shakeband__line{display:block;width:100%;opacity:0;
/* respaldo por si el módulo de nano-type no carga: el texto sigue leyéndose */
font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.9rem,6vw,4.2rem);
line-height:1.05;letter-spacing:.06em;color:var(--ink)}
.shakeband__line.is-in{opacity:1}
/* flow-root para que el aire que reserva la animación quede dentro de la caja del
componente y el JS lo pueda recortar; los márgenes finos los pone él, medidos */
.shakeband__line nano-type{display:flow-root;
margin-top:calc(var(--nano-cap-top, 0px) * -1);
margin-bottom:calc((var(--nano-content-height, 0px) - var(--nano-baseline, 0px)) * -1)}
.shakeband__cta{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,30px);
width:100%;text-decoration:none;color:inherit;padding-top:clamp(6px,1.1vw,18px)}
.shakeband__mail{width:clamp(58px,6.6vw,104px);height:auto;display:block;
opacity:0;transform:translateY(16px) rotate(-3deg);
transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1)}
.shakeband__stage.is-mail .shakeband__mail{opacity:1;transform:none}
.shakeband__cta:hover .shakeband__mail{transform:translateY(-6px) rotate(3deg)}
.shakeband__cta:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:12px}
@media(prefers-reduced-motion:reduce){
.shakeband__video,.shakeband__mail{transition:none}
.shakeband__line{opacity:1}
.shakeband__stage.is-mail .shakeband__mail{transform:none}
}
/* ===================== v23: shop the look — puntos sobre la foto ===================== */
/* de orilla a orilla: la foto es el ancho del navegador, el encabezado sigue centrado */
.shoplook{position:relative;overflow:hidden;max-width:none;padding:5.5rem 0 1.2rem;
background:linear-gradient(180deg,var(--white) 0%,#F8F3F8 45%,var(--tint) 100%)}
.shoplook .section__head{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 1.6rem}
.shoplook__stage{position:relative;width:100%;margin:0}
/* manchas de color detrás del recorte: es lo que hace que la foto no se vea pegada */
.shoplook__aura{position:absolute;left:-8%;right:-8%;top:-12%;bottom:2%;z-index:0;
filter:blur(70px);opacity:.9;pointer-events:none;
background:
radial-gradient(38% 48% at 20% 45%,rgba(217,184,221,.75) 0%,rgba(217,184,221,0) 70%),
radial-gradient(34% 42% at 55% 26%,rgba(198,158,212,.5) 0%,rgba(198,158,212,0) 70%),
radial-gradient(40% 46% at 86% 52%,rgba(232,199,158,.45) 0%,rgba(232,199,158,0) 70%)}
.shoplook__frame{position:relative;z-index:1;line-height:0}
/* el recorte se disuelve hacia abajo para que no se vea el corte de cintura */
.shoplook__photo{width:100%;height:auto;
-webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.55) 84%,transparent 99%);
mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.55) 84%,transparent 99%)}
.shoplook__spots{position:absolute;inset:0}
.shoplook__hint{text-align:center;color:var(--muted);font-size:var(--fs-2xs);letter-spacing:.1em;
text-transform:uppercase;margin:.4rem 0 0}
@media(hover:hover){.shoplook__hint{display:none}}
/* --- el punto --- */
.spot{position:absolute;width:0;height:0;z-index:2}
.spot.is-on{z-index:5}
.spot__dot{position:absolute;left:-16px;top:-16px;width:32px;height:32px;padding:0;border:0;
background:none;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.spot__dot::before{content:'';width:9px;height:9px;border-radius:50%;background:#fff;
box-shadow:0 0 0 1.5px rgba(52,42,59,.30),0 4px 12px rgba(52,42,59,.30);
transition:width .3s cubic-bezier(.2,.8,.25,1),height .3s cubic-bezier(.2,.8,.25,1),background .3s}
/* halo que respira, desfasado punto por punto */
.spot__dot::after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;
border:1px solid rgba(255,255,255,.9);animation:spotPulse 3.4s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes spotPulse{
0%{transform:scale(1);opacity:.9}
70%{transform:scale(3.2);opacity:0}
100%{transform:scale(3.2);opacity:0}
}
.spot__dot:hover::before,.spot.is-on .spot__dot::before{width:15px;height:15px;background:var(--lilac)}
.spot.is-on .spot__dot::after{animation:none;opacity:0}
.spot__dot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* --- la ficha --- */
.spot__card{position:absolute;left:16px;top:16px;width:232px;display:flex;gap:.7rem;
background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
border:1px solid var(--line);border-radius:14px;padding:.6rem;text-decoration:none;color:var(--ink);
box-shadow:0 20px 40px -18px rgba(80,50,90,.45);
opacity:0;visibility:hidden;transform:translateY(8px) scale(.94);transform-origin:top left;
transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.25,1),visibility .28s}
.spot--left .spot__card{left:auto;right:16px;transform-origin:top right}
.spot--up .spot__card{top:auto;bottom:16px;transform-origin:bottom left}
.spot--left.spot--up .spot__card{transform-origin:bottom right}
.spot.is-on .spot__card{opacity:1;visibility:visible;transform:none}
.spot__shot{flex:0 0 74px;height:74px;border-radius:10px;overflow:hidden;background:#fff;
border:1px solid var(--line);display:grid;place-items:center}
.spot__shot img{width:100%;height:100%;object-fit:contain}
.spot__body{display:flex;flex-direction:column;justify-content:center;gap:.12rem;min-width:0;line-height:1.25}
.spot__cat{font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.spot__name{font-family:'Cormorant Garamond',Georgia,serif;font-size:var(--fs-lg);font-weight:600}
.spot__price{font-size:var(--fs-sm);display:flex;align-items:baseline;gap:.4rem}
.spot__price em{font-style:normal;font-size:var(--fs-3xs);letter-spacing:.1em;color:var(--muted)}
.spot__go{font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;color:var(--lilac-deep);margin-top:.15rem}
.spot__card:hover{border-color:var(--lilac)}
@media(max-width:760px){
.spot__card{width:186px;padding:.5rem}
.spot__shot{flex-basis:58px;height:58px}
.spot__name{font-size:var(--fs-sm)}
.shoplook__aura{filter:blur(45px)}
/* a 390 px los once puntos caen a 20 px unos de otros: la foto se ve a mayor
escala y la sección se desliza, así cada punto sigue siendo tocable */
.shoplook__stage{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shoplook__stage::-webkit-scrollbar{display:none}
.shoplook__frame{min-width:660px}
.shoplook__aura{left:0;right:0}
}
@media(prefers-reduced-motion:reduce){
.spot__dot::after{animation:none;opacity:0}
.spot__card{transition:opacity .01s}
}
/* ===================== v24: reseñas (contenido de muestra) ===================== */
.revs{background:var(--cream)}
.stars{color:var(--lilac);letter-spacing:.08em;line-height:1}
.stars i{color:var(--line);font-style:normal}
.stars--lg{font-size:var(--fs-t4);display:block;margin:.15rem 0 .3rem}
.revs__score{display:grid;grid-template-columns:auto 1fr auto;gap:2.4rem;align-items:center;
max-width:860px;margin:0 auto 3rem;padding:1.6rem 2rem;background:var(--white);
border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.revs__big{text-align:center}
.revs__big strong{font-family:'Cormorant Garamond',Georgia,serif;font-size:var(--fs-t1);font-weight:600;line-height:1;display:block}
.revs__big small{color:var(--muted);font-size:var(--fs-2xs);letter-spacing:.06em}
/* las estrellas grandes son la ilustración de la marca, no el carácter ★ */
.revs__stars{width:172px;height:auto;margin:.5rem auto .45rem}
.revs__bars{list-style:none;margin:0;padding:0;display:grid;gap:.28rem;min-width:0}
.revs__bars li{display:grid;grid-template-columns:26px 1fr 26px;align-items:center;gap:.6rem;
font-size:var(--fs-3xs);color:var(--muted)}
.revs__bars i{display:block;height:6px;border-radius:100px;background:var(--line);overflow:hidden}
.revs__bars b{display:block;height:100%;border-radius:100px;background:var(--lilac)}
.revs__bars em{font-style:normal;text-align:right}
.revs__rec{display:flex;align-items:center;gap:.7rem;max-width:190px}
.revs__rec img{width:42px;height:42px;object-fit:contain}
.revs__rec span{font-size:var(--fs-2xs);line-height:1.3;color:var(--muted)}
.revs__rec b{display:block;font-size:var(--fs-lg);color:var(--ink);font-weight:500}
.revs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.rev{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:1.3rem 1.35rem 1.1rem;display:flex;flex-direction:column;gap:.55rem}
.rev__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.rev__ok{display:inline-flex;align-items:center;gap:.28rem;font-size:var(--fs-3xs);letter-spacing:.08em;
text-transform:uppercase;color:var(--muted)}
.rev__ok svg{width:13px;height:13px;fill:none;stroke:var(--lilac-deep);stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
.rev__title{font-family:'Cormorant Garamond',Georgia,serif;font-size:var(--fs-t5);font-weight:600;margin:0;line-height:1.15}
.rev__body{margin:0;font-size:var(--fs-sm);color:#4A3F52;flex:1}
.rev__who{display:flex;flex-direction:column;line-height:1.3}
.rev__who b{font-weight:500;font-size:var(--fs-sm)}
.rev__who span{font-size:var(--fs-3xs);color:var(--muted)}
.rev__piece{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;padding-top:.8rem;
border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:var(--fs-2xs)}
.rev__piece img{width:38px;height:38px;object-fit:contain;border:1px solid var(--line);
border-radius:8px;background:#fff;flex:0 0 38px}
.rev__piece small{display:block;font-size:var(--fs-3xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rev__piece em{margin-left:auto;font-style:normal;color:var(--lilac-deep);transition:transform .25s}
.rev__piece:hover em{transform:translateX(4px)}
.rev__piece:hover{color:var(--lilac-deep)}
@media(max-width:980px){
.revs__grid{grid-template-columns:repeat(2,1fr)}
.revs__score{grid-template-columns:auto 1fr;gap:1.6rem;padding:1.3rem 1.4rem}
.revs__rec{grid-column:1 / -1;max-width:none;justify-content:center;
border-top:1px solid var(--line);padding-top:.9rem}
}
@media(max-width:640px){
.revs__grid{grid-template-columns:1fr}
.revs__score{grid-template-columns:1fr;text-align:center}
.revs__bars{width:100%;max-width:280px;margin:0 auto}
}
/* ===================== v25: Mi beaüra — home de la clienta con sesión =====================
Vista que ve una clienta al entrar. Los datos de la clienta son de MUESTRA
(no hay backend todavía), pero los productos, precios y fotos salen del
catálogo real de Odoo. Estructura pensada sobre lo medido en producción:
canasta mediana de 26 líneas, recompra cada ~20 días, 1,309 tickets de
mostrador contra 547 pedidos de venta → el historial tiene que ser omnicanal.
========================================================================= */
.mb{max-width:var(--wrap);margin:0 auto;padding:1.4rem 1.6rem 4.5rem}
.mb__demo{max-width:var(--wrap);margin:1.2rem auto 0;padding:.7rem 1.1rem;border-radius:12px;
background:var(--tint);border:1px dashed #DCC6E2;color:var(--accent-deep);font-size:var(--fs-2xs);
text-align:center;line-height:1.5}
.mb__demo b{font-weight:500}
/* --- saludo + cifras de vida --- */
.mbhi{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;
padding:2.2rem 0 1.6rem;border-bottom:1px solid var(--line)}
.mbhi h1{font-size:clamp(2.1rem,4.4vw,3.2rem);color:#6E5A85}
.mbhi h1 em{font-style:italic;color:var(--accent)}
.mbhi__sub{color:var(--muted);font-size:var(--fs-xs);margin:.5rem 0 0}
.mbstats{display:flex;gap:2.2rem;flex-wrap:wrap}
.mbstat{text-align:right}
.mbstat b{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t3);line-height:1;color:var(--ink)}
.mbstat span{font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* --- encabezado de bloque --- */
.mbh{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:3.2rem 0 1.2rem}
.mbh h2{font-size:clamp(1.5rem,2.6vw,2rem);color:#6E5A85}
.mbh h2 em{font-style:italic;color:var(--accent)}
.mbh p{color:var(--muted);font-size:var(--fs-xs);margin:0}
.mbh a{margin-left:auto;font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.mbh a:hover{text-decoration:underline}
/* --- perfil incompleto + regalo de cumpleaños --- */
.prof{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.6rem 1.8rem}
.prof__ring{position:relative;width:96px;height:96px;flex:0 0 96px}
.prof__ring svg{transform:rotate(-90deg)}
.prof__ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.prof__ring .bg{stroke:var(--tint)}
.prof__ring .fg{stroke:var(--accent);transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.prof__pct{position:absolute;inset:0;display:grid;place-items:center;
font-family:'Cormorant Garamond',serif;font-size:var(--fs-t4);color:var(--ink)}
.prof__list{display:flex;flex-wrap:wrap;gap:.5rem}
.prof__item{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-2xs);border-radius:100px;
padding:.36rem .85rem;border:1px solid var(--line);background:#FCFAFC;color:var(--muted)}
.prof__item.is-ok{background:#F2F8F4;border-color:#D6EADD;color:#3F7A55}
.prof__item.is-ok::before{content:"✓";font-size:var(--fs-3xs)}
.prof__item.is-todo{border-color:#E7CBDD;color:var(--accent-deep);cursor:pointer}
.prof__item.is-todo::before{content:"+";font-size:var(--fs-sm);line-height:1}
.prof__item.is-todo:hover{background:var(--soft)}
.prof__gift{max-width:15rem;text-align:center;border-left:1px solid var(--line);padding-left:1.8rem}
.prof__gift img{width:40px;height:40px;object-fit:contain;margin:0 auto .5rem;opacity:.9}
.prof__gift p{font-size:var(--fs-2xs);color:var(--muted);margin:0 0 .8rem;line-height:1.5}
.prof__gift b{color:var(--ink);font-weight:500}
.prof__gift .btn{font-size:var(--fs-3xs);padding:.7rem 1.2rem;letter-spacing:.1em;white-space:nowrap}
/* --- radar de reposición --- */
.radar{position:relative;overflow:hidden;border-radius:var(--radius);padding:2.4rem 2.2rem;
background:linear-gradient(135deg,#F7EFF7 0%,#F4ECF5 55%,#EFE4F1 100%);border:1px solid #E8D9EC}
.radar__grid{display:grid;grid-template-columns:1fr auto;gap:2.4rem;align-items:center}
.radar h2{font-size:clamp(1.6rem,3vw,2.3rem);color:#5F4C72;max-width:22ch}
.radar h2 em{font-style:italic;color:var(--accent)}
.radar__note{color:var(--muted);font-size:var(--fs-xs);margin:.7rem 0 1.6rem;max-width:44ch}
.radar__track{position:relative;height:8px;border-radius:100px;background:#fff;margin:2.6rem 0 0}
.radar__zone{position:absolute;top:0;bottom:0;border-radius:100px;background:var(--soft)}
.radar__now{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--accent);
transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(197,110,144,.18)}
.radar__now::after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 10px);
transform:translateX(-50%);white-space:nowrap;font-size:var(--fs-3xs);letter-spacing:.12em;
text-transform:uppercase;color:var(--accent-deep)}
.radar__zone::after{content:attr(data-label);position:absolute;left:50%;top:calc(100% + 10px);
transform:translateX(-50%);white-space:nowrap;font-size:var(--fs-3xs);letter-spacing:.12em;
text-transform:uppercase;color:var(--muted)}
.radar__scale{display:flex;justify-content:space-between;font-size:var(--fs-3xs);color:var(--muted);margin-top:2.1rem}
.radar__act{text-align:center;background:#fff;border-radius:16px;padding:1.5rem 1.6rem;min-width:16rem;
box-shadow:0 20px 44px -30px rgba(120,70,110,.5)}
.radar__thumbs{display:flex;justify-content:center;margin-bottom:.9rem}
.radar__thumbs img{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--line);
border-radius:50%;margin-left:-12px;padding:4px}
.radar__thumbs img:first-child{margin-left:0}
.radar__thumbs span{width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--accent-deep);
display:grid;place-items:center;font-size:var(--fs-3xs);margin-left:-12px;border:1px solid var(--line)}
.radar__act small{display:block;font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.radar__act b{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t4);margin:.15rem 0 1rem}
.radar__act .btn{width:100%}
.radar__act a.radar__see{display:block;margin-top:.7rem;font-size:var(--fs-2xs);color:var(--muted);text-decoration:underline}
/* --- pedidos: historial omnicanal --- */
.ord{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;margin-bottom:1rem}
.ord.is-hold{border-color:#E7CBDD;box-shadow:0 18px 40px -30px rgba(174,90,125,.55)}
.ord__top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:1rem 1.3rem;
background:#FCFAF7;border-bottom:1px solid var(--line)}
.ord.is-hold .ord__top{background:#FBF3F7}
.ord__ref{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);color:var(--ink)}
.ord__when{font-size:var(--fs-2xs);color:var(--muted)}
.ord__chan{font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;border-radius:100px;
padding:.3rem .7rem;background:var(--tint);color:var(--accent-deep)}
.ord__chan.is-pos{background:#F3EFE7;color:#8A7350}
.ord__chan.is-wa{background:#E9F4EC;color:#3F7A55}
.ord__state{margin-left:auto;font-size:var(--fs-3xs);letter-spacing:.13em;text-transform:uppercase;
border-radius:100px;padding:.32rem .8rem;background:var(--soft);color:var(--accent-deep)}
.ord__state.is-done{background:#E3F3E9;color:#3F7A55}
.ord__state.is-wait{background:#FBE9F0;color:#AE5A7D}
.ord__body{padding:1rem 1.3rem;display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.ord__body img{width:52px;height:52px;object-fit:contain;border:1px solid var(--line);
border-radius:10px;background:#fff}
.ord__rest{font-size:var(--fs-2xs);color:var(--muted)}
.ord__foot{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.9rem 1.3rem;
border-top:1px solid var(--line)}
.ord__sum{font-size:var(--fs-xs);color:var(--muted)}
.ord__sum b{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);color:var(--ink);margin-left:.4rem}
.ord__acts{margin-left:auto;display:flex;gap:.6rem;flex-wrap:wrap}
.ord__btn{border:1px solid var(--line);background:#fff;border-radius:100px;padding:.5rem 1.1rem;
font-family:inherit;font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
cursor:pointer;transition:.2s}
.ord__btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.ord__btn--go{background:var(--accent);border-color:var(--accent);color:#fff}
.ord__btn--go:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
/* apartado con reloj */
.hold{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem 1.3rem;
background:#FBF3F7;border-top:1px solid #F0DDE7}
.hold__clock{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t3);color:var(--accent-deep);
font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hold__txt{font-size:var(--fs-2xs);color:var(--muted);max-width:38rem;line-height:1.5}
.hold__txt b{color:var(--ink);font-weight:500}
/* --- carril de piezas --- */
.rail{display:flex;gap:1.2rem;overflow-x:auto;padding:.4rem .2rem 1.2rem;scroll-snap-type:x mandatory;
scrollbar-width:thin;scrollbar-color:var(--soft) transparent}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--soft);border-radius:100px}
.rail .card{flex:0 0 214px;width:214px;scroll-snap-align:start}
.rail .card__name{font-size:var(--fs-lg)}
.mbtag{position:absolute;top:.7rem;left:.7rem;z-index:2;background:var(--ink);color:#fff;font-size:var(--fs-3xs);
letter-spacing:.11em;text-transform:uppercase;padding:.3rem .65rem;border-radius:100px}
.mbtag.is-new{background:var(--accent)}
/* --- tu mostrador vs lo que se vende --- */
.gapbox{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.7rem 1.8rem;
display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;margin-bottom:1.6rem}
.gapbox__n{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t1);line-height:1;color:var(--ink);white-space:nowrap}
.gapbox__n small{font-size:var(--fs-lg);color:var(--muted)}
.gapbox__bar{height:10px;border-radius:100px;background:var(--tint);overflow:hidden;margin:.7rem 0 .6rem}
.gapbox__bar i{display:block;height:100%;border-radius:100px;background:var(--accent);
width:0;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.gapbox p{margin:0;color:var(--muted);font-size:var(--fs-xs);line-height:1.55}
.gapbox p b{color:var(--ink);font-weight:500}
/* --- se piden juntas --- */
.pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pair{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:1.2rem;text-align:center}
.pair__duo{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.9rem}
.pair__duo img{width:78px;height:78px;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#fff}
.pair__duo span{color:var(--accent);font-size:var(--fs-lg)}
.pair__txt{font-size:var(--fs-xs);color:var(--muted);margin:0 0 .9rem;line-height:1.5}
.pair__txt b{color:var(--ink);font-weight:500}
.pair .ord__btn{width:100%}
@media(max-width:980px){
.prof{grid-template-columns:auto 1fr;gap:1.4rem}
.prof__gift{grid-column:1/-1;max-width:none;border-left:0;border-top:1px solid var(--line);
padding-left:0;padding-top:1.2rem;display:flex;align-items:center;gap:1rem;text-align:left}
.prof__gift img{margin:0}
.prof__gift p{margin:0;flex:1}
.radar__grid{grid-template-columns:1fr}
.pairs{grid-template-columns:1fr}
}
@media(max-width:720px){
.mbhi{grid-template-columns:1fr;align-items:start;gap:1.4rem}
.mbstats{gap:1.6rem}
.mbstat{text-align:left}
.prof{grid-template-columns:1fr;justify-items:center;text-align:center}
.prof__list{justify-content:center}
.radar{padding:1.8rem 1.3rem}
.radar__act{min-width:0}
.ord__state{margin-left:0}
.ord__acts{margin-left:0;width:100%}
.ord__btn{flex:1}
.gapbox{grid-template-columns:1fr;gap:1rem;text-align:center}
}
/* ===================== v26: la joya se acerca y se queda flotando =====================
Al pasar el cursor la pieza se acerca y sube un poco; ya arriba se queda
flotando en bucle mientras el cursor siga encima. Al salir, la transición la
devuelve desde donde vaya, sin brincos.
Solo con ratón, y respeta prefers-reduced-motion.
==================================================================================== */
@keyframes joyaEntra{
from{transform:translateY(0) scale(1)}
to {transform:translateY(-16px) scale(1.68)}
}
@keyframes joyaFlota{
0%,100%{transform:translateY(-16px) scale(1.68)}
50% {transform:translateY(-31px) scale(1.73)}
}
@media (hover:hover) and (pointer:fine){
@media (prefers-reduced-motion:no-preference){
.card__media img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__media img{
animation:joyaEntra 1.5s cubic-bezier(.22,.68,.24,1) forwards,
joyaFlota 3.4s ease-in-out 1.5s infinite}
/* al salir, joya.js congela la matriz y esta regla deja que la
transición la regrese: la animación estorbaría. */
.card.is-out .card__media img{animation:none}
.card:hover,.card.is-out{z-index:6}
.grid .card,.rail .card{position:relative}
}
}
/* ===================== v27: las fotos dejan de vivir en una caja =====================
Casi toda la foto de producto viene con fondo blanco desde Odoo. Si la tarjeta
es una caja blanca con borde sobre un fondo crema o lila, se ve el recuadro y
la pieza parece pegada dentro de algo. Aquí la tarjeta desaparece: la pieza
queda flotando sobre una franja blanca y el zoom del recorrido puede salirse
de sus límites (antes lo recortaba overflow:hidden).
================================================================================= */
.section--shelf{max-width:none;background:var(--white)}
.section--shelf .section__head,.section--shelf .grid,.section--shelf .section__foot{
max-width:var(--wrap);margin-left:auto;margin-right:auto}
/* Las páginas que son básicamente un listado van en blanco de punta a punta:
sobre el crema, el fondo de cada JPEG se recortaba como un rectángulo y, como
cada foto trae su propia proporción, la retícula se veía dispareja.
Nada de franjas a 100vw: eso mete scroll horizontal en Windows y rompería el
carril de "Mi beaüra", que tiene su propio scroll. */
body.shelf{background:var(--white)}
body.shelf .header{background:rgba(255,255,255,.86)}
body.shelf .emptybox{background:#FCFAFC}
/* la tarjeta deja de ser un objeto: ni fondo, ni borde, ni sombra, ni salto */
.card{background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}
.card:hover{transform:none;box-shadow:none;border-color:transparent}
.card__media{background:transparent;border-radius:0;overflow:visible;padding:4%}
.card__body{padding:.9rem .4rem 1.2rem}
/* al hacer zoom la pieza pasa por encima de sus vecinas */
.card.is-tour,.card.is-tourout{z-index:6}
.grid,.rail{position:relative}
.grid .card,.rail .card{position:relative;z-index:1}
/* el recorrido ya no cruza de izquierda a derecha: entra en detalle, se aleja
despacio, se desvanece y la pieza vuelve creciendo con rebote */
@keyframes cardTour{
0% {opacity:0;transform:scale(2.72);animation-timing-function:ease-out}
6% {opacity:1;transform:scale(2.62);animation-timing-function:linear}
58% {opacity:1;transform:scale(2.18);animation-timing-function:ease-in}
70% {opacity:0;transform:scale(2.04)}
72% {opacity:0;transform:scale(.82)}
85% {opacity:1;transform:scale(1.5);animation-timing-function:cubic-bezier(.33,1.5,.62,1)}
91% {transform:scale(1.26)}
96% {transform:scale(1.4)}
100%{transform:scale(1.35)}
}
.card.is-tour .card__media img{animation-duration:2.6s}
/* El fondo de las fotos de Odoo no es blanco puro, así que sobre la franja
blanca se seguía marcando el rectángulo — y al hacer zoom ese rectángulo
tapaba a las vecinas. Se desvanecen los cuatro bordes de la foto: el recuadro
desaparece y el desbordamiento del zoom se funde en vez de recortarse. */
.card__media img{
-webkit-mask-image:
linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-composite:intersect;
}
/* Al quitar overflow:hidden, la caja cuadrada de la foto dejaba de respetar su
aspect-ratio: el tamaño mínimo automático del contenido la estiraba y las
fotos verticales descuadraban la retícula (199x291 en vez de 199x199). */
.card__media{min-height:0}
/* Sin scroll container, el height:100% de la foto ya no resolvía y las verticales
se salían de su cuadro. Se le da el cuadrado a la propia imagen. */
.card__media img{min-height:0;min-width:0;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
/* ===================== v28: niveles, puntos y retos =====================
Las reglas viven en data/gamificacion.js. Aquí solo está cómo se ven.
La escalera 5/10/15% no se inventó: es la que ya aplican a mano en Odoo.
======================================================================= */
.lvl{display:grid;grid-template-columns:1.1fr 1.3fr .9fr;gap:0;
border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.lvl__eyebrow{font-size:var(--fs-3xs);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lvl__now{padding:1.7rem 1.8rem;background:
linear-gradient(150deg,color-mix(in srgb,var(--lvl) 16%,#fff) 0%,#fff 78%);
border-right:1px solid var(--line)}
.lvl__name{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t2);line-height:1.05;
color:var(--lvl);margin:.1rem 0 .2rem}
.lvl__off{display:inline-block;font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
background:var(--lvl);color:#fff;border-radius:100px;padding:.3rem .85rem}
.lvl__extras{list-style:none;margin:1rem 0 0;padding:0;font-size:var(--fs-2xs);color:var(--muted)}
.lvl__extras li{padding-left:1.1rem;position:relative;margin-bottom:.28rem}
.lvl__extras li::before{content:"✦";position:absolute;left:0;color:var(--lvl);font-size:var(--fs-3xs)}
.lvl__next{padding:1.7rem 1.8rem;border-right:1px solid var(--line);display:flex;
flex-direction:column;justify-content:center}
.lvl__goal{margin:0 0 1rem;font-size:var(--fs-md);color:var(--ink);line-height:1.5}
.lvl__goal b{font-weight:500;color:var(--accent-deep)}
.lvl__bar{height:9px;border-radius:100px;background:var(--tint);overflow:hidden}
.lvl__bar i{display:block;height:100%;border-radius:100px;
background:linear-gradient(90deg,var(--lilac),var(--accent))}
.lvl__ends{display:flex;justify-content:space-between;font-size:var(--fs-3xs);color:var(--muted);margin-top:.4rem}
.lvl__hint{font-size:var(--fs-2xs);color:var(--muted);margin:1rem 0 0;line-height:1.5}
.lvl__hint b{color:var(--ink);font-weight:500}
.lvl__pts{padding:1.7rem 1.6rem;text-align:center;background:#FCFAFC;display:flex;
flex-direction:column;align-items:center;justify-content:center}
.lvl__ptsn{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t1);line-height:1;color:var(--ink);margin:.1rem 0}
.lvl__ptsv{font-size:var(--fs-2xs);color:var(--accent-deep);margin-bottom:1rem}
.lvl__pts .btn{width:100%;font-size:var(--fs-3xs);padding:.7rem 1rem}
.lvl__ptsb{font-size:var(--fs-3xs);color:var(--muted);margin-top:.7rem}
/* la escalera completa */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:.9rem}
.rung{position:relative;text-align:center;padding:1rem .6rem .9rem;border-radius:14px;
border:1px solid var(--line);background:#fff;opacity:.62;transition:.25s}
.rung__dot{display:block;width:11px;height:11px;border-radius:50%;background:var(--lvl);
margin:0 auto .5rem;box-shadow:0 0 0 4px color-mix(in srgb,var(--lvl) 22%,transparent)}
.rung b{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);color:var(--ink)}
.rung__off{display:block;font-size:var(--fs-2xs);color:var(--lvl);letter-spacing:.06em}
.rung__from{display:block;font-size:var(--fs-3xs);color:var(--muted);margin-top:.2rem}
.rung.is-past{opacity:.85}
.rung.is-now{opacity:1;border-color:var(--lvl);background:color-mix(in srgb,var(--lvl) 8%,#fff);
box-shadow:0 14px 30px -22px color-mix(in srgb,var(--lvl) 80%,transparent)}
/* retos por etapa */
.quest{margin-top:2.4rem}
.quest__head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem;
padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.quest__head h3{font-size:var(--fs-t5);color:#6E5A85}
.quest__head p{margin:0;font-size:var(--fs-2xs);color:var(--muted)}
.quest__n{margin-left:auto;font-size:var(--fs-3xs);letter-spacing:.14em;color:var(--accent-deep);
background:var(--tint);border-radius:100px;padding:.25rem .75rem}
.quest__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.ach{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;
padding:1.1rem 1.1rem 1rem;display:flex;flex-direction:column;transition:.22s}
.ach:hover{border-color:#E7CBDD;transform:translateY(-2px)}
.ach__pts{align-self:flex-start;font-size:var(--fs-3xs);letter-spacing:.1em;border-radius:100px;
padding:.22rem .6rem;background:var(--tint);color:var(--accent-deep);margin-bottom:.5rem}
.ach__name{font-family:'Cormorant Garamond',serif;font-size:var(--fs-lg);color:var(--ink);line-height:1.15}
.ach__txt{font-size:var(--fs-2xs);color:var(--muted);margin:.35rem 0 0;line-height:1.45}
.ach__bar{height:5px;border-radius:100px;background:var(--tint);overflow:hidden;margin-top:auto}
.ach__bar i{display:block;height:100%;border-radius:100px;background:var(--accent)}
.ach__prog{font-size:var(--fs-3xs);color:var(--muted);margin-top:.35rem}
.ach__go{margin-top:auto;align-self:flex-start;border:1px solid var(--line);background:#fff;
border-radius:100px;padding:.4rem .9rem;font-family:inherit;font-size:var(--fs-3xs);letter-spacing:.1em;
text-transform:uppercase;color:var(--accent-deep);cursor:pointer;transition:.2s}
.ach__go:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ach__bar,.ach__go,.ach__ok{margin-top:.9rem}
.ach__ok{margin-top:auto;align-self:flex-start;font-size:var(--fs-3xs);letter-spacing:.1em;
text-transform:uppercase;color:#3F7A55;background:#E9F4EC;border-radius:100px;padding:.3rem .8rem}
.ach.is-done{background:#FCFBFC;border-color:#DFEAE3}
.ach.is-done .ach__pts{background:#E9F4EC;color:#3F7A55}
.ach--seal{border-color:#E2CDA6;background:linear-gradient(160deg,#FEFBF5,#fff 60%)}
.ach--seal .ach__pts{background:#F6ECD9;color:#8A7350}
.ach--star .ach__name::after{content:" ✦";color:var(--accent);font-size:.8em}
@media(max-width:980px){
.lvl{grid-template-columns:1fr 1fr}
.lvl__pts{grid-column:1/-1;border-top:1px solid var(--line)}
.ladder{grid-template-columns:repeat(3,1fr)}
.quest__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.lvl{grid-template-columns:1fr}
.lvl__now,.lvl__next{border-right:0;border-bottom:1px solid var(--line)}
.ladder{grid-template-columns:repeat(2,1fr)}
.quest__grid{grid-template-columns:1fr}
.quest__n{margin-left:0}
}
/* ===================== v29: los personajes de cada nivel =====================
Recortados de brand/characters-levelup.png. En la escalera, los niveles que
todavía no alcanza van apagados: se ve en quién te vas a convertir.
============================================================================= */
.lvl__now{display:flex;align-items:flex-end;gap:1.2rem}
.lvl__id{flex:1;min-width:0;padding-bottom:.2rem}
.lvl__ava{width:132px;height:auto;flex:0 0 132px;margin-bottom:-1.7rem;
filter:drop-shadow(0 12px 18px rgba(90,60,100,.18))}
.rung{padding-top:.5rem}
.rung__ava{width:auto;height:96px;margin:0 auto .35rem;object-fit:contain;
transition:filter .3s ease,opacity .3s ease;filter:grayscale(.75);opacity:.5}
.rung.is-past .rung__ava{filter:grayscale(.35);opacity:.8}
.rung.is-now .rung__ava{filter:none;opacity:1;
drop-shadow:0 8px 14px rgba(90,60,100,.2)}
.rung:hover .rung__ava{filter:none;opacity:1}
@media(max-width:980px){
.lvl__ava{width:104px;flex-basis:104px}
.rung__ava{height:78px}
}
@media(max-width:640px){
.lvl__now{align-items:center}
.lvl__ava{width:86px;flex-basis:86px;margin-bottom:-1.7rem}
.rung__ava{height:88px}
}
/* ===================== v30: nivel en sitio, brasas e insignias =====================
La escalera ya no abre ventana emergente: actualiza el panel de arriba. Ese
panel se arma una vez y solo cambia de contenido, así que:
· nada brinca — la caja del personaje y el alto del panel son fijos, y
cada ilustración tiene su propio ancho (de 296 a 425 px de origen)
· la barra sí se anima, porque solo le cambia el ancho a un elemento vivo
Las brasas suben alrededor del personaje: más grandes, más brillantes y con
más chispas doradas cuanto más alto el nivel, y se avivan al pasar el cursor.
================================================================================= */
.lvl__now{position:relative;overflow:hidden;display:flex;align-items:flex-end;gap:1.2rem;
min-height:318px;padding-bottom:0;transition:background .45s ease}
.lvl__now.is-preview{background:
linear-gradient(150deg,color-mix(in srgb,var(--lvl) 22%,#fff) 0%,#fff 80%)}
.lvl__id{flex:1;min-width:0;padding:0 0 1.7rem}
/* caja fija: la ilustración se acomoda dentro, no al revés */
.lvl__ava{position:relative;z-index:1;flex:0 0 152px;width:152px;height:238px;
object-fit:contain;object-position:bottom center;margin:0;
filter:drop-shadow(0 14px 20px rgba(90,60,100,.22))}
.lvl__eyebrow{display:block;min-height:1em}
.lvl__name{display:block;font-family:'Cormorant Garamond',serif;font-size:var(--fs-t2);line-height:1.05;
color:var(--lvl);margin:.1rem 0 .3rem}
/* la cápsula del descuento nunca parte renglón */
.lvl__off{display:inline-block;white-space:nowrap;font-size:var(--fs-2xs);letter-spacing:.09em;
text-transform:uppercase;background:var(--lvl);color:#fff;border-radius:100px;padding:.32rem .9rem}
.lvl__from{display:block;font-size:var(--fs-2xs);color:var(--muted);margin-top:.5rem;min-height:1.2em}
.lvl__bar i{transition:width .9s cubic-bezier(.2,.8,.25,1)}
/* --- magia: chispas de cuatro puntas y polvo, no burbujas --- */
/* solo alrededor de la ilustración: encima del texto estorbaba */
.lvl__emb{position:absolute;left:0;top:0;bottom:0;width:44%;overflow:hidden;
pointer-events:none;z-index:0}
.lvl__emb i{position:absolute;bottom:-8%;opacity:0;
animation:subir var(--dur,7s) cubic-bezier(.35,.05,.6,.95) infinite}
/* la chispa: estrella de cuatro puntas con el centro encendido */
.lvl__emb i.chispa{
background:var(--lvl);
clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);
filter:drop-shadow(0 0 calc(3px + var(--lvl-i,0)*9px) color-mix(in srgb,var(--lvl) 80%,transparent))
brightness(calc(1 + var(--lvl-i,0) * .45))}
.lvl__emb i.chispa::after{content:"";position:absolute;inset:34%;border-radius:50%;background:#fff;
opacity:calc(.5 + var(--lvl-i,0) * .5)}
/* el polvo: motas mínimas que solo flotan */
.lvl__emb i.polvo{border-radius:50%;background:color-mix(in srgb,var(--lvl) 70%,#fff);
box-shadow:0 0 6px color-mix(in srgb,var(--lvl) 60%,transparent)}
/* las doradas casi no existen abajo y mandan arriba */
.lvl__emb i.oro.chispa{background:#E8C79E;
filter:drop-shadow(0 0 calc(3px + var(--lvl-i,0)*12px) rgba(232,199,158,.9))}
.lvl__emb i.oro.polvo{background:#F2DEC2;box-shadow:0 0 7px rgba(232,199,158,.8)}
.lvl__emb i.oro{animation-name:subirOro}
/* sube en arco, gira y titila — no en línea recta como una burbuja */
@keyframes subir{
0% {transform:translate3d(0,0,0) rotate(0) scale(.3);opacity:0}
12% {opacity:calc(.25 + var(--lvl-i,0) * .55);transform:translate3d(var(--dx,0px),-40px,0) rotate(calc(var(--gir,180deg) * .15)) scale(1)}
38% {opacity:calc(.5 + var(--lvl-i,0) * .5);transform:translate3d(var(--dx2,0px),-120px,0) rotate(calc(var(--gir,180deg) * .45)) scale(.55)}
62% {opacity:calc(.3 + var(--lvl-i,0) * .55);transform:translate3d(var(--dx,0px),-190px,0) rotate(calc(var(--gir,180deg) * .7)) scale(1.15)}
86% {opacity:calc(.12 + var(--lvl-i,0) * .3)}
100% {transform:translate3d(var(--dx2,0px),-290px,0) rotate(var(--gir,180deg)) scale(.25);opacity:0}
}
@keyframes subirOro{
0% {transform:translate3d(0,0,0) rotate(0) scale(.2);opacity:0}
16% {opacity:calc(var(--lvl-i,0) * var(--lvl-i,0));transform:translate3d(var(--dx2,0px),-50px,0) rotate(calc(var(--gir,180deg) * .2)) scale(1.1)}
44% {opacity:calc(var(--lvl-i,0) * var(--lvl-i,0) * .45);transform:translate3d(var(--dx,0px),-140px,0) rotate(calc(var(--gir,180deg) * .5)) scale(.5)}
70% {opacity:calc(var(--lvl-i,0) * var(--lvl-i,0) * .95);transform:translate3d(var(--dx2,0px),-215px,0) rotate(calc(var(--gir,180deg) * .78)) scale(1.3)}
100% {transform:translate3d(var(--dx,0px),-320px,0) rotate(var(--gir,180deg)) scale(.2);opacity:0}
}
/* al recorrer la escalera se acelera y se enciende el halo */
.lvl__now.is-hot .lvl__emb i{animation-duration:calc(var(--dur,7s) * .5)}
.lvl__now.is-hot::before{content:"";position:absolute;left:0;bottom:0;width:320px;height:320px;
transform:translate(-20%,30%);border-radius:50%;pointer-events:none;
background:radial-gradient(circle,color-mix(in srgb,var(--lvl) 60%,transparent) 0%,transparent 68%);
opacity:calc(.28 + var(--lvl-i,0) * .5);animation:pulso 2.4s ease-in-out infinite}
@keyframes pulso{
0%,100%{transform:translate(-20%,30%) scale(1);filter:blur(0)}
50% {transform:translate(-20%,30%) scale(1.18);filter:blur(3px)}
}
.rung{cursor:pointer}
.rung.is-sel{opacity:1;border-color:var(--lvl);background:color-mix(in srgb,var(--lvl) 8%,#fff);
box-shadow:0 14px 30px -22px color-mix(in srgb,var(--lvl) 80%,transparent)}
.rung.is-sel .rung__ava{filter:none;opacity:1}
/* --- el nombre con la tipografía de la marca --- */
/* 'Hola,' y el nombre siempre en el mismo renglón */
.mbhi__hi{min-height:86px;display:flex;align-items:center;gap:.3em;
flex-wrap:nowrap;white-space:nowrap}
.mbhi__nombre{display:inline-block;min-height:82px;flex:0 0 auto}
@media(max-width:560px){.mbhi__hi{min-height:64px}.mbhi__nombre{min-height:60px}}
.mbhi__nombre nano-type{display:block;
margin-top:calc(var(--nano-cap-top, 0px) * -1);
margin-bottom:calc((var(--nano-content-height, 0px) - var(--nano-baseline, 0px)) * -1)}
/* --- la tarjeta de reto: insignia grande y la cifra al lado --- */
.ach{align-items:center;text-align:center;padding:1.3rem 1.1rem 1.2rem}
.ach__top{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.ach__badge{position:relative;display:block;width:124px;flex:0 0 124px}
.ach__badge img{width:100%;height:auto;display:block;
filter:grayscale(.82) opacity(.5);
transition:filter .35s ease,transform .35s ease}
.ach.is-done .ach__badge img{filter:none}
.ach__badge::after{content:"";position:absolute;inset:6%;border-radius:50%;pointer-events:none;
border:2px solid var(--accent);opacity:0}
/* el número de puntos flota sobre la insignia, por la izquierda, como el que
sale al subir de nivel en un juego. Es el único lugar donde aparece. */
.ach__num{position:absolute;left:0;top:50%;z-index:2;pointer-events:none;
font-family:'Cormorant Garamond',serif;font-size:var(--fs-t2);line-height:1;font-weight:600;
color:var(--accent);transform:translateY(-50%);
text-shadow:0 0 10px #fff,0 0 22px #fff,0 2px 0 #fff,0 -2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff;
transition:transform .5s cubic-bezier(.24,1.5,.4,1),color .3s ease,opacity .3s ease}
.ach:not(.is-done) .ach__num{color:var(--muted);opacity:.55}
.ach:hover .ach__num{color:var(--accent);opacity:1;
transform:translateY(calc(-50% - 34px)) scale(1.18)}
/* al pasar el cursor se ve cómo se desbloquea: sube con rebote, la cruza un
barrido de luz, revienta un anillo y salen seis chispas */
.ach:hover .ach__badge img{animation:desbloquear .9s cubic-bezier(.28,1.3,.45,1) forwards}
.ach:hover .ach__badge::after{animation:anillo .9s ease-out}
.ach__badge::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.62) 50%,transparent 58%);
mix-blend-mode:screen}
.ach:hover .ach__badge::before{animation:barrido .9s ease-out .12s}
@keyframes barrido{
0% {opacity:0;transform:translateX(-70%) skewX(-12deg)}
35% {opacity:1}
100%{opacity:0;transform:translateX(70%) skewX(-12deg)}
}
/* las seis chispas del estallido */
.ach__fx{position:absolute;inset:0;pointer-events:none;z-index:3}
.ach__fx i{position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
background:var(--accent);opacity:0;
clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);
filter:drop-shadow(0 0 6px rgba(197,110,144,.9))}
.ach__fx i:nth-child(2){background:#E8C79E;filter:drop-shadow(0 0 6px rgba(232,199,158,.9))}
.ach__fx i:nth-child(4){background:#C69ED4}
.ach__fx i:nth-child(6){background:#E8C79E;filter:drop-shadow(0 0 6px rgba(232,199,158,.9))}
.ach:hover .ach__fx i{animation:estallido .95s cubic-bezier(.2,.8,.3,1) forwards}
.ach__fx i:nth-child(1){--ax:-96px;--ay:-72px;animation-delay:.04s}
.ach__fx i:nth-child(2){--ax: 92px;--ay:-80px;animation-delay:.10s}
.ach__fx i:nth-child(3){--ax:-104px;--ay: 40px;animation-delay:.16s}
.ach__fx i:nth-child(4){--ax:100px;--ay: 32px;animation-delay:.08s}
.ach__fx i:nth-child(5){--ax:-14px;--ay:-104px;animation-delay:.20s}
.ach__fx i:nth-child(6){--ax: 34px;--ay: 92px;animation-delay:.13s}
@keyframes estallido{
0% {opacity:0;transform:translate3d(0,0,0) scale(.2) rotate(0)}
25% {opacity:1;transform:translate3d(calc(var(--ax) * .45),calc(var(--ay) * .45),0) scale(1.25) rotate(70deg)}
100%{opacity:0;transform:translate3d(var(--ax),var(--ay),0) scale(.35) rotate(200deg)}
}
.ach:hover .ach__num{transform:translateY(-8px) scale(1.12);color:var(--accent)}
@keyframes desbloquear{
0% {transform:translateY(0) scale(1);filter:grayscale(.82) opacity(.5)}
40% {transform:translateY(-18px) scale(1.14);filter:grayscale(0) opacity(1)}
62% {transform:translateY(-2px) scale(.985)}
80% {transform:translateY(-10px) scale(1.05)}
100% {transform:translateY(-6px) scale(1.04);filter:grayscale(0) opacity(1)}
}
@keyframes anillo{
0% {transform:scale(.62);opacity:.6}
100% {transform:scale(1.55);opacity:0}
}
.ach__pts{display:none} /* los puntos ya viven sobre la insignia */
.ach__ok,.ach__go,.ach__prog{align-self:center}
.ach__bar{width:100%}
@media(prefers-reduced-motion:reduce){
.lvl__emb,.lvl__now.is-hot::before,.ach__fx{display:none}
.ach:hover .ach__badge img{animation:none;filter:none}
}
@media(max-width:980px){
.lvl__ava{flex-basis:118px;width:118px;height:196px}
.lvl__now{min-height:290px}
.ach__badge{width:104px;flex-basis:104px}
.ach__num{font-size:var(--fs-t2)}
}
@media(max-width:640px){
.lvl__ava{flex-basis:96px;width:96px;height:168px}
.lvl__now{min-height:0;align-items:flex-end}
.lvl__extras{min-height:0}
}
/* ===================== v31: legibilidad y contraste =====================
Dos cosas que estaban mal en todo el sitio:
1) El texto de lectura venía en .76–.86rem (12–14 px). Los títulos estaban
bien, pero los párrafos —que son los que de verdad se leen— quedaban
chicos. Base a 17 px y piso de .95rem para todo lo que es prosa. Los
tamaños micro se reservan para etiquetas en versalitas, no para leer.
2) Casi todo era blanco sobre blanco. Se meten bandas de color suave para
que cada bloque se despegue, cuidando que las fotos de producto sigan
cayendo sobre blanco puro — que para eso se hizo el cambio.
======================================================================= */
body{font-size:17px;line-height:1.65}
/* --- contraste: bandas suaves entre bloques --- */
body.shelf{background:var(--white)}
/* los grupos de retos se despegan en un panel propio */
.quest{padding:1.6rem 1.7rem 1.8rem;border-radius:22px;background:#FBF8FC;
border:1px solid #F0E8F3;margin-top:1.6rem}
.quest:nth-of-type(even){background:#FCFAF7;border-color:#F2EBE2}
.quest__head{border-bottom-color:#EADFEE}
.ach{background:#fff}
.ach:not(.is-done){background:#FEFDFE}
/* pedidos y recomendaciones sobre banda tenue, no sobre blanco */
.mb .radar{border:0}
#orders{padding:1.4rem 1.5rem;border-radius:22px;background:#FBF8FC;border:1px solid #F0E8F3}
.pairs{padding:1.4rem;border-radius:22px;background:#FCFAF7;border:1px solid #F2EBE2}
.pair{background:#fff}
.gapbox{background:linear-gradient(120deg,#FBF3F7 0%,#fff 62%);border-color:#F0DDE7}
/* las fotos de producto siguen sobre blanco puro */
.mb .grid,.mb .rail{background:transparent}
@media(max-width:640px){
body{font-size:16px}
.quest{padding:1.2rem 1rem 1.4rem}
#orders,.pairs{padding:1rem .8rem}
}
/* ===================== v33: cada texto en el escalón que le toca =====================
La conversión a tokens fue mecánica —por tamaño previo— y dejó prosa en los
escalones pensados para etiquetas. Aquí se asigna por ROL: lo que se lee de
corrido nunca baja de --fs-sm. Si mañana hay que subirlo todo, se toca la
escala en :root y ya; esto solo dice quién es prosa y quién es etiqueta.
==================================================================================== */
.ach__txt,.quest__head p,.mbh p,.mbhi__sub,.lvl__hint,.lvl__from,.lvl__extras,
.radar__note,.hold__txt,.ord__rest,.ord__when,.ord__sum,.pair__txt,.gapbox p,
.section__lead,.page__head p,.emptybox p,.authnote,.kit__hint,.cart__note,
.field__hint,.field__err,.benefit p,.acc__body,.acc__body dd,.footer__brand p,
.rev__txt,.cat__name,.spot__name,.check,.check-inline,.dditem span,
.cart__empty span,.done__row{font-size:var(--fs-sm);line-height:var(--lh-prosa)}
.lvl__goal,.mb__demo{font-size:var(--fs-md)}
/* el saludo estaba muy despegado del menú: se perdía una pantalla en vano */
.mb{padding-top:.2rem}
.mbhi{padding:1rem 0 1.3rem}
.mbhi__hi{min-height:0;margin-top:-.2rem}
.mbhi__nombre{min-height:0}
/* ===================== v34: encabezado de la clienta =====================
Arriba, sus datos básicos —lo que de verdad quiere ver de un vistazo— y a la
derecha las cifras, más grandes y en un morado ligero: son dato, no titular,
así que van finas y no en negritas.
========================================================================= */
.datos{display:flex;flex-wrap:wrap;gap:.2rem 2.2rem;margin:.7rem 0 0}
.datos div{min-width:0}
.datos dt{font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);margin:0}
.datos dd{margin:.1rem 0 0;font-size:var(--fs-sm);color:var(--ink)}
.datos__edit{align-self:flex-end}
.datos__edit a{font-size:var(--fs-2xs);color:var(--accent-deep);text-decoration:underline}
.datos__edit a:hover{color:var(--accent)}
.mbstats{gap:2.6rem;align-items:flex-end}
.mbstat b{font-family:'Cormorant Garamond',serif;font-weight:500;
font-size:2.9rem;line-height:.95;color:#9B7BB5;letter-spacing:.01em}
.mbstat span{font-size:var(--fs-3xs);letter-spacing:.16em;text-transform:uppercase;
color:var(--muted)}
@media(max-width:980px){
.mbstats{gap:1.8rem}
.mbstat b{font-size:2.3rem}
}
@media(max-width:720px){
.datos{gap:.6rem 1.6rem}
.mbstat b{font-size:2rem}
}
/* ===================== v35: fondos de foto que no son blancos =====================
Medido en el catálogo: la mayoría de las fotos trae el fondo en 253–255, pero
varias andan en 242–246 (AR-036, AR-515, AR-146…). Sobre la página blanca eso
se ve como un recuadro gris, y el desvanecido de las orillas no alcanza.
contrast() pivota en el gris medio: sube 242 a 255 —el fondo desaparece— y a
la joya casi no la mueve (un dorado de 180 pasa a 186), de paso le da un poco
más de cuerpo. Se prefiere sobre brightness(), que lavaría la pieza entera.
Arreglo de presentación, no de origen: lo definitivo es recortar las fotos
(ver prueba-recorte.html).
================================================================================= */
.card__media img{filter:contrast(1.12)}
.card__media img{
-webkit-mask-image:
linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),
linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
mask-image:
linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),
linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
}
/* la entrada más viva: sube mientras crece, en vez de crecer y luego subir */
@keyframes joyaEntra{
from{transform:translateY(0) scale(1)}
to {transform:translateY(-18px) scale(1.66)}
}
@keyframes joyaFlota{
0%,100%{transform:translateY(-18px) scale(1.66)}
50% {transform:translateY(-32px) scale(1.71)}
}
@media (hover:hover) and (pointer:fine){
@media (prefers-reduced-motion:no-preference){
.card:hover .card__media img{
animation:joyaEntra 1.05s cubic-bezier(.2,.72,.24,1) forwards,
joyaFlota 3.6s ease-in-out 1.05s infinite}
}
}
/* ===================== v36: la foto ampliada pasa POR DEBAJO =====================
Al hacer zoom, la foto se montaba encima del nombre, el precio y el botón de
las tarjetas vecinas. Antes la tarjeta entera subía con z-index al pasar el
cursor, y eso levantaba también su imagen.
Ahora ninguna tarjeta crea contexto de apilamiento: todas las fotos viven en
una capa baja y todos los cuerpos —nombre, precio, botón— en una alta. Así la
pieza crece y se cuela detrás de lo demás, que se ve mucho más natural.
================================================================================ */
.card{position:relative;z-index:auto}
.card:hover,.card.is-out{z-index:auto} /* no crear contexto de apilamiento */
.card__media{position:relative;z-index:0}
.card__body{position:relative;z-index:3}
.card__fav{z-index:4}
/* ===================== v37: recorte del aire de abajo y capas del listado =====================
1) Casi toda la foto de Odoo trae mucho aire abajo, así que la pieza se veía
chica y descentrada hacia arriba. La caja pasa a ser un poco apaisada y la
foto se encuadra con cover mordiendo por abajo: se recupera ese espacio
muerto y la joya crece sin tocar el archivo.
2) La foto ampliada seguía tapando los chips de filtro activo y la barra de
orden, que viven fuera de la tarjeta. Todo lo que es cromo del listado
sube a la misma capa alta que el cuerpo de las tarjetas.
============================================================================================ */
.card__media{aspect-ratio:1/.86}
.card__media img{aspect-ratio:1/.86;object-fit:cover;object-position:center 41%}
/* cromo del listado por encima de la capa de fotos */
.active,.shophead,.filters,.sort,.filtersToggle,.loadmore,
.section__head,.section__foot,.mbh,.quest__head{position:relative;z-index:3}
@media(max-width:640px){
.card__media,.card__media img{aspect-ratio:1/.92}
}
/* Con el recorte, la pieza baja y quedaba pegada a su nombre. Más aire entre la
foto y el bloque de nombre / precio / botón. */
.card__body{padding:1.5rem .4rem 1.3rem}
.card__cat{display:block;margin-bottom:.15rem}
.rail .card__body{padding-top:1.2rem}
/* ===================== v38: que se note que sube =====================
Con scale 1.66 y solo 18 px de recorrido, el crecimiento se comía el
movimiento: parecía que únicamente crecía. Tres cambios:
· el origen baja al 72%, así al crecer se expande sobre todo hacia arriba
· la subida pasa de 18 a 34 px, con un pequeño rebase antes de asentarse
· el flotar se hace más amplio y más lento, para que se lea
===================================================================== */
.card__media img{transform-origin:50% 72%}
@keyframes joyaEntra{
0% {transform:translateY(0) scale(1)}
62% {transform:translateY(-42px) scale(1.52)}
100%{transform:translateY(-34px) scale(1.62)}
}
@keyframes joyaFlota{
0%,100%{transform:translateY(-34px) scale(1.62)}
50% {transform:translateY(-54px) scale(1.68)}
}
@media (hover:hover) and (pointer:fine){
@media (prefers-reduced-motion:no-preference){
.card:hover .card__media img{
animation:joyaEntra .95s cubic-bezier(.22,.9,.3,1) forwards,
joyaFlota 4s ease-in-out .95s infinite}
}
}
/* ===================== v39: ilustraciones flotando sobre el hero =====================
Cinco piezas de categoría sobre el video, repartidas por las zonas de afuera
—nunca sobre el texto ni pegadas a la orilla— con tamaños distintos.
Dos movimientos que no se estorban: el vaivén propio va en la y el
rezago por scroll en el que la envuelve, así ninguna transform pisa a
la otra. Cada una lleva su profundidad en --d: las de valor alto se quedan
atrás al hacer scroll y las de valor bajo se van casi con la página.
==================================================================================== */
.hero__float{position:absolute;inset:0;z-index:2;pointer-events:none;
transition:opacity .18s ease}
/* al salir de su video se van de golpe; al volver, entran con calma */
.hero__float{transition:opacity .5s ease}
.hero__float.is-off{opacity:0;transition-duration:0s}
.hf{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
will-change:transform,opacity}
.hf img{display:block;width:var(--s);height:auto;
filter:drop-shadow(0 14px 22px rgba(40,20,50,.35));
animation:hfFlota var(--t,10s) ease-in-out var(--dly,0s) infinite}
@keyframes hfFlota{
0%,100%{transform:translate3d(0,0,0) rotate(0)}
33% {transform:translate3d(6px,-16px,0) rotate(var(--r,6deg))}
66% {transform:translate3d(-8px,-7px,0) rotate(calc(var(--r,6deg) * -.6))}
}
/* en pantalla chica estorban más de lo que aportan */
@media(max-width:820px){.hero__float{display:none}}
@media(prefers-reduced-motion:reduce){.hf img{animation:none}}
/* ===================== v40: ajuste del recorte y del recorrido =====================
Dos efectos secundarios del recorte y de la subida:
· con el aire de abajo ya recortado, 1.5rem de separación era demasiado y
la pieza quedaba flotando lejos de su nombre
· con el origen al 72%, al crecer el borde superior ya sube ~60 px solo;
sumarle 34 px de traslado la metía demasiado en la fila de arriba
================================================================================== */
.card__body{padding:1rem .4rem 1.2rem}
.rail .card__body{padding-top:.85rem}
@keyframes joyaEntra{
0% {transform:translateY(0) scale(1)}
62% {transform:translateY(-20px) scale(1.5)}
100%{transform:translateY(-14px) scale(1.6)}
}
@keyframes joyaFlota{
0%,100%{transform:translateY(-14px) scale(1.6)}
50% {transform:translateY(-28px) scale(1.65)}
}
/* Las ilustraciones del hero van por encima de todo: scrim, texto, flechas y
puntos. No capturan el puntero, así que los botones siguen respondiendo. */
.hero__float{z-index:9}
/* Las ilustraciones tienen que poder salirse del hero al bajar con el scroll:
si el hero recorta, se cortan contra el borde del siguiente bloque. Se abre
el hero y se recorta cada diapositiva, que es lo que de verdad necesita
contener al video cuando hace zoom. */
.hero{overflow:visible}
.hero__slide{overflow:hidden}
.hero__scrim{overflow:hidden}
/* ===================== v41: entrada en secuencia y capas de transform =====================
Tres transformaciones que no se pueden pisar, así que van en tres elementos:
.hf → el rezago del scroll, lo escribe el JS con inercia
.hf__in → la entrada al cargar, escalonada
img → el vaivén propio, en bucle
======================================================================================== */
.hf__in{display:block;animation:hfEntra .95s cubic-bezier(.2,1.5,.36,1) both var(--in,0s)}
@keyframes hfEntra{
0% {opacity:0;transform:scale(.35) rotate(-14deg)}
60% {opacity:1;transform:scale(1.12) rotate(4deg)}
100%{opacity:1;transform:scale(1) rotate(0)}
}
@media(prefers-reduced-motion:reduce){.hf__in{animation:none}}
/* "brillan" iba en el rosa de marca, que sobre el video queda más oscuro que el
blanco del resto del título y se perdía. Se aclara y se le da un halo tibio
para que resalte en vez de hundirse. */
.hero__title em{color:#F7D7B0;text-shadow:0 2px 18px rgba(120,60,30,.45),0 0 40px rgba(247,215,176,.35)}
/* ===================== v42: blog =====================
Listado con una entrada destacada a lo ancho y el resto en retícula. Los
datos viven en data/blog.js; aquí solo está cómo se ve.
===================================================== */
.blogtabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:0 0 2.2rem}
.blogtabs button{border:1px solid var(--line);background:#fff;border-radius:100px;
padding:.5rem 1.2rem;font-family:inherit;font-size:var(--fs-2xs);letter-spacing:.08em;
text-transform:uppercase;color:var(--ink);cursor:pointer;transition:.2s}
.blogtabs button:hover{border-color:var(--accent);color:var(--accent-deep)}
.blogtabs button.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.bigpost{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);
border-radius:22px;overflow:hidden;background:#fff;margin-bottom:2.2rem}
.bigpost__img{display:block;position:relative;min-height:340px;overflow:hidden}
.bigpost__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bigpost:hover .bigpost__img img{transform:scale(1.06)}
.bigpost__body{padding:2.4rem 2.6rem;display:flex;flex-direction:column;justify-content:center;
background:linear-gradient(150deg,#FBF3F7 0%,#fff 70%)}
.bigpost__body h2{font-size:var(--fs-t3);color:#6E5A85;margin:.5rem 0 .7rem;line-height:1.1}
.bigpost__body p{color:var(--muted);margin:0 0 .9rem}
.bigpost__body .btn{align-self:flex-start;margin-top:.6rem}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.post{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;
display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.post:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(120,70,110,.5)}
.post__img{display:block;aspect-ratio:3/2;overflow:hidden}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.post:hover .post__img img{transform:scale(1.07)}
.post__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.post__meta{font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.post__body h3{font-size:var(--fs-t5);color:var(--ink);margin:.4rem 0 .5rem;line-height:1.15}
.post__body p{color:var(--muted);margin:0 0 .8rem;font-size:var(--fs-sm);line-height:var(--lh-prosa)}
.post__date{font-size:var(--fs-2xs);color:var(--muted);margin-top:auto}
.post__cta{margin-top:.7rem;font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;
color:var(--accent-deep);transition:.2s}
.post__cta:hover{color:var(--accent);letter-spacing:.11em}
.blognews{margin-top:3.2rem;padding:2.2rem 2.4rem;border-radius:22px;
background:linear-gradient(135deg,#F4ECF5 0%,#FBF3F7 60%,#F7EFE6 100%);
display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.blognews h2{font-size:var(--fs-t4);color:#6E5A85;margin:.3rem 0 .4rem}
.blognews p{color:var(--muted);margin:0}
.blognews__form{display:flex;gap:.6rem;flex-wrap:wrap}
.blognews__form input{border:1px solid var(--line);background:#fff;border-radius:100px;
padding:.85rem 1.3rem;font-family:inherit;font-size:var(--fs-sm);min-width:16rem}
.blognews__form input:focus{outline:none;border-color:var(--accent)}
@media(max-width:980px){
.bigpost{grid-template-columns:1fr}
.bigpost__img{min-height:240px}
.bigpost__body{padding:1.8rem}
.posts{grid-template-columns:repeat(2,1fr)}
.blognews{grid-template-columns:1fr}
}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
/* ===================== v43: el panel del nivel con alto fijo =====================
Tenía min-height, no height. Aura es el nivel con más contenido y en algunos
anchos pasaba de 318 px: el panel crecía, la escalera bajaba, el cursor se
salía del peldaño, volvía al nivel real, el panel encogía… y así en bucle.
Eso era el temblor.
Con alto fijo nada de lo que hay encima de la escalera cambia de tamaño al
recorrerla, y como el panel ya recorta (lo necesita para las chispas), un
texto largo no puede empujar nada.
================================================================================ */
.lvl__now{height:348px;min-height:0}
.lvl__id{display:flex;flex-direction:column;justify-content:center;height:100%;
padding:1.4rem 0}
.lvl__extras{margin-top:.7rem;overflow:hidden}
.lvl__extras li{line-height:1.45}
.lvl{align-items:stretch}
.lvl__next,.lvl__pts{min-height:348px}
@media(max-width:980px){
.lvl__now{height:312px}
.lvl__next,.lvl__pts{min-height:0}
}
@media(max-width:640px){
.lvl__now{height:auto;min-height:264px}
}
/* ===================== v44: logo a la izquierda y su rollover =====================
Con siete entradas en el menú, la marca al centro partía la navegación en dos
y ya no cuadraba. Se va a la izquierda, el menú corre a su lado y las acciones
quedan a la derecha: lectura de izquierda a derecha, sin brincos.
================================================================================= */
.header__inner{grid-template-columns:auto 1fr auto;gap:1.4rem}
.header__menu{order:-2}
.brand{order:-1;justify-self:start;margin-right:.4rem}
.nav{order:0;justify-self:start;gap:1.3rem}
.actions{order:1;justify-self:end}
/* rollover de la marca: el emblema se inclina y se enciende en dorado, y un
destello cruza la palabra */
.brand__mark{transition:transform .45s cubic-bezier(.2,1.4,.4,1),filter .45s ease}
.brand:hover .brand__mark{transform:rotate(-9deg) scale(1.12);
filter:drop-shadow(0 0 10px rgba(232,199,158,.9))}
.brand__text{position:relative;overflow:hidden}
.brand__text::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;
pointer-events:none;background:linear-gradient(105deg,transparent,rgba(232,199,158,.75),transparent);
mix-blend-mode:screen}
.brand:hover .brand__text::after{animation:brilloMarca .85s ease-out}
@keyframes brilloMarca{to{left:120%}}
.brand__tag{transition:color .35s ease,letter-spacing .35s ease}
.brand:hover .brand__tag{color:#C8A06A;letter-spacing:.28em}
@media(max-width:1080px){.nav{gap:1rem;font-size:var(--fs-3xs)}}
@media(max-width:920px){.nav{display:none}.header__inner{grid-template-columns:auto 1fr auto}}
/* ===================== v45: la nota individual ===================== */
.nota__head{position:relative;min-height:52vh;display:flex;align-items:flex-end;
background-size:cover;background-position:center;color:#fff}
.nota__head::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(30,18,34,.28) 0%,rgba(30,18,34,.82) 100%)}
.nota__headin{position:relative;z-index:1;max-width:var(--wrap);width:100%;margin:0 auto;
padding:3rem 1.6rem 2.6rem}
.nota__back{display:inline-block;font-size:var(--fs-2xs);letter-spacing:.1em;
text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:1.2rem}
.nota__back:hover{color:#F7D7B0}
.nota__cat{display:inline-block;font-size:var(--fs-3xs);letter-spacing:.16em;
text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
border-radius:100px;padding:.3rem .9rem;backdrop-filter:blur(4px)}
.nota__headin h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:.9rem 0 .5rem;max-width:22ch;line-height:1.05}
.nota__meta{font-size:var(--fs-2xs);color:rgba(255,255,255,.75);margin:0}
.nota__body{max-width:44rem;margin:0 auto;padding:3rem 1.6rem 1rem}
.nota__lead{font-size:var(--fs-lg);line-height:1.55;color:#5B4E66;margin:0 0 2rem}
.nota__body h2{font-size:var(--fs-t4);color:#6E5A85;margin:2.2rem 0 .7rem}
.nota__body p{font-size:var(--fs-md);line-height:1.75;color:var(--ink);margin:0 0 1.1rem}
.nota__cta{margin:2.6rem 0 0;padding:1.8rem;border-radius:20px;text-align:center;
background:linear-gradient(135deg,#F4ECF5,#FBF3F7 60%,#F7EFE6)}
.nota__cta p{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t5);color:#6E5A85;margin:0 0 1rem}
.nota__mas{max-width:var(--wrap);margin:3.5rem auto 4.5rem;padding:0 1.6rem}
.nota__mas h2{font-size:var(--fs-t4);color:#6E5A85;margin:0 0 1.4rem;text-align:center}
.post__body h3 a,.bigpost__body h2 a{color:inherit}
.post__body h3 a:hover,.bigpost__body h2 a:hover{color:var(--accent-deep)}
@media(max-width:640px){.nota__head{min-height:40vh}.nota__headin{padding:2rem 1.2rem 1.8rem}}
/* La cápsula llevaba la frase entera y apenas cabía. Ahora solo la cifra —que
nunca va a partirse— y el resto va debajo como texto, con sitio para acomodarse. */
.lvl__off{font-family:'Cormorant Garamond',serif;font-size:var(--fs-t5);font-weight:600;
letter-spacing:.01em;text-transform:none;padding:.18rem .95rem;line-height:1.15}
.lvl__off.is-cero{font-size:var(--fs-md);padding:.35rem .85rem}
.lvl__que{display:block;font-size:var(--fs-2xs);letter-spacing:.03em;color:var(--muted);
margin-top:.45rem;max-width:22ch}
/* ===================== v46: rediseño del desplegable =====================
Las tarjetitas iban en fila con la imagen chica a la izquierda: el icono no
se leía y el texto quedaba descuadrado. Ahora cada una es una ficha vertical
con el icono grande sobre un tono suave y el nombre debajo, todas del mismo
alto para que la retícula cierre pareja.
========================================================================= */
.mega__grid{grid-template-columns:1fr 1fr;gap:.55rem}
.dditem{flex-direction:column;align-items:center;text-align:center;gap:.55rem;
padding:.9rem .6rem 1rem;border-radius:16px;border:1px solid transparent;
background:#FCFAFC;transition:.22s}
.dditem img{width:100%;height:74px;max-width:88px;object-fit:contain;padding:0;
background:transparent;border-radius:0;
filter:drop-shadow(0 8px 12px rgba(120,80,130,.16));transition:transform .25s ease}
.dditem span{align-items:center;font-size:var(--fs-xs);color:var(--ink);font-weight:400}
.dditem small{margin-top:.15rem}
.dditem:hover{background:var(--tint);border-color:#E7D6EC;transform:translateY(-2px)}
.dditem:hover img{transform:scale(1.1) rotate(-4deg)}
.mega__feat{width:196px}
.dropdown--mega{padding:.75rem}
/* ===================== v47: kits ajustables =====================
Cada kit se puede subir o bajar de tamaño con dos controles: uno general,
que reparte piezas y modelos a la vez —al crecer ENTRAN modelos nuevos, no
solo más de lo mismo—, y uno por modelo para afinar unidad por unidad.
Los cuatro rangos se tocan pero no se encinan: el tope de un kit y el piso
del siguiente se parten a la mitad entre sus tamaños base, así que cada
tamaño posible cae en un kit y en uno solo. Al llegar a un extremo el
control lo dice y manda al kit vecino, que es el que cubre ese tamaño.
================================================================= */
.kitsize{border:1px solid var(--line);border-radius:14px;padding:.85rem .95rem .7rem;
background:var(--tint);margin:0 0 1rem}
.kitsize__lab{margin:0 0 .55rem;font-size:var(--fs-3xs);letter-spacing:.2em;
text-transform:uppercase;color:var(--accent-deep)}
.kitsize__ends{display:flex;justify-content:space-between;margin-top:.2rem;
font-size:var(--fs-3xs);letter-spacing:.06em;color:var(--muted)}
.kitsize__note{margin:.4rem 0 0;font-size:var(--fs-3xs);line-height:1.4;color:var(--accent-deep);min-height:1.4em}
.kitsize__note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* El riel, compartido por los dos controles. Se estiliza a mano porque el
nativo de cada navegador trae su propio color y aquí desentona. */
.rangex{-webkit-appearance:none;appearance:none;width:100%;margin:0;background:transparent;cursor:pointer}
.rangex::-webkit-slider-runnable-track{height:4px;border-radius:100px;background:#E0CFE6}
.rangex::-moz-range-track{height:4px;border-radius:100px;background:#E0CFE6}
.rangex::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;
border-radius:50%;background:var(--accent);border:2px solid #fff;
box-shadow:0 2px 6px rgba(120,60,100,.35);transition:transform .15s}
.rangex::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff;border-radius:50%;
background:var(--accent);box-shadow:0 2px 6px rgba(120,60,100,.35)}
.rangex:hover::-webkit-slider-thumb,.rangex:active::-webkit-slider-thumb{transform:scale(1.16)}
.rangex:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:100px}
/* Control por modelo: mismo riel, más discreto, en su propia fila para no
apretar el renglón del modelo. */
.kit__list li{grid-template-rows:auto auto;row-gap:.45rem;padding:.55rem 0}
.kit__u{grid-column:1/-1;height:14px}
.kit__u::-webkit-slider-runnable-track{height:3px;background:#E9DEEE}
.kit__u::-moz-range-track{height:3px;background:#E9DEEE}
.kit__u::-webkit-slider-thumb{width:13px;height:13px;margin-top:-5px;background:var(--lilac-deep)}
.kit__u::-moz-range-thumb{width:13px;height:13px;background:var(--lilac-deep)}
.kit__list li.is-off{opacity:.4}
.kit__list li.is-off .kit__qty{color:var(--muted)}
@media(prefers-reduced-motion:reduce){ .rangex::-webkit-slider-thumb{transition:none} }