/* =========================================================================
   LA REDONDELA — Tres mil años de mareas y resistencia
   Hoja de estilos única. Sin frameworks, sin build step.
   Autor de la obra: Xavier Pardell Peña.
   ========================================================================= */

/* ---------- 1. Tipografía autoalojada ------------------------------------ */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/Fraunces-Roman.woff2") format("woff2-variations"),
       url("../fonts/Fraunces-Roman.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/Fraunces-Italic.woff2") format("woff2-variations"),
       url("../fonts/Fraunces-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/SourceSans3-Roman.woff2") format("woff2-variations"),
       url("../fonts/SourceSans3-Roman.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/SourceSans3-Italic.woff2") format("woff2-variations"),
       url("../fonts/SourceSans3-Italic.woff2") format("woff2");
}

/* ---------- 2. Tokens ------------------------------------------------------ */

:root {
  /* Paleta — extraída de la acuarela de cubierta: crema arena, azul marea,
     ocre de piedra, vino de resistencia, verdín de marisma. */
  --arena-50:  #fbf6ea;
  --arena-100: #f4ecd8;
  --arena-200: #ecdfc0;
  --arena-300: #e0cea1;
  --tinta-900: #221a12;
  --tinta-700: #3a2e21;
  --tinta-500: #5c4c39;

  --marea-900: #12333a;
  --marea-700: #1c4d57;
  --marea-500: #2c6e79;
  --marea-300: #6ea3ab;
  --marea-100: #cfe4e6;

  --ocre-700: #7c5a1e;
  --ocre-500: #b1832f;
  --ocre-300: #d9b169;

  --vino-700: #5c1f1b;
  --vino-500: #8a2f27;
  --vino-300: #c06a5c;

  --verdin-600: #4c6350;
  --verdin-400: #7f9a7f;

  --bg: var(--arena-50);
  --bg-raised: var(--arena-100);
  --bg-sunken: var(--arena-200);
  --ink: var(--tinta-900);
  --ink-soft: var(--tinta-700);
  --ink-faint: var(--tinta-500);
  --accent: var(--marea-500);
  --accent-ink: var(--marea-900);
  --gold: var(--ocre-500);
  --gold-ink: var(--ocre-700);
  --wine: var(--vino-500);
  --line: rgba(34, 26, 18, 0.14);
  --line-strong: rgba(34, 26, 18, 0.28);
  --shadow-color: 28 20 12;
  --focus: var(--wine);

  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;

  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.4rem;
  --space-4: 2.2rem;
  --space-5: 3.6rem;
  --space-6: 5.6rem;
  --space-7: 8.4rem;

  --content-w: 44rem;
  --wide-w: 78rem;

  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
  --ease: cubic-bezier(0.22, 0.61, 0.27, 1);

  color-scheme: light;
}

:root[data-tide="pleamar"] {
  color-scheme: dark;
  --bg: #10191c;
  --bg-raised: #162326;
  --bg-sunken: #0c1416;
  --ink: #f1e8d6;
  --ink-soft: #d9cbae;
  --ink-faint: #a4977f;
  --accent: #6fb0ba;
  --accent-ink: #cfe9ec;
  --gold: #e0b565;
  --gold-ink: #f3d190;
  --wine: #e2897a;
  --line: rgba(241, 232, 214, 0.14);
  --line-strong: rgba(241, 232, 214, 0.26);
  --shadow-color: 0 0 0;
  --focus: #e0b565;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; }
}

/* ---------- 3. Reset y base ------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

img, svg { max-width: 100%; display: block; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.method-note__icon .icon, .chapter-card__arrow .icon, .tide-gauge__boat .icon { width: 100%; height: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0 0 0.5em; color: var(--ink); }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.2em; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--gold); color: var(--tinta-900); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--bg); padding: 0.8em 1.2em; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.u-container { max-width: var(--wide-w); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 3.2rem); }
.u-prose { max-width: var(--content-w); margin-inline: auto; }
.u-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.76rem; color: var(--accent);
}
.u-eyebrow::before { content: ""; width: 1.6em; height: 1.5px; background: currentColor; display: inline-block; }
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 4. Fondo de papel + textura --------------------------------- */

