@charset "UTF-8";
:root{--ink:#514438;--paper:#faf8f4;--lilac:#e8e2ec;--deep:#736079;--line:#d9d0cf;--cream:#e5d4ad}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}body:has(dialog[open]){overflow:hidden}button,a,input,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button{cursor:pointer}img{display:block;max-width:100%}button,a,select,summary{outline-offset:6px}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--deep)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.06}em{font-weight:400}h2{font-size:clamp(2.7rem,4.5vw,4.5rem);letter-spacing:-.045em}h3{font-size:1.65rem;letter-spacing:-.03em}.topline{text-align:center;background:var(--lilac);font-size:12px;letter-spacing:.08em;padding:7px 15px}header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:var(--paper);position:sticky;top:0;z-index:20;border-bottom:1px solid #51443815}.identity{display:flex;align-items:center;gap:10px}.identity img{width:49px;height:49px;border-radius:50%}.identity>span{font-family:Georgia,serif;font-size:28px;line-height:1.1}.identity small{display:block;text-align:center;font:10px Arial;letter-spacing:.36em;margin-top:6px}nav{display:flex;gap:35px;font-size:14px}nav a{position:relative}nav a:after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:1px;background:var(--ink);transition:width .2s}nav a:hover:after{width:100%}.menu{display:none}.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:500;margin-bottom:25px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-height:51px;padding:14px 23px;border:1px solid var(--ink);font-size:14px;transition:background .2s,transform .2s}.button:hover{transform:translateY(-3px)}.dark{background:var(--ink);color:var(--paper)}.dark:hover{background:#6d5b4a}.outline{background:transparent}.outline:hover{background:#5144380c}.section{padding:100px 6%}.aromas{display:grid;grid-template-columns:1fr 1fr;background:var(--lilac)}.aroma-photo{position:relative;overflow:hidden;min-height:680px}.aroma-photo img{width:100%;height:100%;object-fit:cover}.aroma-photo>span{position:absolute;bottom:25px;left:30px;font-size:11px;letter-spacing:.16em}.aroma-copy{padding:65px 10%}.aroma-copy h2{font-size:clamp(4rem,6.5vw,6.5rem);margin-bottom:35px}.aroma-tabs{display:flex;border-bottom:1px solid #bfb2c4;gap:20px;margin-bottom:22px}.aroma-tabs button{border:0;background:transparent;padding:10px 0;font-size:14px;border-bottom:2px solid transparent}.aroma-tabs button[aria-selected=true]{border-bottom-color:var(--ink)}.aroma-tabs small{font-size:11px}.aroma-group{margin-bottom:17px}.aroma-group h3{font:12px Arial;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}.aroma-group p{font-size:14px;line-height:1.9;color:#6b5d6c}details{border-top:1px solid #bfb2c4;margin-top:22px;padding-top:18px}summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font-size:14px}details p{font-size:14px;margin-top:12px}details[open] summary span{transform:rotate(45deg)}.phone{display:block;font-size:12px;margin-top:13px;letter-spacing:.1em}footer{background:var(--lilac);padding:50px 6%;display:flex;align-items:center;justify-content:space-between;gap:30px}footer>p{font-family:Georgia,serif;font-size:21px;line-height:1.3}footer>div{display:grid;gap:8px;font-size:14px}.back-top{font-size:12px}dialog{border:0;padding:0;background:var(--paper);color:var(--ink);width:min(960px,92vw);max-height:90dvh}dialog::backdrop{background:#30283388;backdrop-filter:blur(5px)}.close{position:absolute;right:14px;top:12px;border:1px solid var(--line);background:var(--paper);border-radius:50%;width:40px;height:40px;font-size:27px;z-index:2;line-height:1}.modal-grid{display:grid;grid-template-columns:1fr 1fr}.modal-grid>img{width:100%;height:100%;object-fit:cover}.modal-copy{padding:48px 35px 35px}.modal-copy h2{font-size:2.8rem}.price{font-size:21px;margin:14px 0}.modal-copy>p:empty{display:none}.modal-copy>p:not(.eyebrow):not(.price){font-size:14px;margin-bottom:18px}.modal-copy label{display:block;font-size:13px;margin:14px 0 5px}.modal-copy select{width:100%;padding:10px;border:1px solid var(--line);background:var(--paper);border-radius:0;font-size:14px}.total{display:flex;justify-content:space-between;padding:20px 0}.modal-copy .button{width:100%}.skip{position:fixed;top:-100px;z-index:100;background:var(--paper);padding:10px}.skip:focus{top:0}[hidden]{display:none!important}
@media(min-width:1600px){.section{padding-left:max(6%,calc((100vw - 1500px)/2));padding-right:max(6%,calc((100vw - 1500px)/2))}}
@media(max-width:1000px){header{padding:0 4%;height:82px}nav{gap:20px}.section{padding:75px 5%}h3{font-size:1.4rem}.aroma-copy{padding:45px 8%}.aroma-photo{min-height:640px}footer{flex-wrap:wrap}}
@media(max-width:650px){html{scroll-padding-top:75px}.topline{font-size:10px}header{height:74px;padding:0 5%}.identity>span{font-size:24px}.identity img{width:40px;height:40px}.identity small{font-size:8px}.menu{display:block;border:0;background:none;font-size:23px;padding:5px}nav{display:none;position:absolute;left:0;right:0;top:74px;background:var(--paper);padding:20px 6%;border-bottom:1px solid var(--line);flex-direction:column}nav.open{display:flex}.section{padding:60px 6%}h2{font-size:2.8rem}.aromas{display:flex;flex-direction:column}.aroma-photo{height:420px;min-height:0}.aroma-copy{padding:42px 7%}.aroma-copy h2{font-size:4rem}.aroma-copy h2 br{display:none}.aroma-copy h2 em{display:block}.aroma-tabs{gap:28px}footer{padding:40px 6%;gap:30px;display:grid;grid-template-columns:1fr 1fr}footer>p{font-size:18px}footer .identity>span{font-size:23px}.modal-grid{display:block}.modal-grid>img{height:270px;object-fit:contain;background:#f1eff1}.modal-copy{padding:26px 24px}.modal-copy h2{font-size:2.5rem}.modal-copy .eyebrow{margin-bottom:12px}.close{position:fixed;right:7%;top:7%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Editorial photography: wide banner and responsive product framing */
.aroma-photo img{object-position:center 55%}.aroma-photo>span{background:rgba(250,248,244,.85);padding:8px 12px}
@media(max-width:650px){.aroma-photo img{object-position:center 61%}}
.aroma-photo>img{position:absolute;inset:0}


.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ================= TOPLINE + HEADER NUEVO ================= */
.topline{display:flex;justify-content:center;gap:10px}
.site-header{display:grid;grid-template-columns:1fr auto 1fr}
.site-header nav{justify-self:center}
.site-header .header-icons{justify-self:end;display:flex;align-items:center;gap:6px}
.site-header .menu{justify-self:end}
.icon-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;border:0;background:none;color:var(--ink);border-radius:50%;transition:background .2s}
.icon-btn:hover{background:#51443812}
.cart-count{position:absolute;top:1px;right:1px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ink);color:#fff;font-size:9px;line-height:1}
@media(max-width:650px){.site-header{display:flex;justify-content:space-between}}

/* ================= HERO ESTÁTICO (foto real, sin carrusel) ================= */
/* Foto completa de fondo (sin recortar en columna) con el texto superpuesto
   sobre la zona izquierda de la imagen, que ya viene con espacio vacío ahí */
.hero-static{position:relative;isolation:isolate;min-height:clamp(560px,86svh,860px);overflow:hidden;background:#efe2cf}
.hero-photo{position:absolute;inset:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:38% 50%}
.hero-static::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(243,232,211,.92) 0%,rgba(243,232,211,.75) 32%,rgba(243,232,211,.15) 56%,transparent 72%)}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:20px;height:100%;min-height:clamp(560px,86svh,860px);padding:0 4% 0 6%;max-width:560px}
.hero-kicker{font:600 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#6c513c}
.hero-brand{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(3.4rem,7vw,5.6rem);line-height:.92;letter-spacing:-.01em;margin:2px 0 6px}
.hero-title{font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.14;letter-spacing:-.02em}
.hero-text{max-width:420px;font:16px/1.65 Arial,Helvetica,sans-serif;color:#6c513c}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.hero-tags{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:16px;border-top:1px solid #51443822;font:11px/1 Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6c513c}
.hero-tags li{list-style:none}

/* Mobile/tablet: mismo layout que escritorio (texto a la izquierda sobre la
   foto completa, degradado horizontal), solo más chico para que calce */
@media(max-width:1000px){
.hero-static{min-height:clamp(420px,62svh,620px)}
.hero-copy{min-height:clamp(420px,62svh,620px);max-width:78%;gap:12px}
.hero-brand{font-size:clamp(2rem,9vw,3rem)}
.hero-title{font-size:clamp(1.1rem,4.6vw,1.6rem)}
.hero-text{font-size:14px;max-width:none}
.hero-kicker{font-size:10px}
.hero-tags{font-size:9px;gap:10px;margin-top:10px;padding-top:10px}
}
@media(max-width:650px){
.hero-static{min-height:clamp(400px,68svh,560px)}
.hero-copy{min-height:clamp(400px,68svh,560px);max-width:72%;padding:0 4% 0 5%}
.hero-static::before{background:linear-gradient(90deg,rgba(243,232,211,.95) 0%,rgba(243,232,211,.8) 42%,rgba(243,232,211,.25) 68%,transparent 85%)}
.hero-cta-row{gap:8px}
.hero-cta-row .button{min-height:38px;padding:9px 12px;gap:6px;font-size:11px}
.hero-tags{display:none}
}

/* ================= SEPARADOR (corta el ritmo entre secciones) ================= */
.divider{display:flex;align-items:center;justify-content:center;gap:24px;padding:38px 6%;background:var(--paper);color:var(--ink)}
.divider-alt{background:var(--lilac)}
.divider-line{flex:1;max-width:220px;height:1px;background:currentColor;opacity:.28}
.divider p{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:.01em;text-align:center;white-space:nowrap}
@media(max-width:650px){.divider{gap:14px;padding:30px 6%}.divider-line{max-width:40px}.divider p{font-size:.95rem;white-space:normal}}

/* ================= FRANJA DE VALORES (bajo el hero) ================= */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:32px 6%;background:#f5eee0;border-bottom:1px solid #51443815}
.feature{display:flex;align-items:center;gap:14px;padding:0 20px;border-left:1px solid #51443822}
.feature:first-child{border-left:0}
.feature svg{flex:none;color:#6c513c}
.feature h3{font:600 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:0}
.feature p{margin-top:4px;font-size:12px;color:#6c513c}
@media(max-width:1000px){.features{grid-template-columns:1fr 1fr;gap:20px 14px}.feature{border-left:0;padding:0}}
@media(max-width:650px){.features{grid-template-columns:1fr;padding:26px 6%}.feature{padding:12px 0;border-top:1px solid #51443822}.feature:first-child{border-top:0}}


/* ================= ESTRUCTURA DE TIENDA (bajo el hero) ================= */
.shop,.duo{background:#fff;padding:56px 6%}
.shop-head{margin-bottom:22px}
.shop-head h2{font:400 1.35rem/1.3 Arial,Helvetica,sans-serif;letter-spacing:0}

/* carrusel horizontal de productos */
.rail-wrap{position:relative}
.rail{position:relative;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:6px}
.rail::-webkit-scrollbar{display:none}
.pcard{flex:0 0 calc((100% - 66px)/4);min-width:0;scroll-snap-align:start}
/* Foto de la tarjeta: al pasar el mouse la vela "se enciende" —
   zoom muy suave + resplandor cálido y, si hay foto encendida
   (assets/<id>-on.webp + lit:true en data.js), cruce entre las dos. */
.pcard-photo{position:relative;display:block;width:100%;aspect-ratio:1/1.12;padding:0;border:0;border-radius:2px;background:#f0eeef;overflow:hidden}
.pcard-media{position:absolute;inset:0;display:block}
.pcard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .55s ease}
.pcard-on{opacity:0}
.pcard-glow{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:soft-light;transition:opacity .55s ease;background:radial-gradient(ellipse 58% 44% at 50% 38%,rgba(255,214,140,.95),rgba(255,186,94,.45) 45%,transparent 72%)}

@media(hover:hover){
  .pcard-photo:hover .pcard-media img{transform:scale(1.06)}
  .pcard-photo:hover .pcard-glow{opacity:1;animation:pcard-flicker 3.2s ease-in-out .55s infinite}
  .pcard-photo:hover .has-lit .pcard-off{opacity:0}
  .pcard-photo:hover .has-lit .pcard-on{opacity:1}
}
/* en táctil el mismo efecto al mantener presionado */
.pcard-photo:active .pcard-glow{opacity:1}
.pcard-photo:active .has-lit .pcard-off{opacity:0}
.pcard-photo:active .has-lit .pcard-on{opacity:1}

@keyframes pcard-flicker{
  0%,100%{opacity:1}
  42%{opacity:.86}
  58%{opacity:.97}
  74%{opacity:.82}
}
@media(prefers-reduced-motion:reduce){
  .pcard-media img{transition:opacity .3s ease}
  .pcard-photo:hover .pcard-media img{transform:none}
  .pcard-photo:hover .pcard-glow{animation:none}
}
.pcard-tag{position:absolute;top:0;left:0;padding:4px 9px;background:#f7f5f4;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.pcard-info{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-top:12px}
.pcard-info h3{font:400 12.5px/1.35 Arial,Helvetica,sans-serif;letter-spacing:0;min-height:2.7em}
.pcard-info p{margin-top:8px;font:700 12.5px Arial,Helvetica,sans-serif}
.bag{flex:none;display:grid;place-items:center;width:34px;height:28px;border:0;border-radius:3px;background:var(--ink);color:#fff;transition:background .2s}
.bag:hover{background:#6d5b4a}
.rail-arrow{position:absolute;top:36%;z-index:2;width:26px;height:40px;transform:translateY(-50%);border:0;background:none;color:#7d7368;font-size:36px;line-height:1;transition:opacity .2s,color .2s}
.rail-arrow:hover{color:var(--ink)}
.rail-arrow:disabled{opacity:.25;cursor:default}
.rail-arrow.prev{left:-32px}
.rail-arrow.next{right:-32px}

/* dos bloques de imagen: uno con texto encima */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tile{position:relative;overflow:hidden;aspect-ratio:1/.93;margin:0;border-radius:2px;background:#f0eeef}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-copy>img{object-position:66% 30%}
.tile-copy:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,26,18,.74) 0%,rgba(38,26,18,.36) 42%,rgba(38,26,18,0) 74%)}
.tile-text{position:absolute;z-index:2;left:6%;right:6%;bottom:7%;color:#fff}
.tile-text h2{max-width:420px;font:400 clamp(1.4rem,2.3vw,2rem)/1.18 Arial,Helvetica,sans-serif;letter-spacing:0}
.tile-text p{max-width:380px;margin-top:10px;font-size:13px;line-height:1.5;opacity:.92}
.tile-text .button{margin-top:18px;min-height:40px;padding:10px 20px;gap:18px;font-size:12px;background:var(--ink);border-color:var(--ink);color:#fff}
.tile-text .button:hover{background:#6d5b4a}
.tile-text .phone{margin-top:12px;color:#fff}

/* fila de colecciones */
.collection-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.collection{display:block}
.collection-image{aspect-ratio:1/1.12;overflow:hidden;border-radius:2px;background:#f0eeef}
.collection-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.collection:hover img{transform:scale(1.04)}
.collection h3{margin-top:12px;font:400 13px Arial,Helvetica,sans-serif;letter-spacing:0}

/* aromas: mismo lenguaje (blanco, tarjetas planas, títulos chicos en sans) */
.aromas{gap:22px;padding:56px 6%;background:#fff}
.aroma-photo{min-height:0;aspect-ratio:1/.93;border-radius:2px}
.aroma-copy{padding:44px 8%;border-radius:2px;background:var(--lilac)}
.aroma-copy h2{margin-bottom:24px;font:400 clamp(1.5rem,2.4vw,2rem)/1.2 Arial,Helvetica,sans-serif;letter-spacing:0}
.aroma-copy h2 br{display:none}
.aroma-copy h2 em{font-style:normal}

/* ================= SOUVENIRS: banda editorial (mismo lenguaje del hero) ================= */
.souvenirs-band{position:relative;isolation:isolate;min-height:clamp(440px,58svh,620px);overflow:hidden;background:#efe2cf}
.sb-photo{position:absolute;inset:0}
.sb-photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.souvenirs-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(243,232,211,.94) 0%,rgba(243,232,211,.8) 34%,rgba(243,232,211,.2) 58%,transparent 75%)}
.sb-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:16px;height:100%;min-height:clamp(440px,58svh,620px);padding:0 4% 0 6%;max-width:480px}
.sb-copy h2{font-size:clamp(1.9rem,3vw,2.6rem)}
.sb-copy p{max-width:420px;font:15px/1.6 Arial,Helvetica,sans-serif;color:#6c513c}
.sb-chips{display:flex;flex-wrap:wrap;gap:8px}
.sb-chips li{list-style:none;padding:6px 14px;border:1px solid #51443833;border-radius:20px;font-size:12px;letter-spacing:.03em;color:var(--ink)}
.sb-copy .phone{margin-top:2px}

@media(max-width:650px){
.souvenirs-band{min-height:clamp(420px,72svh,600px)}
.sb-copy{min-height:clamp(420px,72svh,600px);max-width:75%;padding:0 4% 0 5%;gap:12px}
.souvenirs-band::before{background:linear-gradient(90deg,rgba(243,232,211,.96) 0%,rgba(243,232,211,.82) 44%,rgba(243,232,211,.25) 70%,transparent 88%)}
.sb-copy h2{font-size:1.5rem}
.sb-copy p{font-size:13px}
.sb-chips li{padding:5px 10px;font-size:10px}
}

@media(max-width:1000px){
.pcard{flex-basis:calc((100% - 44px)/3)}
.collection-row{gap:16px}
.tile-text h2{font-size:1.35rem}
}
@media(max-width:650px){
.shop,.duo,.aromas{padding:40px 6%}
.rail{gap:14px}
.pcard{flex-basis:calc((100% - 14px)/2)}
.rail-arrow{display:none}
.duo{grid-template-columns:1fr;gap:14px}
.tile{aspect-ratio:1/1.02}
.collection-row{grid-template-columns:1fr 1fr;gap:18px 14px}
.aroma-photo{aspect-ratio:1/.8}
.aroma-copy h2 em{display:inline}
.aroma-copy{padding:30px 7%}
}


/* ================= CATÁLOGO (página para mirar, sin compra) ================= */
.shop-head-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.text-link{font-size:13px;border-bottom:1px solid var(--ink);padding-bottom:4px;white-space:nowrap}
.text-link span{margin-left:8px}
header nav a[aria-current="page"]:after{width:100%}

.catalog-page{background:#fff}
.cat-head{padding:34px 6% 4px}
.crumbs{display:flex;gap:8px;font-size:12px;color:#7d7368}
.crumbs a:hover{text-decoration:underline}
.cat-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:14px}
.cat-title h1{font:400 clamp(1.8rem,3vw,2.5rem)/1.1 Arial,Helvetica,sans-serif;letter-spacing:0}
.cat-title p{font-size:13px;color:#7d7368}
.cat-layout{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;padding:24px 6% 90px}
.cat-filters{position:sticky;top:112px}
.f-block{padding:18px 0;border-top:1px solid #e6e0dc}
.f-title{display:block;margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.f-title output{font-weight:400;letter-spacing:0;text-transform:none}
.cat-filters input[type=search]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:#fff;font-size:14px}
.f-list{display:grid;gap:2px}
.f-item{display:flex;justify-content:space-between;padding:9px 10px;border:0;border-radius:2px;background:none;text-align:left;font-size:14px}
.f-item small{color:#7d7368}
.f-item:hover{background:#f6f3f1}
.f-item[aria-pressed="true"]{background:var(--ink);color:#fff}
.f-item[aria-pressed="true"] small{color:#ffffffb8}
.cat-filters input[type=range]{width:100%;accent-color:var(--ink)}
.f-clear{padding:0 0 3px;border:0;border-bottom:1px solid var(--ink);background:none;font-size:13px}
.cat-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid #e6e0dc}
.cat-found{font-size:13px;color:#7d7368}
.cat-sort{display:flex;align-items:center;gap:10px;font-size:13px}
.cat-sort select{padding:8px 10px;border:1px solid var(--line);border-radius:2px;background:#fff;font-size:13px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 22px}
.cat-grid[hidden]{display:none}
.cat-grid .pcard{flex:none}
.pcard-info.stack{display:block}
.cat-grid .pcard-info h3{min-height:0}
.pcard-info .pcard-cat{margin-top:4px;font:400 11px Arial,Helvetica,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#7d7368}
.cat-grid .pcard-info .pcard-price{margin-top:8px}
.cat-empty{padding:70px 0;text-align:center}
.cat-empty p{margin-bottom:20px}
.cat-filter-toggle{display:none}
.detail-facts{display:grid;gap:10px;margin:18px 0 24px;font-size:13px}
.detail-facts div{display:grid;grid-template-columns:70px 1fr;gap:10px}
.detail-facts dt{font-weight:600}
.detail-facts dd{margin:0;color:#6b5d6c;line-height:1.5}
.detail-facts dd a{border-bottom:1px solid currentColor}
#detail .button{width:100%}

@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
.cat-layout{grid-template-columns:1fr;gap:0;padding-top:16px}
.cat-filter-toggle{display:flex;justify-content:space-between;width:100%;margin-bottom:14px;padding:13px 16px;border:1px solid var(--line);border-radius:2px;background:#fff;font-size:14px}
.cat-filters{display:none;position:static;margin-bottom:18px;padding:0 16px 14px;border:1px solid var(--line);border-radius:2px}
.cat-filters.open{display:block}
.cat-filters .f-block:first-child{border-top:0}
.cat-grid{gap:26px 14px}
}
@media(max-width:650px){.cat-head{padding-top:24px}.cat-title{flex-wrap:wrap}.cat-toolbar{flex-wrap:wrap}.cat-sort{width:100%}.cat-sort select{flex:1}}


/* muestras de color (círculos del catálogo PDF) */
.swatches{display:flex;gap:6px;margin-top:9px}
.sw{display:block;width:14px;height:14px;border:1.5px solid #2e2620;border-radius:50%;background:var(--c)}
.swatch-row{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.swatch-row[hidden]{display:none}
.swatch-row .swatches{margin:0}
.swatch-row .sw{width:20px;height:20px}
.swatch-row small{font-size:12px;color:#6b5d6c}


/* ═════════════════ ANIMACIONES DE SCROLL ═════════════════
   Todo lo de abajo sólo aplica si anim.js pudo cargar (clase .js-anim en
   <html>). Sin JS, o con "reducir movimiento", la página se ve entera y
   quieta: nada depende de una animación para ser visible. */

/* ---- entrada al aparecer en pantalla ---- */
.js-anim [data-anim]{opacity:0;will-change:transform,opacity}
.js-anim [data-anim="up"]{transform:translateY(42px)}
.js-anim [data-anim="zoom"]{transform:scale(.86)}
.js-anim [data-anim="left"]{transform:translateX(-52px)}
.js-anim [data-anim="right"]{transform:translateX(52px)}
.js-anim [data-anim="tilt"]{transform:translateY(52px) rotate(-3deg) scale(.94)}
.js-anim [data-anim="clip"]{opacity:1;clip-path:inset(0 0 100% 0);transform:scale(1.08)}
.js-anim [data-anim].is-in{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s)
}

/* ---- títulos palabra por palabra ---- */
.js-anim [data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.js-anim [data-split] .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.js-anim [data-split].is-in .w>span{transform:none}

/* ---- parallax de fotos ---- */
.js-anim [data-parallax]{overflow:hidden}
.js-anim [data-parallax] img{transform:translate3d(0,var(--py,0),0) scale(var(--ps,1.14));will-change:transform;transition:--ps .9s}

/* ---- barra de progreso de lectura ---- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#c9a55b,#d98c9e 55%,#75a8cf);pointer-events:none}
html:not(.js-anim) .scroll-progress{display:none}

/* ---- header que se compacta al bajar ---- */
.js-anim header{transition:height .45s cubic-bezier(.16,1,.3,1),background .45s,box-shadow .45s}
.js-anim header .identity img,.js-anim header .identity>span{transition:all .45s cubic-bezier(.16,1,.3,1)}
.js-anim header.is-compact{height:68px;background:#fbf9f6f2;backdrop-filter:blur(10px);box-shadow:0 6px 24px #51443814}
.js-anim header.is-compact .identity img{width:38px;height:38px}
.js-anim header.is-compact .identity>span{font-size:22px}
.js-anim header.is-compact .identity small{opacity:0;margin-top:0;height:0}

/* ---- franja de texto en movimiento (marquee) ---- */
.marquee{overflow:hidden;background:var(--ink);color:var(--paper);padding:15px 0;user-select:none}
.marquee-row{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee-row{animation-play-state:paused}
.marquee span{display:flex;align-items:center;gap:34px;padding-right:34px;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(1.1rem,2.1vw,1.6rem);white-space:nowrap}
.marquee span i{font-style:normal;opacity:.55;font-size:.7em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- hover más marcado en las colecciones ---- */
.collection-image{position:relative}
.collection-image img{transition:transform .9s cubic-bezier(.16,1,.3,1)}
.collection:hover img{transform:scale(1.13)}
.collection h3{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.collection:hover h3{transform:translateX(9px)}
.collection-image:after{content:"Ver →";position:absolute;left:50%;bottom:14px;transform:translate(-50%,16px);opacity:0;padding:8px 18px;border-radius:30px;background:#faf8f4e6;font:11px/1 Arial,Helvetica,sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:opacity .45s,transform .45s cubic-bezier(.16,1,.3,1)}
.collection:hover .collection-image:after{opacity:1;transform:translate(-50%,0)}

/* ---- tiles y banda de souvenirs con más vida ---- */
.tile>img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.tile:hover>img{transform:scale(1.06)}
.js-anim .tile:hover>img{transform:translate3d(0,var(--py,0),0) scale(1.2)}
.sb-chips li{transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s}
.sb-chips li:hover{transform:translateY(-3px);background:#ffffff8c}

/* ---- líneas del separador que se abren ---- */
.js-anim .divider .divider-line{transform:scaleX(0);transform-origin:center;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s}
.js-anim .divider.is-in .divider-line{transform:scaleX(1)}

/* ---- el hero entra en cascada al cargar ---- */
.js-anim .hero-copy>*{opacity:0;transform:translateY(26px);animation:hero-in .95s cubic-bezier(.16,1,.3,1) forwards}
.js-anim .hero-copy>*:nth-child(1){animation-delay:.15s}
.js-anim .hero-copy>*:nth-child(2){animation-delay:.28s}
.js-anim .hero-copy>*:nth-child(3){animation-delay:.41s}
.js-anim .hero-copy>*:nth-child(4){animation-delay:.54s}
.js-anim .hero-copy>*:nth-child(5){animation-delay:.67s}
.js-anim .hero-copy>*:nth-child(6){animation-delay:.8s}
@keyframes hero-in{to{opacity:1;transform:none}}
.js-anim .hero-photo img{animation:hero-zoom 1.8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes hero-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}

/* ---- botones con brillo al pasar ---- */
.button{position:relative;overflow:hidden}
.button:after{content:"";position:absolute;inset:0;transform:translateX(-110%) skewX(-18deg);background:linear-gradient(90deg,transparent,#ffffff59,transparent);transition:transform .8s cubic-bezier(.16,1,.3,1);pointer-events:none}
.button:hover:after{transform:translateX(110%) skewX(-18deg)}

@media(max-width:650px){
  .js-anim [data-anim="up"]{transform:translateY(28px)}
  .js-anim [data-anim="left"],.js-anim [data-anim="right"]{transform:translateY(28px)}
  .marquee-row{animation-duration:22s}
}


/* ═════════════════ FICHA: personalización de la vela ═════════════════ */
.pick{display:grid;gap:16px;margin:6px 0 4px}
.pick-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick-field{display:grid;gap:6px;margin:0}
.modal-copy .pick-field{margin:0}
.pick-field>span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b5d6c}
.pick-field>span small{text-transform:none;letter-spacing:0;color:var(--ink);font-size:13px;margin-left:6px}
.pick select{width:100%;padding:10px;border:1px solid var(--line);background:var(--paper);border-radius:2px;font-size:14px}
.pick-colors{display:grid;gap:10px}
.pick-cgroup p{font-size:11px;color:#8a7e76;margin-bottom:5px}
.pick-cgroup>div{display:flex;flex-wrap:wrap;gap:8px}
.pick-color{width:28px;height:28px;padding:0;border-radius:50%;border:1px solid #51443833;background:var(--c);box-shadow:inset 0 0 0 2px #fff;transition:transform .2s,box-shadow .2s}
.pick-color:hover{transform:scale(1.12)}
.pick-color.is-on{box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--ink)}
.pick-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:2px;background:var(--paper);width:max-content}
.pick-qty button{width:36px;height:40px;border:0;background:none;font-size:18px}
.pick-qty input{width:44px;height:40px;border:0;background:none;text-align:center;font-size:15px;-moz-appearance:textfield}
.pick-qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.pick-note{font-size:12px;color:#6b5d6c;margin:-8px 0 12px}
.modal-copy .button+.button{margin-top:10px}
@media(max-width:650px){.pick-row{grid-template-columns:1fr}}

/* ═════════════════ CARRITO (panel lateral) ═════════════════ */
.cart-count.is-empty{opacity:.55}
.cart-btn.is-bump{animation:cart-bump .5s cubic-bezier(.16,1,.3,1)}
@keyframes cart-bump{40%{transform:scale(1.25)}100%{transform:scale(1)}}
.cart-drawer{position:fixed;inset:0;z-index:90;pointer-events:none}
.cart-drawer.is-open{pointer-events:auto}
.cart-backdrop{position:absolute;inset:0;background:#302833;opacity:0;transition:opacity .4s}
.cart-drawer.is-open .cart-backdrop{opacity:.45}
.cart-panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);display:flex;flex-direction:column;background:var(--paper);box-shadow:-20px 0 50px #3028331f;transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cart-drawer.is-open .cart-panel{transform:none}
body.cart-open{overflow:hidden}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.cart-head h2{font-size:1.7rem;letter-spacing:-.02em}
.cart-close{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:none;font-size:24px;line-height:1}
.cart-body{flex:1;overflow-y:auto;padding:8px 24px}
.cart-empty{padding:60px 0;text-align:center;color:#6b5d6c;font-size:14px;line-height:1.7}
.cart-item{display:grid;grid-template-columns:70px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid #e6e0dc}
.cart-item img{width:70px;height:70px;object-fit:cover;border-radius:2px;background:#f0eeef}
.cart-item h3{font:600 14px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0}
.cart-item-opts{margin-top:4px;font-size:12px;color:#6b5d6c;line-height:1.5}
.cart-qty{display:flex;align-items:center;gap:6px;margin-top:10px}
.cart-qty button{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:none;font-size:15px;line-height:1}
.cart-qty span{min-width:18px;text-align:center;font-size:14px}
.cart-qty .cart-del{width:auto;height:auto;border:0;border-radius:0;margin-left:8px;padding:0 0 2px;border-bottom:1px solid currentColor;font-size:12px;color:#8a7e76}
.cart-item-price{font-size:14px;font-weight:600;white-space:nowrap}
.cart-foot{padding:18px 24px 24px;border-top:1px solid var(--line);background:#fff}
.cart-note{font-size:12px;color:#6b5d6c;margin-bottom:10px}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:14px}
.cart-total strong{font-size:20px}
.cart-foot .button{width:100%;justify-content:center;gap:12px}
.cart-foot .button.is-disabled{opacity:.4;pointer-events:none}
.cart-legal{margin-top:10px;font-size:11px;color:#8a7e76;text-align:center}
.menu svg{display:block}

/* ═════════════════ CORRECCIONES ═════════════════ */
/* listas decorativas sin la sangría por defecto de <ul> */
.hero-tags,.sb-chips{padding-left:0;margin-bottom:0}
/* Souvenirs: la foto va a la derecha para que el texto no quede sobre la vela */
@media(min-width:651px){
  .souvenirs-band{background:#f3eadb}
  .sb-photo{left:40%}
  .souvenirs-band::before{background:linear-gradient(90deg,#f3eadb 0%,#f3eadb 38%,rgba(243,234,219,.85) 46%,rgba(243,234,219,0) 62%)}
}
/* Celular: el menú desplegable ocupa todo el ancho y los íconos van pegados al botón de menú */
@media(max-width:650px){
  .site-header nav{justify-self:stretch;z-index:25;box-shadow:0 14px 24px #5144381a}
  .site-header nav a{padding:10px 0;font-size:15px;border-bottom:1px solid #51443812}
  .site-header nav a:last-child{border-bottom:0}
  .site-header{display:flex}
  .site-header .header-icons{margin-left:auto;margin-right:6px}
}
/* Las entradas "desde el costado" parten desplazadas: que nunca generen scroll
   horizontal. `clip` (no `hidden`) para no romper el header sticky. */
html,body{overflow-x:clip}
/* En la ficha ya está el selector de color: no mostrar además la fila de muestras */
#product-swatches,#detail-swatches{display:none!important}


/* ═════════════════════════════════════════════════════════════════
   TEMA MÍSTICO · según las observaciones de la clienta
   Paleta: lavanda desaturado, lila empolvado, beige, blanco cálido, gris suave.
   Tipografía: serif elegante (Cormorant Garamond) + sans minimalista (Manrope).
   Todo va al final para sobrescribir el tema anterior sin tocarlo.
   ═════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/CormorantGaramond-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/CormorantGaramond-500.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/CormorantGaramond-600.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/CormorantGaramond-400i.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/CormorantGaramond-500i.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Manrope-600.woff2") format("woff2")}

:root{
  --ink:#433b4b;        /* texto: gris ciruela profundo */
  --soft:#7a7083;       /* texto secundario: gris lavanda */
  --paper:#fbf9f7;      /* blanco cálido */
  --lilac:#ebe5f0;      /* lila empolvado */
  --mist:#f4f0f6;       /* lavanda muy clara, fondos de sección */
  --lav:#c9bcd8;        /* lavanda desaturado, acentos */
  --deep:#8c7c9f;
  --line:#e2dbe6;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",Arial,Helvetica,sans-serif;
}
body{font-family:var(--sans);color:var(--ink);background:var(--paper)}

/* serif elegante en todos los títulos */
h1,h2,h3,.hero-brand,.identity>span,.divider p,.marquee span,footer>p{font-family:var(--serif);font-weight:500}
h2{letter-spacing:-.01em}
.shop-head h2,.aroma-copy h2,.tile-text h2,.cat-title h1,.modal-copy h2,.cart-head h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.shop-head h2{font-size:clamp(2.1rem,3.6vw,3rem)}
.aroma-copy h2{font-size:clamp(2.2rem,3.4vw,3rem)}
.cat-title h1{font-size:clamp(2.4rem,4vw,3.4rem)}
.modal-copy h2{font-size:2.6rem}
.pcard-info h3,.pcard-info p,.pcard-info .pcard-cat,.collection h3,.aroma-group h3,.cart-item h3{font-family:var(--sans)}
.kicker,.hero-kicker,.eyebrow{font:500 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--soft)}

/* botones: píldora oscura y discreta, como la referencia */
.button{border-radius:999px;min-height:46px;padding:12px 26px;gap:18px;font:500 13px/1 var(--sans);letter-spacing:.04em}
.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.dark:hover{background:#5a5064}
.outline{border-color:var(--ink);color:var(--ink)}
.outline:hover{background:#433b4b0d}
.hero-cta-row .outline{background:#ffffff8c}

/* cabecera y barras */
.topline{background:var(--lilac);color:var(--soft);font-family:var(--sans)}
header{background:var(--paper)}
.js-anim header.is-compact{background:#fbf9f7ee}
nav a{font-family:var(--sans)}
.cart-count{background:var(--deep)}

/* ---------- hero: velo lavanda sobre la foto ---------- */
.hero-static{background:#ece6f0}
.hero-static::before{background:linear-gradient(90deg,rgba(241,236,245,.95) 0%,rgba(241,236,245,.8) 34%,rgba(241,236,245,.18) 58%,transparent 74%)}
.hero-brand{font-weight:400;letter-spacing:.01em}
.hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.1}
.hero-text,.hero-tags{color:var(--soft)}
@media(max-width:650px){.hero-static::before{background:linear-gradient(90deg,rgba(241,236,245,.96) 0%,rgba(241,236,245,.84) 46%,rgba(241,236,245,.3) 72%,transparent 90%)}}

/* ---------- cinta de sellos ---------- */
.seals{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 6%}
.seals ul{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:18px 36px;margin:0;padding:0;list-style:none}
.seal{display:flex;align-items:center;gap:12px;color:var(--ink)}
.seal svg{color:var(--deep);flex:none}
.seal span{font:500 clamp(1.05rem,1.6vw,1.3rem)/1.2 var(--serif);letter-spacing:.02em}
@media(max-width:650px){.seals ul{display:grid;grid-template-columns:1fr 1fr;gap:16px}.seal span{font-size:1rem}}

/* ---------- manifiesto ---------- */
.manifesto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(70px,9vw,120px) 8%;background:var(--mist)}
.manifesto-copy{max-width:470px}
.manifesto-copy h2{margin:16px 0 22px;font-size:clamp(2.3rem,4vw,3.6rem);line-height:1.05}
.manifesto-copy p:not(.kicker){margin-bottom:30px;font-size:15px;line-height:1.8;color:var(--soft)}
.manifesto-photo{margin:0;aspect-ratio:1/1.05;border-radius:24px;overflow:hidden;background:var(--lilac)}
.manifesto-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:800px){.manifesto{grid-template-columns:1fr}.manifesto-photo{order:-1;aspect-ratio:4/3}}

/* ---------- filosofía con marco en arco ---------- */
.philosophy{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(70px,9vw,120px) 8%;background:var(--paper)}
.arch{margin:0;aspect-ratio:4/5;border-radius:999px 999px 18px 18px;overflow:hidden;background:var(--lilac);box-shadow:0 30px 60px #433b4b1a}
.arch img{width:100%;height:100%;object-fit:cover}
.philosophy-copy h2{margin:16px 0 20px;font-size:clamp(2.3rem,4vw,3.6rem);line-height:1.05}
.philosophy-copy>p:not(.kicker){max-width:460px;margin-bottom:36px;font-size:15px;line-height:1.8;color:var(--soft)}
.mini-shop{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:520px}
.mini{display:grid;gap:10px;font:500 14px var(--sans);color:var(--ink)}
.mini-img{display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--mist)}
.mini-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.mini:hover .mini-img img{transform:scale(1.08)}
.mini>span:last-child{transition:transform .4s}
.mini:hover>span:last-child{transform:translateX(5px)}
@media(max-width:800px){.philosophy{grid-template-columns:1fr}.arch{max-width:360px;width:100%;margin:0 auto}}

/* ---------- catálogo destacado: fondo místico y esquinas suaves ---------- */
.shop,.duo,.aromas{background:var(--paper)}
#catalogo{background:var(--mist)}
.shop-head-center{display:grid;justify-items:center;text-align:center;gap:10px;margin-bottom:38px}
.shop-icon{color:var(--deep)}
.pcard-photo,.collection-image,.tile,.aroma-photo,.aroma-copy{border-radius:18px}
.pcard-photo{background:#f0ebf3}
.pcard-info h3{font-size:14px}
.pcard-info p{font-weight:600}
.bag{border-radius:999px;width:38px;height:32px;background:var(--ink)}
.rail-arrow{color:var(--deep)}
.collection-image{background:var(--mist)}
.aroma-copy{background:var(--lilac)}
.aroma-group p{color:var(--soft)}

/* separadores, franja móvil, souvenirs, pie */
.divider{background:var(--paper)}
.divider-alt{background:var(--lilac)}
.divider p{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.marquee{background:var(--ink)}
.souvenirs-band{background:var(--mist)}
@media(min-width:651px){
  .souvenirs-band{background:var(--mist)}
  .souvenirs-band::before{background:linear-gradient(90deg,#f4f0f6 0%,#f4f0f6 38%,rgba(244,240,246,.85) 46%,rgba(244,240,246,0) 62%)}
}
.sb-copy h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,3.4vw,3rem)}
.sb-chips li{border-color:var(--lav)}
footer{background:var(--lilac)}

/* catálogo (página) */
.catalog-page{background:var(--paper)}
.f-item[aria-pressed="true"]{background:var(--ink)}
.cat-filters input[type=search],.cat-sort select,.pick select{border-radius:10px}
.cat-filters input[type=range]{accent-color:var(--deep)}

/* ficha y carrito */
dialog{border-radius:20px;overflow:hidden}
.modal-grid>img{background:var(--mist)}
.cart-panel{background:var(--paper)}
.cart-item img{border-radius:10px}
.pick-color.is-on{box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--deep)}
.sb-copy .hero-kicker{font:500 11px/1.4 var(--sans);letter-spacing:.24em;color:var(--soft)}
.sb-copy p:not(.hero-kicker),.hero-text{color:var(--soft)}
.sb-copy .phone{color:var(--soft)}
.f-item{border-radius:10px}
.cat-filter-toggle,.cat-filters{border-radius:14px}

/* En táctil no hay "pasar el mouse": la vela se enciende sola cuando la tarjeta
   queda al centro de la pantalla (anim.js le pone .is-lit). Mismo efecto que el hover. */
.pcard-photo.is-lit .pcard-media img{transform:scale(1.06)}
.pcard-photo.is-lit .pcard-glow{opacity:1;animation:pcard-flicker 3.2s ease-in-out .55s infinite}
.pcard-photo.is-lit .has-lit .pcard-off{opacity:0}
.pcard-photo.is-lit .has-lit .pcard-on{opacity:1}


/* ═════════════════════════════════════════════════════════════════
   QUIZ · "Encuentra tu vela según tu intención"
   Una pregunta por pantalla, tarjetas visuales, resultado con la vela
   encendiéndose. Pensado primero para celular.
   ═════════════════════════════════════════════════════════════════ */
.quiz{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,10vw,130px) 5%;
  background:radial-gradient(ellipse 80% 60% at 15% 10%,#efe8f4 0%,transparent 60%),
             radial-gradient(ellipse 70% 60% at 90% 90%,#f3ece3 0%,transparent 60%),var(--mist)}
.quiz-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.7;pointer-events:none;animation:quiz-float 16s ease-in-out infinite alternate}
.quiz-orb--a{width:380px;height:380px;left:-120px;top:-80px;background:#dccfe9}
.quiz-orb--b{width:340px;height:340px;right:-110px;bottom:-90px;background:#efe0cf;animation-delay:-8s}
@keyframes quiz-float{to{transform:translate3d(60px,40px,0) scale(1.12)}}

.quiz-card{position:relative;max-width:1000px;margin:0 auto;padding:clamp(26px,5.5vw,68px);
  background:rgba(251,249,247,.74);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(201,188,216,.55);border-radius:34px;
  box-shadow:0 50px 90px -40px rgba(67,59,75,.28),inset 0 1px 0 #fff}

/* ---------- intro ---------- */
.quiz-intro{display:grid;justify-items:center;text-align:center;gap:14px;padding:clamp(4px,2vw,20px) 0}
.quiz-mark{color:var(--deep);margin-bottom:4px}
.quiz-intro h2{max-width:14ch;margin:4px 0 2px;font-size:clamp(2.3rem,6.2vw,4.4rem);line-height:1.02}
.quiz-intro h2 em{font-style:italic;color:var(--deep)}
.quiz-lead{max-width:44ch;font-size:15px;line-height:1.75;color:var(--soft)}
.quiz-start{margin-top:14px;min-width:220px;justify-content:center}
.quiz-hint{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

/* ---------- barra superior: volver · progreso · contador ---------- */
.q-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-bottom:clamp(26px,4vw,42px)}
.q-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 6px;border:0;border-radius:999px;background:none;color:var(--soft);font:500 12px var(--sans);letter-spacing:.06em;transition:background .3s,color .3s}
.q-back:hover{background:#433b4b0d;color:var(--ink)}
.q-back[hidden]{display:inline-flex!important;visibility:hidden}
.q-progress{position:relative;height:2px;border-radius:2px;background:var(--line);overflow:visible}
.q-bar{--p:0%;position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:2px;background:linear-gradient(90deg,var(--lav),var(--deep))}
.q-bar::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);background:var(--deep);box-shadow:0 0 0 5px #8c7c9f26,0 0 18px #8c7c9f80}
.q-count{min-width:52px;text-align:right;font:500 12px var(--sans);letter-spacing:.14em;color:var(--soft);white-space:nowrap}

/* ---------- pregunta ---------- */
.q-stage{position:relative}
.q-screen{text-align:center}
.q-step{font:500 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--deep)}
.q-title{margin:14px auto 10px;max-width:18ch;font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.06;outline:none}
.q-sub{max-width:42ch;margin:0 auto;font-size:14.5px;line-height:1.65;color:var(--soft)}
.q-options{display:grid;gap:12px;margin-top:clamp(24px,4vw,40px);text-align:left}

/* tarjeta base */
.q-card{position:relative;display:grid;align-content:start;gap:6px;width:100%;padding:18px;border:1px solid var(--line);border-radius:22px;
  background:rgba(255,255,255,.62);color:var(--ink);font:inherit;text-align:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s,opacity .45s,filter .45s}
.q-card:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.q-name{font:500 1.3rem/1.15 var(--serif)}
.q-text{font-size:13px;line-height:1.5;color:var(--soft)}
@media(hover:hover){
  .q-card:hover{transform:translateY(-5px);border-color:var(--lav);background:#fff;box-shadow:0 22px 40px -22px rgba(67,59,75,.35)}
  .q-card:hover .q-glyph{transform:scale(1.08) rotate(-6deg)}
  .q-card:hover .q-aura{transform:scale(1.12)}
  .q-card:hover .q-photo img{transform:scale(1.07)}
}
.q-card:active{transform:scale(.98)}
.q-card.is-chosen{border-color:var(--deep);background:#fff;box-shadow:0 0 0 1px var(--deep),0 26px 50px -24px rgba(140,124,159,.55)}
.q-card.is-dim{opacity:.42;filter:saturate(.7)}

/* check que se dibuja al elegir */
.q-check{position:absolute;top:12px;right:12px;width:26px;height:26px;padding:5px;border-radius:50%;background:var(--ink);opacity:0;transform:scale(.6);
  transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.q-check path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s .12s ease}
.q-card.is-chosen .q-check{opacity:1;transform:none}
.q-card.is-chosen .q-check path{stroke-dashoffset:0}

/* intención: ícono en círculo */
.q-options--intencion{grid-template-columns:repeat(2,1fr)}
.q-card--intent{justify-items:center;text-align:center;padding:22px 14px 20px;min-height:176px}
.q-glyph{display:grid;place-items:center;width:62px;height:62px;margin-bottom:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#ebe3f2);box-shadow:inset 0 0 0 1px #e2d8ea;color:var(--deep);
  transition:transform .6s cubic-bezier(.16,1,.3,1),background .4s}
.q-glyph svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.q-card--intent.is-chosen .q-glyph{background:radial-gradient(circle at 35% 30%,#fff,#dccfe9)}

/* familia: aura de color */
.q-options--familia{grid-template-columns:1fr}
.q-card--fam{grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:16px 46px 16px 16px}
.q-aura{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,var(--a1) 40%,var(--a2) 100%);
  box-shadow:0 10px 24px -8px var(--a2);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.q-body{display:grid;gap:3px}
.q-card--fam .q-name{font-size:1.25rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.q-badge{padding:3px 8px;border-radius:999px;background:var(--ink);color:#fff;font:600 9px/1 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.q-notes{margin-top:2px;font:italic 400 .98rem/1.3 var(--serif);color:var(--deep)}

/* formato: foto real */
.q-options--formato{grid-template-columns:repeat(2,1fr)}
.q-card--fmt{padding:10px 10px 16px;gap:4px}
.q-photo{display:block;aspect-ratio:1/1;margin-bottom:8px;border-radius:16px;overflow:hidden;background:var(--mist)}
.q-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.q-card--fmt .q-name,.q-card--fmt .q-text{padding:0 6px}
.q-any{position:relative;display:block;width:100%;height:100%;background:radial-gradient(circle at 50% 45%,#fff,#ebe3f2 70%)}
.q-any i{position:absolute;top:50%;left:50%;width:44%;aspect-ratio:1;border-radius:50%;mix-blend-mode:multiply;opacity:.75}
.q-any i:nth-child(1){background:#dccfe9;transform:translate(-78%,-62%)}
.q-any i:nth-child(2){background:#f1d9c6;transform:translate(-22%,-62%)}
.q-any i:nth-child(3){background:#cfe3d6;transform:translate(-50%,-18%)}

/* ---------- resultado ---------- */
.q-result{text-align:left}
.r-grid{display:grid;gap:clamp(18px,4vw,56px);align-items:center}
.r-visual{position:relative;display:grid;place-items:center;padding:18px 0 8px}
.r-orb{position:absolute;inset:-6% 4%;z-index:0;border-radius:50%;background:radial-gradient(circle,#dccfe9 0%,#ece3f3 40%,transparent 70%);filter:blur(12px);animation:r-breathe 6s ease-in-out infinite}
@keyframes r-breathe{50%{transform:scale(1.06);opacity:.85}}
.r-frame{position:relative;z-index:1;width:min(300px,74%);aspect-ratio:4/5;margin:0;overflow:hidden;border-radius:999px 999px 26px 26px;background:var(--mist);
  box-shadow:0 40px 70px -30px rgba(67,59,75,.45),0 0 0 8px rgba(255,255,255,.6)}
.r-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-on{opacity:0;transition:opacity 1.6s ease}
.r-glow{position:absolute;inset:0;opacity:0;mix-blend-mode:soft-light;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 36%,rgba(255,214,140,.95),rgba(255,186,94,.4) 45%,transparent 72%);transition:opacity 1.6s ease}
.r-visual.is-lit .r-on{opacity:1}
.r-visual.is-lit .r-glow{opacity:1;animation:pcard-flicker 3.4s ease-in-out 1.6s infinite}
.r-visual.is-lit .r-frame{box-shadow:0 40px 80px -28px rgba(214,160,90,.5),0 0 0 8px rgba(255,255,255,.6)}

/* chispas que suben cuando la vela se enciende */
.r-sparks{position:absolute;inset:0;z-index:2;pointer-events:none}
.r-sparks i{position:absolute;bottom:34%;width:5px;height:5px;border-radius:50%;background:#f6d8a6;box-shadow:0 0 10px #f3c27a;opacity:0}
.r-sparks i:nth-child(1){left:44%}.r-sparks i:nth-child(2){left:52%}.r-sparks i:nth-child(3){left:48%}.r-sparks i:nth-child(4){left:56%}.r-sparks i:nth-child(5){left:40%}
.r-visual.is-lit .r-sparks i{animation:r-spark 3.2s ease-out infinite}
.r-visual.is-lit .r-sparks i:nth-child(2){animation-delay:.6s}.r-visual.is-lit .r-sparks i:nth-child(3){animation-delay:1.2s}
.r-visual.is-lit .r-sparks i:nth-child(4){animation-delay:1.8s}.r-visual.is-lit .r-sparks i:nth-child(5){animation-delay:2.4s}
@keyframes r-spark{0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}15%{opacity:.9}100%{opacity:0;transform:translate3d(-14px,-160px,0) scale(1)}}

.r-copy{display:grid;justify-items:start;gap:12px}
.r-name{font-size:clamp(2.4rem,6vw,3.8rem);line-height:1;outline:none}
.r-meta{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--deep)}
.r-meta i{width:4px;height:4px;border-radius:50%;background:var(--lav)}
.r-text{max-width:44ch;font-size:15px;line-height:1.75;color:var(--soft)}
.r-text strong{color:var(--ink);font-weight:500}
.r-aromas{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.r-chip{min-height:40px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);color:var(--ink);font:500 13px var(--sans);cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.r-chip:hover{border-color:var(--lav)}
.r-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.r-price{font-size:14px;color:var(--soft)}
.r-price strong{font:500 1.6rem var(--serif);color:var(--ink);margin-left:4px}
.r-price small{display:block;font-size:12px}
.r-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.r-link{padding:0 0 2px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--soft);font:500 13px var(--sans);cursor:pointer}
.r-link:hover{color:var(--ink)}
.r-note{font-size:12px;line-height:1.55;color:var(--soft);max-width:44ch}

/* ---------- tablet y escritorio ---------- */
@media(min-width:640px){
  .q-options--familia{grid-template-columns:repeat(2,1fr)}
  .q-card--intent{min-height:196px}
}
@media(min-width:900px){
  .q-options--intencion{grid-template-columns:repeat(4,1fr)}
  .q-options--familia{grid-template-columns:repeat(3,1fr)}
  .q-options--formato{grid-template-columns:repeat(4,1fr)}
  .q-card--fam{grid-template-columns:1fr;justify-items:start;padding:22px 20px}
  .q-card--fam .q-aura{width:60px;height:60px;margin-bottom:6px}
  .r-grid{grid-template-columns:.9fr 1.1fr}
  .r-frame{width:min(340px,86%)}
}

/* ---------- celular: tarjetas cómodas de tocar y todo a una mano ---------- */
@media(max-width:639px){
  .quiz{padding:48px 14px}
  .quiz-card{padding:26px 18px 24px;border-radius:28px}
  .quiz-start{width:100%}
  .q-top{gap:10px;margin-bottom:24px}
  .q-back span{display:none}
  .q-back{padding:0 8px}
  .q-card--intent{min-height:164px;padding:20px 12px 18px}
  .q-glyph{width:54px;height:54px}
  .q-glyph svg{width:30px;height:30px}
  .q-name{font-size:1.2rem}
  .q-text{font-size:12.5px}
  .r-grid{text-align:center}
  .r-copy{justify-items:center}
  .r-meta,.r-aromas,.r-actions{justify-content:center}
  .r-actions{width:100%}
  .r-actions .button{flex:1 1 100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .quiz-orb,.r-orb,.r-visual.is-lit .r-sparks i,.r-visual.is-lit .r-glow{animation:none}
}
/* mientras GSAP anima las tarjetas, sin transiciones CSS de opacidad/transform (se pisaban) */
.q-stage.is-anim .q-card{transition-property:background,border-color,box-shadow,filter}
.q-stage.is-bounce .q-card{transition-property:background,border-color,box-shadow,filter,opacity}
/* títulos del quiz sin palabras sueltas en la última línea */
.q-title,.quiz-intro h2,.r-name,.q-sub,.quiz-lead{text-wrap:balance}
.q-title{max-width:20ch}
/* en el resultado la barra ya está completa: sin punto final y con aire antes del texto */
.quiz.is-result .q-bar::after{opacity:0}
.q-count{padding-left:6px}

/* pie de página: iconos de WhatsApp e Instagram, en vez del link de texto */
.footer-social{display:flex;align-items:center;gap:10px}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid currentColor;color:var(--ink);opacity:.75;transition:opacity .2s,transform .2s,background .2s}
.footer-social a:hover{opacity:1;transform:translateY(-2px);background:#ffffff55}

/* ── Ficha: foto grande + miniaturas (fotos reales) y tarjetas sin foto aún ── */
.modal-media{display:flex;flex-direction:column;min-height:0;background:var(--mist)}
.modal-media>img{width:100%;flex:1;min-height:0;height:100%;object-fit:cover;display:block}
.modal-thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto;scrollbar-width:thin}
.modal-thumbs[hidden]{display:none}
.modal-thumbs button{flex:0 0 56px;height:56px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:none;opacity:.7;transition:opacity .2s,border-color .2s}
.modal-thumbs button[aria-current="true"]{border-color:var(--ink);opacity:1}
.modal-thumbs button:hover{opacity:1}
.modal-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.modal-media>img{height:300px;flex:none;object-fit:contain}}
.pcard-soon{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--mist);height:100%}
.pcard-soon img{width:72px!important;height:72px!important;border-radius:50%;object-fit:cover;position:static!important}
.pcard-soon small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
@media (min-width:761px){.modal-media{align-self:start;position:sticky;top:0;height:100%;max-height:min(88vh,760px)}}

/* Buscador del catalogo: barra grande + chips */
.cat-search{display:flex;align-items:center;gap:10px;padding:0 16px;margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:999px;transition:box-shadow .2s,border-color .2s}
.cat-search:focus-within{border-color:var(--deep);box-shadow:0 0 0 4px #7a6b9a22}
.cat-search svg{flex:none;opacity:.55}
.cat-search input{flex:1;min-width:0;padding:15px 0;border:0;outline:0;background:none;font:inherit;font-size:15px}
.cat-search input::-webkit-search-cancel-button{display:none}
.cat-search button{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:var(--mist);font-size:18px;line-height:1;cursor:pointer}
.chips{display:flex;gap:8px;align-items:center;margin-bottom:18px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips--center{justify-content:center;flex-wrap:wrap;overflow:visible;margin:0}
.chip{flex:none;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;font:500 13px var(--sans);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.chip:hover{transform:translateY(-1px);background:var(--mist)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip--q::before{content:"#";opacity:.45;margin-right:2px}
.chip-sep{flex:none;width:1px;height:20px;background:var(--line);margin:0 4px}
.cat-filters .f-block:has(#groups){display:none}

.cat-main{min-width:0}
@media (max-width:900px){.cat-filter-toggle,.cat-filters{display:none!important}}

/* ═══ Catálogo v2: cabecera con luz de vela, velas-categoría y ocasiones ═══ */
.cat-hidden,.cat-filters,.cat-filter-toggle{display:none!important}
.cat-hero{position:relative;overflow:hidden;text-align:center;padding:26px 6% 34px;background:radial-gradient(120% 90% at 50% 0%,#fff7ea 0%,#f6eff6 42%,var(--mist) 100%);border-bottom:1px solid var(--line)}
.cat-hero .crumbs{justify-content:center;position:relative}
.cat-glow{position:absolute;left:50%;top:40px;width:520px;height:520px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#ffd99a55 0%,#ffd99a22 35%,transparent 68%);pointer-events:none;animation:catGlow 4.5s ease-in-out infinite}
@keyframes catGlow{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
.cat-flame{position:relative;display:block;margin:18px auto 6px}
.cat-flame .cf-flame{transform-origin:20px 38px;animation:flick 2.6s ease-in-out infinite;filter:drop-shadow(0 0 8px #f7c87399)}
@keyframes flick{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.04,.97) rotate(-2deg)}50%{transform:scale(.97,1.05) rotate(1.5deg)}75%{transform:scale(1.02,.98) rotate(-1deg)}}
.cat-kicker{position:relative;font:500 11px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--deep)}
.cat-h1{position:relative;margin:8px 0 6px;font:400 clamp(40px,6vw,68px)/1 var(--serif);letter-spacing:-.01em}
.cat-sub{position:relative;max-width:440px;margin:0 auto 24px;color:var(--soft);font-size:15px;line-height:1.6}
.cat-hero .cat-search{position:relative;max-width:560px;margin:0 auto 26px;background:#ffffffd9;backdrop-filter:blur(6px);box-shadow:0 10px 30px -18px #433b4b55}

/* velas-categoría: la mecha se enciende al elegir */
.candles{position:relative;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.candle{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:96px;padding:10px 12px 12px;border:1px solid transparent;border-radius:18px;background:none;cursor:pointer;font:500 13px var(--sans);color:var(--ink);transition:background .3s,border-color .3s,transform .3s}
.candle:hover{background:#ffffff99;transform:translateY(-2px)}
.candle small{font-size:11px;color:var(--soft)}
.candle .c-body{fill:#fff;stroke:var(--lav);stroke-width:1.2;transition:fill .3s}
.candle .c-wick{stroke:var(--ink);stroke-width:1.4;stroke-linecap:round}
.candle .c-flame{fill:#f7c873;transform-origin:12px 20px;transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.candle:hover .c-flame{transform:scale(.55);opacity:.5}
.candle[aria-pressed="true"]{background:#fff;border-color:var(--line);box-shadow:0 12px 26px -16px #e79a5288}
.candle[aria-pressed="true"] .c-body{fill:var(--lilac)}
.candle[aria-pressed="true"] .c-flame{transform:scale(1);opacity:1;filter:drop-shadow(0 0 6px #f7c873);animation:flick 2.2s ease-in-out .45s infinite}

/* ocasiones: texto limpio, sin símbolos */
.occasions{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.occ-label{font:italic 400 19px var(--serif);color:var(--deep)}
.occ-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.occ{padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:#ffffffb3;font:500 13px var(--sans);color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.occ:hover{border-color:var(--lav);background:#fff}
.occ[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* barra bajo la cabecera */
.cat-layout{grid-template-columns:1fr!important;padding-top:26px}
.cat-toolbar{justify-content:space-between;flex-wrap:wrap;gap:14px}
.cat-count{font:italic 400 20px var(--serif);color:var(--soft)}
.cat-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cat-price{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
.cat-price input{width:130px;accent-color:var(--deep)}
.cat-sort span{color:var(--soft)}
.cat-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:650px){
  .cat-hero{padding:18px 16px 26px}
  .cat-flame{margin-top:12px}
  .cat-sub{font-size:14px;margin-bottom:18px}
  .candles{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px 18px;padding:0 16px 4px;scrollbar-width:none}
  .candles::-webkit-scrollbar{display:none}
  .candle{flex:none;min-width:84px}
  .occasions{flex-direction:column;gap:8px}
  .occ-list{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .occ-list::-webkit-scrollbar{display:none}
  .occ{flex:none}
  .cat-toolbar{flex-direction:column;align-items:stretch}
  .cat-tools{justify-content:space-between}
  .cat-price input{width:100px}
}
@media (prefers-reduced-motion:reduce){.cat-glow,.cat-flame .cf-flame,.candle[aria-pressed="true"] .c-flame{animation:none}}


/* ═══ Páginas Terapias y Empresas (boceto) ═══ */
.extra-page{background:var(--paper)}
.draft-note{padding:8px 16px;text-align:center;font:500 12px var(--sans);letter-spacing:.06em;background:#fff4d6;color:#7a5a1e;border-bottom:1px solid #f0dca8}
.tbd{background:linear-gradient(transparent 62%,#ffe6a8aa 62%);border-radius:2px}
.xp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:64px 6% 72px;position:relative;overflow:hidden}
.xp-hero--light{background:radial-gradient(110% 90% at 20% 0%,#fff7ea 0%,#f6eff6 45%,var(--mist) 100%)}
.xp-hero--night{background:radial-gradient(90% 90% at 30% 20%,#4b3f63 0%,#2b2438 55%,#1d1827 100%);color:#f5f0fa}
.xp-hero--night .cat-kicker{color:#cbbde0}
.xp-hero--night .xp-lead{color:#ded4ea}
.xp-hero--night .tbd{background:linear-gradient(transparent 62%,#ffe6a855 62%)}
.xp-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 70%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 48%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 82% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 76%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 6% 88%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 54% 90%,#fff 50%,transparent 51%);opacity:.6;animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:.75}}
.xp-hero-copy{position:relative;max-width:540px}
.xp-h1{margin:10px 0 18px;font:400 clamp(40px,5.4vw,72px)/1.02 var(--serif)}
.xp-h1 em,.xp-h2 em{font-style:italic;color:var(--deep)}
.xp-hero--night .xp-h1 em{color:#d8c8ee}
.xp-lead{font-size:16px;line-height:1.7;color:var(--soft);margin-bottom:28px}
.xp-actions{display:flex;gap:12px;flex-wrap:wrap}
.button.light{background:#f5f0fa;color:#2b2438}
.xp-hero-photo{position:relative;margin:0;justify-self:center;width:min(100%,420px)}
.xp-hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:220px 220px 24px 24px;box-shadow:0 30px 60px -30px #2b243899}
.xp-section{padding:84px 6%;text-align:center}
.xp-h2{margin:10px 0 14px;font:400 clamp(32px,4vw,50px)/1.1 var(--serif)}
.xp-section .xp-lead{margin-bottom:40px}

/* cartas de tarot */
.tcards{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;perspective:1200px}
.tcard{width:230px;height:360px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit}
.tcard-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.tcard:hover .tcard-in{transform:translateY(-6px) rotateZ(-1.5deg)}
.tcard[aria-pressed="true"] .tcard-in{transform:rotateY(180deg)}
.tcard-back,.tcard-front{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tcard-back{background:radial-gradient(circle at 50% 40%,#5a4b78 0%,#2b2438 75%);border:1px solid #c9bcd8;box-shadow:inset 0 0 0 8px #2b2438,inset 0 0 0 9px #c9bcd866,0 20px 40px -24px #2b2438}
.tcard-back img{width:64px;height:64px;border-radius:50%}
.tcard-back i{font:italic 400 22px var(--serif);color:#d8c8ee;letter-spacing:.2em}
.tcard-front{transform:rotateY(180deg);padding:26px 22px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 40px -24px #433b4b88;text-align:center}
.tcard-front small{font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--deep)}
.tcard-front strong{font:400 34px var(--serif)}
.tcard-front span{font-size:14px;line-height:1.6;color:var(--soft)}
.tcard-front em{font-style:normal;font-size:12px;color:var(--ink)}

/* dos columnas foto + pasos */
.xp-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:40px 6% 90px}
.xp-split figure{margin:0}
.xp-split img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px}
.xp-steps{list-style:none;padding:0;margin:26px 0 0;counter-reset:s;display:grid;gap:22px}
.xp-steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;column-gap:14px}
.xp-steps li::before{content:counter(s);grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lilac);font:400 22px var(--serif)}
.xp-steps strong{font:400 22px var(--serif)}
.xp-steps span{color:var(--soft);font-size:14px;line-height:1.6}

/* empresas */
.biz{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1040px;margin:0 auto}
.biz article{padding:28px 24px;border:1px solid var(--line);border-radius:20px;background:#fff;text-align:left;transition:transform .3s,box-shadow .3s}
.biz article:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px #433b4b77}
.biz svg{width:36px;height:36px;fill:none;stroke:var(--deep);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.biz h3{font:400 24px var(--serif);margin-bottom:6px}
.biz p{font-size:14px;color:var(--soft);line-height:1.6}
.xp-band img{display:block;width:100%;height:clamp(240px,40vw,520px);object-fit:cover}
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1080px;margin:0 auto;text-align:left}
.perks div{padding-top:18px;border-top:1px solid var(--lav)}
.perks strong{display:block;font:400 22px var(--serif);margin-bottom:6px}
.perks span{font-size:14px;color:var(--soft);line-height:1.6}
.xp-cta{padding:84px 6%;text-align:center;background:var(--mist)}
.xp-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:680px;margin:0 auto;text-align:left}
.xp-form label{display:grid;gap:6px;font-size:13px;font-weight:600}
.xp-form input,.xp-form select{padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:400 15px var(--sans);color:var(--ink)}
.xp-form input:focus,.xp-form select:focus{outline:2px solid var(--lav);outline-offset:1px}
.xp-form button{grid-column:1/-1;justify-self:center;margin-top:8px}

@media(max-width:900px){
  .xp-hero{grid-template-columns:1fr;gap:32px;padding:40px 16px 48px;text-align:center}
  .xp-hero-copy{margin:0 auto}
  .xp-actions{justify-content:center}
  .xp-hero-photo{width:min(78%,340px)}
  .xp-section,.xp-cta{padding:60px 16px}
  .xp-split{grid-template-columns:1fr;gap:30px;padding:10px 16px 60px}
  .biz{grid-template-columns:1fr 1fr}
  .perks{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .biz,.perks,.xp-form{grid-template-columns:1fr}
  .tcards{gap:16px}
  .tcard{width:min(100%,280px);height:340px}
}
@media (prefers-reduced-motion:reduce){.xp-stars{animation:none}.tcard-in{transition:none}}

@media (min-width:901px){.site-header{grid-template-columns:auto 1fr auto!important;column-gap:28px}.site-header nav{justify-content:center;flex-wrap:nowrap}}@media (min-width:901px) and (max-width:1280px){.site-header nav{gap:clamp(12px,1.8vw,30px)!important}.site-header nav a{font-size:13px}}
.xp-hero-photo img,.xp-split img{height:auto}
.tbd,.xp-hero--night .tbd{background:none!important;text-decoration:underline dotted #e0b45a;text-decoration-thickness:2px;text-underline-offset:5px}

.xp-band{overflow:hidden}.xp-split figure{overflow:hidden;border-radius:24px}

/* ═══ Página de una vela (vela-*.html) y enlaces a ella ═══ */
.pcard-info h3 a{color:inherit}
.pcard-info h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.pcard-static{display:block;color:inherit}
.pcard-static img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px}
.pp-more{display:block;margin:14px 0 4px;font-size:13px;text-align:center;text-decoration:underline;text-underline-offset:4px;color:var(--soft)}
.product-page{background:var(--paper)}
.pp-crumbs{padding:22px 6% 0}
.pp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:22px 6% 70px}
.pp-media{position:sticky;top:110px;border-radius:24px;overflow:hidden;height:auto;max-height:none;align-self:start}
.pp-media>img{height:auto;aspect-ratio:1;flex:none}
.pp-copy{padding:10px 0 0}
.pp-copy h1{font:500 clamp(36px,4.6vw,58px)/1.05 var(--serif);letter-spacing:-.01em;margin:6px 0 10px}
.pp-copy>p{line-height:1.7}
.pp-info{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:56px 6%;background:var(--mist);border-block:1px solid var(--line)}
.pp-info h2,.pp-related h2{font:400 28px/1.15 var(--serif);margin-bottom:14px}
.pp-info p{font-size:14px;color:var(--soft);margin-bottom:10px}
.pp-info ul{list-style:none;padding:0;display:grid;gap:9px;font-size:14px;line-height:1.6;color:var(--soft)}
.pp-info strong{color:var(--ink);font-weight:600}
.pp-related{padding:64px 6% 84px;text-align:center}
.pp-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:10px 0 32px;text-align:left}
.pp-rel-grid a{display:grid;gap:4px;color:inherit}
.pp-rel-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px;margin-bottom:8px;transition:transform .4s}
.pp-rel-grid a:hover img{transform:scale(1.03)}
.pp-rel-grid strong{font:500 20px var(--serif)}
.pp-rel-grid span{font-size:14px;color:var(--soft)}
.nf{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;padding:40px 6%}
.nf img{border-radius:50%;margin-bottom:14px}
.nf .xp-actions{justify-content:center}
@media(max-width:900px){
  .pp{grid-template-columns:1fr;gap:18px;padding:16px 16px 48px}
  .pp-crumbs{padding:16px 16px 0}
  .pp-media{position:static}
  .pp-info{grid-template-columns:1fr;gap:30px;padding:44px 16px}
  .pp-related{padding:48px 16px 64px}
  .pp-rel-grid{grid-template-columns:1fr 1fr}
}

/* ═══ Preguntas frecuentes ═══ */
.faq{padding:90px 6%;text-align:center;background:var(--mist);border-top:1px solid var(--line)}
.faq h2{margin:10px 0 34px;font:400 clamp(32px,4vw,50px)/1.1 var(--serif)}
.faq h2 em{font-style:italic;color:var(--deep)}
.faq-list{max-width:760px;margin:0 auto 34px;text-align:left}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;cursor:pointer;list-style:none;font:500 clamp(19px,2.2vw,23px)/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);font:400 18px var(--sans);transition:transform .3s,background .3s,color .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.faq details p{padding:0 44px 22px 4px;color:var(--soft);font-size:15px;line-height:1.7}
@media(max-width:650px){.faq{padding:60px 16px}.faq details p{padding-right:8px}}

/* ═══ Terapias y Empresas: versión final ═══ */
.tcards-cta{margin-top:40px}
.tcard-front em{color:var(--deep)}
.xp-pair{padding:84px 6%;text-align:center;background:radial-gradient(90% 120% at 50% 0%,#fff7ea 0%,var(--paper) 70%)}
.xp-pair>div{max-width:620px;margin:0 auto}
.xp-pair .xp-actions{justify-content:center}
.xp-split--how{padding-top:84px}
.xp-split--how img{aspect-ratio:4/3}
.xp-ideas{background:var(--paper);padding-top:20px}
.xp-ideas h2 em{font-style:italic;color:var(--deep)}
.extra-page .faq{background:var(--paper)}
.xp-split--how img{object-fit:cover}
.xp-split--how img{object-fit:cover}

/* ═══ MOTION: movimiento sobrio (wow.js) ═══ */
/* entradas: suben unos píxeles mientras aparecen, una sola vez */
.wow [data-wow="rise"]{opacity:0;transform:translateY(18px)}
.wow [data-wow="rise"].wow-in{animation:rise .7s cubic-bezier(.2,.7,.2,1) var(--wd,0s) forwards}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* las entradas antiguas, más cortas y sin giros */
.js-anim [data-anim="up"]{transform:translateY(20px)}
.js-anim [data-anim="zoom"]{transform:scale(.97)}
.js-anim [data-anim="left"]{transform:translateX(-22px)}
.js-anim [data-anim="right"]{transform:translateX(22px)}
.js-anim [data-anim="tilt"]{transform:translateY(20px)}
.js-anim [data-anim="clip"]{transform:scale(1.03)}
.js-anim [data-anim].is-in{transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),clip-path 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
@media(max-width:900px){.js-anim [data-anim="left"],.js-anim [data-anim="right"]{transform:translateY(18px)}.js-anim [data-anim].is-in{transform:none}}
.js-anim [data-parallax] img{transform:translate3d(0,var(--py,0),0) scale(1.16)}

/* manifiesto: el texto se enciende con el scroll */
.lit-text .lit-w{opacity:.28;transition:opacity .5s ease}
.lit-text .lit-w.on{opacity:1}

/* scroll suave (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* transición entre páginas: fundido corto */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:ease}

/* detalles al pasar el mouse */
@media (hover:hover){
  .button span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .button:hover span{transform:translateX(4px)}
  .pp-rel-grid a strong,.pcard-info h3 a{transition:color .25s}
  .pp-rel-grid a:hover strong{color:var(--deep)}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ═══ Mejoras para celular ═══ */
.nav-extra{display:none}
.buybar{display:none}
/* pie de página: enlaces y datos (en todas las pantallas) */
.footer-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:22px;margin-top:6px;border-top:1px solid #433b4b22;font-size:14px}
.footer-nav a{padding:4px 0;color:var(--ink);opacity:.8}
.footer-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.footer-meta{grid-column:1/-1;font:400 13px/1.5 var(--sans)!important;color:var(--soft);letter-spacing:.02em}

@media(max-width:900px){
  /* menú desplegable: enlaces grandes y contacto al final */
  header nav.open a:not(.button):not(.nav-ig){font:400 26px/1.2 var(--serif);padding:16px 0}
  header nav.open .nav-extra{display:grid;gap:14px;padding:24px 0 8px}
  .nav-extra .button{justify-content:center;gap:10px;width:100%}
  .nav-extra .nav-ig{font:500 14px var(--sans);text-align:center;color:var(--soft);padding:6px 0;border:0}

  /* pie de página centrado, en una columna */
  footer{grid-template-columns:1fr!important;justify-items:center;text-align:center;gap:18px!important;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .footer-nav{justify-content:center;gap:4px 18px}
  .footer-nav a{padding:9px 2px}
  footer .back-top{padding:10px}
}

@media(max-width:650px){
  /* carrusel de la portada: se asoma la siguiente vela y encaja al deslizar */
  .rail{scroll-snap-type:x mandatory;scroll-padding-left:16px;gap:14px}
  .rail .pcard{flex:0 0 62%;scroll-snap-align:start}
  .rail .pcard-info h3{min-height:0}

  /* catálogo: llegar antes a las velas */
  .cat-hero{padding:14px 16px 18px}
  .cat-flame,.cat-sub{display:none}
  .cat-h1{font-size:40px;margin:6px 0 16px}
  .cat-hero .cat-search{margin-bottom:16px}
  .cat-search input{padding:13px 0;font-size:16px}
  .candles{margin-bottom:14px}
  .candle{min-width:76px;padding:8px 8px 10px}
  .occ-label{font-size:17px}
  .cat-layout{padding:14px 16px 60px!important}
  .cat-toolbar{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;margin-bottom:16px;padding-bottom:12px}
  .cat-tools{display:contents}
  .cat-count{font-size:18px}
  .cat-price{display:none}
  .cat-sort{width:auto!important;font-size:13px}
  .cat-sort span{display:none}
  .cat-sort select{padding:10px 12px;font-size:14px}
  .cat-toolbar .f-clear{grid-column:1/-1;justify-self:start;padding:8px 0;display:none}
  .cat-grid{gap:22px 12px!important}
  .cat-grid .pcard-info h3{font-size:15px}
  .cat-grid .pcard-price{font-size:14px!important}

  /* aromas: foto más baja */
  .aroma-photo{aspect-ratio:4/3!important;max-height:300px}
  .aroma-photo img{width:100%;height:100%;object-fit:cover}

  /* souvenirs: velo para que el texto se lea sobre la foto */
  .souvenirs-band{position:relative}
  .souvenirs-band .sb-copy{position:relative;z-index:1}
  .souvenirs-band .sb-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fbf9f7f2 0%,#fbf9f7e0 55%,#fbf9f799 100%)}

  /* preguntas frecuentes: filas más compactas */
  .faq summary{padding:16px 2px;font-size:19px}
  .faq h2{margin-bottom:22px}

  /* textos y botones cómodos para el dedo */
  .button{min-height:48px}
  .modal-thumbs button{flex-basis:60px;height:60px}

  /* página de una vela: barra de compra fija */
  .has-buybar{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .buybar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fbf9f7f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px #433b4b66;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .buybar.is-off{transform:translateY(110%)}
  .buybar-info{display:grid;min-width:0}
  .buybar-info strong{font:500 18px/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buybar-info span{font-size:13px;color:var(--soft)}
  .buybar .button{flex:none;width:auto;padding-inline:22px;min-height:46px}
  .pp-copy h1{font-size:34px}
}
@media(max-width:650px){.pick select,.xp-form input,.xp-form select,.cat-sort select,.modal-copy select{font-size:16px}}