:root {
  --warm: #ffa92d;
  --denim: #2f557f;
  --cyan: #31ffeb;
  --bg-light: #F5EFE0;
  --text: var(--denim);
}
body {
  margin: 0;
  font-family: 'Merriweather', serif;
  background: var(--bg-light);
  color: var(--text);
}
body.dark {
  background: #1A1A1A;
  color: #E2E2E2;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--warm);
  color: #fff;
  z-index: 1000;
}

/* Header */
.header { background: var(--denim); position: relative; padding: 1rem 0; }
.logo-img { position: absolute; left:1rem; top:50%; transform:translateY(-50%); height:50px; }
.header-center { text-align:center; }
.header-center h1, .header-center h2 { color:#fff; margin:0; }
.header-center h1 { font-family:'Poppins',sans-serif; font-size:2rem; }
.header-center h2 { font-family:'Poppins',sans-serif; font-size:1rem; }

/* Language switch */
.lang-switch { position:absolute; right:4rem; top:50%; transform:translateY(-50%); }
.lang-switch a { margin:0 0.25rem; font-size:1.5rem; text-decoration:none; }

/* Theme toggle */
.theme-toggle { position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:1.5rem; background:none; border:none; color:#fff; cursor:pointer; }

/* Hero */
.hero { position:relative; height:300px; background:url('../img/hero.jpg') center/cover no-repeat; }
.hero::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.hero-content { position:relative; color:#fff; text-align:center; top:50%; transform:translateY(-50%); }
.hero-content p { font-size:1.75rem; line-height:1.4; max-width:800px; margin:0 auto; padding:0 1rem; }

/* Hero por idioma (sobrescribe el hero genérico) */
html[lang="es"] .hero {
  background-image: url('../img/es-hero.jpg');
}

html[lang="en"] .hero {
  background-image: url('../img/en-hero.jpg');
}

html[lang="fr"] .hero {
  background-image: url('../img/fr-hero.jpg');
}

/* Progress */
.progress-container { text-align:center; padding:1rem; }
progress { width:80%; height:1.5rem; appearance:none; border-radius:.75rem; background:#ddd; }
progress::-webkit-progress-value { background:var(--warm); border-radius:.75rem; }

/* Cards */
.cards{
  margin: 1.5rem auto 2rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 1000px;
  padding: 0 1rem;
}
.card{
  position: relative;
  background: #fff;
  padding: 1rem;
  border: 2px solid var(--warm);
  border-radius: .5rem;
  text-decoration: none;
  color: var(--text);
}
.card.read { border-color:var(--denim); opacity:0.8; }
.card:hover { transform:translateY(-3px); }

/* Read toggle */
.card input.read-toggle { position:absolute; top:0.5rem; right:0.5rem; }

/* Buttons */
.btn { background:var(--warm); color:#fff; padding:.5rem 1rem; text-decoration:none; border-radius:.5rem; display:inline-block; }
.btn:hover { background:var(--cyan); }

/* Navigation container */
.nav-chapter { display:flex; justify-content:space-between; align-items:center; margin:2rem auto; max-width:900px; padding:0 1rem; }

/* Chapter layout: single column */
.chapter-wrapper { max-width:900px; margin:2rem auto; display:block; }
.chapter-text { background:#fff; padding:1.5rem; border-radius:.5rem; }
.chapter-text .intro { font-weight:bold; margin-bottom:1rem; }

/* Reflection */
.reflection { max-width:900px; margin:2rem auto; padding:0 1rem; }
.reflection label { display:block; font-weight:600; margin-bottom:.5rem; }
.reflection textarea { width:100%; min-height:150px; padding:1rem; font-size:1rem; line-height:1.5; border:1px solid #ccc; border-radius:.5rem; box-sizing:border-box; }

/* Footer */
.footer { text-align:center; padding:1rem; background:var(--denim); color:#fff; }

/* Responsive */
@media(max-width:600px){
  .skip-link { position:static; width:auto; height:auto; }
  .logo-img, .theme-toggle, .lang-switch { position:static; transform:none; display:block; margin:.5rem auto; }
  .hero { height:200px; }
  .cards, .progress-container, .nav-chapter { padding:0 1rem; }
  .chapter-wrapper { margin:1rem auto; }
}

/* Mejora de tipografía en capítulos */
.chapter-text {
  max-width: 700px;        /* ancho de lectura óptimo */
  margin: 0 auto;          /* centrar */
  font-size: 1.125rem;     /* ≈18px */
  line-height: 1.6;        /* espacio entre líneas */
}

/* Si usas lista numerada */
.chapter-text ol {
  list-style-position: inside;
  padding-left: 0;
  margin: 0;
}

.chapter-text li {
  margin-bottom: 0.75rem;  /* espacio entre versos */
}

/* Párrafos de introducción y contenido */
.chapter-text p {
  margin-bottom: 1rem;
}

/* Opcional: fuente sans-serif para contenido */
.chapter-text {
  font-family: 'Poppins', sans-serif;
}

/* === Dark-mode: asegurar contraste en capítulos === */
body.dark .chapter-text {
  background-color: #2A2A2A;    /* fondo oscuro para capítulo */
  color: #E2E2E2;               /* texto claro sobre fondo oscuro */
}

/* si usas <ol> o <li> */
body.dark .chapter-text ol,
body.dark .chapter-text li,
body.dark .chapter-text p {
  color: #E2E2E2;
}

/* Encabezado de capítulo */
body.dark .chapter-text h2 {
  color: #FFFFFF;
}

/* Mismo override para el textarea de reflexión, si quieres */
body.dark .reflection textarea {
  background-color: #1F1F1F;
  color: #E2E2E2;
  border-color: #444;
}

/* —————————————— */
/* Ajustes Mobile (max-width: 600px) */
/* —————————————— */
@media (max-width: 600px) {
  /* 1) Ocultamos el link “Saltar al contenido” */
  .skip-link {
    display: none !important;
  }

  /* 2) Hero: quepa y no desborde */
  .hero {
    height: auto;
    padding: 2rem 1rem;
  }
  .hero-content p {
    font-size: 1.25rem;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 1rem;
    word-break: break-word;
    line-height: 1.4;
  }

  /* 3) Centrar las banderas debajo del header */
  .lang-switch {
    position: static !important;
    transform: none !important;
    display: block !important;
    margin: 0.5rem auto !important;
    text-align: center;
  }
}

@media (max-width: 600px) {
  /* Hero con altura automática y overflow oculto */
  .hero {
    height: auto;        /* deja crecer según contenido */
    padding: 2rem 1rem;  /* mantén el espacio */
    overflow: hidden;    /* previene que sobresalga */
  }

  /* Hero-content deja de posicionarse en 50% */
  .hero-content {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto;
  }

  /* Ajuste extra de tamaño para que no quede tan grande */
  .hero-content p {
    font-size: 1.125rem;  /* un poco más pequeño si prefieres */
    max-width: 90%;
  }
}

@media (max-width: 600px) {
  .progress-container {
    margin-top: 1rem;
  }
}

/* ——————— Bloque de descarga de PDFs ——————— */
.download-pdfs {
  text-align: center;
  margin: 1.5rem auto;
  max-width: 800px;
  padding: 0 1rem;
}
.download-pdfs h3 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  color: var(--denim);
}

/* Contenedor de botones en línea */
.download-buttons {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Estilo de cada botón */
.btn-download {
  background: var(--denim);
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  display: inline-block;
}
.btn-download:hover {
  background: var(--warm);
}

/* Ajustes móviles */
@media (max-width: 600px) {
  .download-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* —————— Estilo personalizado para la barra de progreso —————— */
progress {
  width: 80%;
  height: 1.5rem;
  appearance: none;
  background: #ddd;
  border-radius: .75rem;
  overflow: hidden; /* para que el value no sobresalga */
}

/* WebKit (Chrome, Safari) */
progress::-webkit-progress-bar {
  background: #ddd;
  border-radius: .75rem;
}

progress::-webkit-progress-value {
  background: var(--denim);
  border-radius: .75rem;
}

/* Firefox */
progress::-moz-progress-bar {
  background: var(--denim);
  border-radius: .75rem;
}

/* Hero base */
.hero {
  min-height: 360px;                 /* o 420px si tu composición lo necesita */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;            /* que cubra sin deformar */
}

/* Imagen por idioma */
html[lang="es"] .hero { background-image: url('../img/es-hero.jpg'); }
html[lang="en"] .hero { background-image: url('../img/en-hero.jpg'); }
html[lang="fr"] .hero { background-image: url('../img/fr-hero.jpg'); }

/* Versión retina (si subes @2x) */
@media (min-resolution: 2dppx), (min-device-pixel-ratio: 2) {
  html[lang="es"] .hero { background-image: url('../img/es-hero@2x.jpg'); }
  html[lang="en"] .hero { background-image: url('../img/en-hero@2x.jpg'); }
  html[lang="fr"] .hero { background-image: url('../img/fr-hero@2x.jpg'); }
}

/* Ajuste móvil (que no corte demasiado) */
@media (max-width: 600px) {
  .hero { min-height: 220px; }  /* puedes subir a 260–300 si tu diseño lo requiere */
}

/* Hero como imagen responsiva (sin recortes) */
.hero-img-wrap {
  margin: 0;                /* sin espacios extra arriba/abajo */
  line-height: 0;           /* evita “grietas” por líneas */
  background: var(--denim); /* color de fondo si hay bandas */
}
.hero-img {
  display: block;
  width: 100%;
  height: auto;             /* mantiene la proporción de la imagen */
}

/* Un poco de espacio antes de descargas y progreso */
.download-pdfs { margin-top: 1rem; }
.progress-container { margin-top: 1rem; }

/* ——— Header simplificado para las páginas de índice ——— */
body.index .logo-img {           /* Ocultamos el logo en el índice para no duplicar lo del hero */
  display: none !important;
}

.header {
  padding: .6rem 0;             /* más compacto */
}

.header-center h1.tagline-line1,
.header-center h2.tagline-line2 {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.header-center h1.tagline-line1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;           /* ajusta si lo quieres más grande */
  line-height: 1.2;
}

.header-center h2.tagline-line2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  opacity: .95;
}

/* Aseguramos que las banderas y el modo noche sigan a la derecha */
.lang-switch { right: 3rem; }   /* ya lo tienes; opcionalmente ajusta el margen */
.theme-toggle { right: .75rem; }

/* ——— Responsive ——— */
@media (max-width: 900px) {
  .header-center h1.tagline-line1 { font-size: 1rem; }
  .header-center h2.tagline-line2 { font-size: .85rem; }
}
@media (max-width: 600px) {
  .header { padding: .5rem 0; }
  .header-center h1.tagline-line1 { font-size: .95rem; }
  .header-center h2.tagline-line2 { font-size: .75rem; }
  /* mantenemos .lang-switch y .theme-toggle como los tienes centrados/stacked si aplicaste la regla móvil */
}

/* Bloque de idiomas bajo el hero */
.lang-inline{
  display:flex;
  gap:.75rem;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin: 1rem auto .75rem;
  padding: 0 .75rem;
}

.lang-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .65rem;
  border-radius:.5rem;
  text-decoration:none;
  background: rgba(47,85,127,.10);            /* tenue */
  color: var(--denim);
  font-weight:600;
}
.lang-link:hover{ background: rgba(47,85,127,.18); }
.lang-link.active{
  background: var(--denim);
  color:#fff;
}

.lang-link .flag{ font-size:1.15rem; line-height:1; }

/* Botón de modo noche en línea (reubicado) */
.theme-toggle-inline{
  border:none;
  padding:.35rem .6rem;
  border-radius:.5rem;
  background: var(--denim);
  color:#fff;
  cursor:pointer;
  font-size:1.1rem;
}
.theme-toggle-inline:hover{ background: var(--warm); }

/* Ajustes móviles */
@media (max-width: 600px){
  .lang-inline{ gap:.5rem; }
  .lang-link{ padding:.35rem .55rem; }
  .lang-link .flag{ font-size:1.1rem; }
}

/* Barra superior para volver al índice en capítulos */
.chapter-topbar{
  max-width: 900px;
  margin: .75rem auto 0;
  padding: 0 1rem;
  display: flex;
  justify-content: flex-start;
}
.chapter-topbar .btn{
  /* ya tienes .btn; esto asegura buen contraste en fondo claro/oscuro */
  background: var(--denim);
  color: #fff;
}
body.dark .chapter-topbar .btn{
  background: #345b86;
  color: #fff;
}

/* Centrar el botón respecto a la caja de lectura (.chapter-text) */
.chapter-topbar{
  max-width: 700px;      /* igual que .chapter-text */
  margin: .75rem auto 0; /* centra la barra */
  padding: 0 1rem;
  display: flex;
  justify-content: center; /* centra el botón dentro */
}

.chapter-topbar .btn{
  background: var(--denim);
  color: #fff;
}

body.dark .chapter-topbar .btn{
  background: #345b86;
  color: #fff;
}

/* ===== Lector paginado (2026) ===== */
.reader-viewport{margin-top:.5rem}
.reader-page{animation:readerFade .25s ease}
@keyframes readerFade{from{opacity:.6;transform:translateY(6px)}to{opacity:1;transform:none}}

.reader-controls{
  display:flex;justify-content:center;gap:.75rem;margin:1rem 0 .5rem;
}

.reader-progress{
  text-align:center;margin:.25rem 0 0;font-weight:600;
}
.reader-progress .track{
  width:min(520px,90%);height:12px;border-radius:999px;
  background:#e5e7eb;margin:.5rem auto 0;overflow:hidden;
}
.reader-progress .fill{
  height:100%;width:0%;
  background:var(--denim, #2f557f); /* usa tu azul institucional si existe; fallback #2f557f */
  transition:width .3s ease;
  border-radius:999px;
}

/* Modo oscuro */
body.dark .reader-progress .track{background:#333}
body.dark .reader-progress .fill{background:#6aa9ff}

/* ===== Countdown v4.1 (fondo blanco, números azules, borde amarillo + halo) ===== */
.countdown-wrap{
  display:flex;justify-content:center;margin:1rem auto 1.25rem;padding:0 1rem
}
.countdown{
  --cd-accent: var(--denim, #2f557f); /* azul institucional */
  --cd-warm:  var(--warm,  #ffa92d);  /* amarillo institucional */
  text-align:center;
}

/* Encabezado arriba de cajas */
.countdown-heading{
  margin:.1rem 0 .35rem;
  font-weight:700;
  color:var(--cd-accent);
  font-size:clamp(1rem,2.2vw,1.25rem);
}

.cd-grid{
  display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;align-items:stretch
}
.cd-box{
  background:#fff;                          /* fondo blanco */
  border:3px solid var(--cd-warm);          /* borde amarillo más grueso */
  border-radius:.75rem;
  padding:.6rem .75rem;min-width:92px;

  /* Halo suave en amarillo + sombra base */
  outline:2px solid rgba(255,169,45,.25);
  outline-offset:2px;
  box-shadow:0 8px 16px rgba(0,0,0,.06);
}
.cd-box:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}

.cd-value{
  color:var(--cd-accent);                   /* números azules */
  display:block;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;
  font-size:clamp(1.6rem,3vw,2.4rem)
}
.cd-label{
  color:var(--cd-accent);                   /* etiquetas azules */
  display:block;margin-top:.25rem;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase
}

.countdown-subtitle{
  margin-top:.75rem;font-weight:700;text-wrap:balance;
  font-size:clamp(1rem,2.4vw,1.35rem);
}

/* Separación extra bajo el hero */
.hero-img-wrap + .countdown-wrap{margin-top:1rem}

/* Modo oscuro */
body.dark .cd-box{
  background:#1f1f1f;
  border-color:var(--cd-warm);
  outline-color:rgba(255,169,45,.35);       /* halo un poco más visible en dark */
  box-shadow:0 10px 22px rgba(0,0,0,.40);
}
body.dark .cd-value,
body.dark .cd-label{ color:#9ec7ff }        /* azul claro para contraste */
body.dark .countdown-heading{ color:#E2E2E2 }