body {
  background-image:
    radial-gradient(1200px 620px at 12% -10%, rgba(44,110,121,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(177,131,47,0.10), transparent 55%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0.13  0 0 0 0 0.1  0 0 0 0 0.07  0 0 0 0.035 0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
  background-repeat: no-repeat, no-repeat, repeat;
}
:root[data-tide="pleamar"] body {
  background-image:
    radial-gradient(1200px 620px at 12% -10%, rgba(111,176,186,0.09), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(224,181,101,0.07), transparent 55%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.02 0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}

/* ---------- 5. Cabecera -------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: 0.9rem;
}
.brand { display: flex; align-items: center; gap: 0.65em; text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__word { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.02em; color: var(--ink); }
.brand__word small { display: block; font-family: var(--sans); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.6rem; color: var(--ink-faint); }

.site-nav { display: flex; align-items: center; gap: var(--space-3); }
.site-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.site-nav__links a {
  text-decoration: none; font-weight: 600; font-size: 0.92rem; color: var(--ink-soft);
  padding-block: 0.3em; border-bottom: 2px solid transparent; transition: color var(--dur-1), border-color var(--dur-1);
}
.site-nav__links a:hover, .site-nav__links a:focus-visible, .site-nav__links a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }

.tide-toggle {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.4em 0.85em 0.4em 0.6em; cursor: pointer; color: var(--ink-soft);
}
.tide-toggle svg { width: 16px; height: 16px; }
.tide-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Botón de menú móvil: oculto por defecto (y sin JS, donde los enlaces
   ya se muestran en línea con wrap como red de seguridad). Solo se activa
   como acordeón cuando hay JS (clase .js en <html>) y el viewport es estrecho. */
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--ink); cursor: pointer;
}
.nav-burger .icon { width: 20px; height: 20px; }
.nav-burger:hover, .nav-burger:focus-visible { border-color: var(--accent); color: var(--accent); }

@media (max-width: 760px) {
  .site-header__bar { flex-wrap: wrap; row-gap: 0.6rem; }
  .site-nav { width: 100%; justify-content: space-between; }
  .site-nav__links { gap: var(--space-2); }
  .site-nav__links a { font-size: 0.84rem; }

  /* Con JS: el botón hamburguesa aparece y los enlaces se colapsan en un
     panel plegable, ocultos hasta que se activa .is-open. Sin JS, el
     `.site-nav__links{display:flex;flex-wrap:wrap}` de arriba sigue
     aplicando, así que el menú es siempre utilizable. */
  .js .nav-burger { display: inline-flex; order: 1; }
  .js .site-nav { order: 2; flex-wrap: wrap; }
  .js .site-nav__links {
    display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0;
    order: 3; margin-top: 0.4rem; border-top: 1px solid var(--line); padding-top: 0.5rem;
  }
  .js .site-nav__links.is-open { display: flex; }
  .js .site-nav__links a { display: block; width: 100%; padding-block: 0.55em; }
  .js .tide-toggle { order: 0; }
}
@media (max-width: 420px) {
  .site-nav__links { gap: 0.7rem; }
}

/* ---------- 6. Héroe portada --------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem);
  isolation: isolate;
}
.hero__scene {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, transparent 55%, var(--bg) 100%),
    radial-gradient(1100px 560px at 18% 8%, color-mix(in srgb, var(--wine) 26%, transparent), transparent 60%),
    radial-gradient(900px 620px at 85% -5%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 55%),
    radial-gradient(1400px 700px at 50% 40%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 62%),
    var(--bg-raised);
}
.hero__silhouette { position: absolute; left: 0; right: 0; bottom: -2px; z-index: -1; opacity: 0.9; }
.hero__silhouette svg { width: 100%; height: auto; display: block; }

.hero__content { position: relative; text-align: center; max-width: 52rem; margin-inline: auto; }
.hero__kicker {
  display: inline-flex; align-items: center; gap: 0.6em; margin-bottom: var(--space-3);
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; color: var(--gold-ink);
}
.hero__title {
  font-size: clamp(2.6rem, 7.4vw, 5.4rem); letter-spacing: -0.01em; margin: 0 0 0.3em;
}
.hero__title em { font-style: italic; color: var(--accent); }
.hero__subtitle {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-soft);
  font-size: clamp(1.05rem, 2.4vw, 1.45rem); margin: 0 auto var(--space-4); max-width: 34rem;
}
.hero__byline { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-4); }
.hero__cta { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer;
  padding: 0.85em 1.5em; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--accent); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 7. Secciones genéricas --------------------------------------- */

section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-head { max-width: 40rem; margin-bottom: var(--space-4); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-top: 0.3em; }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; }

