/* ===================== 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;
--cinta-agotado:26px; /* alto de la cinta de «Agotado»; los puntos de foto
de Odoo lo consultan para no encimarse */
--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}
/* La barra de título del cajón sólo existe en teléfono: en escritorio el menú
es una fila y no hay nada que cerrar. Sin esta línea salía un «MENÚ x»
suelto entre las categorías. */
.nav__head{display:none}
.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}
/* Agotado. Le toca a la mitad del catálogo, así que grita lo justo: se lee de
una pasada sin convertir la cuadrícula en un muro de avisos. La foto se
apaga —no se esconde— para que la pieza se siga viendo y se pueda desear. */
.card__media:has(.card__agotado) img{opacity:.42;filter:grayscale(.55)}
.card__agotado{position:absolute;left:0;right:0;bottom:0;
height:var(--cinta-agotado);display:grid;place-items:center;
background:rgba(52,42,59,.82);color:var(--cream);
font-size:var(--fs-3xs);letter-spacing:.22em;text-transform:uppercase;
text-align:center;padding:0 .5rem;line-height:1;
backdrop-filter:blur(2px)}
.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: permanente, al pie de la tarjeta.
El aspecto —la cáscara de acuarela— lo pone el sistema de pastillas del
final del archivo; aquí sólo queda el acomodo dentro de la tarjeta. */
.card__add{position:static;opacity:1;transform:none;width:100%;margin-top:.9rem}
.card:hover .card__add{opacity:1;transform:none}
/* 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__nota{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}
/* El summary es un flex con el "+" al otro extremo, así que el icono y su
texto van envueltos juntos: si el fuera hermano suelto, el
space-between los mandaría a esquinas opuestas. */
.acc__label{display:flex;align-items:center;gap:.55rem}
.acc__label img{width:26px;height:26px;object-fit:contain;flex:none;opacity:.8}
.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;
display:flex;align-items:center;gap:.45rem}
.facet__title img{width:26px;height:26px;object-fit:contain;flex:none;opacity:.8}
.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 78%,rgba(0,0,0,.65) 92%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,.65) 92%,transparent 100%)}
.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){.header__inner{grid-template-columns:auto 1fr auto}}
/* v46: arreglo del menú sándwich en móvil.
La versión v44 de aquí arriba escondía el menú con `.nav{display:none}` a
partir de 920 px, porque con el logo a la izquierda ya no cabía en línea.
Eso dejó dos agujeros:
1. En teléfono el botón sándwich SÍ funcionaba —le ponía `is-open` al menú y
el alto pasaba de 0 a 692 px— pero sobre un elemento en `display:none`,
así que no se veía nada. El menú abría en el vacío.
2. Entre 641 y 920 px no quedaba NINGUNA navegación: el menú escondido por
esta regla y el botón todavía escondido, porque sólo aparecía a 640.
Se arregla desplegando el panel desde 920 px, que es donde el menú en línea
deja de caber, y colapsándolo con `max-height` en vez de `display:none`:
así el elemento existe, el botón tiene qué abrir y la transición se ve. */
@media(max-width:920px){
.header__menu{display:inline-flex}
.nav{display:flex;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;z-index:60}
.nav.is-open{max-height:min(72vh,700px);padding:.6rem 1.4rem 1rem;overflow:auto}
.nav a{padding:.75rem 0;border-bottom:1px solid var(--line)}
.nav__item{width:100%}
}
/* ===================== 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} }
/* v41: las joyas flotantes y la columna del texto.
Encima de ~820 px las ilustraciones vuelven a aparecer, pero entre 820 y
1200 el titular ocupa proporcionalmente MÁS ancho de la pantalla, así que
las tres de la izquierda le caen encima. Ahí se esconden y quedan sólo las
de la derecha, que es donde no hay texto.
Se hace por ancho y no moviéndolas otra vez porque el problema no es dónde
están: es que a ese tamaño no cabe nada a la izquierda. */
@media (max-width:1200px){
.hero__float .hf:nth-child(-n+2),
.hero__float .hf:nth-child(6){ display:none }
}
/* v54: LISTÓN en la esquina para los tres primeros del ranking.
Historia corta, porque las dos versiones anteriores se descartaron y
conviene no reintentarlas:
v42 — emoji de medalla 🥇🥈🥉. Fuera: se dibuja distinto en cada sistema,
en algunos no se dibuja, y no se parecía a nada de la página.
v43 — círculo con relleno dorado, perla y bronce. Fuera también: por más
que llevara los colores de la marca, seguía leyéndose como una
medalla, no como un distintivo de tienda.
v54 es un listón cruzando la esquina de la foto, del mismo lila para los
tres puestos. Lo distintivo es la FORMA, no el metal: se reconoce de lejos,
no compite con la joya —vive en una esquina, donde no hay pieza— y no
depende de que el sistema tenga tal o cual emoji.
Cómo está armado: una banda rectangular girada 45 grados y empujada hacia
afuera, que el contenedor recorta. Por eso `.rankwrap` necesita
`overflow:hidden`: sin eso el pico del listón asoma fuera de la tarjeta. */
.rankwrap{ position:relative; overflow:hidden }
.rank{
position:absolute; top:0; left:0; z-index:3;
width:150px; padding:.34rem 0; line-height:1;
transform: translate(-36%, 42%) rotate(-45deg);
transform-origin: center;
background: var(--lilac-deep); color: var(--cream);
text-align:center; white-space:nowrap;
font-family:'Jost', system-ui, sans-serif;
font-size: var(--fs-3xs); font-weight:500;
letter-spacing:.18em; text-transform:uppercase;
box-shadow: 0 8px 18px -12px rgba(80,50,90,.8);
border-radius:0;
}
/* Los tres puestos comparten color a propósito: lo que cambia es el número. */
.rank--1, .rank--2, .rank--3{ background: var(--lilac-deep) }
/* En la tabla de tendencias el listón va sobre la miniatura, que es lo único
con forma de tarjeta en una fila. */
.tr-thumbwrap{ position:relative; display:block; overflow:hidden; border-radius:10px }
.tr-thumbwrap .rank{ width:120px; font-size:9px; letter-spacing:.12em;
transform: translate(-34%, 40%) rotate(-45deg) }
.tr-pos{font-variant-numeric:tabular-nums}
.tr-pos{font-variant-numeric:tabular-nums}
/* ── Páginas de texto: envíos, devoluciones, tallas, términos ─────────────
Prosa de lectura larga. La medida se limita a ~62 caracteres porque un
renglón que cruza los 1200 px del sitio se vuelve imposible de seguir: al
volver al margen izquierdo ya no se sabe en qué línea se iba. */
.legal{max-width:62ch;margin:0 auto;font-size:var(--fs-sm);line-height:var(--lh-prosa);color:var(--ink)}
.legal h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
font-size:var(--fs-t4);color:#6E5A85;margin:2.6rem 0 .7rem;text-wrap:balance}
.legal h2:first-of-type{margin-top:1rem}
.legal h3{font-size:var(--fs-md);font-weight:500;margin:1.6rem 0 .4rem}
.legal p{margin:0 0 .9rem}
.legal ul,.legal ol{margin:0 0 1.1rem;padding-left:1.3rem}
.legal li{margin-bottom:.45rem}
.legal a{color:var(--lilac-deep);text-decoration:underline;text-underline-offset:.18em}
.legal strong{font-weight:500;color:#4A3B57}
/* Una nota al margen del argumento: matices, advertencias, letra chica. */
.legal .nota{font-size:var(--fs-xs);color:var(--muted);
border-left:2px solid var(--line);padding-left:.9rem;margin:1.2rem 0 1.4rem}
/* Tablas de medidas. `tabular-nums` alinea las cifras en columna; sin eso el
1 es más angosto que el 8 y los milímetros se ven chuecos. */
.legal .tabla{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;
font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.legal .tabla th{text-align:left;font-weight:500;color:var(--muted);
font-size:var(--fs-3xs);letter-spacing:.14em;text-transform:uppercase;
padding:.55rem .7rem;border-bottom:1px solid var(--lilac)}
.legal .tabla td{padding:.55rem .7rem;border-bottom:1px solid var(--line)}
.legal .tabla tr:last-child td{border-bottom:0}
/* Lo que falta por decidir, en amarillo y a propósito.
Estas páginas son borradores: lo más útil que pueden hacer es enseñar de un
vistazo QUÉ le falta a Alex por definir, en vez de esconderlo en un texto
que se lee como si ya estuviera terminado. Cuando no quede ninguno, se
borra esta regla junto con la advertencia de borrador. */
.legal .porconfirmar{background:#FFF3C4;color:#6B5320;padding:.05em .4em;
border-radius:4px;font-size:.92em;font-weight:500;
box-shadow:inset 0 -1px 0 rgba(120,90,20,.25)}
.legal .borrador{background:var(--tint);border:1px solid var(--soft);
border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:1.6rem;
font-size:var(--fs-xs)}
/* ── v47: el hero en teléfono ─────────────────────────────────────────────
Es lo primero que ve quien entra, y en móvil estaba mal de tres formas.
ALTO. Estaba en 78vh, o sea chaparro: el titular, los dos botones y los
puntos se apretaban en tres cuartos de pantalla. Pasa a `100dvh` —la altura
*dinámica*, la que descuenta la barra del navegador— con `100vh` antes como
respaldo para navegadores viejos. El `min-height` es para teléfonos
apaisados, donde 100dvh serían 300 px y no cabría nada.
FLECHAS. Medían 48 px pegadas al borde del texto y le pasaban por encima al
titular. Bajan a 34, se arriman al borde de la pantalla, y el contenido se
mete 3.2 rem por cada lado para dejarles su carril. Se quedan —no se
esconden— porque son la única pista visible de que hay más de una imagen.
BOTONES. Eran dos de anchos distintos, uno junto al otro. En columna y del
mismo ancho: en un pulgar, dos blancos iguales se aciertan mejor que dos
desiguales. */
@media(max-width:640px){
/* el alto va en odoo-extra.css: Odoo lo pisa con !important. */
.hero__arrow{ width:34px;height:34px;font-size:.85rem }
.hero__arrow--prev{ left:.35rem }
.hero__arrow--next{ right:.35rem }
.hero__content{ padding-left:3.2rem;padding-right:3.2rem }
.hero__cta{ flex-direction:column;align-items:stretch;gap:.6rem;width:100% }
.hero__cta .btn{ width:100%;justify-content:center;text-align:center }
.hero__dots{ bottom:1.1rem }
}
/* ── v48: dos botones lado a lado, del mismo ancho ────────────────────────
«Ver todo» medía 137 px y «Ver tendencias» 191: la pareja se veía chueca y
con ella toda la sección, porque un pie de sección centrado es de las pocas
cosas que el ojo compara directamente.
Se resuelve con una rejilla de columnas iguales (`grid-auto-columns:1fr`)
en vez de una fila flexible: en flex cada botón mide lo que mide su texto,
y emparejarlos obligaría a inventar un ancho fijo que se rompe en cuanto
alguien cambia una palabra. Así el ancho lo decide el botón más largo y los
dos lo adoptan, diga lo que diga el texto.
`inline-grid` para que el bloque siga centrándose con el `text-align:center`
que ya trae el pie de sección. */
.section__foot{ text-align:center; margin-top:3rem }
.section__foot:has(.btn + .btn){
display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr;
gap:.8rem; justify-items:stretch;
}
.section__foot .btn{ justify-content:center; text-align:center }
/* El pie de sección es un hijo centrado por su sección; al volverse inline-grid
necesita un contenedor que lo centre. */
.section > .section__foot:has(.btn + .btn){ display:grid; justify-content:center;
grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); max-width:max-content; margin-inline:auto }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap }
@media(min-width:641px){
.hero__cta:has(.btn + .btn){ display:inline-grid; grid-auto-flow:column;
grid-auto-columns:1fr; max-width:max-content }
.hero__cta .btn{ justify-content:center; text-align:center }
}
/* ── v49: la banda de «Precios de mayoreo», en tres renglones ─────────────
Iba en un solo renglón larguísimo —«PRECIOS DE MAYOREO»— y con la banda
ancha eso obligaba a un tamaño chico para que cupiera. Partido en dos, el
titular puede crecer y la composición se equilibra con el «Escríbenos aquí»
de abajo.
Y el aire: la fuente Beauria reserva a los lados de cada renglón un margen
para que la caída de las letras no se recorte (unas 0.6 veces el tamaño por
lado). El JS ya lo recorta con márgenes negativos medidos; lo que faltaba
era decidir a mano cuánto aire queda ARRIBA y ABAJO del bloque entero, en
vez de que fuera lo que sobrara. Eso es este `padding-block`: es el margen
real y se controla desde aquí. */
.shakeband__type{ padding-block: clamp(20px, 3.4vw, 52px); gap: clamp(4px, .8vw, 14px) }
.shakeband__cta{ padding-top: clamp(10px, 1.6vw, 26px) }
/* ── El texto quedaba a media pantalla del título ──────────────────────────
El bloque de texto va montado ENCIMA del video (position:absolute) y estaba
centrado en su caja. Esa caja mide lo que el video: con 1928/1072 y hasta
1500 px de ancho, son ~834 px de alto. Centrado ahí dentro, el titular
caía a más de 350 px por debajo de «Un pequeño tesoro para cada día», y
como el video se desvanece ANTES de que el texto aparezca, lo que se veía
entre uno y otro no era video: era vacío.
Con `flex-start` el bloque se va al tope de esa caja y el `padding-block`
de arriba pasa a ser el margen de verdad — que es justo para lo que se
escribió, según el comentario de aquí arriba; con el centrado no controlaba
nada. El aire que sobra queda ahora abajo, donde el video lo ocupa mientras
corre. */
.shakeband__type{ justify-content: flex-start }
/* ── v50: miniaturas del lookbook deformadas ──────────────────────────────
Tres de las dieciocho —las HORIZONTALES: g3 (1200x670), g12 (1200x896) y
g14 (1200x805)— se veían estiradas en móvil. Las verticales no, y ahí
estaba la pista.
La causa es el `min-height:170px` que usa el efecto de carga (el brillo que
recorre el hueco antes de que baje la foto). En una columna de 167 px una
foto apaisada mide 93 px de alto por su propia proporción; el min-height la
estiraba hasta 170 y, como una sin `object-fit` usa `fill`, el pixel
se deformaba en vez de recortarse.
Dos líneas lo cierran: `cover` para que un alto forzado recorte y jamás
estire, y quitarle el min-height a la foto YA CARGADA, que es cuando su
proporción debe mandar y el brillo ya no hace falta. Así en la galería no
se recorta nada: cada foto ocupa el alto que le toca. */
.gallery img{ object-fit: cover }
.gallery img.loaded{ min-height: 0 }
/* ── v51: el cajón del menú en teléfono ───────────────────────────────────
Cuatro cosas que lo tenían inservible:
1. Los submenús no abrían. En escritorio se despliegan al pasar el ratón,
y en un teléfono no hay ratón: se quedaban en `max-height:0` para
siempre y sus fotos no se veían nunca. Ahora los abre el guion con la
clase `is-open`, y aquí se les da un alto de verdad —limitado, con
desplazamiento propio— en vez de los 320 px de antes, que cortaban un
mega menú de diez categorías a la mitad.
2. Se confundía con la página: menú y fondo eran el mismo crema exacto
(#F7F3EE). Ahora va en blanco, con sombra y una línea, para que se lea
como una capa encima y no como parte del contenido.
3. Faltaba cómo cerrarlo sin adivinar. Se agregó la barra de arriba con la
× .
4. La rejilla del mega menú venía pensada para una fila ancha de
escritorio; en 390 px se salía por la derecha y empujaba la página. Se
pasa a dos columnas con las fotos acotadas, y el cajón corta cualquier
desborde horizontal en vez de convertirlo en scroll lateral. */
@media(max-width:920px){
.nav{
background:#fff;
box-shadow:0 18px 40px -24px rgba(80,50,90,.45);
border-bottom:1px solid var(--line);
overflow-x:hidden;
z-index:70;
/* ESTA LÍNEA ES LA QUE ARREGLABA EL «BLOG ESCONDIDO A LA DERECHA».
`.nav` también es una clase de Bootstrap, y Bootstrap le pone
`flex-wrap: wrap`. Con nuestra dirección en columna y un alto máximo,
eso no envuelve renglones: envuelve COLUMNAS. Las tres últimas
entradas —Más, Tendencias y Blog— saltaban a una segunda columna
dibujada fuera de la pantalla, invisible y con scroll lateral.
Nada de eso se ve leyendo nuestro CSS: la regla es de otra hoja. */
flex-wrap:nowrap;
/* El menú de escritorio es un elemento de la rejilla de la cabecera y la
versión v44 le puso `justify-self:start` para pegarlo al logo. Como
cajón absoluto eso lo encogía al ancho de su contenido —321 px de 390—
y por la derecha se veía el hero detrás. Aquí manda el ancho completo. */
justify-self:stretch;
width:100%;
}
.nav__head{
display:flex !important;align-items:center;justify-content:space-between;
padding:.15rem 0 .55rem;border-bottom:1px solid var(--line);margin-bottom:.2rem;
}
.nav__title{
font-size:var(--fs-3xs);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.nav__close{
border:0;background:transparent;color:var(--ink);
font-size:1.6rem;line-height:1;padding:.1rem .3rem;cursor:pointer;
}
/* LA FLECHA VA EN ::before, NO EN ::after. Y hay que decir por qué.
El menú de escritorio usa `::after` de cada enlace como subrayado
animado: `position:absolute; left:0; bottom:-2px; height:1px`, y al pasar
el ratón crece a `width:100%`. Cuando la flecha se dibujó ahí también,
heredó todo eso: quedaba pegada abajo a la izquierda —o sea invisible
como flecha— y al hacer rollover se estiraba al ancho completo. Rotada
45 grados, eso se veía como una línea morada diagonal cruzando el cajón y
saliéndose del contenedor.
Así que la flecha se dibuja en `::before` —el hueco del rombo de
escritorio, que aquí no hace falta— con todo reseteado a mano, y el
subrayado se apaga: en un cajón vertical no aporta nada. */
.nav__item--has > a{ display:flex;align-items:center;justify-content:space-between;gap:.6rem }
.nav__item > a::after{ display:none !important; content:none !important }
.nav__item--has > a::before{
display:block !important; content:"";
order:2; margin:0 0 0 auto; flex:0 0 auto;
position:static; width:.5rem; height:.5rem; background:none; opacity:1;
border:0;
border-right:1.5px solid var(--lilac-deep);
border-bottom:1.5px solid var(--lilac-deep);
transform:rotate(45deg) translate(-2px,-2px);
transition:transform .25s ease;
}
.nav__item--has:hover > a::before,
.nav__item.is-open > a::before{ transform:rotate(-135deg) translate(-2px,-2px) }
.nav .dropdown{
max-height:0;overflow:hidden;transition:max-height .32s ease;
background:transparent;border:0;box-shadow:none;padding:0;
}
.nav__item.is-open .dropdown{
max-height:min(58vh,520px);overflow-y:auto;padding:.2rem 0 .7rem;
}
/* El mega menú, acotado al ancho del teléfono */
.nav .dropdown--mega .mega__grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;
width:100%;max-width:100%;
}
.nav .dropdown--mega .dditem{
display:flex;align-items:center;gap:.5rem;min-width:0;
padding:.5rem .4rem;border-bottom:0;
}
.nav .dropdown--mega .dditem img{ width:34px;height:34px;object-fit:contain;flex:0 0 auto }
.nav .dropdown--mega .dditem span{ min-width:0;font-size:var(--fs-2xs);line-height:1.2 }
.nav .dropdown--mega .dditem small{ display:block;color:var(--muted);font-size:var(--fs-3xs) }
}
/* ── v52: los kits en la portada ──────────────────────────────────────────
Dos tarjetas y un botón centrado debajo. El collage de cuatro fotos dice
«esto trae varias piezas» sin necesidad de explicarlo, que es justo lo que
un botón solo no lograba. Dos columnas en escritorio y también en teléfono:
la tarjeta es un collage, no una ficha, y aguanta el tamaño chico. */
.kitshome__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;
max-width:var(--wrap);margin:0 auto}
.kitcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;transition:.3s;box-shadow:0 10px 30px -26px rgba(80,50,90,.4)}
.kitcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.kitcard__media{position:relative;display:grid;grid-auto-rows:1fr;
gap:1px;background:var(--line);aspect-ratio:1;overflow:hidden}
.kitcard__media img{width:100%;height:100%;object-fit:cover;background:#fff;display:block}
.kitcard__agotado{position:absolute;left:0;right:0;bottom:0;height:var(--cinta-agotado);
display:grid;place-items:center;background:rgba(52,42,59,.82);color:var(--cream);
font-size:var(--fs-3xs);letter-spacing:.22em;text-transform:uppercase}
.kitcard__body{padding:1rem 1.1rem 1.2rem;text-align:center}
.kitcard__name{font-size:var(--fs-t5);margin:0 0 .2rem}
.kitcard__meta{font-size:var(--fs-2xs);color:var(--muted);margin:0 0 .35rem}
.kitcard__price{color:var(--lilac-deep);font-weight:500;letter-spacing:.04em;margin:0}
@media(max-width:640px){
.kitshome__grid{gap:.8rem}
.kitcard__body{padding:.75rem .6rem 1rem}
}
/* ── v53: «Va bien con» al pie de la ficha ────────────────────────────────
Nace escondida y la enciende el guion cuando tiene qué enseñar, para no
dejar un título flotando sobre un hueco mientras cargan los datos. */
/* La sección SE QUEDA en el flujo aunque esté vacía, con 1 px de alto.
Con `display:none` no tiene caja, y un elemento sin caja NO INTERSECTA
nunca: el observador que dispara la carga jamás se enteraba de que la
clienta había llegado. Lo que se esconde es el contenido, no la sección. */
.relacionados{min-height:1px}
.relacionados > .relacionados__inner{display:none}
.relacionados.is-on{background:var(--tint);padding:3.5rem 0 4rem;margin-top:2rem}
.relacionados.is-on > .relacionados__inner{display:block}
.relacionados__inner{max-width:var(--wrap);margin:0 auto;padding:0 1.6rem;text-align:center}
.relacionados .section__title{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0 0 1.8rem}
.relacionados__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.relcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
transition:.28s;box-shadow:0 10px 26px -24px rgba(80,50,90,.45)}
.relcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.relcard__media{aspect-ratio:1;display:block;background:#fff}
.relcard__media img{width:100%;height:100%;object-fit:contain;display:block}
.relcard__name{padding:.6rem .5rem 0;font-size:var(--fs-2xs);letter-spacing:.04em}
.relcard__price{padding:.15rem .5rem .9rem;color:var(--lilac-deep);font-weight:500;font-size:var(--fs-2xs)}
@media(max-width:1080px){ .relacionados__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:640px){
.relacionados.is-on{padding:2.4rem 0 2.8rem}
.relacionados__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.relacionados__inner{padding:0 .8rem}
}
/* ── v55: el último desplegable, anclado a la derecha ─────────────────────
Los megamenús se abren desde el centro de su entrada y crecen hacia la
derecha 560 px. Mientras «Más» estuvo a media barra eso cabía; al mandarlo
al final —que es su lugar, es el cajón de lo que no cabe— empezó a salirse
40 px a 1440 y 120 px a 1280, y con ello a meterle scroll horizontal a toda
la página.
La regla se ata a `:last-child` y no a «Más» por su nombre: el menú lo
ordena Alex desde Odoo, así que lo que hay que resolver es «el último», sea
cual sea el que quede ahí mañana. */
.nav__item:last-child .dropdown--mega{
left:auto; right:0; transform:translateY(-6px);
}
.nav__item:last-child:hover .dropdown--mega{ transform:translateY(4px) }
/* ── v56: el lookbook, más grande y con video ─────────────────────────────
Dos cambios que van juntos.
MÁS GRANDE. La retícula bajaba de 5 columnas a 2 y en escritorio cada pieza
medía ~270 px: suficiente para ver que hay una modelo, no para ver la joya,
que es lo único que aquí importa. Ahora son 3/3/2, y la pieza pasa a ~450 px
en escritorio. Caben menos por fila, a propósito.
Los cortes no bajan a la par y no es descuido. Con esta galería a ancho
completo, 2 columnas por debajo de 1280 dan piezas de ~600 px —media pantalla
cada una, que ya no es un mosaico— así que ahí se aguanta en 3 y el salto a 2
espera hasta 920. Y el teléfono se queda en 2 columnas: una sola no sería «un
poco más grande», sería otra página, y con doce piezas se haría eterna de
bajar.
CON VIDEO. Las reglas de la galería estaban escritas contra `img`, así que
un