/* ==========================================================================
   Luna Terra — Base: reset, tipografía, layout, cabecera, pie y controles
   Fuente rectora: Manual de Marca v3.1
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--superficie);
  color: var(--texto-suave);
  font-family: var(--fuente-funcional);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  color: var(--texto);
  line-height: var(--lh-titulo);
  margin: 0;
  letter-spacing: 0.005em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; }

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--texto-enfasis); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Foco visible en todo control — nunca dependiente solo del color (p.10) */
:focus-visible {
  outline: 2px solid var(--foco-color);
  outline-offset: 2px;
  border-radius: var(--radio-boton);
}
.banda-oscura :focus-visible { outline-color: var(--foco-color-inverso); }

/* ---- Layout -------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.lectura { max-width: var(--ancho-lectura); }

.seccion { padding-block: var(--e-9); }
.seccion--compacta { padding-block: var(--e-8); }

.banda-oscura {
  background: var(--superficie-oscura);
  color: var(--texto-inverso-suave);
}
.banda-oscura h1,
.banda-oscura h2,
.banda-oscura h3 { color: var(--texto-inverso); }
.banda-oscura a { color: var(--texto-inverso); }

/* ---- Etiquetas (Montserrat SemiBold, mayúsculas controladas, p.11) ------- */

.etiqueta {
  font-family: var(--fuente-funcional);
  font-size: var(--t-etiqueta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-enfasis);
  margin: 0 0 var(--e-4);
  display: block;
}
.banda-oscura .etiqueta { color: var(--texto-inverso-suave); }

/* Línea fina de cobre: recurso gráfico, nunca texto (p.10, p.13) */
.filete {
  width: 56px;
  height: 2px;
  background: var(--acento-linea);
  border: 0;
  margin: 0 0 var(--e-5);
}

.entradilla {
  font-size: var(--t-cuerpo-grande);
  color: var(--texto-suave);
  line-height: 1.55;
}
.banda-oscura .entradilla { color: var(--texto-inverso-suave); }

/* ---- Botones ------------------------------------------------------------- *
 * Botón principal: fondo borgoña o azul noche con texto crema (p.10).
 * El cobre no se usa como fondo de botón: crema sobre cobre da 3,57:1.      */

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-boton);
  font-family: var(--fuente-funcional);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--mov-control) var(--curva),
              border-color var(--mov-control) var(--curva),
              transform var(--mov-control) var(--curva);
}

.boton--principal { background: var(--lt-borgona); color: var(--lt-crema); }
.boton--principal:hover { background: #522C3A; transform: translateY(-2px); }

/* Compacto: para CTAs dentro de tarjetas (Casos, Laboratorio). */
.boton--sm {
  padding: 10px 20px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.boton--secundario {
  background: transparent;
  color: var(--texto);
  border-color: rgba(13, 27, 42, 0.28);
}
.boton--secundario:hover { border-color: var(--lt-azul-noche); transform: translateY(-2px); }

/* Sobre fondo oscuro (bandas y hero) el botón secundario se invierte.
   Sin esta regla el texto queda azul noche sobre azul noche. */
.banda-oscura .boton--secundario,
.hero .boton--secundario {
  color: var(--texto-inverso);
  border-color: rgba(245, 239, 230, 0.38);
}
.banda-oscura .boton--secundario:hover,
.hero .boton--secundario:hover { border-color: var(--lt-crema); }

/* Enlace con flecha: el hover cambia contraste, no solo color (p.12) */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--texto-enfasis);
  text-decoration: none;
}
.enlace-flecha .flecha {
  transition: transform var(--mov-control) var(--curva);
}
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha:hover .flecha { transform: translateX(4px); }

/* ---- Cabecera ------------------------------------------------------------ *
 * Brief visual §01: transparente sobre el hero; al desplazarse, fondo azul
 * noche con transparencia y blur discreto. El texto es siempre crema porque
 * en ambos estados la cabecera se apoya sobre azul noche u oscuridad.        */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--mov-control) var(--curva),
              border-color var(--mov-control) var(--curva);
}

/* Velo suave en el estado transparente: garantiza que el texto crema de la
   navegación tenga siempre fondo oscuro bajo él, sin dejar de leerse como una
   cabecera transparente sobre el hero. */
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(13, 27, 42, 0.72) 0%,
    rgba(13, 27, 42, 0.38) 60%,
    rgba(13, 27, 42, 0) 100%);
  transition: opacity var(--mov-control) var(--curva);
}

