/* ==========================================================================
   ProFlight — Sistema Híbrido HIG (Opción B) · tokens
   Adoptado en Open Day el 14-sep-2026, pedido por Edison.

   Fuentes, en este orden:
   1) "ProFlight Manual - Sistema Híbrido HIG" (Landing pages ProFlight/UI KIT - B).
   2) Donde el manual deja margen, la implementación B ya aprobada y viva:
      landing MCC, crm.proflight.com.ar/_landings/mcc/assets/styles-b.css
      (verificada con curl el 14-sep-2026). Así Open Day y MCC se ven hermanas.

   OJO — hay otro colors_and_type.css dentro del kit con #05385C / #FFFFFF: esa
   paleta NO es la de B ni la de producción. La correcta es la de acá.

   Tipografía: el manual pide Neue Haas Grotesk Display (Thin/Light) en
   titulares, pero no tiene licencia web. Igual que en MCC, los titulares caen a
   Inter 300 y el H1 del hero usa Inter 800. Inter se carga con <link> en cada
   página (300;400;500;600;800), no con @import: encadena y bloquea el render.
   ========================================================================== */

:root {
  /* ---------- Paleta B: 7 tokens, sin escalas ---------- */
  --white:  #FBFAFA;
  --grey:   #EEEEEE;
  --silver: #D6DCDC;
  /* AZUL VERDOSO de la pieza de Open Day (Edison, 16-sep-2026: "usa el mismo color
     para todo el sitio"). Reemplaza al Blue #003C67 y al Deep Blue #061F31 del
     sistema B; los nombres de las variables se mantienen para no tocar cada regla.
     Contraste medido: blanco sobre --blue 8,6:1; blanco sobre --dblue 14,6:1. */
  --blue:   #0F5157;   /* la acción */
  --dblue:  #0C2A2D;   /* la marca: fondos oscuros */
  --cian:   #5CCFDA;   /* acento SÓLO sobre fondo oscuro (8,2:1); sobre claro no se lee */
  --dgrey:  #5C5B5C;
  --black:  #1D1D1D;
  /* Light Blue #00B0CE: discontinuado. No usar. */

  /* ---------- Auxiliares aprobados en producción (MCC) ---------- */
  --hairline: #E9ECEE;   /* borde de card blanca apoyada sobre blanco */
  --alert:    #B42318;
  --warn:     #B54708;   /* sólo marcas de borrador en páginas legales */

  /* ---------- Semántica ---------- */
  --bg-page:        var(--white);
  --bg-subtle:      var(--grey);
  --text-primary:   var(--black);
  --text-secondary: var(--dgrey);
  --text-inverse:   var(--white);
  --text-accent:    var(--blue);
  --text-brand:     var(--dblue);

  /* Grilla punteada con cruces en los vértices (pieza de Open Day). Edison la pidió
     más chica y menos notoria (16-sep): baldosa de 56 px —múltiplo del trazo de 8 px,
     así la línea no se corta raro entre baldosas— y cruces de 8 px más tenues. */
  --grilla: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M0 28.5H56M28.5 0V56' fill='none' stroke='%23FFFFFF' stroke-opacity='.07' stroke-dasharray='3 5'/%3E%3Cpath d='M28.5 24.5v8M24.5 28.5h8' stroke='%23FFFFFF' stroke-opacity='.26'/%3E%3C/svg%3E");
  --grilla-t: 56px;

  /* ---------- Elevación: escala dp de Material teñida en Deep Blue, tope Nivel 4 ---------- */
  --e1: 0 1px 2px rgba(12, 42, 45, .06);    /* card en reposo */
  --e2: 0 2px 8px rgba(12, 42, 45, .08);    /* card elevada */
  --e3: 0 8px 20px rgba(12, 42, 45, .10);   /* popover */
  --card-top: inset 0 1px 0 rgba(255, 255, 255, .9);
  /* Foco visible (auditoría 17-sep-2026: el anillo al 30% casi no se veía). Doble anillo:
     uno del color del fondo y otro de contraste, se lee sobre cualquier superficie. */
  --focus-ring:      0 0 0 2px var(--white), 0 0 0 4px var(--blue);
  --focus-ring-dark: 0 0 0 2px var(--dblue), 0 0 0 4px var(--cian);

  /* ---------- Radios concéntricos ---------- */
  --r-card:  20px;
  --r-inner: 12px;
  --r-full:  999px;

  /* ---------- Grilla: escala de 4px; margen lateral por breakpoint ---------- */
  --gutter: 20px;   /* mobile < 768px (manual B) */

  /* ---------- Tipografía ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-light:    300;   /* titulares (reemplazo de NHG Thin/Light) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-heavy:    800;   /* sólo el H1 del hero, como en MCC */

  /* Escala B — tamaño / interlineado (desktop; mobile abajo) */
  --t-display: 70px;   /* Display 0   70/70   */
  --t-h1:      50px;   /* Headline 1  50/50   */
  --t-sub1:    25px;   /* Subtitle 1  25/27   */
  --t-sub2:    18px;   /* Subtitle 2  18/20   */
  --t-body:    15px;   /* Body        15/20   */
  --t-small:   12px;   /* Small       12/15   */

  /* ---------- Movimiento: comunica estado, nunca decora ---------- */
  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --dur-micro:  120ms;   /* hover, state layer */
  --dur-std:    200ms;   /* estados, crossfade */
  --dur-enter:  320ms;   /* entrada */
  /* Curva "arranca rápido, frena largo" para los estados propios de esta landing (chevrones,
     barras fijas). Los tiempos del revelado NO van acá: viven en assets/animaciones.css (kit). */
  --ease-sale:    cubic-bezier(.16, 1, .3, 1);

  /* ---------- Controles: área táctil mínima 44px ---------- */
  --control-h: 44px;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 900px) { :root { --gutter: 40px; } }

/* Tipografía mobile del manual (Display 70→40, H1 50→32, Sub 25→18)
 */
@media (max-width: 767px) {
  :root {
    --t-display: 40px;
    --t-h1:      32px;
    --t-sub1:    18px;
  }
}

/* ==========================================================================
   Clases de texto
   ========================================================================== */
html { font-family: var(--font-sans); color: var(--text-primary); }
body { margin: 0; background: var(--bg-page); -webkit-font-smoothing: antialiased; letter-spacing: .01em; }

/* Lectura: el Body del manual es 15/20; para párrafos largos se usa 15/22,
   el mismo interlineado que MCC en sus textos corridos. */
.text-body-lg { font: var(--fw-regular) 17px/25px var(--font-sans); }
.text-body    { font: var(--fw-regular) var(--t-body)/22px var(--font-sans); }
.text-body-sm { font: var(--fw-regular) 13px/19px var(--font-sans); }
/* Etiqueta en mayúsculas: el eyebrow de MCC (11px, 18%) */
.text-caption { font: var(--fw-medium) 12px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }   /* 12 y no 11: auditoría de adaptabilidad 17-sep */