/* FireFinch By Ikusi — capa de marca para páginas de producto fuera de la home.
   Uso: <link href="https://firefinch.com.mx/assets/brand.css"> al final del <head>
   y el bloque <nav class="ffnav"> justo después de <body>. */
:root{--ink:#0B3C5D;--primary:#FF6B35;--primary-dk:#E0581F;--bg:#F5F7FA;--border:#D9E3EE;--ff-blue:#1D70B8;--ease-out:cubic-bezier(.23,1,.32,1)}
body{font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;padding-top:68px}
h1,h2,h3,.brand,.btn,.plan .nm,.plan .pr{font-family:Montserrat,"Open Sans",Arial,sans-serif}
header{background:linear-gradient(135deg,#060D1A 0%,#0B3C5D 100%)}
.btn{transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out),border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.btn:hover{box-shadow:0 10px 24px rgba(255,107,53,.35)}
.btn:active{transform:scale(.97)}
.btn.ghost:hover{box-shadow:none}
.btn.wa:hover{box-shadow:0 10px 24px rgba(37,211,102,.35)}
.card{transition:border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.plan.hl{border-color:var(--primary)}
.plan .sg,.faq a,a.lnk{color:var(--ff-blue)}
.faq summary::after{color:var(--primary)}
footer{background:#060D1A}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* barra de navegación */
.ffnav{position:fixed;top:0;left:0;right:0;z-index:1000;height:68px;display:flex;align-items:center;padding:0 5%;background:rgba(6,13,26,.94);backdrop-filter:blur(24px);box-shadow:0 4px 32px rgba(0,0,0,.35);font-family:Montserrat,Arial,sans-serif}
.ffnav a{text-decoration:none}
.ffnav .ff-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;font-size:1.45rem;letter-spacing:-.02em}
.ffnav .ff-brand i{width:34px;height:34px;border-radius:9px;background:#FF6B35;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:1rem;box-shadow:0 4px 14px rgba(255,107,53,.45)}
.ffnav .ff-brand span{color:#FF6B35}
.ffnav ul{display:flex;list-style:none;gap:4px;margin:0 20px 0 auto;padding:0}
.ffnav li{position:relative}
.ffnav ul>li>a{display:block;color:rgba(255,255,255,.82);font-size:.86rem;font-weight:500;padding:8px 13px;border-radius:7px;transition:color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.ffnav ul>li>a:hover,.ffnav ul>li>a.on{color:#fff;background:rgba(255,255,255,.08)}
.ffnav .ff-cta{background:#FF6B35;color:#fff!important;font-weight:600!important;padding:9px 20px!important}
.ffnav .ff-cta:hover{background:#E0581F!important}
.ffnav .ff-cta:active{transform:scale(.97)}
.ffnav .ff-sub{position:absolute;top:100%;left:50%;margin-left:-180px;width:360px;padding-top:12px;visibility:hidden;pointer-events:none}
.ffnav .ff-sub>div{background:rgba(6,13,26,.97);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top center;transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
.ffnav li:hover .ff-sub,.ffnav li:focus-within .ff-sub{visibility:visible;pointer-events:auto}
.ffnav li:hover .ff-sub>div,.ffnav li:focus-within .ff-sub>div{opacity:1;transform:none}
.ffnav .ff-sub a{display:block;padding:9px 12px;border-radius:10px;color:#fff;font-size:.85rem;font-weight:600}
.ffnav .ff-sub a small{display:block;color:rgba(255,255,255,.62);font-weight:400;font-size:.72rem;margin-top:1px}
.ffnav .ff-sub a:hover{background:rgba(255,255,255,.08)}
.ff-foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.ff-foot a{color:#B9C7D8}
@media (max-width:820px){.ffnav ul>li:not(:last-child){display:none}.ffnav .ff-sub{display:none}.ffnav ul{margin-left:auto;margin-right:0}}
@media (prefers-reduced-motion:reduce){.ffnav .ff-sub>div{transform:none}}