.cabecera[data-fijo] {
  background: rgba(13, 27, 42, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(245, 239, 230, 0.14);
}
.cabecera[data-fijo]::before { opacity: 0; }

.cabecera__interior { position: relative; z-index: 1; }

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--alto-cabecera);
}

.cabecera__logo img { width: 190px; height: auto; }

.nav { display: flex; align-items: center; gap: var(--e-5); }

.nav__lista { display: flex; align-items: center; gap: var(--e-5); }

.nav__enlace {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-inverso-suave);   /* arena sobre azul noche: 10,1:1 */
  text-decoration: none;
  padding-block: var(--e-2);
  border-bottom: 2px solid transparent;
  transition: color var(--mov-control) var(--curva),
              border-color var(--mov-control) var(--curva);
}
.nav__enlace:hover,
.nav__enlace[aria-current="page"],
.nav__enlace[aria-current="true"] {
  color: var(--texto-inverso);
  border-bottom-color: var(--acento-linea);
}

/* Enlaces a páginas aún no construidas: se atenúan lo justo para distinguirlos
   sin bajar de 4,5:1. Al construir cada página se elimina data-pendiente. */
.nav__enlace[data-pendiente] { opacity: 0.7; }

/* ---- Menú móvil: panel de pantalla completa (brief visual §01) ----------- */

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--e-2);
  background: transparent;
  border: 1px solid rgba(245, 239, 230, 0.38);
  border-radius: var(--radio-boton);
  color: var(--texto-inverso);
  font-family: var(--fuente-funcional);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--e-2) var(--e-3);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: border-color var(--mov-control) var(--curva);
}
.nav__toggle:hover { border-color: var(--lt-crema); }

.nav__cta-movil { display: none; }
.nav__cta-movil .boton { width: 100%; justify-content: center; margin-top: var(--e-5); }

@media (max-width: 940px) {
  .cabecera__interior { gap: var(--e-3); }
  .cabecera__logo img { width: 150px; }

  .nav { gap: var(--e-3); }
  .nav__toggle { display: inline-flex; }

  .nav__lista {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    background: var(--superficie-oscura);
    padding: var(--e-9) var(--e-5) var(--e-7);
    overflow-y: auto;
  }
  .cabecera[data-menu="abierto"] .nav__lista { display: flex; }

  .nav__enlace {
    display: block;
    padding: var(--e-4) 0;
    border-bottom: 1px solid rgba(245, 239, 230, 0.14);
    font-family: var(--fuente-titulo);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0;
  }

  .nav__cta-movil { display: block; }

  /* Con el menú abierto la cabecera se opaca para separar logo y botón */
  .cabecera[data-menu="abierto"] { background: var(--superficie-oscura); }

  /* Bajo 940 px el CTA vive dentro del menú */
  .cabecera__interior > .nav > .boton--principal { display: none; }
}

@media (max-width: 420px) {
  .cabecera__logo img { width: 128px; }
  .nav__enlace { font-size: 1.5rem; }
}

/* Con el menú abierto se bloquea el desplazamiento del fondo */
body[data-menu-abierto] { overflow: hidden; }

/* ---- Franja previa al footer -------------------------------------------- */

.prefooter {
  background: var(--superficie-oscura);
  border-top: var(--borde-inverso);
}
.prefooter__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-7);
}
.prefooter__texto {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  color: var(--texto-inverso);
  margin: 0;
}
.prefooter__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--fuente-funcional);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--texto-inverso);
  border-bottom: 1px solid var(--acento-linea);
  padding-bottom: 3px;
  transition: color var(--mov-control) var(--curva);
}
.prefooter__cta .flecha { transition: transform var(--mov-control) var(--curva); }
.prefooter__cta:hover { color: var(--lt-arena); }
.prefooter__cta:hover .flecha { transform: translateX(3px); }

/* ---- Pie: cierre editorial de estudio ----------------------------------- */

.pie { background: var(--superficie-oscura); color: var(--texto-inverso-suave); }

.pie__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);   /* Fase Final §22: 3 columnas + marca (sin "Proyectos") */
  gap: var(--e-7);
  padding-block: var(--e-8) var(--e-7);
  align-items: start;
}
.pie__marca { max-width: 34ch; }
.pie__logo-img { width: 200px; height: auto; margin-bottom: var(--e-4); }
.pie__rol {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-linea);
  margin: 0 0 var(--e-3);
}
.pie__claim {
  font-family: var(--fuente-titulo);
  font-size: 1.375rem;
  color: var(--texto-inverso);
  margin: 0 0 var(--e-3);
}
.pie__texto {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--texto-inverso-suave);
  margin: 0;
}