/* ---------- 8. Metodología / nota editorial -------------------------------- */

.method-note {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: var(--space-4); display: grid; gap: var(--space-3);
  grid-template-columns: auto 1fr; align-items: start;
}
.method-note__icon { width: 46px; height: 46px; color: var(--accent); flex: none; }
.method-note h3 { margin-bottom: 0.35em; font-size: 1.3rem; }
.method-note p:last-child { margin-bottom: 0; }
.method-note p { color: var(--ink-soft); }
@media (max-width: 560px) { .method-note { grid-template-columns: 1fr; } }

/* ---------- 9. Cronología / "La marea del tiempo" ------------------------- */

.timeline {
  background: var(--bg-raised); border-radius: var(--radius-l); border: 1px solid var(--line);
  padding: clamp(1.2rem, 4vw, var(--space-5));
}
/* Sin JS: las pestañas no hacen nada (no hay listener que las active), así
   que se ocultan y los cinco paneles se muestran apilados, cada uno con su
   propio encabezado de era — la cronología completa sigue siendo legible y
   navegable sin depender de JavaScript. Con JS (clase .js en <html>) se
   restaura el patrón de pestañas: solo el panel activo es visible y el
   encabezado redundante dentro del panel se oculta. */
.timeline__tabs { display: none; }
.js .timeline__tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--space-4); padding: 0;
}
.timeline__tab {
  border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  padding: 0.6em 1.1em; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.88rem;
  transition: all var(--dur-1) var(--ease);
}
.timeline__tab .era-range { display: block; font-weight: 500; font-size: 0.74rem; opacity: 0.75; }
.timeline__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.timeline__tab:hover:not([aria-selected="true"]) { border-color: var(--accent); color: var(--accent); }

.timeline__panel { display: block; padding-block: var(--space-4); border-top: 1px solid var(--line); }
.timeline__panel:first-of-type { padding-top: 0; border-top: none; }
.js .timeline__panel { display: none; padding-block: 0; border-top: none; }
.js .timeline__panel[data-active="true"] { display: block; animation: fadein var(--dur-2) var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }

.timeline__panel-heading {
  display: flex; align-items: baseline; gap: 0.6em; font-family: var(--serif); font-weight: 600;
  font-size: 1.2rem; color: var(--ink); margin: 0 0 0.6em;
}
.timeline__panel-heading .era-range { font-family: var(--sans); font-weight: 600; font-size: 0.78rem; color: var(--ink-faint); }
.js .timeline__panel-heading { display: none; }

.timeline__intro { color: var(--ink-soft); max-width: 38rem; margin-bottom: var(--space-4); font-size: 1rem; }
.timeline__intro strong { color: var(--ink); }

.tl-events { position: relative; list-style: none; margin: 0; padding: 0; }
.tl-events::before {
  content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--accent), var(--gold)); opacity: 0.35;
}
.tl-event { position: relative; padding: 0 0 var(--space-3) 2.6rem; }
.tl-event:last-child { padding-bottom: 0; }
.tl-event::before {
  content: ""; position: absolute; left: 6px; top: 0.35em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-raised); border: 3px solid var(--accent);
}
.tl-event__year { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--accent-ink); }
.tl-event__year { color: var(--accent); }
.tl-event__text { color: var(--ink-soft); margin: 0.15em 0 0; }
.tl-event__link {
  display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.5em; font-weight: 700; font-size: 0.85rem;
  color: var(--wine); text-decoration: none;
}
.tl-event__link:hover { text-decoration: underline; }
.tl-event--chapter::before { border-color: var(--wine); background: var(--wine); }

