/* ============================================================
   PERFECT BLANKING - DARK THEME OVERRIDES
   Fondo: rgb(0, 10, 21) | Verde: rgb(83, 180, 50) | Azul: rgb(23, 126, 215)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

:root,
[data-bs-theme=light] {

  /* === FONDO === */
  --bs-body-bg:         rgb(0, 10, 21);
  --bs-body-bg-rgb:     0, 10, 21;

  /* === TEXTOS (gris oscuro → blanco) === */
  --bs-body-color:              rgba(255, 255, 255, 0.75);
  --bs-body-color-rgb:          255, 255, 255;
  --bs-emphasis-color:          #ffffff;
  --bs-emphasis-color-rgb:      255, 255, 255;
  --bs-secondary-color:         rgba(255, 255, 255, 0.65);
  --bs-secondary-color-rgb:     255, 255, 255;
  --bs-tertiary-color:          rgba(255, 255, 255, 0.45);
  --bs-tertiary-color-rgb:      255, 255, 255;
  --bs-heading-color:           #ffffff;
  --bs-link-color:              #ffffff;
  --bs-link-color-rgb:          255, 255, 255;
  --bs-link-hover-color:        rgb(83, 180, 50);
  --bs-link-hover-color-rgb:    83, 180, 50;
  --bs-highlight-color:         rgba(255, 255, 255, 0.75);

  /* === ESCALA DE GRISES (basada en blanco para fondos oscuros) === */
  --bs-gray:        #9aabb0;
  --bs-gray-100:    rgba(255, 255, 255, 0.06);
  --bs-gray-200:    rgb(8, 20, 36);
  --bs-gray-300:    rgba(255, 255, 255, 0.6);
  --bs-gray-400:    rgba(255, 255, 255, 0.7);
  --bs-gray-500:    #ffffff;
  --bs-gray-600:    rgba(255, 255, 255, 0.6);
  --bs-gray-700:    rgba(255, 255, 255, 0.75);
  --bs-gray-800:    rgba(255, 255, 255, 0.85);
  --bs-gray-900:    #ffffff;

  /* === FONDOS SECUNDARIOS === */
  --bs-secondary-bg:          rgb(6, 16, 30);
  --bs-secondary-bg-rgb:      6, 16, 30;
  --bs-tertiary-bg:           rgba(255, 255, 255, 0.04);
  --bs-tertiary-bg-rgb:       255, 255, 255;

  /* === COLORES TEMA (light → equivalentes oscuros) === */
  --bs-light:           rgba(255, 255, 255, 0.06);
  --bs-light-rgb:       255, 255, 255;
  --bs-light-gray:      rgb(8, 20, 36);
  --bs-light-gray-rgb:  8, 20, 36;
  --bs-muted:           rgba(255, 255, 255, 0.6);
  --bs-muted-rgb:       255, 255, 255;
  --bs-dark-light:      rgba(255, 255, 255, 0.7);
  --bs-dark-light-rgb:  255, 255, 255;

  /* === BORDES === */
  --bs-border-color:              rgba(255, 255, 255, 0.12);
  --bs-border-color-translucent:  rgba(255, 255, 255, 0.1);

  /* === VERDE (color primario actualizado) === */
  --bs-green:           rgb(83, 180, 50);
  --bs-primary:         rgb(83, 180, 50);
  --bs-primary-rgb:     83, 180, 50;
  --bs-border-color-green: rgb(83, 180, 50);

  /* === AZUL ACENTO === */
  --pb-blue:        rgb(23, 126, 215);
  --pb-blue-rgb:    23, 126, 215;

  /* === TARJETAS === */
  --bs-card-title-color: #ffffff;
}

/* ============================================================
   UTILIDADES VERDE
   ============================================================ */
.green,
.text-green {
  color: rgb(83, 180, 50) !important;
}
.bg-green {
  background-color: rgb(83, 180, 50) !important;
}

/* ============================================================
   UTILIDADES AZUL
   ============================================================ */
