/* EchoFather Familias · formatos de pantalla (v7.7) · se carga la última
   Corrige la portada en ventanas altas o estrechas (monitor en vertical, ventana partida, tableta):
   la nota «Conectar las piezas» chocaba con el lema y la nota «Una familia» rozaba el borde. */

/* El lema se apila en la esquina inferior derecha cuando la escena es estrecha.
   Así nunca coincide con la nota de la esquina inferior izquierda. */
.orbit-label span { white-space: nowrap; }
@media (max-width: 1439px) {
  .orbit-label { right: 2%; bottom: 2%; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; line-height: 1.2; text-align: right; }
  .orbit-label i { display: none; }
}

/* Escritorio estrecho (981–1439 px): la nota superior se separa del borde de la ventana */
@media (min-width: 981px) and (max-width: 1439px) {
  .note-a { right: 4%; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .note-a { right: 6%; }
}

/* Pantalla vertical de escritorio (monitor girado, ventana alta): portada en columna,
   con el emblema grande debajo del texto en lugar de dos columnas con mucho vacío arriba y abajo. */
@media (min-width: 981px) and (max-aspect-ratio: 4/5) {
  .hero-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: clamp(16px, 3vh, 48px); }
  .hero-copy { width: min(100%, 720px); padding-bottom: 0; }
  .hero-copy .lead { max-width: 600px; }
  /* El emblema ocupa el alto que deja libre el texto (≈ 820 px entre cabecera, barra y portada) */
  .hero-art { --art: clamp(360px, calc(100vh - 820px), 720px); width: min(100%, var(--art)); height: var(--art); }
  @supports (height: 100dvh) { .hero-art { --art: clamp(360px, calc(100dvh - 820px), 720px); } }
  .hero-emblem { width: 100%; left: 0; top: 0; }
  .note-a { top: 2%; right: 0; }
  .note-b { bottom: 6%; left: 0; }
  .note-b { bottom: 8%; }
  .orbit-label { bottom: 6%; right: 1%; }
}

/* Tableta en vertical (721–980 px y alta): la portada también en columna, con el emblema debajo */
@media (min-width: 721px) and (max-width: 980px) and (max-aspect-ratio: 4/5) and (min-height: 1000px) {
  .hero-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: clamp(16px, 3vh, 40px); }
  .hero-copy { width: min(100%, 640px); padding-bottom: 0; }
  .hero-art { --art: clamp(320px, calc(100vh - 700px), 560px); width: min(100%, var(--art)); height: var(--art); }
  @supports (height: 100dvh) { .hero-art { --art: clamp(320px, calc(100dvh - 700px), 560px); } }
  .hero-emblem { width: 100%; left: 0; top: 0; }
  /* hay aire a los lados del emblema: las notas salen hacia fuera para no tapar el dibujo */
  .hero-art .note-a { top: 2%; right: calc((var(--art) - 100vw) / 2 + 40px); }
  .hero-art .note-b { bottom: 6%; left: calc((var(--art) - 100vw) / 2 + 40px); }
  .hero-art .orbit-label { bottom: 2%; right: calc((var(--art) - 100vw) / 2 + 44px); }
}

/* Tableta (721–980 px): notas un poco hacia dentro para no rozar los bordes */
@media (min-width: 721px) and (max-width: 980px) {
  .note-b { left: 2%; }
}
/* Móvil: la nota inferior no toca el borde izquierdo */
@media (max-width: 720px) {
  .orbit-label { display: none; }
  .note-b { left: 3%; }
  .note-a { right: 3%; }
}

/* El atributo hidden siempre oculta (formulario enviado, filtro de lecturas…), aunque el elemento tenga display propio */
[hidden] { display: none !important; }

/* main nunca se desplaza: con overflow:clip el navegador no puede moverlo ni al saltar a un #ancla (Android) */
@supports (overflow: clip) { main { overflow: clip; } }

/* Modo oscuro forzado (Samsung Internet, Chrome con «tema oscuro para sitios»): la web ya es oscura y lo declara,
   así el navegador no la reinterpreta. Sin esto apagaba los titulares dorados y oscurecía los paneles claros. */
:root { color-scheme: dark; }


/* Al abrir un enlace con #capítulo el navegador enfoca la sección y le dibujaba un marco blanco alrededor.
   Los capítulos y titulares reciben el foco solo para lectores de pantalla: sin marco. Los botones y enlaces lo conservan. */
.room:focus, [tabindex="-1"]:focus { outline: none; }

/* Armazón fijo a la pantalla (v7.8). Antes, main medía «alto de pantalla − 132 px» dando por hecho la altura de la
   cabecera y de la barra inferior. Si la cabecera crecía (letra grande en el móvil, pantallas de 280–300 px, zoom),
   la página quedaba más alta que la pantalla y el navegador la desplazaba: desaparecía la cabecera y quedaba
   un hueco debajo de la barra. Ahora cabecera y barra miden lo que necesiten y main ocupa exactamente el resto. */
html { height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: fixed; inset: 0; height: auto; display: flex; flex-direction: column; overflow: hidden; }
body > .header, body > .journey-bar { flex: none; }
body > main { flex: 1 1 auto; min-height: 0; height: auto !important; }