/* ================================================================
   GGLATAM - CSS MAESTRO (Dropdown + Footer + Efectos)
   ================================================================ */

/* --- 1. MENÚ DROPDOWN (Sencillo y Robusto) --- */

/* El contenedor del menú desplegable */
.custom-dropdown-menu {
  display: none; /* Oculto por defecto */
  position: absolute;
  top: 70px; /* Justo debajo del botón hamburguesa */
  right: 0;
  width: 260px;
  background-color: #030712; /* Fondo Negro Profundo */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* Sombra elegante */
  z-index: 99999;
  flex-direction: column;
  gap: 8px;
}

/* Clase que añade JS para mostrarlo */
.custom-dropdown-menu.active {
  display: flex;
  animation: slideDownFade 0.2s ease-out forwards;
}

/* Animación de entrada suave */
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enlaces del menú */
.dropdown-link {
  font-family: 'Inter Tight', sans-serif;
  color: #b6bcc6; /* Gris claro */
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: block;
}

.dropdown-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  transform: translateX(4px); /* Pequeño desplazamiento */
}

/* Línea divisoria */
.dropdown-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}

/* Elementos solo visibles en móvil dentro del menú */
.mobile-only {
  display: none;
}

/* Estilo destacado para "Crear Agente IA" */
.dropdown-link.highlight {
  color: #b7b932; /* Verde acento */
  font-weight: 700;
  background-color: rgba(183, 185, 50, 0.1);
}

.dropdown-link.highlight:hover {
  background-color: rgba(183, 185, 50, 0.2);
}

/* AJUSTES RESPONSIVE PARA EL MENÚ */
@media screen and (max-width: 991px) {
  .mobile-only {
    display: block; /* Mostrar Login/Crear Cuenta en el dropdown en móvil */
  }
  
  /* En móvil, hacemos el menú un poco más ancho */
  .custom-dropdown-menu {
    width: 300px;
    right: -20px; /* Ajuste para alinear con el borde de la pantalla */
  }
}


/* --- 2. FOOTER GRID SYSTEM (Alineación Perfecta) --- */

.footer-grid-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr; /* Columna de dirección más ancha */
  gap: 40px;
  align-items: start;
  margin-top: 40px;
  width: 100%;
}

.footer-col-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-col-text {
  font-family: 'Inter Tight', sans-serif;
  color: #b6bcc6;
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.footer-col-text:hover {
  color: #ffffff;
}

.footer-socials {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

/* Responsive del Footer */
@media screen and (max-width: 767px) {
  .footer-grid-container {
    grid-template-columns: 1fr; /* Una sola columna en móvil */
    gap: 48px;
  }
  
  .footer-col-title {
    margin-bottom: 16px;
  }
}


/* --- 3. EFECTOS DE IMAGEN & UI (Legacy conservado) --- */

/* Transiciones suaves en imágenes */
.work-image-v1, 
.blog-v1-image, 
.testimonial-client-image, 
.box-circle {
  overflow: hidden;
  position: relative;
  /* Aceleración de hardware para evitar parpadeos */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0); 
}

.work-image-v1 img, 
.blog-v1-image img, 
.testimonial-client-image img, 
.box-circle img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Efecto Zoom al hacer Hover */
.work-image-v1:hover img, 
.blog-v1-image:hover img, 
.testimonial-client-v1:hover img,
.testimonial-client-image:hover img,
.box-circle:hover img {
  transform: scale(1.08);
}

/* Animaciones de Tabs (Testimonios) */
.w-tab-pane {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.w-tab-pane.w--tab-active {
  opacity: 1;
  transform: translateY(0);
}