/* ===================================================================
   Deco Origen — "Santuario nocturno": tema oscuro-editorial completo.
   Carga DESPUÉS de styles.css + v2.css. Reescribe tokens y componentes
   clave para un look de galería de noche, cinematográfico, con latón.
   =================================================================== */
:root{
  --serif:'Cormorant',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  /* Paleta nocturna */
  --bg:#0c0e0b; --surface:#15140f; --surface-2:#1b1a14;
  --ink:#ece4d6; --muted:#9a8f7a; --brand:#f4ede0;
  --accent:#c9a25e; --accent-soft:#e6c98a; --accent-bg:#181711;
  --line:rgba(230,220,200,.12); --line-2:rgba(230,220,200,.20);
  --forest:#3a5a47; --clay:#b5613f;
  --ease:cubic-bezier(.22,.61,.36,1);
}
body{background:var(--bg);color:var(--ink);font-weight:300}
h1,h2,h3{font-weight:400;color:var(--brand);letter-spacing:.005em}
::selection{background:var(--accent-soft);color:#1a1206}
.muted{color:var(--muted)}
/* Grano cinematográfico global */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Botones ---- */
.btn{border-radius:2px;text-transform:uppercase;letter-spacing:.12em;font-weight:400;font-size:.8rem}
.btn-primary{background:var(--accent);color:#15100a}
.btn-primary:hover{background:var(--accent-soft);color:#15100a}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:var(--accent);border-color:var(--accent);color:#15100a}

/* ---- Header / announce / nav / search (oscuro) ---- */
.announce{background:#15140f;color:var(--accent-soft);border-bottom:1px solid var(--line)}
.site-header{background:rgba(12,14,11,.72);border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(12,14,11,.95);border-color:var(--line);box-shadow:0 8px 30px -18px #000}
.main-nav a,.icon-btn{color:var(--ink)}
.main-nav a::after{background:var(--accent)}
.main-nav a:hover,.icon-btn:hover{color:var(--accent-soft)}
.icon-btn:hover{background:var(--surface-2)}
.dd-inner,.search-bar{background:var(--surface);border-color:var(--line)}
.search-bar input{color:var(--ink)}
.cart-badge{background:var(--accent);color:#15100a}

/* ---- Cards de producto (galería oscura) ---- */
.card,.cat-tile,.path{background:var(--surface);border-color:var(--line);color:var(--ink)}
.card:hover,.cat-tile:hover,.path:hover{border-color:var(--accent);box-shadow:0 30px 60px -28px #000}
.card-title,.cat-name,.path strong{color:var(--brand)}
/* OJO: NO oscurecer .card-media -> sus imágenes usan mix-blend-mode:multiply y sobre
   fondo oscuro el producto se ennegrece. Se deja el fondo "estudio fotográfico" claro de v2. */
.product-price,.price-now{color:var(--accent-soft)}
.product-price-was,.price-was{color:var(--muted)}

/* ---- Formularios oscuros ---- */
input,select,textarea{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
input::placeholder,textarea::placeholder{color:var(--muted)}

/* ---- Contraste tema oscuro: filtros/chips/selects legibles + texto NEGRO sobre latón ---- */
.sschip,.chip,.fchip,.filter-pill,.filters select,.sort-form select,.shop-tools input,.shop-tools select,.tool-form select{
  background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.sschip span,.chip span,.fchip span,.filter-list a span{color:var(--muted)}
.chip.is-active,.fchip.is-active,.filter-pill.is-active,.filter-list a.is-active,.sschip.is-active{
  background:var(--accent);color:#15100a;border-color:var(--accent);font-weight:500}
.chip.is-active span,.fchip.is-active span,.filter-pill.is-active span,.filter-list a.is-active span,.sschip.is-active span{color:rgba(21,16,10,.6)}
/* Texto negro en botones de latón (añadir a la cesta, etc.) */
.btn-primary,.btn-add,.ho-btn--solid,.qadd-btn{color:#15100a}
.qadd-btn{background:var(--accent)}
.btn-add-price{color:#15100a;opacity:.85}

/* ---- Logo Deco Origen (SVG inline) ---- */
.do-logo{display:inline-flex;align-items:center;gap:11px;color:var(--brand)}
.do-logo-mark{color:var(--accent);flex:none}
.do-logo-word{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap}
.do-logo-word span{color:var(--accent);margin-left:.14em}
.do-logo--light{color:var(--bone,#f0eadd)}
.do-logo--light .do-logo-mark,.do-logo--light .do-logo-word span{color:var(--accent-soft)}
@media(max-width:768px){.do-logo-word{font-size:1.18rem;letter-spacing:.14em}.do-logo-mark{width:30px;height:30px}}

/* ---- Ficha de producto (oscuro) ---- */
.product-eyebrow{font-family:var(--sans);letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;font-weight:400;color:var(--accent-soft)}
.product-info h1{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.05;color:var(--brand)}
.product-desc-supplier h3{font-size:1.2rem;margin-top:1.5em;margin-bottom:.4em;color:var(--brand)}
.buy-box{border:1px solid var(--line);border-radius:4px;padding:22px 24px;background:var(--surface)}
.shop-lead{max-width:62ch;margin-top:10px;color:var(--muted);font-size:1.06rem;line-height:1.6}

/* ===================================================================
   HOME CINEMATOGRÁFICA
   =================================================================== */
.ho-eyebrow{font-family:var(--sans);font-weight:400;letter-spacing:.4em;text-transform:uppercase;font-size:.66rem;color:var(--accent-soft)}
.ho-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;font-family:var(--sans);font-weight:400;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--accent);color:var(--ink);transition:.4s var(--ease)}
.ho-btn:hover{background:var(--accent);color:#15100a}
.ho-btn--solid{background:var(--accent);color:#15100a}.ho-btn--solid:hover{background:var(--accent-soft)}
/* Reveal SEGURO: visible por defecto; solo se oculta/anima si el JS añade .do-anim */
.reveal{transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.do-anim .reveal{opacity:0;transform:translateY(28px)}
html.do-anim .reveal.in{opacity:1;transform:none}

/* HERO TRÍPTICO */
.ho-hero{height:100vh;min-height:620px;display:flex;position:relative;background:#0c0e0b}
.ho-panels{display:contents} /* desktop: como si los paneles fueran hijos directos -> hero intacto */
.ho-panel{position:relative;flex:1;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;text-align:center;text-decoration:none;
  border-right:1px solid rgba(0,0,0,.6);transition:flex .9s var(--ease)}
.ho-panel:last-child{border-right:0}
.ho-panel-bg{position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center 30%;
  background-color:#1a1813;filter:grayscale(.18) brightness(.5);transform:scale(1.06);transition:transform 8s linear,filter .9s}
.ho-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,8,.55) 0%,rgba(8,10,8,.1) 30%,rgba(8,10,8,.95) 100%)}
.ho-hero:hover .ho-panel{flex:.62}
.ho-panel:hover{flex:2.6}
/* hover más pronunciado: el panel activo se ilumina y acerca, los otros se apagan */
.ho-panel:hover .ho-panel-bg{transform:scale(1.2);filter:grayscale(0) brightness(.82) saturate(1.06)}
.ho-hero:hover .ho-panel:not(:hover) .ho-panel-bg{filter:grayscale(.45) brightness(.34)}
.ho-panel:hover .ho-panel-in{transform:translateY(-10px)}
.ho-panel:hover .ho-panel-num{color:var(--accent)}
.ho-panel-in{position:relative;z-index:2;padding:0 2.4vw 8.5vh;width:100%;max-width:440px;
  display:flex;flex-direction:column;align-items:center;transition:transform .6s var(--ease)}
.ho-panel-num{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--accent-soft);letter-spacing:.2em;transition:color .5s var(--ease)}
.ho-panel-h{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1;margin:10px 0 0;color:#fff}
.ho-panel-h em{font-style:italic;color:var(--accent-soft)}
/* filete de acento que crece bajo el título al hacer hover en la columna */
.ho-panel-h::after{content:"";display:block;width:0;height:2px;margin:16px auto 0;background:var(--accent);transition:width .55s var(--ease)}
.ho-panel:hover .ho-panel-h::after{width:52px}
.ho-panel-d{display:block;font-size:.9rem;color:#d8cfbf;max-width:34ch;margin-inline:auto;opacity:0;max-height:0;overflow:hidden;transition:.6s var(--ease)}
.ho-panel:hover .ho-panel-d{opacity:1;max-height:90px;margin-top:12px}
.ho-hero-title{position:absolute;top:28%;left:0;right:0;text-align:center;z-index:5;pointer-events:none;padding:0 5vw}
.ho-hero-title .ho-eyebrow{color:#f1e7d5;text-shadow:0 1px 16px rgba(0,0,0,.85)}
.ho-hero-title h1{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,9vw,7.5rem);line-height:.9;color:#fff;margin-top:12px;text-shadow:0 3px 50px rgba(0,0,0,.7),0 1px 12px rgba(0,0,0,.6)}
.ho-hero-title h1 em{font-style:italic;color:var(--accent-soft)}
@media(max-width:860px){
  /* MÓVIL: título arriba + los 3 mundos como CARRUSEL deslizable (scroll-snap), con asomo del siguiente */
  .ho-hero{display:block;height:auto;background:#0c0e0b}
  .ho-hero-title{position:relative;top:auto;padding:46px 24px 18px;background:#0c0e0b}
  .ho-hero-title h1{font-size:clamp(2.6rem,13vw,3.7rem)}
  .ho-panels{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:2px 16px 26px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ho-panels::-webkit-scrollbar{display:none}
  .ho-panel{flex:0 0 82%;scroll-snap-align:center;min-height:48vh;max-height:430px;
    border-right:0;border-radius:6px;overflow:hidden;box-shadow:0 22px 50px -28px #000}
  .ho-hero:hover .ho-panel,.ho-panel:hover{flex:0 0 82%} /* neutraliza el grow del desktop en táctil */
  .ho-panel-bg{filter:grayscale(.06) brightness(.66)}
  .ho-panel-in{padding:0 22px 26px;max-width:none}
  .ho-panel-d{opacity:1;max-height:none;margin-top:10px}
  .ho-panel-h::after{width:46px} /* filete de latón visible sin hover */
}

/* MANIFIESTO */
.ho-manifesto{position:relative;min-height:80vh;display:flex;align-items:center;text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,rgba(58,90,71,.4),transparent 60%),
    radial-gradient(100% 90% at 82% 100%,rgba(201,162,94,.24),transparent 55%),linear-gradient(160deg,#13120d,#0c0e0b)}
.ho-manifesto-in{max-width:880px;margin-inline:auto;text-align:center}
.ho-rule{display:block;width:1px;height:64px;background:var(--accent);margin:0 auto 30px}
.ho-manifesto h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.08;color:#fff;margin:14px 0}
.ho-manifesto h2 em{font-style:italic;color:var(--accent-soft)}
.ho-manifesto p{color:#cfc6b6;max-width:60ch;margin:0 auto 28px;font-size:1.05rem}

/* FRANJA FLASH */
.ho-flash{display:block;background:#15140f;border-block:1px solid var(--line);text-decoration:none}
.ho-flash-in{display:flex;align-items:center;justify-content:center;gap:22px;padding:16px 0;flex-wrap:wrap;text-align:center}
.ho-flash-tag{color:var(--accent-soft);font-size:.82rem;letter-spacing:.06em;display:inline-flex;align-items:center;gap:8px}
.ho-flash-cd .cd-clock{font-family:var(--serif);font-size:1.35rem;color:#fff}
.ho-flash-cta{color:var(--accent);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:600px){.ho-flash-cta{display:none}}

/* ESCENAS DE CATEGORÍA */
.ho-scene{position:relative;min-height:76vh;display:flex;align-items:center;overflow:hidden}
.ho-scene-bg{position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;
  background-color:#cfc7b6;filter:brightness(.84) grayscale(.06);transform:scale(1.05)}
.ho-scene-veil{position:absolute;inset:0}
.ho-scene--l .ho-scene-veil{background:linear-gradient(90deg,rgba(8,10,8,.95) 32%,transparent 80%)}
.ho-scene--r{justify-content:flex-end;text-align:right}
.ho-scene--r .ho-scene-veil{background:linear-gradient(270deg,rgba(8,10,8,.95) 32%,transparent 80%)}
.ho-scene-in{position:relative;z-index:2;max-width:520px;padding:0 7vw}
.ho-scene-num{font-family:var(--serif);font-size:3rem;color:var(--accent);opacity:.5;line-height:1}
.ho-scene-in h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.02;color:#fff;margin:4px 0 14px}
.ho-scene-in h2 em{font-style:italic;color:var(--accent-soft)}
.ho-scene-in p{color:#cfc6b6;margin-bottom:24px}

/* MOSAICO EDITORIAL */
.ho-curated{padding:13vh 0;background:#100f0b}
.ho-curated-head{text-align:center;margin-bottom:6vh}
.ho-curated-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5vw,3.8rem);color:#fff;margin-top:6px}
.ho-curated-head h2 em{font-style:italic;color:var(--accent-soft)}
.ho-curated-foot{text-align:center;margin-top:6vh}
.ho-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:16px}
.ho-tile{position:relative;overflow:hidden;background:#e9e1d1;display:flex;align-items:flex-end;text-decoration:none}
.ho-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7%;transition:1.2s var(--ease)}
.ho-tile:hover img{transform:scale(1.06)}
.ho-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(11,8,4,.55) 62%,rgba(11,8,4,.94))}
.ho-tile-in{position:relative;z-index:2;padding:20px}
.ho-tile-cat{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft)}
.ho-tile-h{display:block;font-family:var(--serif);font-weight:500;font-size:1.35rem;color:#fff;margin:3px 0 5px;line-height:1.05}
.ho-tile-pr{font-family:var(--sans);color:var(--accent-soft);font-size:.95rem}
.ho-tile-pr s{color:#9a8f7a;font-size:.8em;margin-left:6px}
.ho-tile--xl{grid-column:span 2;grid-row:span 2}
.ho-tile--w{grid-column:span 2}
@media(max-width:860px){.ho-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.ho-tile--xl{grid-row:span 2}.ho-tile--w{grid-column:span 2}}

/* DIARIO */
.ho-diario{padding:12vh 0;background:#0c0e0b}
.ho-diario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ho-guide{display:block;text-decoration:none}
.ho-guide-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface);margin-bottom:16px}
.ho-guide-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.85);transition:.8s var(--ease)}
.ho-guide:hover .ho-guide-media img{transform:scale(1.05);filter:brightness(1)}
.ho-guide-cat{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft)}
.ho-guide-h{display:block;font-family:var(--serif);font-weight:500;font-size:1.5rem;color:#fff;margin:8px 0 6px;line-height:1.12}
.ho-guide-x{display:block;color:var(--muted);font-size:.92rem}
@media(max-width:860px){.ho-diario-grid{grid-template-columns:1fr;gap:40px}}

/* CIERRE */
.ho-closing{position:relative;min-height:64vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(90% 120% at 50% 120%,rgba(201,162,94,.32),transparent 55%),
    radial-gradient(80% 90% at 15% 0%,rgba(58,90,71,.36),transparent 55%),linear-gradient(160deg,#13120d,#0c0e0b)}
.ho-closing-in{max-width:680px;padding:0 6vw}
.ho-closing h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;color:#fff;margin-bottom:28px}
.ho-closing h2 em{font-style:italic;color:var(--accent-soft)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ho-panel-bg,.ho-scene-bg,.ho-tile img{transition:none}
}

/* ---- Popup de bienvenida (tema oscuro) ---- */
.mz-pop-card{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:0 40px 90px -30px #000}
.mz-pop-card h2{color:var(--brand)}
.mz-pop-card h2 em{color:var(--accent-soft);font-style:normal}
.mz-pop-eyebrow{color:var(--accent-soft)}
.mz-pop-x{color:var(--muted)}.mz-pop-x:hover{color:var(--ink)}
.mz-pop-card p,.mz-pop-small{color:var(--muted)}
.mz-pop-code{background:var(--accent-bg);color:var(--accent-soft);border:1px dashed var(--accent)}

/* ---- Footer (usaba var(--brand), que ahora es claro -> se rompía) ---- */
.site-footer{background:#100f0b;color:#c4b9a5}
.footer-cta{background:#13120d;border-bottom:1px solid var(--line)}
.footer-cta h2{color:var(--brand)}
.footer-cta p,.footer-about .muted,.footer-bottom .muted{color:var(--muted)}
.site-footer h3{color:var(--accent-soft)}
.site-footer a{color:#cabfa9}.site-footer a:hover{color:var(--accent-soft)}
.footer-bottom{border-top:1px solid var(--line)}
.pay-icons span{color:var(--muted)}

/* ---- Ficha de producto: TEXTO CLARO legible sobre oscuro ---- */
.product-desc,.product-desc p,.product-desc li,.product-lead,.prod-benefits li span,.prod-who,
.ritual-sub,.exp-row-info strong,.exp-hero-info strong,.product-meta li strong,
.product-desc .lead,.product-desc-supplier,.product-desc-supplier *{color:var(--ink)}
.product-desc h2,.product-desc h3,.explore-title,.ritual-head .section-title,.exp-subtitle{color:var(--brand)}
.product-meta li span,.exp-row-info span,.ritual-action,.tax-note,.prod-trust span,.trust li{color:var(--muted)}
.product-meta li{border-color:var(--line)}
.stepper{border-color:var(--line-2);background:var(--surface-2)}
.stepper input,.stepper .step{background:transparent;color:var(--ink)}
.product-meta,.product-meta li{background:transparent}
.variant-label{color:var(--ink)}
.ritual-step,.exp-row,.exp-hero{border-color:var(--line)}
.cat-faq-item{border-color:var(--line)}
.cat-faq-item summary{color:var(--brand)}.cat-faq-item p{color:var(--muted)}

/* ===================================================================
   PDP · REDISEÑO EDITORIAL "VITRINA NOCTURNA"
   Aleja la ficha del look MaletaZen (panel de color con palabra fantasma,
   tarjetas blancas, esquinas muy redondeadas) hacia la identidad Deco
   Origen: museo de noche, líneas netas, marco de latón y módulo de compra
   oscuro. Carga la última -> gana sobre v2.css.
   =================================================================== */

/* Migas legibles */
.crumbs{font-family:var(--sans);font-size:.74rem;letter-spacing:.04em}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--accent-soft)}
.crumbs span{color:var(--ink)}

/* Rejilla: un poco más de aire y peso a la pieza */
.product{gap:clamp(32px,4vw,64px);align-items:start}
@media(min-width:981px){.product{grid-template-columns:1.1fr .9fr}}

/* GALERÍA: la pieza, enmarcada y colgada de la pared oscura (sin panel de color) */
.pdp-stage{background:none;border-radius:0;padding:0;box-shadow:none;overflow:visible}
.pdp-stage::after{display:none} /* fuera la palabra fantasma */
@media(min-width:981px){.pdp-stage{position:sticky;top:96px}}
.pdp-stage .gallery-main{border-radius:2px;border:0;overflow:hidden; /* fondo "estudio" claro de v2 intacto */
  box-shadow:0 0 0 1px var(--accent-soft),0 0 0 9px var(--surface),0 0 0 10px var(--line),0 50px 90px -45px #000}
.pdp-stage .gallery-thumbs{margin-top:20px;gap:10px}
.pdp-stage .thumb{border-radius:2px;border-color:var(--line-2)}
.pdp-stage .thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.gallery-main .badge{border-radius:2px;letter-spacing:.06em}

/* CABECERA: eyebrow tipografiado, H1 display con filete de latón */
.product-eyebrow{background:none;border:0;border-radius:0;padding:0;text-transform:uppercase;
  font-family:var(--sans);font-weight:400;letter-spacing:.24em;font-size:.7rem;color:var(--accent-soft);margin-bottom:14px}
.product-eyebrow:hover{color:var(--accent)}
.product-info h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,2.95rem);
  line-height:1.04;letter-spacing:.004em;color:var(--brand);margin:0 0 14px}
.product-info h1::after{content:"";display:block;width:46px;height:2px;background:var(--accent);margin:18px 0 0}
.product-lead{font-family:var(--serif);font-style:italic;font-size:1.16rem;line-height:1.6;color:var(--ink);opacity:.84;max-width:46ch}

/* MÓDULO DE COMPRA: oscuro, hairline de latón arriba, esquinas netas */
.buy-box{margin-top:26px;border-radius:2px;padding:26px 26px 24px;background:var(--surface);
  border:1px solid var(--line);box-shadow:none;position:relative;overflow:hidden}
.buy-box::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.buy-box .product-price,.buy-box .price-now{color:var(--accent-soft);font-family:var(--serif);
  font-size:clamp(2.2rem,4.4vw,2.7rem);font-weight:500;letter-spacing:0}
.buy-box .product-price-was{color:var(--muted);text-decoration:line-through;font-size:1.1rem;margin-left:10px}
.save-pill{display:inline-block;background:var(--accent-bg);color:var(--accent-soft);border:1px solid var(--accent);
  border-radius:2px;padding:3px 10px;font-size:.74rem;letter-spacing:.04em;margin-left:10px}
.tax-note{color:var(--muted);font-size:.78rem}

/* CTA principal en latón = alto contraste y on-brand */
.buy-box .add-form{margin-top:16px}
.buy-box .btn-add{flex:1;min-height:56px;border-radius:2px;background:var(--accent);color:#15100a;
  font-family:var(--sans);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem}
.buy-box .btn-add:hover{background:var(--accent-soft)}
.btn-add-price{color:#15100a;opacity:.8;letter-spacing:0;text-transform:none}
.stepper{border-radius:2px}

/* Pago + promo de envío */
.pay-methods--pdp span{color:var(--muted);font-size:.7rem;letter-spacing:.04em}
.ship-promo{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.ship-promo-bar{color:var(--ink);font-size:.86rem}.ship-promo-bar strong{color:var(--accent-soft)}
.ship-progress{background:var(--surface-2);border-radius:2px}
.ship-progress span{background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
.ship-eta{color:var(--muted);font-size:.84rem}.ship-eta strong{color:var(--ink)}

/* Confianza: fila con hairlines, no tarjetas redondeadas */
.product-info .trust{grid-template-columns:repeat(3,1fr);gap:0;margin:24px 0;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.product-info .trust li{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:16px 12px;font-size:.76rem;color:var(--muted)}
.product-info .trust li:first-child{border-left:0}
@media(max-width:560px){
  .product-info .trust{grid-template-columns:1fr}
  .product-info .trust li{border-left:0;border-top:1px solid var(--line);flex-direction:row;justify-content:center;gap:10px}
  .product-info .trust li:first-child{border-top:0}}

/* Ficha técnica + extras */
.product-meta{border-top:1px solid var(--line);margin-top:18px;padding-top:6px}
.tool-teaser{border:1px solid var(--line);border-radius:2px;background:var(--surface)}
.tool-teaser:hover{border-color:var(--accent)}
.in-pack{border-radius:2px}

/* DESCRIPCIÓN editorial */
.product-desc .lead{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--ink);opacity:.92}
.product-desc h2.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem)}
.product-desc h2.section-title::before{content:"";display:block;width:40px;height:2px;background:var(--accent);margin:0 0 16px}
.product-desc h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;color:var(--brand);margin-top:1.6em}
.prod-benefits li svg{color:var(--accent)}
.prod-trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}

/* RITUAL (arregla número invisible: fondo claro + texto blanco) */
.ritual-num{background:var(--accent);color:#15100a}
.ritual-step--main .ritual-num{background:var(--accent-soft)}
.ritual-media{border-radius:2px}
.ritual-steps::before{border-top-color:var(--line-2)}
.ritual-name{color:var(--ink)}.ritual-name:hover{color:var(--accent-soft)}
.ritual-price,.ritual-total{color:var(--accent-soft)}
.ritual-eyebrow{color:var(--accent-soft);font-weight:400;letter-spacing:.2em}
.ritual-cta{border:1px solid var(--line);border-radius:2px;background:var(--surface)}
.ritual-cta .btn-primary{border-radius:2px}

/* SIGUE EXPLORANDO */
.explore-eyebrow{color:var(--accent-soft);font-weight:400;letter-spacing:.2em}
.explore-title{font-family:var(--serif);font-weight:400}
.exp-hero,.exp-row,.exp-grid .rcard{border-radius:2px}
.exp-hero-tag{border-radius:2px}
.exp-row:hover{border-color:var(--accent)}
.exp-dot span{color:var(--muted)}

/* COMPRA STICKY (móvil): cristal oscuro, no blanco */
.sticky-buy{background:rgba(12,14,11,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.sticky-name{color:var(--ink)}
.sticky-price{color:var(--accent-soft);font-family:var(--serif);font-size:1.2rem}
.sticky-buy .btn{border-radius:2px}

/* ===================================================================
   PRODUCTO SIEMPRE VISIBLE ENTERO
   Las fotos de AW vienen sobre fondo blanco. Con object-fit:cover se
   recortaban (estatuas/fuentes altas perdían parte). Pasamos a contain
   con respiración: la pieza se ve completa sobre el fondo estudio claro,
   y el blanco del proveedor se funde con multiply. El usuario ve lo que
   compra, sin recortes.
   =================================================================== */
.card-media img,.gallery-main img,.thumb img,.ritual-media img,
.rcard-media img,.exp-row picture img,.upsell-media img,
.fp-media img,.g-prod-media img{object-fit:contain}
.gallery-main img{padding:6%}
.card-media img{padding:9%}
.thumb img{padding:10%}
.rcard-media img,.ritual-media img,.fp-media img,.g-prod-media img{padding:8%}
.exp-row picture img,.upsell-media img{padding:7%}
/* exp-hero y los heroes editoriales SÍ van a sangre (cover): no se tocan */

/* ===================================================================
   CONTENEDOR · padding lateral FIJO en px (no %) para márgenes coherentes
   en todos los dispositivos. (Antes width:90% -> el problema del "86%".)
   =================================================================== */
.wrap{width:100%;padding-inline:16px}
@media(min-width:768px){.wrap{padding-inline:24px}}

/* ===================================================================
   CARRITO · lista de productos uniforme
   El nombre se imprime entero -> nombres largos saltaban a 2 líneas y los
   cortos a 1, dejando filas desiguales. Lo fijamos a 2 líneas máx con
   elipsis y dejamos que el grid encoja (min-width:0). Filas a la misma
   altura, alineadas y legibles, sin recortar a lo bruto en PHP.
   =================================================================== */
.cart-row{align-items:center}
.cart-row-info{min-width:0;justify-content:center}          /* min-width:0 = permite recortar en grid */
.cart-row-info a,.cart-row--box .cart-row-info strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.32;max-height:2.64em;overflow-wrap:anywhere}
.cart-row-info > .muted{overflow:hidden;text-overflow:ellipsis}
.cart-row-info .muted .mini-flash{white-space:nowrap}
/* línea de precio/ud sin que descuadre la fila */
.cart-row-info span.muted{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:.86rem}
@media(max-width:560px){
  .cart-items{padding:4px 14px}
  .cart-row{gap:12px}
  .cart-row-info a,.cart-row--box .cart-row-info strong{-webkit-line-clamp:2}
}

/* ===================================================================
   CHECKOUT · inputs legibles en tema oscuro + estados completos
   BUG: .checkout-form input tenía background:#fff con texto casi blanco
   (--ink) -> el texto escrito era invisible. Lo pasamos a superficie
   oscura con texto claro (contraste AA). font-size 16px = sin zoom iOS.
   =================================================================== */
.checkout-form input,.checkout-form textarea,.contact-form input,.contact-form textarea{
  background:var(--surface-2);color:var(--ink);border-color:var(--line-2);font-size:16px}
.checkout-form input::placeholder,.checkout-form textarea::placeholder,
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted)}
.checkout-form label,.contact-form label{color:var(--ink)}            /* labels nítidos, no muted */
.checkout-form h2,.contact-form h2{color:var(--brand);font-family:var(--serif);font-weight:400}
/* estado de error (era fondo claro -> texto invisible) */
.checkout-form input.is-invalid,.checkout-form textarea.is-invalid{
  background:rgba(181,97,63,.12);border-color:var(--err);color:var(--ink)}
.check{color:var(--ink)}
/* estado de carga del botón (feedback al pagar / redirigir a Stripe) */
.btn.is-loading{opacity:.75;pointer-events:none;cursor:progress}
@media(prefers-reduced-motion:no-preference){
  .btn.is-loading::after{content:"";width:14px;height:14px;margin-left:10px;border:2px solid currentColor;
    border-right-color:transparent;border-radius:50%;display:inline-block;vertical-align:-2px;animation:btnspin .6s linear infinite}
  @keyframes btnspin{to{transform:rotate(360deg)}}
}

/* ===================================================================
   FASE 2 · TIENDA / LISTADO
   1) Tarjetas uniformes: título a 2 líneas (evita rejilla desigual).
   2) Filtros en móvil: el bottom-sheet y la barra eran BLANCOS sobre el
      tema oscuro -> el texto de los filtros (claro) quedaba INVISIBLE.
      Los pasamos a superficie oscura de marca.
   =================================================================== */
/* Título de tarjeta a 2 líneas exactas -> precio y CTA siempre alineados */
.card-title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-title{min-height:2.7em}

/* Filtros en móvil: superficie oscura (eran #fff con texto claro invisible) */
@media(max-width:900px){
  .shop-sidebar{background:var(--surface);border-top:1px solid var(--line-2)}
  .sidebar-head{background:var(--surface)}
  .sidebar-head h2{color:var(--brand)}
  .sheet-foot{background:var(--surface)}
  .sheet-handle{background:var(--line-2)}
  .filter-list a{color:var(--ink)}
  .filter-pill{background:var(--surface-2);color:var(--ink)}
  .mfilter-bar{background:rgba(12,14,11,.94);border-top:1px solid var(--line)}
  .mfilter-btn{background:var(--accent);color:#15100a}
  .mfilter-count{background:#15100a;color:var(--accent-soft)}
}

/* ===================================================================
   FICHA DE PRODUCTO EN CLARO (dirección Alvaro 14-jun)
   La home sigue oscura; la FICHA pasa a fondo CLARO + texto OSCURO donde
   el usuario lee y decide. Header y footer siguen oscuros -> mix luz/sombra.
   Truco: re-mapeamos los TOKENS de color dentro de #main, así todos los
   componentes que usan var() se aclaran solos (limpio y reversible).
   =================================================================== */
body.pdp-light #main,body.page-light #main,body.packs-light #main{
  --bg:#f6f1e8;          /* lienzo cálido hueso */
  --surface:#fffdf8;     /* tarjetas casi blancas */
  --surface-2:#f1eadd;   /* paneles sutiles */
  --ink:#2c2620;         /* texto oscuro cálido */
  --brand:#1d1812;       /* títulos casi negros */
  --muted:#6b6150;       /* secundario (AA sobre claro) */
  --line:rgba(40,30,15,.14);
  --line-2:rgba(40,30,15,.24);
  --accent:#bd8a32;      /* latón para botones (resalta sobre claro) */
  --accent-soft:#8a5e1f; /* latón profundo para texto/precio (AA sobre claro) */
  --accent-bg:#f3ead6;   /* tinte latón claro */
  background:var(--bg);color:var(--ink)}
/* elevación suave de la caja de compra sobre el lienzo claro */
body.pdp-light .buy-box{box-shadow:0 18px 44px -28px rgba(60,40,12,.34)}
/* barra sticky de compra: clara, coherente con la ficha (era cristal oscuro) */
body.pdp-light .sticky-buy{background:rgba(255,253,248,.96);border-top:1px solid var(--line)}

/* ---- Páginas de contenido (Sobre, legales, contacto) en claro: editorial ----
   El cuerpo .rte usaba color marrón #473e32 pensado para fondo claro -> sobre el
   tema oscuro era ilegible. En claro luce; aquí solo afinamos la tipografía. */
body.page-light .page-rte h1{font-family:var(--serif);font-weight:400;letter-spacing:.005em;line-height:1.05}
body.page-light .page-rte h1::after{content:"";display:block;width:54px;height:2px;background:var(--accent);margin:18px 0 4px}
body.page-light .page-rte .lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,3.4vw,1.7rem);
  line-height:1.4;color:var(--brand);margin:8px 0 26px}
body.page-light .page-rte h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.2vw,2rem);
  color:var(--brand);margin:40px 0 14px;padding-top:24px;border-top:1px solid var(--line)}
body.page-light .page-rte p{margin:0 0 18px}
body.page-light .page-rte a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:2px}
body.page-light .page-rte a:hover{color:var(--accent)}
body.page-light .story-fig{margin:34px 0}
body.page-light .story-fig img{border-radius:6px;box-shadow:0 26px 60px -34px rgba(40,28,10,.5)}
body.page-light .story-fig figcaption{color:var(--muted);font-style:italic;margin-top:12px;text-align:center}
body.page-light .crumbs a{color:var(--muted)}
body.page-light .crumbs a:hover{color:var(--accent)}
body.page-light .crumbs span{color:var(--ink)}

/* ===================================================================
   FICHA · ESTILO PROPIO "GALERÍA DE MUSEO" (no el patrón de siempre)
   Sobre el tema claro de la ficha: riel VERTICAL de miniaturas + la ficha
   técnica como una PLACA "El objeto" con la procedencia/materiales reales.
   Diferencia la ficha de un ecommerce genérico y refuerza la marca.
   =================================================================== */
@media(min-width:981px){
  body.pdp-light .gallery{display:flex;flex-direction:row-reverse;gap:14px;align-items:flex-start;position:static;top:auto}
  body.pdp-light .gallery-main{flex:1 1 auto;min-width:0}
  body.pdp-light .pdp-stage .gallery-thumbs{flex:0 0 78px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:10px;margin-top:0}
  body.pdp-light .pdp-stage .thumb{width:78px;height:78px}
}
/* Ficha técnica = placa de museo */
body.pdp-light .product-meta{margin-top:26px;padding:20px 20px 8px;border:1px solid var(--line);
  border-top:2px solid var(--accent);border-radius:3px;background:var(--surface);position:relative}
body.pdp-light .product-meta::before{content:"El objeto";position:absolute;top:-9px;left:18px;
  background:var(--bg);padding:0 9px;font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-soft)}
body.pdp-light .product-meta li{padding:12px 0;border-color:var(--line)}
body.pdp-light .product-meta li span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;color:var(--muted)}
body.pdp-light .product-meta li strong{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}

/* ===================================================================
   PACKS · catálogo en CLARO con personalidad (mix luz/sombra)
   Hero y resto oscuros literales se quedan oscuros (islas dramáticas);
   el catálogo de packs va claro. El CTA "crea tu pack" pasa a banner
   DORADO para llevarse la mirada hacia la acción clave.
   =================================================================== */
/* Banner "crea tu propio pack": dorado, foco de conversión */
body.packs-light .byo-cta{background:linear-gradient(120deg,#caa25e,#e7cb8c);border-color:#b9923f;color:#1c1812}
body.packs-light .byo-cta h2{color:#1c1812}
body.packs-light .byo-cta h2 em{color:#5a3c0e}
body.packs-light .byo-cta p{color:#3a2f1c}
body.packs-light .byo-cta .eyebrow{color:#6b4a12}
body.packs-light .byo-cta .eyebrow::before{background:#6b4a12}
body.packs-light .byo-cta .btn-primary{background:#1c1812;color:#f3ece0} /* botón oscuro sobre dorado */
body.packs-light .byo-cta .btn-primary:hover{background:#000}
/* Cartas de pack en claro, más visuales */
body.packs-light .pack-card{background:var(--surface);border-color:var(--line)}
body.packs-light .pack-card:hover{border-color:var(--accent);box-shadow:0 26px 56px -30px rgba(60,40,12,.4)}
body.packs-light .pack-card-body h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--brand);margin:0}
body.packs-light .pack-price .price-now{color:var(--accent-soft)}
body.packs-light .pack-price .price-was{color:var(--muted)}
body.packs-light .section-head .section-title{color:var(--brand)}
body.packs-light .section-head .muted{color:var(--muted)}
/* Botón "añadir al carrito" desde el listado de packs (UX directa, con feedback) */
.pack-card-body{flex:1}
.pack-card-body .pack-add{margin-top:auto;padding-top:14px}
.pack-add .qadd-btn{min-height:48px;border-radius:3px;font-size:.92rem;letter-spacing:.03em}
.pack-card .pack-price{flex-wrap:wrap;gap:8px 10px;align-items:baseline}
.pack-detail-link{display:block;text-align:center;margin-top:9px;font-size:.82rem;letter-spacing:.03em;color:var(--accent-soft)}
.pack-detail-link:hover{color:var(--accent)}

/* ===================================================================
   CREA TU PACK · barra de progreso de descuento (gamificada)
   Se llena al añadir productos; cada hito muestra su % alcanzable.
   En tema claro (body.page-light) los tokens ya son claros/latón.
   =================================================================== */
.byo-progress{margin:6px 0 18px}
.byo-progress-track{height:4px;background:var(--line-2);border-radius:2px;position:relative}
.byo-progress-fill{position:absolute;left:0;top:0;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));transition:width .45s var(--ease)}
.byo-progress-marks{list-style:none;display:flex;justify-content:space-between;padding:0;margin:9px 0 0}
.byo-progress-marks li{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.62rem;color:var(--muted)}
.byo-progress-marks b{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);font-size:.72rem;font-weight:600;transition:.3s var(--ease)}
.byo-progress-marks li.on{color:var(--accent-soft)}
.byo-progress-marks li.on b{background:var(--accent);border-color:var(--accent);color:#15100a}
@media(prefers-reduced-motion:reduce){.byo-progress-fill,.byo-progress-marks b{transition:none}}

/* ===================================================================
   404 QUE RECUPERA (buscador + accesos), no callejón sin salida
   =================================================================== */
.nf-num{display:block;font-family:var(--serif);font-size:clamp(4rem,16vw,7rem);line-height:1;color:var(--accent);opacity:.45;margin-bottom:4px}
.nf-search{display:flex;gap:10px;max-width:480px;margin:22px auto 6px}
.nf-search input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);border-radius:2px;padding:13px 16px;font-size:16px}
.nf-search input::placeholder{color:var(--muted)}
.nf-search .btn{border-radius:2px}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0 22px;list-style:none;padding:0}
.nf-links a{border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;font-size:.85rem;color:var(--ink);transition:.2s var(--ease)}
.nf-links a:hover{border-color:var(--accent);color:var(--accent-soft)}

/* ===================================================================
   BANNER DE COOKIES (RGPD/LSSI) — barra inferior discreta
   =================================================================== */
.mz-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:160;max-width:1140px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-2);border-radius:4px;padding:14px 18px;box-shadow:0 22px 50px -20px #000}
.mz-cookie[hidden]{display:none}
.mz-cookie-txt{margin:0;flex:1;min-width:240px;font-size:.86rem;line-height:1.45;color:var(--ink)}
.mz-cookie-txt a{color:var(--accent-soft);text-decoration:underline}
.mz-cookie-btns{display:flex;gap:10px;flex:none}
@media(max-width:560px){.mz-cookie{flex-direction:column;align-items:stretch;gap:10px;left:10px;right:10px;bottom:10px}.mz-cookie-btns{justify-content:flex-end}}

/* ===================================================================
   OFERTAS · "Programa de hoy": la hora salía con fondo casi blanco
   (var(--brand)) + texto blanco -> invisible. Badge oscuro + texto latón.
   =================================================================== */
.fp-time{background:var(--surface-2);color:var(--accent-soft);border:1px solid var(--line)}
.fp-pct{color:#15100a} /* texto oscuro sobre el badge de latón (legible, AA) */