/*
 * ac-header.css — Rediseño del header (ver DESIGN.md).
 * Cargado desde header.php: afecta a las 19 páginas que lo incluyen.
 * No edita paleta_colores.css, MbrStyles5.css, footer10.css ni mbr-additional.css:
 * todo se sobrescribe desde aquí, aditivamente.
 */

:root {
  --ac-abismo: #04121b;
  --ac-petroleo: #004f71;
  --ac-azul: #2060ad;
  --ac-cian: #5cc2e7;
  /* Acento de señal. Antes ámbar (#e08a1e); a pedido del usuario, pasó a ser
     el mismo azul de marca (interior/inferior) en vez de un color nuevo. */
  --ac-acento: var(--ac-azul);
  --ac-acento-hover: var(--ac-petroleo);
  --ac-tinta: #101820;
  --ac-tinta-2: #46545f;
  --ac-papel: #f4f6f8;
  --ac-linea: #dde3e9;
  --ac-sombra-1: 0 1px 3px rgb(16 24 32 / 0.08);
  --ac-sombra-2: 0 8px 24px rgb(16 24 32 / 0.12);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Reemplaza el <style> que vivía en header.php:3-7 (misma regla, mismo alcance). */
.cid-s9sKkjC37M .nav-item a {
  -webkit-justify-content: left;
}

/* ---------- Salto de contenido ---------- */
.ac-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--ac-tinta);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.ac-skip:focus {
  left: 0;
}

/* ---------- Legibilidad del nav (12px hoy, bajo el mínimo cómodo) ---------- */
.navbar-dropdown .cuerpo_hd {
  font-size: 13.5px;
  letter-spacing: 0.04em;
}

/* ---------- Corrección del salto al encogerse ----------
   mbr-additional.css fija transition:none en .navbar; se restituye aquí. */
.navbar-dropdown.navbar-fixed-top {
  transition: min-height 240ms var(--ease-out-quart), background-color 240ms var(--ease-out-quart),
    box-shadow 240ms var(--ease-out-quart);
}
.navbar-dropdown.navbar-short:not(.transparent) {
  box-shadow: var(--ac-sombra-1);
}

/* ---------- Página activa ---------- */
.ac-nav-activo {
  position: relative;
}
.ac-nav-activo::after {
  content: '';
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--ac-acento);
}

/* ---------- Foco visible por teclado ----------
   mbr-additional.css quita el outline en :focus; se restituye solo para :focus-visible,
   así el foco por mouse sigue limpio y el foco por teclado queda señalado. */
.navbar-dropdown .nav-link:focus-visible,
.navbar-dropdown .dropdown-item:focus-visible {
  outline: 2px solid var(--ac-acento);
  outline-offset: 2px;
  border-radius: 2px;
}
.navbar-toggler:focus-visible {
  outline: 2px solid var(--ac-tinta);
  outline-offset: 2px;
}

/* ---------- CTA "Contáctanos" ----------
   No se redefine .color-azul-interior-boton (paleta_colores.css, 21 páginas): se añade
   una clase propia. Azul de marca con texto blanco: 6.29:1, pasa WCAG AA. */
.navbar-buttons .ac-btn-cta {
  background-color: var(--ac-acento) !important;
  border-color: var(--ac-acento) !important;
  color: #fff !important;
  transition: background-color 160ms var(--ease-out-quart), border-color 160ms var(--ease-out-quart),
    box-shadow 160ms var(--ease-out-quart);
}
.navbar-buttons .ac-btn-cta:hover,
.navbar-buttons .ac-btn-cta:focus {
  background-color: var(--ac-acento-hover) !important;
  border-color: var(--ac-acento-hover) !important;
  color: #fff !important;
}

/* ---------- Objetivo táctil del hamburguesa (hoy 31×18px) ----------
   Se agranda el área de toque con un pseudo-elemento invisible; el ícono visible no cambia
   de tamaño ni de posición, así que no hay riesgo de desalinear el navbar de 77px/60px. */
/* mbr-additional.css trae ".cid-s9sKkjC37M button.navbar-toggler { top:1.5rem;
   right:1rem }" y ".navbar-toggler-right { position:absolute; right:1rem }"
   (assets/theme/css/style.css): el botón está pensado desde el propio tema
   para flotar arriba a la derecha. Antes se anulaba (position:relative +
   right/top:auto) porque en móvil el nav es flex-direction:column y el botón,
   primer hijo, quedaba apilado justo encima del logo sin espacio entre ambos
   -- se "topaban". La solución de entonces fue dejarlo fluir con el logo en
   vez de flotar mal posicionado; la de ahora es dejarlo flotar bien
   posicionado: position:absolute lo saca del flujo en columna (el logo queda
   solo, despejado a la izquierda) y right/top:1rem/1.5rem, ya definidos por
   mbr-additional.css, lo anclan arriba a la derecha -- valores fijos desde el
   borde superior del nav, no relativos a su alto total, así que no se mueven
   cuando el cajón desplegable crece debajo (.navbar-collapse.show). El estado
   corto por scroll tiene su propio ajuste en mbr-additional.css
   (".navbar-short .navbar-toggler-right { top:20px }") y sigue aplicando solo.
   El selector lleva "nav.navbar" para superar la especificidad (0,2,1) de la
   regla cid-* sin depender del propio cid. */