/* ---------- 10. Grid de entregas ------------------------------------------ */

.chapters-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3);
}
.chapter-card {
  position: relative; display: flex; flex-direction: column; gap: 0.9rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: var(--space-4); text-decoration: none; color: var(--ink);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2);
  overflow: hidden;
}
.chapter-card::after {
  content: ""; position: absolute; inset: auto -40% -60% auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--chapter-tint, var(--accent)) 0%, transparent 70%);
  opacity: 0.22; transition: opacity var(--dur-2);
}
.chapter-card:hover, .chapter-card:focus-visible {
  transform: translateY(-4px); border-color: var(--chapter-tint, var(--accent));
  box-shadow: 0 18px 34px -22px rgb(var(--shadow-color) / 0.55);
}
.chapter-card:hover::after { opacity: 0.34; }
.chapter-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* El numeral usa siempre var(--ink) (nunca el tono decorativo del capítulo)
   para garantizar contraste AA en los dos temas y en los cuatro tonos —
   el color de la entrega se conserva como un punto decorativo, que no
   necesita cumplir el contraste de texto por no transmitir información
   por sí solo (el número y la era ya lo hacen en texto). */
.chapter-card__num { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--serif); font-size: 2.1rem; font-weight: 600; color: var(--ink); line-height: 1; }
.chapter-card__num::before { content: ""; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--chapter-tint, var(--accent)); flex: none; }
.chapter-card__era { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.chapter-card__title { font-size: 1.32rem; margin: 0; }
.chapter-card__dek { color: var(--ink-soft); font-size: 0.95rem; margin: 0; flex-grow: 1; }
.chapter-card__meta { display: flex; align-items: center; gap: 0.5em; font-size: 0.8rem; color: var(--ink-faint); font-weight: 600; }
.chapter-card__meta svg { width: 14px; height: 14px; }
.chapter-card__arrow { margin-left: auto; width: 20px; height: 20px; color: var(--ink-soft); transition: transform var(--dur-1) var(--ease), color var(--dur-1); }
.chapter-card:hover .chapter-card__arrow { color: var(--chapter-tint, var(--accent)); }
.chapter-card:hover .chapter-card__arrow { transform: translateX(5px); }

/* ---------- 11. Mapa esquemático ------------------------------------------ */

.coastmap {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-4);
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(200px, 1fr); gap: var(--space-4); align-items: start;
}
.coastmap__map svg { width: 100%; height: auto; }
.coastmap__pin { cursor: pointer; }
.coastmap__pin circle { transition: r var(--dur-1) var(--ease), stroke-width var(--dur-1) var(--ease); }
.coastmap__pin:hover circle, .coastmap__pin:focus circle { r: 8; }
.coastmap__pin.is-active circle { r: 9; stroke-width: 3; }
.coastmap__pin.is-active .coastmap__label { fill: var(--wine); font-weight: 800; }
.coastmap__label { font-family: var(--sans); font-size: 11px; font-weight: 700; fill: var(--ink); transition: fill var(--dur-1); }

/* Panel de información: muestra el punto activo con texto real (no solo
   aria-live oculto), así que pasar el cursor o el foco por el mapa da
   información visible, no solo accesible. */
