/* =============================================================================
   Landing publico — hoja propia
   -----------------------------------------------------------------------------
   El fichero y el prefijo .mfl- son deliberadamente NEUTROS de marca: el nombre
   comercial vive en una sola constante (BRAND, en config/constants.php) y ha
   cambiado ya una vez, asi que aqui no se repite. Solo el rojo de identidad.

   Hoja del index rediseñado. Convive con Bootstrap 4 (CDN) y con
   assets/landing/css/style.css, que siguen cargando para el resto de paginas
   del landing (blog, features, plans...). Todo lo nuevo cuelga de .mfl- para
   no pisar nada heredado.

   Paleta: la del sistema de diseño del producto (src/css/mroforce.css, que
   conserva ese nombre porque lo consume el bundle compilado):
     rojo #ed2025 / #c4171b · azul apoyo #2b5b84 · texto #24292f
   más el "aviation navy" del hero (#0c1420) del rediseño 2026-08.
   ============================================================================= */

:root {
    --mfl-marca:        #ed2025;
    --mfl-marca-oscuro: #c4171b;
    --mfl-navy:         #0c1420;
    --mfl-navy-2:       #14263c;
    --mfl-navy-borde:   #2b323c;
    --mfl-panel:        #10141a;
    --mfl-panel-alt:    #171c24;
    --mfl-texto:        #24292f;
    --mfl-texto-suave:  #6a737d;
    --mfl-texto-tenue:  #99a0a6;
    --mfl-claro:        #e6ebf0;
    --mfl-claro-suave:  #b9c2cc;
    --mfl-borde:        #e1e4e8;
    --mfl-fondo-alt:    #f7f8f9;
    --mfl-info:         #2b5b84;
    --mfl-info-claro:   #8fb6d8;
    --mfl-ok:           #4caf50;
    --mfl-aviso:        #e0a13d;
    --mfl-fuente-display: 'Barlow', 'Arial Narrow', Arial, sans-serif;
    --mfl-fuente-texto:   'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
}

