:root {
/* VARIABLES DE ESCALADO FLUIDO */
  --size-min: 0.75rem;         /* Tamaño mínimo (aprox 14px):    0.875rem     */
  --size-mid: 0.75rem + 0.9vw; /* Comportamiento fluido e ideal: 1vw + 0.5rem */
  --size-max: 1.25rem;         /* Tamaño máximo (aprox 18px):    1.125rem     */

  --gap:      1.5em;
  --radio:    0.25;

  --fuente:   'Lora', serif;

  --neb-dur-open:  0.55s;
  --neb-dur-close: 0.38s;

  --blanco:   #ffffff;
  --azul:     #4492dc;
  --rojo:     #d00000;
  --naranja:  #f02000;
  --borde:    #999999;
  --fondo-th: rgba(255,255,255,0.22);
  --fondo-td: rgba(255,255,255,0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  /* Ahora el tamaño base del documento se rige estrictamente por tus 3 variables */
  font-size: clamp(var(--size-min), var(--size-mid), var(--size-max));
  height: auto;
  min-height: 100%;
  transition: opacity 0.5s ease;
  opacity: 1;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Iconos de portada y móviles: evita el rectángulo de selección/arrastre e interacciones fantasma */
#portada-cont a,
#portada-cont img,
.solo-movil .bloque-iconos a,
.solo-movil .bloque-iconos img,
.solo-movil .summary-icon {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none; /* <--- Añadido estándar */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding-top: 1em;
  font-family: var(--fuente);
  font-size: 1em;
  color: var(--blanco);
  background: url("/assets/img/fondo.webp") center top repeat fixed;
  background-size: 67% auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

html { scrollbar-gutter: stable; }
/* general.css — índice por componente (cada uno: base + @portrait + @landscape)
      1. BASE / RESET / TIPOGRAFÍA
      2. HEADER
      3. MAIN / #principal
      4. TABLAS
      5. FILA-TABLAS
      6. CITA-FINAL
      7. SUB-ACORDEONES
      8. SECCIÓN (categoría / título)
      9. GALERÍA
     10. PAGINACIÓN
     11. FADE-OUT
     12. FOOTER
     13. TOGGLE portada (.solo-*)
     14. NAV-FISICA (menú de secciones)
*/

hr {
	display: block;					/* Fuerza su renderizado en pantalla */
	height: 6px;					/* Grosor de la línea */
	margin: 1.5rem 0 0.5rem 0;		/* Espaciado vertical proporcional en móvil y escritorio */
  background: linear-gradient(90deg, transparent, var(--azul, #1b235a), transparent);[cite: 9]
  
  animation: expansion-linea 1.2s ease-out forwards;
  transform-origin: center;
}

@keyframes expansion-linea {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* BASE / RESET / TIPOGRAFÍA */
sup {
  font-size: 0.5em;
  font-weight: normal;
  vertical-align: super;
  margin-left: 0.125em;
}

a {
  color: var(--blanco);
  text-decoration: none;
  transition: color .5s ease;
}

a:hover {
  color: var(--naranja);
  text-decoration: underline;
}

p { margin: 0.75em 0; }

img { max-width: 100%; height: auto; display: block; }

header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3.75em;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5em;
  z-index: 1000;
  /* Degradado suave: se funde con el cielo (oscuro arriba -> transparente). Ajustable. */
  background: linear-gradient(to bottom, rgba(12,14,24,0.5) 0%, rgba(12,14,24,0.25) 50%, rgba(12,14,24,0) 100%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

header img { height: 2em; width: auto; }

header h1 {
  margin: 0;
  font-size: 1.5em;
  color: var(--blanco);
  line-height: 1;
  display: inline-block;
}

header a,
header a#toggle-titulos,
.nav-fisica a {
  display: inline-flex;
  align-items: center;
  color: var(--blanco);
  white-space: nowrap;
  text-decoration: none;
  transition: color .25s ease, transform .2s ease, opacity .2s ease;
  touch-action: manipulation;  /* toque sin retardo de 300ms */
}

header a#toggle-titulos:visited {
  color: var(--blanco);
}

/* Cabecera compacta para páginas de contenido */
@media (orientation: landscape) and (max-height: 480px) {
  header { height: 60px; padding: 0 12px; font-size: 0.75em; }
  header img { height: 2.25em; }
  header h1 {
    font-size: 1.6em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }
}

@media (orientation: portrait) {
body {
    background-repeat: no-repeat;
    background-size: cover; /* Cubre toda la pantalla sin repetirse */
    background-attachment: fixed; /* Mantiene el fondo fijo al hacer scroll */
  }

header { 
    height: calc(var(--size-min) * 3.5); 
    padding: 0 calc(var(--size-min) * 0.8); 
  }
  header h1 {
    font-size: calc(var(--size-min) * 1.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }
  header img { 
    height: 1.8em; 
  }
}

header > a { flex: 0 0 auto; display: inline-flex; align-items: center; }

main {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 4em 1em 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

@media (orientation: portrait) {
  /* Estructura base a 1 columna para todo el modo vertical */
  main { 
    margin: auto; 
    /* El padding es proporcional al tamaño máximo definido en las variables */
    padding: calc(var(--size-max) * 3) var(--size-max) var(--size-max); 
  }
}

/* PÁGINAS DE CONTENIDO — overrides responsivos por componente
   Acotado con .pag-fisica para NO afectar a la portada */

@media (min-width: 769px) and (min-height: 481px) {
  /* flex-start (antes center): con centrado vertical la distancia al header dependía
     del contenido de cada página; así la fila-rama arranca igual en las 6 secciones */
  #principal.pag-fisica main { flex: 1; justify-content: flex-start; padding-top: 60px; padding-bottom: 60px; }
}

@media (min-width: 769px) and (min-height: 481px) and (max-width: 950px) {
  #principal.pag-fisica main { padding-top: 60px; padding-bottom: 35px; }
}

@media (orientation: landscape) and (max-height: 480px) {
  #principal.pag-fisica main {
    position: relative; top: auto; left: auto; right: auto; bottom: auto;
    overflow-y: visible; display: flex; flex-direction: column;
    justify-content: flex-start; align-items: center;
    padding: 34px 8px 16px; gap: 16px; margin: 0; width: 100%;
    min-height: calc(100dvh - 60px);
  }
}

@media (orientation: portrait) and (max-width: 768px) {
  .pag-fisica main {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    padding: 3.75em 0.5rem 1rem; gap: var(--size-min); margin: 0;
  }
  body#principal.pag-fisica main { justify-content: flex-start; } /* antes center: ver nota en escritorio */
  body.pag-fisica { overflow: auto; }
}

.animacion-rama {
    width:         var(--dwsvg, 15%);
    margin-top:    var(--dt, -1em);
    margin-bottom: var(--db, -2em);
    display: block;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none; /* su caja solapa los primeros enlaces: que no capture sus clics/hover */
}
@media (orientation: landscape) and (max-height: 480px) {
    .animacion-rama {
        width:         var(--lwsvg, 15%); 
        margin-top:    var(--lt, -1.6em);   
        margin-bottom: var(--lb, -1.6em);
    }
}
@media (orientation: portrait) and (max-width: 768px) {
    .animacion-rama {
        width:         var(--pwsvg, 30%);
        margin-top:    var(--pt, -2em);
        margin-bottom: var(--pb, -2em);
    }
}

/* FILA-RAMA: animación SVG a la izquierda + descripción del fenómeno a la derecha.
   Las variables --ancho-svg/--mt/--mb se ponen en el CONTENEDOR (el SVG las hereda). */
.fila-rama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    width: 100%;
    margin-top:    var(--dt, -1em);
    margin-bottom: var(--db, -2em);
    pointer-events: none; /* igual que el SVG suelto: no captura clics del contenido que solapa */
}

.fila-rama .animacion-rama { margin: 0; flex: 0 0 auto; }

.rama-desc {
    margin: 0;
    max-width: 26em;
    font-size: 0.95em;
    line-height: 1.55;
    text-align: left;
    opacity: 0.92;
    text-shadow: 0 0.06em 0.25em rgba(0,0,0,0.6);
    text-wrap: pretty;
}

@media (orientation: landscape) and (max-height: 480px) {
    .fila-rama {
        margin-top:    var(--lt, 0em);
        margin-bottom: var(--lb, -1.4em);
    }
    .rama-desc { 
        margin-left:   var(--ll, -2em);
        margin-right:  var(--lr, -2em);        
        font-size: 0.75em; 
        max-width: 32em;
    }
}

@media (orientation: portrait) and (max-width: 768px) {
    .fila-rama {
        gap: 1em;
        margin-top:    var(--pt, -1.8em);
        margin-bottom: var(--pb, -1.6em);
    }
    .rama-desc { 
        margin-left:   var(--pl, -1em);
        margin-right:  var(--pr, 0em);        
        font-size: 0.8em; 
        max-width: 22em;
        line-height: 1.25;    
    }
}

/* Índices de sección (i/g/e/o/f/n): el SVG superior tiene margin-bottom negativo y
   SOLAPA la parte alta del contenido. En e/o/f su parte inferior es BRILLANTE; al
   desplegar un acordeón, la animación de opacity generaba capas de composición y el
   compositor colaba el SVG por delante -> velo sobre los primeros enlaces (en i/g/n no
   se notaba porque ahí el SVG es oscuro). Solución: el contenido va en su PROPIA capa
   de composición estable (will-change) y por encima (z-index), de modo que el
   compositor no pueda reordenar el SVG por delante al desplegar. */
#principal.pag-fisica .fila-tablas {
    position: relative;
    z-index: 1;
    will-change: transform;
}

table { width: 100%; border-collapse: collapse; margin: 0 auto; }

th {
  padding: 0.56em 0.875em;
  border: 0.125em solid var(--borde);
  background-color: var(--fondo-th);
  font-size: 1em;
  text-align: center;
  border-radius: var(--radio) var(--radio) 0 0;
}

td {
  padding: 0.75em 1em;
  border: 0.125em dotted var(--borde);
  border-top: none;
  background-color: var(--fondo-td);
  font-size: 1.1em;
  vertical-align: top;
  text-align: center;
  line-height: 1.7;
  border-radius: 0 0 var(--radio) var(--radio);
}

.tabla-limpia td,
.tabla-limpia th {
  border: none;
  background: transparent;
  text-align: center;
  vertical-align: top;
}

/* FILA-TABLAS */
.fila-tablas {
  display: grid;
  gap: var(--gap);
  width: 100%;
  align-items: stretch;
}

.fila-tablas.t1 { grid-template-columns: 1fr; }

.fila-tablas.t1 table { max-width: 32em; margin: 0 auto; }

.fila-tablas.t2 { grid-template-columns: repeat(2,1fr); }

.fila-tablas.t3 { grid-template-columns: repeat(3,1fr); }

@media (orientation: portrait) {
  .fila-tablas.t2,
  .fila-tablas.t3 { 
    grid-template-columns: 1fr; 
  }
}

/* .fila-tablas (contenido) */

@media (orientation: landscape) and (max-height: 480px) {
  .pag-fisica .fila-tablas.t1 { display: flex; justify-content: center; width: 100%; }
  .pag-fisica .fila-tablas:first-child { gap: 40px; }
}

@media (orientation: portrait) and (max-width: 768px) {
  .pag-fisica .fila-tablas:first-child { gap: 3.125em; }
}

.cita-final {
  display: block;
  margin: 0.75em auto 0;
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
  padding: 1.25em;
  border: 0.125em solid var(--borde);
  background-color: rgba(255,255,255,0.18);
  max-width: 77%;
  border-radius: var(--radio);
}

.cita-final span {
  display: block;
  margin-top: 0.375em;
  font-weight: normal;
  font-style: normal;
}

@media (orientation: portrait) {
  .cita-final { 
    max-width: 95%; 
    font-size: 1em; 
  }
}

/* Sub-acordeones (compartido entre escritorio y móvil para otras páginas) */
.acordeon-body {
  padding: 0.75em 0.06em;
  border-top: none;
  animation: abrir .4s ease-out;
  display: flex;
  flex-direction: column;
  gap: 0.4em;     /* x: separación entre enlaces (rectángulos rojos) */
  border-radius: 0 0 1.5em 1.5em;
  position: relative;
  z-index: 0;
}

.acordeon-body > a {
  display: block;
  text-align: center;
}

.sub-ac {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  line-height: 1.8;
}

/* SEPARACIONES (x = 0.4em, el gap del contenedor):
   · enlace↔enlace: x
   · todo lo que linda con un acordeón: 4x (se suma un margen de 3x al gap) */
.acordeon-body > * + .sub-ac { margin-top: 1.2em; }          /* enlace/acordeón → acordeón */
.acordeon-body > .sub-ac + .seccion-categoria { margin-top: 1.2em; } /* acordeón → enlace */

.sub-ac > summary {
  padding: 0.25em 0.75em;
  background: rgba(68,146,220,0.35);  /* --azul, menos transparente */
  border: 0.06em solid rgba(255,255,255,0.25);
  border-radius: 1.25em;
  font-size: 1em;
  cursor: pointer;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, box-shadow .3s;
  margin: 0 auto !important;
  text-align: center !important;
}

.sub-ac > summary::-webkit-details-marker { display: none; }

.sub-ac > summary:hover {
  background: rgba(68,146,220,0.50);
  box-shadow: 0 0 0.625em 0.125em rgba(255,255,255,0.12);
}

.sub-ac-body {
  padding: 0.4em 1em;     /* x: separación entre el óvalo del acordeón y sus enlaces */
  margin-top: 0;
  border-left: 0.125em solid rgba(255,255,255,0.22);
  border-right: 0.125em solid rgba(255,255,255,0.22);
  font-size: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;             /* x: separación entre los enlaces desplegados */
  border-radius: 0 0 1em 1em;
}

details.sub-ac.pinned > summary {
  background: rgba(68,146,220,0.50) !important;
  border-color: rgba(255,255,255,0.45) !important;
  box-shadow: 0 0 0.875em 0.25em rgba(255,255,255,0.18) !important;
  color: var(--blanco) !important;
  font-weight: bold !important;
}

@keyframes abrir {
  from { opacity: 0; transform: translateY(-0.375em) }
  to   { opacity: 1; transform: translateY(0) }
}

@media (orientation: portrait) {
  .acordeon-body > .sub-ac { 
    width: 100% !important; 
    max-width: 100% !important; 
  }
  .sub-ac > summary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .sub-ac-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* .sub-ac > summary (botón de subacordeón, contenido)
   ESCRITORIO: versión compacta (más estrecho y más bajo) */

@media (min-width: 769px) and (min-height: 481px) {
  .pag-fisica .sub-ac > summary {
    font-size: 1.05em;
    width: 30.5em;          /* ≈32em a tamaño base: algo más ancho que .seccion-categoria (30em) */
    max-width: 100%;
    padding: 0.15em 0.75em;
    line-height: 1.5;
  }
  .pag-fisica .seccion-categoria { width: 29em; max-width: 100%; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .pag-fisica .sub-ac > summary { font-size: 1.2em; width: 490px; max-width: 100%; }
}

@media (orientation: portrait) and (max-width: 768px) {
  .pag-fisica .sub-ac > summary { font-size: 1.2em; width: 100% !important; max-width: 32.5em !important; }
}

/* ---- PÁGINAS ÍNDICE DE SECCIÓN (i/g/e/o/f/n /index.html) ----
   Únicas páginas con #principal + .pag-fisica a la vez, así que estas reglas
   (más específicas por el #id) sobreescriben las de arriba SOLO aquí, sin
   afectar al resto de páginas de física que comparten .sub-ac/.seccion-categoria.
   El header fuera de #principal main, y sin selectores de header aquí */

@media (min-width: 769px) and (min-height: 481px) {
  #principal.pag-fisica { --gap: 1em; }

  #principal.pag-fisica .sub-ac-body {
    width: 32em;             /* Mismo ancho exacto que el summary superior */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.32em 0;       /* Cero a los lados para que las líneas toquen el borde */
    gap: 0.3em;
    box-sizing: border-box;  /* Incluye los bordes dentro de los 32em */
    display: flex;
    flex-direction: column;
    align-items: center;     /* Centra los rectángulos rojos en medio de las líneas */
  }
  
  /* Los enlaces DENTRO miden lo mismo que los de fuera (29em) */
  #principal.pag-fisica .sub-ac-body .seccion-categoria {
    width: 29em;
    box-sizing: border-box;
  }
  #principal.pag-fisica .acordeon-body { gap: 0.32em; }
  #principal.pag-fisica .acordeon-body > * + .sub-ac,
  #principal.pag-fisica .acordeon-body > .sub-ac + .seccion-categoria { margin-top: 0.9em; }
  /* El acordeón (summary + líneas verticales) es más ancho que los enlaces rojos
     a propósito: sus extremos redondeados sobresalen del ancho de los enlaces. */
  #principal.pag-fisica .sub-ac-body {
    width: 32em;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
	padding: 0.32em 0; /* Al ser 0 a los lados, las líneas tocan el borde de los 32em */
    gap: 0.3em;
    box-sizing: border-box; /* Fuerza a que el borde cuente dentro de los 32em */
  }
  /* Los enlaces DENTRO de un acordeón abierto deben medir EXACTAMENTE lo mismo
     que los enlaces sueltos de fuera (mismo ancho fijo, no relativo al contenedor). */
  #principal.pag-fisica .sub-ac-body .seccion-categoria {
    width: 29em;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  #principal.pag-fisica { --gap: 0.8em; }
  #principal.pag-fisica .sub-ac > summary {
    font-size: 1.05em;
    width: 400px;
    padding: 0.18em 0.7em;
    line-height: 1.3;
  }
  #principal.pag-fisica .seccion-categoria {
    width: 340px;
    font-size: 0.92em;
    padding: 0.3em 0.65em;
  }
  #principal.pag-fisica .acordeon-body { gap: 0.3em; }
  #principal.pag-fisica .acordeon-body > * + .sub-ac,
  #principal.pag-fisica .acordeon-body > .sub-ac + .seccion-categoria { margin-top: 0.8em; }
  /* Mismo motivo que en escritorio: ancho del acordeón abierto = ancho del summary */
  #principal.pag-fisica .sub-ac-body {
    width: 400px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.3em 0.8em;
    gap: 0.28em;
  }
}

@media (orientation: portrait) and (max-width: 768px) {
  #principal.pag-fisica { --gap: 0.65em; }
  /* Fuente sin cambios en portrait (ya correcta): solo relleno/altura y gap, que sí sobraba */
  #principal.pag-fisica .sub-ac > summary {
    padding: 0.18em 0.7em;
    line-height: 1.3;
  }
  #principal.pag-fisica .seccion-categoria {
    padding: 0.28em 0.7em;
  }
  #principal.pag-fisica .acordeon-body { gap: 0.3em; }
  #principal.pag-fisica .acordeon-body > * + .sub-ac,
  #principal.pag-fisica .acordeon-body > .sub-ac + .seccion-categoria { margin-top: 0.85em; }
  #principal.pag-fisica .sub-ac-body { padding: 0.3em 0.85em; gap: 0.28em; }
}

