/* ==============================================================================
   ACCURETTA INGENIERÍA - ESTILOS DEL COMPONENTE CABECERA (COMPONENT-HEADER.CSS)
   DISEÑO GLASSMORPHIC PREMIUM Y NAVEGACIÓN MODULAR FLUIDA (LEGO)
   ============================================================================== */

 /* ==============================================================================
   BARRA SUPERIOR DE UTILIDADES (TOP-BAR)
   ============================================================================== */
 .header-top-bar {
     background-color: #1B59C0;
     /* Deep Engineering Blue */
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1001;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .top-bar-content {
     max-width: 1280px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.35rem 2rem;
 }

 .top-bar-contact {
     display: flex;
     align-items: center;
     gap: 1.8rem;
 }

 .top-bar-link {
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
     color: rgba(255, 255, 255, 0.85);
     text-decoration: none;
     font-family: var(--font-body);
     font-size: 0.82rem;
     font-weight: 500;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }

 .top-bar-link svg {
     width: 15px;
     height: 15px;
     fill: currentColor;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .top-bar-link:hover {
     color: #FFFFFF;
     text-shadow: 0 0 8px rgba(0, 168, 112, 0.6);
 }

 .top-bar-link:hover svg {
     fill: var(--accent);
     transform: scale(1.15);
     filter: drop-shadow(0 0 4px rgba(0, 168, 112, 0.5));
 }

 /* Separador vertical entre teléfono y email */
 .top-bar-separator {
     width: 1px;
     height: 14px;
     background-color: rgba(255, 255, 255, 0.25);
 }

 /* Menú legal alineado a la derecha en la top-bar */
 .top-bar-legal {
     display: flex;
     align-items: center;
     gap: 0.6rem;
 }

 .top-bar-legal a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-family: var(--font-body);
     font-size: 0.78rem;
     font-weight: 500;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .top-bar-legal a:hover {
     color: #FFFFFF;
     text-shadow: 0 0 8px rgba(0, 168, 112, 0.5);
 }

 .top-bar-legal .top-bar-separator {
     height: 12px;
 }

 /* ==============================================================================
   ICONO DE BÚSQUEDA EN LA NAVEGACIÓN
   ============================================================================== */
 .search-toggle {
     background: none;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.4rem;
     border-radius: 50%;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     color: rgba(248, 250, 252, 0.65);
 }

 .search-toggle svg {
     width: 20px;
     height: 20px;
     fill: currentColor;
     transition: all 0.3s ease;
 }

 .search-toggle:hover {
     color: #FFFFFF;
     background-color: rgba(255, 255, 255, 0.08);
 }

 .search-toggle:hover svg {
     transform: scale(1.1);
 }

 /* ==============================================================================
   OVERLAY DE BÚSQUEDA
   ============================================================================== */
 .search-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(2, 6, 23, 0.92);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     z-index: 2000;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding-top: 12vh;
     opacity: 0;
     visibility: hidden;
     transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .search-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .search-overlay-close {
     position: absolute;
     top: 1.5rem;
     right: 2rem;
     background: none;
     border: none;
     color: rgba(255, 255, 255, 0.6);
     font-size: 2.2rem;
     cursor: pointer;
     transition: all 0.3s ease;
     line-height: 1;
 }

 .search-overlay-close:hover {
     color: #FFFFFF;
     transform: rotate(90deg);
 }

 .search-overlay-container {
     width: 90%;
     max-width: 680px;
 }

 .search-overlay-container h3 {
     color: rgba(255, 255, 255, 0.5);
     font-family: var(--font-heading);
     font-size: 0.85rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: 1rem;
 }

 .search-input-wrapper {
     position: relative;
     margin-bottom: 2rem;
 }

 .search-input-wrapper input {
     width: 100%;
     padding: 1rem 1.5rem;
     padding-right: 3.5rem;
     border: 2px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.04);
     color: #FFFFFF;
     font-family: var(--font-body);
     font-size: 1.1rem;
     outline: none;
     transition: all 0.3s ease;
 }

 .search-input-wrapper input::placeholder {
     color: rgba(255, 255, 255, 0.35);
 }

 .search-input-wrapper input:focus {
     border-color: var(--accent);
     box-shadow: 0 0 20px rgba(0, 168, 112, 0.15);
 }

 .search-input-icon {
     position: absolute;
     right: 1.2rem;
     top: 50%;
     transform: translateY(-50%);
     width: 22px;
     height: 22px;
     fill: rgba(255, 255, 255, 0.3);
     pointer-events: none;
 }

 .search-results {
     max-height: 50vh;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }

 .search-result-item {
     display: block;
     padding: 1rem 1.2rem;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid rgba(255, 255, 255, 0.06);
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     font-family: var(--font-body);
     font-size: 0.95rem;
     transition: all 0.25s ease;
     cursor: pointer;
 }

 .search-result-item:hover {
     background: rgba(0, 168, 112, 0.1);
     border-color: rgba(0, 168, 112, 0.3);
     color: #FFFFFF;
 }

 .search-result-item .result-title {
     font-weight: 600;
     font-family: var(--font-heading);
     color: var(--accent);
     margin-bottom: 0.25rem;
 }

 .search-result-item .result-snippet {
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.5);
     line-height: 1.4;
 }

 .search-no-results {
     color: rgba(255, 255, 255, 0.4);
     font-family: var(--font-body);
     font-size: 0.95rem;
     text-align: center;
     padding: 2rem 0;
 }

 .modular-header {
     position: fixed;
     top: 32px;
     /* Desplazado debajo de la top-bar */
     left: 0;
     width: 100%;
     z-index: 1000;
     background: rgba(11, 19, 41, 0.85);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
     transition: var(--transition-smooth);
 }

 .nav-container {
     max-width: 1280px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.3rem 2rem;
     /* Reducido para equilibrar el logo aún más grande de 80px */
 }

 /* Identidad Corporativa (Logo principal negativo para fondo oscuro) */
 .brand-logo {
     display: flex;
     align-items: center;
 }

 .brand-logo .logo-link {
     display: flex;
     align-items: center;
     text-decoration: none;
 }

 .brand-logo .logo-img {
     height: 80px;
     /* Aumentado a 80px para alta visibilidad y presencia */
     width: auto;
     object-fit: contain;
     filter: brightness(0) invert(1);
     /* Convierte el logo azul/gris en blanco puro de alto contraste */
     transition: var(--transition-smooth);
 }

 .brand-logo .logo-img:hover {
     opacity: 0.95;
     transform: scale(1.03);
 }

 /* Menú de Navegación */
 .nav-menu {
     display: flex;
     align-items: center;
     gap: 2rem;
     list-style: none;
 }

 .nav-menu a {
     text-decoration: none;
     color: rgba(248, 250, 252, 0.75);
     /* Architectural White con opacidad */
     font-family: var(--font-heading);
     font-size: 0.95rem;
     font-weight: 600;
     transition: var(--transition-smooth);
     position: relative;
     padding: 0.5rem 0;
 }

 /* Efecto de línea inferior expansiva en hover */
 .nav-menu>li>a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background-color: var(--accent);
     transition: var(--transition-smooth);
 }

 .nav-menu>li>a:hover {
     color: #FFFFFF;
 }

 .nav-menu>li>a:hover::after,
 .nav-menu>li>a.active::after {
     width: 100%;
 }

 .nav-menu>li>a.active {
     color: var(--accent);
 }

 /* --- ESTILOS DE SUBMENÚ DESPLEGABLE EN CABECERA --- */
 .nav-dropdown {
     position: relative;
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
     background-color: #0b1329;
     /* Fondo azul marino profundo */
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 8px;
     padding: 0.8rem 0;
     list-style: none;
     min-width: 280px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1000;
 }

 .dropdown-menu li {
     width: 100%;
 }

 .dropdown-menu a {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 0.6rem 1.5rem;
     font-size: 0.88rem;
     color: rgba(248, 250, 252, 0.85);
     white-space: nowrap;
     transition: var(--transition-smooth);
     font-weight: 500;
 }

 .dropdown-menu a svg {
     width: 18px;
     height: 18px;
     fill: var(--accent);
     /* Verde acento */
     transition: var(--transition-smooth);
     flex-shrink: 0;
 }

 .dropdown-menu a:hover svg {
     fill: #FFFFFF;
     transform: scale(1.15);
 }

 /* Desactivar línea expansiva en submenú */
 .dropdown-menu a::after {
     display: none !important;
 }

 .dropdown-menu a:hover {
     color: var(--accent);
     /* Verde */
     background-color: rgba(255, 255, 255, 0.03);
     padding-left: 1.8rem;
 }

 /* Destaque para enlace de submenú activo */
 .dropdown-menu a.active {
     color: var(--accent) !important;
     font-weight: 700 !important;
     background-color: rgba(255, 255, 255, 0.05);
     padding-left: 1.8rem;
     border-left: 3px solid var(--accent);
 }

 .dropdown-menu a.active svg {
     fill: var(--accent) !important;
 }

  /* Activar visualización en hover (exclusivo para escritorio) */
  @media (min-width: 769px) {
      .nav-dropdown:hover .dropdown-menu {
          opacity: 1;
          visibility: visible;
          transform: translateX(-50%) translateY(0);
      }
  }

  /* --- ADAPTABILIDAD MÓVIL --- */
  @media (max-width: 992px) {
      .nav-menu {
          gap: 1.2rem;
      }
  }

  @media (max-width: 768px) {
      .nav-container {
          padding: 1rem;
          flex-direction: column;
          gap: 1rem;
          width: 100%;
          box-sizing: border-box;
      }

      .nav-menu {
          gap: 1rem;
          flex-wrap: wrap;
          justify-content: center;
          width: 100%;
          box-sizing: border-box;
      }

      .nav-menu a {
          font-size: 0.85rem;
      }

      /* En móviles el submenú se controla via JS (.is-open) para touch */
      .dropdown-menu {
          position: static;
          transform: none;
          opacity: 1;
          visibility: visible;
          display: none;
          min-width: 100%;
          box-shadow: none;
          background-color: rgba(0, 0, 0, 0.2);
          margin-top: 0.5rem;
          border: none;
          border-radius: 6px;
          overflow: hidden;
      }

      /* Clase .is-open gestionada por JS en touch/click */
      .nav-dropdown.is-open .dropdown-menu {
          display: block !important;
          opacity: 1 !important;
          visibility: visible !important;
          transform: none !important;
      }

      /* Indicador visual de que "Servicios" es expandible en móvil */
      .nav-dropdown > a::after {
          content: ' ▾';
          font-size: 0.7em;
          opacity: 0.7;
      }

      .nav-dropdown.is-open > a::after {
          content: ' ▴';
      }

      /* Asegurar que los ítems del dropdown sean fácilmente tocables */
      .dropdown-menu li a {
          display: block;
          padding: 0.65rem 1rem;
          font-size: 0.82rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          min-height: 44px; /* Área mínima de toque recomendada por WCAG */
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .dropdown-menu li:last-child a {
          border-bottom: none;
      }
  }

  @media (max-width: 600px) {
      .header-top-bar {
          display: none;
      }

      .modular-header {
          top: 0;
      }
  }

  @media (max-width: 480px) {
      .nav-container {
          padding: 0.6rem 0.8rem;
          gap: 0.6rem;
      }

      .nav-menu {
          gap: 0.5rem 0.8rem;
          font-size: 0.82rem;
      }

      .nav-menu a {
          font-size: 0.78rem;
          padding: 0.35rem 0;
      }

      .brand-logo .logo-img {
          height: 58px; /* Ligeramente más pequeño en 360px */
      }
  }

 /* Línea de destello de luz amarilla en el borde inferior de la cabecera */
 .modular-header::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg,
             rgba(245, 180, 0, 0.15) 0%,
             #F5B400 35%,
             #FFFFFF 50%,
             #F5B400 65%,
             rgba(245, 180, 0, 0.15) 100%);
     background-size: 200% auto;
     animation: sweep-gold-light 4s linear infinite;
 }

 @keyframes sweep-gold-light {
     0% {
         background-position: 200% 0;
     }

     100% {
         background-position: -200% 0;
     }
 }