/* ============================================================
   theme.css — front
   Capa de estilos que redisena el sitio publico (estetica tipo Holded:
   blanco, tinta casi negra, AZUL OSCURO de marca como color dominante,
   degradados azules y micro-animaciones. SIEMPRE claro, sin tema oscuro).
   Se carga DESPUES de main.css, por lo que gana por orden y especificidad.
   ============================================================ */

/* Self-hosted Inter (latin + latin-ext, weights 400/500/600/700).
   No CDN: keeps the panel working offline and screenshots faithful.
   @import must precede every rule below it. */
@import url("fonts/fonts.css");

/* ============================================================
   1. TOKENS DE DISENO (fuente unica de verdad)
   Nunca usar hex sueltos: siempre variables.
   ============================================================ */
:root {
  /* ---------- Tipografia (Inter auto-alojado + fallback al stack del SO, sin CDN) ---------- */
  --bm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bm-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, sans-serif;

  /* Escala tipografica (front) */
  --bm-fs-hero: clamp(2.4rem, 4.6vw, 3.6rem);
  --bm-fs-h2:   clamp(1.8rem, 3vw, 2.5rem);
  --bm-fs-h3:   1.35rem;
  --bm-fs-body: 1.05rem;
  --bm-fs-small: 0.875rem;

  /* ---------- Radios coherentes ---------- */
  --bm-radius-sm: 8px;
  --bm-radius:    12px;
  --bm-radius-lg: 18px;
  --bm-radius-pill: 999px;

  /* ---------- Sombras por niveles (suaves) ---------- */
  --bm-shadow-sm: 0 1px 2px rgba(11, 15, 25, .06), 0 1px 3px rgba(11, 15, 25, .04);
  --bm-shadow-md: 0 4px 12px rgba(11, 15, 25, .07), 0 2px 4px rgba(11, 15, 25, .04);
  --bm-shadow-lg: 0 18px 40px rgba(11, 15, 25, .10), 0 6px 14px rgba(11, 15, 25, .06);

  /* ---------- Escala de espaciado (base 4/8px) ---------- */
  --bm-space-1: 4px;
  --bm-space-2: 8px;
  --bm-space-3: 16px;
  --bm-space-4: 24px;
  --bm-space-5: 40px;
  --bm-space-6: 64px;

  --bm-transition: .22s cubic-bezier(.4, 0, .2, 1);

  /* ============================================================
     PALETA v4 (prompt 2026-07-03): navy oscuro + naranja-rojo.
     Regla general de color:
       · fondo AZUL  -> botones/iconos con degradado radial NARANJA-ROJO
       · fondo BLANCO-> botones/iconos con degradado radial AZUL
     ============================================================ */
  --azul-oscuro-1: #0a1f44;
  --azul-oscuro-2: #123a75;
  --naranja-rojo-1: #ff7a18;
  --naranja-rojo-2: #d0021b;
  --azul-boton-1: #1c5dbf;
  --azul-boton-2: #0a1f44;
  --blanco: #ffffff;

  /* Degradados radiales reutilizables (fuente unica de verdad) */
  --bm-surface-blue: radial-gradient(circle at center, var(--azul-oscuro-2), var(--azul-oscuro-1));      /* fondos azules (header/footer/menu/secciones) */
  --bm-btn-on-white: radial-gradient(circle at 30% 30%, var(--azul-boton-1), var(--azul-boton-2));       /* botones/iconos SOBRE BLANCO */
  --bm-btn-on-blue:  radial-gradient(circle at 30% 30%, var(--naranja-rojo-1), var(--naranja-rojo-2));   /* botones/iconos SOBRE AZUL */

  /* ---------- FRONT: tokens semanticos (repuntados a la paleta v4) ---------- */
  --fp-primary:     #0a1f44;   /* navy oscuro de marca */
  --fp-primary-600: #123a75;   /* hover/activo */
  --fp-primary-400: #1c5dbf;   /* azul de apoyo */
  --fp-primary-soft: #E8EEF7;  /* fondo suave azulado para chips/halos */
  --fp-ink:         #0a1f44;   /* titulos / texto fuerte */
  --fp-text:        #4B5563;   /* cuerpo */
  --fp-muted:       #8A93A2;   /* secundario */
  --fp-bg:          #FFFFFF;
  --fp-bg-alt:      #F5F8FC;   /* secciones alternas */
  --fp-border:      #E3E8F0;
  --fp-accent-2:    #1c5dbf;   /* azul vivo de apoyo */

  /* Compat con reglas previas: la MAYORIA del front es blanco, por lo que
     los degradados por defecto apuntan al radial AZUL. Los elementos que
     viven sobre AZUL se sobrescriben puntualmente a --bm-btn-on-blue. */
  --fp-grad: var(--bm-btn-on-white);
  --fp-grad-vivid: var(--bm-btn-on-white);

  /* ---------- DATA-VIZ (graficas, igual en ambos temas) ---------- */
  --viz-blue:    #3B82F6;
  --viz-teal:    #10B981;
  --viz-purple:  #8B5CF6;
  --viz-magenta: #D946EF;
  --viz-red:     #EF4444;
  --viz-amber:   #F59E0B;
  --viz-gray:    #CBD5E1;

  /* ---------- SEMANTICOS (estados de negocio) ---------- */
  --success: #22C55E;  --success-bg: #DEF7EC;
  --danger:  #EF4444;  --danger-bg:  #FDECEC;
  --warning: #F59E0B;  --warning-bg: #FEF3C7;
  --info:    #3B82F6;  --info-bg:    #E0EDFF;
}

