/* Tokens de diseño de Oink Sports Growth (spec §4 y §5).
   En Elementor pasan a colores y fuentes globales. Las tareas siguientes los usan con var(--…). */

:root {
  /* Colores de la marca (ajustes de Oink, anexo 2026-10-27 §2). Un solo tono de azul: ya no hay azul profundo; lo que se
     remarcaba con él va en beige. El verde va solo sobre azul, o como fondo con texto azul: nunca como texto sobre blanco
     o beige (1,1:1). El naranja es solo adorno (sombras desplazadas, objeto 3D, algún subrayado): nunca va como texto. */
  --oink-blue: #2234f7;        /* blanco encima 7,2:1; sobre blanco 7,2:1; sobre beige 7,0:1 */
  --oink-ink: #0B0C1F;         /* texto principal sobre claro */
  --oink-gray: #565656;        /* texto secundario; sobre beige 7,1:1 */
  --oink-beige: #fcfbf5;       /* fondos alternos, tarjetas que se remarcan y placas sobre foto */
  --oink-green: #e1ff00;       /* hover de botones, rótulos de los bloques azules y la palabra clave del partner; sobre azul 6,4:1 */
  --oink-white: #FFFFFF;
  --oink-orange: #ee7f6c;
  --oink-error: #B42318;       /* solo errores del formulario (texto y borde); sobre blanco 6,6:1 (tarea 8) */

  /* Tipografía */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(2.5rem, 5.5vw, 5rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 3rem);
  --fs-eyebrow: 0.875rem;     /* spec §4 decía 0,8rem; ningún texto baja de 0,875rem (revisión de la tarea 4), salvo una
                                 excepción: las etiquetas de las cifras del hero por debajo de 768 px van a 0,8125rem
                                 (sections.css, bloque 1). A 0,875rem la fila de las tres cifras se parte entre 320 y
                                 330 px (lo vigila la prueba «cifras» de quality.test.js; revisión final). */
  --fs-body: 1rem;

  /* Forma y profundidad */
  --radius-pill: 999px;   /* botones y chips */
  --radius-lg: 24px;      /* tarjetas grandes */
  --radius-md: 16px;      /* tarjetas pequeñas */
  --glass-bg: rgb(255 255 255 / 0.12);
  --glass-bg-solid: rgb(255 255 255 / 0.18);   /* si el navegador no tiene backdrop-filter */
  --glass-border: rgb(255 255 255 / 0.25);
  --glass-blur: 16px;
  --shadow-card: 0 1px 2px rgb(11 12 31 / 0.06), 0 12px 32px rgb(11 12 31 / 0.1);

  /* Espaciado (escala de 4 px) */
  --space-section: 96px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (max-width: 767.98px) {
  :root {
    --space-section: 64px;
  }
}