/* =========================================================
   01. VARIABLES / VALORES BASE
   Sirve para centralizar tiempos, colores y capas usados
   por navegación, overlays, dropdowns y menú flotante.
========================================================= */
:root {
  --nav-glass-bg: rgba(16, 33, 61, 0.56);
  --nav-dark-bg: rgba(7, 15, 30, 1);
  --overlay-bg: rgba(5, 15, 35, 0.96);
  --white: #ffffff;
  --accent-blue: #4cc3ff;

  --transition-fast: 0.28s ease;
  --transition-base: 0.35s ease;
  --transition-overlay: 0.45s ease;

  --z-dropdown: 9999;
  --z-floating-menu: 99998;
  --z-overlay: 99998;
  --z-navbar: 99999;
  --z-menu-button: 100000;
  --z-mobile-overlay: 100001;
}


/* =========================================================
   02. NAVBAR / HEADER
   Sirve para controlar el logo, el header fijo y el efecto
   glass cuando el navbar cambia a estado shrink.
========================================================= */
#mainNav {
  z-index: var(--z-navbar);
  overflow: visible;
}

#mainNav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

#mainNav.navbar-shrink::before {
  background: var(--nav-glass-bg);
  backdrop-filter: blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);
}

#mainNav .container,
#mainNav .navbar-collapse,
#mainNav .navbar-nav,
#mainNav .nav-item {
  overflow: visible;
}

.navbar-brand,
.navbar-brand img,
.navbar-brand svg {
  opacity: 1;
  transition:
    opacity 0.4s ease,
    width 0.4s ease,
    height 0.4s ease,
    max-height 0.4s ease,
    transform 0.4s ease !important;
}

.navbar-brand:hover,
.navbar-brand:hover img,
.navbar-brand:hover svg {
  opacity: 0.7;
}

@media (max-width: 991px) {
#mainNav::before {
    background: var(--nav-glass-bg);
    backdrop-filter: blur(0.4rem);
    -webkit-backdrop-filter: blur(0.4rem);
  }

  #mainNav {
    background: #10213d90 !important;
  }

  #mainNav .navbar-brand img {
    height: 2.3rem;
    z-index: 100001;
  }
}

@media (max-width: 991px) {
  #mainNav .container {
    display: flex;
    align-items: center;
    gap: 22px;
  }

  #mainNav .navbar-brand {
    margin-right: auto;
  }

  #mainNav .dropdown-custom,
  #mainNav .search-open-btn,
  #mainNav .mobile-menu-btn {
    margin: 0 !important;
    flex: 0 0 auto;
  }
}

#mobileMenuOverlay .container,
#mobileMenuOverlay .container-fluid,
#mobileMenuOverlay .row,
#mobileMenuOverlay .col,
#mobileMenuOverlay .menu-overlay-content,
#mobileMenuOverlay .mobile-menu-inner {
  width: 100% !important;
  max-width: none !important;
}

#mobileMenuOverlay .menu-overlay-content {
  padding-right: 0 !important;
}

#mobileMenuOverlay .menu-collapse-item,
#mobileMenuOverlay .menu-toggle-btn {
  width: 100% !important;
  max-width: none !important;
}

#mobileMenuOverlay .container {
  max-width: 100% !important;
  width: 100% !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  --bs-gutter-x: 0 !important;
}

#mobileMenuOverlay .row {
  --bs-gutter-x: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =========================================================
   03. ICONOS / CHEVRONS
   Sirve para animar las flechas de dropdowns y collapses.
========================================================= */
.chevron-icon,
.dropdown-custom .chevron-icon {
  margin-left: 5px;
  transition: transform var(--transition-base);
}

.nav-link:hover .chevron-icon,
.dropdown-custom:hover .chevron-icon,
.menu-collapse-item .dropdown-toggle[aria-expanded="true"] .chevron-icon,
.menu-toggle-btn[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}


/* =========================================================
   04. BOTÓN HAMBURGER DESKTOP
   Sirve para abrir/cerrar el menú overlay y animar el icono
   de tres líneas a una X.
========================================================= */
.hamburger-btn {
  position: relative;
  top: 9px;
  z-index: var(--z-menu-button);

  width: 24px;
  height: 18px;
  padding: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: transparent;
  border: none;
  cursor: pointer;
}

.hamburger-btn span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--white);
  border-radius: 10px;
  transition: transform var(--transition-base), opacity var(--transition-base), width var(--transition-base);
}

.hamburger-btn span:nth-child(2) {
  width: 70%;
  margin-left: auto;
}

.hamburger-btn:hover span:nth-child(2) {
  width: 100%;
}

.hamburger-btn.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* =========================================================
   05. OVERLAY MENU DESKTOP
   Sirve para mostrar el menú principal en pantalla completa
   con transición de entrada/salida y links animados.
========================================================= */
.menu-overlay {
  position: fixed;
  inset: 0;
  /*z-index: var(--z-overlay);*/
  z-index: -1;

  padding: 160px 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity var(--transition-overlay), visibility var(--transition-overlay);
}

.mt-food {
  margin-top: 3%;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-overlay-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 22px;
}

.menu-overlay-h2 {
  margin-bottom: 1.25rem;
  color: var(--white);
  font-weight: 300;
  line-height: 1;
  opacity: 1;
  transform: translateY(20px);
  transition: opacity var(--transition-overlay), transform var(--transition-overlay), color 0.3s ease;
}

.menu-overlay-content a {
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 200;
  line-height: 1;
  opacity: 1;
  transform: translateY(20px);
  transition: opacity var(--transition-overlay), transform var(--transition-overlay), color 0.3s ease;
}

.menu-overlay.active .menu-overlay-content a {
  transform: translateY(0);
}

.menu-overlay-content a:hover {
  color: var(--accent-blue);
}

.menu-overlay-opacity {
  opacity: 0.6 !important;
}

.menu-overlay.active .menu-overlay-content a:nth-child(1) { transition-delay: 0.08s; }
.menu-overlay.active .menu-overlay-content a:nth-child(2) { transition-delay: 0.13s; }
.menu-overlay.active .menu-overlay-content a:nth-child(3) { transition-delay: 0.18s; }
.menu-overlay.active .menu-overlay-content a:nth-child(4) { transition-delay: 0.23s; }
.menu-overlay.active .menu-overlay-content a:nth-child(5) { transition-delay: 0.28s; }
.menu-overlay.active .menu-overlay-content a:nth-child(6) { transition-delay: 0.33s; }

html.menu-open,
body.menu-open {
  overflow: hidden !important;
}

body.menu-open {
  touch-action: none;
}

/* =========================================================
   06. MENU MOBILE
========================================================= */





/* =========================================================
   06. DROPDOWN MENU CUSTOM
   Sirve para los submenús del navbar, incluyendo glass,
   flecha superior y comportamiento en desktop/mobile.
========================================================= */
.navbar-nav .dropdown-custom {
  position: relative;
}