/* NOTA: el FRONT es SIEMPRE claro (estilo Holded). El tema oscuro
   vive UNICAMENTE en el backend (bloque body.dark-mode mas abajo). */

/* ============================================================
   2. RE-SKIN DEL FRONT: mapeo de las variables de FlexStart
   FlexStart controla TODO desde estas variables. Al sobrescribirlas
   aqui (despues del original) migramos la marca sin tocar main.css.
   ============================================================ */
:root {
  --default-font: var(--bm-font-sans);
  --heading-font: var(--bm-font-display);
  --nav-font: var(--bm-font-sans);

  --background-color: var(--fp-bg);
  --default-color:    var(--fp-text);
  --heading-color:    var(--fp-ink);
  --accent-color:     var(--fp-primary);   /* botones, links, acentos -> coral */
  --surface-color:    var(--fp-bg);
  --contrast-color:   #ffffff;

  --nav-color:                 var(--fp-ink);
  --nav-hover-color:           var(--fp-accent-2); /* azul vivo: visible sobre tinta */
  --nav-mobile-background-color: var(--fp-bg);
  --nav-dropdown-background-color: var(--fp-bg);
  --nav-dropdown-color:        var(--fp-ink);
  --nav-dropdown-hover-color:  var(--fp-accent-2);
}

/* Preset de seccion alterna: gris muy claro tipo Holded */
body:not(.fixed-layout) .light-background {
  --background-color: var(--fp-bg-alt);
  --surface-color: var(--fp-bg);
}

/* ============================================================
   3. FRONT: tipografia y ritmo general
   Scope `body:not(.fixed-layout)` = solo front (el admin lleva
   siempre la clase fixed-layout en el <body>).
   ============================================================ */
