/* ============================================================
   ADN Light — mockup rediseño 2026-05 · estilos compartidos
   Tokens, layout base, header/topbar/megamenú, breadcrumb,
   footer cinematográfico, WhatsApp bombilla, botones,
   eyebrow, link-arrow, pcard estándar, reveal observer hook,
   grano global, responsive base.
   Importar desde cada página: <link rel="stylesheet" href="_shared.css">
   ============================================================ */

:root{
  /* === Tokens legacy (compat) === */
  --ink:#15130f; --ink-2:#1d1a15; --paper:#fff; --cream:#f6f2ea;
  --cream-2:#efe9dc; --amber:#fcb900; --amber-deep:#fcb900;
  --amber-text:#fcb900; /* WCAG AA small text sobre cream (5.09:1) */
  --amber-soft:#fbe4b4; --text:#4a453d; --muted:#6b6358; --line:#e8e2d5;
  --line-dk:#39342c; --max:1280px; --pad:clamp(76px,9vw,140px); --r:16px;
  --display:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* === Escala de greys (10 shades, Refactoring UI) === */
  --grey-50:#faf8f4;  --grey-100:#f1ede3; --grey-200:#e8e2d5;
  --grey-300:#d1c8b6; --grey-400:#a89e8c; --grey-500:#6b6358;
  --grey-600:#4a453d; --grey-700:#363129; --grey-800:#1d1a15;
  --grey-900:#15130f;

  /* === Escala amber primary (7 shades) === */
  --amber-50:#fef8e7;  --amber-100:#fbe4b4; --amber-200:#f8d182;
  --amber-300:#f5ba42; --amber-400:#e1a02b; --amber-500:#fcb900;
  --amber-600:#fcb900; --amber-700:#5c3e0e;

  /* === Semantic (WCAG AA sobre claros y oscuros) === */
  --red-50:#fef2f2;   --red-500:#b91c1c;  --red-700:#7f1d1d;
  --green-50:#f0fdf4; --green-500:#15803d; --green-700:#14532d;
  --yellow-50:#fffbeb; --yellow-500:#b45309; --yellow-700:#78350f;
  --blue-50:#eff6ff;  --blue-500:#1d4ed8;  --blue-700:#1e3a8a;

  /* === Spacing scale (25%+ jumps) === */
  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:48px; --space-8:64px; --space-9:96px;

  /* === Type scale (marketing context) === */
  --fs-caption:.75rem;   /* 12px */
  --fs-small:.875rem;    /* 14px */
  --fs-base:1rem;        /* 16px */
  --fs-lead:1.125rem;    /* 18px */
  --fs-xl:1.5rem;        /* 24px */
  --fs-2xl:2rem;         /* 32px */
  --fs-3xl:clamp(2rem,3.6vw,2.8rem);     /* H2 secundario */
  --fs-4xl:clamp(2.2rem,4vw,3.2rem);     /* H2 principal */
  --fs-5xl:clamp(2.4rem,4.8vw,3.8rem);   /* H2 hero CTA */
  --fs-hero:clamp(3rem,6.4vw,5.2rem);    /* H1 hero */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:var(--cream);
  line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.12;
  font-weight:700;letter-spacing:-.02em}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:26px}
.eyebrow{font-family:var(--display);font-size:.77rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--amber)}

/* grano global */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

[data-reveal]{opacity:0;transform:translateY(32px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}
[data-reveal][data-d="4"]{transition-delay:.36s}
[data-reveal][data-d="5"]{transition-delay:.45s}

/* === BOTONES === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:15px 28px;border-radius:100px;transition:.22s var(--ease);
  cursor:pointer;border:1.5px solid transparent;text-align:center}
.btn-amber{background:var(--amber);color:var(--ink);transition:.22s var(--ease)}
.btn-amber:hover{background:var(--amber);transform:translateY(-3px);
  box-shadow:0 8px 26px -10px rgba(245,186,66,.7)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:var(--amber)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);color:var(--amber)}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1ea451}
.btn-block{width:100%}
.link-arrow{font-family:var(--display);font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.link-arrow .ar{color:var(--amber);transition:.2s}
.link-arrow:hover .ar{transform:translateX(5px)}

/* === TOPBAR + HEADER + MEGAMENU === */
.topbar{background:var(--ink);color:#cdc4b3;font-size:.79rem;
  font-family:var(--display)}
.topbar .row{display:flex;justify-content:center;gap:34px;padding-block:9px;
  flex-wrap:wrap}
.topbar b{color:var(--amber);font-weight:600}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;justify-content:space-between;
  padding-block:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:46px;height:46px;border-radius:50%}
.brand .wm{font-family:var(--display);font-weight:800;font-size:1.15rem;
  letter-spacing:.04em;color:var(--ink);line-height:1}
