/* EchoFather Familias · ajuste a la altura de pantalla (v7.5)
   El diseño original medía los titulares solo por el ancho; en portátiles y monitores de ~770–900 px de alto
   los capítulos se salían por abajo. Aquí titulares, imágenes y espacios grandes toman el menor valor entre
   lo que permite el ancho y lo que permite el alto. El texto de lectura (lectura.css) no se reduce.
   Solo escritorio y tableta apaisada (≥ 981 px); en móvil cada capítulo se desplaza de forma natural. */
@media (min-width: 981px) {
  /* Titulares */
  .hero-copy h1 { font-size: clamp(52px, min(6.35vw, 9.2vh), 100px); margin-bottom: clamp(14px, 2.4vh, 25px); }
  h2 { font-size: clamp(34px, min(4.25vw, 6.5vh), 66px); }
  .section-heading h2 { font-size: clamp(32px, min(4.1vw, 6.2vh), 60px); }
  .chapter-copy h2 { font-size: clamp(30px, min(3.2vw, 5.2vh), 50px); margin-bottom: clamp(12px, 2vh, 20px); }
  .chapter-intro h2 { margin-bottom: clamp(14px, 2.4vh, 25px); }

  /* Espacios generales */
  .room-inner { padding-top: clamp(20px, 3.4vh, 48px); padding-bottom: clamp(20px, 3.4vh, 48px); }
  .actions { margin-top: clamp(16px, 2.6vh, 27px); }
  .section-heading { margin-bottom: clamp(14px, 2.6vh, 28px); }

  /* Inicio */
  .hero-art { height: clamp(360px, 62vh, 650px); }
  .hero-footnote { margin-top: clamp(14px, 2.6vh, 30px); }

  /* Origen */
  .chapter-copy { padding: clamp(22px, 3.4vh, 44px) clamp(26px, 3vw, 44px); }
  .chapter-copy .pullquote { margin-top: clamp(12px, 2vh, 21px); }
  .book-object { width: clamp(180px, 27vh, 250px); }

  /* Método */
  .method-console { padding-top: clamp(16px, 2.4vh, 25px); }
  .method-list summary { padding: clamp(9px, 1.6vh, 19px) 0; }
  .method-list strong { font-size: clamp(22px, 2.9vh, 28px); }
  .method-list details p { margin-bottom: clamp(12px, 2vh, 21px); }
  .console-bottom { padding: clamp(11px, 1.9vh, 22px) 0; }

  /* Investigación */
  .research-visual img { max-height: 44vh; }
  .research-detail { padding-top: clamp(18px, 2.6vh, 27px); padding-bottom: clamp(18px, 2.6vh, 27px); }
  .research-detail h3 { font-size: clamp(24px, 3.3vh, 31px); }
  .research-detail > p:not(.eyebrow) { min-height: 0; }
  .result-box { margin: clamp(10px, 1.8vh, 18px) 0; }
  .research-steps { margin-top: clamp(12px, 2vh, 22px); --node: clamp(32px, 4vh, 38px); }
  .research-more { margin-top: clamp(8px, 1.4vh, 12px); }

  /* Familias */
  .family-delivery { padding-top: clamp(20px, 3vh, 30px); padding-bottom: clamp(16px, 2.4vh, 30px); }
  .delivery-item { padding: clamp(9px, 1.6vh, 19px) 0; }
  .delivery-item h3 { font-size: clamp(21px, 2.7vh, 25px); }
  .family-data { margin-top: clamp(14px, 2.2vh, 24px); padding: clamp(12px, 1.8vh, 18px) 18px; }
  .family-data-title { margin-bottom: clamp(8px, 1.4vh, 14px); }
  .family-data dt { font-size: clamp(21px, 2.9vh, 27px); }

  /* La app */
  .app-reel { height: clamp(360px, 58vh, 590px); }
  .app-features { gap: clamp(6px, 1vh, 10px); }
  .app-feature { padding-top: clamp(10px, 1.6vh, 15px); padding-bottom: clamp(11px, 1.7vh, 17px); }

  /* Voces: la foto acompaña la altura del texto en lugar de imponer 16:9 */
  .media-feature.has-photo .media-photo { aspect-ratio: auto; }

  /* Universo */
  .art-frame img { height: clamp(290px, 46vh, 420px); }
  .universe-art { min-height: 0; }
  .universe-nav { margin: clamp(14px, 2.4vh, 26px) 0 clamp(12px, 2vh, 20px); }
  .art-nav { margin-top: clamp(14px, 2.4vh, 27px); }
  .art-description { min-height: 0; }

  /* Hablemos */
  .faq-panel { padding-top: clamp(20px, 3vh, 28px); padding-bottom: clamp(18px, 2.6vh, 28px); }
  .faq-panel > h3 { margin-bottom: clamp(10px, 1.8vh, 20px); }
  .faq-list summary { padding: clamp(10px, 1.7vh, 19px) 0; }
  .contact-sign { margin-top: clamp(16px, 2.6vh, 28px); padding-top: clamp(14px, 2vh, 21px); }
}

/* Pantallas de escritorio bajas (portátiles 1366×768, 1536×864, monitores con escalado 125 %) */
@media (min-width: 981px) and (max-height: 960px) {
  .room-inner { padding-top: clamp(18px, 2.6vh, 48px); padding-bottom: clamp(18px, 2.6vh, 48px); }
  .family-data { padding-top: 12px; padding-bottom: 10px; }
  .family-data-source { margin-top: 10px; }
  /* Investigación */
  .research-visual img { max-height: 39vh; }
  .research-steps button { gap: 6px; }
  /* Voces: titular en una sola línea y tarjetas más compactas */
  #voces .section-heading h2 br { display: none; }
  #voces .section-heading > p { display: none; }
  .media-feature.has-photo .media-body { padding: 20px 28px 18px; }
  .media-feature.has-photo .media-source { margin: 10px 0 8px; }
  .media-grid.has-photo { gap: 14px; }
  .media-grid.has-photo .media-list > .media-episode, .media-grid.has-photo .media-list > a { padding: 10px 0 12px; }
  .episode-links { margin-top: 8px; }
  .section-note { margin-top: 10px; }
  /* Familias */
  .families-layout { column-gap: clamp(30px, 4vw, 64px); }
  #familias .chapter-intro .muted { margin-top: 12px; max-width: none; }
  .small-note { margin-top: 12px; }
}


/* Portátiles de poca altura (≤ 800 px): cabecera y barra inferior más finas para ganar espacio */
@media (min-width: 981px) and (max-height: 800px) {
  .header { height: 66px; }
  .brand img { width: 44px; height: 44px; }
  .header nav a { padding-top: 9px; padding-bottom: 9px; }
  .journey-bar { height: 58px; }
  main { height: calc(100vh - 124px); height: calc(100dvh - 124px); }
}