/* Header global y menú móvil (iteración 17.1). Componente único para todas las páginas; se carga después del <style> de cada página.
   El HTML lo prepara herramientas/aplicar_header_17_1.py (data-t, aria-current y los enlaces «Ver todos…» del drawer). */

/* 1) Sin filete permanente bajo el header: al bajar solo queda una sombra muy sutil. En alto contraste se conserva el borde. */
.nav,
.nav.scrolled
{
  border-bottom-color: transparent;
}
.nav.scrolled
{
  box-shadow: 0 8px 18px -16px rgba(7, 26, 54, .28);
}
:root[data-mode="contrast"] .nav,
:root[data-mode="contrast"] .nav.scrolled
{
  border-bottom: 2px solid #000;
  box-shadow: none;
}

/* 2) Enlace activo: azul corporativo, peso 600 y barra de 3 px del ancho del texto. El tamaño de letra no cambia y el menú no se
   mueve: ::before reserva el ancho del texto ya en peso 600 (por eso data-t). */
.nav-links > a,
.nav-dd > a
{
  position: relative;
  flex-direction: column;
  justify-content: center;
}
.nav-links > a::before,
.nav-dd > a::before
{
  content: attr(data-t);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}
.nav-links > a::after,
.nav-dd > a::after
{
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .25rem;
  height: 3px;
  border-radius: 3px;
  background: #005DCA;
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: center;
  transition: opacity .2s, transform .25s var(--ease);
}
.nav-links > a.active,
.nav-dd > a.active
{
  color: #005DCA;
  font-weight: 600;
  opacity: 1;
}
.nav-links > a.active::after,
.nav-dd > a.active::after
{
  opacity: 1;
  transform: none;
}
/* hover (no activo): color y barra tenue; foco de teclado: contorno visible */
.nav-links > a:not(.active):hover,
.nav-dd > a:not(.active):hover,
.nav-dd:focus-within > a:not(.active)
{
  color: #005DCA;
  opacity: 1;
}
.nav-links > a:not(.active):hover::after,
.nav-dd > a:not(.active):hover::after,
.nav-dd:focus-within > a:not(.active)::after
{
  opacity: .35;
  transform: none;
}
.nav-links > a:focus-visible,
.nav-dd > a:focus-visible
{
  outline: 2px solid #005DCA;
  outline-offset: -2px;
  border-radius: 6px;
}
/* oscuro y alto contraste: #005DCA no alcanza contraste sobre fondo oscuro/negro */
:root[data-mode="dark"] .nav-links > a.active,
:root[data-mode="dark"] .nav-dd > a.active,
:root[data-mode="dark"] .nav-links > a:not(.active):hover,
:root[data-mode="dark"] .nav-dd > a:not(.active):hover
{
  color: var(--on-deep-link, #7DB4FF);
}
:root[data-mode="dark"] .nav-links > a::after,
:root[data-mode="dark"] .nav-dd > a::after
{
  background: var(--on-deep-link, #7DB4FF);
}
:root[data-mode="dark"] .nav-links > a:focus-visible,
:root[data-mode="dark"] .nav-dd > a:focus-visible
{
  outline-color: var(--on-deep-link, #7DB4FF);
}
@media (prefers-color-scheme: dark)
{
  :root[data-mode="auto"] .nav-links > a.active,
  :root[data-mode="auto"] .nav-dd > a.active,
  :root[data-mode="auto"] .nav-links > a:not(.active):hover,
  :root[data-mode="auto"] .nav-dd > a:not(.active):hover
  {
    color: var(--on-deep-link, #7DB4FF);
  }
  :root[data-mode="auto"] .nav-links > a::after,
  :root[data-mode="auto"] .nav-dd > a::after
  {
    background: var(--on-deep-link, #7DB4FF);
  }
  :root[data-mode="auto"] .nav-links > a:focus-visible,
  :root[data-mode="auto"] .nav-dd > a:focus-visible
  {
    outline-color: var(--on-deep-link, #7DB4FF);
  }
}
:root[data-mode="contrast"] .nav-links > a.active,
:root[data-mode="contrast"] .nav-dd > a.active,
:root[data-mode="contrast"] .nav-links > a:not(.active):hover,
:root[data-mode="contrast"] .nav-dd > a:not(.active):hover
{
  color: #000;
}
:root[data-mode="contrast"] .nav-links > a::after,
:root[data-mode="contrast"] .nav-dd > a::after
{
  background: #000;
}
:root[data-mode="contrast"] .nav-links > a:focus-visible,
:root[data-mode="contrast"] .nav-dd > a:focus-visible
{
  outline-color: #000;
}

/* 3) Menú móvil: enlaces «Ver todos…» dentro de cada acordeón (enlaces normales, no controles anidados) */
.dw-sub a.dw-all
{
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
  padding: .75rem 0 .25rem;
  border-top: 1px solid var(--line-soft);
  font-weight: 600;
  color: var(--accent-text);
}
.dw-sub a.dw-all::after
{
  content: "→";
  font-weight: 500;
}
.dw-sub a:focus-visible,
.dw-acc summary:focus-visible
{
  outline: 2px solid var(--focus, #005DCA);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Botón flotante «Habla con un ejecutivo»: siempre visible, anclado abajo a la derecha ----------
   No se oculta al bajar, sobre el contacto, formularios ni footer (decisión de lanzamiento). El margen respeta la zona segura del móvil.
   Hay espacio extra bajo el footer y margen de scroll al enfocar campos para que nunca queden detrás del botón. */
.ch-btn
{
  opacity: 1;
  visibility: visible;
  transform: none;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
html { scroll-padding-bottom: 6rem; }
footer.foot { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
/* Al enfocar un campo del formulario, el navegador lo sube lo suficiente para que quede por encima del botón flotante */
form :is(input, textarea, select, button) { scroll-margin-bottom: 6rem; }
/* Contraste (cierre SEO/contraste): kicker de .home-contact sobre fondo claro */
.home-contact .hc-tx > .kicker { color: var(--accent-text, #0058C0); }