.brand .wm span{display:block;font-weight:500;font-size:.62rem;
  letter-spacing:.32em;color:var(--muted);margin-top:3px}
nav.main{display:flex;align-items:center}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:6px;font-family:var(--display);
  font-weight:500;font-size:.95rem;color:var(--ink);padding:26px 17px}
.nav-item>a .chev{width:9px;height:9px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);
  transition:.25s;margin-top:-3px}
.nav-item:hover>a{color:var(--amber)}
.nav-item:hover>a .chev{transform:rotate(-135deg);margin-top:2px;
  border-color:var(--amber)}
.nav-item.active>a{color:var(--amber)}
.mega{position:absolute;top:100%;left:50%;transform:translate(-50%,14px);
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 34px 80px -30px rgba(21,19,15,.5);padding:28px;display:flex;
  gap:28px;opacity:0;visibility:hidden;pointer-events:none;
  transition:.26s var(--ease);z-index:70}
.nav-item:hover .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0)}
.mega-3col{width:912px}
.mcol{width:188px}
.mega .col-h{font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber);
  margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.mcol a{display:block;font-family:var(--display);font-weight:500;
  font-size:.92rem;color:var(--ink);padding:9px 10px;border-radius:9px;
  transition:.15s}
.mcol a.curr{background:var(--cream);color:var(--amber)}
.mcol a small{display:block;font-family:var(--body);font-weight:400;
  font-size:.78rem;color:var(--muted);margin-top:1px}
.mcol a:hover{background:var(--cream);color:var(--amber);
  transform:translateX(3px)}
.mega .feat{width:212px;background:var(--ink);border-radius:14px;padding:22px;
  color:#fff;display:flex;flex-direction:column;gap:15px;position:relative;
  overflow:hidden}
.mega .feat::after{content:"";position:absolute;width:160px;height:160px;
  right:-56px;top:-56px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,186,66,.55),transparent 70%)}