/* SECCIÓN (categoría/título) */
.seccion-titulo {
  border: none;
  padding: 0 0 0.625em;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
}

.seccion-categoria {
  display: inline-flex;
  gap: 0.25em;
  justify-content: center;
  width: 41.25em;
  padding: 0.375em 0.75em;
  line-height: normal;
  border: 0.125em solid rgba(160,80,120,0.8);
  background-color: rgba(120,60,80,0.5) !important;
  font-size: 1em;
  font-weight: normal;
  text-align: center;
  border-radius: var(--radio);
  margin: 0 auto;
}

.seccion-categoria a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  width: 100%;
  margin: -0.375em -0.75em;
  padding: 0.375em 0.75em;
}

.seccion-categoria a:hover { text-decoration: none; }

.seccion-categoria sup {
  color: var(--azul);
  font-size: 0.75em;
  position: relative;
  top: -0.3em;
}

@media (orientation: portrait) {
  .sub-ac-body .seccion-categoria,
  .seccion-categoria {
    width: 100% !important;
    max-width: 32.5em !important;
    box-sizing: border-box !important;
  }
}

/* .seccion-categoria (contenido) */
@media (orientation: landscape) and (max-height: 480px) {
  .pag-fisica .seccion-categoria { width: 408px; max-width: 408px; }
}