.pie__titulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-inverso);
  margin: 0 0 var(--e-4);
}
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.pie__enlaces a {
  font-size: 0.875rem;
  color: var(--texto-inverso-suave);
  text-decoration: none;
  transition: color var(--mov-control) var(--curva);
}
.pie__enlaces a:hover { color: var(--texto-inverso); }

/* Legales aún sin página (Fase 4 §26): texto informativo, nunca enlace muerto. */
.pie__pendiente {
  font-size: 0.875rem;
  color: var(--texto-inverso-suave);
  opacity: 0.72;
  cursor: default;
}
.pie__pendiente em {
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.pie__inferior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-5);
  border-top: var(--borde-inverso);
}
.pie__copy { font-size: 0.8125rem; color: var(--texto-inverso-suave); margin: 0; }
.pie__arriba {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--texto-inverso-suave);
  text-decoration: none;
  transition: color var(--mov-control) var(--curva);
}
.pie__arriba:hover { color: var(--acento-linea); }

@media (max-width: 900px) {
  .pie__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--e-6) var(--e-7);
  }
  .pie__marca { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .pie__grid { grid-template-columns: 1fr; }
  .prefooter__interior { padding-block: var(--e-6); }
}

/* ---- Salto de contenido -------------------------------------------------- */

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lt-azul-noche);
  color: var(--lt-crema);
  padding: var(--e-3) var(--e-4);
  z-index: 100;
  border-radius: 0 0 var(--radio-boton) 0;
}
.saltar:focus { left: 0; }

/* ---- Revelado al hacer scroll (400–700 ms, p.12) ------------------------- *
 * El contenido es VISIBLE por defecto. El estado oculto lo aplica el script
 * (clase .pendiente) solo cuando puede garantizar que volverá a revelarlo.
 * Si el JS falla, no carga o el navegador no soporta IntersectionObserver,
 * la página se ve completa: nunca se depende del script para leer el caso.  */

.revelar {
  transition: opacity var(--mov-revelado) var(--curva),
              transform var(--mov-revelado) var(--curva);
}
.revelar.pendiente { opacity: 0; transform: translateY(16px); }
.revelar.es-visible { opacity: 1; transform: none; }

/* Escalonado: los hijos entran uno tras otro, no en bloque. */
.escalonar > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--mov-revelado) var(--curva),
              transform var(--mov-revelado) var(--curva);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.escalonar.es-visible > * { opacity: 1; transform: none; }
.no-js .escalonar > * { opacity: 1; transform: none; }

/* Preferencia del sistema: se respeta y se sustituye video por imagen (p.12) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* ---- Progreso de lectura ------------------------------------------------- *
 * El patrón de recorrido narrativo pide un indicador de avance. Es decorativo:
 * se marca aria-hidden y desaparece con prefers-reduced-motion.              */

.progreso {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--leido, 0));
  transform-origin: 0 50%;
  background: var(--lt-cobre);
  z-index: 70;
  pointer-events: none;
}

/* ---- Iconos ------------------------------------------------------------- */

.icono { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.hero__control .icono { width: 14px; height: 14px; }
.hero__control [data-icono="reanudar"] { display: none; }
.hero__control[data-estado="pausado"] [data-icono="pausar"] { display: none; }
.hero__control[data-estado="pausado"] [data-icono="reanudar"] { display: block; }

@media (prefers-reduced-motion: reduce) {
  .progreso { display: none; }
}

/* ---- Áreas táctiles ------------------------------------------------------ *
 * Todo control accionable llega a 44 px de alto. Los radios de 18 px no se
 * agrandan: su zona tocable es la etiqueta que los envuelve, de 48 px.       */

.nav__toggle { min-height: 44px; }
.nav__enlace { min-height: 44px; display: inline-flex; align-items: center; }
.cabecera__logo { display: inline-flex; align-items: center; min-height: 44px; }
.enlace-flecha { min-height: 44px; }
.leer-mas { min-height: 44px; display: inline-flex; align-items: center; }
.desplegable summary { min-height: 44px; }
.hero__descender { padding-top: var(--e-2); }