:root{
  --bg: #fff2f8;
  --card: rgba(255, 255, 255, 0.80);
  --text: #2a2230;
  --muted: #6a5f6f;

  --pink-50: #ffeaf4;
  --pink-100: #ffd2e6;
  --pink-200: #ffb1d4;
  --pink-300: #ff8fbe;
  --pink-400: #ff64a6;

  --lav-200: #eadfff;
  --gold-200: #ffe6b1;

  --stroke: rgba(60, 36, 60, 0.12);
  --shadow: 0 18px 50px rgba(40, 20, 40, 0.14);
  --shadow-soft: 0 10px 30px rgba(40, 20, 40, 0.10);

  --radius: 22px;
  --radius-lg: 30px;

  --topbar-h: 78px;

  /* MÁS GRANDE */
  --fs-base: 20px;
  --fs-h1: clamp(44px, 4.3vw, 68px);
  --fs-h2: clamp(30px, 3.1vw, 48px);
  --fs-h3: 24px;
  --lh: 1.72;

  /* MÁS ANCHO */
  --container: 1240px;

  /* Tema global (Eras / mood) */
  --bg1: rgba(255, 143, 190, 0.42);
  --bg2: rgba(255, 210, 230, 0.58);
  --bg3: rgba(255, 234, 244, 0.98);
  --bg4: rgba(234, 223, 255, 0.42);

  --accent-strong: rgba(255,100,166,0.95);
  --accent-soft: rgba(255,177,212,0.86);
  --accent-border: rgba(255, 100, 166, 0.22);
  --accent-outline: rgba(255,100,166,0.35);

  --tint-surface: rgba(255, 177, 212, 0.28);
  --tint-border: rgba(255, 100, 166, 0.20);
  --highlight-a: rgba(255, 100, 166, 0.32);
  --highlight-b: rgba(234, 223, 255, 0.45);

  --era-panel-bg: linear-gradient(135deg, rgba(255,177,212,0.24), rgba(234,223,255,0.24));
  --flag-a: rgba(255,100,166,0.75);
  --flag-b: rgba(234,223,255,0.65);
}


body[data-era="rose"]{
  --bg: #fff2f8;
  --bg1: rgba(255, 143, 190, 0.50);
  --bg2: rgba(255, 210, 230, 0.66);
  --bg3: rgba(255, 234, 244, 0.98);
  --bg4: rgba(234, 223, 255, 0.52);

  --card: rgba(255,255,255,0.82);
  --text: #2a2230;
  --muted: #6a5f6f;
  --stroke: rgba(60, 36, 60, 0.12);

  --accent-strong: rgba(255,100,166,0.96);
  --accent-soft: rgba(255,177,212,0.92);
  --accent-border: rgba(255, 100, 166, 0.24);
  --accent-outline: rgba(255,100,166,0.38);

  --tint-surface: rgba(255, 177, 212, 0.30);
  --tint-border: rgba(255, 100, 166, 0.22);
  --highlight-a: rgba(255, 100, 166, 0.34);
  --highlight-b: rgba(234, 223, 255, 0.52);

  --era-panel-bg: linear-gradient(135deg, rgba(255,177,212,0.28), rgba(234,223,255,0.30));
  --flag-a: rgba(255,100,166,0.80);
  --flag-b: rgba(234,223,255,0.70);

  --pattern: radial-gradient(circle at 12px 12px, rgba(255,100,166,0.11) 0 2px, transparent 2px 18px);
  --pattern-opacity: 0.10;
}

body[data-era="lover"]{
  --bg: #fff0f7;
  --bg1: rgba(255, 105, 180, 0.54);
  --bg2: rgba(255, 210, 230, 0.70);
  --bg3: rgba(255, 240, 247, 1);
  --bg4: rgba(173, 216, 230, 0.48);

  --card: rgba(255,255,255,0.84);
  --text: #2a2230;
  --muted: #6a5f6f;

  --accent-strong: rgba(255, 64, 156, 0.98);
  --accent-soft: rgba(255, 177, 212, 0.95);
  --accent-border: rgba(255, 64, 156, 0.26);
  --accent-outline: rgba(255, 64, 156, 0.38);

  --tint-surface: rgba(255, 177, 212, 0.32);
  --tint-border: rgba(255, 64, 156, 0.22);

  --era-panel-bg: linear-gradient(135deg, rgba(255,177,212,0.36), rgba(173,216,230,0.34));
  --flag-a: rgba(255,64,156,0.80);
  --flag-b: rgba(173,216,230,0.70);

  --pattern: radial-gradient(circle at 14px 14px, rgba(255,64,156,0.12) 0 2px, transparent 2px 20px),
             radial-gradient(circle at 26px 26px, rgba(173,216,230,0.10) 0 2px, transparent 2px 22px);
  --pattern-opacity: 0.10;
}

body[data-era="fearless"]{
  --bg: #fff6e6;
  --bg1: rgba(255, 211, 123, 0.62);
  --bg2: rgba(255, 177, 212, 0.34);
  --bg3: rgba(255, 246, 230, 1);
  --bg4: rgba(234, 223, 255, 0.30);

  --card: rgba(255,255,255,0.84);
  --text: #2a2230;
  --muted: #6b5a50;

  --accent-strong: rgba(255, 170, 60, 0.96);
  --accent-soft: rgba(255, 230, 177, 0.96);
  --accent-border: rgba(255, 170, 60, 0.26);
  --accent-outline: rgba(255, 170, 60, 0.34);

  --tint-surface: rgba(255, 230, 177, 0.38);
  --tint-border: rgba(255, 170, 60, 0.22);

  --era-panel-bg: linear-gradient(135deg, rgba(255,230,177,0.48), rgba(255,177,212,0.22));
  --flag-a: rgba(255,170,60,0.78);
  --flag-b: rgba(255,177,212,0.58);

  --pattern: repeating-linear-gradient(45deg, rgba(255,170,60,0.10) 0 2px, transparent 2px 10px);
  --pattern-opacity: 0.08;
}

body[data-era="speaknow"]{
  --bg: #f6efff;
  --bg1: rgba(167, 132, 255, 0.62);
  --bg2: rgba(234, 223, 255, 0.78);
  --bg3: rgba(246, 239, 255, 1);
  --bg4: rgba(255, 177, 212, 0.26);

  --card: rgba(255,255,255,0.83);
  --text: #2a2230;
  --muted: #6a5f6f;

  --accent-strong: rgba(132, 86, 255, 0.96);
  --accent-soft: rgba(234, 223, 255, 0.98);
  --accent-border: rgba(132, 86, 255, 0.24);
  --accent-outline: rgba(132, 86, 255, 0.34);

  --tint-surface: rgba(234, 223, 255, 0.42);
  --tint-border: rgba(132, 86, 255, 0.20);

  --era-panel-bg: linear-gradient(135deg, rgba(234,223,255,0.60), rgba(255,177,212,0.20));
  --flag-a: rgba(132,86,255,0.78);
  --flag-b: rgba(255,177,212,0.52);

  --pattern: radial-gradient(circle at 10px 10px, rgba(132,86,255,0.12) 0 2px, transparent 2px 18px);
  --pattern-opacity: 0.09;
}

body[data-era="red"]{
  --bg: #fff1f3;
  --bg1: rgba(255, 90, 120, 0.58);
  --bg2: rgba(255, 177, 212, 0.40);
  --bg3: rgba(255, 241, 243, 1);
  --bg4: rgba(255, 230, 177, 0.30);

  --card: rgba(255,255,255,0.84);
  --text: #2a2230;
  --muted: #6b4d58;

  --accent-strong: rgba(230, 50, 90, 0.96);
  --accent-soft: rgba(255, 177, 212, 0.94);
  --accent-border: rgba(230, 50, 90, 0.24);
  --accent-outline: rgba(230, 50, 90, 0.34);

  --tint-surface: rgba(255, 177, 212, 0.28);
  --tint-border: rgba(230, 50, 90, 0.22);

  --era-panel-bg: linear-gradient(135deg, rgba(230,50,90,0.18), rgba(255,177,212,0.36));
  --flag-a: rgba(230,50,90,0.78);
  --flag-b: rgba(255,177,212,0.65);

  --pattern: repeating-linear-gradient(135deg, rgba(230,50,90,0.10) 0 3px, transparent 3px 12px);
  --pattern-opacity: 0.08;
}

body[data-era="nineteen89"]{
  --bg: #eef7ff;
  --bg1: rgba(120, 200, 255, 0.54);
  --bg2: rgba(173, 216, 230, 0.56);
  --bg3: rgba(238, 247, 255, 1);
  --bg4: rgba(255, 177, 212, 0.20);

  --card: rgba(255,255,255,0.82);
  --text: #1f2a33;
  --muted: #51616e;

  --accent-strong: rgba(70, 160, 220, 0.96);
  --accent-soft: rgba(173, 216, 230, 0.92);
  --accent-border: rgba(70, 160, 220, 0.22);
  --accent-outline: rgba(70, 160, 220, 0.32);

  --tint-surface: rgba(173, 216, 230, 0.32);
  --tint-border: rgba(70, 160, 220, 0.22);

  --era-panel-bg: linear-gradient(135deg, rgba(173,216,230,0.42), rgba(255,255,255,0.24));
  --flag-a: rgba(70,160,220,0.72);
  --flag-b: rgba(255,177,212,0.48);

  --pattern: radial-gradient(circle at 16px 16px, rgba(70,160,220,0.10) 0 2px, transparent 2px 22px);
  --pattern-opacity: 0.08;
}

body[data-era="reputation"]{
  --bg: #121216;
  --bg1: rgba(10, 10, 12, 0.86);
  --bg2: rgba(110, 110, 125, 0.22);
  --bg3: rgba(18, 18, 22, 1);
  --bg4: rgba(255, 177, 212, 0.10);

  --card: rgba(22, 22, 28, 0.82);
  --text: #f4f1f6;
  --muted: rgba(244, 241, 246, 0.75);
  --stroke: rgba(255,255,255,0.14);

  --accent-strong: rgba(245, 245, 245, 0.92);
  --accent-soft: rgba(160, 160, 170, 0.62);
  --accent-border: rgba(255,255,255,0.18);
  --accent-outline: rgba(255,255,255,0.26);

  --tint-surface: rgba(255, 255, 255, 0.10);
  --tint-border: rgba(255, 255, 255, 0.18);

  --era-panel-bg: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(160,160,170,0.12));
  --flag-a: rgba(255,255,255,0.72);
  --flag-b: rgba(160,160,170,0.52);

  --pattern: repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 10px);
  --pattern-opacity: 0.10;
}

body[data-era="folklore"]{
  --bg: #f3f0ea;
  --bg1: rgba(200, 196, 186, 0.58);
  --bg2: rgba(234, 223, 255, 0.24);
  --bg3: rgba(243, 240, 234, 1);
  --bg4: rgba(255, 230, 177, 0.20);

  --card: rgba(255,255,255,0.78);
  --text: #2b2b2f;
  --muted: #64606a;

  --accent-strong: rgba(88, 88, 98, 0.92);
  --accent-soft: rgba(200, 196, 186, 0.80);
  --accent-border: rgba(88, 88, 98, 0.18);
  --accent-outline: rgba(88, 88, 98, 0.22);

  --tint-surface: rgba(200, 196, 186, 0.32);
  --tint-border: rgba(88, 88, 98, 0.18);

  --era-panel-bg: linear-gradient(135deg, rgba(200,196,186,0.52), rgba(255,255,255,0.20));
  --flag-a: rgba(88,88,98,0.68);
  --flag-b: rgba(200,196,186,0.62);

  --pattern: radial-gradient(circle at 10px 10px, rgba(88,88,98,0.08) 0 2px, transparent 2px 18px);
  --pattern-opacity: 0.08;
}

body[data-era="evermore"]{
  --bg: #fff3ea;
  --bg1: rgba(196, 122, 85, 0.45);
  --bg2: rgba(255, 230, 177, 0.42);
  --bg3: rgba(255, 243, 234, 1);
  --bg4: rgba(234, 223, 255, 0.20);

  --card: rgba(255,255,255,0.82);
  --text: #2a2230;
  --muted: #6b5550;

  --accent-strong: rgba(196, 122, 85, 0.96);
  --accent-soft: rgba(255, 230, 177, 0.92);
  --accent-border: rgba(196, 122, 85, 0.22);
  --accent-outline: rgba(196, 122, 85, 0.30);

  --tint-surface: rgba(255, 230, 177, 0.30);
  --tint-border: rgba(196, 122, 85, 0.20);

  --era-panel-bg: linear-gradient(135deg, rgba(196,122,85,0.18), rgba(255,230,177,0.40));
  --flag-a: rgba(196,122,85,0.74);
  --flag-b: rgba(255,230,177,0.66);

  --pattern: repeating-linear-gradient(135deg, rgba(196,122,85,0.08) 0 3px, transparent 3px 14px);
  --pattern-opacity: 0.08;
}

body[data-era="midnights"]{
  --bg: #eef0ff;
  --bg1: rgba(42, 56, 140, 0.34);
  --bg2: rgba(110, 80, 160, 0.30);
  --bg3: rgba(238, 240, 255, 1);
  --bg4: rgba(255, 177, 212, 0.20);

  --card: rgba(255,255,255,0.80);
  --text: #1b1c28;
  --muted: #51536b;

  --accent-strong: rgba(42, 56, 140, 0.96);
  --accent-soft: rgba(234, 223, 255, 0.86);
  --accent-border: rgba(42, 56, 140, 0.22);
  --accent-outline: rgba(42, 56, 140, 0.30);

  --tint-surface: rgba(234, 223, 255, 0.38);
  --tint-border: rgba(42, 56, 140, 0.18);

  --era-panel-bg: linear-gradient(135deg, rgba(42,56,140,0.16), rgba(234,223,255,0.42));
  --flag-a: rgba(42,56,140,0.74);
  --flag-b: rgba(234,223,255,0.66);

  --pattern: radial-gradient(circle at 16px 10px, rgba(42,56,140,0.10) 0 2px, transparent 2px 22px);
  --pattern-opacity: 0.09;
}

body[data-era="ttpd"]{
  --bg: #f4efe7;
  --bg1: rgba(40, 35, 30, 0.24);
  --bg2: rgba(200, 196, 186, 0.52);
  --bg3: rgba(244, 239, 231, 1);
  --bg4: rgba(255, 230, 177, 0.18);

  --card: rgba(255,255,255,0.78);
  --text: #272321;
  --muted: #6a625c;

  --accent-strong: rgba(39, 35, 33, 0.92);
  --accent-soft: rgba(200, 196, 186, 0.78);
  --accent-border: rgba(39, 35, 33, 0.16);
  --accent-outline: rgba(39, 35, 33, 0.22);

  --tint-surface: rgba(200, 196, 186, 0.34);
  --tint-border: rgba(39, 35, 33, 0.16);

  --era-panel-bg: linear-gradient(135deg, rgba(39,35,33,0.08), rgba(200,196,186,0.44));
  --flag-a: rgba(39,35,33,0.72);
  --flag-b: rgba(200,196,186,0.72);

  --pattern: repeating-linear-gradient(0deg, rgba(39,35,33,0.06) 0 1px, transparent 1px 8px);
  --pattern-opacity: 0.09;
}

body[data-era="debut"]{
  --bg: #f0fff8;
  --bg1: rgba(64, 193, 155, 0.50);
  --bg2: rgba(168, 232, 210, 0.62);
  --bg3: rgba(240, 255, 248, 1);
  --bg4: rgba(255, 177, 212, 0.18);

  --card: rgba(255,255,255,0.84);
  --text: #1f2a33;
  --muted: #4f616b;

  --accent-strong: rgba(64, 193, 155, 0.95);
  --accent-soft: rgba(168, 232, 210, 0.92);
  --accent-border: rgba(64, 193, 155, 0.22);
  --accent-outline: rgba(64, 193, 155, 0.30);

  --tint-surface: rgba(168, 232, 210, 0.36);
  --tint-border: rgba(64, 193, 155, 0.20);

  --era-panel-bg: linear-gradient(135deg, rgba(168,232,210,0.52), rgba(255,177,212,0.18));
  --flag-a: rgba(64,193,155,0.74);
  --flag-b: rgba(255,177,212,0.48);

  --pattern: radial-gradient(circle at 12px 12px, rgba(64,193,155,0.10) 0 2px, transparent 2px 18px);
  --pattern-opacity: 0.08;
}

/* Keeps compatibility with older keys from the first version */
body[data-era="lavender"]{ --bg: #f7f3ff; --bg1: rgba(234, 223, 255, 0.70); --bg2: rgba(255, 177, 212, 0.30); --bg3: rgba(245, 238, 255, 1); --bg4: rgba(255, 234, 244, 0.38);
  --accent-strong: rgba(132, 86, 255, 0.88); --accent-soft: rgba(234,223,255,0.96); --card: rgba(255,255,255,0.82); --era-panel-bg: linear-gradient(135deg, rgba(234,223,255,0.52), rgba(255,177,212,0.22));
}
body[data-era="gold"]{ --bg: #fff6eb; --bg1: rgba(255, 230, 177, 0.70); --bg2: rgba(255, 177, 212, 0.34); --bg3: rgba(255, 246, 235, 1); --bg4: rgba(234, 223, 255, 0.28);
  --accent-strong: rgba(255, 170, 60, 0.88); --accent-soft: rgba(255,230,177,0.96); --card: rgba(255,255,255,0.82); --era-panel-bg: linear-gradient(135deg, rgba(255,230,177,0.52), rgba(255,177,212,0.20));
}



*{box-sizing:border-box}
html,body{height:100%}
html{scroll-padding-top: calc(var(--topbar-h) + 16px);}
body{
  margin:0;
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--text);
  position: relative;
  z-index: 0;
  padding-top: var(--topbar-h);
  background: var(--bg);
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 10% 0%, var(--bg1), transparent 60%),
    radial-gradient(1200px 700px at 90% 10%, var(--bg2), transparent 58%),
    radial-gradient(900px 600px at 50% 100%, var(--bg3), transparent 60%),
    radial-gradient(900px 500px at 20% 80%, var(--bg4), transparent 60%),
    var(--bg);
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--pattern, none);
  opacity: var(--pattern-opacity, 0.10);
  mix-blend-mode: multiply;
}


/* =========================
   Eras (cambian el mood de TODA la página)
   ========================= */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.hidden{display:none !important}

/* Scroll interno para listas largas */
.scrollbox{
  max-height: clamp(260px, 36vh, 560px);
  overflow: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.scrollbox::-webkit-scrollbar{width: 10px}
.scrollbox::-webkit-scrollbar-thumb{
  background: rgba(60,36,60,0.18);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.65);
}
.scrollbox::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.36);
  border-radius: 999px;
}

.era-row::-webkit-scrollbar{width: 10px}
.era-row::-webkit-scrollbar-thumb{
  background: rgba(60,36,60,0.18);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.65);
}
.era-row::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
}


.muted{color: var(--muted)}
.lead{font-size: 1.12rem; color: var(--muted); margin: 14px 0 0}

.section{
  padding: 96px 0;
}
.section.soft{
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.68) 12%, rgba(255,255,255,0) 100%);
}
.section-head{
  margin-bottom: 30px;
}
.section-head h2{
  font-family: "Fraunces", serif;
  font-size: var(--fs-h2);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.section-head p{margin: 0}

/* Overlay inicio */
.start-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 700px at 30% 20%, rgba(255, 143, 190, 0.60), rgba(255,255,255,0) 60%),
    radial-gradient(900px 700px at 70% 70%, rgba(234, 223, 255, 0.60), rgba(255,255,255,0) 55%),
    rgba(255, 242, 248, 0.92);
  backdrop-filter: blur(10px);
}
.start-card{
  width: min(760px, 100%);
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px;
}
.start-card h1{
  font-family: "Fraunces", serif;
  font-size: clamp(32px, 3.2vw, 46px);
  margin: 12px 0 12px;
}
.badge{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--tint-surface);
  border: 1px solid var(--accent-border);
  font-weight: 900;
  color: rgba(60,36,60,0.85);
}
.start-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Topbar */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 242, 248, 0.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
}
.brand{display:flex; align-items:center; gap: 10px}
.brand-mark{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: var(--tint-surface);
  border: 1px solid var(--accent-border);
  font-size: 20px;
}
.brand-text{
  font-family: "Fraunces", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.06rem;
}
.nav{display:flex; gap: 18px; align-items:center}
.nav a{
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
}
.nav a:hover{
  background: rgba(255, 177, 212, 0.26);
  color: var(--text);
}
.nav-toggle{
  display:none;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}
.mobile-nav{
  display:none;
  padding: 10px 0 14px;
  border-top: 1px solid var(--stroke);
}
.mobile-nav a{
  display:block;
  padding: 12px 0;
  color: var(--muted);
  font-weight: 900;
}
.mobile-nav a:hover{color: var(--text)}
@media (max-width: 1020px){
  .nav{display:none}
  .nav-toggle{display:block}
  .mobile-nav.show{display:block}
}

/* Buttons */
.btn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.66);
  padding: 13px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-soft);
  transition: transform .12s ease, background .12s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn.primary{
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-soft));
  border-color: var(--accent-border);
}
.btn.ghost{background: rgba(255,255,255,0.50)}
.btn.tiny{padding: 10px 13px; font-size: 0.95rem}

.input, .textarea, .select, .search{
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 13px 15px;
  font-size: 1rem;
  background: rgba(255,255,255,0.82);
  outline: none;
}
.textarea{min-height: 120px; resize: vertical}

/* Hero */
.hero{
  position: relative;
  padding: 96px 0 72px;
  overflow: hidden;
}
.hero-bg{
  position:absolute;
  inset:-140px -140px auto -140px;
  height: 560px;
  background:
    radial-gradient(900px 540px at 20% 30%, rgba(255, 143, 190, 0.60), transparent 60%),
    radial-gradient(900px 540px at 80% 0%, rgba(234, 223, 255, 0.58), transparent 55%),
    radial-gradient(650px 460px at 55% 80%, rgba(255, 230, 177, 0.48), transparent 60%);
  filter: blur(10px);
  animation: floaty 9s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(14px)}
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 1020px){
  .hero-inner{grid-template-columns: 1fr; gap: 18px}
}

.pill{
  display:inline-flex;
  padding: 11px 15px;
  border-radius: 999px;
  background: var(--tint-surface);
  border: 1px solid var(--tint-border);
  color: var(--muted);
  font-weight: 900;
}

.hero-title{
  font-family: "Fraunces", serif;
  font-size: var(--fs-h1);
  margin: 16px 0 14px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.hero-title .accent{
  background: linear-gradient(120deg, var(--highlight-a), var(--highlight-b));
  padding: 0 12px;
  border-radius: 18px;
  border: 1px solid rgba(60,36,60,0.12);
}
.hero-subtitle{
  margin: 0;
  color: var(--muted);
  font-size: 1.12rem;
  font-weight: 700;
}

.hero-cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.quote-card{
  margin-top: 22px;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-soft);
}
.quote-top{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
}
.quote-label{font-weight: 900}
.quote-text{
  font-family: "Fraunces", serif;
  font-size: 1.42rem;
  margin: 12px 0 12px;
}
.quote-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 900;
}
.dot{opacity: .55}

.hero-right{
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.hero-polaroid{
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
}
.polaroid-frame{
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 177, 212, 0.28), rgba(234, 223, 255, 0.26));
  border: 1px solid rgba(255, 100, 166, 0.14);
  padding: 14px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.polaroid-img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
}
.polaroid-caption{
  margin-top: 12px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.cap-title{
  font-family: "Fraunces", serif;
  font-weight: 600;
}
.cap-sub{
  color: var(--muted);
  font-weight: 900;
}

.mini-stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px){
  .mini-stats{grid-template-columns: 1fr}
}
.stat{
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px 16px 14px;
}
.stat-k{
  display:block;
  font-family: "Fraunces", serif;
  font-size: 2.0rem;
}
.stat-l{
  color: var(--muted);
  font-weight: 900;
}

.hero-bottom-wave{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 76px;
  background: radial-gradient(900px 90px at 50% 0%, rgba(255, 177, 212, 0.42), transparent 60%);
  border-top: 1px solid rgba(60,36,60,0.08);
}

/* Love note */
.love-note{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}
.love-note p{
  margin: 0;
  font-size: 1.10rem;
}
.signature{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 18px;
}
.sig-line{
  height: 1px;
  flex: 1;
  background: rgba(60, 36, 60, 0.2);
}
.sig-name{
  font-weight: 900;
  color: rgba(60,36,60,0.8);
}

/* Next event */
.next-event{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 20px 18px;
  margin: 18px 0 24px;
}
@media (max-width: 720px){
  .next-event{flex-direction: column; align-items: flex-start}
}
.next-event h3{
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
}
.next-event p{margin: 6px 0 0}

/* Timers */
.timer{
  display:flex;
  gap: 8px;
  align-items:center;
  font-weight: 900;
  color: rgba(60,36,60,0.9);
}
.timer.big{
  font-family: "Fraunces", serif;
  font-size: clamp(24px, 3vw, 38px);
}
.timer .t{
  display:inline-flex;
  min-width: 2ch;
  justify-content: center;
  padding: 10px 12px;
  background: var(--tint-surface);
  border: 1px solid rgba(255, 100, 166, 0.18);
  border-radius: 16px;
}
.timer .sep{opacity: .58}

/* Timeline */
.timeline{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1060px){
  .timeline{grid-template-columns: 1fr 1fr}
}
@media (max-width: 680px){
  .timeline{grid-template-columns: 1fr}
}
.tl-card{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  position: relative;
  overflow:hidden;
  display: flex;
  flex-direction: column;
}
.tl-card:before{
  content:"";
  position:absolute;
  inset: -40px -40px auto -40px;
  height: 170px;
  background: radial-gradient(260px 160px at 20% 50%, rgba(255, 177, 212, 0.42), transparent 60%),
              radial-gradient(260px 160px at 80% 20%, rgba(234, 223, 255, 0.38), transparent 60%);
  filter: blur(2px);
}
.tl-top{
  position: relative;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.tl-top h3{
  margin:0;
  font-family: "Fraunces", serif;
  font-size: 1.28rem;
}
.chip{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 177, 212, 0.26);
  border: 1px solid rgba(60,36,60,0.12);
  color: rgba(60,36,60,0.85);
  font-weight: 900;
  font-size: 0.95rem;
}
.tl-desc{
  position: relative;
  margin: 12px 0 12px;
  color: var(--muted);
  font-weight: 700;
}
.tl-timer{
  position: relative;
  justify-content: flex-start;
}

.tl-timer-container{
  margin-top: auto;
}

/* Gallery */
.gallery-toolbar{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tabs{display:flex; gap: 10px}
.tabs.small .tab{padding: 9px 12px; font-size: 0.95rem}
.tab{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.68);
  padding: 11px 15px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 900;
  color: var(--muted);
}
.tab.active{
  background: rgba(255, 177, 212, 0.30);
  color: var(--text);
}
.gallery-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.search{width: min(420px, 100%)}
.select{width: 180px}

.carousel{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;
}
.car-stage{
  border-radius: 20px;
  overflow: hidden;
  min-height: 460px;
  border: 1px solid rgba(60,36,60,0.1);
  background: linear-gradient(135deg, rgba(255,177,212,0.24), rgba(234,223,255,0.22));
  position: relative;
}
.car-photo{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 12px;
  padding: 16px;
}
@media (max-width: 920px){
  .car-photo{grid-template-columns: 1fr; min-height: 560px}
}
.car-img{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.60);
  cursor: pointer;
}
.car-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}
.car-side{display:flex; flex-direction: column; gap: 10px}
.car-title{
  font-family: "Fraunces", serif;
  font-size: 1.55rem;
  margin: 0;
}
.car-meta{display:flex; gap: 8px; flex-wrap: wrap}
.car-desc{
  color: var(--muted);
  margin: 0;
  font-weight: 700;
}
.car-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 18px;
  width: 48px;
  height: 52px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.78);
  box-shadow: var(--shadow-soft);
  cursor:pointer;
  font-size: 30px;
  display:grid;
  place-items:center;
}
.car-btn.prev{left: 10px}
.car-btn.next{right: 10px}
.thumbs{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding-top: 12px;
}
.thumb{
  flex: 0 0 auto;
  width: 90px;
  height: 70px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(60,36,60,0.12);
  cursor:pointer;
  opacity: .88;
}
.thumb.active{outline: 3px solid var(--accent-outline); opacity: 1}
.thumb img{width:100%; height:100%; object-fit:cover}

.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px){ .grid{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 720px){ .grid{grid-template-columns: repeat(2, 1fr)} }
.grid-item{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  cursor:pointer;
}
.grid-item img{
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.grid-item .gi{padding: 12px 14px 14px}
.grid-item .gi h4{
  margin: 0 0 8px;
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
}
.grid-item .gi p{margin: 0; color: var(--muted); font-size: 1.0rem; font-weight: 700}

/* Dreams */
.dreams-layout{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
}
@media (max-width: 980px){ .dreams-layout{grid-template-columns: 1fr} }
.dream-form{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .dream-form{grid-template-columns: 1fr}
}
.dreams-list{
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.dream-item{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.70);
}
.dream-item .t{
  font-weight: 900;
  font-size: 1.04rem;
}
.dream-item .p{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}
.dream-actions{display:flex; gap: 8px; align-items:center}
.icon-btn{
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.66);
  border-radius: 14px;
  padding: 9px 10px;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
.vision-box{
  margin-top: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(60,36,60,0.12);
  background: linear-gradient(135deg, rgba(255,177,212,0.26), rgba(234,223,255,0.22));
}
.vision-title{
  font-family: "Fraunces", serif;
  font-size: 1.4rem;
}
.vision-text{
  margin: 10px 0 0;
  color: rgba(60,36,60,0.82);
  font-weight: 800;
}
.vision-tags{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Story */
.story-layout{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
}
@media (max-width: 980px){ .story-layout{grid-template-columns: 1fr} }
.story-top h3{margin: 0 0 6px; font-family: "Fraunces", serif}
.story-top p{margin:0}
.story-accordion{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.story-item{
  border-radius: 20px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.72);
  overflow:hidden;
  flex: 0 0 auto;
}
.story-btn{
  width:100%;
  text-align:left;
  padding: 14px 14px;
  border:0;
  background: transparent;
  cursor:pointer;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:center;
}
.story-btn .ttl{
  font-weight: 900;
  font-size: 1.06rem;
}
.story-btn .ico{
  font-size: 20px;
  opacity: 0.8;
}
.story-body{
  padding: 0 14px 14px;
  color: var(--muted);
  font-weight: 700;
}
.story-body p{margin: 10px 0 0}
.story-polaroid{
  border-radius: 22px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.74);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.story-polaroid img{
  width:100%;
  height: 320px;
  object-fit: cover;
}
.story-caption{
  padding: 14px;
}
.story-cap-title{
  font-family: "Fraunces", serif;
  font-size: 1.28rem;
}

/* Reasons */
.reasons-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){ .reasons-layout{grid-template-columns: 1fr} }
.reasons-form{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.reasons-form .input{flex: 1; min-width: 280px}
.reasons-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.reasons-list-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
}
.reasons-list{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.reason-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.70);
}
.reason-row .txt{
  font-weight: 800;
  color: rgba(60,36,60,0.84);
}
.reason-row .muted{font-weight: 800}

/* Map */
.map-wrap{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
}
@media (max-width: 980px){
  .map-wrap{grid-template-columns: 1fr}
}
.map-illustration{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 540px;
  position: relative;
  overflow:hidden;
}
.map-card{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.map-card-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.map-card h3{margin:0; font-family: "Fraunces", serif}
.map-card-media{
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(60,36,60,0.12);
  background: linear-gradient(135deg, rgba(255,177,212,0.22), rgba(234,223,255,0.22));
  position: relative;
  min-height: 280px;
}
.map-card-media img{
  width: 100%;
  height: 280px;
  object-fit: cover;
  display:none;
}
.map-card-ph{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  text-align:center;
  padding: 18px;
}
.ph-heart{font-size: 44px; margin-bottom: 6px}
.ph-text{font-weight: 900}
.map-card-text{margin: 0}

/* Mailbox */
.mailbox-area{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 14px;
}
@media (max-width: 980px){
  .mailbox-area{grid-template-columns: 1fr}
}
.mailbox, .letter-reader, .card, .game-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card h3, .game-head h3, .mailbox-top h3, .reader-head h3{
  margin: 0 0 8px;
  font-family: "Fraunces", serif;
}
.mailbox-top{
  display:flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-left: 12px;
}
.mailbox-top p{margin: 0}
.mail-flag{
  position:absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 44px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--flag-a), var(--flag-b));
}

.envelope-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.envelope{
  border: 1px solid rgba(60,36,60,0.12);
  border-radius: 20px;
  background: rgba(255,255,255,0.74);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.envelope:hover{transform: translateY(-1px)}
.env-left{display:flex; gap: 12px; align-items: center}
.env-icon{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: var(--tint-surface);
  border: 1px solid rgba(60,36,60,0.12);
  font-size: 22px;
}
.env-title{font-weight: 900; margin: 0}
.env-sub{margin: 0; color: var(--muted); font-weight: 800; font-size: 1.0rem}
.env-right{display:flex; align-items:center; gap: 10px}

.reader-head{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.reader-head p{margin: 6px 0 0}

.letter-shell{
  margin-top: 14px;
  position: relative;
  min-height: 440px;
}
.letter-paper{
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.80));
  border: 1px solid rgba(60,36,60,0.12);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  padding: 20px;
  min-height: 440px;
  position: relative;
  overflow:hidden;
}
.letter-paper:before{
  content:"";
  position:absolute;
  inset:-30px -30px auto -30px;
  height: 150px;
  background: radial-gradient(260px 140px at 20% 50%, rgba(255,177,212,0.34), transparent 60%),
              radial-gradient(260px 140px at 80% 20%, rgba(234,223,255,0.30), transparent 60%);
  filter: blur(2px);
}
.letter-content{
  position: relative;
  font-size: 1.08rem;
}
.letter-content h4{
  font-family: "Fraunces", serif;
  margin: 0 0 12px;
}
.letter-content p{margin: 0 0 14px}
.letter-lock{
  position:absolute;
  inset:0;
  padding: 24px;
  display:grid;
  place-items:center;
  text-align:center;
  background: rgba(255, 242, 248, 0.74);
  backdrop-filter: blur(10px);
}
.lock-icon{font-size: 38px}
.unlock-row{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.reader-foot{margin-top: 10px}
.hint{padding: 10px 12px; font-weight: 800}

/* Animación sobre */
.envelope-anim{
  position:absolute;
  right: 14px;
  bottom: 14px;
  width: 160px;
  height: 118px;
  pointer-events: none;
  opacity: 0.96;
}
.env{position:absolute; inset:0; border-radius: 18px}
.env-back{
  background: var(--tint-surface);
  border: 1px solid var(--tint-border);
}
.env-front{
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(60,36,60,0.12);
  clip-path: polygon(0 35%, 50% 68%, 100% 35%, 100% 100%, 0 100%);
}
.env-flap{
  background: rgba(234,223,255,0.52);
  border: 1px solid rgba(60,36,60,0.12);
  clip-path: polygon(0 35%, 50% 0%, 100% 35%, 50% 70%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform .6s ease;
}
.env-letter{
  inset: 14px 16px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(60,36,60,0.12);
  transform: translateY(22px);
  transition: transform .6s ease;
}
.envelope-anim.open .env-flap{transform: rotateX(160deg)}
.envelope-anim.open .env-letter{transform: translateY(-6px)}

/* Playlist */
.playlist-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
}
@media (max-width: 980px){ .playlist-grid{grid-template-columns: 1fr} }
.controls{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.volume{margin-top: 14px}
.mini-card{
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  border: 1px dashed rgba(60,36,60,0.18);
  background: rgba(255,255,255,0.62);
}
.mini-title{font-weight: 900; margin-bottom: 6px}

.player-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.player-body{margin-top: 12px}
.piano-player{
  border-radius: 22px;
  border: 1px solid rgba(60,36,60,0.12);
  background: linear-gradient(135deg, rgba(255,177,212,0.18), rgba(234,223,255,0.18));
  padding: 16px;
}
.piano-head{display:flex; flex-direction: column; gap: 6px}
.piano-title{
  font-family: "Fraunces", serif;
  font-size: 1.35rem;
}
.piano-controls{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Extras */
.extras-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 1200px){ .extras-grid{grid-template-columns: 1fr 1fr} }
@media (max-width: 720px){ .extras-grid{grid-template-columns: 1fr} }

.big-quote{
  margin-top: 12px;
  font-family: "Fraunces", serif;
  font-size: 1.45rem;
}
.fortune{
  margin-top: 12px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: rgba(255, 177, 212, 0.20);
  border: 1px solid rgba(60,36,60,0.12);
  font-weight: 900;
}
.guest-list{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.guest-item{
  border-radius: 20px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.70);
  padding: 12px;
}
.guest-item .g-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 900;
}
.guest-item p{margin: 8px 0 0; color: var(--muted); font-weight: 800}

.era-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  max-height: 170px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.chip-btn{
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 11px 13px;
  background: rgba(255,255,255,0.58);
  cursor:pointer;
  font-weight: 900;
}
.era-scroll{
  /*
    IMPORTANT:
    Este contenedor debe:
    - acomodar 2–3 botones por fila
    - mostrar ~2.5 filas visibles
    - mantener scroll VERTICAL (sin crecer hacia la derecha)
  */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  /* ~2.5 filas visibles (se ajusta muy bien con el tamaño actual de botones) */
  max-height: 162px;
  padding-right: 6px;
  padding-bottom: 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
@media (max-width: 620px){
  .era-scroll{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.era-scroll .chip-btn{
  width: 100%;
  text-align: center;
  white-space: normal;
}
/* scrollbar vertical */
.era-scroll::-webkit-scrollbar{width: 10px}
.era-scroll::-webkit-scrollbar-thumb{
  background: rgba(60,36,60,0.18);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.65);
}
.era-scroll::-webkit-scrollbar-track{background: rgba(255,255,255,0.22); border-radius: 999px}
.era-panel{
  margin-top: 12px;
  border-radius: 24px;
  padding: 16px;
  border: 1px solid rgba(60,36,60,0.12);
  background: var(--era-panel-bg);
}
.era-title{font-family: "Fraunces", serif; font-size: 1.35rem}

/* Games */
.games-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){ .games-layout{grid-template-columns: 1fr} }
.game-head p{margin:0; font-weight: 700; color: var(--muted)}
.game-actions{
  margin-top: 12px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.memory-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 520px){ .memory-grid{grid-template-columns: repeat(3, 1fr)} }
.mem-card{
  border-radius: 20px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.68);
  box-shadow: var(--shadow-soft);
  height: 92px;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 30px;
  user-select:none;
  position: relative;
  overflow:hidden;
}
.mem-card:before{
  content:"";
  position:absolute;
  inset:-30px;
  background: radial-gradient(160px 90px at 30% 20%, rgba(255,177,212,0.22), transparent 60%),
              radial-gradient(160px 90px at 70% 80%, rgba(234,223,255,0.22), transparent 60%);
  filter: blur(1px);
}
.mem-card span{position: relative}
.mem-card.revealed{background: rgba(255, 177, 212, 0.18)}
.mem-card.matched{
  background: rgba(234,223,255,0.22);
  border-color: rgba(234,223,255,0.55);
}

.quiz{margin-top: 12px}
.quiz-q{
  font-family: "Fraunces", serif;
  font-size: 1.42rem;
}
.quiz-opts{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.quiz-opts button{text-align:left; width: 100%}
.quiz-foot{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
  margin-top: 12px;
}
.quiz-result{
  margin-top: 12px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255, 230, 177, 0.24);
  font-weight: 900;
}

/* More games */
.more-games{
  display:grid;
  grid-template-columns: 2fr 2fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){ .more-games{grid-template-columns: 1fr} }

.garden{
  margin-top: 12px;
  border-radius: 24px;
  border: 1px solid rgba(60,36,60,0.12);
  background: linear-gradient(135deg, rgba(255,177,212,0.16), rgba(234,223,255,0.16));
  min-height: 240px;
  position: relative;
  overflow:hidden;
  cursor: pointer;
}
.tulip{
  position:absolute;
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  font-size: 28px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 18px rgba(40, 20, 40, 0.12));
  animation: pop .35s ease;
}
@keyframes pop{
  0%{transform: translate(-50%, -50%) scale(0.65); opacity: 0.25}
  100%{transform: translate(-50%, -50%) scale(1); opacity: 1}
}
.garden-actions{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
}

.todo-add{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.todo-add .input{flex: 1; min-width: 260px}
.todo-list{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.todo-item{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.70);
}
.todo-left{display:flex; gap: 10px; align-items:center}
.todo-item input{width: 18px; height: 18px}
.todo-item .txt{font-weight: 900; color: rgba(60,36,60,0.85)}
.todo-item.done .txt{text-decoration: line-through; color: var(--muted)}
.todo-del{
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.70);
  border-radius: 14px;
  padding: 8px 10px;
  cursor:pointer;
}

/* Anagram + hearts */
.anagram-word{
  margin-top: 10px;
  font-family: "Fraunces", serif;
  font-size: 1.7rem;
  letter-spacing: 0.08em;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255, 177, 212, 0.18);
}
.anagram-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.anagram-row .input{flex: 1; min-width: 260px}

.hearts-arena{
  margin-top: 12px;
  border-radius: 24px;
  border: 1px solid rgba(60,36,60,0.12);
  background: linear-gradient(135deg, rgba(255,177,212,0.18), rgba(234,223,255,0.18));
  min-height: 240px;
  position: relative;
  overflow:hidden;
}
.heart-pop{
  position:absolute;
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  font-size: 28px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  user-select:none;
  filter: drop-shadow(0 10px 18px rgba(40, 20, 40, 0.14));
  animation: heartIn .18s ease;
}
@keyframes heartIn{
  0%{transform: translate(-50%, -50%) scale(0.7); opacity: 0.3}
  100%{transform: translate(-50%, -50%) scale(1); opacity: 1}
}
.hearts-foot{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

/* Final */
.final-card{
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  text-align:center;
}
.final-card h2{
  font-family: "Fraunces", serif;
  font-size: clamp(30px, 3vw, 48px);
  margin: 0 0 12px;
}
.final-actions{
  display:flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.footer{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:center;
  margin-top: 18px;
}
.hearts{opacity:.62}

/* Polaroid viewer */
.polaroid-viewer{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display:grid;
  place-items:center;
  padding: 24px;
}
.pv-backdrop{
  position:absolute;
  inset:0;
  background: rgba(20, 10, 20, 0.34);
  backdrop-filter: blur(12px);
}
.pv-card{
  position: relative;
  width: min(980px, 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.80);
  box-shadow: var(--shadow);
  padding: 18px;
}
.pv-close{
  position:absolute;
  top: 12px;
  right: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.78);
  border-radius: 16px;
  width: 46px;
  height: 46px;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
.pv-polaroid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
}
@media (max-width: 860px){ .pv-polaroid{grid-template-columns: 1fr} }
.pv-photo{
  border-radius: 20px;
  border: 12px solid rgba(255,255,255,0.90);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  background: rgba(255,255,255,0.72);
}
.pv-photo img{
  width: 100%;
  height: 520px;
  object-fit: cover;
}
@media (max-width: 860px){ .pv-photo img{height: 380px} }
.pv-caption{
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(60,36,60,0.12);
  background: rgba(255,255,255,0.66);
}
.pv-title{font-family: "Fraunces", serif; font-size: 1.55rem}
.pv-meta{margin-top: 6px; color: var(--muted); font-weight: 900}
.pv-desc{margin-top: 12px; color: rgba(60,36,60,0.82); font-weight: 800}

/* Music FAB */
.music-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 177, 212, 0.48);
  padding: 13px 15px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.music-icon{
  width: 36px;
  height: 36px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(60,36,60,0.12);
  font-weight: 900;
}
.music-text{font-weight: 900; color: rgba(60,36,60,0.88)}


/* Eras globales */
.chip-btn.active{
  background: var(--tint-surface);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-soft);
}


#envelopeGrid.scrollbox{max-height: clamp(320px, 46vh, 720px)}
#dreamList.scrollbox{max-height: clamp(280px, 38vh, 620px)}
#reasonsList.scrollbox{max-height: clamp(280px, 38vh, 620px)}
#todoList.scrollbox{max-height: clamp(240px, 32vh, 520px)}
#letterContent.scrollbox{max-height: clamp(320px, 42vh, 680px)}


/* Story accordion: alto fijo grande para que los capítulos se abran cómodos y el scroll sea “tarde” */
.story-layout{align-items: stretch;}
.story-card{display:flex; flex-direction: column;}
.story-accordion.scrollbox{
  height: clamp(380px, 56vh, 860px);
  max-height: none;
  overflow: auto;
  padding-right: 10px;
}
@media (max-width: 980px){
  .story-accordion.scrollbox{
    height: clamp(320px, 44vh, 620px);
  }
}