/* ===========================
   BASE STYLES
   Estilos globales del body y estructura
   =========================== */

body {
  background-color: var(--color-black);
  color: var(--color-white);
  overflow-x: hidden;
  width: 100%;
}

/* ========== ESTRUCTURA GLOBAL ========== */

/* Espaciado vertical consistente entre secciones */
section {
  padding-block: var(--spacing-3xl);
}

/* Hero sin padding para pantalla completa */
section.hero {
  padding: 0;
}

/* ========== CONTENEDOR GLOBAL ÚNICO ========== */
/* NO DUPLICAR NI MODIFICAR - Única fuente de verdad para el ancho */
.container {
  width: 100%;
  max-width: 75rem;            /* 1200px */
  margin-inline: auto;
  padding-inline: var(--spacing-md);
}

/* Ajustes responsivos del contenedor */
@media (max-width: 768px) {
  section {
    padding-block: var(--spacing-2xl);
  }
  
  .container {
    padding-inline: var(--spacing-sm);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 62rem;          /* 992px */
  }
}

/* Asegurar que todo el contenido sea fluido */
* {
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
}

/* ===========================
   IMÁGENES RESPONSIVAS
   =========================== */

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

/* ===========================
   ACCESIBILIDAD
   =========================== */

/* Clase para ocultar visualmente pero mantener para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible para navegación por teclado */
*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Eliminar outline en clicks de mouse (mantener para teclado) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Skip to content link (oculto hasta focus) */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: var(--font-semibold);
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-to-content:focus {
  top: 0;
}

/* Reduced motion para usuarios con preferencias de accesibilidad */
@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;
  }
}

/* Mejorar legibilidad de enlaces */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: #8ED1FF;
}

a:focus-visible {
  outline-color: var(--color-accent);
}

/* Mejorar contraste de botones */
button,
.btn {
  cursor: pointer;
  font-family: inherit;
}

button:disabled,
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===========================
   PANTALLAS GRANDES (1440px+)
   =========================== */

@media (min-width: 1440px) {
  .container {
    max-width: 87.5rem;
  }

  body {
    font-size: 1.125rem;
  }
}