.coastmap__info {
  display: flex; gap: 0.7em; align-items: flex-start; align-self: start; position: sticky; top: 5.5rem;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-m); padding: var(--space-3);
}
.coastmap__info-icon { width: 22px; height: 22px; color: var(--wine); flex: none; margin-top: 0.15em; }
.coastmap__info-label { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--ink); margin-bottom: 0.3em; }
.coastmap__info-note { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

@media (max-width: 760px) {
  .coastmap { grid-template-columns: 1fr; }
  .coastmap__info { position: static; }
}

/* ---------- 12. Pie de página --------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-5) var(--space-4); background: var(--bg-sunken); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.site-footer h4 { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.9em; }
.site-footer p, .site-footer li { color: var(--ink-soft); font-size: 0.92rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5em; }
.site-footer a { text-decoration: none; color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }
.site-footer__bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: var(--space-3); font-size: 0.82rem; color: var(--ink-faint);
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   PÁGINAS DE CAPÍTULO
   ========================================================================= */

.tide-gauge {
  position: fixed; left: clamp(1.4rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%);
  width: 30px; height: min(46vh, 340px); z-index: 60; display: none;
}
@media (min-width: 980px) { .tide-gauge { display: block; } }
.tide-gauge__track {
  position: relative; width: 4px; height: 100%; margin-inline: auto; border-radius: 4px;
  background: var(--line-strong); overflow: hidden;
}
.tide-gauge__fill {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0%;
  background: linear-gradient(var(--gold), var(--accent)); border-radius: 4px;
  transition: height var(--dur-1) linear;
}
.tide-gauge__boat {
  position: absolute; left: 50%; bottom: 0%; width: 22px; height: 22px; transform: translate(-50%, 50%);
  color: var(--wine); transition: bottom var(--dur-1) linear; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25));
}
.tide-gauge__label {
  position: absolute; left: -0.4rem; top: 50%; transform: translate(-100%, -50%);
  writing-mode: vertical-rl; white-space: nowrap;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}

.chapter-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(2.6rem, 7vw, 4.6rem) clamp(3rem, 6vw, 4rem);
  background: linear-gradient(180deg, color-mix(in srgb, var(--chapter-tint, var(--accent)) 16%, var(--bg-raised)), var(--bg) 92%);
  border-bottom: 1px solid var(--line);
}
/* Lavado de acuarela decorativo: formas con bordes desplazados por ruido
   (ver watercolor_wash() en build.py) — dos pigmentos de la misma familia
   de color del capítulo, fundidos como en papel húmedo. mix-blend-mode
   cambia de multiply a screen entre temas para que el lavado se vea
   pigmentado sobre el papel claro y luminoso sobre el fondo oscuro. */
.chapter-hero__wash {
  position: absolute; inset: -5% -5%; width: 110%; height: 110%; z-index: 0;
  pointer-events: none; opacity: 0.55; mix-blend-mode: multiply;
}
:root[data-tide="pleamar"] .chapter-hero__wash { opacity: 0.38; mix-blend-mode: screen; }
.chapter-hero > .u-container { position: relative; z-index: 1; }
.chapter-hero__eyebrow { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; margin-bottom: var(--space-3); }
.chapter-hero__num {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em; border-radius: 50%;
  background: var(--chapter-tint, var(--accent)); color: var(--bg); font-family: var(--serif); font-weight: 700; font-size: 1.1rem; flex: none;
}
.chapter-hero__series { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; color: var(--ink-faint); }
.chapter-hero__era {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 700; font-size: 0.78rem; color: var(--ink); background: var(--bg-raised);
  border: 1.5px solid var(--chapter-tint, var(--accent)); padding: 0.35em 0.85em; border-radius: 999px;
}
.chapter-hero__era::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--chapter-tint, var(--accent)); flex: none; }
.chapter-hero__title { font-size: clamp(2rem, 5.4vw, 3.4rem); max-width: 30ch; }
.chapter-hero__dek { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--ink-soft); max-width: 42rem; margin-bottom: var(--space-3); }
/* var(--ink-soft), no --ink-faint: esta fila se apoya en un fondo con
   textura (lavado de acuarela en algunos capítulos), y el tono más tenue
   se queda por debajo de 4.5:1 en tema oscuro sobre esa textura. */
.chapter-hero__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.chapter-hero__meta span { display: inline-flex; align-items: center; gap: 0.4em; }
.chapter-hero__meta svg { width: 15px; height: 15px; }