.mega .feat .col-h{color:var(--amber);border-color:var(--line-dk)}
.mega .feat a{position:relative;z-index:2}
.mega .feat a b{color:#fff;font-family:var(--display);font-size:.95rem}
.mega .feat a small{color:#b3aa9a;display:block;margin-top:2px;font-size:.8rem}
.mega .feat a:hover b{color:var(--amber)}
.mega .feat .all{margin-top:auto;color:var(--amber);font-weight:600;
  font-family:var(--display);font-size:.86rem}
.head-act{display:flex;gap:16px;align-items:center;color:var(--ink)}
.head-act .ic{width:21px;height:21px;cursor:pointer}
.head-act .ic:hover{color:var(--amber)}
.head-act .ctc{font-family:var(--display);font-weight:600;font-size:.87rem;
  background:var(--ink);color:#fff;padding:11px 19px;border-radius:100px;
  transition:.2s}
.head-act .ctc:hover{background:var(--amber);color:var(--ink)}
.cart{position:relative}
.cart .n,.cart .adnl-cart-count{position:absolute;top:-7px;right:-8px;background:var(--amber);
  color:var(--ink);font-size:.62rem;font-weight:700;font-family:var(--display);
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center}
.cart .adnl-cart-count.is-empty{display:none}

/* === BREADCRUMB === */
.breadcrumb{background:var(--cream);border-bottom:1px solid var(--line);
  padding:14px 0;font-family:var(--display);font-size:.83rem;color:var(--muted)}
.breadcrumb a{color:var(--muted);transition:.18s}
.breadcrumb a:hover{color:var(--amber)}
.breadcrumb .sep{margin:0 11px;color:#c8bfaa}
.breadcrumb .curr{color:var(--ink);font-weight:600}

/* === PCARD estándar (producto en grids relacionados) === */
.pcard{position:relative;background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);transition:.32s var(--ease);
  display:flex;flex-direction:column}
.pcard::before{content:"";position:absolute;inset:0;border-radius:18px;
  pointer-events:none;background:radial-gradient(420px circle at 50% 30%,
    rgba(245,186,66,.18),transparent 60%);opacity:0;
  transition:.36s var(--ease);z-index:1}
.pcard:hover{transform:translateY(-6px);
  box-shadow:0 30px 60px -28px rgba(21,19,15,.32),
    0 0 0 1px rgba(245,186,66,.28)}
.pcard:hover::before{opacity:1}
.pcard .ph{position:relative;aspect-ratio:1/1.05;overflow:hidden;
  background:linear-gradient(180deg,#f9f5ec 0%,#efe9dc 100%);
  border-bottom:1px solid var(--line)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .5s var(--ease);
  filter:brightness(.97) contrast(1.02)}
.pcard:hover .ph img{transform:scale(1.08);filter:brightness(1.06) contrast(1.05)}
.pcard .pbody{padding:18px;display:flex;flex-direction:column;gap:7px;
  flex:1;position:relative;z-index:2}
.pcard .pcat{font-family:var(--display);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.pcard h3{font-family:var(--display);font-size:1.02rem;color:var(--ink);
  font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pcard .price{display:flex;align-items:baseline;gap:8px;margin-top:auto;
  padding-top:10px;border-top:1px solid var(--line);font-family:var(--display)}
.pcard .price .from{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.pcard .price b{font-size:1.1rem;color:var(--ink);font-weight:700}

/* === FOOTER === */
.foot-v5{background:radial-gradient(900px 600px at 50% 0%,#241e16,var(--ink));
  color:#9c9485;padding-top:80px;overflow:hidden;position:relative}
.foot-v5::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.foot-v5 .f5-top{text-align:center;margin-bottom:50px;padding-bottom:40px;
  border-bottom:1px solid var(--line-dk)}
.foot-v5 .f5-brand-big{font-family:var(--display);font-weight:800;
  font-size:clamp(4rem,12vw,9rem);line-height:.85;letter-spacing:-.04em;
  color:#fff;display:flex;align-items:baseline;justify-content:center;gap:14px;
  margin-bottom:14px}
.foot-v5 .f5-brand-big .dot{width:14px;height:14px;border-radius:50%;
  background:var(--amber);align-self:center;
  box-shadow:0 0 18px 4px rgba(245,186,66,.6);
  animation:bulbBreathe 3.5s ease-in-out infinite}
@keyframes bulbBreathe{0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.18);opacity:1}}
.foot-v5 .f5-brand-big .small{font-family:'Kaushan Script',cursive;
  font-size:.32em;color:var(--amber);font-weight:400}
.foot-v5 .f5-tagline{color:#bcb3a3;font-family:var(--display);font-size:.92rem;
  letter-spacing:.15em;text-transform:uppercase}
.foot-v5 .f5-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
  padding-bottom:46px;border-bottom:1px solid var(--line-dk);max-width:880px;
  margin:0 auto}
.foot-v5 .f5-cols h5{font-family:var(--display);color:#fff;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.foot-v5 .f5-cols ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-v5 .f5-cols ul a{font-size:.92rem;color:#9c9485;transition:.15s}
.foot-v5 .f5-cols ul a:hover{color:var(--amber)}
.foot-v5 .f5-timeline{display:flex;align-items:center;justify-content:center;
  gap:20px;padding:36px 0 28px;max-width:680px;margin:0 auto}
.foot-v5 .f5-timeline .t-year{font-family:var(--display);font-weight:800;
  font-size:1.6rem;color:#cfc6b4;letter-spacing:-.02em}
.foot-v5 .f5-timeline .t-year.now{color:var(--amber);
  text-shadow:0 0 16px rgba(245,186,66,.5)}
.foot-v5 .f5-timeline .t-line{flex:1;height:1.5px;
  background:rgba(245,186,66,.16);max-width:140px;position:relative;
  overflow:hidden;border-radius:1px}
.foot-v5 .f5-timeline .t-line::before{content:"";position:absolute;
  top:0;left:-40%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,
    rgba(255,247,224,.55) 50%,transparent);
  box-shadow:0 0 5px 1px rgba(245,186,66,.35);
  opacity:0;animation:timeFlow 5s linear infinite}
.foot-v5 .f5-timeline .t-line ~ .t-line::before{animation-delay:2.5s}
@keyframes timeFlow{
  0%{left:-40%;opacity:0}4%{opacity:1}
  36%{left:105%;opacity:1}40%{opacity:0}100%{left:105%;opacity:0}
}
.foot-v5 .f5-timeline .t-mid{font-family:var(--display);font-size:.84rem;
  letter-spacing:.12em;text-transform:uppercase;color:#9c9485;
  white-space:nowrap}
.foot-v5 .f5-bar{display:flex;justify-content:space-between;padding:22px 26px;
  max-width:var(--max);margin:0 auto;font-size:.81rem;flex-wrap:wrap;gap:12px;
  color:#7a7160}
.foot-v5 .f5-bar a{color:#9c9485}
.foot-v5 .f5-bar a:hover{color:var(--amber)}
.foot-v5 .f5-bar .legal{display:flex;gap:20px}

/* === WHATSAPP BOMBILLA === */
.wsbulb{position:fixed;right:28px;bottom:28px;z-index:9999;display:flex;
  align-items:center;cursor:pointer}
/* Cuando el cookie banner GDPR Moove esta visible, subir la bombilla
   para que no quede tapada (banner ocupa ~63px bottom) */
body.moove-gdpr-cookies-shown .wsbulb,
body.moove-gdpr-shown .wsbulb{bottom:96px}
.wsbulb .label{font-family:var(--display);font-weight:600;font-size:.9rem;
  color:var(--ink);background:#fff;border:1px solid var(--line);
  padding:12px 6px 12px 20px;border-radius:100px 0 0 100px;max-width:0;
  overflow:hidden;white-space:nowrap;opacity:0;transition:.34s var(--ease);
  box-shadow:0 12px 30px -12px rgba(21,19,15,.4);display:flex;
  align-items:center;gap:8px}
.wsbulb:hover .label{max-width:240px;opacity:1;padding-right:22px}
.wsbulb .label .wa{width:17px;height:17px;fill:#25d366;flex:none}
.wsbulb .bulbwrap{position:relative;width:74px;height:74px;flex:none;
  display:grid;place-items:center}
.wsbulb .bulbwrap::before{content:"";position:absolute;inset:6px;
  border-radius:50%;background:radial-gradient(circle,
    rgba(245,186,66,.7),transparent 70%);opacity:0;
  transition:.34s var(--ease)}
.wsbulb:hover .bulbwrap::before{opacity:1}
.wsbulb svg.bulb{width:54px;height:54px;position:relative;z-index:2;
  overflow:visible}
.wsbulb .glass{fill:#2c2820;stroke:#4a4336;stroke-width:1.5;
  transition:.34s var(--ease)}
.wsbulb .base{fill:#5b5446}
.wsbulb .wire{stroke:#4a4336;stroke-width:1.7;fill:none;transition:.34s}
.wsbulb .filament{stroke:#6f6757;stroke-width:2.2;fill:none;
  stroke-linecap:round;transition:.34s var(--ease);
  animation:wsFilamentBlink 5s ease-in-out infinite}
@keyframes wsFilamentBlink{
  0%,86%{stroke:#6f6757;stroke-width:2.2;filter:none}
  88%{stroke:#fff3d4;stroke-width:2.4;
    filter:drop-shadow(0 0 3px var(--amber))}
  90%{stroke:#6f6757;stroke-width:2.2;filter:none}
  93%{stroke:#fff3d4;stroke-width:2.6;
    filter:drop-shadow(0 0 4px var(--amber)) drop-shadow(0 0 9px var(--amber))}
  96%{stroke:#6f6757;stroke-width:2.2;filter:none}
  100%{stroke:#6f6757;stroke-width:2.2;filter:none}
}
.wsbulb:hover .glass{fill:rgba(245,186,66,.32);stroke:var(--amber)}
.wsbulb:hover .wire{stroke:var(--amber)}
.wsbulb:hover .filament{stroke:#fff3d4;stroke-width:2.6;
  filter:drop-shadow(0 0 3px var(--amber)) drop-shadow(0 0 7px var(--amber))}
.wsbulb:hover svg.bulb{filter:drop-shadow(0 0 14px rgba(245,186,66,.8))}

/* === ADJUNTOS REUTILIZABLES === */
.section-head{text-align:center;margin-bottom:46px;max-width:660px;
  margin-inline:auto}
.section-head h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:800;
  letter-spacing:-.02em;margin:14px 0}
.section-head h2 em{font-style:normal;color:var(--amber)}
.section-head h2 em.kaushan{font-family:'Kaushan Script',cursive;
  font-weight:400;letter-spacing:0}
.section-head .sub{font-size:1.04rem;color:var(--text)}

/* === RESPONSIVE BASE === */
@media(max-width:1040px){nav.main,.topbar{display:none}}

/* Hover amber en menu nav (Sprint 4 feedback MA C.9) */
.nav-item > a:hover,
header nav a:hover{color:var(--amber)!important}

/* === MOBILE NAV — hamburguesa (QA 2026-05-30) === */
.nav-burger{display:none}
@media(max-width:1040px){
  .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:12px;
    background:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
  .nav-burger span{display:block;width:20px;height:2px;margin:0 auto;background:var(--ink);
    border-radius:2px;transition:.25s var(--ease)}
  header.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.nav-open .nav-burger span:nth-child(2){opacity:0}
  header.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.nav-open nav.main{display:block;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 30px 60px -28px rgba(21,19,15,.4);
    max-height:calc(100vh - 100%);overflow-y:auto;padding:8px 0 18px;z-index:65}
  header.nav-open nav.main .nav-item{position:static}
  header.nav-open nav.main .nav-item>a{padding:14px 26px;font-size:1.05rem;
    border-bottom:1px solid var(--line)}
  header.nav-open nav.main .nav-item>a .chev{display:none}
  header.nav-open nav.main .mega{position:static;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;display:block;box-shadow:none;border:0;border-radius:0;
    padding:4px 26px 16px;width:auto;gap:0}
  header.nav-open nav.main .mega-3col,
  header.nav-open nav.main .mcol{width:auto}
  body.nav-lock{overflow:hidden}
}
@media(max-width:1040px){
  .head-act .ctc{display:none}
  .head-act{gap:12px}
}