/* ── Enciclopedia: sistema visual (I-3.5) ──
   Paleta de azules de profundidad + acento coral para acciones,
   reutilizando los tokens de :root ya definidos en styles.css. Este
   archivo se enlaza tanto desde index.html (SPA) como desde cada página
   HTML estática generada por tools/generate-encyclopedia-pages.mjs — el
   mismo CSS sirve a ambos, igual que el renderer (render.js). */

:root {
  --enc-deep-1: #0a1420;
  --enc-deep-2: #0f2036;
  --enc-deep-3: #163350;
  --enc-coral: #ff7a59;
  --enc-coral-dim: rgba(255, 122, 89, 0.14);
  --enc-placeholder-bg: #16202c;
  --enc-placeholder-border: #2a3c4e;
}

/* Modo claro (ver js/theme.js) — mismo criterio que styles.css: dark es la
   base, claro pisa por preferencia del SO o por el toggle manual. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --enc-deep-1: #eaf3f8;
    --enc-deep-2: #dcecf5;
    --enc-deep-3: #c7e0ef;
    --enc-coral: #d9552f;
    --enc-coral-dim: rgba(217, 85, 47, 0.12);
    --enc-placeholder-bg: #eef2f5;
    --enc-placeholder-border: #d7dee5;
  }
}
:root[data-theme="light"] {
  --enc-deep-1: #eaf3f8;
  --enc-deep-2: #dcecf5;
  --enc-deep-3: #c7e0ef;
  --enc-coral: #d9552f;
  --enc-coral-dim: rgba(217, 85, 47, 0.12);
  --enc-placeholder-bg: #eef2f5;
  --enc-placeholder-border: #d7dee5;
}

/* ── Home: cards de acción (Donate / Excursions movidos desde la nav) ── */
.home-action-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.action-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem 1.1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  transition: border-color var(--transition), transform var(--transition);
}
.action-card:hover { border-color: var(--enc-coral); }
.action-card:active { transform: scale(0.99); }
.action-card__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--enc-coral-dim);
  border-radius: var(--radius-sm);
  color: var(--enc-coral);
}
.action-card__body { flex: 1 1 auto; min-width: 0; }
.action-card__title { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.action-card__desc { font-size: 0.8rem; color: var(--text-soft); margin-top: 0.15rem; }

/* ── Placeholder de imagen (I-4) ── */
.enc-media { width: 100%; margin: 1rem 0; }
.enc-media__frame {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--enc-placeholder-bg);
  position: relative;
}
/* `contain`, nunca `cover` (2026-10-15): el marco ya lleva la proporción real del archivo,
   pero si algún día el JSON declara una distinta, `cover` recortaba la infografía (pasó con
   32: declaradas 4:5, archivos 9:16). Con `contain` un desajuste solo deja bandas del color del
   marco y nunca corta texto. Lo vigila tools/check-encyclopedia-media-fit.mjs. */
.enc-media__img { width: 100%; height: 100%; object-fit: contain; }
/* Tocar/clicar una imagen la abre en pantalla completa (lightbox, ver app.js). */
#encyclopedia-view .enc-media[data-status="ready"] .enc-media__img { cursor: zoom-in; }

/* Imágenes verticales: el marco ya lleva la proporción real (aspect-ratio inline),
   acá solo se limita el ancho para que no ocupen varias pantallas y se centran.
   3:4 y 4:5 -> 32rem; 9:16 -> 26rem (~740px de alto). Sin recorte: ratio = ratio del archivo.
   En las anotadas (marco + panel al costado) el tope va solo al marco, no a toda la figura. */
.enc-media--portrait:not(.enc-media--annotated) { max-width: 32rem; margin-inline: auto; }
.enc-media--tall:not(.enc-media--annotated) { max-width: 26rem; }
.enc-media--portrait.enc-media--annotated .enc-media__frame { max-width: 32rem; justify-self: center; }
.enc-media--tall.enc-media--annotated .enc-media__frame { max-width: 26rem; }
.enc-media--portrait .enc-media__caption { text-align: center; }
.enc-media__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  text-align: center;
  border: 1.5px dashed var(--enc-placeholder-border);
  border-radius: var(--radius-sm);
}
.enc-media__icon { font-size: 1.8rem; opacity: 0.85; }
.enc-media__placeholder-text {
  font-size: 0.82rem;
  color: var(--text-soft);
  max-width: 32ch;
  line-height: 1.4;
}
.enc-media__type-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.enc-media__caption {
  font-size: 0.78rem;
  color: var(--text-soft);
  margin-top: 0.4rem;
  padding: 0 0.15rem;
}

