/* ==========================================================================
   SWD-2026 · CORE CSS
   ==========================================================================
   Este archivo contiene la base común del sitio:

   1. Tokens de diseño
   2. Configuración global del documento
   3. Reset y estilos base de elementos HTML
   4. Estructura compartida de layout
   5. Accesibilidad
   6. Utilidades visuales reutilizables
   7. Botones reutilizables
   8. Estados interactivos globales
   9. Preferencias de movimiento reducido

   Aquí NO deben ir estilos exclusivos del frontend público,
   del hero, del admin o de las vistas de error.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS DE DISEÑO
   --------------------------------------------------------------------------
   Variables globales de color, tipografía, espacios, radios, sombras,
   contenedores y transiciones compartidas por toda la aplicación.
   ========================================================================== */

:root {
  --color-black: #0a0a0a;
  --color-black-soft: #121212;
  --color-white: #ffffff;
  --color-off-white: #f2f2f2;
  --color-gray-100: #e6e6e6;
  --color-gray-300: #b8b8b8;
  --color-gray-500: #7a7a7a;
  --color-gray-700: #3a3a3a;
  --color-gray-900: #1b1b1b;
  --color-accent: #f2c230;
  --color-accent-soft: #ffe083;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-shadow: rgba(0, 0, 0, 0.24);
  --color-scroll-track: rgba(255, 255, 255, 0.08);

  --font-family-base: "Kumbh Sans", Arial, Helvetica, sans-serif;

  --font-size-xs: 1.2rem;
  --font-size-sm: 1.4rem;
  --font-size-md: 1.6rem;
  --font-size-lg: 1.8rem;
  --font-size-xl: 2.4rem;
  --font-size-2xl: 3.2rem;
  --font-size-3xl: 4rem;
  --font-size-4xl: 7.2rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.7;

  --radius-sm: 0.8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.8rem;
  --radius-xl: 2.4rem;
  --radius-pill: 999rem;

  --shadow-sm: 0 0.4rem 1.2rem var(--color-shadow);
  --shadow-md: 0 1rem 3rem var(--color-shadow);

  --space-2xs: 0.4rem;
  --space-xs: 0.8rem;
  --space-sm: 1.2rem;
  --space-md: 1.6rem;
  --space-lg: 2.4rem;
  --space-xl: 3.2rem;
  --space-2xl: 4.8rem;
  --space-3xl: 6.4rem;
  --space-4xl: 7rem;

  --container-width: 120rem;
  --container-padding: 1.6rem;
  --header-height-mobile: 8.8rem;
  --mobile-menu-scrollbar-size: 4.4rem;

  --transition-fast: 0.2s ease;
  --transition-base: 0.35s ease;
  --transition-slow: 0.5s ease;
}

/* ==========================================================================
   2. CONFIGURACIÓN GLOBAL DEL DOCUMENTO
   --------------------------------------------------------------------------
   Ajustes generales del documento, escala tipográfica base y scrollbar.
   ========================================================================== */

html {
  box-sizing: border-box;
  min-height: 100%;
  max-width: 100%;
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-scroll-track);
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-width: 32rem;
  min-height: 100vh;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-white);
  background-color: var(--color-black);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-scroll-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0.8rem;
  height: 0.8rem;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--color-scroll-track);
  border-radius: 999rem;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 999rem;
  border: 0.2rem solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-soft);
  background-clip: padding-box;
}

/* ==========================================================================
   3. RESET Y ESTILOS BASE DE ELEMENTOS HTML
   --------------------------------------------------------------------------
   Normaliza la caja, imágenes, enlaces, tipografía y elementos de formulario.
   ========================================================================== */

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

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

a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--transition-base),
    opacity var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base),
    transform var(--transition-base);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   4. ESTRUCTURA COMPARTIDA DE LAYOUT
   --------------------------------------------------------------------------
   Clases base reutilizadas por frontend y admin: site, main y container.
   ========================================================================== */

.site {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
}

.site--frontend {
  background:
    radial-gradient(
      circle at top right,
      rgba(242, 194, 48, 0.08),
      transparent 28%
    ),
    linear-gradient(180deg, #111111 0%, #090909 100%);
}

.site--frontend.page--home {
  background: #090909;
}

.site--frontend,
.site--frontend .site-main,
.site--frontend .site-main--inner {
  overflow-x: hidden;
  overflow-x: clip;
}

.site--admin {
  background: linear-gradient(180deg, #161616 0%, #0d0d0d 100%);
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 100%;
}

.site-main--home {
  padding: 0;
  overflow: hidden;
}

.site-main--inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
}

.site-main--admin {
  padding-top: var(--space-lg);
}

.container {
  width: min(100% - (var(--container-padding) * 2), var(--container-width));
  margin: 0 auto;
}

/* ==========================================================================
   5. ACCESIBILIDAD
   --------------------------------------------------------------------------
   Estados visibles de foco y enlace de salto al contenido principal.
   ========================================================================== */

:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.3rem;
}

.skip-link {
  position: absolute;
  top: -5.6rem;
  left: var(--space-md);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  color: var(--color-black);
  background-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.skip-link:focus {
  top: var(--space-md);
}

/* ==========================================================================
   6. UTILIDADES VISUALES REUTILIZABLES
   --------------------------------------------------------------------------
   Helpers simples para aplicar estilos compartidos sin duplicar reglas.
   ========================================================================== */

.s_accent {
  color: var(--color-accent);
}

/* ==========================================================================
   7. BOTONES REUTILIZABLES
   --------------------------------------------------------------------------
   Sistema base de botones compartido por home, vistas internas y errores.
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 4.8rem;
  padding: 0 var(--space-lg);
  border: 0.1rem solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.button--primary {
  color: var(--color-black);
  background-color: var(--color-accent);
}

.button--secondary {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   8. ESTADOS INTERACTIVOS GLOBALES
   --------------------------------------------------------------------------
   Hover y focus compartidos de componentes reutilizables.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .button--primary:hover,
  .button--primary:focus-visible {
    background-color: var(--color-accent-soft);
    transform: translateY(-0.1rem);
  }

  .button--secondary:hover,
  .button--secondary:focus-visible {
    border-color: rgba(242, 194, 48, 0.45);
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-0.1rem);
  }
}

/* ==========================================================================
   9. PREFERENCIAS DE MOVIMIENTO REDUCIDO
   --------------------------------------------------------------------------
   Reduce animaciones y transiciones cuando el usuario así lo solicita.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}