body:not(.fixed-layout) {
  font-family: var(--bm-font-sans);
  font-size: var(--bm-fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .1px;
  background-color: var(--fp-bg);
  color: var(--fp-text);
}

body:not(.fixed-layout) h1,
body:not(.fixed-layout) h2,
body:not(.fixed-layout) h3,
body:not(.fixed-layout) h4 {
  font-family: var(--bm-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* Titulo de seccion mas aireado y con "eyebrow" en coral */
/* En FlexStart el h2 es el "eyebrow" (pildora coral) y el p es el
   titulo grande. Reforzamos esa jerarquia: p en tinta fuerte. */
body:not(.fixed-layout) .section-title p {
  color: var(--fp-ink);
  font-family: var(--bm-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ============================================================
   4. FRONT: Header / Navbar (limpio, blanco, sticky con blur)
   ============================================================ */
/* Header en AZUL con degradado radial (paleta v4). Texto/logo en blanco. */
body:not(.fixed-layout) .header {
  background: var(--bm-surface-blue);
  border-bottom: none;
  box-shadow: none;
  transition: box-shadow var(--bm-transition);
}
/* Logo BManager (webp real, azul) sobre header azul: altura fija */
body:not(.fixed-layout) .header .logo img {
  height: 42px;
  width: auto;
}
/* Hamburguesa (movil) en blanco */
body:not(.fixed-layout) .mobile-nav-toggle {
  color: #fff;
}
/* La pildora de demo del header se elimina: el CTA vive en la barra superior */
body:not(.fixed-layout) .btn-getstarted {
  display: none;
}
/* main.js pone la clase `scrolled` en el <body>, no en el header */
body:not(.fixed-layout).scrolled .header {
  box-shadow: var(--bm-shadow-sm);
}
body:not(.fixed-layout) .navmenu a,
body:not(.fixed-layout) .navmenu a:focus {
  font-weight: 500;
  font-size: .95rem;
  color: #fff; /* texto del menu en blanco sobre header azul */
}
/* --- DESKTOP (>=1200px): indicador DESLIZANTE (sin salto de layout) ---
   El indicador es un unico <span.bm-nav-indicator> que inyecta y posiciona
   theme.js con getBoundingClientRect(); solo animamos transform,
   nunca border/padding -> cero CLS. Color naranja-rojo (acento sobre azul). */
@media (min-width: 1200px) {
  body:not(.fixed-layout) #navmenu ul {
    position: relative; /* contenedor de referencia del indicador */
  }
  body:not(.fixed-layout) .bm-nav-indicator {
    position: absolute;
    bottom: 6px;
    left: 0;
    height: 3px;
    width: 0;
    border-radius: 3px;
    background: var(--bm-btn-on-blue); /* naranja-rojo radial */
    transform: translateX(0);
    /* sin animacion de desplazamiento: el indicador aparece fijo bajo el item activo */
    transition: none;
    pointer-events: none;
    opacity: 0;
  }
  body:not(.fixed-layout) .bm-nav-indicator.is-ready {
    opacity: 1;
  }
  /* Item ACTIVO/hover: texto blanco pleno (el color lo marca el indicador) */
  body:not(.fixed-layout) .navmenu > ul > li > a.active,
  body:not(.fixed-layout) .navmenu > ul > li > a:hover {
    color: #fff;
    font-weight: 600;
  }
}

/* ============================================================
   4b. FRONT: MENU MOVIL (<1200px) — panel azul degradado, texto
   blanco, iconos por item y filete sutil entre <li>.
   ============================================================ */
@media (max-width: 1199px) {
  /* El panel desplegable pasa a AZUL radial (menu) */
  body:not(.fixed-layout) .navmenu ul {
    background: var(--bm-surface-blue);
    background-color: var(--azul-oscuro-1); /* fallback */
    padding: 6px 0;
    box-shadow: 0 24px 60px rgba(10, 31, 68, .5);
  }
  /* Enlaces: blanco, icono a la izquierda, filete entre items */
  body:not(.fixed-layout) .navmenu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  body:not(.fixed-layout) .navmenu ul li:last-child {
    border-bottom: 0;
  }
  body:not(.fixed-layout) .navmenu a,
  body:not(.fixed-layout) .navmenu a:focus {
    color: #fff;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 22px;
    font-weight: 500;
  }
  body:not(.fixed-layout) .navmenu a:hover,
  body:not(.fixed-layout) .navmenu .active {
    color: #fff;
    background: rgba(255, 255, 255, .10);
  }
  /* Icono por item (bootstrap-icons via ::before, orden del menu) */
  /* Chip de icono sobre panel AZUL -> radial NARANJA-ROJO (regla color) */
  body:not(.fixed-layout) .navmenu ul li > a::before {
    font-family: "bootstrap-icons";
    font-weight: normal;
    font-size: 1.05rem;
    width: 34px; height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bm-btn-on-blue);
    color: #fff;
    transition: filter var(--bm-transition);
  }
  body:not(.fixed-layout) .navmenu ul li > a:hover::before {
    filter: brightness(1.1);
  }
  body:not(.fixed-layout) .navmenu ul li:nth-child(1) > a::before { content: "\f423"; } /* Accueil: house-door */
  body:not(.fixed-layout) .navmenu ul li:nth-child(2) > a::before { content: "\f1cc"; } /* Services: briefcase */
  body:not(.fixed-layout) .navmenu ul li:nth-child(3) > a::before { content: "\f444"; } /* Blog: journal-text */
  body:not(.fixed-layout) .navmenu ul li:nth-child(4) > a::before { content: "\f5b2"; } /* Prix: tags */
  body:not(.fixed-layout) .navmenu ul li:nth-child(5) > a::before { content: "\f32f"; } /* Contact: envelope */
  body:not(.fixed-layout) .navmenu ul li:nth-child(6) > a::before { content: "\f1be"; } /* Login: box-arrow-in-right */
}

/* ============================================================
   5. FRONT: Botones (primario coral / secundario ghost)
   ============================================================ */
/* Primario: degradado azul de marca que se desplaza suavemente al hover */
body:not(.fixed-layout) .btn-get-started,
body:not(.fixed-layout) .php-email-form button[type="submit"],
body:not(.fixed-layout) .btn-primary {
  background: var(--fp-grad-vivid);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: var(--bm-radius-pill);
  padding: 13px 28px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fp-primary) 32%, transparent);
  transition: transform var(--bm-transition), box-shadow var(--bm-transition), background-position .45s ease;
}
body:not(.fixed-layout) .btn-get-started:hover,
body:not(.fixed-layout) .php-email-form button[type="submit"]:hover,
body:not(.fixed-layout) .btn-primary:hover {
  background-position: 95% 50%;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--fp-primary) 42%, transparent);
  color: #fff;
}
/* Secundario "ghost": borde + texto oscuro, se rellena coral al hover */
body:not(.fixed-layout) .btn-watch-video {
  color: var(--fp-ink);
  font-weight: 600;
}
body:not(.fixed-layout) .btn-watch-video i {
  color: var(--fp-primary);
  font-size: 2.2rem;
  transition: transform var(--bm-transition);
}
body:not(.fixed-layout) .btn-watch-video:hover i {
  transform: scale(1.08);
}

