/* ============================================================
   DÍA DE MUERTOS MEXICANO EN MÁLAGA — Design tokens & styles
   Palette sampled from the official 2026 convocatoria poster.
   ============================================================ */

/* ---------- PALETTES (driven by data-palette + data-base) ---------- */
:root{
  /* folk-art accents (shared across palettes) */
  --marigold: #EE8A2D;   /* cempasúchil orange   */
  --amber:    #F2B12E;   /* gold / mustard       */
  --rosa:     #D63C77;   /* rosa mexicano        */
  --teal:     #18A294;   /* turquesa             */
  --morado:   #7A4BA6;   /* purple papel picado  */
  --chile:    #C8431C;   /* deep flower red      */

  --maxw: 1180px;
  --nav-h: 68px;

  /* type roles (overridden by data-font) */
  --font-display: "Anton", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --font-script: "Yeseva One", Georgia, serif;
  --display-tracking: 0.5px;

  /* ornamentation level (overridden by data-ornament) */
  --garland-display: block;
  --corner-display: block;
  --grain-opacity: 0.05;
}

/* DARK base ("Altar") — default, matches poster */
:root[data-base="dark"]{
  --bg:        #17110d;
  --bg-2:      #1f1711;
  --surface:   #271d16;
  --surface-2: #322419;
  --line:      #4a3826;
  --ink:       #F4E9D4;
  --ink-soft:  #cdbb9f;
  --ink-faint: #8c7a63;
  --hero-veil: linear-gradient(180deg, rgba(10,7,4,.35), rgba(10,7,4,.78));
  --candle-glow: rgba(242,177,46,.16);
}

/* LIGHT base ("Papel") */
:root[data-base="light"]{
  --bg:        #F6ECD8;
  --bg-2:      #efe2c9;
  --surface:   #fbf4e6;
  --surface-2: #f3e7cf;
  --line:      #e0cda8;
  --ink:       #2A1D14;
  --ink-soft:  #5c4631;
  --ink-faint: #9a8362;
  --hero-veil: linear-gradient(180deg, rgba(255,250,240,.25), rgba(246,236,216,.6));
  --candle-glow: rgba(238,138,45,.22);
}

/* Palette variants re-map which accent leads */
:root[data-palette="poster"]{ --lead:var(--marigold); --lead-2:var(--rosa); --lead-3:var(--teal); }
:root[data-palette="rosa"]{   --lead:var(--rosa);     --lead-2:var(--morado); --lead-3:var(--amber); }
:root[data-palette="teal"]{   --lead:var(--teal);     --lead-2:var(--marigold); --lead-3:var(--rosa); }
:root[data-palette="morado"]{ --lead:var(--morado);   --lead-2:var(--teal);   --lead-3:var(--amber); }

/* ---------- FONT PAIRINGS ---------- */
:root[data-font="cartel"]{ --font-display:"Anton",sans-serif; --font-body:"Mulish",sans-serif; --display-tracking:0.5px; }
:root[data-font="folclor"]{ --font-display:"Yeseva One",serif; --font-body:"Hanken Grotesk",sans-serif; --display-tracking:0px; }
:root[data-font="bloque"]{ --font-display:"Archivo Black",sans-serif; --font-body:"Work Sans",sans-serif; --display-tracking:-0.5px; }

/* ---------- ORNAMENT DENSITY ---------- */
:root[data-ornament="none"]{ --garland-display:none; --corner-display:none; --grain-opacity:0; }
:root[data-ornament="subtle"]{ --garland-display:block; --corner-display:none; --grain-opacity:0.04; }
:root[data-ornament="rich"]{ --garland-display:block; --corner-display:block; --grain-opacity:0.06; }

/* ---------- RESET / BASE ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* paper grain */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--font-display); font-weight:normal; line-height:0.98;
  letter-spacing:var(--display-tracking); margin:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- KICKER / EYEBROW ---------- */
.kicker{
  font-family:var(--font-body); font-weight:800;
  text-transform:uppercase; letter-spacing:.22em; font-size:.74rem;
  color:var(--lead); display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before,.kicker::after{
  content:""; width:26px; height:2px; background:currentColor; opacity:.5;
}
.kicker.solo::after{ display:none; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:800; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.85em 1.5em; border-radius:999px; cursor:pointer;
  border:2px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s;
}
.btn-primary{ background:var(--lead); color:#1a120b; box-shadow:0 8px 24px -10px var(--lead); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px var(--lead); }
.btn-ghost{ border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--lead); color:var(--lead); transform:translateY(-2px); }

/* ---------- SECTION SCAFFOLD ---------- */
.section{ position:relative; padding:96px 0; z-index:2; }
.section + .section{ border-top:1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.section-head{ max-width:680px; margin-bottom:54px; }
.section-head h2{ font-size:clamp(2.4rem,5.2vw,4rem); margin:.32em 0 .35em; text-transform:uppercase; }
.section-head p{ color:var(--ink-soft); font-size:1.08rem; margin:0; }

/* ---------- CHIP ICON (poster motif) ---------- */
.chip{
  width:54px; height:54px; border-radius:16px; flex:none;
  display:grid; place-items:center; color:#fff;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
}
.chip svg{ width:26px; height:26px; }
.chip.c1{ background:var(--morado); }
.chip.c2{ background:var(--marigold); }
.chip.c3{ background:var(--teal); }
.chip.c4{ background:var(--amber); }
.chip.c5{ background:var(--rosa); }
.chip.c6{ background:var(--chile); }

/* ---------- PAPEL PICADO GARLAND ---------- */
.garland{ display:var(--garland-display); width:100%; height:46px; position:relative; z-index:3; }
.garland svg{ width:100%; height:100%; display:block; }

/* corner marigold cluster */
.corner-flora{ display:var(--corner-display); position:absolute; width:150px; height:150px;
  opacity:.85; pointer-events:none; z-index:2; }
.corner-flora.tl{ top:0; left:0; }
.corner-flora.tr{ top:0; right:0; transform:scaleX(-1); }
.corner-flora.br{ bottom:0; right:0; transform:scale(-1); }
.corner-flora.bl{ bottom:0; left:0; transform:scaleY(-1); }

/* ---------- REVEAL ANIMATION ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }