/* ============================================================
   LA NIÑA DE LA CASA DE MADERA
   8 esquemas = 4 estaciones x (día | noche)
   ============================================================ */

/* ---------- Variables base (no cambian por tema) ---------- */
:root{
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ink: var(--text);
  --max: 40rem;            /* ancho de lectura tipo libro */
  --radius: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 18px 50px -20px var(--shadow-color);
}

/* ============================================================
   8 ESQUEMAS DE COLOR
   ============================================================ */

/* ---- PRIMAVERA · DÍA (default) ---- */
[data-theme="spring-day"]{
  --bg-1:#eef6ea; --bg-2:#d9ecd2; --bg-3:#f6efe1;
  --text:#33463a; --text-soft:#5c715f;
  --accent:#c2638a; --accent-2:#7fae8a;
  --card:#fffdf8; --line:rgba(60,90,60,.14);
  --shadow-color:rgba(120,90,60,.35);
  --astro:radial-gradient(circle at 35% 30%, #fff6d8, #ffd76b 55%, transparent 70%);
  --particle:186,120,160; /* pétalos */
}

/* ---- PRIMAVERA · NOCHE ---- */
[data-theme="spring-night"]{
  --bg-1:#1b2740; --bg-2:#16203a; --bg-3:#241a33;
  --text:#e9ecf6; --text-soft:#aab3cf;
  --accent:#e79bc0; --accent-2:#9fb4e6;
  --card:#202a44; --line:rgba(200,210,255,.14);
  --shadow-color:rgba(0,0,0,.55);
  --astro:radial-gradient(circle at 35% 32%, #fbf7ff, #dcd7ef 55%, transparent 70%);
  --particle:231,155,192; /* luciérnagas rosas */
}

/* ---- VERANO · DÍA ---- */
[data-theme="summer-day"]{
  --bg-1:#fff4d6; --bg-2:#ffe4a6; --bg-3:#cfeaf0;
  --text:#4a3a1e; --text-soft:#8a7245;
  --accent:#e07b39; --accent-2:#2f9e9b;
  --card:#fffdf5; --line:rgba(150,110,40,.16);
  --shadow-color:rgba(180,120,30,.32);
  --astro:radial-gradient(circle at 35% 30%, #fffdf0, #ffd23f 58%, transparent 72%);
  --particle:255,210,120; /* polen dorado */
}

/* ---- VERANO · NOCHE ---- */
[data-theme="summer-night"]{
  --bg-1:#0f1f3a; --bg-2:#10294a; --bg-3:#0a1830;
  --text:#eaf1ff; --text-soft:#9fb4d6;
  --accent:#ffcf6b; --accent-2:#5fb2c9;
  --card:#13294a; --line:rgba(150,190,255,.14);
  --shadow-color:rgba(0,0,0,.6);
  --astro:radial-gradient(circle at 35% 32%, #fffef2, #f4e9c9 55%, transparent 70%);
  --particle:255,207,107; /* luciérnagas doradas */
}

/* ---- OTOÑO · DÍA ---- */
[data-theme="autumn-day"]{
  --bg-1:#f4e7d3; --bg-2:#eccfa4; --bg-3:#e3b988;
  --text:#4a3320; --text-soft:#7c5a3a;
  --accent:#c1502e; --accent-2:#9a6b2f;
  --card:#fdf6ec; --line:rgba(120,70,30,.16);
  --shadow-color:rgba(120,70,20,.32);
  --astro:radial-gradient(circle at 35% 30%, #fff3d8, #f7b659 58%, transparent 72%);
  --particle:210,140,60; /* hojas naranjas */
}

/* ---- OTOÑO · NOCHE ---- */
[data-theme="autumn-night"]{
  --bg-1:#241a2b; --bg-2:#2c1f28; --bg-3:#1a1220;
  --text:#f0e6ea; --text-soft:#b39aa4;
  --accent:#e08a5a; --accent-2:#b97ea0;
  --card:#2b2030; --line:rgba(220,170,150,.14);
  --shadow-color:rgba(0,0,0,.6);
  --astro:radial-gradient(circle at 35% 32%, #f4ecff, #d9c4e2 55%, transparent 70%);
  --particle:224,138,90; /* luciérnagas ámbar */
}

/* ---- INVIERNO · DÍA ---- */
[data-theme="winter-day"]{
  --bg-1:#eef4f8; --bg-2:#dcebf3; --bg-3:#eef2f7;
  --text:#2c3a46; --text-soft:#5c7181;
  --accent:#3f7fa3; --accent-2:#8fb0c4;
  --card:#ffffff; --line:rgba(60,90,120,.15);
  --shadow-color:rgba(80,110,140,.28);
  --astro:radial-gradient(circle at 35% 30%, #ffffff, #cfe3f0 58%, transparent 72%);
  --particle:235,245,255; /* nieve */
}

/* ---- INVIERNO · NOCHE ---- */
[data-theme="winter-night"]{
  --bg-1:#0c1626; --bg-2:#0f1c30; --bg-3:#081018;
  --text:#e7eef7; --text-soft:#9db0c6;
  --accent:#8fc2ea; --accent-2:#c9b8e6;
  --card:#122036; --line:rgba(150,190,230,.14);
  --shadow-color:rgba(0,0,0,.6);
  --astro:radial-gradient(circle at 35% 32%, #f7fbff, #cfdcf0 55%, transparent 70%);
  --particle:220,240,255; /* nieve + estrellas */
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--serif);
  color:var(--text);
  line-height:1.75;
  background:
    radial-gradient(1200px 800px at 80% -10%, var(--bg-2), transparent 60%),
    linear-gradient(160deg, var(--bg-1), var(--bg-3));
  background-attachment:fixed;
  transition:background 1.1s var(--ease), color .6s var(--ease);
  overflow-x:hidden;
  min-height:100vh;
}

::selection{ background:var(--accent); color:var(--card); }

/* ---------- Canvas de partículas ---------- */
#particulas{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ---------- Astro (sol / luna) ---------- */
.astro{
  position:fixed;
  top:9vh; right:9vw;
  width:150px; height:150px;
  border-radius:50%;
  background:var(--astro);
  filter:drop-shadow(0 0 40px rgba(255,240,190,.35));
  z-index:0;
  transition:background 1.1s var(--ease), transform 1.1s var(--ease);
  animation:astroFloat 9s ease-in-out infinite;
}
@keyframes astroFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* ============================================================
   CONTROL DE CLIMA
   ============================================================ */
.clima{
  position:fixed; top:16px; right:16px; z-index:50;
  display:flex; align-items:center; gap:8px;
}
.clima button{
  font-family:var(--sans);
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  border-radius:999px;
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease), background .6s var(--ease);
}
.clima button:hover{ transform:translateY(-2px); }
.clima button:active{ transform:translateY(0); }
#clima-toggle{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; font-size:.78rem; letter-spacing:.02em;
}
.clima__icon{ font-size:1rem; }
.clima__name{ text-transform:capitalize; white-space:nowrap; }
#clima-auto{
  padding:8px 10px; font-size:.68rem; opacity:.85;
  text-transform:uppercase; letter-spacing:.12em;
}

/* ============================================================
   CONTENIDO
   ============================================================ */
.contenido{
  position:relative; z-index:5;
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(18px, 5vw, 40px) 90px;
}

/* ---------- HERO ---------- */
.hero{
  text-align:center;
  padding:clamp(80px,16vh,160px) 0 60px;
  animation:heroIn 1.4s var(--ease) both;
}
@keyframes heroIn{ from{opacity:0; transform:translateY(24px)} to{opacity:1;transform:none} }

.hero__kicker{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.72rem;
  color:var(--text-soft);
  margin:0 0 22px;
}
.hero__titulo{
  font-size:clamp(2.6rem, 9vw, 4.6rem);
  line-height:1.05;
  font-weight:600;
  margin:0 auto 22px;
  max-width:15ch;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.hero__titulo::after{
  content:"";
  display:block;
  width:64px; height:3px;
  margin:26px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.hero__lema{
  color:var(--text-soft);
  font-size:1.05rem;
  max-width:34ch;
  margin:0 auto 40px;
  font-style:italic;
}

.hero__autora{ margin:0 auto 46px; width:max-content; }
.hero__autora img{
  width:150px; height:150px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--card);
  box-shadow:var(--shadow);
  background:var(--card);
}
.hero__autora figcaption{
  margin-top:14px;
  font-family:var(--sans);
  font-size:.9rem;
  color:var(--text-soft);
  letter-spacing:.04em;
}
.hero__autora figcaption strong{ color:var(--text); font-weight:600; }

.hero__flecha{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--text-soft);
  font-family:var(--sans);
  font-size:.7rem; text-transform:uppercase; letter-spacing:.28em;
}
.hero__flecha-linea{
  width:1px; height:46px;
  background:linear-gradient(var(--accent), transparent);
  animation:desciende 2.2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes desciende{ 0%{transform:scaleY(0);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* ---------- ÍNDICE ---------- */
.indice{
  text-align:center;
  padding:30px 0 50px;
}
.indice__titulo{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.72rem;
  color:var(--text-soft);
  margin:0 0 24px;
}
.indice__lista{
  list-style:none;
  margin:0 auto; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  max-width:36rem;
}
.indice__lista a{
  font-family:var(--sans);
  font-size:.8rem;
  text-decoration:none;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--line);
  padding:8px 15px;
  border-radius:999px;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 6px 18px -12px var(--shadow-color);
  transition:transform .25s var(--ease), border-color .25s var(--ease), background .6s var(--ease);
}
.indice__lista a:hover{ transform:translateY(-3px); border-color:var(--accent); }
.indice__lista .num{
  color:var(--accent);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* ---------- LIBRO (relatos) ---------- */
.libro{ display:flex; flex-direction:column; gap:clamp(48px, 9vw, 90px); }

.relato{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(28px, 5vw, 52px) clamp(24px, 5vw, 54px);
  box-shadow:var(--shadow);
  position:relative;
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease),
             background .6s var(--ease), border-color .6s var(--ease);
}
.relato.en-pantalla{ opacity:1; transform:none; }

.relato::before{
  /* esquina decorativa */
  content:"❀";
  position:absolute;
  top:14px; right:20px;
  color:var(--accent);
  opacity:.45;
  font-size:1.1rem;
}
.relato__cabecera{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.relato__numero{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
.relato__titulo{
  font-size:clamp(1.5rem, 4.5vw, 2.05rem);
  font-weight:600;
  margin:0;
  line-height:1.2;
  letter-spacing:-.01em;
}
.relato__fecha{
  font-family:var(--sans);
  font-size:.8rem;
  color:var(--text-soft);
  letter-spacing:.04em;
  margin-top:2px;
}

/* Cuerpo del texto + efecto máquina de escribir */
.relato__cuerpo{
  font-size:1.06rem;
  min-height:1em;
}
.relato__cuerpo p{ margin:0 0 1.15em; }
.relato__cuerpo p:last-child{ margin-bottom:0; }

.cursor{
  display:inline-block;
  width:2px;
  height:1.05em;
  background:var(--accent);
  margin-left:2px;
  vertical-align:-0.12em;
  animation:parpadeo .95s step-end infinite;
}
@keyframes parpadeo{ 50%{opacity:0} }

/* firma al final */
.relato__firma{
  margin-top:26px;
  font-style:italic;
  color:var(--text-soft);
  font-size:.95rem;
  text-align:right;
}

/* ---------- PIE ---------- */
.pie{
  text-align:center;
  padding:70px 0 20px;
  color:var(--text-soft);
  font-size:.9rem;
}
.pie__ornamento{
  display:block;
  font-size:1.5rem;
  color:var(--accent);
  margin-bottom:16px;
}
.pie p{ margin:0; }

/* ============================================================
   ACCESIBILIDAD / RESPONSIVE / MOVIMIENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .relato{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}
@media (max-width:520px){
  .astro{ width:96px; height:96px; top:70px; right:12vw; }
  .clima__name{ display:none; }
  .clima{ top:12px; right:12px; }
}