/* ── Figura anotada (explicación + labels) ──
   El texto NUNCA va horneado en la imagen: una sola imagen sirve a los 6
   idiomas (media.schema.json, content.explanation/content.labels). En
   mobile es una columna más bajo la imagen; desde 900px se sale del ancho
   de lectura (640px) para que la imagen no se achique — el contenedor
   padre (.enc-static-page / .enc-shell__content) tiene padding y margin
   simétricos, así que su 50% ya coincide con el centro de la página. */
.enc-media--annotated {
  display: grid;
  grid-template-areas: "frame" "caption" "aside";
  gap: 0.4rem 1.25rem;
}
.enc-media--annotated .enc-media__frame { grid-area: frame; }
.enc-media--annotated .enc-media__caption { grid-area: caption; }
/* Panel de texto bajo la imagen — MOBILE FIRST: una sola columna a ancho completo, tipografía legible sin zoom
   (≥ 0.95rem), todo apilado: rótulo "Explicación de la imagen", título en negrita con su texto sangrado debajo y luego
   cada número con su título en negrita y sus renglones, uno bajo otro. Desde 900px pasa a una columna lateral (más abajo). */
.enc-media__aside {
  grid-area: aside;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.9rem 0.95rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--enc-coral);
  border-radius: var(--radius-sm);
  overflow-wrap: normal;
}
/* Rótulo sutil: deja claro que el texto explica la imagen. */
.enc-media__aside-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.enc-media__explanation {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}
/* Título en negrita y, debajo, cada "punto aparte" en su renglón con sangría. */
.enc-media__title,
.enc-media__label-title {
  display: block;
  font-weight: 700;
  color: var(--text);
}
.enc-media__line {
  display: block;
  padding-left: 0.9rem;
  margin-top: 0.3rem;
}
.enc-media__labels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.enc-media__label {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  column-gap: 0.6rem;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.enc-media__label-text { min-width: 0; }
.enc-media__label-title { color: var(--text); }
.enc-media__label-num {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--enc-coral-dim);
  color: var(--enc-coral);
  font-size: 0.8rem;
  font-weight: 700;
}
/* Mientras la imagen sea un placeholder no hay ningún glifo impreso al que
   referirse todavía — se atenúa el número, sin ninguna rama nueva en JS. */
.enc-media[data-status="pending"] .enc-media__label-num { opacity: 0.45; }

@media (min-width: 900px) {
  .enc-media--annotated {
    --enc-media-wide: min(1040px, calc(100vw - 3rem));
    width: var(--enc-media-wide);
    margin-left: calc(50% - var(--enc-media-wide) / 2);
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    grid-template-areas:
      "frame   aside"
      "caption aside";
    /* El panel de texto es más alto que la imagen: el sobrante va a la 2.ª fila para que el pie de foto quede pegado a la imagen. */
    grid-template-rows: auto 1fr;
    align-items: start;
  }
}

/* ── Lector de artículo ──
   .enc-static-page es una página HTML standalone (generador estático, ver
   render.js) — necesita su propio padding lateral. .enc-article vive
   siempre dentro de .enc-shell__content, que ya aporta el padding lateral
   (ver más abajo) — separados para no duplicarlo. */
.enc-static-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
}
.enc-article {
  padding: 0 0 3rem;
}
.enc-article__header { margin-bottom: 0.5rem; text-align: center; }
/* Nivel + tiempo de lectura a la izquierda, Guardar a la derecha del todo
   (pedido explícito) — no centrado como el resto del header. */
.enc-article__badges {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: left;
}
.enc-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.enc-badge--level { background: var(--accent-dim); color: var(--accent); }
.enc-article__reading-time { font-size: 0.78rem; color: var(--muted); }
.enc-article__save-btn {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--accent);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
}
.enc-article__title { font-size: 1.7rem; font-weight: 800; line-height: 1.25; margin-bottom: 0.35rem; }
.enc-article__subtitle { color: var(--text-soft); font-size: 1rem; }
/* Títulos y botones centrados en toda la página de artículo (pedido
   explícito; .enc-article__title/subtitle ya centrados arriba) — el
   cuerpo (párrafos, listas, cards) queda alineado a la izquierda para que
   siga siendo legible. */
