@charset "UTF-8";

/* ============================================================================
   02-base.css — sysnetia.com
   ----------------------------------------------------------------------------
   FASE 1. Reset acotado + tipografía base + utilidades mínimas.

   QUÉ HACE ESTE ARCHIVO:
   - Carga las dos fuentes locales (Audiowide, Outfit) desde assets/fonts/.
   - Normaliza lo justo: no hay reset de 60 reglas, solo lo que evita bugs reales.
   - Define la tipografía del cuerpo y de las etiquetas base.

   QUÉ NO HACE (a propósito):
   - No hay componentes. No hay clases de layout. Eso es 03/04.
   - No se estila por descendencia.
   - No hay un solo color literal: todo viene de 01-declaraciones.css.
   ========================================================================== */


/* ============================================================================
   1. FUENTES LOCALES (.woff2)
   ----------------------------------------------------------------------------
   Servidas desde assets/fonts/. NO base64: el HTML queda legible, el navegador
   las cachea y HTTP/2 las multiplexa.

   font-display: swap  → FOUT en vez de FOIT. El usuario lee al primer segundo.
   unicode-range       → solo se descarga el subconjunto latino (~60% menos).
   ========================================================================== */

@font-face {
  font-family: "Audiowide";
  src: url("../assets/fonts/audiowide-400.woff2") format("woff2");
  font-weight: 400;          /* ÚNICO peso. No pedir otro: se sintetiza y se ve sucio */
  font-style: normal;        /* Audiowide no tiene itálica */
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-var.woff2") format("woff2-variations");
  font-weight: 100 900;      /* variable: todos los pesos en un archivo */
  font-style: normal;        /* Outfit NO tiene itálica. Nunca font-style: italic */
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================================
   2. RESET ACOTADO
   ----------------------------------------------------------------------------
   Solo lo que evita un bug medido. No "por si acaso".
   ========================================================================== */

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

/* Margen cero en lo que trae margen por defecto del navegador.
   Sin esto, cada uno de los 7 servicios inventa su propio aire (el bug de ds-v2). */
html,
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
ul, ol {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Los controles de formulario NO heredan la fuente: hay que decírselo.
   En ds-v2 los botones salían en Arial. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* cursor:pointer NO se hereda en <button>. En ds-v2 faltaba y parecían texto. */
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================================
   3. RAÍZ Y CUERPO
   ========================================================================== */

html {
  /* Móvil primero. 100dvh con fallback: en iOS la barra del navegador
     cambia el alto y 100vh deja una franja cortada. */
  height: 100vh;
  height: 100dvh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  background-color: var(--fondo);
  color: var(--fg);

  font-family: var(--fuente-texto);
  font-size: var(--t-m);
  font-weight: var(--peso-normal);
  line-height: var(--inter-texto);
  letter-spacing: var(--track-normal);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* evita el "rebote" de la página al llegar al final en iOS */
  overscroll-behavior-y: none;
}

/* EL CAMBIO DE TEMA NO SE ANIMA — contrato §5.0 y §5.0bis.
   ----------------------------------------------------------------------------
   Aquí vivía una clase .tema-transicion que animaba fondo y color 280 ms.
   Se retiró: el fondo seguía oscuro mientras duraba y el botón parecía muerto.

   Ahora es al revés y es más simple: mientras <html> lleva .cambiando-tema,
   NINGÚN elemento del sitio tiene transición de color. Dura dos frames (lo
   pone y quita tema.js), así que el usuario nunca lo percibe, y evita el bug
   más difícil que salió en la Fase 1: un .boton con `transition: background`
   se quedaba atascado en el color del tema anterior aunque el token ya hubiera
   cambiado. Medido: token #FF9900, botón pintado #1558C4. */
html.cambiando-tema,
html.cambiando-tema *,
html.cambiando-tema *::before,
html.cambiando-tema *::after {
  transition: none !important;
}


/* ============================================================================
   4. TIPOGRAFÍA BASE
   ----------------------------------------------------------------------------
   Una sola definición por etiqueta. Ningún componente reescribe esto.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  line-height: var(--inter-titulo);
  letter-spacing: var(--track-titulo);
  text-wrap: balance;          /* evita una palabra sola en la última línea */
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }

p {
  font-size: var(--t-m);
  line-height: var(--inter-texto);
  max-width: var(--ancho-texto);   /* por encima de ~75ch el ojo pierde el renglón */
  text-wrap: pretty;
}

/* El énfasis del titular: color y peso, NUNCA cursiva (Outfit no tiene itálica) */
h1 em, h2 em, h3 em, .titular em {
  font-style: normal;
  color: var(--acento);
  font-weight: var(--peso-fuerte);
}

small {
  font-size: var(--t-s);
}

strong, b {
  font-weight: var(--peso-fuerte);
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-s);
}

::selection {
  background-color: var(--acento);
  color: var(--fondo);
}


/* ============================================================================
   5. ACCESIBILIDAD
   ----------------------------------------------------------------------------
   Foco visible SIEMPRE. Nunca outline:none sin sustituto.
   ========================================================================== */

:focus-visible {
  outline: var(--foco-ancho) solid var(--foco-color);
  outline-offset: var(--foco-offset);
  border-radius: var(--radio-1);
}

/* El foco por ratón no dibuja anillo: solo el teclado lo dibuja. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Solo lectores de pantalla */
.solo-lector {
  position: absolute;
  width: var(--trazo-fino);
  height: var(--trazo-fino);
  padding: 0;
  margin: calc(var(--trazo-fino) * -1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Saltar al contenido: aparece solo al tabular */
.saltar {
  position: absolute;
  inset-inline-start: var(--e-3);
  inset-block-start: calc(var(--e-3) * -6);
  z-index: var(--z-aviso);
  padding: var(--e-2) var(--e-3);
  background-color: var(--superficie);
  color: var(--fg);
  border: var(--trazo-medio) solid var(--foco-color);
  border-radius: var(--radio-2);
  font-family: var(--fuente-titular);
  font-weight: var(--peso-medio);
}

.saltar:focus {
  inset-block-start: var(--e-3);
}

/* Respeto a quien pidió menos movimiento: el contrato ya pone los tiempos a
   0.01ms, aquí se corta además el scroll suave y las animaciones residuales. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   6. UTILIDADES
   ----------------------------------------------------------------------------
   Cuatro utilidades, no cuarenta. Si hace falta más, es un componente.
   ========================================================================== */

.oculto-visual {
  position: absolute;
  width: var(--trazo-fino);
  height: var(--trazo-fino);
  overflow: hidden;
  clip-path: inset(50%);
}

[hidden] {
  display: none !important;
}

/* Mientras no exista el SVG definitivo, el hueco del isotipo reserva sus
   proporciones finales y se ocupa con la palabra en Audiowide.
   Cambiar a SVG no mueve nada de sitio (contrato §8). */
.isotipo-texto {
  font-family: var(--fuente-logo);
  font-weight: 400;          /* SIEMPRE 400: si parece flojo, se sube el tamaño */
  line-height: 1;
  letter-spacing: var(--track-titulo);
  font-size: calc(var(--isotipo-alto) * 0.72);
}