.dropdown-menu-custom {
  position: absolute;
  top: calc(100% + 2px);
  right: -46px;
  z-index: var(--z-dropdown);

  min-width: 264px;
  margin: 0;
  padding: 12px 6px;
  list-style: none;

  background: #fafafa08;
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);
  border-radius: 12px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10), 0 24px 70px rgba(0, 0, 0, 0.22);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);

  overflow: visible;
  isolation: isolate;
}

.dropdown-menu-custom::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 20px;
  height: 10px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: translateX(-50%);
}

.dropdown-custom:hover .dropdown-menu-custom {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu-custom li a {
  display: block;
  padding: 8px 20px;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-base);
}

.dropdown-menu-custom li a:hover {
  cursor: pointer;
  opacity: 0.4;
}

.dropdown-lang {
    right: -26px;
    left: auto;
    min-width: 150px;
}

.drop-tittle {
  padding: 13px 20px;
  color: var(--white);
  font-weight: 500;
}

/* cambia de color el texto */

.dropdown-menu-custom .texto-invertido,
.dropdown-menu-custom .drop-tittle {
  transition:
    color 0.35s ease,
    text-shadow 0.35s ease,
    opacity 0.35s ease;
}

body.dropdown-over-light .dropdown-menu-custom .texto-invertido,
body.dropdown-over-light .dropdown-menu-custom .drop-tittle {
  color: #254468 !important;
  text-shadow: none !important;
}

body.dropdown-over-dark .dropdown-menu-custom .texto-invertido,
body.dropdown-over-dark .dropdown-menu-custom .drop-tittle {
  color: #ffffff !important;
}

/* =========================================================
   07. FLOATING MENU
   Sirve para el menú lateral fijo. Se expande al hover y
   muestra texto con transición suave.
========================================================= */
.floating-menu {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: var(--z-floating-menu);

  width: 48px;
  overflow: hidden;
  transform: translateY(-50%);

  background: rgba(16, 33, 61, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-right: none;
  border-radius: 12px 0 0 12px;
  backdrop-filter: blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);

  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.floating-menu:hover {
  width: 260px;
}

.floating-menu a {
  height: 56px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 14px;

  color: var(--white);
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;

  transition: opacity 0.5s ease-out, background var(--transition-base);
}

.floating-menu a:hover {
  opacity: 0.6;
  background: rgba(16, 36, 79, 0.08);
}

.floating-menu .icon {
  min-width: 24px;
  text-align: center;
  font-size: 20px;
}

.floating-menu .text {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.floating-menu:hover .text {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================================
   08. MOBILE MENU OVERLAY
   Sirve para el menú de navegación móvil en pantalla completa.
   Está separado del overlay desktop para evitar conflictos.
========================================================= */

/* Overlay principal */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;

  background: rgba(7, 15, 30, 1);
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.45s ease, visibility 0.45s ease;

  z-index: -1 !important;

  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Navbar visible sobre el overlay */
#mainNav.menu-is-open {
  z-index: 10050 !important;
}

/* Contenedor interno */
.mobile-menu-inner {
  width: 100%;
  min-height: 100dvh;
  padding: 120px 24px 48px;
  box-sizing: border-box;
  display: block;
}

/* Grupo de links / accordions */
.menu-overlay-content {
  width: 100%;
  margin-bottom: 25px;

  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Links principales */
.mobile-menu-inner a {
  font-size: 1.2rem;
  font-weight: 200;
}

/* Animación links */
.mobile-menu-overlay .mobile-menu-inner a {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.mobile-menu-overlay.active .mobile-menu-inner a {
  opacity: 1;
  transform: translateY(0);
}

/* Títulos */
.mobile-menu-overlay-h2 {
  color: #fff;
  font-weight: 500;
}

/* Accordions */
#mobileMenuOverlay .menu-collapse-item {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

#mobileMenuOverlay.active .menu-collapse-item {
  opacity: 1;
  transform: translateY(0);
}

/* Botón del accordion */
#mobileMenuOverlay .menu-collapse-item > button,
#mobileMenuOverlay .menu-collapse-item .accordion-button,
#mobileMenuOverlay .menu-collapse-item .menu-toggle-btn,
#mobileMenuOverlay .menu-collapse-item .dropdown-toggle {
  width: 100%;
  max-width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-left: 0;
  padding-right: 0;

  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Estado abierto Bootstrap */
#mobileMenuOverlay .accordion-button:not(.collapsed) {
  color: #fff;
  background: transparent;
  box-shadow: none;
}

/* Chevron siempre blanco */
#mobileMenuOverlay .fa-chevron-down,
#mobileMenuOverlay .accordion-button i,
#mobileMenuOverlay .accordion-button:not(.collapsed) i {
  color: #fff !important;
}

/* Links internos del accordion */
#mobileMenuOverlay .accordion-body a,
#mobileMenuOverlay .collapse a {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
   BOTÓN HAMBURGUESA / MOBILE MENU
========================================================= */

.mobile-menu-btn,
.navbar-toggler {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;
  cursor: pointer;

  opacity: 1 !important;
  visibility: visible !important;

  position: relative;
  z-index: 10060 !important;
}

/* Líneas hamburguesa */
.mobile-menu-btn span {
  position: absolute;
  left: 50%;

  width: 24px;
  height: 2.5px;

  background-color: #fff;
  border-radius: 999px;

  transform: translateX(-50%);

  transition:
    top 0.3s ease,
    transform 0.3s ease,
    opacity 0.2s ease;
}

.mobile-menu-btn span:nth-child(1) {
  top: 13px;
}

.mobile-menu-btn span:nth-child(2) {
  top: 20px;
}

.mobile-menu-btn span:nth-child(3) {
  top: 27px;
}

/* Estado abierto */
.mobile-menu-btn.active span:nth-child(1),
.mobile-menu-btn.is-active span:nth-child(1) {
  top: 20px;
  transform: translateX(-50%) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2),
.mobile-menu-btn.is-active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3),
.mobile-menu-btn.is-active span:nth-child(3) {
  top: 20px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Ajustes solo móvil */
@media (max-width: 991px) {
  .mobile-menu-btn {
    display: flex !important;
  }

  body.menu-open {
    overflow: auto;
  }
}

/* =========================================================
   10. COLLAPSES DENTRO DEL MENÚ
   Sirve para listas desplegables dentro del menú overlay móvil.
========================================================= */
.menu-collapse-item {
  position: relative;
  width: 100%;
}

.menu-collapse-item .collapse,
.menu-collapse-item .collapsing {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100%;
  transform: none !important;
}

.menu-collapse-item .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  line-height: 1;
  text-align: left;
}

.menu-collapse-item .collapse > div,
.menu-collapse-item .collapsing > div {
  margin-top: 24px;
  padding-left: 0;
  border-left: none !important;
}

.menu-toggle-btn::after {
  display: none !important;
}

.menu-toggle-btn:focus,
.menu-toggle-btn:active,
.menu-toggle-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.mt-mobile-menu {
  margin-top: 6rem !important;
}