.enc-article__section h2,
.enc-article__section h3,
.enc-article__diving-application h2,
.enc-article__mistakes h2,
.enc-article__did-you-know h2,
.enc-article__key-takeaways h2,
.enc-article__next h2,
.enc-article__related h2 {
  text-align: center;
}
.enc-article button,
.enc-static-page button {
  text-align: center;
}

.enc-article__intro { margin: 1.25rem 0; }
.enc-article__hook { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.75rem; }
.enc-article__summary,
.enc-article__why { color: var(--text-soft); margin-top: 0.5rem; }

.enc-article__section { margin: 1.5rem 0; }
.enc-article__section h2 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.enc-article__section p { margin-bottom: 0.75rem; line-height: 1.55; }
.enc-article__section-intro { color: var(--text-soft); }
.enc-article__subsection { margin-top: 0.9rem; }
.enc-article__subsection h3 { font-size: 1rem; margin-bottom: 0.4rem; }

.enc-article__diving-application {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  background: var(--enc-deep-2);
  border-left: 3px solid var(--accent2);
  border-radius: var(--radius-sm);
}
.enc-article__diving-application h2 { color: var(--accent2); font-size: 1.05rem; margin-bottom: 0.5rem; }

.enc-article__mistakes h2,
.enc-article__did-you-know h2,
.enc-article__key-takeaways h2,
.enc-article__next h2,
.enc-article__related h2 { font-size: 1.1rem; margin-bottom: 0.6rem; }

.enc-mistake-card {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
}
.enc-mistake-card__mistake { color: var(--muted); text-decoration: line-through; font-size: 0.9rem; }
.enc-mistake-card__reality { color: var(--text); margin-top: 0.35rem; }

.enc-article__did-you-know ul,
.enc-article__key-takeaways ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.enc-article__did-you-know li,
.enc-article__key-takeaways li {
  padding: 0.7rem 0.9rem;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.enc-article__key-takeaways li { border-left: 3px solid var(--enc-coral); }

.enc-article__next {
  margin: 1.5rem 0;
  padding: 1.1rem;
  background: linear-gradient(135deg, var(--enc-deep-2), var(--enc-deep-3));
  border-radius: var(--radius);
}

/* Artículos relacionados: botones horizontales apilados uno debajo del
   otro (pedido explícito — antes era un carrusel horizontal), texto verde
   (color de acento de la app) y centrado. */
.enc-related-list { display: flex; flex-direction: column; gap: 0.6rem; }
.enc-related-list__item {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color var(--transition);
}
.enc-related-list__item:hover { border-color: var(--accent); }


/* ── Enciclopedia home / listas / búsqueda / guardados ── */
.enc-home { max-width: 640px; margin: 0 auto; padding: 1.25rem; }
.enc-home__search { width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); margin-bottom: 1.25rem; }
.enc-home__section { margin-bottom: 1.75rem; }
.enc-home__section h2 { font-size: 1.05rem; margin-bottom: 0.75rem; }

/* Título y texto del botón centrados al medio (pedido explícito). */
.enc-level-card, .enc-category-card, .enc-destination-card, .enc-cert-card {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem 1.1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  transition: border-color var(--transition);
}
.enc-level-card:hover, .enc-category-card:hover, .enc-destination-card:hover, .enc-cert-card:hover { border-color: var(--accent); }
.enc-level-card__title, .enc-category-card__title, .enc-destination-card__title, .enc-cert-card__title { font-weight: 700; }
.enc-level-card__goal, .enc-category-card__meta, .enc-destination-card__meta, .enc-cert-card__meta { font-size: 0.8rem; color: var(--text-soft); margin-top: 0.25rem; }

/* ── Botón de artículo (2026-11-01, pedido del dueño) ──
   Tres niveles, todo centrado al medio: 1) título en negrita, verde Fins Tribe (dark) o azul (light);
   2) subtítulo debajo, letra más chica, sin negrita, blanco (dark) o negro (light); 3) el valor del
   artículo (estrellas) anclado abajo. TODOS los botones miden lo mismo (alto fijo, ancho completo de
   la columna) y van bien separados. El espacio de las estrellas está siempre reservado, así el
   botón no cambia de tamaño cuando llega el promedio. */
