/*
 * Medifolios · Tema claro del sitio (rediseño nov-2026)
 * Paleta del login nuevo de la plataforma. Todo color, fuente y medida sale de :root.
 * Hoja compartida: la carga templates/components/header.php (y sections/header.php)
 * DESPUÉS de las hojas heredadas, para que gane los empates.
 *
 * Las reglas que cambian lo heredado (fondo del body, color de los títulos) cuelgan de
 * html:has(.mf-header): solo aplican en las páginas que ya usan el header nuevo. Las
 * landings de campaña que no incluyen navbar.php quedan como estaban.
 */
:root{
  /* Marca */
  --mf-azul:#0066CC;
  --mf-azul-oscuro:#004C99;
  --mf-cian:#00AEEF;          /* solo decorativo: 2,5:1 sobre blanco */
  --mf-cian-claro:#70C6F0;    /* solo decorativo */
  --mf-indigo:#2C2A7D;
  --mf-indigo-profundo:#161138;
  /* Superficies y texto */
  --mf-c-fondo:#F3F8FC;
  --mf-c-superficie:#FFFFFF;
  --mf-c-tinte:#E8F2FB;
  --mf-c-texto:#161138;
  --mf-c-texto-2:#4A5468;
  --mf-c-borde:#D6E2EE;
  --mf-c-linea:#E3ECF5;
  --mf-c-campo:#75839A;
  --mf-c-primario:#0066CC;
  --mf-c-primario-hover:#004C99;
  --mf-c-enlace:#0066CC;
  --mf-c-foco:#2C2A7D;
  --mf-c-error:#B42318;
  --mf-c-whatsapp:#0B7A66;    /* botón de WhatsApp con texto blanco: 5,26:1 */
  /* Panel de marca (firma): foto bajo velo azul al 86 % */
  --mf-panel-fondo:#004C99;
  --mf-panel-velo:.86;
  --mf-panel-texto:#FFFFFF;
  --mf-panel-texto-2:#E6F0FA;
  --mf-panel-texto-3:#CFE2F5;
  --mf-panel-linea:rgba(255,255,255,.28);
  /* Pie oscuro */
  --mf-pie-fondo:#161138;
  --mf-pie-texto:#C9CFDD;
  --mf-pie-linea:rgba(255,255,255,.14);
  /* Tipografía: solo Poppins (la que ya carga el sitio) */
  --mf-f:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mf-t-cuerpo:1rem;
  --mf-t-pequeno:.9375rem;
  --mf-t-mini:.8125rem;
  /* Medidas */
  --mf-ancho:1200px;
  --mf-margen:clamp(20px,4vw,40px);
  --mf-radio:12px;
  --mf-radio-control:8px;
  --mf-toque:44px;
  --mf-alto-header:72px;
  --mf-dur:180ms;
  --mf-curva:cubic-bezier(.2,.7,.2,1);
  --mf-sombra-menu:0 18px 40px -24px rgba(22,17,56,.35);
  --mf-sombra-form:0 30px 60px -30px rgba(10,20,60,.55);
  --mf-sombra-barra:0 -10px 30px -18px rgba(22,17,56,.4);
}

/* =====================================================================
   1. Capa clara sobre lo heredado (solo páginas con el header nuevo)
   ===================================================================== */
/* style.css fija html,body{height:100%}: con eso el header sticky se suelta al
   pasar el primer pantallazo. Y el padding-top de 80px era para el navbar fijo
   viejo: el header nuevo ocupa su lugar en el flujo. */
html:has(.mf-header),
html:has(.mf-header) body{height:auto}
html:has(.mf-header){scroll-padding-top:calc(var(--mf-alto-header) + 16px)}
html:has(.mf-header) body{
  padding-top:0;
  overflow-x:clip;
  background:var(--mf-c-superficie);
  color:var(--mf-c-texto);
  font-family:var(--mf-f);
}
/* Los títulos toman el color de su contenedor (antes eran #fff fijos sobre el body
   oscuro). :where() deja la regla en especificidad 0,0,1: cualquier color que la
   página le dé a sus títulos sigue mandando. */
:where(html:has(.mf-header)) :is(h1,h2,h3,h4,h5,h6){color:inherit}
:where(html:has(.mf-header)) a{color:var(--mf-c-enlace)}
:where(html:has(.mf-header)) a:hover{color:var(--mf-c-primario-hover)}
:where(html:has(.mf-header)) :focus-visible{outline:3px solid var(--mf-c-foco);outline-offset:3px}
/* style.css anima "all" en todo enlace y botón: aquí solo se anima transform y opacity.
   El color del hover cambia sin transición. */
