/* Haru Consulting: carta náutica con sondas. Reglas de página; los colores salen de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--hud-alto); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
h1, h2, h3 { font-family: "Vidaloka", Georgia, serif; font-weight: 400; line-height: 1.1; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--magenta); color: var(--papel); }
:focus-visible { outline: var(--anillo-grosor) solid var(--magenta); outline-offset: 3px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--papel); color: var(--tinta); }
.saltar:focus { top: 8px; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--hud-alto);
  display: flex; align-items: center; gap: 24px;
  padding: 0 clamp(16px, 2.5vw, 36px);
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta-carta);
  transition: background-color .3s, color .3s, border-color .3s;
}
.marca { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.marca__ondas { grid-row: span 2; width: 34px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.marca__nombre { font-family: "Vidaloka", Georgia, serif; font-size: 25px; line-height: 1; }
.marca__lema { font-size: 11px; letter-spacing: .12em; color: var(--tinta-2); }
.regla { flex: 1; min-width: 0; }
.regla ol { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0 auto; padding: 0; max-width: 700px; }
.regla ol::before { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 1px; background: currentColor; opacity: .5; }
.regla a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; font-size: 13px; }
.parada__punto { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; background: var(--papel); transition: background-color .2s; }
.regla a.activa .parada__punto { background: var(--magenta); border-color: var(--magenta); }
.regla a.activa { font-weight: 600; }
.hud__derecha { display: flex; align-items: center; gap: 18px; }
.escribenos { color: inherit; font-weight: 600; text-decoration: none; padding: 10px 14px 10px 0; border-right: 1px solid currentColor; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.xp { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud.hud--profundo { background: var(--tinte-6); color: var(--luz); border-bottom-color: color-mix(in srgb, var(--luz) 25%, transparent); }
.hud.hud--profundo .marca__lema { color: var(--luz); }
.hud.hud--profundo .parada__punto { background: var(--tinte-6); }
.hud.hud--profundo :focus-visible { outline-color: var(--luz); }

/* ---------- Entrada: la carta ---------- */
main { padding-top: var(--hud-alto); }
.entrada {
  position: relative;
  min-height: max(660px, calc(100svh - var(--hud-alto)));
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--tinta-carta);
  overflow: hidden;
  isolation: isolate;
}
.entrada__agua { position: absolute; inset: 0; z-index: -2; }
.entrada__agua img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.entrada::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 34% 46% at 50% 44%, color-mix(in srgb, var(--papel) 62%, transparent), transparent 100%);
}
.entrada__costa { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-height: 64px; object-fit: cover; object-position: center top; }
.entrada__tierra { position: absolute; top: 12px; left: clamp(16px, 2.5vw, 36px); font-family: "Vidaloka", Georgia, serif; font-size: 14px; letter-spacing: .14em; color: var(--tinta-carta); }
.entrada__rosa { position: absolute; top: 76px; left: clamp(16px, 2.5vw, 36px); width: clamp(84px, 8.5vw, 132px); height: auto; }
.entrada__centro {
  position: relative; z-index: 2;
  align-self: center;
  width: min(560px, 100% - 32px);
  margin: 0 auto;
  padding: clamp(40px, 5vh, 64px) 0 clamp(24px, 4vh, 48px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.sonda {
  appearance: none; border: 0; background: none; padding: 4px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  color: var(--tinta-carta); border-radius: 6px; min-width: 44px; min-height: 44px;
}
.sonda__cifra { font-family: "Vidaloka", Georgia, serif; font-size: 32px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sonda__etiqueta { margin-top: 6px; font-size: 15px; }
.sonda--gigante { flex-direction: row; align-items: baseline; gap: 12px; }
.sonda--gigante .sonda__cifra { font-size: clamp(76px, 9vw, 120px); letter-spacing: -.02em; }
.sonda--gigante .sonda__etiqueta { font-size: 18px; font-weight: 600; max-width: 8em; text-align: left; line-height: 1.15; }
.sonda.marcado .sonda__cifra { text-decoration: underline 2px; text-underline-offset: 6px; }
.lector { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 19px; font-weight: 600; min-height: 1.5em; }
.lector__icono { width: 28px; height: 20px; fill: var(--magenta); stroke: var(--magenta); stroke-width: 1.8; stroke-linecap: round; }
.lector__icono path { fill: none; }
.lector.lector--pregunta .lector__texto { text-decoration: underline 1px; text-underline-offset: 4px; }
.sondas { display: flex; justify-content: center; list-style: none; padding: 0; margin: 22px 0 0; }
.sondas li { padding: 0 clamp(14px, 2vw, 26px); }
.sondas li + li { border-left: 1px solid color-mix(in srgb, var(--tinta-carta) 40%, transparent); }
.nota-cifras { margin-top: 12px; font-family: "Noto Serif", Georgia, serif; font-style: italic; font-size: 13px; color: var(--tinta-carta); }
.entrada h1 { margin-top: clamp(20px, 3.5vh, 36px); font-size: clamp(38px, 4.4vw, 60px); color: var(--tinta-carta); }
.subcopy { text-wrap: balance; margin-top: 14px; font-family: "Noto Serif", Georgia, serif; font-style: italic; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; max-width: 26em; }
.boton-magenta {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 30px; border-radius: 999px;
  background: var(--magenta); color: var(--papel);
  font-size: 19px; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tinte-6) 30%, transparent);
}
.boton-magenta:focus-visible { outline-color: var(--papel); box-shadow: 0 0 0 6px var(--magenta); }

.entrada__criaturas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.criatura-hero { position: absolute; appearance: none; border: 0; background: none; padding: 0; cursor: pointer; pointer-events: auto; }
.criatura-hero img, .criatura-hero svg { width: 100%; height: auto; }
.criatura-hero--tortuga { left: 6%; bottom: 13%; width: clamp(150px, 19vw, 300px); }
.criatura-hero--ballena { right: 2.5%; top: 34%; width: clamp(200px, 28vw, 440px); }
.criatura-hero--medusa { right: 15%; bottom: 10%; width: clamp(90px, 11vw, 170px); }
.especie { color: var(--tinta-carta); fill: url(#grabado-azul); stroke: var(--tinta-carta); stroke-width: 1.6; stroke-linejoin: round; overflow: visible; }
.especie .ojo { fill: var(--papel); stroke: none; }
.especie--grabado { filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--papel) 50%, transparent)); }
.bocadillo {
  position: absolute; z-index: 1;
  width: max-content; max-width: 210px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--papel) 94%, transparent);
  border: 1px solid var(--tinta-2);
  color: var(--tinta);
  font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center;
}
.bocadillo::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: inherit; border-right: 1px solid var(--tinta-2); border-bottom: 1px solid var(--tinta-2); transform: rotate(45deg); }
.criatura-hero--tortuga .bocadillo { left: 26%; bottom: 96%; }
.criatura-hero--ballena .bocadillo { left: 34%; bottom: 92%; }
.criatura-hero--medusa .bocadillo { left: 78%; bottom: 72%; }
.criatura-hero.marcado .bocadillo::before { content: "visto · "; color: var(--tinta-2); font-weight: 400; }