/* =========================================================
   11. RESPONSIVE
   Sirve para ajustar comportamiento en tablet/móvil.
========================================================= */
@media (max-width: 991px) {
  .mobile-menu-btn {
    display: flex;
  }

  .mobile-menu-inner a {
    font-size: 1.2rem;
    font-weight: 200;
  }

  .menu-overlay-content {
    margin-bottom: 25px;
  }

  .floating-menu {
    display: none;
  }

  #mainNav,
  #mainNav .container {
    max-width: 100%;
  }

  .hero-services-slider {
    margin-top: 5rem !important;
  }

  .dropdown-custom {
    position: relative;
  }

  .dropdown-menu-custom {
        position: absolute;
        top: calc(100% + 16px);
        right: -34px;
        left: auto;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        z-index: 10050;
        box-shadow: none;
        border-radius: 10px;
    }

    .dropdown-menu-custom::before {
    background: rgba(255, 255, 255, 0.15);
}

  .dropdown-custom:hover .dropdown-menu-custom,
  .dropdown-custom.active .dropdown-menu-custom,
  .dropdown-custom.open .dropdown-menu-custom {
    display: block;
  }

  #mainNav,
  #mainNav .container {
    overflow: visible;
  }
}

/* =========================================================
   05 FOOTER
   Footer full screen, fondos, links, collapses y mobile
========================================================= */

/* Base */
footer,
.footer {
  position: relative;
  display: flex;
  align-items: flex-end; /* ← contenido abajo */
  width: 100%;
  min-height: 100svh;
  padding: 2rem 0;
  opacity: 1 !important;
  transform: none !important;
  overflow: hidden;
}

/* Contenedor interno */
.footer > .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}



/* Evita que Bootstrap + mx-auto empuje columnas */
.footer [class*="col-"] {
  min-width: 0;
}

/* Fondo footer */
.footer.bg-footer,
footer.bg-footer,
.bg-footer {
  background-image: url('../assets/img/footer-bg.webp') !important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Fondo alternativo */
.bg-footer-section {
  background-image: url('../assets/img/footer-section-bg.webp') !important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Parallax / flash */
.footer-flash-parallax {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.footer-flash-parallax img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%) !important;
  transition: none !important;
  will-change: auto !important;
}

/* Logo principal del footer */
.footer-logo {
  max-width: 58%;
  height: auto;
  display: block;
}

/* Logo Grupo BMV */
.logo-grupo {
  display: block;
  height: 53px;
  width: auto;
}

.footer-grupo-bmv {
  margin-top: 4rem;
  margin-bottom: 1rem !important;
}

.footer-grupo-bmv-overlay {
    margin-top: 2.2rem;
    margin-bottom: 1rem !important;
}

/* Títulos */
.menu-footer-h2 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 1.4rem;
}

.menu-footer-h2 a {
  color: #8e97a0 !important;
}

/* Links */
.menu-footer-content p {
  line-height: .85;
}



.social-ico {
  margin-top: 4rem !important;
}

/* =========================
   FOOTER MOBILE COLLAPSE
========================= */

.footer-mobile-collapse {
  width: 100%;
  max-width: 100%;
  border-top: 0;
  margin-left: 0;
  margin-right: 0;
}

#footerAccordion {
  width: 100%;
  max-width: 100%;
}

#footerAccordion .accordion-item,
#footerAccordion .accordion-header,
#footerAccordion .accordion-button {
  width: 100%;
  max-width: 100%;
}

.footer-collapse-item {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.footer-collapse-btn {
  width: 100%;
  padding: 1.1rem 0;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
}

.footer-collapse-content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0 0 1.2rem;
  text-align: start;
}

.footer-collapse-content a {
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  font-size: .85rem;
}

.footer-collapse-btn .chevron-icon,
.footer-collapse-btn i {
  font-size: .75rem;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}

.footer-collapse-btn[aria-expanded="true"] .chevron-icon,
.footer-collapse-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.mobile-separator {
  display: none;
}

/* =========================
   FOOTER MOBILE
========================= */

@media (max-width: 991px) {

  footer,
  .footer {
    display: block;
    min-height: 100svh;
    height: auto;
    padding: 0 0 1.5rem;
  }

  .footer > .container {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .footer .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .footer .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  .footer-mobile-collapse,
  #footerAccordion {
    width: 100%;
    max-width: 100%;
  }

  .footer-logo {
    display: none;
  }

  .footer-grupo-bmv {
    margin-top: 3rem;
  }

  .logo-grupo {
    height: 48px;
    margin: 0 auto 2px;
  }

  .footpos {
    text-align: left !important;
  }

  .gap-5 {
    gap: 1.8rem !important;
  }

  .footer .justify-content-end {
    justify-content: center !important;
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .25rem;
  }

  .mobile-separator {
    display: inline-block;
    opacity: 0.4;
    margin: 0 0.4rem;
    color: rgba(255, 255, 255, 0.4);
  }

  .w-social {
    width: 100% !important;
  }

  .list-inline-item:not(:last-child) {
    margin-right: 0;
  }

  .me-4 {
    margin-right: 0 !important;
  }
}

/* =========================================================
   OTROS
========================================================= */

.desktop {
  display: block !important;
}

.mobile {
  display: none !important;
}

@media (max-width: 991.98px) {
  .desktop {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
}

/* =========================================================
   03 BOTONES / CTAS
========================================================= */
.btn-xl {
  padding: 1.25rem 2.5rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.125rem;
  font-weight: 700;
}

.btn-social {
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 100%;
}

.btn-texto {
    color: #8e97a0 !important;
    font-weight: 300;
    text-decoration: none;
    transition: opacity .45s ease, transform .45s ease, color .3s ease;
    opacity: 1;
    font-size: .9rem;
}

.btn-legal {
    color: #ffffff !important;
    font-weight: 400;
    text-decoration: none;
    transition: opacity .45s ease, transform .45s ease, color .3s ease;
    opacity: 1;
}

.btn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  
  height: 55px;

  
  padding: 0 40px;

  background: rgba(255, 255, 255, 0.04);

  
  backdrop-filter: blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);

  border: 1px solid rgba(255,255,255,0.25);

  border-radius: 30px;

  color: #ffffff;
  text-decoration: none;

  font-family: "Libre Franklin", sans-serif;
  font-weight: 600;

  overflow: hidden;

  transition:
    opacity 300ms ease,
    transform 300ms ease,
    background 300ms ease,
    border-color 300ms ease;
}

