/* ==========================================================================
   FIRMARIS — Capa de identidad sobre el CSS del template Trixel (Tailwind v4)
   Cargar SIEMPRE después de trixel.css.
   Manual de Identidad: Azul Abisal #0B1B3D · Cobalto Eléctrico #1E56A0 ·
   Verde Certidumbre #10B981 · Gris Niebla #F8F9FA · Gris Pizarra #4A5568
   ========================================================================== */

/* --- Tipografías self-hosted (pilar RGPD/UE: sin CDN externo) --- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/l/fonts/SpaceGrotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/l/fonts/SpaceGrotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/l/fonts/SpaceGrotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/l/fonts/SpaceGrotesk-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/l/fonts/PlusJakartaSans-300.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/l/fonts/PlusJakartaSans-400.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/l/fonts/PlusJakartaSans-500.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/l/fonts/PlusJakartaSans-600.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/l/fonts/PlusJakartaSans-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/l/fonts/PlusJakartaSans-800.woff2') format('woff2')}

/* --- Tema CLARO (por defecto cuando no hay clase .dark) --- */
:root{
  --font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;

  --background:#F8F9FA;            /* Gris Niebla */
  --foreground:#0B1B3D;            /* Azul Abisal */
  --card:#FFFFFF;
  --card-foreground:#0B1B3D;
  --popover:#FFFFFF;
  --popover-foreground:#0B1B3D;
  --primary:#1E56A0;               /* Cobalto Eléctrico */
  --primary-foreground:#FFFFFF;
  --secondary:#4E8EDB;
  --secondary-foreground:#FFFFFF;
  --accent-cyan:#10B981;           /* Verde Certidumbre */
  --muted:#EEF2F8;
  --muted-foreground:#4A5568;      /* Gris Pizarra */
  --accent:#E8EEF7;
  --accent-foreground:#1E56A0;
  --destructive:#DC2626;
  --destructive-foreground:#FFFFFF;
  --border:#E2E7EF;
  --input:#E2E7EF;
  --ring:#1E56A0;

  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(11,27,61,.12);
  --gradient-brand:linear-gradient(120deg,#1E56A0,#4E8EDB 55%,#10B981);
  --shadow-premium:0 30px 80px -30px rgba(30,86,160,.55);
}

/* --- Tema OSCURO (default de la landing: Azul Abisal) --- */
.dark{
  --background:#0B1B3D;            /* Azul Abisal */
  --foreground:#F8F9FA;
  --card:#12244D;
  --card-foreground:#F8F9FA;
  --popover:#0E1F45;
  --popover-foreground:#F8F9FA;
  --primary:#1E56A0;
  --primary-foreground:#FFFFFF;
  --secondary:#4E8EDB;
  --secondary-foreground:#FFFFFF;
  --accent-cyan:#10B981;
  --muted:#12244D;
  --muted-foreground:#A9B8D4;
  --accent:#17305F;
  --accent-foreground:#DCE8FA;
  --destructive:#F87171;
  --destructive-foreground:#0B1B3D;
  --border:rgba(248,249,250,.12);
  --input:rgba(248,249,250,.16);
  --ring:#4E8EDB;

  --glass-bg:rgba(11,27,61,.72);
  --glass-border:rgba(248,249,250,.14);
  --gradient-brand:linear-gradient(120deg,#1E56A0,#5B9AE0 55%,#10B981);
  --shadow-premium:0 30px 80px -30px rgba(30,86,160,.6);
}

/* --- Navbar: cristal al hacer scroll --- */
.nav-scrolled{border-color:var(--border)!important;background:color-mix(in oklab,var(--background) 72%,transparent)!important;backdrop-filter:blur(22px) saturate(160%);}
.nav-scrolled .nav-link{color:var(--muted-foreground)}

/* --- Trazo de Certeza: la línea ascendente de la marca --- */
.certainty-stroke{display:inline-block;width:5.5rem;height:.55rem;border-radius:9999px;
  background:linear-gradient(90deg,transparent,#1E56A0 30%,#10B981 100%);}

/* --- Acordeón FAQ (reemplaza el Radix del template) --- */
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1)}
.faq-panel>div{overflow:hidden}
.faq-item[data-open="true"] .faq-panel{grid-template-rows:1fr}
.faq-item[data-open="true"] .faq-chevron{transform:rotate(180deg)}
.faq-chevron{transition:transform .25s ease}

/* --- Menú móvil --- */
.mobile-menu{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.mobile-menu[hidden]{display:none}
/* Al abrir (JS quita hidden + clase hidden): centrar el contenido */
.mobile-menu:not([hidden]){display:flex;flex-direction:column;align-items:center;justify-content:center}

/* --- Botón volver arriba --- */
.back-top.is-visible{pointer-events:auto;transform:translateY(0)!important;opacity:1!important}

/* ==========================================================================
   UTILITIES AUSENTES DEL BUILD DEL TEMPLATE
   trixel.css es Tailwind v4.3.3 COMPILADO contra el HTML del demo de Trixel:
   solo contiene las clases que usaba ese HTML. La landing adaptada usa
   algunas más que no generaron CSS (verificado 05/09/2026 — bug del menú
   móvil: el overlay quedaba sin z-index → el header lo tapaba y no se podía
   cerrar, con body.overflow=hidden → página congelada). Se restauran aquí
   con los valores exactos de Tailwind v4.
   ========================================================================== */

/* --- Layout / posicionamiento críticos --- */
.z-\[60\]{z-index:60}                          /* overlay menú móvil */
.grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}  /* navbar */
.right-6{right:1.5rem}                         /* botón cerrar menú */
.top-6{top:1.5rem}                             /* botón cerrar menú */
.-inset-6{inset:calc(var(--spacing)*-6)}       /* tarjetas flotantes hero */
.max-w-\[14ch\]{max-width:14ch}
.min-w-\[640px\]{min-width:640px}

/* --- Fondos y blur con opacidad (color-mix, sintaxis v4) --- */
.bg-background\/95{background-color:color-mix(in oklab,var(--background) 95%,transparent)}
.backdrop-blur-2xl{backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px)}
.text-primary-foreground\/85{color:color-mix(in oklab,var(--primary-foreground) 85%,transparent)}

/* --- Otros utilities sueltos --- */
.opacity-15{opacity:.15}
.overflow-x-auto{overflow-x:auto}
.pb-5{padding-bottom:calc(var(--spacing)*5)}
.shadow-soft{box-shadow:0 10px 40px -12px rgba(11,27,61,.25)}
.\[mask-image\:linear-gradient\(90deg\,transparent\,#000_12\%\,#000_88\%\,transparent\)\]{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* --- Clases custom de la landing (enlaces del menú móvil, FAQ, precios) --- */
.mobile-link{color:var(--foreground);transition:color .3s ease}
.mobile-link:hover{color:var(--primary)}
.faq-btn{width:100%}
.price-value{font-variant-numeric:tabular-nums}

/* --- Tabla comparativa --- */
.firmaris-table{width:100%;border-collapse:collapse;font-size:.92rem}
.firmaris-table th,.firmaris-table td{padding:.95rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.firmaris-table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-foreground);font-weight:600}
.firmaris-table tbody tr:last-child td{border-bottom:0}
.firmaris-table .si{color:var(--accent-cyan);font-weight:600}
.firmaris-table .no{color:var(--muted-foreground);opacity:.65}

/* --- Logo nav --- */
.nav-logo{height:2.15rem;width:auto;display:block}
/* Logo real Firmaris (navy+teal) en claro; versión blanca+teal en oscuro */
.dark .nav-logo{content:url('/l/img/firmaris-logo-blanco.png')}

/* --- Selección --- */
::selection{background:var(--primary);color:var(--primary-foreground)}

/* --- Scroll suave + anclas con header fijo --- */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:6rem}