/* FIPLA · fipla.com.mx
   Tokens tomados del FIPLA Design System (brandbook 2025/2026). */

/* Tipografías de marca. Requieren licencia web (Host & Link).
   Mientras los archivos .woff2 no estén en /assets/fonts/, el sitio usa las fuentes de respaldo. */
@font-face{font-family:"Aktiv Grotesk";src:url("/assets/fonts/AktivGrotesk-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url("/assets/fonts/AktivGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aktiv Grotesk";src:url("/assets/fonts/AktivGrotesk-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"MBF Ligione";src:url("/assets/fonts/MBF-Ligione.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
--fipla-deep-blue:#1a2145;--fipla-light-blue:#4666a8;--fipla-apple:#69995e;--fipla-cloud:#d7e7ef;--fipla-white:#ffffff;
--deep-blue-900:#11162f;--deep-blue-700:#262f5c;--deep-blue-600:#3a4473;--deep-blue-400:#6f779c;--deep-blue-200:#b9bdd0;--deep-blue-100:#e3e5ee;
--light-blue-700:#344f86;--light-blue-100:#e1e8f5;
--apple-700:#4f7a46;--apple-100:#e3eedf;
--cloud-500:#b4cfdc;--cloud-300:#d7e7ef;--cloud-100:#edf4f8;
--fipla-error:#b0413e;--fipla-error-bg:#f6e3e2;
--fg-1:var(--fipla-deep-blue);--fg-2:var(--deep-blue-600);--fg-3:var(--deep-blue-400);
--border-default:var(--deep-blue-200);--border-subtle:var(--cloud-500);
--font-display:"MBF Ligione","Aktiv Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-sans:"Aktiv Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fipla-cloud);color:var(--fg-1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--fipla-light-blue);text-underline-offset:3px}
a:hover{color:var(--fipla-deep-blue)}
:focus-visible{outline:3px solid var(--fipla-light-blue);outline-offset:3px}
h1,h2,h3,p{text-wrap:pretty}

.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 16px;background:#fff;color:var(--fipla-deep-blue);font-weight:500}
.skip:focus{top:12px}

/* Encabezado en celular */
@media (max-width:760px){
  header nav a{padding:10px 8px !important;font-size:12.5px !important}
  header nav{width:100%}
  .section-title span{font-size:44px !important}
  .section-title h1,.section-title h2{font-size:36px !important}
}

/* Formulario de contacto */
.form{display:flex;flex-direction:column;gap:22px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-1);padding:0;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;color:var(--fg-1);background:#fff;border:1.5px solid var(--border-default);border-radius:0;padding:0 14px;height:46px}
.field textarea{height:auto;padding:12px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--fipla-light-blue);outline:none}
.choices{display:flex;flex-wrap:wrap;gap:12px 24px}
.choice{display:inline-flex;align-items:center;gap:10px;font-size:15px;cursor:pointer;min-height:44px}
.choice input{width:18px;height:18px;accent-color:var(--fipla-deep-blue);margin:0;flex:none}
.field .choice{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;margin:0}
.choice span{line-height:1.4}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;font:inherit;font-size:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--fipla-deep-blue);border:1.5px solid var(--fipla-deep-blue);border-radius:0;cursor:pointer}
.btn-primary:hover{background:var(--deep-blue-700)}
.btn-primary:active{transform:translateY(1px)}
.form-msg{padding:24px 0;border-top:3px solid var(--fipla-apple);margin-bottom:24px}
.form-msg p{margin:0 0 8px;font-size:16px;line-height:1.6}
.form-msg-title{font-size:24px !important;font-weight:500;text-transform:uppercase;line-height:1 !important;margin-bottom:12px !important}
.form-error{border-top-color:var(--fipla-error)}