.chapter-dots { display: flex; gap: 0.4rem; margin-top: var(--space-3); }
.chapter-dots a {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); text-decoration: none; position: relative;
}
.chapter-dots a[aria-current="true"] { background: var(--chapter-tint, var(--accent)); width: 22px; border-radius: 6px; }

.chapter-controls { display: flex; gap: 0.6rem; margin-top: var(--space-3); flex-wrap: wrap; }
.mini-toggle {
  display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8rem; font-weight: 700;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.4em 0.9em; cursor: pointer; color: var(--ink-soft);
}
.mini-toggle:hover { color: var(--accent); border-color: var(--accent); }
.mini-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.size-stepper { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.size-stepper button {
  background: var(--bg-raised); border: none; border-right: 1px solid var(--line-strong); cursor: pointer;
  padding: 0.4em 0.85em; font-weight: 700; color: var(--ink-soft); font-size: 0.85rem;
}
.size-stepper button:last-child { border-right: none; }
.size-stepper button:hover { color: var(--accent); }
.size-stepper button[aria-current="true"] { background: var(--ink); color: var(--bg); }

.chapter-article { padding-block: clamp(2.5rem, 6vw, 4rem); }
.chapter-article__inner { max-width: var(--content-w); margin-inline: auto; }
.chapter-article__inner[data-font="serif"] { font-family: var(--serif); font-size: 1.14rem; }
.chapter-article__inner[data-font="serif"] p { line-height: 1.75; }

.article-lede {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-soft);
  border-left: 3px solid var(--gold); padding-left: 1.2em; margin-bottom: var(--space-4);
}

.chapter-article__inner { --article-scale: 1; }
.chapter-article p { font-size: calc(1.06rem * var(--article-scale)); line-height: 1.78; color: var(--ink-soft); }
.chapter-article p:first-of-type::first-letter {
  font-family: var(--serif); font-weight: 700; float: left; font-size: 3.6em; line-height: 0.82;
  padding: 0.05em 0.09em 0 0; color: var(--chapter-tint, var(--accent));
}
.chapter-article h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 2.2em; margin-bottom: 0.7em;
  padding-top: 0.4em; border-top: 1px solid var(--line);
}
.chapter-article h2:first-child { border-top: none; margin-top: 0; }

blockquote.pull {
  margin: var(--space-5) auto; max-width: 34rem; position: relative;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3.4vw, 1.7rem);
  line-height: 1.4; color: var(--ink); padding: 0.2em 0 0.2em 1.1em; border-left: 4px solid var(--wine);
}
blockquote.pull cite { display: block; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.7em; }
blockquote.pull[data-note] { cursor: pointer; }
blockquote.pull .pull-note-hint {
  display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.8em;
  font-family: var(--sans); font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 0.3em 0.75em;
}
blockquote.pull .pull-note-hint::before { content: "+ nota al margen"; }
blockquote.pull.is-open .pull-note-hint::before { content: "– ocultar nota"; }
blockquote.pull .note-pop {
  display: none; margin-top: 0.6em; font-family: var(--sans); font-style: normal; font-size: 0.82rem; font-weight: 600;
  color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: var(--radius-s); padding: 0.7em 0.9em;
}
blockquote.pull.is-open .note-pop { display: block; animation: fadein var(--dur-1) var(--ease); }