.btn-theme span {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.btn-theme svg {
  flex-shrink: 0;
  transition: opacity .25s ease;
}

.btn-theme:hover span {
  transform: translateX(12px);
}

.btn-theme:hover svg {
  opacity: 0;
}

.btn-theme svg,
.btn-theme:hover svg,
.btn-theme span svg,
.btn-theme:hover span svg {
  animation: none !important;
  will-change: transform, opacity;
}

.btn-theme svg {
  transition:
    transform 0.55s cubic-bezier(.22,1,.36,1),
    opacity 0.35s ease;
}

.btn-theme:hover svg,
.btn-theme:hover span svg {
  transform: translateX(14px) !important;
  opacity: 0 !important;
}

.btn-theme-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;

   
  height: 55px;

  
  padding: 0 40px;

  background: transparent;

  
  backdrop-filter: blur(0.4rem);
  -webkit-backdrop-filter: blur(0.4rem);

  border: 1px solid rgba(37, 68, 104, 0.2);

  border-radius: 30px;

  color: var(--azul-profundo);
  text-decoration: none;

  font-family: "Libre Franklin", sans-serif;
  font-weight: 600;

  transition:
    opacity 300ms ease,
    transform 300ms ease,
    background 300ms ease,
    border-color 300ms ease;
}

.btn-theme-blue span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-theme-blue svg {
  transition:
    transform 600ms ease,
    opacity 600ms ease;
}

.btn-theme-blue:hover {

  
  background: rgba(37, 68, 104, 0.10);
  border-color: rgba(37, 68, 104, 0.45);
  transform: scale(1.03);
}

.btn-theme-blue:hover svg {
  transform: translateX(24px);
  opacity: 0;
}

.btn-theme:hover svg,
.btn-theme-blue:hover svg {
    animation: downloadArrow .8s ease infinite;
}

.btn-theme-white-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;
    border-radius: 999px;

    background: var(--btn-bg);
    border: 1px solid var(--btn-border);

    color: var(--btn-text);
    font-weight: 600;
    text-decoration: none;

    transition: all .35s ease;
}

.btn-theme-white-blue span {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.btn-theme-white-blue svg {
    transition: transform .35s ease;
}

.btn-theme-white-blue:hover svg {
    transform: translateY(4px);
}

.btn-theme-white-blue {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.btn-theme svg,
.btn-theme:hover svg,
.btn-theme span svg,
.btn-theme:hover span svg,

.btn-theme-blue svg,
.btn-theme-blue:hover svg,
.btn-theme-blue span svg,
.btn-theme-blue:hover span svg,

.btn-theme-white-blue svg,
.btn-theme-white-blue:hover svg,
.btn-theme-white-blue span svg,
.btn-theme-white-blue:hover span svg {
  animation: none !important;
  will-change: transform, opacity;
}

.btn-theme svg,
.btn-theme-blue svg,
.btn-theme-white-blue svg {
  transition:
    transform 0.55s cubic-bezier(.22,1,.36,1),
    opacity 0.35s ease;
}

.btn-theme:hover svg,
.btn-theme:hover span svg,

.btn-theme-blue:hover svg,
.btn-theme-blue:hover span svg,

.btn-theme-white-blue:hover svg,
.btn-theme-white-blue:hover span svg {
  transform: translateX(14px) !important;
  opacity: 0 !important;
}

.btn-circle {
  
  --btn-text: #ffffff;
  --btn-bg: rgba(255,255,255,0.04);
  --btn-border: rgba(255,255,255,0.25);
  --btn-arrow: #ffffff;
  --btn-hover-bg: #ffffff;
  --btn-hover-text: #212529;

  position: relative;
  z-index: 5;

  display: inline-flex;
  align-items: center;

  width: fit-content;
  min-width: max-content;

  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;

  overflow: visible;

  font-size: inherit;
  font-family: inherit;
  text-decoration: none;

  white-space: nowrap;
}

.btn-circle .circle {
  position: absolute;
  left: 0;
  top: 50%;

  width: 4rem;
  height: 4rem;

  transform: translateY(-50%);

  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 2.625rem;

  z-index: 1;

  transition:
    width 450ms cubic-bezier(0.6, 0, 0.075, 1),
    background 450ms cubic-bezier(0.6, 0, 0.075, 1),
    border-color 450ms cubic-bezier(0.6, 0, 0.075, 1);
}

.btn-circle .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;

  transition: all 450ms cubic-bezier(0.6, 0, 0.075, 1);
}

.btn-circle .icon.arrow {
  left: 1.125rem;
  width: 1.125rem;
  height: 0.125rem;
  background: transparent;
  z-index: 3;
}

.btn-circle .icon.arrow::before {
  content: "";
  position: absolute;

  top: -0.25rem;
  right: 0.0625rem;

  width: 0.625rem;
  height: 0.625rem;

  border-top: 0.125rem solid var(--btn-arrow);
  border-right: 0.125rem solid var(--btn-arrow);

  transform: rotate(45deg);
}

.btn-circle .button-text {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  min-height: 4rem;
  padding: 0 1.75rem 0 5rem;

  white-space: nowrap;

  color: var(--btn-text);
  font-weight: 600;
  line-height: 1.5;

  transition: color 450ms cubic-bezier(0.6, 0, 0.075, 1);
}

.btn-circle:hover .circle {
  width: 100%;
  background: var(--btn-hover-bg);
}

.btn-circle:hover .icon.arrow {
  background: var(--btn-hover-text);
  transform: translateX(1rem);
}

.btn-circle:hover .icon.arrow::before {
  border-top-color: var(--btn-hover-text);
  border-right-color: var(--btn-hover-text);
}

.btn-circle:hover .button-text {
  color: var(--btn-hover-text);
}

.btn-white {
  --btn-text: #ffffff;
  --btn-bg: rgba(255,255,255,0.04);
  --btn-border: rgba(255,255,255,0.25);
  --btn-arrow: #ffffff;
  --btn-hover-bg: rgba(255,255,255,0.08);
  --btn-hover-text: #ffffff;
}

.btn-blue {
  --btn-text: #254468;
  --btn-bg: rgba(37,68,104,0.04);
  --btn-border: rgba(37,68,104,0.18);
  --btn-arrow: #254468;
  --btn-hover-bg: rgba(37,68,104,0.08);
  --btn-hover-text: #254468;
}

.btn-sm .button-text {
  padding-right: 1.75rem;
}

.btn-md .button-text {
  padding-right: 1.75rem;
}

.btn-lg .button-text {
  padding-right: 2.25rem;
}

.btn-xl .button-text {
  padding-right: 2.15rem;
}

.btn-2xl .button-text {
  padding-right: 2.05rem;
}

.btn-discover-blue {
  position: relative;
  display: inline-block;
  width: 13rem;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

.btn-discover-blue .circle {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  background: transparent;
  border: 1px solid rgba(37, 68, 104, 0.2);
  border-radius: 2.625rem;
  transition: all 450ms cubic-bezier(0.6, 0, 0.075, 1);
}

.btn-discover-blue .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: all 450ms cubic-bezier(0.6, 0, 0.075, 1);
}

.btn-discover-blue .icon.arrow {
  left: 1.125rem;
  width: 1.125rem;
  height: 0.125rem;
  background: transparent;
}

.btn-discover-blue .icon.arrow::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid var(--azul-profundo);
  border-right: 0.125rem solid var(--azul-profundo);
  transform: rotate(45deg);
}

