/* ============================
   FUENTES LOCALES
   ============================ */

/* Títulos: solo para el H1 de pantalla inicio */
@font-face {
  font-family: "IntegralCF";
  src: url("../assets/fonts/IntegralCF-ExtraBold.otf") format("opentype");
  font-weight: 100 900; /* cubre cualquier peso — evita síntesis artificial */
  font-style: normal;
  font-display: block;
}

/* Cuerpo: todo el resto del sitio */
@font-face {
  font-family: "TradeGothic";
  src: url("../assets/fonts/TradeGothicLTStd-BdCn20.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* ============================
   VARIABLES GLOBALES
   ============================ */

:root {
  /* Colores Argos */
  --color-azul-oscuro: #002366;
  --color-azul-medio: #003087;
  --color-lima: #c4d600;
  --color-lima-oscuro: #9db800;

  /* Colores base */
  --color-fondo: #001540;
  --color-texto: #ffffff;
  --color-acento: #c8f000;

  /* Tipografía */
  --fuente-titulo: "IntegralCF", "Arial Black", sans-serif;
  --fuente-cuerpo: "TradeGothic", "Arial Narrow", sans-serif;
  --fuente-principal: "TradeGothic", "Arial Narrow", sans-serif;
  --tamaño-base: 32px;

  /* Tiempos de transición (legacy) */
  --tiempo-transicion: 400ms;
  --tiempo-ease: ease-in-out;

  /* Barra de navegación inferior (barra-nav)
     Componente footer que aparece en pantallas secundarias */
  --barra-nav-altura: 70px;
  --barra-nav-radio: 40px;
  --barra-nav-gap: 8px;
  --barra-nav-padding-lateral: 0px;
  --barra-nav-fondo-home: var(--color-lima-oscuro); /* verde #9DB800          */
  --barra-nav-fondo-tooltip: var(
    --color-lima-oscuro
  ); /* verde #9DB800          */
  --barra-nav-fondo-barra: var(
    --color-lima-oscuro
  ); /* verde #9DB800          */
  --barra-nav-sombra-boton: 0 4px 12px rgba(0, 0, 0, 0.2);
  --barra-nav-duracion-entrada: 350ms;
  --barra-nav-stagger: 150ms;
  --barra-nav-delay-inicial: 600ms;

  /* Navegación direccional entre pantallas
     Editar aquí para ajustar velocidad/curva sin tocar JS ni reglas individuales */
  --nav-dur-salida: 480ms;
  --nav-dur-entrada: 480ms;
  --nav-ease-salida: cubic-bezier(0.4, 0, 1, 1);
  --nav-ease-entrada: cubic-bezier(0, 0, 0.2, 1);
  --nav-z-home: 2; /* home queda debajo durante la transición  */
  --nav-z-secundaria: 4; /* secundarias pasan por encima             */
}

/* ============================
   RESET
   ============================ */

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

/* Todos los headings usan la fuente de cuerpo por defecto.
   Solo .inicio__titulo (H1) recibe --fuente-titulo explícitamente en layout.css */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
}

html,
body {
  width: 100%;
  max-width: 1080px;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--tamaño-base);
  font-weight: 400;
  touch-action: none;
  user-select: none;
}

/* ===== TEMPORAL: wrapper de escalado para pantallas no-tótem ===== */
/* Para quitar en producción: borrar este bloque completo             */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%; /* anula el max-width: 1080px de la regla anterior */
  height: 100%;
  background-color: #000;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#app-wrapper {
  width: 1080px;
  height: 1920px;
  position: relative;
  transform-origin: center center;
  flex-shrink: 0;
  overflow: hidden;
}

/* ===== FIN TEMPORAL ===== */