.enc-article-btn {
  /* 7.5rem alcanza para el texto más largo de los 134 artículos en los 6 idiomas (2 renglones de título +
     2 de subtítulo en 320-360 px); medido, nada se recorta. */
  --enc-btn-h: 7.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--enc-btn-h);
  margin-bottom: 0.9rem;
  padding: 0.7rem 1.1rem 1.9rem;
  text-align: center;
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.enc-article-btn__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  min-height: 0;
}
.enc-article-btn__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--brand-title, var(--accent));
}
.enc-article-btn__subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--text);
}
.enc-article-btn .rating-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  width: auto;
  margin: 0;
}
/* Una sola columna ancha (tablet): el texto cabe en menos renglones. En escritorio (grilla de columnas
   de 18 rem o más) vuelve a valer el alto de arriba. */
@media (min-width: 34rem) and (max-width: 63.99rem) {
  .enc-article-btn { --enc-btn-h: 6.5rem; }
}

.enc-chapter-group { margin-bottom: 1.25rem; }
/* Título del capítulo (ej. "Formación de los océanos") centrado, igual
   que el texto del botón de artículo debajo (pedido explícito). */
.enc-chapter-group__title { font-size: 0.95rem; color: var(--text-soft); margin-bottom: 0.5rem; text-align: center; }
/* --done ya no se usa (pedido explícito: sin pill "Publicado", ver
   showCategory en encyclopedia-app.js) — queda solo para capítulos
   todavía no terminados. */
.enc-chapter-status { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--surface); color: var(--muted); }
.enc-chapter-status--in_progress { background: var(--enc-coral-dim); color: var(--enc-coral); }

/* Certificación todavía sin contenido producido: card inerte, sin hover ni
   cursor de botón (ver certCard en encyclopedia-app.js). */
.enc-cert-card--pending { opacity: 0.55; cursor: default; }
.enc-cert-card--pending:hover { border-color: var(--border); }

/* Escalera de cursos de una agencia (§40.1.8-12, render.js → renderAgencyPath). */
.enc-article__agency-path { margin: 1.5rem 0; }
.enc-course-ladder {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: course;
}
.enc-course-card {
  position: relative;
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  text-align: left;
}
.enc-course-card::before {
  counter-increment: course;
  content: counter(course);
  position: absolute;
  left: 0.85rem;
  top: 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
}
.enc-course-card--professional { border-left-color: var(--enc-coral); }
.enc-course-card--professional::before { color: var(--enc-coral); }
.enc-course-card__name { font-weight: 700; font-size: 0.92rem; }
.enc-course-card__meta { font-size: 0.78rem; color: var(--text-soft); margin-top: 0.2rem; }
.enc-course-card__prereq { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }

.enc-destination-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
/* 2026-10-31: «Todos» ocupa dos renglones a la izquierda y los continentes, uno cada uno, en
   los dos renglones de la derecha — todo cabe en pantalla sin desplazar. */
.enc-region-filter {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.enc-region-filter__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.4rem 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.78rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.enc-region-filter__chip:first-child { grid-row: 1 / span 2; border-radius: 1rem; }
.enc-region-filter__chip.active { border-color: var(--accent); color: var(--accent); }

.enc-empty-state { color: var(--text-soft); text-align: center; padding: 2rem 1rem; font-size: 0.9rem; }

/* ── Shell de la sub-app de Enciclopedia (encyclopedia-app.js) ──
   "← Atrás" flota a la izquierda (position: absolute) para no correr el
   centrado del título (pedido explícito: el título va centrado al medio
   de la barra, no solo del espacio que le queda al lado del botón). En
   artículos el título va vacío (ver showArticle: repetía el <h1> de abajo,
   pedido explícito de sacarlo) — el span sigue ahí pero sin texto. */
.enc-shell__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
}
.enc-shell__back {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--text-soft);
}
.enc-shell__back:hover { color: var(--accent); }
.enc-shell__title { font-weight: 700; font-size: 1.05rem; text-align: center; }
/* 2026-11-01 (pedido del dueño): un título largo (p. ej. «Fauna marina potencialmente peligrosa») se
   pisaba con la flecha «← Atrás». Con la flecha presente el título deja a los dos lados el lugar de la
   flecha (los dos iguales, así sigue centrado al medio de la barra) y, si no entra, baja a un segundo
   renglón, también centrado. */