.btn-discover-blue .button-text {
  position: absolute;
  inset: 0;
  padding: 1.25rem 1.5rem 0.75rem 4rem;
margin-left: 0;
white-space: nowrap;
display: block;
  color: var(--azul-profundo) !important;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  transition: all 450ms cubic-bezier(0.6, 0, 0.075, 1);
}

.btn-discover-blue:hover .circle {
  width: 100%;
}

.btn-discover-blue:hover .icon.arrow {
  background: #ffffff;
  transform: translateX(1rem);
  opacity: 1;
}

.btn-discover-blue:hover .button-text {
  color: #ffffff;
}

.menu-collapse-item button {
  color: #fff;
}

.menu-collapse-item button,
.menu-collapse-item .dropdown-toggle,
.mobile-menu-inner button {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  -webkit-tap-highlight-color: transparent;

  appearance: none;
  -webkit-appearance: none;
}

.menu-collapse-item button:focus,
.menu-collapse-item button:active,
.menu-collapse-item button:focus-visible,
.menu-collapse-item .dropdown-toggle:focus,
.menu-collapse-item .dropdown-toggle:active,
.menu-collapse-item .dropdown-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.news-section .btn-circle,
.news-section .btn-circle * {
  pointer-events: auto;
}

/* =========================
   BACK TO TOP
========================= */

.back-to-top {
  position: fixed;
  right: -14px;
  bottom: 152px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  cursor: pointer;
  z-index: 9998;

  opacity: 0;
  visibility: hidden;

  transform: translateY(20px);

  transition:
    opacity .4s ease,
    visibility .5s ease,
    transform .45s cubic-bezier(.22,1,.36,1);

  mix-blend-mode: exclusion;
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  opacity: .4;
}

.back-arrow {
    color: #ffffff;
    font-size: 0.9rem;
    transition: transform 0.4s ease, opacity 0.35s ease;
    margin-bottom: 45px;
}

.back-text {
    color: #ffffff;
    font-family: "Libre Franklin", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

@media (max-width: 768px) {
  .back-text {
    font-size: .9rem;
    letter-spacing: 0.12em;
  }
}

/* =========================
   BACK TO TOP MOBILE
========================= */

@media (max-width: 991px) {

  .back-to-top {
    width: 50px;
        height: 50px;
        right: 23px;
    bottom: 86px;

    border-radius: 50%;
    padding: 0;
    gap: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.72);
    border: 1px solid rgba(0,78,146,.18);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    box-shadow: 0 8px 24px rgba(0,0,0,.15);

    mix-blend-mode: normal !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 24px, 0);

    transition:
      opacity .45s ease,
      visibility .45s ease,
      transform .55s cubic-bezier(.22,1,.36,1);
  }

  .back-to-top.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .back-to-top .back-text {
    display: none;
  }

  .back-to-top .back-arrow {
    width: 100%;
    height: 100%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #10213d !important;
    font-size: 1.45rem;
  }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.mobile-menu-btn:focus-visible,
.menu-toggle-btn:focus-visible,
.dropdown-trigger:focus-visible {
  outline: 2px solid #84d0f5 !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(132, 208, 245, .25) !important;
  border-radius: 8px;
}

body.a11y-high-contrast button:not(.piv-a11y-fab):not(.piv-a11y-close):not(.piv-a11y-reset-text):not(.piv-a11y-reset-all):not(.piv-a11y-square-btn),
body.a11y-high-contrast .btn {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.piv-a11y-fab {
  position: fixed;
  right: 22px;

  
  bottom: 24px;

  z-index: 999999;

  width: 52px;
  height: 52px;

  border-radius: 50%;

  border: 2px solid rgba(255,255,255,.92);

  background: #2268dc;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.45rem;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.08);

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    box-shadow .28s ease,
    opacity .28s ease;
}

.piv-a11y-fab:hover {
  transform: scale(1.08);

  background: #1058a7;

  box-shadow:
    0 16px 34px rgba(0,0,0,.28),
    0 0 0 6px rgba(255,255,255,.08);
}

.piv-a11y-fab i {
  color: #fff;
  font-size: 1.25rem;

  transform: translateY(.5px);

  transition: transform .28s ease;
}

.piv-a11y-fab:hover i {
  transform: scale(1.04);
}

.piv-a11y-panel {
  position: fixed;
  right: 35px;
    bottom: 92px;

  z-index: 999998;

  width: 360px;
  max-width: calc(100vw - 20px);

  max-height: calc(100vh - 90px);

  overflow-y: auto;

  background:
linear-gradient(
180deg,
#002f6c 0%,
#10213d 55%,
#0c1a31 100%
);

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;

  box-shadow: 0 20px 50px rgba(0,0,0,.28);

  opacity: 0;
  pointer-events: none;

  transform: translateY(12px) scale(.985);

  transition:
    opacity .24s ease,
    transform .24s ease;

  scrollbar-width: thin;
}

.piv-a11y-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.piv-a11y-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.piv-a11y-header h3 {
  margin: 0;

  color: #fff;

  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.piv-a11y-close {
  border: 0;
  background: transparent;

  color: rgba(255,255,255,.55);

  font-size: 1.1rem;

  cursor: pointer;

  transition: color .2s ease;
}

.piv-a11y-close:hover {
  color: #fff;
}

.piv-a11y-divider {
  width: 100%;
  height: 1px;

  margin: 24px 0;

  background: rgba(255,255,255,.10);
}

.piv-a11y-font p,
.piv-a11y-option span {
  margin: 0;

  color: #fff;

  font-size: .92rem;
  font-weight: 400;
  line-height: 1.4;
}

.piv-a11y-font p {
  margin-bottom: 14px;
}

.piv-a11y-square-btn {
  width: 42px;
  height: 42px;

  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;

  background: rgba(255,255,255,.05);

  color: rgba(255,255,255,.82);

  font-size: .82rem;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease;
}

.piv-a11y-square-btn:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.3);
}

#a11yFontRange {
  width: 100%;
  height: 5px;

  appearance: none;
  -webkit-appearance: none;

  border-radius: 999px;

  background: rgba(255,255,255,.16);

  outline: none;
}

#a11yFontRange::-moz-range-thumb {
  width: 20px;
  height: 20px;

  border: 0;
  border-radius: 50%;

  background: #e30925;

  cursor: pointer;
}

.piv-a11y-reset-text {
  margin-top: 12px;

  padding: 0;

  border: 0;
  background: transparent;

  color: rgba(255,255,255,.52);

  font-size: .82rem;

  cursor: pointer;
}

.piv-a11y-reset-text:hover {
  color: #fff;
}

.piv-a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;
}

.piv-a11y-switch {
  position: relative;

  width: 54px;
  height: 28px;

  flex: 0 0 auto;
}

.piv-a11y-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.piv-a11y-switch span {
  position: absolute;
  inset: 0;

  border-radius: 999px;

  background: rgba(255,255,255,.14);

  cursor: pointer;

  transition: background .25s ease;
}

.piv-a11y-switch span::before {
  content: "";

  position: absolute;

  width: 20px;
  height: 20px;

  left: 4px;
  top: 4px;

  border-radius: 50%;

  background: #c8d8ee;

  transition:
    transform .25s ease,
    background .25s ease;
}

