/* EchoFather Familias · compatibilidad entre navegadores y pantallas (v7.4)
   Se carga el último. Cada bloque dice a qué navegadores o pantallas protege.
   Objetivo: Safari / iOS 15.4+, Chrome / Edge / Samsung Internet 100+, Firefox 115+ (ESR).
   En versiones más antiguas la web sigue siendo legible; solo se pierden efectos. */

/* 1 · Altura de pantalla: «dvh» no existe en Safari < 15.4, Chrome < 108, Firefox < 101.
      Sin esta copia en «vh», la zona de contenido se quedaría sin altura y no se vería nada. */
@supports not (height: 100dvh) {
  main { height: calc(100vh - 160px); }
  dialog { max-height: calc(100vh - 70px); }
  @media (max-width: 980px) { main { height: calc(100vh - 144px); } }
  @media (max-width: 720px) { main { height: calc(100vh - 132px); } dialog { max-height: calc(100vh - 30px); } }
}

/* 2 · Safari hasta la 17 solo entiende el desenfoque con prefijo -webkit- */
.floating-note { -webkit-backdrop-filter: blur(10px) saturate(150%); }
dialog::backdrop { -webkit-backdrop-filter: blur(12px); }
body.simple .floating-note { -webkit-backdrop-filter: none; }

/* 3 · Navegadores sin desenfoque de fondo: el cristal pasa a ser opaco para que el texto se lea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .floating-note, .method-console, .research-workbench, .app-feature, .header nav { background: #0d3038; }
  .header, .journey-bar { background: #071f27; }
  .light-panel, .media-feature { background: #f4f0e6; }
}

/* 4 · Proporciones sin «aspect-ratio» (Safari < 15) */
@supports not (aspect-ratio: 1 / 1) {
  .app-reel { width: clamp(236px, 34.3vh, 332px); }
  .media-photo { height: 0; padding-top: 56.25%; }
  @media (max-width: 720px) { .app-reel { height: 0; padding-top: 177.78%; } }
}

/* 5 · Pantallas táctiles: un toque no debe dejar el efecto de «pasar el ratón» pegado */
@media (hover: none) {
  .app-feature:hover, .media-feature:hover, .button:hover, .research-steps button:hover b { transform: none; }
  .app-feature:hover { border-color: #ffffff1c; }
  .research-steps button:not([aria-selected=true]):not(.is-done):hover b { border-color: #dfbd7640; color: #a9c1bd; }
  .step-next:hover .step-arrow { translate: none; }
}

/* 6 · Modo de alto contraste de Windows: el texto dorado en degradado se vuelve texto normal */
@media (forced-colors: active) {
  .hero-copy h1 em, .chapter-intro h2 em, .section-heading h2 em, .universe-copy h2 em {
    background: none; color: CanvasText; -webkit-text-fill-color: CanvasText;
  }
  #liquid, .glint, .nav-liquid, .dots-liquid, .research-visual::after { display: none; }
  .step-btn, .app-feature, .circle-btn { border: 1px solid ButtonText; }
}

/* 7 · Móvil apaisado y pantallas bajas: barras compactas para ganar espacio de lectura */
@media (max-height: 560px) and (orientation: landscape) {
  .header { height: 56px; }
  .brand img { width: 36px; height: 36px; }
  .header nav { top: 60px; }
  .journey-bar { height: 50px; }
  .journey-help { display: none; }
  .journey-controls .circle-btn { width: 30px; height: 30px; }
  main { height: calc(100vh - 106px); height: calc(100dvh - 106px); }
  .room-inner { padding-top: 18px; padding-bottom: 18px; }
  .floating-note { position: absolute; }
  .hero-copy h1 { font-size: clamp(40px, 7vw, 56px); }
  .hero-copy .eyebrow { margin-bottom: 12px; }
}

/* 8 · iPhone SE y móviles de 320 px: los 9 puntos de capítulo caben en la barra */
@media (max-width: 380px) {
  #chapter-dots button { width: 11px; }
  .journey-progress { padding: 2px 6px; gap: 5px; }
}

/* 9 · Universo: el emblema pequeño ya no sobresale del borde de la pantalla */
.small-emblem { right: 0; }
@media (max-width: 720px) { .small-emblem { right: 4px; } }

/* 10 · Escenas 3D en tableta y móvil apaisado: lo que flota hacia delante se proyecta más grande y hacia fuera.
       Se mete hacia dentro lo justo para que la perspectiva no lo saque de la pantalla. */
@media (max-width: 980px) {
  .note-a { right: 6%; }
  .note-b { left: 4%; }
  .small-emblem { right: 7%; }
}
@media (max-width: 720px) {
  .note-a { right: 0; }
  .note-b { left: 0; }
  .small-emblem { right: 4px; }
}
@media (min-width: 981px) and (max-width: 1180px) { .small-emblem { right: 7%; } }