.enc-shell__header:has(.enc-shell__back) { min-height: 3.6rem; }
.enc-shell__header:has(.enc-shell__back) .enc-shell__title {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--enc-back-room, 3.6rem);
  line-height: 1.2;
}
/* Padding lateral + ancho máximo centralizados acá (antes 0, los botones
   tocaban el borde de la pantalla, pedido explícito de arreglarlo);
   padding-top le da aire al primer botón, que quedaba pegado a la línea
   divisoria del título (pedido explícito) — .enc-article no repite el
   padding lateral (ver arriba). */
.enc-shell__content {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1rem 1.5rem;
}


/* ── Home de la Enciclopedia: 4 botones (pedido explícito) ──
   Horizontales, uno debajo del otro (antes era una grilla 2×2) — icono +
   título en el mismo renglón, look más premium y sin ocupar tanto espacio. */
.enc-home-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.25rem 0 1.5rem;
}
.enc-home-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  transition: border-color var(--transition), transform var(--transition);
}
.enc-home-tile:hover { border-color: var(--accent); }
.enc-home-tile:active { transform: scale(0.98); }
.enc-home-tile__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  border-radius: var(--radius-sm);
  color: var(--accent);
}
.enc-home-tile__title { font-size: 0.9rem; font-weight: 700; line-height: 1.25; }

/* ── Destinos (§43.31) ──
   Un destino se lee como ficha de datos, no como prosa continua: temporadas,
   condiciones, fauna estacional y logística van en bloques escaneables. */
.enc-fact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.enc-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
}
.enc-fact__label { font-size: 0.78rem; color: var(--text-soft); flex-shrink: 0; }
.enc-fact__value { font-size: 0.88rem; font-weight: 600; text-align: right; }

.enc-condition { margin-bottom: 0.6rem; line-height: 1.55; text-align: left; }
.enc-condition__label { font-weight: 700; color: var(--accent); }

/* Fauna estacional: la categoría de presencia (43.116) siempre visible, nunca
   un "siempre presente" implícito. */
.enc-wildlife-calendar { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.enc-wildlife-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  text-align: left;
}
.enc-wildlife-row__species { font-size: 0.88rem; font-weight: 600; flex: 1 1 auto; }
.enc-wildlife-row__months { font-size: 0.75rem; color: var(--muted); flex-basis: 100%; }
.enc-wildlife-row__presence {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  flex-shrink: 0;
}
.enc-wildlife-row__presence--year_round { background: var(--accent-dim); color: var(--accent); }
.enc-wildlife-row__presence--seasonal { background: var(--enc-coral-dim); color: var(--enc-coral); }

.enc-chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.enc-chip-list__item {
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-soft);
}

.enc-site-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.enc-site-card {
  padding: 0.85rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent2);
  border-radius: var(--radius-sm);
  text-align: left;
}
.enc-site-card__name { font-weight: 700; font-size: 0.92rem; }
.enc-site-card__meta { font-size: 0.76rem; color: var(--accent); margin-top: 0.2rem; }
.enc-site-card__desc { font-size: 0.85rem; color: var(--text-soft); margin-top: 0.35rem; line-height: 1.5; }

.enc-rule-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.enc-rule-list li {
  position: relative;
  padding: 0.5rem 0.8rem 0.5rem 1.9rem;
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  text-align: left;
}
.enc-rule-list li::before {
  content: '•';
  position: absolute;
  left: 0.9rem;
  color: var(--enc-coral);
  font-weight: 700;
}

.enc-badge--protected { background: var(--accent-dim); color: var(--accent); display: inline-block; margin-bottom: 0.6rem; }

/* Regla 43.115/43.117: los datos de un destino caducan y el lector debe saberlo. */
.enc-destination__note {
  margin-top: 2rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--muted);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.5;
  text-align: left;
}