/* ============================================================
   5b. FRONT: BARRA SUPERIOR de utilidad (.bm-topbar-jn) tipo Holded
   Franja fija arriba del todo (azul degradado en movimiento) con
   telefono + correo a la izquierda y CTA de demo a la derecha.
   Markup nuevo en header.php.
   ============================================================ */
.bm-topbar-jn {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  height: 44px;
  background: var(--bm-surface-blue); /* fondo azul radial */
  color: #fff;
  display: flex;
  align-items: center;
}
.bm-topbar-inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bm-topbar-contact {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.bm-topbar-contact a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: .86rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: .95;
  transition: opacity var(--bm-transition);
}
.bm-topbar-contact a:hover { opacity: 1; color: #fff; text-decoration: underline; }
.bm-topbar-contact i { font-size: .92rem; }
/* CTA de demo sobre barra AZUL -> relleno radial NARANJA-ROJO (regla color) */
.bm-topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 600;
  font-size: .86rem;
  white-space: nowrap;
  padding: 6px 18px;
  border: none;
  background: var(--bm-btn-on-blue);
  border-radius: var(--bm-radius-pill);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--naranja-rojo-2) 40%, transparent);
  transition: filter var(--bm-transition), transform var(--bm-transition), box-shadow var(--bm-transition);
}
.bm-topbar-cta:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--naranja-rojo-2) 50%, transparent); }
.bm-topbar-cta i { transition: transform var(--bm-transition); }
.bm-topbar-cta:hover i { transform: translateX(4px); }

/* Responsive: en movil dejamos solo el telefono (mas el CTA compacto) */
@media (max-width: 640px) {
  .bm-topbar-contact a:nth-child(2) { display: none; } /* oculta el correo */
  .bm-topbar-inner { padding: 0 14px; }
  .bm-topbar-cta { padding: 5px 12px; }
}

/* El header fijo baja la altura de la franja */
body:not(.fixed-layout) .header { top: 44px; }
/* Compensa el margen inline del <main> (style="margin-top:6rem") */
body:not(.fixed-layout) .main {
  margin-top: calc(6rem + 44px) !important; /* gana al estilo inline */
}
@keyframes bm-grad-pan {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* El boton de demo del HEADER vuelve a ser una pildora normal con
   degradado (ya no es la franja superior) */
body:not(.fixed-layout) .btn-getstarted {
  background: var(--fp-grad-vivid);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: var(--bm-radius-pill);
  padding: 10px 22px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fp-primary) 30%, transparent);
  transition: transform var(--bm-transition), box-shadow var(--bm-transition), background-position .45s ease;
}
body:not(.fixed-layout) .btn-getstarted:hover {
  background-position: 95% 50%;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--fp-primary) 40%, transparent);
  color: #fff;
}

/* ============================================================
   6. FRONT: Hero con VIDEO de fondo + overlay oscuro (paleta v4)
   Texto blanco, botones naranja-rojo (sobre azul). Fallback: fondo
   azul radial + poster si el video no carga (movil/autoplay bloqueado).
   ============================================================ */