.piv-a11y-switch input:checked + span {
  background: #e30925;
}

.piv-a11y-switch input:checked + span::before {
  transform: translateX(26px);
  background: #fff;
}

.piv-a11y-reset-all {
  width: 100%;
  min-height: 52px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;

  background: rgba(255,255,255,.04);

  color: rgba(255,255,255,.78);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  font-size: .9rem;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease;
}

.piv-a11y-reset-all:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.24);
}

html.a11y-font-90 { font-size: 90%; }

html.a11y-font-100 { font-size: 100%; }

html.a11y-font-110 { font-size: 110%; }

html.a11y-font-120 { font-size: 120%; }

html.a11y-font-130 { font-size: 130%; }

body.a11y-high-contrast {
  background: #000 !important;
  color: #fff !important;
}

body.a11y-high-contrast h1,
body.a11y-high-contrast h2,
body.a11y-high-contrast h3,
body.a11y-high-contrast h4,
body.a11y-high-contrast h5,
body.a11y-high-contrast h6,
body.a11y-high-contrast p,
body.a11y-high-contrast span,
body.a11y-high-contrast li,
body.a11y-high-contrast small,
body.a11y-high-contrast strong {
  color: #fff !important;
}

body.a11y-high-contrast a {
  color: #ffd500 !important;
  text-decoration: underline !important;
}

body.a11y-high-contrast input,
body.a11y-high-contrast textarea,
body.a11y-high-contrast select {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

body.a11y-high-contrast .piv-a11y-panel {
  background:
    linear-gradient(
      180deg,
      #002f6c 0%,
      #10213d 55%,
      #0c1a31 100%
    ) !important;

  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}

body.a11y-high-contrast .piv-a11y-panel *,
body.a11y-high-contrast .piv-a11y-fab {
  color: #fff !important;
}

body.a11y-high-contrast .piv-a11y-fab {
  background: #2268dc !important;
  border-color: #fff !important;
}

body.a11y-dyslexia-font p,
body.a11y-dyslexia-font li {
  margin-bottom: 1em;
}

.piv-a11y-panel-inner {
  padding: 24px;
}

.piv-a11y-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#a11yFontRange::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  background: #e30925;
  cursor: pointer;
}

/* Resaltar enlaces */
body.a11y-highlight-links a {
  color: #ffd500 !important;
  background: rgba(255, 213, 0, 0.18) !important;
  outline: 2px solid #ffd500 !important;
  outline-offset: 3px;
  text-decoration: underline !important;
}

/* Escala de grises */
body.a11y-grayscale main,
body.a11y-grayscale header,
body.a11y-grayscale footer,
body.a11y-grayscale section,
body.a11y-grayscale nav,
body.a11y-grayscale #global-sequencer,
body.a11y-grayscale #sequenceImage {
  filter: grayscale(1);
}

body.a11y-grayscale .piv-a11y-panel,
body.a11y-grayscale .piv-a11y-panel *,
body.a11y-grayscale .piv-a11y-fab,
body.a11y-grayscale .piv-a11y-fab * {
  filter: none !important;
}

/* Fuente para dislexia */
body.a11y-dyslexia-font {
  font-family: Arial, Verdana, Helvetica, sans-serif !important;
  letter-spacing: 0.04em;
  word-spacing: 0.08em;
  line-height: 1.65;
}