/* ── Desbloqueo con donación (2026-10-01) ─────────────────────────────── */
.enc-category-card--locked { opacity: 0.85; }
/* Cierre del adelanto de un artículo bloqueado (`renderLockedNotice` en
   render.js — también está en las páginas estáticas `index.teaser.html`). */
.enc-locked {
  margin: 1.5rem 0;
  padding: 1.25rem 1rem;
  text-align: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
}
.enc-locked__icon { font-size: 2rem; margin: 0 0 0.25rem; }
.enc-locked h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.enc-locked__cta {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  margin: 0.25rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #0a1a14;
  font-weight: 700;
  text-decoration: none;
}
.enc-locked__code {
  display: inline-block;
  padding: 0.55rem 1rem;
  margin: 0.25rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  text-decoration: none;
}

/* ══ Estilo "revista" de los artículos (2026-10-18, pedido del dueño) ══
   Tipografía con serifa para el texto corrido, columna angosta de lectura, párrafos con sangría
   (los "puntos aparte" se ven), letra capital en el primer párrafo, títulos con filete y espacios
   generosos entre secciones. Solo CSS: sirve igual a la app y a las páginas estáticas, y vale para
   los 6 idiomas (sin guionado: las palabras nunca se cortan). */
.enc-article,
.enc-static-page {
  --enc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, "Times New Roman", serif;
  font-family: var(--enc-serif);
  font-size: 1.07rem;
  line-height: 1.75;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "onum";
  /* Un salto de línea escrito dentro de un párrafo se respeta. */
  --enc-indent: 1.45em;
}
.enc-article p,
.enc-static-page p { white-space: pre-line; orphans: 3; widows: 3; }

/* Encabezado: título grande, bajada en cursiva y un filete fino debajo. */
.enc-article__header { margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.enc-article__title {
  font-family: var(--enc-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 0.6rem;
}
.enc-article__subtitle {
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--text-soft);
  text-wrap: balance;
}
.enc-article__badges,
.enc-article__save-btn,
.enc-badge,
.enc-article button { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Introducción: la frase gancho es la "entradilla"; el primer párrafo lleva letra capital. */
.enc-article__intro { margin: 1.8rem 0 2rem; }
.enc-article__hook {
  font-size: 1.28rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--accent);
  margin: 0 0 1.4rem;
}
.enc-article__summary { margin: 0 0 0.55rem; color: var(--text); }
.enc-article__summary::first-letter {
  float: left;
  font-size: 3.6em;
  line-height: 0.82;
  font-weight: 700;
  padding: 0.08em 0.12em 0 0;
  color: var(--accent);
}
.enc-article__why { margin: 0; text-indent: var(--enc-indent); color: var(--text-soft); }

/* Secciones: aire arriba, título centrado con filete corto turquesa. */
.enc-article__section { margin: 2.6rem 0 1.6rem; }
.enc-article__section h2,
.enc-article__diving-application h2,
.enc-article__mistakes h2,
.enc-article__did-you-know h2,
.enc-article__key-takeaways h2,
.enc-article__next h2,
.enc-article__related h2,
.enc-article__agency-path h2 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.005em;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.enc-article__section h2::after,
.enc-article__diving-application h2::after,
.enc-article__mistakes h2::after,
.enc-article__did-you-know h2::after,
.enc-article__key-takeaways h2::after,
.enc-article__next h2::after,
.enc-article__related h2::after,
.enc-article__agency-path h2::after {
  content: "";
  display: block;
  width: 2.6rem;
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: 2px;
  background: var(--accent);
}
.enc-article__subsection { margin-top: 1.7rem; }
.enc-article__subsection h3 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}

/* Texto corrido: párrafos juntos, cada "punto aparte" con sangría. */
.enc-article__section p,
.enc-article__diving-application p { margin: 0 0 0.5rem; line-height: 1.75; }
.enc-article__section p + p,
.enc-article__subsection p + p,
.enc-article__diving-application p + p { text-indent: var(--enc-indent); }
/* El primer párrafo de cada sección va pegado al título, sin sangría. */
.enc-article__section-intro {
  font-style: italic;
  color: var(--text-soft);
  margin-bottom: 0.9rem !important;
  text-indent: 0 !important;
}

