/* ============================================================
 * Innovación Digital — base.css
 * Reset global, body, tipografía, scrollbar y keyframes.
 *
 * CRITERIO:
 *   · Solo afecta elementos HTML base (body, h*, a, *, ::selection)
 *   · Sin clases propias — esas van en layout.css o components.css
 *   · Todos los valores vienen de tokens en root.css
 *   · Los @keyframes globales van acá porque son referenciados
 *     con var(--fxa-anim-*) desde layout.css y components.css
 * ============================================================ */


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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fxa-font-family);
  font-size: var(--fxa-font-size-base);
  font-weight: var(--fxa-font-weight-normal);
  line-height: var(--fxa-line-height-base);
  color: var(--fxa-body-color);
  background-color: var(--fxa-body-bg);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fxa-heading-color);
  font-weight: var(--fxa-font-weight-bold);
  line-height: var(--fxa-line-height-tight);
}

a {
  color: var(--fxa-link-color);
  text-decoration: var(--fxa-link-decoration);
  transition: color var(--fxa-transition-fast);
}

a:hover {
  color: var(--fxa-link-hover-color);
}

::selection {
  background: var(--fxa-primary);
  color: var(--fxa-color-black);
}


/* ----------------------------------------------------------
 * Scrollbar custom
 * ---------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--fxa-scrollbar-thumb) var(--fxa-scrollbar-track);
}

*::-webkit-scrollbar       { width: var(--fxa-scrollbar-width); }
*::-webkit-scrollbar-track { background: var(--fxa-scrollbar-track); }
*::-webkit-scrollbar-thumb {
  background-color: var(--fxa-scrollbar-thumb);
  border-radius: 10px;
}


/* ----------------------------------------------------------
 * Noise overlay — efecto grano de película sobre toda la página.
 * pointer-events: none para no bloquear interacción.
 * ---------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* En el tema light se desactiva el grano */
[data-theme="light"] body::before {
  display: none;
}


/* ----------------------------------------------------------
 * Utilidad general: ocultar hasta que Vue hidrate
 * ---------------------------------------------------------- */
[v-cloak] { display: none; }


/* ----------------------------------------------------------
 * Keyframes globales
 * Referenciados con var(--fxa-anim-*) desde layout.css y components.css
 * ---------------------------------------------------------- */

/* Levitación del logo hero */
@keyframes fxa-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(var(--fxa-anim-float-distance)); }
}

/* Rotación de la órbita del logo */
@keyframes fxa-spin {
  to { transform: rotate(360deg); }
}

/* Parpadeo del punto de estado en el hero tag */
@keyframes fxa-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}

/* Barra de progreso del loader */
@keyframes fxa-load-progress {
  to { width: 100%; }
}

/* Scan line de la hamburguesa tech */
@keyframes fxa-ham-scan {
  from { top: -100%; }
  to   { top:  100%; }
}

/* Fade-up de entrada — scroll reveal opcional */
@keyframes fxa-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}