/* ============================================================
   Origen Genetics · Tokens de diseño
   Fuente: Libro de marca Origen (guidelines-origen.pdf, pág. 3 y 4)
   No inventar valores aquí. Cualquier color o tipografía nueva
   se añade solo si está en el manual.
   ============================================================ */

:root {
  /* --- Color de marca -------------------------------------- */
  --og-azul:            #4AB9FE;   /* Secundario */
  --og-morado:          #6440F3;   /* Secundario */
  --og-verde:           #52DB70;   /* Acento */
  --og-negro:           #000000;   /* Base */
  --og-blanco:          #FDFDFD;   /* Base */
  --og-blanco-2:        #F8F8F8;   /* Secundario digital */
  --og-gris:            #CCCCCC;   /* Secundario digital */

  /* Degradado corporativo.
     Regla del manual: solo en destacados de título y títulos
     secundarios. Nunca en subtítulos ni en texto corrido. */
  --og-gradiente:       linear-gradient(100deg, var(--og-azul) 0%, var(--og-morado) 100%);

  /* Degradado del isotipo: verde, turquesa y morado. Es el que
     recorre el logotipo y el que Origen usa en las portadas.
     Se reserva para los tintes de imagen, no para tipografía. */
  --og-verde-iso:       #45EC42;
  --og-turquesa-iso:    #02CBC7;
  --og-morado-iso:      #715BE7;
  --og-gradiente-marca: linear-gradient(135deg, var(--og-verde-iso) 0%,
                                                var(--og-turquesa-iso) 46%,
                                                var(--og-morado-iso) 100%);

  /* Degradado tipográfico de Origen: verde agua, azul y morado. Es el que
     usa origen.bio en los titulares con background-clip:text; los valores
     salen de su CSS computado, no de una aproximación. Se reserva para
     tipografía: los tintes de imagen siguen con el de marca. */
  --og-verde-txt:       #4FCDA1;
  --og-azul-txt:        #4BB5FE;
  --og-morado-txt:      #6249F4;
  --og-gradiente-texto: linear-gradient(90deg, var(--og-verde-txt) 0%,
                                               var(--og-azul-txt) 50%,
                                               var(--og-morado-txt) 100%);

  /* --- Superficies ------------------------------------------
     El manual fija el negro como base. Estos escalones son
     derivados de trabajo para dar profundidad sin salirse. */
  --og-fondo:           #050508;
  --og-fondo-alt:       #08080C;
  --og-fondo-elev:      #0D0D13;
  --og-borde:           rgba(255, 255, 255, 0.08);
  --og-borde-fuerte:    rgba(255, 255, 255, 0.16);

  /* --- Texto ------------------------------------------------ */
  --og-texto:           var(--og-blanco);
  --og-texto-medio:     rgba(253, 253, 253, 0.72);
  --og-texto-tenue:     rgba(253, 253, 253, 0.52);

  /* --- Tipografía -------------------------------------------
     Principal: Space Grotesk (titulares e interfaz)
     Secundaria: Inter (cuerpos de texto extensos) */
  --og-fuente-titulo:   'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --og-fuente-texto:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --og-peso-light:      300;
  --og-peso-regular:    400;
  --og-peso-medium:     500;
  --og-peso-semibold:   600;
  --og-peso-bold:       700;

  /* Escala fluida: min en móvil, max en escritorio */
  --og-t-display:       clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);
  --og-t-h2:            clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  --og-t-h3:            clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --og-t-lead:          clamp(1.125rem, 1.05rem + 0.5vw, 1.4375rem);
  --og-t-base:          1.125rem;
  --og-t-peq:           1.0625rem;
  --og-t-cejilla:       0.8125rem;

  /* --- Ritmo y medidas -------------------------------------- */
  --og-ancho:           1280px;
  --og-ancho-texto:     62ch;
  --og-margen:          clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
  --og-seccion:         clamp(4.5rem, 2.5rem + 8vw, 8.75rem);

  --og-radio:           14px;
  --og-radio-pill:      999px;

  --og-trans:           220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* El sitio es de fondo oscuro por definición de marca.
   Se declara explícito para que el navegador pinte los
   controles nativos (scrollbar, autofill) en consecuencia. */
:root { color-scheme: dark; }

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

/* ============================================================
   Ampliación · v2
   Contraste entre secciones, curvas de movimiento y textura.
   ============================================================ */
:root {
  /* Escalones de superficie. El ritmo de la página se construye
     alternando estos cuatro planos más la banda clara. */
  --og-plano-0:         #050508;   /* base */
  --og-plano-1:         #08080C;   /* áreas */
  --og-plano-2:         #0B0B11;   /* proyectos, elevado */

  /* Curvas: una para entradas, otra para interacción. */
  --og-ease-salida:     cubic-bezier(0.16, 1, 0.3, 1);
  --og-ease-inter:      cubic-bezier(0.4, 0, 0.2, 1);
  --og-dur-rapida:      220ms;
  --og-dur-media:       520ms;
  --og-dur-lenta:       900ms;
}