/* ==========================================================================
   MARCA SVSV: colores, tipografía, espacios y esquinas.
   Cambia un valor aquí y se actualiza en toda la web.
   ========================================================================== */

/* Fuente de respaldo: Arial ajustada para ocupar lo mismo que Space Grotesk.
   Así el texto no "brinca" cuando termina de cargar la fuente. */
@font-face {
  font-family: 'Space Grotesk Respaldo';
  src: local('Arial'), local('ArialMT');
  size-adjust: 108.39%;
  ascent-override: 90.79%;
  descent-override: 26.94%;
  line-gap-override: 0%;
}

:root {
  /* ---- Colores ---- */
  --azul: #0B1B3F;           /* fondos oscuros y texto principal sobre claro */
  --azul-2: #13264F;         /* tarjetas sobre fondo azul marino */
  --naranja: #FF6B35;        /* botón principal y acentos. NUNCA como texto sobre crema o blanco */
  --naranja-hover: #FF8457;
  --sobre-naranja: #0B1B3F;  /* texto encima del naranja */
  --crema: #F4F2EE;          /* fondo principal */
  --blanco: #FFFFFF;

  /* Texto (todos cumplen contraste de al menos 4.5:1) */
  --gris-texto: #4D5568;     /* texto secundario sobre crema o blanco (6.6:1) */
  --crema-suave: #B8BFCF;    /* texto secundario sobre azul marino (9.2:1) */

  /* Líneas y bordes finos */
  --linea: #D8D4CC;                       /* sobre crema o blanco */
  --linea-oscura: rgba(244, 242, 238, 0.16); /* sobre azul marino */

  /* ---- Tipografía ---- */
  --fuente: 'Space Grotesk', 'Space Grotesk Respaldo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --peso-texto: 400;
  --peso-titulo: 500;        /* títulos sin negritas exageradas */
  --peso-fuerte: 700;

  --texto-xs: 0.8125rem;     /* 13 px */
  --texto-sm: 0.9375rem;     /* 15 px */
  --texto-base: 1.0625rem;   /* 17 px */
  --texto-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --titulo-sm: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --titulo-md: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --titulo-lg: clamp(2.375rem, 1.5rem + 3.9vw, 4.5rem);

  /* ---- Espacios (base de 4 px) ---- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;
  --e-14: 56px;
  --e-18: 72px;
  --seccion: clamp(72px, 4rem + 6vw, 128px);  /* espacio arriba y abajo de cada sección */
  --margen: clamp(16px, 5vw, 40px);           /* margen a los lados */
  --ancho: 1200px;                            /* ancho máximo del contenido */

  /* ---- Esquinas ---- */
  --r-pildora: 999px;        /* botones y etiquetas */
  --r-tarjeta: 16px;
  --r-chica: 8px;
}