/* ==========================================================================
   BIANCHINI AGROTECH — TOKENS DE DISEÑO
   --------------------------------------------------------------------------
   Una sola fuente de verdad para color, tipografía, espacio y sombra.
   Todo sale de los DOS colores de marca (#000D58 y #F7FF4D); el resto de la
   escala se deriva en oklch, que interpola por luminosidad perceptual y no
   ensucia el tono como lo hace mezclar en hexadecimal.

   Los hex van PRIMERO y el oklch DESPUÉS a propósito: el navegador que no
   entiende oklch descarta esa línea y se queda con el hex. Nadie ve un color
   roto; el que puede, ve la escala fina.

   Se carga antes que styles.css. No pisa nada: solo define variables.
   ========================================================================== */

:root {
    /* --- Marca ----------------------------------------------------------- */
    --marca-azul:     #000D58;
    --marca-amarillo: #F7FF4D;

    /* --- Escala de azul (tinta) ------------------------------------------ */
    --tinta-950: #000722;  --tinta-950: oklch(14% 0.09 268);
    --tinta-900: #000D58;  --tinta-900: oklch(22% 0.15 268);
    --tinta-800: #041a75;  --tinta-800: oklch(30% 0.16 268);
    --tinta-700: #0b2a94;  --tinta-700: oklch(38% 0.17 268);
    --tinta-600: #1a40b3;  --tinta-600: oklch(46% 0.17 268);
    --tinta-500: #3059cc;  --tinta-500: oklch(55% 0.16 268);
    --tinta-400: #6285dd;  --tinta-400: oklch(66% 0.13 268);
    --tinta-300: #97b0e9;  --tinta-300: oklch(77% 0.09 268);
    --tinta-200: #c3d2f3;  --tinta-200: oklch(86% 0.05 268);
    --tinta-100: #e2e9fa;  --tinta-100: oklch(93% 0.03 268);
    --tinta-50:  #f2f5fd;  --tinta-50:  oklch(97% 0.014 268);

    /* --- Escala de amarillo (acento) -------------------------------------
       El amarillo de marca es clarísimo: sobre blanco no se lee NUNCA.
       Por eso existe --acento-texto, que es el mismo tono bajado a un
       nivel que sí contrasta. Usá ese para texto, el otro para fondos.    */
    --acento:        #F7FF4D;  --acento: oklch(96% 0.20 108);
    --acento-fuerte: #e6f000;  --acento-fuerte: oklch(91% 0.21 108);
    --acento-suave:  #fbffb3;  --acento-suave: oklch(98% 0.09 108);
    --acento-texto:  #5c6300;  --acento-texto: oklch(45% 0.12 108);

    /* --- Superficies ------------------------------------------------------ */
    --papel:       #ffffff;
    --papel-2:     #f8f9fb;
    --papel-3:     #f1f4f8;
    --papel-oscuro:    var(--tinta-900);
    --papel-oscuro-2:  var(--tinta-800);

    /* --- Texto ------------------------------------------------------------ */
    --texto:    #14181f;  --texto: oklch(20% 0.012 260);
    --texto-2:  #4a5361;  --texto-2: oklch(45% 0.018 260);
    --texto-3:  #717d8d;  --texto-3: oklch(58% 0.02 260);
    --texto-inv:    #ffffff;
    --texto-inv-2:  rgba(255,255,255,.76);
    --texto-inv-3:  rgba(255,255,255,.55);

    /* --- Líneas ----------------------------------------------------------- */
    --linea:        #e4e8ee;  --linea: oklch(92% 0.008 260);
    --linea-fuerte: #cdd4de;  --linea-fuerte: oklch(85% 0.012 260);
    --linea-inv:    rgba(255,255,255,.14);

    /* --- Semánticos (los mismos que usa el CRM adentro) -------------------- */
    --ok:      #1a8f45;  --ok: oklch(56% 0.15 150);
    --ok-bg:   #e7f6ec;  --ok-bg: oklch(95% 0.04 150);
    --alerta:  #b57500;  --alerta: oklch(63% 0.14 76);
    --alerta-bg:#fdf3e0; --alerta-bg: oklch(96% 0.04 76);
    --peligro: #c62828;  --peligro: oklch(53% 0.19 26);
    --peligro-bg:#fdeceb;--peligro-bg: oklch(95% 0.04 26);
    --info:    #0d6efd;  --info: oklch(56% 0.20 259);
    --info-bg: #e7f0ff;  --info-bg: oklch(95% 0.035 259);
    --violeta: #6f42c1;  --violeta: oklch(48% 0.20 296);
    --violeta-bg:#f0e9fb;--violeta-bg: oklch(95% 0.04 296);

    /* --- Tipografía fluida ------------------------------------------------
       clamp() = se adapta al ancho sin un solo media query.                */
    --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --t-display: clamp(2.1rem, 1.3rem + 3.6vw, 4.1rem);
    --t-h2:      clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
    --t-h3:      clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    --t-cuerpo:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
    --t-chico:   0.875rem;
    --t-micro:   0.75rem;

    /* --- Espacio ---------------------------------------------------------- */
    --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
    --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
    --e-seccion: clamp(56px, 7vw, 104px);
    --ancho: 1180px;
    --ancho-texto: 68ch;

    /* --- Radios y sombras -------------------------------------------------- */
    --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 24px; --r-full: 999px;
    --s-1: 0 1px 2px rgba(3,10,40,.05);
    --s-2: 0 4px 12px rgba(3,10,40,.07);
    --s-3: 0 12px 32px rgba(3,10,40,.10);
    --s-4: 0 28px 60px -18px rgba(3,10,40,.28);

    /* --- Movimiento -------------------------------------------------------- */
    --ease-salida:  cubic-bezier(.22,.61,.36,1);
    --ease-suave:   cubic-bezier(.4,0,.2,1);
    --ease-rebote:  cubic-bezier(.34,1.56,.64,1);
    --v-rapido: .18s;
    --v-medio:  .35s;
    --v-lento:  .7s;
}

/* --------------------------------------------------------------------------
   TIPOGRAFÍA: detalles chicos que se notan mucho
   -------------------------------------------------------------------------- */

/* Los títulos dejan de partirse con una palabra huérfana colgando abajo. */
h1, h2, h3, .section-title, .hero-title { text-wrap: balance; }
/* Los párrafos evitan la línea final de una sola palabra. */
p, li { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   GRANO: textura sin pedir un archivo
   --------------------------------------------------------------------------
   Es un SVG con feTurbulence embebido como data URI. Pesa ~300 bytes, no es
   un request, y le saca a los fondos planos el look de plantilla.
   Se aplica con .con-grano sobre cualquier bloque oscuro.
   -------------------------------------------------------------------------- */
.con-grano { position: relative; isolation: isolate; }
.con-grano::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    pointer-events: none; opacity: .5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)' opacity='.35'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD BASE
   -------------------------------------------------------------------------- */

/* Anillo de foco visible solo para quien navega con teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--tinta-500);
    outline-offset: 2px;
    border-radius: var(--r-1);
}

::selection { background: var(--acento); color: var(--tinta-900); }

/* El scroll a un #ancla no deja el título tapado por la barra fija. */
:target, [id] { scroll-margin-top: 90px; }

/* Barra de scroll con los colores de la marca (Chromium/Firefox). */
@supports (scrollbar-color: auto) {
    :root { scrollbar-color: var(--tinta-300) var(--papel-3); scrollbar-width: thin; }
}