/* Aplicación al buceo: recuadro de "nota de revista". */
.enc-article__diving-application {
  margin: 2.4rem 0;
  padding: 1.3rem 1.3rem 1rem;
  border-left: 4px solid var(--accent2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.enc-article__diving-application h2 { text-align: left; color: var(--accent2); }
.enc-article__diving-application h2::after { margin-left: 0; background: var(--accent2); }

/* Errores frecuentes: el error tachado y la realidad debajo, bien separados. */
.enc-article__mistakes { margin: 2.4rem 0; }
.enc-mistake-card { padding: 1rem 1.1rem; margin-bottom: 0.8rem; }
.enc-mistake-card__mistake { font-size: 0.95rem; font-style: italic; line-height: 1.55; }
.enc-mistake-card__reality { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px dashed var(--border); line-height: 1.65; }

/* ¿Sabías que…? y Puntos clave: listas con aire. */
.enc-article__did-you-know,
.enc-article__key-takeaways { margin: 2.4rem 0; }
.enc-article__did-you-know ul,
.enc-article__key-takeaways ul { gap: 0.7rem; }
.enc-article__did-you-know li,
.enc-article__key-takeaways li { padding: 0.9rem 1.1rem; font-size: 1rem; line-height: 1.65; }
.enc-article__did-you-know li { border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Imágenes: pie de foto en cursiva, fuera del cuerpo en serifa. */
.enc-media { margin: 2rem 0; }
.enc-media__caption { font-style: italic; font-size: 0.92rem; line-height: 1.5; color: var(--text-soft); margin-top: 0.6rem; text-align: center; text-wrap: balance; }

/* "Explicación de la imagen": títulos en negrita y cada renglón con sangría, legible y ordenado. */
.enc-media__aside { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; gap: 1.1rem; padding: 1.1rem 1.15rem 1.2rem; }
.enc-media__explanation { font-size: 0.98rem; line-height: 1.65; }
.enc-media__line { padding-left: 1rem; margin-top: 0.45rem; text-indent: 0; }
.enc-media__label-text { line-height: 1.6; }

/* Artículos relacionados / siguiente: fuera de la serifa (son botones). */
.enc-related-list__item { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

@media (min-width: 700px) {
  .enc-article__title { font-size: 2.4rem; }
  .enc-article, .enc-static-page { font-size: 1.12rem; }
}

/* ── "Volver arriba" al final de cada artículo y resultados del buscador ── */
.enc-back-to-top {
  display: block;
  margin: 2.4rem auto 0;
  padding: 0.7rem 1.4rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
}
.enc-back-to-top:hover { background: var(--accent); color: #0a1a14; }
.enc-search-count { margin: 0.2rem 0 0.8rem; font-size: 0.85rem; color: var(--text-soft); }
.enc-search-hit { text-align: left; }
.enc-search-hit__snippet {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-soft);
  white-space: normal;
}
.enc-search-hit mark {
  background: var(--accent-dim);
  color: var(--text);
  font-weight: 700;
  border-radius: 3px;
  padding: 0 0.12em;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ══ Palabras completas (2026-10-18, pedido del dueño) ══
   Ninguna palabra se corta con guion ni se parte en dos renglones, en ninguna medida de pantalla
   (en especial celular). Títulos, botones y tarjetas van centrados y balanceados, así el renglón
   largo nunca obliga a partir una palabra; el texto corrido de los artículos sigue alineado a la
   izquierda con sangría (centrar párrafos largos los hace ilegibles). */
.enc-article, .enc-static-page, .enc-shell, .enc-home { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; }
.enc-article__title, .enc-article__subtitle, .enc-article__hook,
.enc-article h2, .enc-article h3,
.enc-related-list__item, .enc-back-to-top, .enc-shell__title,
.enc-home-tile__title, .enc-category-card, .enc-cert-card, .enc-destination-card, .enc-level-card,
.enc-chapter-group__title, .enc-empty-state, .enc-media__caption {
  text-align: center;
  text-wrap: balance;
}
.enc-article__hook { border-left: 0; padding-left: 0; }
@media (max-width: 380px) {
  .enc-article__title { font-size: 1.6rem; }
  .enc-article__section h2 { font-size: 1.2rem; }
}

/* ══ Pie del artículo: valoración + "Informar error" (2026-10-26, pedido del dueño) ══
   Dos tarjetas elegantes, centradas, bajo una línea fina con un rombo al medio. */
.enc-article__footer {
  margin: 2.6rem 0 0;
  padding-top: 1.6rem;
  position: relative;
  border-top: 1px solid var(--border);
}
.enc-article__footer::before {
  content: "◆";
  position: absolute;
  top: -0.62rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.7rem;
  background: var(--bg, #fff);
  color: var(--accent);
  font-size: 0.7rem;
  line-height: 1;
}
.enc-article__footer-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: stretch;
}
.enc-article__footer .rate-card,
.enc-article__footer .report-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.3rem 1.1rem;
  text-align: center;
  background: linear-gradient(160deg, var(--surface-raised), var(--accent-dim));
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.rate-card[hidden] { display: none; }
.enc-article__footer .rate-card:hover,
.enc-article__footer .report-card:hover { border-color: var(--accent); }
.enc-article__footer .report-error { margin: 0; width: 100%; }
.enc-article__footer .report-error__open { padding: 0.8rem 1.2rem; font-size: 0.95rem; }
.report-error__thanks { margin: 0.7rem 0 0; color: #2e8b57; font-weight: 600; }
.report-error__thanks[hidden] { display: none; }

.rate-card__title { margin: 0; font-size: 1.1rem; color: var(--text); }
.rate-card__prompt { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.rate-card__stars { display: flex; gap: 0.25rem; justify-content: center; }
.rate-card__star {
  padding: 0.1rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.12s ease, color 0.12s ease;
}
.rate-card__star svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.rate-card__star:hover { transform: scale(1.12); color: #e8a317; }
.rate-card__star.is-on { color: #e8a317; }
.rate-card__star.is-on svg { fill: currentColor; }
.rate-card__star:disabled { cursor: default; transform: none; }
.rate-card__send {
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #0a1a14;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.rate-card__send:disabled { opacity: 0.45; cursor: not-allowed; }
.rate-card__send[hidden] { display: none; }
.rate-card__status { margin: 0; font-size: 0.85rem; }
.rate-card__status--ok { color: #2e8b57; }
.rate-card__status--error { color: #d64545; }

/* Promedio de estrellas dentro del botón de la lista (2026-10-29). */
.rating-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-soft);
}
.rating-badge__label { font-weight: 600; }
.rating-stars { display: inline-flex; gap: 0.1rem; }
.rating-stars__star { position: relative; display: inline-block; line-height: 0; color: var(--border); }
.rating-stars__star svg { display: block; fill: currentColor; }
.rating-stars__fill {
  position: absolute;
  inset: 0;
  color: #e8a317;
  clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
}
.rate-card__title, .rate-card__prompt, .rate-card__send, .rate-card__status { font-family: inherit; }

/* ══ Vista de escritorio (2026-10-31, pedido del dueño) ══
   En computadora la Enciclopedia ocupa de lado a lado: el texto a todo el ancho, las imágenes
   más grandes, y cada infografía con su explicación una al lado de la otra. El celular (menos de
   1024px) NO cambia: todo lo de abajo vive dentro de este media query. */
@media (min-width: 1024px) {
  .enc-shell__content,
  .enc-static-page,
  .enc-home {
    max-width: min(1400px, calc(100vw - 4rem));
  }
  .enc-article { font-size: 1.15rem; }
  .enc-article__section p,
  .enc-article__section-intro { line-height: 1.7; }
  /* Infografía + explicación: ocupan todo el ancho del contenido, lado a lado. */
  .enc-media--annotated {
    --enc-media-wide: 100%;
    grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr);
    gap: 0.5rem 2rem;
  }
  .enc-media--portrait.enc-media--annotated .enc-media__frame { max-width: 44rem; }
  .enc-media--tall.enc-media--annotated .enc-media__frame { max-width: 34rem; }
  .enc-media--portrait:not(.enc-media--annotated) { max-width: 44rem; }
  .enc-media--tall:not(.enc-media--annotated) { max-width: 34rem; }
  /* Listas de botones en varias columnas en vez de una tira angosta. */
  .enc-chapter-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.7rem;
  }
  .enc-chapter-group > :not(button) { grid-column: 1 / -1; }
  .enc-chapter-group > button { margin-bottom: 0; }
  .enc-chapter-group { gap: 0.9rem; }
  .enc-destination-grid { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  .enc-related-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
  .enc-home-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
}