body:not(.fixed-layout) #hero.hero {
  position: relative;
  background: var(--bm-surface-blue); /* fallback si no hay video/poster */
  padding-top: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}
/* Video de fondo cubriendo toda la seccion */
body:not(.fixed-layout) #hero .bm-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Overlay oscuro OBLIGATORIO (garantiza contraste del texto blanco) */
body:not(.fixed-layout) #hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 31, 68, .62) 0%, rgba(6, 18, 40, .78) 100%);
  pointer-events: none;
}
/* El contenido por encima del overlay */
body:not(.fixed-layout) #hero .container {
  position: relative;
  z-index: 2;
}
/* La imagen del hero flota despacio */
body:not(.fixed-layout) .hero-img .animated {
  animation-duration: 5.5s;
}
body:not(.fixed-layout) .hero h1 {
  font-size: var(--bm-fs-hero);
  color: #fff;
  margin-bottom: 1.2rem;
}
body:not(.fixed-layout) .hero p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .9);
}
/* Bullets del hero: texto claro, sin subrayado degradado */
body:not(.fixed-layout) .hero .list-group-item {
  background-image: none;
  padding-left: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, .92);
}
/* Viñeta moderna: chip radial NARANJA-ROJO (los bullets viven en hero/about,
   ambas secciones AZULES -> regla de color) con check blanco */
body:not(.fixed-layout) .list-group-item .bi-check-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 9px;
  background: var(--bm-btn-on-blue);
  color: #fff;
  font-size: .95rem;
  margin-right: 10px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--naranja-rojo-2) 35%, transparent);
  vertical-align: middle;
}
/* Botones del hero sobre AZUL: primario naranja-rojo, secundario claro */
body:not(.fixed-layout) #hero .btn-get-started {
  background: var(--bm-btn-on-blue);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--naranja-rojo-2) 40%, transparent);
}
body:not(.fixed-layout) #hero .btn-watch-video {
  color: #fff;
}
body:not(.fixed-layout) #hero .btn-watch-video i {
  color: var(--naranja-rojo-1);
}

/* Imagen del hero enmarcada con sombra suave (look producto) */
body:not(.fixed-layout) .hero-img img {
  border-radius: var(--bm-radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* ============================================================
   7. FRONT: Cards de features / icon-box / feature-box
   Acento coral en icono, tarjeta blanca, hover elevado.
   ============================================================ */
body:not(.fixed-layout) .icon-box,
body:not(.fixed-layout) .features .feature-box,
body:not(.fixed-layout) .service-item,
body:not(.fixed-layout) .card {
  background: var(--surface-color);
  border: 1px solid var(--fp-border);
  border-radius: var(--bm-radius);
  transition: transform var(--bm-transition), box-shadow var(--bm-transition), border-color var(--bm-transition);
}
body:not(.fixed-layout) .icon-box {
  padding: 26px;
  box-shadow: var(--bm-shadow-sm);
}
body:not(.fixed-layout) .icon-box:hover,
body:not(.fixed-layout) .features .feature-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-md);
  border-color: color-mix(in srgb, var(--fp-primary) 40%, var(--fp-border));
}
/* Icono en chip con degradado de marca (moderno, coherente con el texto) */
body:not(.fixed-layout) .icon-box > i {
  color: #fff;
  background: var(--fp-grad-vivid);
  background-size: 160% 160%;
  background-position: 0% 50%;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  font-size: 1.6rem;
  margin-bottom: 14px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--fp-primary) 22%, transparent);
  transition: transform var(--bm-transition), background-position .45s ease, box-shadow var(--bm-transition);
}
body:not(.fixed-layout) .icon-box:hover > i {
  background-position: 90% 50%;
  transform: rotate(-6deg) scale(1.07);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--fp-primary) 30%, transparent);
}
/* Checks de la seccion de beneficios: mismo chip, tamano compacto */
body:not(.fixed-layout) .features .feature-box i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--fp-grad-vivid);
  color: #fff;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--fp-primary) 25%, transparent);
}

/* ============================================================
   8. FRONT: FAQ rediseñado — fondo azul suave, tarjetas con chip de
   pregunta e indicador chevron. Otro aspecto, mas visual.
   ============================================================ */
