/* ==========================================================
 * Tipografia auto-alojada
 * ==========================================================
 * Las tres familias que nombran los tokens --lp-font-* de este archivo, con
 * sus propios @font-face en vez de una hoja de fonts.googleapis.com.
 *
 * El motivo no es el peso, es la forma del camino critico. Con el CDN de
 * Google era: HTML -> CSS de un tercero (DNS + TLS) -> recien ahi se descubren
 * las URLs de los woff2 -> DNS + TLS a un SEGUNDO tercero (gstatic) ->
 * descarga. Dos handshakes y una dependencia en serie antes de la primera
 * letra. Este servidor habla HTTP/1.1, asi que no hay multiplexacion que lo
 * disimule.
 *
 * Va en landing-config.css a proposito: es la hoja que cargan las CINCO
 * vistas que usan estos tokens — la superficie de marketing, el wizard de
 * onboarding, el registro, auth_landing y el layout de la app — y las cinco
 * pedian exactamente la misma URL a Google.
 *
 * Son las variables de Google: UN archivo por familia cubre todos los pesos,
 * por eso el `font-weight` es un rango y no un numero. Solo subset latin.
 * Licencias SIL OFL 1.1.
 */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    /* El eje de JetBrains Mono llega a 800, no a 900. Declarar de mas hace que
       el navegador recorte al maximo real, que es inofensivo; declarar de menos
       lo haria sintetizar el peso, que se ve mal. Aqui se usan 400, 500 y 700. */
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================
 * Landing Page Configuration — Paleta "Caja Fuerte" (corporativo)
 * Verde Pino + Oro Latón sobre neutros porcelana.
 * Cambia estas variables para personalizar la landing en un solo lugar.
 * ========================================================== */