.banda-tramo {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  padding: 12px clamp(16px, 2.5vw, 36px);
  background: var(--papel);
  color: var(--tinta-carta);
}
.banda-tramo__ancla { width: 30px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.banda-tramo__titulo { font-family: "Vidaloka", Georgia, serif; font-size: clamp(22px, 2vw, 28px); padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--linea); white-space: nowrap; }
.escala { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: 0 1 760px; min-width: 0; }
.escala__titulo { font-family: "Noto Serif", Georgia, serif; font-style: italic; font-size: 13px; white-space: nowrap; }
.escala__barra { display: flex; flex: 1; list-style: none; margin: 0; padding: 0; min-width: 0; }
.escala__barra li { flex: 1; position: relative; height: 18px; border: 1px solid var(--tinta-carta); border-right-width: 0; }
.escala__barra li:last-child { border-right-width: 1px; }
.escala__barra li span { position: absolute; left: 0; top: 22px; font-size: 12px; font-variant-numeric: tabular-nums; transform: translateX(-30%); white-space: nowrap; }
.escala__barra li:nth-child(1) { background: var(--tinte-1); }
.escala__barra li:nth-child(2) { background: color-mix(in srgb, var(--tinte-1), var(--tinte-2)); }
.escala__barra li:nth-child(3) { background: var(--tinte-2); }
.escala__barra li:nth-child(4) { background: color-mix(in srgb, var(--tinte-2), var(--tinte-3)); }
.escala__barra li:nth-child(5) { background: var(--tinte-3); }
.escala__barra li:nth-child(6) { background: color-mix(in srgb, var(--tinte-3), var(--tinte-4)); }
.escala__barra li:nth-child(7) { background: var(--tinte-4); }
.escala__barra li:nth-child(8) { background: var(--tinte-5); }
.escala__barra li:nth-child(9) { background: var(--tinte-6); }
.escala { padding-bottom: 18px; }