@media (orientation: portrait) and (max-width: 768px) {
  .pag-fisica .sub-ac-body .seccion-categoria,
  .pag-fisica .seccion-categoria { width: 90% !important; max-width: 36em !important; }
  .pag-fisica main {
    position: relative !important;
    min-height: calc(100vh - 3.75em - 2em) !important; /* Descuenta cabecera e hilos */
    overflow-y: visible !important;
    padding-top: 5em !important; /* Evita que el header fijo tape el contenido inicial */
    }
  body.pag-fisica {
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    }
}

/* Galería */
video:not(.galeria *) {
  border: 0.125em solid var(--borde);
  margin: 1.25em 0;
  background: #000;
  max-width: 100%;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.galeria.h-v { grid-template-columns: 4fr 3fr; align-items: center; }

.galeria.v-h { grid-template-columns: 3fr 4fr; align-items: center; }

/* Dos fotos verticales con el mismo ancho de columna que la vertical de .v-h (3/7 ≈ 42.857%) */
.galeria.v-v {
  grid-template-columns: repeat(2, minmax(0, calc(3 / 7 * 100%)));
  justify-content: center;
  align-items: center;
}

.galeria figure { margin: 0; display: flex; flex-direction: column; gap: 0.375em; }

.galeria .foto-h { aspect-ratio: 4 / 3; }

.galeria .foto-h img { width:100%;height:100%;object-fit:cover;border-radius:var(--radio);display:block; }

.galeria .foto-v { aspect-ratio: 3 / 4; }

.galeria .foto-v img { width:100%;height:100%;object-fit:cover;border-radius:var(--radio);display:block; }

.galeria .video-h .video-wrap,
.galeria .video-v .video-wrap { position:relative;width:100%;aspect-ratio:4/3; }

.galeria .video-v { align-self: stretch; }

.galeria .video-h .video-wrap iframe,
.galeria .video-v .video-wrap iframe,
.galeria .video-h .video-wrap video,
.galeria .video-v .video-wrap video {
  position:absolute;inset:0;width:100%;height:100%;
  border:none;border-radius:var(--radio);object-fit:cover;background:#000;
}

.galeria.solo { grid-template-columns: 1fr; }

.galeria.solo figure { aspect-ratio: unset; }

.galeria.solo img { width:100%;height:auto;object-fit:unset; }

.galeria.solo iframe {
  width:100%;height:auto;aspect-ratio:16/9;
  border:none;border-radius:var(--radio);display:block;
}

/* titulo: estilo global (también suelto, sin .galeria) */
titulo {
  display: block; width: 100%; color: #f2ebd9; font-size: 1.2em; text-align: center;
  opacity: 0.9; background: rgba(99,99,99,0.5); border: 0.06em solid rgba(255,255,255,0.75);
  /* width 100%: en portrait main es flex con align-items:center y sin ancho el bloque
     se encoge a su contenido; con él ocupa todo en ambos modos */
}

.galeria subtitulo {
	display: block; color: var(--rojo); font-size: 1.2em; text-align: center;
	opacity: 0.9; background: #f2ebd9; border: 0.06em solid rgba(255,255,255,0.75);
}

.galeria pie {
	display: block; color: #f2ebd9; font-size: 0.8em; text-align: center;
	opacity: 0.9; background: rgba(69,99,159,0.8); border: 0px;
}

.galeria pie1 {
	grid-column: 1 / -1; color: var(--blanco); font-size: 0.8em; text-align: center;
	opacity: 0.9; background: rgba(99,99,99,0.8); border: 0px;
}

.galeria pie2 {
	grid-column: 1 / -1; color: var(--naranja); font-size: 0.8em; text-align: center;
	opacity: 0.9; background: rgba(99,99,99,0.1); border: 0px;}

.galeria figcaption {
	grid-column: 1 / -1; color:var(--blanco); font-size:1em; text-align:center; opacity:0.9; 
}

@media (orientation: landscape) {
  .galeria.solo img { max-width: 50em; margin-left: auto; margin-right: auto; }
}

@media (orientation: portrait) {
  /* Galerías en portrait: una foto por fila (todas las anchuras) */
  .galeria,
  .galeria.h-v,
  .galeria.v-h,
  .galeria.v-v {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  /* La foto vertical (3/4) ocupa de ancho lo mismo que el ALTO de la
     horizontal: la horizontal va a ancho completo en 4/3, así que su alto
     es el 75% del ancho → la vertical va al 75% de ancho, centrada. */
  .galeria .foto-v {
    width: 75% !important;
    justify-self: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  padding: 0.8em 0 0.8em;
  flex-wrap: wrap;
}

/* El menú de paginación se oculta desde la carga —así no parpadea— :
   lo sustituyen las flechas laterales (assets/js/navegacion.js).
   Permanece en el DOM como fuente de datos de la paginación. */
.paginacion { display: none; }

.paginacion a,
.paginacion .pag-actual {
  background: #f2ebd9;
  color: #1d1d1d;
  opacity: 0.75;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0.8em 0 0.8em;
  min-width: 2em;
  border-radius: 0.06em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow:
    0 0.06em 0.06em rgba(0,0,0,0.15),
    0 0.125em 0.25em rgba(0,0,0,0.25),
    inset 0 0 0.19em rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.paginacion .pag-actual {
  background: var(--rojo) !important;
  color: var(--blanco) !important;
  box-shadow:
    0 0.125em 0.25em rgba(0,0,0,0.4),
    inset 0 0 0.25em rgba(0,0,0,0.2);
}

.paginacion a:hover {
  color: var(--azul);
  text-decoration: none !important;
  transform: translateY(-0.19em);
  box-shadow:
    0 0.375em 0.75em rgba(0,0,0,0.35),
    0 0.19em 0.3125em rgba(0,0,0,0.25);
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Footer a ancho completo: © a la izquierda, visitas a la derecha */
.pie-pagina-universal {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em 1.5em;
}

.pie-pagina-universal > div > div:first-child {
  text-align: left !important;
}

/* TOGGLE portada (.solo-*) */
.solo-escritorio { 
  display: block !important; 
}

.solo-movil { 
  display: none !important; 
}

@media (orientation: portrait) {
.pie-pagina-universal {
    margin-top: auto;
  }

  /* La portada usa el MISMO diseño plano (#portada-cont) en ambas orientaciones */
  .solo-escritorio {
    display: block !important;
  }
  .solo-movil {
    display: none !important;
  }
}

/* NOVAS (destellos esporádicos de fondo: novas/supernovas lejanas)
   La FORMA sale de /assets/svg/nova.svg usado como MÁSCARA; el COLOR es el background
   del elemento y cambia durante el destello. Reparte principal.js por niveles */

/* Paleta de las novas */
:root {
  --nova-rojo:     #ff3b24;
  --nova-naranja:  #ff9a3c;
  --nova-amarillo: #ffe25a;
  --nova-azul:     #6fb1ff;
}

.novas-layer {
  position: fixed;
  inset: 0;
  z-index: -1;            /* sobre el cielo (fondo del body), detrás del contenido */
  pointer-events: none;   /* nunca interceptan clics */
  overflow: hidden;
}

.nova {
  position: absolute;
  width: 12px;            /* el JS fija ancho y alto según el nivel */
  height: 12px;
  opacity: 0;             /* invisible salvo durante el destello */
  transform: scale(0.3);
  will-change: opacity, transform, background-color;
  /* La forma (glow + púas) viene del SVG como máscara */
  -webkit-mask: url(/assets/svg/nova.svg) center / contain no-repeat;
          mask: url(/assets/svg/nova.svg) center / contain no-repeat;
  background-color: var(--c1, #ffffff);   /* HALO: color de fase; el JS fija --c1/--c2/--c3 */
  /* NÚCLEO blanco-caliente (estático) encima del halo de color */
  background-image: radial-gradient(circle, #ffffff 0%, #ffffff 6%, rgba(255,255,255,0) 30%);
  /* El destello ocupa el 6% del ciclo. La DURACIÓN del ciclo (y con ella la
     frecuencia y la duración del destello) la fija principal.js por nivel
     (60/120/240/480/960 s). 60s es solo el valor por defecto. */
  animation: nova-flash 60s linear infinite;
}

/* Curva de luz + cambio de color por fases (--c1 inicial, --c2 intermedia, --c3 final) */
@keyframes nova-flash {
  0%   { opacity: 0;    transform: scale(0.30); background-color: var(--c1); }  /* oscura */
  1%   { opacity: 1;    transform: scale(1.50); background-color: var(--c1); }  /* fase inicial */
  2%   { opacity: 0.90; transform: scale(1.10); background-color: var(--c2); }  /* fase intermedia (pico) */
  4%   { opacity: 0.35; transform: scale(0.95); background-color: var(--c3); }  /* fase final */
  6%   { opacity: 0;    transform: scale(0.80); background-color: var(--c3); }  /* apagado */
  100% { opacity: 0;    transform: scale(0.30); background-color: var(--c3); }  /* oscura el resto del ciclo */
}

/* Nova ×16 (la mayor): mismo periodo (16z = 960s, igual de rara) pero destello
   más corto (~29s = 3% del ciclo) en vez de los 57,6s que tocarían al 6%. */
@keyframes nova-flash-grande {
  0%   { opacity: 0;    transform: scale(0.30); background-color: var(--c1); }
  0.5% { opacity: 1;    transform: scale(1.50); background-color: var(--c1); }  /* fase inicial */
  1%   { opacity: 0.92; transform: scale(1.12); background-color: var(--c2); }  /* fase intermedia */
  2%   { opacity: 0.40; transform: scale(0.98); background-color: var(--c3); }  /* fase final */
  3%   { opacity: 0;    transform: scale(0.85); background-color: var(--c3); }  /* apagado (~29s) */
  100% { opacity: 0;    transform: scale(0.30); background-color: var(--c3); }
}

/* Halo radiante propio de la nova ×16 (las demás no lo llevan) */
.nova--grande {
  filter:
    drop-shadow(0 0 16px rgba(255,255,255,0.95))
    drop-shadow(0 0 55px var(--c2))
    drop-shadow(0 0 110px var(--c3));
}

/* Respeta a quien prefiere menos animación */
@media (prefers-reduced-motion: reduce) {
  .nova { animation: none; opacity: 0; }
}

/* NAV-FISICA (menú de secciones) */
header:has(.nav-fisica) { gap: 0.75em; }

.nav-fisica {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55em;
  overflow-x: auto;            /* salvaguarda en pantallas muy estrechas */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-fisica::-webkit-scrollbar { display: none; }

.nav-fisica a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--blanco);
  white-space: nowrap;
  text-decoration: none;
  transition: color .25s ease, transform .2s ease, opacity .2s ease;
  touch-action: manipulation;  /* toque sin retardo de 300ms */
}

.nav-fisica a.actual {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
  color: var(--blanco);
  text-shadow: 0 0 10px rgba(255,255,255,0.25);
}

.nav-fisica a.actual:hover { color: var(--naranja); }

/* Las otras 5 = solo icono de portrait, sin texto */
.nav-fisica a.ic { opacity: 0.85; }

.nav-fisica a.ic img { height: 1.5em; width: auto; display: block; }

.nav-fisica a.ic:hover { opacity: 1; transform: scale(1.12); }

/* El icono de Física FUNDAMENTAL se amplía (no altera su caja de layout) */
.nav-fisica a.ic[href="/f"] img { transform: scale(1.6); }
.nav-fisica a.ic[href="/o"] img { transform: scale(1.3); }

/* ETIQUETA EMERGENTE (escritorio con ratón): nombre de la sección bajo el icono */
@media (hover: hover) and (min-width: 769px) {
  .nav-fisica { overflow: visible; }        /* que la etiqueta no quede recortada */
  .nav-fisica a.ic { position: relative; }
  .nav-fisica a.ic::after {
    content: attr(aria-label);
    position: absolute;
    top: calc(100% + 0.5em);
    left: 50%;
    transform: translate(-50%, -0.25em);
    font-size: 0.72em;
    line-height: 1.2;
    padding: 0.3em 0.7em;
    border-radius: 1em;
    background: rgba(12,14,24,0.85);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--blanco);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
  }
  .nav-fisica a.ic:hover::after,
  .nav-fisica a.ic:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .nav-fisica a.ic:focus-visible { outline: 2px solid var(--azul); border-radius: 0.25em; }
}

/* Los iconos de divulgación llenan su lienzo (los de física llevan margen interno) */
.divulgacion .nav-fisica a.ic img { transform: scale(0.8); }

@media (orientation: portrait) {
  .nav-fisica a.actual { font-size: calc(var(--size-min) * 1.4); letter-spacing: -0.05em; }
  .nav-fisica a.ic img { height: 1.25rem; }
  .nav-fisica { gap: 0.3em; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .nav-fisica a.actual { font-size: 1.6em; }
  .nav-fisica a.ic img { height: 1.4rem; }
}

/* Ocultamos los iconos de navegación del menú superior */
body.portada-oculta header .nav-fisica {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

/* ESTADO FANTASMA DEL HEADER PARA RETORNO */

body.portada-oculta header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 999999 !important; /* Superior a la portada para poder pulsar */
}

body.portada-oculta header .nav-fisica {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.portada-oculta header img {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.portada-oculta header a#toggle-titulos {
    opacity: 0.15 !important;
    filter: none !important;
    pointer-events: auto !important; /* Garantiza el clic de vuelta */
    white-space: nowrap !important;
    transition: opacity 0.3s ease !important;
}

body.portada-oculta header a#toggle-titulos:hover {
    opacity: 0.6 !important;
}

body.portada-oculta footer {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}