/* EchoFather Familias · pantallas táctiles (v7.8) · se carga la última
   En móviles y tabletas Android el cambio de capítulo daba tirones: giro 3D de pantalla completa,
   desenfoque de la sala entera y de cada bloque, cristal desenfocado recalculado en cada fotograma
   sobre el fondo animado y titulares dorados que se repintaban sin parar.
   Aquí el móvil conserva el mismo aspecto (colores, fondo vivo, notas, emblema que flota),
   pero con movimientos que la tarjeta gráfica del teléfono resuelve sin esfuerzo. */

/* En todas las pantallas: lo que no está a la vista no se anima */
.room:not(.active) *, .room:not(.active) *::before, .room:not(.active) *::after { animation-play-state: paused !important; }

@media (pointer: coarse) {
  /* 1 · Cambio de capítulo: desliza y funde, sin giro 3D ni desenfoque de pantalla completa */
  main { perspective: none; }
  .room { transform: translate3d(calc(var(--enter-x, 90px) * .35), 0, 0); transition: opacity .38s, transform .5s cubic-bezier(.22, .8, .22, 1), visibility 0s .5s; }
  .room.active { transform: none; transition: opacity .42s .04s, transform .55s cubic-bezier(.22, .8, .22, 1), visibility 0s; }
  body:not(.simple) .room:not(.active) { filter: none; }
  @keyframes liquid-rise-lite { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  body:not(.simple) .room.active .room-inner > *,
  body:not(.simple) .room.active .room-inner > .spatial { animation-name: liquid-rise-lite; animation-duration: .6s; }
  body:not(.simple) .room.active .room-inner > :nth-child(2) { animation-delay: .06s; }
  body:not(.simple) .room.active .room-inner > :nth-child(3) { animation-delay: .1s; }
  body:not(.simple) .room.active .room-inner > :nth-child(n+4) { animation-delay: .14s; }
  /* Investigación y Universo: el cambio de paso u obra, sin desenfoque */
  @keyframes step-text-in { from { opacity: 0; translate: calc(var(--dir, 1) * 24px) 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes step-image-in { from { opacity: .3; } to { opacity: 1; } }

  /* 2 · Escenas planas: sin profundidad 3D (con el dedo no hay inclinación que mostrar) */
  .spatial { transform-style: flat; transform: none !important; }
  .world { transform: none !important; transition: none; }

  /* 3 · Sin cristal desenfocado sobre el fondo en movimiento: superficies tintadas casi opacas */
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  dialog::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #02151ceb; }
  html.liquid-gl .header { background: linear-gradient(100deg, #0c2931f2, #0b252dee 55%, #142d2cf2); }
  html.liquid-gl .journey-bar { background: linear-gradient(100deg, #0a252df2, #113139ee 55%, #0a252df2); }
  .floating-note { background: linear-gradient(135deg, #1e464df2, #0f3139f2); }
  .method-console { background: var(--glass-light), linear-gradient(160deg, #0f3640f0, #0a2a33f2); }
  .research-workbench { background: #0b2b35f0; }
  .app-feature, .universe-tabs button, .reading-trigger, .family-data { background-color: #0b2b35e6; }
  .app-controls .circle-btn, .expand-icon { background: #061c24e0; }
  .map-dialog { background: #092831; }
  .light-panel, .media-feature { background: linear-gradient(135deg, rgba(255, 253, 244, .96), rgba(242, 239, 228, .95)); }

  /* 4 · Titulares dorados con el degradado quieto (animarlo repinta el texto en cada fotograma) */
  .hero-copy h1 em, .chapter-intro h2 em, .section-heading h2 em, .universe-copy h2 em { animation: none; background-position: 35% 50%; }
}

/* Lectura en móvil y tableta: ninguna etiqueta por debajo de 11 px (antes había de 7 a 10 px) */
@media (max-width: 980px) {
  .hero-copy .eyebrow, .eyebrow, .console-caption, .result-box > span, .research-visual-footer > span,
  .media-kicker, .media-pill, .media-source small, .media-list .eyebrow, .art-label small, .book-caption > span,
  .universe-tabs button small, .app-num, .dialog-top .eyebrow, .map-card small, .stack-grid article > b { font-size: 11px; }
  .media-photo figcaption { font-size: 10px; }
  .tag { font-size: 10px; }
  .map-card p { font-size: 12px; }
  .mode-btn { font-size: 11px; }
  .journey-progress > span { font-size: 11px; }
  #next { font-size: 12px; white-space: nowrap; }
}
@media (max-width: 340px) {
  .mode-btn { font-size: 10px; }
  #next { font-size: 11px; white-space: normal; line-height: 1.2; text-align: right; }
}

/* Pantallas muy estrechas o letra ampliada (≤ 340 px de ancho útil): cabecera y barra caben siempre */
@media (max-width: 340px) {
  .header { gap: 8px; }
  .brand img { width: 38px; height: 38px; }
  .brand > span { font-size: 12px; letter-spacing: .05em; }
  .header-tools { gap: 6px; }
  /* «Activar 3D / Vista sencilla»: queda el icono; el texto se sigue leyendo con lector de pantalla */
  #motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .mode-btn { min-width: 40px; justify-content: center; }
  .journey-bar { gap: 6px; }
  .journey-progress { gap: 4px; }
  .journey-progress > span { display: none; }
}
@media (max-width: 300px) {
  .brand > span { display: none; }
}
/* Fuentes de las cifras de Familias: más área para tocar el enlace */
.family-data-source a { display: inline-block; padding: 8px 0; margin: -8px 0; }
/* Universo en móvil: la tira de obras no puede ensanchar el capítulo */
.universe-tabs { max-width: 100%; min-width: 0; }
.universe-copy, .universe-art { min-width: 0; }
@media (max-width: 980px) {
  .media-photo figcaption { font-size: 11px; }
  .orbit-label { font-size: 11px; }
  .research-visual-footer .text-link, .text-link.gold { font-size: 12px; }
}
/* Tableta y móvil apaisado: el aro decorativo del emblema no ensancha la portada */
@supports (overflow: clip) { @media (max-width: 980px) { #inicio .room-inner { overflow-x: clip; } } }
/* Universo en pantallas muy estrechas: las flechas y el rótulo de la obra caben en una fila */
@media (max-width: 340px) {
  .art-nav { gap: 8px; }
  .art-nav .art-label { min-width: 0; text-align: center; }
  .art-nav .art-label small { letter-spacing: .08em; }
}
.art-nav .art-label { min-width: 0; }