:root {
    /* ---- Brand Colors ---- */
    --lp-primary: #0E3B30;          /* Verde Pino — marca, nav, secciones oscuras */
    --lp-primary-light: #17694F;    /* Verde medio — hover y degradados */
    --lp-primary-dark: #0A2C24;     /* Verde más profundo */
    --lp-primary-glow: rgba(14, 59, 48, 0.30);
    --lp-secondary: #C6A24E;        /* Oro Latón — acento, degradados marca */
    --lp-secondary-light: #D9BC7A;  /* Champán */
    --lp-accent: #12876E;           /* Verde Esmeralda */

    /* ---- Signature accents ---- */
    --lp-gold: #C6A24E;             /* Oro Latón (CTA / acción) */
    --lp-gold-dark: #AD8A3B;
    --lp-gold-soft: #D4B36A;
    --lp-gold-tint: #E7D8A6;        /* oro claro para texto sobre fondos oscuros */
    --lp-gold-glow: rgba(198, 162, 78, 0.38);
    --lp-gold-ink: #16211D;         /* texto sobre botones de oro */
    --lp-emerald: #12876E;
    --lp-success: #1F9D66;

    /* ---- Neutral Palette (porcelana fría) ---- */
    --lp-white: #FFFFFF;
    --lp-off-white: #F4F6F5;        /* Porcelana */
    --lp-gray-50: #EEF2F0;
    --lp-gray-100: #E1E7E4;
    --lp-gray-200: #C9D2CE;
    --lp-gray-400: #8B968F;
    --lp-gray-500: #66716B;
    --lp-gray-600: #4A544E;
    --lp-gray-700: #333B37;
    --lp-gray-800: #1F2723;
    --lp-gray-900: #16211D;         /* Verde Carbón — texto y secciones oscuras */
    --lp-black: #0B120F;

    /* ---- Typography ---- */
    --lp-font-heading: 'Manrope', sans-serif;
    --lp-font-body: 'IBM Plex Sans', sans-serif;
    --lp-font-mono: 'IBM Plex Mono', monospace;

    /* ---- Spacing Scale ---- */
    --lp-section-py: 6rem;
    --lp-section-py-mobile: 3.5rem;

    /* ---- Border Radius ---- */
    --lp-radius-sm: 8px;
    --lp-radius-md: 12px;
    --lp-radius-lg: 20px;
    --lp-radius-xl: 28px;
    --lp-radius-full: 9999px;

    /* ---- Shadows ---- */
    --lp-shadow-sm: 0 1px 3px rgba(11,18,15,0.06);
    --lp-shadow-md: 0 4px 16px rgba(11,18,15,0.08);
    --lp-shadow-lg: 0 14px 44px rgba(11,18,15,0.14);
    --lp-shadow-glow: 0 0 60px var(--lp-primary-glow);

    /* ---- Glass Effect ---- */
    --lp-glass-bg: rgba(255,255,255,0.80);
    --lp-glass-border: rgba(14,59,48,0.08);
    --lp-glass-blur: 16px;

    /* ---- Tintas accesibles ----
       Un color de marca sirve para pintar un boton y no sirve para escribir
       con el. El aqua del sistema da 2.7:1 sobre claro y el oro 2.4:1: los dos
       reprueban WCAG 1.4.3 en cuanto son TEXTO. Estos son los mismos hues
       bajados hasta pasar 4.5:1, y son los que van en `color:`.
       El acento crudo sigue siendo el correcto para fondos, iconos y filetes,
       que se rigen por 1.4.11 y su piso es 3:1. */
    --lp-accent-ink: #0E6B57;       /* verde esmeralda oscurecido */
    --lp-muted-ink:  #66716B;       /* texto secundario sobre claro */
    --lp-gold-ink-on-light: #8A6B21;

    /* ---- Transitions ---- */
    --lp-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --lp-transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --lp-transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================
 * TEMA H2U — "Claridad líquida", dirección B (Sala de máquinas)
 *
 * Se aplica SOLO a / y /negocios, vía la clase `lp-theme-h2u` que
 * marketing/layout.blade.php pone en el <body>. /restaurantes no
 * lleva la clase y sigue con la paleta Caja Fuerte de arriba.
 *
 * Los valores son los de docs/sistema-visual-h2u.html sin alterar.
 * Los overrides estructurales que un token no puede cargar viven al
 * final de landing.css, bajo el mismo selector.
 * ========================================================== */
body.lp-theme-h2u {
    /* ---- Escalas crudas del sistema (para los overrides) ---- */
    --aqua-50:#ecf8ff;  --aqua-100:#d3eefe; --aqua-200:#b0e2fd;
    --aqua-300:#7dd0fb; --aqua-400:#41b8f7; --aqua-500:#08a4f4;
    --aqua-600:#0784d0; --aqua-700:#0a68a8; --aqua-800:#0e5688;
    --aqua-900:#0c456e;
    --navy-600:#0a3a6b; --navy-700:#073461; --navy-800:#052b50;
    --navy-900:#002855; --navy-950:#001a3a;
    --indigo-700:#081c8c;
    --gold-50:#fff8e8;  --gold-100:#ffeec2; --gold-200:#ffdd8a;
    --gold-300:#ffca52; --gold-400:#ffb524; --gold-500:#f9ab00;
    --gold-600:#d98a00; --gold-700:#a86600;
    --paper:#fffdf8; --mist:#f4f9fd; --cream:#fbf3d5;
    --ink:#0b2a4a; --muted:#5d7088; --faint:#93a4b8;
    --line:#e8edf3; --line-cool:#dbe7f1;
    --success:#2f9e44; --success-soft:#e6f4ea;
    --warning:#f9ab00;
    --danger:#e5484d;  --danger-soft:#fdecec;

    /* ---- Marca ---- */
    --lp-primary: #002855;          /* navy-900 — estructura y superficies profundas */
    --lp-primary-light: #0a3a6b;    /* navy-600 */
    --lp-primary-dark: #001a3a;     /* navy-950 */
    --lp-primary-glow: rgba(0,40,85,0.30);
    --lp-secondary: #f9ab00;        /* gold-500 */
    --lp-secondary-light: #ffca52;  /* gold-300 */
    --lp-accent: #08a4f4;           /* aqua-500 — el color de acción */

    /* ---- Acentos ---- */
    --lp-gold: #f9ab00;
    --lp-gold-dark: #d98a00;
    --lp-gold-soft: #ffb524;        /* gold-400 — hover */
    --lp-gold-tint: #ffdd8a;        /* gold-200 — texto en oro sobre navy */
    --lp-gold-glow: rgba(249,171,0,0.38);
    --lp-gold-ink: #001a3a;         /* navy-950 sobre oro = 9.0:1 */
    --lp-emerald: #0784d0;          /* aqua-600 */
    --lp-success: #2f9e44;

    /* ---- Neutros: todos con sesgo azul, ningún gris neutro ---- */
    --lp-white: #fffdf8;            /* papel — el lienzo nunca es blanco puro */
    --lp-off-white: #f4f9fd;        /* bruma */
    --lp-gray-50: #f4f9fd;
    --lp-gray-100: #e8edf3;         /* line */
    --lp-gray-200: #dbe7f1;         /* line-cool */
    --lp-gray-300: #c3d5e4;         /* el tema verde nunca lo definio: onboarding-wizard.css lo usa */
    --lp-gray-400: #93a4b8;         /* faint */
    --lp-gray-500: #5d7088;         /* muted */
    --lp-gray-600: #5d7088;         /* el sistema no tiene paso intermedio */
    --lp-gray-700: #0b2a4a;         /* ink */
    --lp-gray-800: #052b50;         /* navy-800 */
    --lp-gray-900: #002855;         /* navy-900 — titulares y campos profundos */
    --lp-black: #001a3a;

    /* ---- Tipografía ---- */
    --lp-font-heading: 'Montserrat', 'Hanken Grotesk', system-ui, sans-serif;
    --lp-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --lp-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* ---- Radios (base 4 px) ---- */
    --lp-radius-sm: 0.5rem;         /* 8  */
    --lp-radius-md: 0.875rem;       /* 14 */
    --lp-radius-lg: 1.25rem;        /* 20 */
    --lp-radius-xl: 1.75rem;        /* 28 */

    /* ---- Sombras: ninguna es negra, todas teñidas de navy ---- */
    --lp-shadow-sm: 0 1px 2px rgba(0,40,85,0.04), 0 8px 24px -12px rgba(0,40,85,0.12);
    --lp-shadow-md: 0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 6px rgba(0,40,85,0.05), 0 18px 40px -24px rgba(0,40,85,0.28);
    --lp-shadow-lg: 0 24px 60px -28px rgba(0,40,85,0.45);
    --lp-shadow-glow: 0 0 0 1px rgba(8,164,244,0.18), 0 18px 50px -18px rgba(8,164,244,0.55);

    /* ---- Tintas accesibles (ver :root) ---- */
    --lp-accent-ink: #0a68a8;       /* aqua-700 — 5.9:1 sobre papel */
    --lp-muted-ink:  #5d7088;       /* muted   — 5.0:1 sobre papel */
    --lp-gold-ink-on-light: #8f5700;/* gold-700 oscurecido: #a86600 daba 4.34 */

    /* ---- Vidrio ---- */
    --lp-glass-bg: rgba(255,253,248,0.82);
    --lp-glass-border: rgba(0,40,85,0.10);
    --lp-glass-blur: 14px;

    /* ---- Movimiento: 200 ms desacelerado; entrada 700 ms ---- */
    --lp-transition-fast: 0.2s ease-out;
    --lp-transition-base: 0.2s ease-out;
    --lp-transition-slow: 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}