/* Fondo de seccion en tono azul muy claro que concuerda con la marca */
body:not(.fixed-layout) #faq {
  background: linear-gradient(180deg, #F3F7FC 0%, #E7EFF8 100%);
}
/* Tarjetas separadas con aire (anula el borde-linea base de FlexStart) */
body:not(.fixed-layout) .faq .faq-container .faq-item {
  background: #fff;
  border: 1px solid var(--fp-border);
  border-radius: 14px;
  box-shadow: var(--bm-shadow-sm);
  padding: 4px 22px;
  margin-bottom: 16px;
  transition: box-shadow var(--bm-transition), border-color var(--bm-transition), transform var(--bm-transition);
}
body:not(.fixed-layout) .faq .faq-container .faq-item:hover {
  box-shadow: var(--bm-shadow-md);
  transform: translateY(-2px);
}
/* Titulo con chip de pregunta (degradado) a la izquierda */
body:not(.fixed-layout) .faq .faq-container .faq-item h3 {
  padding: 18px 0;
  gap: 14px;
}
/* Chip con icono LUCIDE "help-circle" blanco sobre radial azul (FAQ vive
   sobre fondo claro -> acento azul, regla de color) */
body:not(.fixed-layout) .faq .faq-container .faq-item h3::before {
  content: "";
  width: 38px; height: 38px;
  flex: none;
  border-radius: 11px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / 21px 21px no-repeat,
    var(--bm-btn-on-white);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--fp-primary) 26%, transparent);
}
/* Indicador de apertura: chevron LUCIDE que rota al abrir */
body:not(.fixed-layout) .faq .faq-container .faq-item h3::after {
  content: "";
  margin-left: auto;
  width: 20px; height: 20px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230a1f44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--bm-transition);
}
body:not(.fixed-layout) .faq .faq-container .faq-active h3::after {
  transform: rotate(180deg);
}
body:not(.fixed-layout) .faq .faq-container .faq-item h3:hover,
body:not(.fixed-layout) .faq .faq-container .faq-active h3 {
  color: var(--fp-primary);
}
body:not(.fixed-layout) .faq .faq-container .faq-active {
  border-color: color-mix(in srgb, var(--fp-primary) 45%, var(--fp-border));
  box-shadow: var(--bm-shadow-md);
}

/* ============================================================
   9. FRONT: Pricing (tarjeta destacada con borde coral + halo)
   ============================================================ */
body:not(.fixed-layout) .pricing .pricing-item {
  border-radius: var(--bm-radius-lg);
  border: 1px solid var(--fp-border);
  box-shadow: var(--bm-shadow-sm);
  transition: transform var(--bm-transition), box-shadow var(--bm-transition);
}
body:not(.fixed-layout) .pricing .pricing-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-md);
}
body:not(.fixed-layout) .pricing .featured {
  border: 2px solid var(--fp-primary);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--fp-primary) 18%, transparent);
}

/* ============================================================
   10. FRONT: Formularios (inputs redondeados, focus coral accesible)
   ============================================================ */
body:not(.fixed-layout) .php-email-form .form-control,
body:not(.fixed-layout) .form-control {
  border-radius: var(--bm-radius-sm);
  border: 1px solid var(--fp-border);
  padding: 12px 14px;
  transition: border-color var(--bm-transition), box-shadow var(--bm-transition);
}
body:not(.fixed-layout) .php-email-form .form-control:focus,
body:not(.fixed-layout) .form-control:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fp-primary) 22%, transparent);
  outline: none;
}

/* ============================================================
   11. FRONT: Footer (tinta oscura coherente + acentos coral)
   ============================================================ */
body:not(.fixed-layout) .footer.dark-background {
  /* Azul con degradado radial (mismo lenguaje que header/barra superior) */
  --background-color: transparent;
  --surface-color: transparent;
  --accent-color: #ffffff;
  background: var(--bm-surface-blue);
  position: relative;
}
/* Halo sutil superior para dar profundidad al footer.
   z-index:-1 is required: an absolutely-positioned pseudo-element with
   the default z-index:auto still paints ABOVE the footer's normal-flow
   children (per the CSS painting-order rules for stacking contexts),
   so without it this white glow washed out the logo wordmark sitting
   right where the halo is centered (15% from the left) — it wasn't a
   z-index override, it just looked like one because the un-positioned
   .footer-top content painted first in that context. */