/* Alto contraste global */
body.a11y-high-contrast,
body.a11y-high-contrast main,
body.a11y-high-contrast section,
body.a11y-high-contrast article,
body.a11y-high-contrast header,
body.a11y-high-contrast footer,
body.a11y-high-contrast nav,
body.a11y-high-contrast div,
body.a11y-high-contrast .container,
body.a11y-high-contrast .row,
body.a11y-high-contrast .card,
body.a11y-high-contrast .modal,
body.a11y-high-contrast .dropdown-menu,
body.a11y-high-contrast .navbar,
body.a11y-high-contrast .navbar-collapse {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Textos globales */
body.a11y-high-contrast *:not(i):not(svg):not(path) {
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Links */
body.a11y-high-contrast a,
body.a11y-high-contrast a * {
  color: #ffd500 !important;
  text-decoration: underline !important;
}

/* Botones */
body.a11y-high-contrast button,
body.a11y-high-contrast .btn {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* Botones principales */
body.a11y-high-contrast .btn-primary,
body.a11y-high-contrast .btn-danger,
body.a11y-high-contrast .btn-secondary {
  background: #ffd500 !important;
  color: #000 !important;
  border-color: #ffd500 !important;
}

/* Inputs */
body.a11y-high-contrast input,
body.a11y-high-contrast textarea,
body.a11y-high-contrast select {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

/* SVG e íconos */
body.a11y-high-contrast svg,
body.a11y-high-contrast svg path {
  fill: currentColor !important;
  color: #fff !important;
}

/* Imágenes */
body.a11y-high-contrast img {
  filter: contrast(1.25) brightness(1.05);
}

/* Panel accessibility conserva diseño */
body.a11y-high-contrast .piv-a11y-panel {
  background: linear-gradient(180deg, #002f6c 0%, #10213d 55%, #0c1a31 100%) !important;
  border-color: rgba(255,255,255,.35) !important;
}

body.a11y-high-contrast .piv-a11y-fab {
  background: #2268dc !important;
  color: #fff !important;
  border-color: #fff !important;
}

body.a11y-dyslexia-font * {
  font-family: Arial, Verdana, Helvetica, sans-serif !important;
}

/* =========================
   HERO VIDEO GRADIENT
========================= */

.hero-gradient {
    position: absolute;
    inset: 0;
    background-image: url(../assets/img/video-gradient.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    opacity: 1;
}

/* nuevos */

.ccv,
.asigna,
.indeval {
    max-height: 60px;
    margin-bottom: 1.5rem;
}

/* =========================
   HERO VIDEO HEADER
========================= */

.hero-video-header {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.top-content {
  opacity: 1;
  transition: opacity 0.15s linear;

  transform: translateZ(0);
  will-change: opacity;
}

@media (max-width: 767px) {
  

  .top-content {
    background-image: none;
  }
}

/* =========================
   POSTER + VIDEO
========================= */

.hero-video-poster,
.hero-video-poster img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-video-poster {
  z-index: 1;
}

.hero-video-poster img,
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   VIDEO
========================= */

.hero-video {
  z-index: 2;
  opacity: 0;

  transition:
    opacity 0.8s ease;
}

.hero-video {
  filter: saturate(0.8);
}

.hero-video.is-ready {
  opacity: 1;
}

/* =========================
   OVERLAY
========================= */

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;

  background: rgba(0,0,0,0.25);

  pointer-events: none;
}

/* =========================
   CONTENIDO
========================= */

.hero-content {
  position: relative;
  z-index: 4;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

.hero-content {
  position: relative;
  z-index: 5;
  color: #fff;
}

/* =========================
   MÓVIL
========================= */

@media (max-width: 768px) {

  .hero-video-header, .hero-content {
        height: 125svh;
        min-height: 100svh;
    }

}

/* =========================
   HR
========================= */

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: 0.10;
}

/* =========================
   GLOBAL SEQUENCER
========================= */

#global-sequencer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  z-index: -1;
  overflow: hidden;
  pointer-events: none;

  background: #07162b;
}

#sequenceImage {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  display: block;
  pointer-events: none;
  user-select: none;
}

/* =========================
   HERO SERVICES SLIDER CARD
========================= */

.hero-services-slider {
  position: relative;
  max-width: 520px;
  min-height: 406px;
  margin-top: 9.4rem;
  padding: 40px 58px 40px 40px;
  color: #ffffff;
}

.hero-services-slider .inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 324px;
}

.hero-slide {
  position: absolute;
  inset: 0;

  height: 100%;

  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;

  filter: blur(8px);
  transform: translateY(12px);

  transition:
    opacity .6s ease,
    filter .6s ease,
    transform .6s ease,
    visibility 0s linear .6s;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;

  filter: blur(0);
  transform: translateY(0);

  transition:
    opacity .6s ease,
    filter .6s ease,
    transform .6s ease;
}

.hero-slide h1 {
  margin-bottom: 0.1rem;
  color: #ffffff;
  font-size: var(--text-5xl);
}

.hero-slide h2 {
  margin-bottom: 16px;
}

.hero-slide p {
  max-width: 420px;
  color: rgba(255, 255, 255, 0.78);
}

.hero-slide .btn-circle {
  margin-top: auto;
}

/* =========================
   HERO SLIDER BULLETS
========================= */

.hero-slider-bullets {
  position: absolute;
  right: 28px;
  top: 50%;
  z-index: 3;

  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-slider-bullets button {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  width: 10px;
  height: 10px;

  padding: 0;
  margin: 0;

  border: none;
  background: transparent;

  cursor: pointer;
}

.hero-slider-bullets button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;

  width: 10px;
  height: 100%;

  transform: translateX(-50%);

  border-radius: 999px;
  background: rgba(255, 255, 255, .25);

  transition:
    height .35s ease,
    background .35s ease,
    opacity .35s ease;
}

.hero-slider-bullets button.active {
  height: 32px;
}

.hero-slider-bullets button.active::before {
  background: #ffffff;
}

/* =========================
   HERO CARD ENTER ANIMATION
========================= */

.hero-card-enter {
  opacity: 0;
  transform: translateY(32px);
  animation: heroCardEnter 0.8s ease forwards;
}

@keyframes heroCardEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   GLASS
========================= */

.glass {
  background: #fafafa08;
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* =========================
   FULL CARD
========================= */

.full-card {

    background: #fafafa08 url(../assets/img/card-video-bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 1.768em;
    box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
    backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  min-height: 24rem;
  padding: 40px;
}  

.full-card .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  container-type: inline-size;
  position: relative;
  overflow: auto;
  z-index: 1;
  text-align: left;
  max-width: 50%;
}

@media (max-width: 991px) {
  .full-card .inner {
  max-width: 100%;
}
}

/* =========================
   GLOW CARD
========================= */

.glow-card {
  --pads: 40px;
  --color-sens: calc(var(--glow-sens) + 20);
  --pointer-°: 45deg;

  position: relative;
  width: 100%;
  height: 100%;
  max-height: 600px;
  border-radius: 1.768em;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  overflow: hidden;

  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg);
  background-repeat: no-repeat;
  padding: 40px 58px 40px 40px;

  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;

  &::before,
  &::after,
  & > .glow {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
    opacity: 0;
  }

  &::before,
  &::after {
    z-index: -1;
  }

  &::before {
    border: 1px solid transparent;

    background:
      linear-gradient(var(--card-bg) 0 100%) padding-box,
      linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
      radial-gradient(at 80% 55%, hsla(268,100%,76%,1) 0px, transparent 50%) border-box,
      radial-gradient(at 69% 34%, hsla(349,100%,74%,1) 0px, transparent 50%) border-box,
      radial-gradient(at 8% 6%, hsla(136,100%,78%,1) 0px, transparent 50%) border-box,
      radial-gradient(at 41% 38%, hsla(192,100%,64%,1) 0px, transparent 50%) border-box,
      radial-gradient(at 86% 85%, hsla(186,100%,74%,1) 0px, transparent 50%) border-box,
      radial-gradient(at 82% 18%, hsla(52,100%,65%,1) 0px, transparent 50%) border-box,
      radial-gradient(at 51% 4%, hsla(12,100%,72%,1) 0px, transparent 50%) border-box,
      linear-gradient(#c299ff 0 100%) border-box;

    -webkit-mask-image:
      conic-gradient(
        from var(--pointer-°) at center,
        black 25%,
        transparent 40%,
        transparent 60%,
        black 75%
      );

    mask-image:
      conic-gradient(
        from var(--pointer-°) at center,
        black 25%,
        transparent 40%,
        transparent 60%,
        black 75%
      );
  }

  &::after {
    border: 1px solid transparent;

    background:
      radial-gradient(at 80% 55%, hsla(268,100%,76%,1) 0px, transparent 50%) padding-box,
      radial-gradient(at 69% 34%, hsla(349,100%,74%,1) 0px, transparent 50%) padding-box,
      radial-gradient(at 8% 6%, hsla(136,100%,78%,1) 0px, transparent 50%) padding-box,
      radial-gradient(at 41% 38%, hsla(192,100%,64%,1) 0px, transparent 50%) padding-box,
      radial-gradient(at 86% 85%, hsla(186,100%,74%,1) 0px, transparent 50%) padding-box,
      radial-gradient(at 82% 18%, hsla(52,100%,65%,1) 0px, transparent 50%) padding-box,
      radial-gradient(at 51% 4%, hsla(12,100%,72%,1) 0px, transparent 50%) padding-box,
      linear-gradient(#c299ff 0 100%) padding-box;

    mix-blend-mode: var(--blend);

    -webkit-mask-image:
      linear-gradient(to bottom, black, black),
      radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
      radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
      conic-gradient(from var(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95%);

    mask-image:
      linear-gradient(to bottom, black, black),
      radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
      radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
      conic-gradient(from var(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95%);

    -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
    mask-composite: subtract, add, add, add, add, add;
  }

  & > .glow {
    --outset: var(--pads);

    inset: calc(var(--outset) * -1);
    z-index: 1;
    mix-blend-mode: var(--glow-blend);

    -webkit-mask-image:
      conic-gradient(
        from var(--pointer-°) at center,
        black 2.5%,
        transparent 10%,
        transparent 90%,
        black 97.5%
      );

    mask-image:
      conic-gradient(
        from var(--pointer-°) at center,
        black 2.5%,
        transparent 10%,
        transparent 90%,
        black 97.5%
      );

    &::before {
      content: "";
      position: absolute;
      inset: var(--outset);
      border-radius: inherit;

      box-shadow:
        inset 0 0 0 1px hsl(var(--glow-color) / 100%),
        inset 0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
        inset 0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
        inset 0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
        inset 0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
        inset 0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
        inset 0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%)),
        0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
        0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
        0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
        0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
        0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
        0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%));
    }
  }

  &.animating {
    --pointer-d: 100;
  }

  &.animating::before {
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  }

  &.animating::after,
  &.animating > .glow {
    opacity: 0.4;
  }
}

/* Hover solo en dispositivos con mouse */
@media (hover: hover) and (pointer: fine) {

  .glow-card:hover::before {
    opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  }

  .glow-card:hover::after {
    opacity: 0.4;
  }

  .glow-card:hover > .glow {
    opacity: 0.4;
  }

}

/* Desactiva estado animating en móviles táctiles */
@media (hover: none) and (pointer: coarse) {

  .glow-card.animating::before,
  .glow-card.animating::after,
  .glow-card.animating > .glow {
    opacity: 0;
  }

}

.inner {
  text-align: center;

  h2 {
    color: inherit;
    margin-block: 0.2em;
  }

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
  }

  svg {
    height: 24px;
  }
}

.glow-card h1 {
  font-size: var(--text-5xl);
  margin-bottom: -0.5rem;
}

.glow-card .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  container-type: inline-size;
  position: relative;
  overflow: auto;
  z-index: 1;
  text-align: left;
}