/* ---------- El túnel ---------- */
.tunel { position: relative; }
.escenario { display: none; }
.tramo {
  position: relative;
  min-height: 140vh;
  padding: clamp(56px, 10vh, 120px) clamp(16px, 4vw, 64px);
  display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 32px; align-items: start;
  overflow: hidden;
}
.tramo--1 { background: var(--tinte-2); }
.tramo--2 { background: var(--tinte-3); }
.tramo--3 { background: var(--tinte-4); }
.tramo--4 { background: var(--tinte-5); }
.tramo--5 { background: var(--tinte-6); }
.isobatas { position: absolute; inset: auto 0 6% 0; width: 100%; height: 220px; fill: none; stroke: color-mix(in srgb, var(--tinte-6) 22%, transparent); stroke-width: 1.2; pointer-events: none; }
.tramo--4 .isobatas, .tramo--5 .isobatas { stroke: color-mix(in srgb, var(--luz) 22%, transparent); }
.tramo__panel {
  position: relative; z-index: 3;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 4px;
}
.tramo--1 .tramo__panel { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); }
.tramo--2 .tramo__panel, .tramo--3 .tramo__panel { background: var(--chip-oscuro-fondo); color: var(--chip-oscuro-texto); }
.tramo--4 .tramo__panel, .tramo--5 .tramo__panel { background: color-mix(in srgb, var(--tinte-6) 88%, transparent); color: var(--luz); border: 1px solid color-mix(in srgb, var(--luz) 35%, transparent); }
.tramo--2 .tramo__panel :focus-visible, .tramo--3 .tramo__panel :focus-visible,
.tramo--4 .tramo__panel :focus-visible, .tramo--5 .tramo__panel :focus-visible { outline-color: var(--luz); }
.tramo__num { font-size: 14px; font-weight: 600; letter-spacing: .06em; opacity: .85; }
.tramo h2 { margin-top: 6px; font-size: clamp(32px, 3.6vw, 52px); }
.tramo__frase { margin-top: 10px; font-family: "Noto Serif", Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.4; }
.nota-carta { margin-top: 18px; padding: 12px 14px; border: 1px dashed currentColor; font-size: 15px; line-height: 1.4; max-width: 72ch; }
.ver-preguntas { margin-top: 22px; }
.ver-preguntas > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.preguntas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ficha { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.ficha > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 0;
  font-size: 19px; font-weight: 600; line-height: 1.3;
}
.ficha > summary::-webkit-details-marker { display: none; }
.ficha > summary::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; }
.ficha[open] > summary::before { background: currentColor; }
.ficha > summary.marcado::after { content: "visto"; margin-left: auto; font-size: 13px; font-weight: 400; opacity: .8; }
.ficha dl { margin: 0 0 14px 20px; display: grid; gap: 4px; font-size: 16px; line-height: 1.45; max-width: 72ch; }
.ficha dt { font-weight: 600; margin-top: 6px; }
.ficha dd { margin: 0; }
.tramo__criaturas { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-content: center; min-height: 80vh; }
.criatura-reposo { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: 10px; color: inherit; }
.criatura-reposo .especie { width: min(220px, 100%); height: auto; }
.tramo--4 .especie, .tramo--5 .especie, .escenario .especie--abismo { color: var(--luz); fill: url(#grabado-luz); stroke: var(--luz); }
.chip { display: inline-block; max-width: 22em; padding: 6px 10px; border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; }
.tramo--1 .chip { background: var(--papel); color: var(--tinta); border: 1px solid var(--tinta-2); }
.tramo--2 .chip, .tramo--3 .chip { background: var(--chip-oscuro-fondo); color: var(--chip-oscuro-texto); }
.tramo--4 .chip, .tramo--5 .chip { background: color-mix(in srgb, var(--tinte-6) 80%, transparent); color: var(--luz); border: 1px solid var(--luz); }

/* Con escena (JS y movimiento permitido): las criaturas pasan al escenario 3D pegajoso */
html.con-escena .escenario {
  display: block;
  position: sticky; top: var(--hud-alto);
  height: calc(100svh - var(--hud-alto));
  perspective: 900px;
  perspective-origin: 70% 50%;
  overflow: hidden;
  z-index: 0;
}
html.con-escena .escenario + .tramo { margin-top: calc(var(--hud-alto) - 100svh); }
html.con-escena .tramo { background: transparent; }
html.con-escena .tramo__criaturas { display: none; }
html.con-escena .tramo { grid-template-columns: minmax(0, 520px); }
.escenario__tinte { position: absolute; inset: 0; background: var(--tinte-2); transition: background-color .6s; }
.escenario[data-tramo="1"] .escenario__tinte { background: var(--tinte-3); }
.escenario[data-tramo="2"] .escenario__tinte { background: var(--tinte-4); }
.escenario[data-tramo="3"] .escenario__tinte { background: var(--tinte-5); }
.escenario[data-tramo="4"] .escenario__tinte { background: var(--tinte-6); }
.escenario__mundo { position: absolute; inset: 0; transform-style: preserve-3d; }
.anillo { position: absolute; left: 50%; top: 50%; width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tinte-6) 30%, transparent); }
.escenario[data-tramo="3"] .anillo, .escenario[data-tramo="4"] .anillo { border-color: color-mix(in srgb, var(--luz) 25%, transparent); }
.criatura { position: absolute; left: 70%; top: 50%; width: 26vmin; margin: -13vmin 0 0 -13vmin; display: grid; justify-items: center; gap: 10px; appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.criatura .especie { width: 100%; height: auto; animation: nado 5s ease-in-out infinite alternate; }
.criatura .chip { width: max-content; max-width: min(22em, 64vw); opacity: 0; transition: opacity .25s; transform: scale(var(--inv, 1)); transform-origin: top center; font-size: 15px; background: var(--chip-oscuro-fondo); color: var(--chip-oscuro-texto); border: 1px solid var(--luz); }
.criatura.cerca { will-change: transform; }
.criatura.cerca .especie { animation-play-state: paused; }
.criatura.cerca.lider .chip { opacity: 1; }
@keyframes nado { to { transform: translateY(-2.5vmin) rotate(2deg); } }

/* ---------- La IA ---------- */
.ia { position: relative; z-index: 1; background: var(--tinte-6); color: var(--luz); padding: clamp(72px, 12vh, 140px) clamp(16px, 4vw, 64px); }
.ia :focus-visible { outline-color: var(--luz); }
.ia__cabeza { max-width: 640px; }
.ia h2 { margin-top: 6px; font-size: clamp(38px, 4.4vw, 62px); }
.ia__cabeza > p:last-child { margin-top: 14px; font-size: 20px; max-width: 60ch; }
.chat { margin-top: 36px; max-width: 760px; background: var(--papel); color: var(--tinta); border-radius: 6px; overflow: hidden; }
.chat :focus-visible { outline-color: var(--magenta); }
.chat__aviso { padding: 12px 18px; border-bottom: 1px solid var(--linea); font-size: 14px; color: var(--tinta-2); }
.chat__preguntas { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px 0; }
.chat__pregunta { appearance: none; min-height: 44px; padding: 8px 14px; border: 1px solid var(--tinta-2); border-radius: 999px; background: var(--papel); cursor: pointer; font-weight: 600; font-size: 16px; }
.chat__pregunta[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.chat__respuestas { padding: 16px 18px 20px; display: grid; gap: 18px; }
.respuesta { border-left: 3px solid var(--tinte-4); padding-left: 14px; }
.respuesta__titulo { font-family: "Vidaloka", Georgia, serif; font-size: 24px; }
.respuesta table { margin-top: 8px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.respuesta th, .respuesta td { padding: 4px 14px 4px 0; text-align: left; border-bottom: 1px solid var(--linea); }
.respuesta th { color: var(--tinta-2); font-weight: 600; }
.respuesta__real { margin-top: 10px; font-style: italic; font-family: "Noto Serif", Georgia, serif; font-size: 15px; color: var(--tinta-2); }
.capacidades { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.capacidad { padding: 22px; border: 1px solid color-mix(in srgb, var(--luz) 35%, transparent); border-radius: 4px; }
.capacidad__verbo { font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.capacidad h3 { margin-top: 6px; font-size: 24px; }
.capacidad p:last-child { margin-top: 8px; font-size: 16px; line-height: 1.45; }

/* ---------- Subida ---------- */
.superficie {
  height: 220px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px;
  background: linear-gradient(to bottom, var(--tinte-6), var(--tinte-4) 40%, var(--tinte-2) 75%, var(--papel));
}
.superficie p { font-family: "Noto Serif", Georgia, serif; font-style: italic; font-size: 18px; color: var(--tinta); }

/* ---------- La carta: archipiélago ---------- */
.carta { padding: clamp(56px, 10vh, 120px) clamp(16px, 4vw, 64px); background: var(--papel); }
.carta__cabeza { max-width: 680px; }
.carta h2 { font-size: clamp(34px, 3.8vw, 54px); color: var(--tinta-carta); }
.carta__cabeza p { margin-top: 12px; font-size: 19px; }
.recuadro {
  margin: 32px 0 0; padding: 10px;
  border: 1px solid var(--tinta-carta); outline: 3px double var(--tinta-carta); outline-offset: 4px;
  touch-action: pan-y; overflow: hidden;
}
.lienzo { position: relative; aspect-ratio: 1200 / 680; background: var(--tinte-1); }
.mapa { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa .isla { fill: var(--tierra); stroke: color-mix(in srgb, var(--tinta) 45%, transparent); stroke-width: 1.5; }
.mapa .ruta { fill: none; stroke: var(--tinta-2); stroke-width: 2; stroke-dasharray: 8 8; }
.mapa .sonda-mapa { font-family: "Noto Serif", Georgia, serif; font-style: italic; font-size: 18px; fill: var(--tinta-carta); }
.puerto { position: absolute; left: var(--px); top: var(--py); transform: translate(-12px, -12px); appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.puerto__punto { width: 24px; height: 24px; border-radius: 50%; background: var(--magenta); border: 3px solid var(--papel); box-shadow: 0 0 0 1px var(--tinta-carta); flex: none; }
.puerto__nombre { padding: 4px 8px; background: var(--papel); border: 1px solid var(--tinta-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.puerto.relacionado .puerto__nombre::after { content: " · relacionado"; font-weight: 400; color: var(--tinta-2); }
.recuadro figcaption { margin-top: 8px; font-family: "Noto Serif", Georgia, serif; font-style: italic; font-size: 14px; color: var(--tinta-carta); }
.puertos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ficha-puerto { height: 100%; padding: 0 18px 16px; border: 1px solid var(--linea); border-top: 3px solid var(--tinta-carta); }
.ficha-puerto > summary { cursor: pointer; list-style: none; min-height: 48px; padding: 14px 0 6px; font-family: "Vidaloka", Georgia, serif; font-size: 22px; color: var(--tinta-carta); }
.ficha-puerto > summary::-webkit-details-marker { display: none; }
.puerto__sub { display: block; margin-top: 4px; font-family: "Archivo Narrow", sans-serif; font-size: 15px; color: var(--tinta-2); }
.relacionado-texto { display: block; font-family: "Archivo Narrow", sans-serif; font-size: 14px; font-weight: 600; color: var(--tinta); }
.ficha-puerto > summary.marcado { text-decoration: underline 1px; text-underline-offset: 5px; }
.ficha-puerto p { font-size: 16px; line-height: 1.45; }
.fases-titulo { margin-top: 10px; font-weight: 600; }
.fases { margin: 4px 0 0; padding-left: 20px; font-size: 16px; }
.para-quien { margin-top: 10px; }

/* ---------- Cómo trabajamos ---------- */
.como { padding: clamp(56px, 10vh, 120px) clamp(16px, 4vw, 64px); background: var(--tinte-1); }
.como h2 { font-size: clamp(34px, 3.8vw, 54px); color: var(--tinta-carta); }
.pasos { margin: 32px 0 0; padding: 0; list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pasos li { counter-increment: paso; padding-top: 18px; border-top: 2px solid var(--tinta-carta); }
.pasos li::before { content: counter(paso); font-family: "Vidaloka", Georgia, serif; font-size: 40px; color: var(--tinta-carta); line-height: 1; }
.pasos h3 { margin-top: 10px; font-size: 26px; color: var(--tinta-carta); }
.pasos p { margin-top: 8px; font-size: 17px; line-height: 1.5; max-width: 40ch; }

/* ---------- Misión ---------- */
.mision { padding: clamp(72px, 12vh, 140px) clamp(16px, 4vw, 64px); background: var(--tinte-6); color: var(--luz); text-align: center; display: flex; flex-direction: column; align-items: center; }
.mision :focus-visible { outline-color: var(--luz); }
.mision h2 { font-size: clamp(38px, 4.4vw, 62px); }
.mision > p { margin-top: 14px; max-width: 46ch; font-size: 19px; }
.sostener { position: relative; margin-top: 32px; width: 168px; height: 168px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--luz) 8%, transparent); color: var(--luz); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sostener__anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.sostener__pista { stroke: color-mix(in srgb, var(--luz) 30%, transparent); stroke-width: 4; }
.sostener__avance { stroke: var(--luz); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; }
.sostener__texto { position: relative; font-weight: 600; font-size: 17px; line-height: 1.2; display: block; padding: 0 22px; }
.sostener.hecho .sostener__avance { stroke-dashoffset: 0; }
.sostener__ayuda { margin-top: 12px; font-size: 15px; opacity: .9; }
.directo { margin-top: 18px; color: var(--luz); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.contactos { margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.contacto { color: var(--luz); font-size: 22px; font-family: "Vidaloka", Georgia, serif; min-height: 44px; display: inline-flex; align-items: center; }
.pie { padding: 28px clamp(16px, 4vw, 64px); background: var(--tinte-6); color: var(--luz); border-top: 1px solid color-mix(in srgb, var(--luz) 20%, transparent); display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; font-size: 15px; }
.pie__marca { font-family: "Vidaloka", Georgia, serif; font-size: 20px; }

/* ---------- Celular ---------- */
@media (max-width: 1100px) {
  .regla .parada__texto { font-size: 11px; }
  .capacidades, .puertos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .hud { gap: 10px; }
  .marca__lema, .marca__ondas { display: none; }
  .marca__nombre { font-size: 20px; }
  .regla ol::before { top: 21px; }
  .regla a { min-width: 0; flex: 1; justify-content: center; }
  .regla .parada__texto { display: none; }
  .regla a.activa .parada__texto { display: block; position: absolute; top: 30px; font-size: 11px; white-space: nowrap; }
  .parada__punto { width: 10px; height: 10px; margin-top: 16px; }
  .escribenos { border-right: 0; padding-right: 0; font-size: 15px; }
  .xp { display: none; }
  .entrada__rosa { display: none; }
  .entrada__tierra { font-size: 11px; top: 8px; }
  .entrada__centro { padding-top: 96px; padding-bottom: 210px; }
  .sondas li { padding: 0 10px; }
  .sondas li:nth-child(3) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sonda__cifra { font-size: 26px; }
  .sonda__etiqueta { font-size: 14px; }
  .lector { font-size: 16px; }
  .criatura-hero--tortuga { left: 3%; bottom: 24px; width: 46vw; }
  .criatura-hero--ballena { right: -6%; bottom: 70px; top: auto; width: 52vw; }
  .criatura-hero--medusa { display: none; }
  .bocadillo { max-width: 150px; font-size: 13px; }
  .criatura-hero--tortuga .bocadillo { left: 8%; bottom: 92%; }
  .criatura-hero--ballena .bocadillo { left: 10%; bottom: 88%; }
  .banda-tramo { flex-wrap: wrap; }
  .banda-tramo__titulo { border-left: 0; padding-left: 0; }
  .escala { flex-basis: 100%; margin-left: 0; }
  .escala__titulo { display: none; }
  .escala__barra li span { font-size: 10px; }
  .escala__barra li:nth-child(even) span { display: none; }
  .tramo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  html.con-escena .tramo { min-height: 130vh; }
  .tramo__criaturas { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ficha > summary { font-size: 17px; }
  .capacidades, .puertos, .pasos { grid-template-columns: minmax(0, 1fr); }
  .puerto__nombre { display: none; }
  .recuadro { outline-offset: 2px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}