/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --ink:#0A0806; --panel:rgba(24,18,12,.72);
  --line:rgba(242,172,94,.15); --line-soft:rgba(242,172,94,.07);
  --cream:#F8F1E7; --muted:#AA9985;

  --oro:#EDA945; --oro-luz:#FFE7BE; --oro-med:#D9942F; --oro-hondo:#A6631F;

  /* color llamativo por mundo (se define abajo) */
  --vivo:#FF8A3D; --vivo-luz:#FFC48A;

  --display:'Bricolage Grotesque','Trebuchet MS',sans-serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono','SFMono-Regular',Consolas,monospace;

  --r-lg:24px; --r-md:16px;
  --max:1240px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --tap:46px;
}
body[data-mundo="dulce"]{ --vivo:#FF8A3D; --vivo-luz:#FFC48A; --glow-a:rgba(255,138,61,.20); --glow-b:rgba(242,172,94,.18) }
body[data-mundo="pelu"]{  --vivo:#E28BA8; --vivo-luz:#F6C9D8; --glow-a:rgba(226,139,168,.18); --glow-b:rgba(242,172,94,.20) }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--ink); color:var(--cream); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}

/* ---------- FONDO ---------- */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none}
.bg__grid{position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, rgba(242,172,94,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,172,94,.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(242,172,94,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,172,94,.028) 1px, transparent 1px);
  background-size:88px 88px,88px 88px,22px 22px,22px 22px;
  mask-image:radial-gradient(ellipse 130% 90% at 50% 16%, #000 30%, transparent 92%);
  -webkit-mask-image:radial-gradient(ellipse 130% 90% at 50% 16%, #000 30%, transparent 92%)}
.bg__glow{position:absolute; inset:0; transition:background 1s var(--ease);
  background:
    radial-gradient(780px 540px at 82% 4%, var(--glow-a), transparent 70%),
    radial-gradient(660px 500px at 8% 46%, var(--glow-b), transparent 72%),
    radial-gradient(900px 700px at 50% 112%, rgba(242,172,94,.06), transparent 70%)}
.bg__vig{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, transparent 36%, rgba(4,3,2,.9) 100%)}

.wrap{width:min(100% - 32px, var(--max)); margin-inline:auto; position:relative; z-index:2}
section{padding:72px 0; position:relative; z-index:2}

h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.04; letter-spacing:-.03em; margin:0}
h1{font-size:clamp(2.2rem,8vw,4.4rem)}
h2{font-size:clamp(1.6rem,5vw,2.85rem); letter-spacing:-.035em}
h3{font-size:clamp(1.08rem,3.4vw,1.35rem); letter-spacing:-.02em}
p{margin:0}
a{color:inherit}

.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); display:inline-flex; align-items:center; gap:.6rem}
.eyebrow::before{content:''; width:22px; height:1px; background:currentColor; opacity:.6}
.lede{color:var(--muted); font-size:clamp(.97rem,2.6vw,1.1rem); max-width:62ch}
.oro{color:var(--oro)}