.glow-card .content {
  padding: 1em;
  font-weight: 300;
  text-align: left;
  line-height: 1.4;
  color: color-mix(var(--fg), transparent 60%);
  overflow: auto;
  scrollbar-width: none;

  -webkit-mask-image: linear-gradient(to top, transparent 5px, black 2em);
  mask-image: linear-gradient(to top, transparent 5px, black 2em);

  & em,
  & strong {
    color: color-mix(var(--fg), transparent 40%);
  }

  & p {
    opacity: 0;
    -webkit-animation: fadeContent 1.5s ease-in-out 2s both;
    animation: fadeContent 1.5s ease-in-out 2s both;

    &:nth-child(2) {
      -webkit-animation-delay: 2.25s;
      animation-delay: 2.25s;
    }

    &:nth-child(3) {
      -webkit-animation-delay: 2.5s;
      animation-delay: 2.5s;
    }

    &:nth-child(4) {
      -webkit-animation-delay: 2.75s;
      animation-delay: 2.75s;
    }
  }
}

@-webkit-keyframes fadeContent {
  to {
    opacity: 1;
  }
}

@keyframes fadeContent {
  to {
    opacity: 1;
  }
}

.hero-services-slider .glow-card,
.hero-services-slider .inner,
.hero-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity, transform;
}

/* End Glow card */

/* =========================
   TEXTOS
========================= */

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
    line-height: 1.2;
}

    h1, .h1 {
        font-size: var(--text-8xl);
        margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
        line-height: 1.15;
    }

    h1.sub {
    font-size: var(--text-7xl);
}   

@media (max-width: 991px) {
    .hero-content h1 {
        font-size: 3.6rem;
        line-height: 1;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

        .glow-card h1 {
        font-size: 2.5rem;
        margin-bottom: .25rem;
    }
h1.sub {
        font-size: 3.6rem;
    }

}

/* =========================
   GLASS EFFECT
========================= */

.glass {
  background: #fafafa08 !important;
    backdrop-filter: blur(1.125rem);
    -webkit-backdrop-filter: blur(1.125rem);
    /*border-radius: 1.2rem;*/
}
.glass_white {
    background: #fafafabc !important;
    backdrop-filter: blur(1.125rem);
    -webkit-backdrop-filter: blur(1.125rem);
    border-radius: 1.2rem;
}
.glass_grey {
    background: #eeeeee;
    backdrop-filter: blur(1.125rem);
    -webkit-backdrop-filter: blur(1.125rem);
    border-radius: 1.2rem;
}

/* End Glass effect */

/* =========================
   RISK SECTION
========================= */

.risk-section {
    padding: 12rem 0 0;
    height: 100vh;
    position: relative;
}
.risk-section {
    min-height: calc(100vh - 78px);
    padding-bottom: 0;
    overflow: hidden;
}

.risk-section .container,
.risk-section .row {
    min-height: inherit;
}

.risk-image-col {
    position: relative;
}

.people-home-img {
    width: 134%;
    max-width: none;
    height: auto;
    display: block;

    transform: translateY(-100px);
}

/* mobile */
@media (max-width: 991px) {
  .risk-section {
    padding: 6rem 0 0;
    height: auto;
}

.people-home-img {
    transform: translateY(12px);
}
}

/* =========================
   LOCK BTN
========================= */

.ingresar-link{
    display: flex;
    align-items: center;
    gap: 8px;
}

.ingresar-link .lock-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    margin-top: -3px;
}

.ingresar-link .lock-icon::before{
    content: "\f023"; /* fa-lock */
}

.ingresar-link:hover .lock-icon::before{
    content: "\f3c1"; /* fa-lock-open */
}


/* color */

.blue {
    color: #2268dc;
    /* color: #8087a1; */
}

h3 {
    font-style: normal;
    font-size: 4em;
    line-height: 1.1em;
    letter-spacing: -2px;
}

/* cards */

.card_border {
    padding: 2.5rem 3rem 1.4rem;
    border-radius: 1.2rem;
}

.card_border_blue {
    padding: 2.5rem 3rem 1.4rem;
    border-radius: 1.2rem;
}

.bg-lightblue {
    background-color: #2268dc;
}

/* header */

header{
    position:fixed !important;
    top:0;
    left:0;
    width:100%;
    z-index:1050;
    transition:opacity .15s linear;
}

header.navbar-shrink{
    /* tus estilos de shrink si ya los tienes */
}

#services {
    margin-top: 100vh;
}

/* loader*/

#site-loader{
    position:fixed;
    inset:0;
    z-index:999994;
    background:#090a18;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .7s ease, visibility .7s ease;
}

.loader-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
}

.loader-logo{
    width:60px;
    height:auto;
    opacity:0;
    animation:loaderFade .8s ease forwards;
}

.loader-line{
    width:180px;
    height:2px;
    background:rgba(255,255,255,.18);
    overflow:hidden;
    border-radius:999px;
}

.loader-line span{
    display:block;
    width:40%;
    height:100%;
    background:linear-gradient(90deg, #12367b, #1e6cad, #ffffff);
    animation:loaderMove 1.2s ease-in-out infinite;
}

.loader-counter{
    position:absolute;
    top:10px;
    left:10px;
    z-index:20;
    font-size:14px;
    font-weight:400;
    color:rgba(255,255,255,.72);
    opacity:.9;
    pointer-events:none;
    user-select:none;
}

body.is-loading{
    overflow:hidden;
}

body.is-loaded #site-loader{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

@keyframes loaderFade{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes loaderMove{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(260%);
    }
}


@media (max-width: 991px) {

.txt-copy {
  max-width: 90%;
}

}