/* ficha de archivo (placeholder de imagen) */
figure.archive-plate {
  margin: var(--space-5) 0; border: 1px solid var(--line-strong); border-radius: var(--radius-m);
  overflow: hidden; background: var(--bg-raised);
}
.archive-plate__frame {
  position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--plate-tint, var(--marea-500)) 16%, transparent) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, color-mix(in srgb, var(--plate-tint, var(--marea-500)) 30%, var(--bg-raised)), var(--bg-sunken) 80%);
}
.archive-plate__icon { width: 30%; max-width: 96px; color: color-mix(in srgb, var(--plate-tint, var(--marea-500)) 70%, var(--ink)); opacity: 0.65; }
.archive-plate__stamp {
  position: absolute; top: 1rem; right: 1rem; transform: rotate(6deg);
  border: 2px solid var(--wine); color: var(--wine); font-weight: 800; font-size: 0.62rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.35em 0.6em; border-radius: 6px; background: color-mix(in srgb, var(--bg) 70%, transparent);
}
figcaption.archive-plate__caption { padding: 0.9em 1.1em; font-size: 0.86rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
figcaption.archive-plate__caption strong { color: var(--ink); font-weight: 700; }

.source-box {
  margin-top: var(--space-5); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: var(--space-4); font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6;
}
.source-box h3 { font-size: 0.95rem; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6em; }
.source-box a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 2px; }
.source-box a:hover, .source-box a:focus-visible { color: var(--wine); }
.source-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }

/* ---------- 16. Página «La Redondela hoy» ---------------------------------- */

.today-hero { padding-block: var(--space-5) var(--space-4); }
.today-hero .section-head { max-width: 46rem; }
.today-hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.3rem); margin-top: 0.3em; }
.today-hero__dek { color: var(--ink-soft); font-size: 1.08rem; max-width: 44rem; }
.today-hero__meta { color: var(--ink-faint); font-size: 0.82rem; font-weight: 600; margin-top: 1em; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.stat-card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: var(--space-3); display: flex; flex-direction: column; gap: 0.6em;
}
.stat-card__icon { width: 26px; height: 26px; color: var(--accent); }
.stat-card__value { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; color: var(--ink); line-height: 1.2; }
.stat-card__note { color: var(--ink-soft); font-size: 0.88rem; margin: 0; }

.today-sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.today-site {
  display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden;
}
.today-site .archive-plate { margin: 0; border: none; border-radius: 0; }
.today-site__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.6em; flex-grow: 1; }
.today-site__title { font-size: 1.15rem; margin: 0; }
.today-site__text { color: var(--ink-soft); font-size: 0.95rem; margin: 0; flex-grow: 1; }
.today-site__link {
  display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.2em; font-weight: 700; font-size: 0.85rem;
  color: var(--wine); text-decoration: none;
}
.today-site__link:hover { text-decoration: underline; }
.today-site__link svg { width: 15px; height: 15px; }

.today-fiestas .tl-event__year { font-size: 0.95rem; }
.today-fiestas .tl-event__link { color: var(--wine); }

.today-economy p:first-child { font-size: 1.08rem; }
.today-economy strong { color: var(--ink); }

.chapter-nav {
  border-top: 1px solid var(--line); padding-block: var(--space-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.chapter-nav__card {
  display: flex; flex-direction: column; gap: 0.5em; text-decoration: none; color: var(--ink);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3);
  transition: border-color var(--dur-1), transform var(--dur-1) var(--ease);
}
.chapter-nav__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.chapter-nav__card--next { text-align: right; align-items: flex-end; grid-column: 2; }
.chapter-nav__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.chapter-nav__title { font-family: var(--serif); font-size: 1.1rem; }
@media (max-width: 620px) {
  .chapter-nav { grid-template-columns: 1fr; }
  .chapter-nav__card--next { grid-column: 1; text-align: left; align-items: flex-start; }
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 60;
  width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  box-shadow: 0 10px 24px -10px rgb(var(--shadow-color) / 0.6);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 18px; height: 18px; }

/* ---------- 13. Página 404 ------------------------------------------------ */
.tide-404 { min-height: 70vh; display: flex; align-items: center; }
.tide-404__inner { text-align: center; max-width: 34rem; margin-inline: auto; }
.tide-404 h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }

/* ---------- 15. Impresión -------------------------------------------------- */
@media print {
  .site-header, .site-footer, .tide-gauge, .to-top, .hero__cta, .chapter-controls, .timeline__tabs { display: none !important; }
  body { background: #fff; }
  .chapter-article p, .chapter-article { color: #111 !important; }
  a[href]::after { content: "" !important; }
}