.text-blue {
  color: rgb(23, 126, 215) !important;
}
.bg-blue {
  background-color: rgb(23, 126, 215) !important;
}
.border-blue {
  border-color: rgb(23, 126, 215) !important;
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
.text-dark {
  color: rgba(255, 255, 255, 0.85) !important;
}
.text-muted {
  color: rgba(255, 255, 255, 0.55) !important;
}
.text-secondary {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================================
   BOTONES — hover fondo navy + efecto deslizamiento conservado
   ============================================================ */

.btn.blanco:hover,
.btn.blanco:focus {
  background-color: rgb(1, 17, 33) !important;
  border-color: rgb(23, 126, 215) !important;
  color: #ffffff !important;
}

/* btn-text: mantener transform del deslizamiento, solo ajustar color */
.btn.blanco:hover .btn-text,
.btn.blanco:focus .btn-text {
  color: #ffffff !important;
  transform: translateX(2.5rem);
}

/* Botón "Solicitar presupuesto" del formulario de contacto: azul en hover,
   focus, active y mientras está procesando (disabled + spinner) */
.btn-submit:hover,
.btn-submit:focus,
.btn-submit:focus-visible,
.btn-submit:active,
.btn-submit:disabled {
  background-color: #177ED7 !important;
  border-color: #177ED7 !important;
  opacity: 1 !important;
}
.btn-submit:hover .btn-text,
.btn-submit:focus .btn-text,
.btn-submit:focus-visible .btn-text,
.btn-submit:active .btn-text,
.btn-submit:disabled .btn-text {
  color: #ffffff !important;
}

/* ============================================================
   SERVICIOS — hover en imagen y título
   ============================================================ */
.meet-our-team .position-relative a img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.meet-our-team .meet-team:hover .position-relative a img {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
}

.meet-our-team .meet-team-details a:not(.btn) {
  display: inline-block;
  transition: transform 0.3s ease;
}
.meet-our-team .meet-team-details a:not(.btn):hover {
  transform: scale(1.05);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
}

/* Botón "Ver" en cards de servicios — oculto en desktop, visible en mobile */
@media (min-width: 992px) {
  .meet-our-team .meet-team .btn.chico.blanco {
    display: none !important;
  }
}

/* Descripción oculta por defecto, se revela al hacer hover en el card */
.meet-our-team .meet-service-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-bottom: 0 !important;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-bottom 0.45s ease;
}
.meet-our-team .meet-team:hover .meet-service-desc {
  max-height: 160px;
  opacity: 1;
  margin-bottom: 0.5rem !important;
}

/* ============================================================
   SEPARADORES
   ============================================================ */
hr {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   HEADER
   ============================================================ */

/* El botón hamburguesa conserva su look original (ícono oscuro sobre blanco) */
.toggle-menu {
  background-color: #ffffff !important;
}
.toggle-menu .menu-icon {
  color: #1F2A2E !important;
}

.header.fixed-header {
  background-color: rgba(0, 10, 21, 0.88);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}
/* En scroll el logo oscuro se ocultaba → mantener logo blanco */
.header.fixed-header .logo .logo-dark {
  display: none;
}
.header.fixed-header .logo .logo-white {
  display: block;
}
.header.fixed-header .light-dark {
  color: rgba(255, 255, 255, 0.85) !important;
}
.header.fixed-header .toggle-menu {
  background-color: rgb(6, 16, 30) !important;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown-menu {
  background-color: rgb(6, 16, 30);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.dropdown-item {
  color: rgba(255, 255, 255, 0.78);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.dropdown-divider {
  border-color: rgba(255, 255, 255, 0.10);
}

/* ============================================================
   TARJETAS (tech-card tenía background blanco hardcodeado)
   ============================================================ */
.tech-card {
  background-color: rgb(6, 16, 30) !important;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   ACORDEÓN
   ============================================================ */
.accordion-button::after {
  background-color: rgba(255, 255, 255, 0.07) !important;
}
.accordion-button {
  color: #ffffff;
  background-color: transparent;
}
.accordion-button:not(.collapsed) {
  color: rgb(83, 180, 50);
}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-control,
.form-select {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.25) !important;
}
.form-control::placeholder,
.form-select::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.form-label {
  color: rgba(255, 255, 255, 0.85);
}
select.form-select option {
  background-color: rgb(6, 16, 30);
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   BOTONES DE CERRAR (×)
   ============================================================ */
.btn-close {
  filter: invert(1);
}

/* ============================================================
   LISTAS (nav, items de menú, etc.)
   ============================================================ */
.nav-link {
  color: rgba(255, 255, 255, 0.78);
}
.nav-link:hover,
.nav-link:focus {
  color: rgb(83, 180, 50);
}

/* ============================================================
   TARJETA GENÉRICA — texto dentro
   ============================================================ */
.card-title {
  color: #ffffff;
}
.card-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   SECCIÓN MAPA / INFORMACIÓN
   (ya era dark, se ajusta para que no sea idéntico al fondo)
   ============================================================ */
.informacion {
  background-color: rgb(4, 12, 25);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   FONDO DE SECCIONES BG-LIGHT / BG-LIGHT-GRAY
   ============================================================ */
.bg-light {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
.bg-light-gray {
  background-color: rgb(6, 16, 30) !important;
}
.bg-secondary-subtle {
  background-color: rgb(6, 16, 30) !important;
}

/* ============================================================
   TABLA BOOTSTRAP
   ============================================================ */
.table {
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.10);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.78);
}

/* ============================================================
   TODAS LAS SECCIONES CON bg-dark (servicios, clientes, footer…)
   → navy profundo uniforme rgb(1, 17, 33)
   ============================================================ */
.bg-dark {
  background-color: rgb(1, 17, 33) !important;
}

/* ============================================================
   PASTILLAS / BADGES — todos: borde azul, fondo transparente, texto blanco
   ============================================================ */
.badge {
  background-color: transparent !important;
  border: 2px solid rgb(23, 126, 215) !important;
  color: #ffffff !important;
}

/* ============================================================
   ÍCONOS CIRCULARES EN BOTONES — fondo blanco, ícono azul
   ============================================================ */
.btn-icon.bg-white {
  background-color: #ffffff !important;
  color: rgb(23, 126, 215) !important;
}

/* Círculo de ícono en el botón hero del banner */
.bg-primary .bg-white.round-52,
.rounded-pill .bg-white.round-52 {
  background-color: #ffffff !important;
  color: rgb(23, 126, 215) !important;
}

/* Flecha del hero: ícono negro sobre círculo blanco */
.banner-section .bg-white.round-52 i {
  color: #000000 !important;
}

/* Hero del index (banner con video, NO las páginas internas):
   capa negra leve sobre el video para mejorar la legibilidad del texto.
   El video del template tiene z-index:1 y tapa el overlay ::before, así
   que lo bajamos por debajo del overlay. El texto (.z-1) queda encima. */
.banner-section:not(.banner-inner-section) video {
  z-index: 0 !important;
  /* El section tiene padding-top:50px y es d-flex align-items-center, por lo
     que el video (absoluto con insets auto) se centraba teniendo en cuenta ese
     padding y quedaba corrido 25px hacia abajo (top:25px / bottom:-25px).
     Lo anclamos verticalmente a los bordes para que cubra toda la sección sin
     franja. (Solo top/bottom: el posicionamiento horizontal mobile del template
     —left:30% + transform— se respeta.) */
  top: 0 !important;
  bottom: 0 !important;
}

.banner-section:not(.banner-inner-section)::before {
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */
.pb-desktop-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem !important; /* espaciado entre botones del nav */
}

.pb-nav-link {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  font-weight: 100;
  font-size: 24px;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* Línea azul que crece de izquierda a derecha */
.pb-nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgb(23, 126, 215);
  transition: width 0.3s ease;
}

.pb-nav-link:hover {
  color: rgb(83, 180, 50);
}

.pb-nav-link:hover::after {
  width: 100%;
}

/* Dropdown wrapper */
.pb-nav-dropdown {
  position: relative;
}

/* Dropdown panel */
.pb-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background-color: rgb(1, 17, 33);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 2px solid rgb(23, 126, 215);
  border-radius: 0 0 8px 8px;
  padding: 8px 0;
  min-width: 190px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.pb-nav-dropdown:hover .pb-nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Items dentro del dropdown: solo color, sin línea */
.pb-nav-dropdown-item {
  display: block;
  padding: 10px 24px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  font-family: 'Manrope', sans-serif;
  transition: color 0.3s ease;
}

.pb-nav-dropdown-item:hover {
  color: rgb(83, 180, 50);
}

/* ============================================================
   REDUCCIÓN DE ESPACIADO GENERAL
   Referencia: ejemplo.jpeg — aprox. 50% menos espacio vertical
   ============================================================ */

/* Padding vertical de secciones (py-xl-12: 160px → 70px) */
.py-xl-12 {
  padding-top:    70px !important;
  padding-bottom: 70px !important;
}
.pt-xl-12 { padding-top:    70px !important; }
.pb-xl-12 { padding-bottom: 70px !important; }

/* py-xl-11 / py-lg-11: 96px → 48px */
.py-xl-11 {
  padding-top:    48px !important;
  padding-bottom: 48px !important;
}
.py-lg-11 {
  padding-top:    48px !important;
  padding-bottom: 48px !important;
}
.pt-lg-11 { padding-top:    48px !important; }
.pt-xl-11 { padding-top:    48px !important; }
.pb-xl-11 { padding-bottom: 48px !important; }

/* py-xl-10 / py-lg-10: 80px → 40px */
.py-xl-10 {
  padding-top:    40px !important;
  padding-bottom: 40px !important;
}
.py-lg-10 {
  padding-top:    40px !important;
  padding-bottom: 40px !important;
}
.pt-xl-10 { padding-top:    40px !important; }
.pb-xl-10 { padding-bottom: 40px !important; }

/* Gaps internos de secciones */
.gap-xl-11 { gap: 36px !important; }
.gap-xl-10 { gap: 28px !important; }
.gap-xl-9  { gap: 24px !important; }
.gap-5     { gap: 1.5rem !important; } /* 3rem → 1.5rem */

/* Márgenes de columnas en mobile (mb-7: 30px → 16px) */
.mb-7 { margin-bottom: 16px !important; }
.mb-8 { margin-bottom: 20px !important; }

/* Footer: reduce padding superior */
.footer.bg-dark { padding-top: 48px !important; }

/* ============================================================
   TIPOGRAFÍA — BEBAS NEUE para todos los títulos
   ============================================================ */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em;
}

/* ============================================================
   GRILLA DE LOGOS DE CLIENTES (sección Clientes, index.html)
   ============================================================ */
.client-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 0.5rem;
  /*background-color: rgb(6, 16, 30);*/
  border-radius: 0.5rem;
  transition: transform 0.2s ease;
}

.client-logo-card:hover {
  transform: scale(1.05);
}

.client-logo-card img {
  max-height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.client-logo-card span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.client-logo-card--empty {
  background-color: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

/* ============================================
   CARDS MÁQUINAS Y EQUIPOS (matriceria.html, estampado.html)
   styles.css les da altura fija (alto-maquinas: 460/490/580px,
   alto-maquinas-2: 420/480/500px) y el texto pisa el borde
   verde inferior. Altura automática + flex para que las cards
   queden parejas sin solapar el texto.
   ============================================ */
.maquinas > [class*="col-"] > .d-flex.flex-column {
  height: 100%;
}

.maquinas .alto-maquinas,
.maquinas .alto-maquinas-2 {
  height: auto;
  flex: 1;
}

/* ============================================
   BANNER FULL-WIDTH (nuestra-empresa.html)
   Imagen banner.jpg a ancho completo del viewport,
   sin margen ni padding lateral.
   ============================================ */
section.banner-plantas {
  margin: 0;
  padding: 0;
  line-height: 0;
}

section.banner-plantas img {
  width: 100%;
  height: auto;
  margin: 0;
}

/* ============================================
   FONDO "NUESTRAS PLANTAS" (contacto.html y nuestra-empresa.html)
   Clase propia .pb-plantas-bg para mostrar fondo.png detrás del
   contenido de la section, sin afectar otros divs/headings que
   comparten la clase .plantas. Requiere un .container hijo directo.
   ============================================ */
.pb-plantas-bg {
  position: relative;
  overflow: hidden;
}

.pb-plantas-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/plantas/fondo.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  filter: grayscale(100%);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.pb-plantas-bg > .container {
  position: relative;
  z-index: 1;
}

/* ============================================
   FONDO "MÁQUINAS Y EQUIPOS" (estampado.html)
   Clase propia .pb-maquinas-bg aplicada a la <section> de
   máquinas para mostrar fondo-maquinas.png desaturado detrás
   del contenido. Requiere un .container hijo directo.
   ============================================ */
.pb-maquinas-bg {
  position: relative;
  overflow: hidden;
}

.pb-maquinas-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/fondo-maquinas.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  filter: grayscale(100%);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.pb-maquinas-bg > .container {
  position: relative;
  z-index: 1;
}

/* En mobile, los bloques de texto de equipos/instrumentos (.alto-plantas)
   tienen alto fijo (190px en styles.css) y el segundo texto se desborda
   sobre la línea base. Alto dinámico en mobile para que se acomode. */
@media (max-width: 768px) {
  .alto-plantas {
    height: auto !important;
  }
}

/* ============================================================
   NAVBAR MOBILE — panel full-width, sin bordes redondeados,
   con jerarquía clara entre ítems principales y subítems.
   El .btn-group deja de ser contexto de posicionamiento para que
   el panel se ancle al <header> (position:fixed) y salga a todo el
   ancho con top:100% (debajo del header, sin medir altura fija).
   ============================================================ */
.header .d-lg-none .btn-group {
  position: static !important;
}

.pb-mobile-menu.dropdown-menu {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: rgb(0, 10, 21) !important;
  box-shadow: none;
  overflow-y: auto;
  z-index: 9999 !important;
}

/* Fila superior del menú: logo + botón cerrar */
.pb-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pb-mobile-logo {
  width: 140px;
  height: auto;
}

/* anular los gaps internos del wrapper */
.pb-mobile-menu > .d-flex,
.pb-mobile-menu .d-flex.flex-column.gap-3 {
  gap: 0 !important;
}

/* botón cerrar: visible sobre fondo oscuro (ahora en la fila del logo) */
.pb-mobile-menu .btn-close {
  filter: invert(1) grayscale(1);
  margin: 0;
  flex-shrink: 0;
}

.pb-mobile-menu .header-menu {
  width: 100%;
}
.pb-mobile-menu .header-item {
  margin: 0 !important;
}

/* ítems principales: fila full-width con separador */
.pb-mobile-menu .header-link {
  display: block;
  width: 100%;
  padding: 10px 24px;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* botones principales en mayúscula (manteniendo el blanco) */
.pb-mobile-menu li.header-item:not(.ms-5) > a.header-link {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pb-mobile-menu li.header-item > a.header-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--bs-primary) !important;
}

/* etiqueta de grupo "Servicios" (es un <span>, no enlace) */
.pb-mobile-menu li.header-item > span.header-link {
  margin-left: 0 !important;
  padding: 12px 24px 6px;
  font-size: 0.78rem;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pb-blue) !important;
  border-bottom: 0;
}

/* subítems de Servicios: indentados, más chicos, con acento lateral */
.pb-mobile-menu li.header-item.ms-5 {
  margin-left: 0 !important;
}
.pb-mobile-menu li.header-item.ms-5 > a.header-link {
  width: auto;
  margin-left: 25px;
  padding: 8px 24px 8px 25px;
  font-size: 0.95rem;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 3px 0 0 rgba(var(--pb-blue-rgb), 0.55);
}
.pb-mobile-menu li.header-item.ms-5 > a.header-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: inset 3px 0 0 var(--pb-blue);
}

/* ============================================================
   FORMULARIO DE CONTACTO — toast de alerta + reCAPTCHA
   ============================================================ */
.form-alert {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  max-width: 420px;
  width: calc(100% - 48px);
  padding: 18px 18px 18px 22px;
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgb(6, 16, 30);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.form-alert.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.form-alert--success { border: 1px solid rgba(83, 180, 50, 0.4); }
.form-alert--success .form-alert-icon { color: var(--bs-primary); }
.form-alert--error   { border: 1px solid rgba(220, 53, 69, 0.4); }
.form-alert--error   .form-alert-icon { color: #ff6b6b; }
.form-alert-icon { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.form-alert #formAlertMsg { font-size: 14px; line-height: 1.5; flex: 1; color: #ffffff; }
.form-alert-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
  opacity: 0.6;
  color: #ffffff;
}
.form-alert-close:hover { opacity: 1; }
@media (max-width: 575px) {
  .form-alert { top: 16px; right: 16px; width: calc(100% - 32px); }
}

/* Texto de error debajo de cada campo (Bootstrap .invalid-feedback, oculto salvo .is-invalid) */
.invalid-feedback {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin-top: 4px;
}

.g-recaptcha { transform-origin: left top; }
}