body:not(.fixed-layout) .footer.dark-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(900px 320px at 15% 0%, rgba(255, 255, 255, .10), transparent 60%);
  pointer-events: none;
}
body:not(.fixed-layout) .footer .social-links a:hover {
  color: #fff;
  border-color: transparent;
  background: var(--bm-btn-on-blue); /* icono sobre footer azul -> naranja-rojo */
}
body:not(.fixed-layout) .footer .footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}
body:not(.fixed-layout) #scroll-top {
  background: var(--fp-grad-vivid);
  border-radius: var(--bm-radius-sm);
  transition: filter var(--bm-transition);
}
body:not(.fixed-layout) #scroll-top:hover {
  filter: brightness(1.15);
}
/* ============================================================
   18e. FRONT: login form — more breathing room + field icons (mail /
   lock) inside the inputs. Scoped to #login (public page only).
   ============================================================ */
#login .form-control {
  padding: 12px 16px;  /* taller, roomier field (requested) */
  height: auto;
  line-height: 1.5;
}
#login label {
  display: block;
  margin-bottom: 8px;  /* more space between label and field */
  font-weight: 600;
}
#login form .col-md-12 {
  margin-bottom: 10px;  /* more vertical rhythm between fields */
}
#login #email_login,
#login #password {
  padding-left: 46px;  /* room for the leading icon */
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 18px 18px;
}
#login #email_login {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a3f54'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='m3%207%209%206%209-6'/%3E%3C/svg%3E");  /* mail icon */
}
#login #password {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232a3f54'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2011V7a4%204%200%200%201%208%200v4'/%3E%3C/svg%3E");  /* lock icon */
}

/* ============================================================
   AF. AJUSTES FINOS DEL FRONT (pulido tipo Holded)
   Eyebrows de seccion, ritmo, imagenes enmarcadas, FAQ activo.
   ============================================================ */

/* Mas aire entre secciones (respiracion tipo SaaS premium) */
body:not(.fixed-layout) .section {
  padding: clamp(52px, 7vw, 92px) 0;
}

/* "Eyebrow" del bloque About: etiqueta coral en versalitas */
body:not(.fixed-layout) .about .content h3 {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--fp-primary);
  font-family: var(--bm-font-sans);
  margin-bottom: 10px;
}

/* El "eyebrow" ya es la pildora coral nativa de FlexStart (.section-title h2);
   solo le damos algo de aire respecto al titulo grande de abajo. */
body:not(.fixed-layout) .section-title h2 {
  margin-bottom: 12px;
}

/* Imagenes de contenido enmarcadas (look producto, como el hero) */
body:not(.fixed-layout) .about img,
body:not(.fixed-layout) .features img {
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-md);
  transition: transform var(--bm-transition), box-shadow var(--bm-transition);
}
body:not(.fixed-layout) .about img:hover,
body:not(.fixed-layout) .features img:hover {
  transform: translateY(-4px);
  box-shadow: var(--bm-shadow-lg);
}

/* (El FAQ se estiliza por completo en la seccion 8 rediseñada) */

/* ============================================================
   6b. FRONT: "Pourquoi BManager ?" (home) en AZUL radial.
   Scoped a .bm-about-blue (clase propia del about de la HOME) para
   NO afectar a otras paginas que reutilizan id="about" (p.ej. services).
   ============================================================ */
body:not(.fixed-layout) .bm-about-blue {
  background: var(--bm-surface-blue);
  position: relative;
}
body:not(.fixed-layout) .bm-about-blue .content h3 {
  color: var(--naranja-rojo-1); /* eyebrow naranja sobre azul */
}
body:not(.fixed-layout) .bm-about-blue .content h2 {
  color: #fff;
}
body:not(.fixed-layout) .bm-about-blue .content p {
  color: rgba(255, 255, 255, .9);
}
body:not(.fixed-layout) .bm-about-blue .list-group-item {
  color: rgba(255, 255, 255, .92);
}
body:not(.fixed-layout) .bm-about-blue img {
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}

/* ============================================================
   22. ACCESIBILIDAD: foco visible global (WCAG) para navegacion
   por teclado, en ambos temas.
   ============================================================ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
  border-radius: var(--bm-radius-sm);
}

/* ============================================================
   Animaciones de scroll (AOS) mas rapidas (peticion del usuario).
   No se toca la config de main.js (funcional): se acelera por CSS
   sobrescribiendo la duracion inline de AOS y quitando los delays
   escalonados. Solo front.
   ============================================================ */
body:not(.fixed-layout) [data-aos] {
  transition-duration: .35s !important;
  transition-delay: 0s !important;
}

/* Respeta usuarios que reducen movimiento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}