body.mfl { font-family: var(--mfl-fuente-texto); color: var(--mfl-texto); background: #fff; margin: 0; }
.mfl h1, .mfl h2, .mfl h3, .mfl-display { font-family: var(--mfl-fuente-display); }

/* --- utilidades de seccion ------------------------------------------------ */
.mfl-seccion       { padding: 88px 24px; }
.mfl-seccion-alt   { background: var(--mfl-fondo-alt); }
.mfl-seccion-navy  { background: var(--mfl-navy); color: var(--mfl-claro); }
.mfl-contenedor    { max-width: 1200px; margin: 0 auto; }
.mfl-kicker        { font-size: 13px; letter-spacing: 2px; font-weight: 700; color: var(--mfl-marca); text-transform: uppercase; margin-bottom: 12px; }
.mfl-kicker-claro  { color: #ff8a8d; }
.mfl-titulo        { font-size: 40px; font-weight: 800; line-height: 1.15; margin: 0 0 16px 0; color: var(--mfl-texto); }
.mfl-seccion-navy .mfl-titulo { color: #fff; }
.mfl-sub           { font-size: 17px; line-height: 1.65; color: var(--mfl-texto-suave); margin: 0; max-width: 760px; }
.mfl-seccion-navy .mfl-sub { color: var(--mfl-claro-suave); }

/* --- nav ------------------------------------------------------------------ */
.mfl-nav { background: var(--mfl-navy); border-bottom: 1px solid #1c2836; position: sticky; top: 0; z-index: 1020; }
.mfl-nav-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; flex-wrap: wrap; }
/* Marca y menu en el mismo bloque, pegados a la izquierda. */
.mfl-nav-izq { display: flex; align-items: center; gap: 30px; min-width: 0; }
.mfl-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.mfl-logo-texto { font-family: var(--mfl-fuente-display); font-weight: 800; font-size: 22px; letter-spacing: 2px; color: #fff; }
.mfl-logo-texto span { color: var(--mfl-marca); }
.mfl-nav-links { display: flex; align-items: center; gap: 22px; }
.mfl-nav-links a { color: var(--mfl-claro-suave); font-size: 15px; text-decoration: none; white-space: nowrap; }
.mfl-nav-links a:hover { color: #fff; text-decoration: none; }

/* Acciones: idioma, acceso y demo, en la MISMA fila que la marca. Van
   compactas a proposito -- con el formulario de acceso a tamano normal esto
   no cabe en 1440 y el flex-wrap lo mandaba a una segunda fila. */
.mfl-nav-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.mfl-nav-login { display: flex; align-items: center; gap: 6px; margin: 0; }
.mfl-nav-input { max-width: 118px; height: 36px; font-size: 14px; }
.mfl-nav-enlaces { display: flex; align-items: center; gap: 10px; }
.mfl-nav-enlaces a { color: var(--mfl-claro-suave); font-size: 13px; text-decoration: none; white-space: nowrap; }
.mfl-nav-enlaces a:hover { color: #fff; text-decoration: none; }
.mfl-nav-saludo { color: var(--mfl-claro-suave); font-size: 14px; white-space: nowrap; }

/* selector de idioma */
.mfl-idioma { position: relative; }
.mfl-idioma summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--mfl-claro-suave); font-size: 14px; padding: 8px 10px; border-radius: 6px; }
.mfl-idioma summary::-webkit-details-marker { display: none; }
.mfl-idioma summary:hover { color: #fff; background: rgba(255,255,255,.06); }
.mfl-idioma-menu { position: absolute; right: 0; top: 100%; margin-top: 6px; background: #fff; border: 1px solid var(--mfl-borde); border-radius: 8px; box-shadow: 0 8px 24px rgba(12,20,32,.18); padding: 6px; min-width: 160px; z-index: 1030; max-height: 70vh; overflow-y: auto; }
[dir="rtl"] .mfl-idioma-menu { right: auto; left: 0; }
.mfl-idioma-menu a { display: block; padding: 8px 12px; border-radius: 5px; color: var(--mfl-texto); font-size: 14px; text-decoration: none; }
.mfl-idioma-menu a:hover { background: var(--mfl-fondo-alt); text-decoration: none; }
.mfl-idioma-menu a.activo { font-weight: 600; color: var(--mfl-marca); }

/* --- botones -------------------------------------------------------------- */
.mfl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, transform .08s ease; }
.mfl-btn:active { transform: scale(.98); }
.mfl-btn:hover { text-decoration: none; }
.mfl-btn-primario { background: var(--mfl-marca); color: #fff; }
.mfl-btn-primario:hover { background: var(--mfl-marca-oscuro); color: #fff; }
.mfl-btn-contorno { background: transparent; border: 1px solid #3a4656; color: var(--mfl-claro); font-weight: 500; }
.mfl-btn-contorno:hover { border-color: var(--mfl-claro-suave); color: #fff; }
.mfl-btn-sm { min-height: 44px; padding: 9px 18px; font-size: 15px; }

/* --- hero ----------------------------------------------------------------- */
.mfl-hero { background: linear-gradient(160deg, #0c1420 0%, #101d2e 55%, #14263c 100%); padding: 88px 24px 96px; position: relative; overflow: hidden; color: var(--mfl-claro); }
.mfl-hero::before, .mfl-hero::after { content: ""; position: absolute; border: 1px solid rgba(91,147,196,.14); border-radius: 50%; pointer-events: none; }
.mfl-hero::before { width: 560px; height: 560px; right: -120px; top: -80px; }
.mfl-hero::after  { width: 280px; height: 280px; right: 20px; top: 60px; border-color: rgba(91,147,196,.10); }
.mfl-hero-inner { max-width: 1280px; margin: 0 auto; display: flex; gap: 64px; align-items: center; position: relative; z-index: 1; }
.mfl-hero-copy { flex: 0 1 620px; display: flex; flex-direction: column; gap: 24px; }
.mfl-hero-badge { display: inline-flex; align-self: flex-start; align-items: center; padding: 6px 14px; border: 1px solid rgba(237,32,37,.45); border-radius: 999px; color: #ff8a8d; font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.mfl-hero h1 { margin: 0; font-size: 54px; line-height: 1.08; font-weight: 800; color: #fff; }
.mfl-hero-sub { margin: 0; font-size: 19px; line-height: 1.6; color: var(--mfl-claro-suave); }
.mfl-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* Bloque de FMS AI en el hero. Va DESPUES de los botones y antes de los chips
   normativos: primero la accion, luego el diferenciador, luego la credencial.
   Sin barra de acento a la izquierda -- el borde completo y el fondo traslucido
   ya lo separan del fondo, y la barrita es un tic visual muy visto. */
.mfl-hero-ai { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: rgba(91,147,196,.08); border: 1px solid rgba(91,147,196,.22); border-radius: 10px; }
.mfl-hero-ai svg { flex-shrink: 0; margin-top: 1px; color: #ff8a8d; }
.mfl-hero-ai-txt { font-size: 14.5px; line-height: 1.55; color: var(--mfl-claro-suave); }
.mfl-hero-ai-txt strong { color: #fff; font-weight: 600; }
.mfl-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.mfl-chip { padding: 6px 12px; background: rgba(91,147,196,.12); border: 1px solid rgba(91,147,196,.3); border-radius: 6px; color: var(--mfl-info-claro); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* mock de producto del hero */
.mfl-mock { flex: 1 1 480px; min-width: 0; background: var(--mfl-panel); border: 1px solid var(--mfl-navy-borde); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
.mfl-mock-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--mfl-panel-alt); border-bottom: 1px solid var(--mfl-navy-borde); }
.mfl-mock-punto { width: 10px; height: 10px; border-radius: 50%; }
.mfl-mock-titulo { margin-left: 10px; font-size: 12px; color: #6b747e; }
[dir="rtl"] .mfl-mock-titulo { margin-left: 0; margin-right: 10px; }
.mfl-mock-cuerpo { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.mfl-mock-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mfl-mock-kpi { background: var(--mfl-panel-alt); border: 1px solid var(--mfl-navy-borde); border-radius: 8px; padding: 12px; }
.mfl-mock-kpi-label { font-size: 11px; color: #98a1ab; letter-spacing: 1px; }
.mfl-mock-kpi-valor { font-size: 26px; font-weight: 700; color: var(--mfl-claro); font-family: var(--mfl-fuente-display); }
.mfl-mock-panel { background: var(--mfl-panel-alt); border: 1px solid var(--mfl-navy-borde); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mfl-mock-label { font-size: 12px; color: #98a1ab; letter-spacing: 1px; font-family: var(--mfl-mono, Menlo, Consolas, monospace); }
.mfl-mock-cadena { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mfl-mock-paso { padding: 5px 10px; border-radius: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.mfl-mock-paso-ok    { background: rgba(76,175,80,.15);  border: 1px solid rgba(76,175,80,.4);  color: var(--mfl-ok); }
.mfl-mock-paso-aviso { background: rgba(224,161,61,.15); border: 1px solid rgba(224,161,61,.4); color: var(--mfl-aviso); }
.mfl-mock-paso-info  { background: rgba(91,147,196,.15); border: 1px solid rgba(91,147,196,.4); color: #5b93c4; }
.mfl-mock-ok { font-size: 12px; color: var(--mfl-ok); display: flex; align-items: center; gap: 6px; }

/* --- cifras + logos ------------------------------------------------------- */
.mfl-cifras { display: flex; justify-content: center; gap: 72px; flex-wrap: wrap; margin-bottom: 32px; }
.mfl-cifra { text-align: center; }
.mfl-cifra-v { font-family: var(--mfl-fuente-display); font-size: 34px; font-weight: 800; }
.mfl-cifra-l { font-size: 13px; color: var(--mfl-texto-suave); }
.mfl-logos-titulo { text-align: center; font-size: 13px; letter-spacing: 2px; color: var(--mfl-texto-tenue); font-weight: 600; text-transform: uppercase; margin-bottom: 20px; }
.mfl-logos { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; }
.mfl-logos img { max-height: 44px; max-width: 130px; filter: grayscale(1); opacity: .65; transition: filter .14s ease, opacity .14s ease; }
.mfl-logos img:hover { filter: none; opacity: 1; }

/* --- tarjetas ------------------------------------------------------------- */
.mfl-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mfl-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.mfl-tarjeta { background: #fff; border: 1px solid var(--mfl-borde); border-radius: 10px; padding: 26px; }
.mfl-tarjeta-suave { background: #fbfbfc; }
.mfl-tarjeta h3 { font-size: 17px; font-weight: 600; margin: 10px 0 8px 0; font-family: var(--mfl-fuente-texto); }
.mfl-tarjeta p { font-size: 14.5px; color: var(--mfl-texto-suave); line-height: 1.55; margin: 0; }
.mfl-paso-num { font-family: var(--mfl-fuente-display); font-size: 13px; font-weight: 700; color: var(--mfl-marca); }
.mfl-tarjeta .mfl-icono { color: var(--mfl-marca); }

/* --- trazabilidad (seccion navy) ------------------------------------------ */
.mfl-dos-col { display: flex; gap: 64px; align-items: center; }
.mfl-dos-col > div { min-width: 0; }
.mfl-lista-ok { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.mfl-lista-ok > div { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--mfl-claro); line-height: 1.5; }
.mfl-lista-ok svg { flex-shrink: 0; margin-top: 2px; }
.mfl-cadena-panel { background: var(--mfl-panel); border: 1px solid var(--mfl-navy-borde); border-radius: 12px; padding: 24px; flex: 1 1 440px; }
.mfl-cadena-item { display: flex; gap: 14px; }
.mfl-cadena-hito { display: flex; flex-direction: column; align-items: center; }
.mfl-cadena-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--mfl-ok); flex-shrink: 0; }
.mfl-cadena-punto-fin { background: #5b93c4; }
.mfl-cadena-linea { width: 2px; flex: 1; background: var(--mfl-navy-borde); }
.mfl-cadena-texto { padding-bottom: 18px; }
.mfl-cadena-texto h4 { font-size: 14px; color: var(--mfl-claro); font-weight: 600; margin: 0; font-family: var(--mfl-fuente-texto); }
.mfl-cadena-texto p { font-size: 12.5px; color: #6b747e; margin: 2px 0 0 0; }

/* --- testimonios ---------------------------------------------------------- */
.mfl-testimonio { background: #fff; border: 1px solid var(--mfl-borde); border-radius: 10px; padding: 28px; }
.mfl-testimonio blockquote { font-size: 15px; line-height: 1.65; color: var(--mfl-texto); margin: 0; border: 0; padding: 0; }
.mfl-testimonio-quien { margin-top: 18px; font-weight: 600; font-size: 14px; }
.mfl-testimonio-web { font-size: 13px; color: var(--mfl-texto-tenue); }
.mfl-testimonio-web a { color: var(--mfl-info); }

/* --- FAQ ------------------------------------------------------------------ */
.mfl-faq { max-width: 820px; margin: 0 auto; }
.mfl-faq details { border-bottom: 1px solid var(--mfl-borde); }
.mfl-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; font-size: 17px; font-weight: 600; color: var(--mfl-texto); }
.mfl-faq summary::-webkit-details-marker { display: none; }
.mfl-faq summary::after { content: "+"; font-size: 22px; color: var(--mfl-texto-tenue); flex-shrink: 0; }
.mfl-faq details[open] summary::after { content: "−"; }
.mfl-faq details p { padding: 0 4px 20px 4px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--mfl-texto-suave); }

/* --- formulario de alta --------------------------------------------------- */
.mfl-form { max-width: 520px; margin: 0 auto; }
.mfl-form .form-control { border-radius: 8px; min-height: 46px; }
.mfl-form label { font-size: 14px; font-weight: 500; }

/* --- footer --------------------------------------------------------------- */
.mfl-footer { background: #080d14; color: #98a1ab; padding: 48px 24px; }
.mfl-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.mfl-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.mfl-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.mfl-footer-col strong { color: var(--mfl-claro); font-weight: 600; }
.mfl-footer a { color: #98a1ab; text-decoration: none; }
.mfl-footer a:hover { color: #fff; text-decoration: none; }
.mfl-footer-nota { margin-top: 10px; font-size: 13px; color: #6b747e; max-width: 320px; }
.mfl-footer-copy { max-width: 1200px; margin: 32px auto 0; text-align: center; font-size: 12.5px; color: #6b747e; border-top: 1px solid #1c2836; padding-top: 20px; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 991px) {
    .mfl-hero-inner, .mfl-dos-col { flex-direction: column; }
    .mfl-hero h1 { font-size: 38px; }
    .mfl-titulo { font-size: 30px; }
    .mfl-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mfl-grid-3 { grid-template-columns: 1fr; }
    .mfl-nav-links { display: none; }
    /* El acceso no cabe en tableta: quedan idioma y boton de demo, y se entra
       desde /login.html. El hero ya ofrece "Start free trial". */
    .mfl-nav-login, .mfl-nav-enlaces { display: none; }
    .mfl-mock { width: 100%; }
}
@media (max-width: 575px) {
    .mfl-seccion { padding: 56px 16px; }
    .mfl-hero { padding: 56px 16px 64px; }
    .mfl-hero h1 { font-size: 32px; }
    .mfl-grid-5 { grid-template-columns: 1fr; }
    .mfl-mock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mfl-hero-ctas .mfl-btn { width: 100%; }
}