/* ============================================================
   AVANTY — Sistema de diseño
   Reset — Fase 1, Archivo 2 
   Debe cargarse DESPUÉS de variables.css.
   Las tipografías (Inter y Space Grotesk) se cargan por Google
   Fonts desde header.php, no aquí — por eso este archivo no
   tiene ningún bloque @font-face.
   ============================================================ */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* scroll-padding-top para compensar el header fijo se agrega en
     layout.css, junto con la regla que vuelve fijo al header —
     ahí es donde se conoce su altura real. */
}

body {
  min-height: 100vh;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-texto-sobre-claro);
  background-color: var(--color-fondo-claro);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance; /* evita una palabra sola huérfana en la última línea de un título */
}

p {
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

/* Medios responsivos por defecto — sección 20 */
img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  font-style: italic; /* si el alt llega a mostrarse (imagen rota), que se note distinto */
}

/* Los formularios heredan la tipografía del proyecto en vez de
   usar la fuente por defecto del sistema operativo */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

button:disabled {
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

/* Enlaces: se deja el subrayado nativo por accesibilidad —sección 21,
   "no depender solo del color"—. components.css decide caso por caso
   cuándo quitarlo (nav, botones, tarjetas), donde el contexto visual
   ya distingue el enlace sin necesidad de subrayado. */
a {
  color: var(--color-interactivo);
}

a:not([class]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Listas: no se quitan los bullets por defecto — el contenido real
   (FAQ, privacidad, términos) los necesita. navigation.php quita el
   estilo de lista puntualmente ahí, porque es un <ul> de navegación,
   no una lista de contenido. */
ul, ol {
  padding-left: var(--space-5);
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ------------------------------------------------------------
   FOCO DE TECLADO — sección 21
   Sin anillo al hacer click con el mouse; visible y claro al
   navegar con teclado (Tab). Es intencional, no un olvido.
   ------------------------------------------------------------ */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-enfoque);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background-color: var(--color-interactivo-suave);
  color: var(--color-fondo-oscuro);
}

/* ------------------------------------------------------------
   MOVIMIENTO REDUCIDO — sección 8 y 21
   variables.css ya reduce la duración de las transiciones; esto
   además detiene animaciones y el scroll suave, como respaldo por
   si algún componente anima fuera de esas variables.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Contenido presente para lectores de pantalla pero oculto
   visualmente — por ejemplo, el enlace "saltar al contenido" */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}