/* ============================================================
   base.css — Reset, tokens de diseño, escala tipográfica fluida
   Filtros y Plastisoles Nacionales
   ============================================================ */

/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Inter:wght@300..700&display=swap');

/* ─── Tokens de color ─── */
:root,
[data-tema="claro"] {
  /* Superficies */
  --color-fondo:           #f0f4f8;
  --color-superficie:      #f7f9fc;
  --color-superficie-2:    #ffffff;
  --color-superficie-alt:  #e8edf3;
  --color-borde:           oklch(from #1a4b8c l c h / 0.15);
  --color-divisor:         oklch(from #1a4b8c l c h / 0.10);

  /* Texto */
  --color-texto:           #111827;
  --color-texto-suave:     #4b5563;
  --color-texto-tenue:     #9ca3af;
  --color-texto-inverso:   #f9fafb;

  /* Primario — azul acero */
  --color-primario:        #1a4b8c;
  --color-primario-hover:  #153d73;
  --color-primario-activo: #0f2d56;
  --color-primario-claro:  #d0dff2;

  /* Acento — naranja técnico */
  --color-acento:          #e8701a;
  --color-acento-hover:    #c95e12;
  --color-acento-activo:   #a84c0e;
  --color-acento-claro:    #fde8d5;

  /* Gradientes */
  --gradiente-hero:        linear-gradient(135deg, #0d2e5a 0%, #1a4b8c 50%, #1e5ea8 100%);
  --gradiente-calidad:     linear-gradient(135deg, #0a1e38 0%, #1a4b8c 60%, #163f77 100%);
  --gradiente-acento:      linear-gradient(90deg, #e8701a 0%, #f08c40 100%);

  /* Sombras */
  --sombra-xs:   0 1px 3px oklch(0.15 0.06 240 / 0.10);
  --sombra-sm:   0 2px 8px oklch(0.15 0.06 240 / 0.12);
  --sombra-md:   0 4px 16px oklch(0.15 0.06 240 / 0.14);
  --sombra-lg:   0 12px 40px oklch(0.15 0.06 240 / 0.18);
  --sombra-hero: 0 24px 64px oklch(0.1 0.08 240 / 0.25);

  /* Radio de bordes */
  --radio-xs:   0.25rem;
  --radio-sm:   0.375rem;
  --radio-md:   0.5rem;
  --radio-lg:   0.75rem;
  --radio-xl:   1rem;
  --radio-2xl:  1.5rem;
  --radio-full: 9999px;

  /* Transiciones */
  --transicion: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transicion-lenta: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Anchos de contenido */
  --ancho-angosto:   640px;
  --ancho-normal:    960px;
  --ancho-amplio:    1200px;
  --ancho-completo:  100%;
}

/* ─── Modo oscuro ─── */
[data-tema="oscuro"] {
  --color-fondo:           #0b1423;
  --color-superficie:      #0f1c2e;
  --color-superficie-2:    #142236;
  --color-superficie-alt:  #172840;
  --color-borde:           oklch(from #5b8fd4 l c h / 0.18);
  --color-divisor:         oklch(from #5b8fd4 l c h / 0.12);

  --color-texto:           #e2e8f0;
  --color-texto-suave:     #94a3b8;
  --color-texto-tenue:     #475569;
  --color-texto-inverso:   #0b1423;

  --color-primario:        #4a80c4;
  --color-primario-hover:  #6396d4;
  --color-primario-activo: #7aace0;
  --color-primario-claro:  #1a2f4a;

  --color-acento:          #f08c40;
  --color-acento-hover:    #f5a060;
  --color-acento-activo:   #f9b480;
  --color-acento-claro:    #3a2010;

  --gradiente-hero:        linear-gradient(135deg, #060d1a 0%, #0d2040 50%, #112948 100%);
  --gradiente-calidad:     linear-gradient(135deg, #050d1a 0%, #0d2040 60%, #0a1a30 100%);

  --sombra-xs:   0 1px 3px oklch(0 0 0 / 0.35);
  --sombra-sm:   0 2px 8px oklch(0 0 0 / 0.40);
  --sombra-md:   0 4px 16px oklch(0 0 0 / 0.45);
  --sombra-lg:   0 12px 40px oklch(0 0 0 / 0.55);
  --sombra-hero: 0 24px 64px oklch(0 0 0 / 0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --color-fondo:           #0b1423;
    --color-superficie:      #0f1c2e;
    --color-superficie-2:    #142236;
    --color-superficie-alt:  #172840;
    --color-borde:           oklch(from #5b8fd4 l c h / 0.18);
    --color-divisor:         oklch(from #5b8fd4 l c h / 0.12);
    --color-texto:           #e2e8f0;
    --color-texto-suave:     #94a3b8;
    --color-texto-tenue:     #475569;
    --color-texto-inverso:   #0b1423;
    --color-primario:        #4a80c4;
    --color-primario-hover:  #6396d4;
    --color-primario-activo: #7aace0;
    --color-primario-claro:  #1a2f4a;
    --color-acento:          #f08c40;
    --color-acento-hover:    #f5a060;
    --color-acento-activo:   #f9b480;
    --color-acento-claro:    #3a2010;
    --gradiente-hero:        linear-gradient(135deg, #060d1a 0%, #0d2040 50%, #112948 100%);
    --gradiente-calidad:     linear-gradient(135deg, #050d1a 0%, #0d2040 60%, #0a1a30 100%);
    --sombra-xs:   0 1px 3px oklch(0 0 0 / 0.35);
    --sombra-sm:   0 2px 8px oklch(0 0 0 / 0.40);
    --sombra-md:   0 4px 16px oklch(0 0 0 / 0.45);
    --sombra-lg:   0 12px 40px oklch(0 0 0 / 0.55);
    --sombra-hero: 0 24px 64px oklch(0 0 0 / 0.65);
  }
}

/* ─── Escala tipográfica fluida ─── */
:root {
  --texto-xs:   clamp(0.75rem,  0.70rem  + 0.25vw, 0.875rem);
  --texto-sm:   clamp(0.875rem, 0.80rem  + 0.35vw, 1rem);
  --texto-base: clamp(1rem,     0.95rem  + 0.25vw, 1.125rem);
  --texto-lg:   clamp(1.125rem, 1rem     + 0.75vw, 1.5rem);
  --texto-xl:   clamp(1.5rem,   1.2rem   + 1.25vw, 2.25rem);
  --texto-2xl:  clamp(2rem,     1.2rem   + 2.5vw,  3.5rem);
  --texto-3xl:  clamp(2.5rem,   1rem     + 4vw,    5rem);
  --texto-hero: clamp(3rem,     1rem     + 6vw,    7rem);
}

/* ─── Sistema de espaciado 4px ─── */
:root {
  --esp-1:  0.25rem;
  --esp-2:  0.5rem;
  --esp-3:  0.75rem;
  --esp-4:  1rem;
  --esp-5:  1.25rem;
  --esp-6:  1.5rem;
  --esp-8:  2rem;
  --esp-10: 2.5rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-20: 5rem;
  --esp-24: 6rem;
  --esp-32: 8rem;
}

/* ─── Fuentes ─── */
:root {
  --fuente-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --fuente-cuerpo:  'Inter', 'Segoe UI', sans-serif;
}

/* ─── Reset base ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  scroll-padding-top: var(--esp-20);
}

body {
  min-height: 100dvh;
  line-height: 1.65;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  transition: background-color var(--transicion-lenta), color var(--transicion-lenta);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; font-family: var(--fuente-display); }
p, li, figcaption { text-wrap: pretty; max-width: 72ch; }

::selection {
  background: oklch(from var(--color-primario) l c h / 0.25);
  color: var(--color-texto);
}

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

@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;
  }
}

button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

a, button, [role="button"] {
  transition: color var(--transicion),
              background var(--transicion),
              border-color var(--transicion),
              box-shadow var(--transicion),
              transform var(--transicion);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* Contenedor centrado */
.contenedor {
  max-width: var(--ancho-amplio);
  margin-inline: auto;
  padding-inline: clamp(var(--esp-4), 4vw, var(--esp-8));
}

/* Saltar al contenido principal */
.saltar-contenido {
  position: absolute;
  top: -100%;
  left: var(--esp-4);
  background: var(--color-primario);
  color: white;
  padding: var(--esp-3) var(--esp-6);
  border-radius: var(--radio-md);
  font-weight: 600;
  z-index: 9999;
  transition: top var(--transicion);
  text-decoration: none;
}
.saltar-contenido:focus { top: var(--esp-4); }