:where(html:has(.mf-header)) :is(a,button,.btn){transition-property:transform,opacity}

/* =====================================================================
   2. Utilidades y botones compartidos
   ===================================================================== */
.mf-contenedor{width:100%;max-width:calc(var(--mf-ancho) + 2*var(--mf-margen));margin-inline:auto;padding-inline:var(--mf-margen);box-sizing:border-box}
.mf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mf-icono{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mf-icono--16{width:16px;height:16px}
.mf-icono--20{width:20px;height:20px}
.mf-saltar{position:absolute;left:12px;top:-80px;z-index:2000;background:var(--mf-c-primario);color:#fff!important;padding:10px 16px;border-radius:var(--mf-radio-control);font:600 1rem/1.2 var(--mf-f);text-decoration:none}
.mf-saltar:focus{top:12px}

.mf-boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--mf-toque);padding:11px 22px;border-radius:var(--mf-radio-control);font:600 1rem/1.2 var(--mf-f);text-decoration:none!important;cursor:pointer;border:1.5px solid transparent;transition:transform var(--mf-dur) var(--mf-curva);white-space:nowrap;box-sizing:border-box}
.mf-boton--primario,.mf-boton--primario:visited{background:var(--mf-c-primario);color:#fff!important}
.mf-boton--primario:hover{background:var(--mf-c-primario-hover);color:#fff!important;transform:translateY(-1px)}
.mf-boton--secundario,.mf-boton--secundario:visited{background:var(--mf-c-superficie);color:var(--mf-c-primario)!important;border-color:var(--mf-c-primario)}
.mf-boton--secundario:hover{background:var(--mf-c-fondo);color:var(--mf-c-primario-hover)!important}
.mf-boton--claro,.mf-boton--claro:visited{background:#fff;color:var(--mf-azul-oscuro)!important}
.mf-boton--claro:hover{color:var(--mf-indigo-profundo)!important;transform:translateY(-1px)}
.mf-boton--borde-claro,.mf-boton--borde-claro:visited{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.75)}
.mf-boton--borde-claro:hover{color:#fff!important;border-color:#fff;transform:translateY(-1px)}
.mf-boton--grande{min-height:52px;padding:14px 26px;font-size:1.0625rem}
/* Íconos de línea que reemplazan a los emojis de las tarjetas (templates/components/icono-linea.php).
   El color va en el propio SVG para ganarle al naranja #FFA320 de .feature-icon (global-icons.css). */
.mf-icono-linea{display:block;width:40px;height:40px;flex:none;color:var(--mf-c-primario);stroke:currentColor;fill:none}
.mf-enlace-flecha{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;min-height:var(--mf-toque)}
.mf-enlace-flecha:hover{text-decoration:underline}
.mf-enlace-flecha .mf-icono{transition:transform var(--mf-dur) var(--mf-curva)}
.mf-enlace-flecha:hover .mf-icono{transform:translateX(3px)}

/* Panel de marca: la firma visual (foto de la web bajo velo azul, como el login) */
.mf-panel{position:relative;isolation:isolate;color:var(--mf-panel-texto);background:var(--mf-panel-fondo) url(../img/img-background-home-1600.jpg) center/cover no-repeat}
.mf-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mf-panel-fondo);opacity:var(--mf-panel-velo)}
.mf-panel :is(h1,h2,h3,h4){color:var(--mf-panel-texto)}
.mf-panel p{color:var(--mf-panel-texto-2)}
.mf-panel a:not(.mf-boton){color:#fff}
.mf-panel :focus-visible{outline-color:#fff}

/* =====================================================================
   3. Franja de la promo (una sola vez, arriba del header)
   ===================================================================== */
.mf-promo{background:var(--mf-c-tinte);color:var(--mf-c-texto);font:400 var(--mf-t-pequeno)/1.45 var(--mf-f);border-bottom:1px solid var(--mf-c-borde);position:relative;z-index:1001}
.mf-promo .mf-contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;padding-block:5px;text-align:center}
.mf-promo p{margin:0!important;color:var(--mf-c-texto);line-height:1.45!important}
.mf-promo strong{color:var(--mf-azul-oscuro);font-weight:600}
.mf-promo a{font-weight:600;color:var(--mf-c-enlace);text-decoration:underline;text-underline-offset:3px;min-height:36px;display:inline-flex;align-items:center}
.mf-promo a:hover{color:var(--mf-c-primario-hover)}

/* =====================================================================
   4. Header + mega-menú de módulos
   ===================================================================== */
.mf-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--mf-c-linea);font-family:var(--mf-f)}
.mf-header .mf-contenedor{display:flex;align-items:center;gap:24px;height:var(--mf-alto-header)}
.mf-logo{display:inline-flex;align-items:center;flex:none;min-height:var(--mf-toque)}
.mf-logo img{height:40px;width:auto;display:block;max-width:none}
.mf-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.mf-nav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.mf-nav>ul>li{margin:0;padding:0;list-style:none}
.mf-nav-enlace{display:inline-flex;align-items:center;gap:6px;min-height:var(--mf-toque);padding:0 12px;border-radius:var(--mf-radio-control);color:var(--mf-c-texto)!important;text-decoration:none!important;font:500 .96875rem/1 var(--mf-f);background:none;border:0;cursor:pointer;white-space:nowrap}
.mf-nav-enlace:hover{color:var(--mf-c-primario)!important;background:var(--mf-c-fondo)}
.mf-nav-enlace[aria-current="page"]{color:var(--mf-azul-oscuro)!important;font-weight:600}
.mf-nav-enlace .mf-icono{transition:transform var(--mf-dur) var(--mf-curva)}
.mf-nav-enlace[aria-expanded="true"] .mf-icono{transform:rotate(180deg)}
.mf-nav-ingreso{color:var(--mf-c-primario)!important;font-weight:600}
.mf-nav .mf-boton{margin-left:10px}
.mf-menu-boton{display:none;margin-left:auto;width:var(--mf-toque);height:var(--mf-toque);border:1px solid var(--mf-c-borde);border-radius:var(--mf-radio-control);background:#fff;color:var(--mf-c-texto);align-items:center;justify-content:center;cursor:pointer;padding:0}
.mf-mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--mf-c-borde);box-shadow:var(--mf-sombra-menu);opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity var(--mf-dur) var(--mf-curva),transform var(--mf-dur) var(--mf-curva),visibility 0s linear var(--mf-dur)}
.mf-mega.mf-abierto{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.mf-mega .mf-contenedor{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;padding-block:28px 24px;height:auto;align-items:start}
.mf-mega-titulo{font:600 .9375rem/1.3 var(--mf-f)!important;color:var(--mf-c-texto-2)!important;margin:0 0 10px!important}
.mf-mega ul{list-style:none;margin:0;padding:0}
.mf-mega li{margin:0;padding:0;list-style:none}
.mf-mega li a,.mf-mega li span{display:block;padding:5px 0;color:var(--mf-c-texto)!important;text-decoration:none;font:400 .9375rem/1.4 var(--mf-f)}
.mf-mega li span{color:var(--mf-c-texto-2)!important}
.mf-mega li a:hover{color:var(--mf-c-primario)!important;text-decoration:underline}
.mf-mega-pie{grid-column:1/-1;border-top:1px solid var(--mf-c-linea);padding-top:12px}

/* =====================================================================
   5. Contacto (reprise del panel de marca) + pie oscuro
   ===================================================================== */
.mf-footer{font-family:var(--mf-f);color:var(--mf-c-texto)}
.mf-contacto{padding-block:clamp(48px,5vw,72px)}
.mf-contacto .mf-contenedor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.mf-contacto h2{font:600 clamp(1.5rem,1.1rem + 1vw,2.05rem)/1.2 var(--mf-f)!important;letter-spacing:-.015em;margin:0 0 14px!important;max-width:18ch;color:#fff!important}
.mf-contacto-bajada{font-size:1.0625rem;margin:0 0 24px!important;color:var(--mf-panel-texto-2)}
.mf-acciones{display:flex;flex-wrap:wrap;gap:12px}
.mf-atencion{display:grid;grid-template-columns:repeat(2,minmax(0,auto));justify-content:start;gap:16px 40px;margin-top:32px;padding-top:24px;border-top:1px solid var(--mf-panel-linea)}
.mf-atencion h3{font:600 var(--mf-t-mini)/1.4 var(--mf-f)!important;color:var(--mf-panel-texto-3)!important;margin:0 0 4px!important;letter-spacing:0}
.mf-atencion h4{font:600 var(--mf-t-pequeno)/1.4 var(--mf-f)!important;color:#fff!important;margin:6px 0 0!important}
.mf-atencion p{margin:0!important;font-size:var(--mf-t-pequeno);color:var(--mf-panel-texto-2);line-height:1.5!important}
.mf-telefono{font:600 1.25rem/1.3 var(--mf-f);color:#fff!important;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--mf-toque)}
.mf-telefono:hover{text-decoration:underline}
.mf-formulario{background:#fff;color:var(--mf-c-texto);border-radius:var(--mf-radio);padding:clamp(20px,3vw,36px);box-shadow:var(--mf-sombra-form)}
.mf-formulario-titulo{font:600 1.25rem/1.3 var(--mf-f);color:var(--mf-c-texto);margin:0 0 16px}
.mf-campo{margin-bottom:14px}
.mf-campo label{display:block;font:600 var(--mf-t-pequeno)/1.4 var(--mf-f);margin-bottom:6px;color:var(--mf-c-texto)}
.mf-campo input,.mf-campo textarea{width:100%;min-height:48px;padding:11px 14px;font:400 1rem/1.4 var(--mf-f);color:var(--mf-c-texto);background:#fff;border:1px solid var(--mf-c-campo);border-radius:var(--mf-radio-control);box-sizing:border-box}
.mf-campo textarea{min-height:96px;resize:vertical}
.mf-campo input:focus-visible,.mf-campo textarea:focus-visible{outline:3px solid var(--mf-c-foco);outline-offset:1px;border-color:var(--mf-c-foco)}
.mf-campos-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.mf-formulario .g-recaptcha{margin:4px 0 16px;min-height:78px}
.mf-recaptcha-error{color:var(--mf-c-error);font-size:var(--mf-t-mini);margin:-8px 0 12px}
.mf-formulario .mf-boton{width:100%}
.mf-pie{background:var(--mf-pie-fondo);color:var(--mf-pie-texto);font:400 var(--mf-t-pequeno)/1.6 var(--mf-f)}
.mf-pie .mf-contenedor{padding-block:32px 28px}
.mf-pie a{color:#fff!important}
.mf-pie p{color:var(--mf-pie-texto)}
.mf-pie :focus-visible{outline-color:#fff}
.mf-pie-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-bottom:22px;border-bottom:1px solid var(--mf-pie-linea)}
.mf-pie-logo{height:38px;width:auto;display:block}
.mf-pie h3{font:600 var(--mf-t-mini)/1.3 var(--mf-f)!important;color:var(--mf-pie-texto)!important;margin:0 0 2px!important;letter-spacing:0}
.mf-redes{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0;padding:0}
.mf-redes li{margin:0;padding:0;list-style:none}
.mf-redes a{display:inline-flex;align-items:center;gap:8px;min-height:var(--mf-toque);text-decoration:none}
.mf-redes a:hover{text-decoration:underline}
.mf-internacional{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;padding:16px 0;border-bottom:1px solid var(--mf-pie-linea)}
.mf-internacional h3{font-size:var(--mf-t-pequeno)!important;color:#fff!important;margin:0 8px 0 0!important}
.mf-internacional a{min-height:var(--mf-toque);display:inline-flex;align-items:center}
.mf-legal{padding-top:18px;font-size:var(--mf-t-mini);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.mf-legal p{margin:0!important;font-size:var(--mf-t-mini);line-height:1.6!important}
/* Slot del pie para la nota de IA de la portada */
.mf-pie-extra{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--mf-pie-linea);font-size:var(--mf-t-mini)}
.mf-pie-extra .mf-icono{color:var(--mf-cian-claro);grid-row:span 3}
.mf-pie-extra h2{font:600 .9375rem/1.4 var(--mf-f)!important;color:#fff!important;margin:0!important}
.mf-pie-extra p{margin:0!important;line-height:1.6!important}
.mf-pie-extra strong{color:#fff}

/* =====================================================================
   6. Barra fija de demo + WhatsApp (sticky-bar.php)
   ===================================================================== */
.cta-sticky-bar{background:#fff;color:var(--mf-c-texto);border-top:1px solid var(--mf-c-borde);box-shadow:var(--mf-sombra-barra);padding:10px 0 calc(10px + env(safe-area-inset-bottom));font-family:var(--mf-f);transition:transform 240ms var(--mf-curva)}
.cta-sticky-content{max-width:calc(var(--mf-ancho) + 2*var(--mf-margen));padding:0 var(--mf-margen);gap:16px}
.cta-sticky-text .icon{width:40px;height:40px;background:var(--mf-c-tinte);border:0;color:var(--mf-c-primario);font-size:1.1rem}
.cta-sticky-text h3,.cta-sticky-text h4{font:600 1rem/1.35 var(--mf-f)!important;color:var(--mf-c-texto)!important;margin:0!important}
.cta-sticky-text p{font-size:var(--mf-t-mini);color:var(--mf-c-texto-2);line-height:1.4!important}
.btn-sticky{min-height:var(--mf-toque);padding:10px 20px;border-radius:var(--mf-radio-control);font:600 .9375rem/1.2 var(--mf-f);transition:transform var(--mf-dur) var(--mf-curva)}
.btn-sticky-primary{background:var(--mf-c-primario);border:1.5px solid var(--mf-c-primario);color:#fff}
.btn-sticky-primary:hover{background:var(--mf-c-primario-hover);box-shadow:none;transform:translateY(-1px)}
.btn-sticky-secondary{background:#fff;border:1.5px solid var(--mf-c-primario);color:var(--mf-c-primario)}
.btn-sticky-secondary:hover{background:var(--mf-c-fondo);color:var(--mf-c-primario-hover);box-shadow:none;transform:translateY(-1px)}
.btn-sticky:focus{outline:none}
.btn-sticky:focus-visible{outline:3px solid var(--mf-c-foco);outline-offset:2px}

/* =====================================================================
   7. Responsivo
   ===================================================================== */
@media (max-width:1100px){
  .mf-nav-enlace{padding:0 9px}
  .mf-header .mf-contenedor{gap:14px}
}
@media (max-width:960px){
  :root{--mf-alto-header:64px}
  .mf-menu-boton{display:inline-flex}
  .mf-nav{position:fixed;left:0;right:0;bottom:0;top:var(--mf-menu-top,var(--mf-alto-header));background:#fff;flex-direction:column;align-items:stretch;padding:8px var(--mf-margen) 32px;overflow:auto;display:none;margin:0;z-index:1000}
  .mf-nav.mf-abierto{display:flex}
  .mf-nav>ul{flex-direction:column;align-items:stretch}
  .mf-nav-enlace{width:100%;justify-content:space-between;padding:0 4px;min-height:52px;border-bottom:1px solid var(--mf-c-linea);border-radius:0;font-size:1.0625rem}
  .mf-nav .mf-boton{margin:16px 0 0}
  .mf-mega{position:static;box-shadow:none;border:0;opacity:1;visibility:visible;transform:none;pointer-events:auto;display:none;transition:none}
  .mf-mega.mf-abierto{display:block}
  .mf-mega .mf-contenedor{grid-template-columns:1fr 1fr;padding:12px 0;gap:18px}
  html.mf-menu-abierto{overflow:hidden}
  .mf-contacto .mf-contenedor{grid-template-columns:1fr}
  /* La barra fija no debe tapar el final de la página */
  html:has(#ctaStickyBar) body{padding-bottom:72px}
  /* En teléfono y tablet el botón de demo del header queda dentro del menú: la barra fija
     se muestra desde la carga para que el CTA esté en el primer pantallazo. En la portada
     el hero ya trae el botón y la barra aparece al hacer scroll (sticky-bar.js). */
  body:not(.mf-portada) .cta-sticky-bar{transform:none}
}
/* Barra fija en teléfono y tablet pequeña: demo + WhatsApp en UNA fila. style.css (≤768)
   apila el texto y los dos botones en columna con width:100% y la barra ocupaba ~130 px.
   Aquí se oculta el texto, el de WhatsApp toma su ancho y el de demo el resto; el ícono del
   calendario se oculta para que «Solicitar demo gratis» quepa desde 360 px. */
@media (max-width:768px){
  .cta-sticky-text{display:none}
  .cta-sticky-content{flex-direction:row;padding:0 12px}
  .cta-sticky-buttons{flex-direction:row;width:100%;gap:10px}
  .btn-sticky{flex:1 1 auto;width:auto;min-width:0;justify-content:center;padding-inline:12px;font-size:.875rem;line-height:1.2;text-align:center}
  .btn-sticky-secondary{flex:0 0 auto}
  .btn-sticky-primary .fa-calendar-check{display:none}
}
@media (max-width:699px){
  .mf-logo img{height:34px}
  .mf-promo{font-size:var(--mf-t-mini)}
  .mf-promo .mf-contenedor{display:block;padding-block:6px}
  .mf-promo p{display:inline}
  .mf-promo a{display:inline;min-height:0;margin-left:4px}
  .mf-mega .mf-contenedor{grid-template-columns:1fr}
  .mf-campos-2{grid-template-columns:1fr}
  .mf-atencion{grid-template-columns:1fr}
  .mf-acciones .mf-boton{flex:1 1 100%}
}
/* Objetivos táctiles de 44 px en pantallas táctiles */
@media (pointer:coarse){
  .mf-mega li a,.mf-promo a,.mf-pie a{display:inline-flex;align-items:center;min-height:var(--mf-toque)}
  .mf-mega li a{display:flex;padding:0}
}
@media (prefers-reduced-motion:reduce){
  html:has(.mf-header){scroll-behavior:auto}
  .mf-header *,.mf-footer *,.mf-promo *,.cta-sticky-bar,.cta-sticky-bar *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}