nav.navbar button.navbar-toggler {
  position: absolute;
  margin-left: 0;
}
button.navbar-toggler::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
button.navbar-toggler .hamburger span {
  background-color: var(--ac-tinta);
}

/* ---------- Cajón lateral móvil (<768px) ----------
   #282828 con hover #c0a375 (dorado ajeno a la marca) -> petróleo con hover azul claro. */
.nav-dropdown-sm.collapsing,
.nav-dropdown-sm.collapse.in {
  background: var(--ac-petroleo);
}
.nav-dropdown-sm .link:focus,
.nav-dropdown-sm .link:hover,
.nav-dropdown-sm .dropdown-item:focus,
.nav-dropdown-sm .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.2) !important;
  color: var(--ac-cian);
}

/* =========================================================================
   Header transparente sobre el hero — SOLO en /home (clase .transparent
   añadida por header.php condicionalmente). navbar-dropdown.js alterna
   ".bg-color" según el scroll; con .transparent.bg-color el fondo es
   "none" (assets/dropdown/css/style.css:34), así que aquí solo se resuelve
   el contraste del contenido que queda flotando sobre la fotografía.
   :not(.opened) es obligatorio: con el cajón móvil abierto, mbr-additional.css
   ya fuerza fondo blanco, y sin esta guarda el texto quedaría blanco sobre
   blanco.
   ========================================================================= */
/* .nav-link.text-black, no .text-black a secas: los .dropdown-item también
   llevan .text-black, y su panel (.dropdown-menu) es blanco siempre, incluso
   con el nav transparente. Pintar esos de blanco los deja invisibles sobre
   su propio fondo blanco -- el desplegable "en blanco" que se veía al abrir
   ASESORÍAS o NOSOTROS era exactamente este bug. */
.navbar-dropdown.transparent.bg-color:not(.opened) .nav-link.text-black {
  color: #fff !important;
}
.navbar-dropdown.transparent.bg-color:not(.opened) button.navbar-toggler .hamburger span {
  background-color: #fff;
}
.navbar-dropdown.transparent.bg-color:not(.opened) .ac-nav-activo::after {
  background: var(--ac-acento);
}
.navbar-dropdown.transparent.bg-color:not(.opened) .navbar-buttons .ac-btn-cta {
  box-shadow: var(--ac-sombra-2);
}

/* Logo: a color normalmente; en escala de grises mientras flota transparente
   sobre la fotografía del hero, donde el logo a color se perdía contra fondos
   variables. Vuelve a color en cuanto el nav se pone sólido (scroll, o con el
   cajón móvil abierto).

   No se usa "brightness(0) invert(1)": eso aplasta los seis colores de marca
   del SVG (#004e72, #004f71, #2060ad, #159bd7, #009bdf, #5cc2e7 y blanco) a un
   único blanco puro, y el ícono pierde su forma interna -- se ve como una
   mancha. grayscale(1) sí los separa, pero los dejaría entre gris 64 y 255,
   demasiado oscuros sobre foto. contrast(.62) comprime el rango hacia el medio
   y brightness(1.85) lo sube completo: quedan grises claros (~160-255) que
   mantienen la diferencia entre azul oscuro, azul medio y cian.
   El drop-shadow separa el logo de las fotos más claras. */
/* Tamaño constante del logo (7 ago 2026).
   Antes medía 3.8rem (60,8px) en reposo y mbr-additional.css lo bajaba a 3rem
   (48px) con .navbar-short, así que al hacer scroll el logo cambiaba de color
   Y de tamaño a la vez; el usuario pidió que sólo cambiara el color.

   3.375rem = 54px es el valor que no altera ninguna de las dos alturas del
   header, que están congeladas porque seis compensaciones dependen de ellas:
   - En reposo el nav tiene min-height:77px y hoy el contenido mide justo 77
     (61 de logo + 8+8 de padding). Con 54 el contenido baja a 70 y manda el
     min-height: el nav sigue midiendo 77px.
   - Con .navbar-short el min-height es 60px pero el nav mide 70px reales,
     porque lo determina otro elemento de 54px (el CTA), no el logo. Un logo
     de 54px cabe exacto: el nav sigue midiendo 70px.

   Especificidad: la regla de mbr-additional.css es
   ".cid-s9sKkjC37M .navbar.navbar-short .navbar-logo a img" (0,4,2) con
   !important. El segundo selector de abajo es (0,4,3) y le gana sin acoplarse
   al cid. El !important es imprescindible además porque header.php trae un
   style="height:3.8rem" en línea. */
nav.navbar.navbar-dropdown .navbar-logo a img,
nav.navbar.navbar-dropdown.navbar-short .navbar-logo a img {
  height: 3.375rem !important;
}

.navbar-logo img {
  transition: filter 240ms var(--ease-out-quart);
}
.navbar-dropdown.transparent.bg-color:not(.opened) .navbar-logo img {
  filter: grayscale(1) contrast(0.62) brightness(1.85) drop-shadow(0 1px 3px rgb(0 0 0 / 0.45));
}