/* ═══════════════════════════════════════════
   EFECTOS PASTRY ADS APLICADOS A HNW
═══════════════════════════════════════════ */
:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-hover: 0 24px 48px rgba(15, 39, 56, 0.12);
  --hnw-red: #F25555;
}

/* --- 1. EFECTO DE ENTRADA AL CARGAR LA WEB (Reveal) --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo) !important;
  
  /* Sincronizado con la apertura de las cortinas de cine */
  transition-delay: 0.4s, 0.4s !important; 
  will-change: opacity, transform;
}
.reveal.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Cascada de +0.2s para que las siguientes tarjetas fluyan suavemente */
.reveal.reveal-d1 { transition-delay: 0.6s, 0.6s !important; } /* Espera 1.0s */
.reveal.reveal-d2 { transition-delay: 0.8s, 0.8s !important; } /* Espera 1.2s */
.reveal.reveal-d3 { transition-delay: 1.0s, 1.0s !important; } /* Espera 1.4s */
.reveal.reveal-d4 { transition-delay: 1.2s, 1.2s !important; } /* Espera 1.4s */

/* --- 2. EFECTO PASTRY: TARJETAS DE SERVICIOS --- */
.hnw-card-service {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #f1f5f9;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 45px 30px;
  /* Transición de Pastry */
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease, border-color 0.3s !important;
}
.hnw-card-service:hover {
  transform: translateY(-12px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* --- 3. EFECTO PASTRY: TARJETAS DE INSIGHTS --- */
.hnw-card-insight {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #f1f5f9;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Transición de Pastry */
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease, border-color 0.3s !important;
}
.hnw-card-insight:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--hnw-red) !important;
}

/* Efecto de zoom en la imagen del insight al hacer hover */
.hnw-card-insight img {
  transition: transform 0.6s var(--ease-out-expo);
}
.hnw-card-insight:hover img {
  transform: scale(1.05);
}

/* --- EFECTO CINEMATOGRÁFICO DE ENTRADA --- */
:root {
    --ease-cinematic: cubic-bezier(.76, 0, .24, 1);
}

.cinema-bars { 
    position: fixed; 
    inset: 0; 
    z-index: 999999; /* Z-index altísimo para cubrir el menú y el slider */
    pointer-events: none; 
}

.cinema-bar {
    position: absolute; 
    left: 0; 
    right: 0; 
    height: 50%;
    background: #0F2738; /* Azul corporativo de HNW */
    transition: transform 0.7s var(--ease-cinematic);
}

.cinema-bar--top { top: 0; }
.cinema-bar--bottom { bottom: 0; }

/* Clases que el JS añadirá para abrir las cortinas */
.cinema-open .cinema-bar--top { transform: translateY(-100%); }
.cinema-open .cinema-bar--bottom { transform: translateY(100%); }
.cinema-done { display: none; }


/* =========================================
   MENÚ DESPLEGABLE AISLADO (Ajuste Estructural)
   ========================================= */

/* 1. Solo le damos posición relativa al padre. CERO FLOATS. */
li.hnw-dropdown-parent {
    position: relative !important;
    list-style: none !important;
}

/* Forzamos que el enlace principal "Servicios" sea visible */
li.hnw-dropdown-parent > a {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. El cuadro del submenú (Oculto) */
ul.hnw-submenu-box {
    display: block;
    position: absolute !important;
    
    /* LA CLAVE PARA QUE NO TAPE EL TEXTO: Lo empujamos hacia abajo */
    top: 100px !important; 
    
    left: 0 !important;
    background-color: #ffffff !important;
    min-width: 350px !important;
    box-shadow: 0 10px 30px rgba(15, 39, 56, 0.12) !important;
    border-radius: 8px !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    
    /* Efecto de entrada */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(15px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s !important;
    z-index: 999999 !important; /* Z-index al máximo */
    list-style: none !important;
}

/* 3. Evento Hover: Mostrar el submenú */
li.hnw-dropdown-parent:hover ul.hnw-submenu-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* 4. Estilos de los enlaces internos */
ul.hnw-submenu-box li {
    display: block !important;
    width: 100% !important; /* <-- FUERZA A LA FILA A MEDIR EL 100% DEL CAJÓN */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    float: none !important;
}

/* Estilos de los enlaces internos (Base) */
ul.hnw-submenu-box li a {
    display: block !important;
    width: 100% !important; /* <-- FUERZA AL ENLACE A LLENAR LA FILA */
    box-sizing: border-box !important; /* <-- Evita que el padding sume ancho extra y lo rompa */
    
    padding: 12px 24px !important;
    color: #0F2738 !important; /* Azul oscuro corporativo por defecto */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    
    white-space: nowrap !important; 
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
}

/* Hover sobre las opciones del submenú (PC) */
ul.hnw-submenu-box li a:hover {
    background-color: #f8f9fa !important; /* Gris suave de lado a lado */
    color: #1A5B8C !important; 
    padding-left: 32px !important; /* Empuja el texto 8px a la derecha */
}

/* =========================================
   AJUSTE PARA MENÚ STICKY (Solo al hacer scroll)
   ========================================= */

#Top_bar.is-sticky ul.hnw-submenu-box {
    top: 70px !important; 
}

/* =========================================
   AJUSTE RESPONSIVE (Móviles y Tablets - UNIFICADO)
   ========================================= */
@media (max-width: 991px) {
    
    /* Convertimos la caja flotante en un acordeón nativo */
    ul.hnw-submenu-box {
        position: static !important; /* Deja de flotar y empuja el contenido hacia abajo */
        display: none; /* Oculto por defecto para que el "+" lo abra */
        
        top: 40px !important; /* Mantenemos tu altura de móvil */
        
        background-color: #0f598c26 !important; /* Se funde con el panel oscuro */
        box-shadow: none !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
        
        /* Garantizamos que sea visible cuando la plantilla quite el display:none */
        opacity: 1 !important; 
        visibility: visible !important;
    }

    /* Le damos estilo de "sub-nivel" a los enlaces para fondo oscuro */
    ul.hnw-submenu-box li a {
        color: #f4f4f4b5 !important; /* Color gris claro para contraste */
        padding-left: 30px !important; /* Sangría visual para indicar jerarquía */
        font-size: 14px !important;
        font-weight: 200 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; /* Divisor sutil */
        
        /* En celulares sí permitimos que el texto salte a otra línea si la pantalla es muy estrecha */
        white-space: normal !important; 
    }

    /* Hover en móviles (fondo oscuro) */
    ul.hnw-submenu-box li a:hover {
        color: #ffffff !important; /* Resalta en blanco puro al tocar */
        background-color: transparent !important;
    }
}