/* === VARIABLES DE COLORES === */
:root {
  --tw-shadow-color-1: #d1d2e4;
  --tw-shadow-color-2: #fbfbfe;
}

.dark {
  --tw-shadow-color-1: #1f2031;
  --tw-shadow-color-2: #393a4d;
}

/* === FONDO NEUMÓRFICO PRINCIPAL === */
body {
  padding-top: 112px;
  transition: padding-top 0.3s ease;
  position: relative;
  overflow-x: hidden;
}

/* ✅ FONDO DEGRADADO PRINCIPAL (MODIFICADO) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  /* Gradiente actualizado: morado fuerte -> morado suave -> blanco */
  background: linear-gradient(180deg, 
    rgba(152, 83, 237, 1) 0%, 
    rgba(180, 150, 220, 1) 60%, /* Morado más suave */
    rgba(255, 255, 255, 1) 100%
  );
}

/* ✅ FONDO DEGRADADO MODO OSCURO (MODIFICADO) */
body.dark::before {
  /* Gradiente actualizado: morado oscuro -> morado grisáceo -> slate-900 */
  background: linear-gradient(180deg, 
    rgba(76, 35, 115, 1) 0%, 
    rgba(85, 60, 115, 1) 60%, /* Morado más suave y oscuro */
    rgb(15 23 42) 100% /* slate-900 */
  );
}

/* Capa de brillo superior */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  z-index: -2;
  background: radial-gradient(ellipse at top,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
}

body.dark::after {
  background: radial-gradient(ellipse at top,
    rgba(106, 173, 224, 0.1) 0%,   /* toque azul claro */
    transparent 70%
  );
}

/* === TEXTURA NEUMÓRFICA === */
.neomorphic-texture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(106, 173, 224, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(184, 196, 206, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(106, 173, 224, 0.04) 0%, transparent 50%);
  pointer-events: none;
  animation: soft-pulse 8s ease-in-out infinite;
}

body.dark .neomorphic-texture {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(106, 173, 224, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(26, 32, 44, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(184, 196, 206, 0.06) 0%, transparent 50%);
}

/* === PUNTOS DECORATIVOS === */
.neomorphic-dots {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(106, 173, 224, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
  pointer-events: none;
}

body.dark .neomorphic-dots {
  background-image: radial-gradient(circle, rgba(184, 196, 206, 0.04) 1px, transparent 1px);
  opacity: 0.25;
}

/* === ANIMACIÓN SUAVE === */
@keyframes soft-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.7; }
}

/* === ESTILOS NEUMÓRFICOS === */
.neumorphic-inset {
  background-color: #e0e5ec;
  box-shadow: inset 7px 7px 15px #bec3c9, inset -7px -7px 15px #ffffff;
}

.neumorphic-outset {
  background-color: #e0e5ec;
  box-shadow: 7px 7px 15px #bec3c9, -7px -7px 15px #ffffff;
}

.neumorphic-button:active {
  box-shadow: inset 4px 4px 8px #bec3c9, inset -4px -4px 8px #ffffff;
}

/* === LAYOUT === */
.min-h-screen {
  min-height: calc(100vh - 112px);
}

main {
  margin-top: 0;
}

/* === HEADER === */
header img {
  max-width: 13rem;
}

/* === PERFIL DE USUARIO === */
#session-buttons .user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#session-buttons .user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(106, 173, 224, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6AADE0;
  font-weight: bold;
  font-size: 1.125rem;
}

#session-buttons .user-info {
  display: flex;
  flex-direction: column;
}

#session-buttons .user-name {
  font-size: 0.875rem;
  font-weight: bold;
  color: white;
}

#session-buttons .user-email {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* === ESTILOS PARA EL MODAL DE VIDEO === */
#video-modal {
  /* La transición suave para la aparición ya está definida en tu CSS */
  transition: opacity 0.3s ease-in-out;
}

/* Clase que se añade para mostrar el modal */
#video-modal.modal-active {
  display: flex; /* Muestra el modal */
}

/* Pequeña animación para el contenido del video */
#video-modal .relative.w-full {
  animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* === ANIMACIÓN DEL BÚHO EN EL VIDEO === */
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce-slow {
  animation: bounce-slow 3s ease-in-out infinite;
}


/* ======================================================= */
/* 🎨 NUEVOS ESTILOS PARA LAS TARJETAS DE SERVICIO     */
/* ======================================================= */

.service-card {
  /* Fondo morado principal */
  background-color: #9853ed; /* Tu morado principal */
  /* Color de texto blanco para buena legibilidad */
  color: #ffffff;
  /* Sombra sutil para destacar */
  box-shadow: 0 10px 15px -3px rgba(152, 83, 237, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.service-card:hover {
  /* Sombra más intensa al pasar el mouse */
  box-shadow: 0 20px 25px -5px rgba(152, 83, 237, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ajuste para el modo oscuro: un morado ligeramente más oscuro */
.dark .service-card {
  background-color: #7c3aed;
}

.dark .service-card:hover {
  box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ajustar el color del icono para que contraste bien */
.service-card .text-primary {
  color: #ffffff !important; /* Forzamos el color del SVG a blanco */
}


/* ======================================================= */
/* 🎨 BOTÓN FLOTANTE DE WHATSAPP (TAMAÑO EXTRA GRANDE) */
/* ======================================================= */

.whatsapp-float {
    position: fixed;
    width: 210px; /* ✅ 70px * 3 = 210px */
    height: 210px; /* ✅ 70px * 3 = 210px */
    bottom: 40px; /* Un poco más de espacio desde el borde */
    right: 40px;  /* Un poco más de espacio desde el borde */
    background-color: #25d366; /* Color verde de WhatsApp */
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); /* Sombra más grande para equilibrar */
    z-index: 40;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    /* Añadimos un borde blanco para que resalte */
    border: 4px solid #ffffff; /* Borde un poco más grueso */
}

.whatsapp-float:hover {
    transform: scale(1.05); /* Efecto de aumento más sutil */
}

.whatsapp-float a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.whatsapp-float img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que toda la imagen sea visible */
    border-radius: 50%;
}

/* Responsivo para móviles */
@media (max-width: 640px) {
    .whatsapp-float {
        width: 180px; /* ✅ 60px * 3 = 180px */
        height: 180px; /* ✅ 60px * 3 = 180px */
        bottom: 20px;
        right: 20px;
    }
}

/* ======================================================= */
/* 🎨 ESTILOS PARA EL MODAL DE PLANES DE APOYO ACTUALIZADO  */
/* ======================================================= */

/* Estilos para las tarjetas de fase */
.fase-card {
  background: linear-gradient(135deg, #9853ed 0%, #7c3aed 100%);
  transition: all 0.3s ease;
}

.fase-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(152, 83, 237, 0.4);
}

.fase-header {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.item-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.item-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
}

.numero-fase {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(10px);
}

/* Ajustes para el modo oscuro */
.dark .fase-card {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.dark .fase-header {
  background: rgba(30, 41, 59, 0.3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.dark .item-card {
  background: rgba(30, 41, 59, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .item-card:hover {
  background: rgba(30, 41, 59, 0.3);
}

.dark .numero-fase {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
}

/* Animación de entrada para el modal */
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-pop-in {
  animation: pop-in 0.3s ease-out;
}

/* Estilos para el título con gradiente */
.text-transparent.bg-clip-text.bg-gradient-to-r.from-purple-600.to-blue-600 {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ======================================================= */
/* 🎨 NUEVO DISEÑO AMIGABLE PARA EL MENÚ DESPLEGABLE   */
/* ======================================================= */

.servicios-dropdown-menu {
  /* Posicionamiento y visibilidad (controlado por JS) */
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.75rem; /* Un poco más de espacio */
  width: 22rem; /* Un poco más ancho */
  max-width: 90vw;
  z-index: 100; /* Asegura que esté por encima de todo */

  /* --- ESTILO VISUAL --- */
  background: rgba(255, 255, 255, 0.7); /* Fondo blanco semitransparente */
  backdrop-filter: blur(16px); /* Efecto de desenfoque de fondo (glassmorphism) */
  -webkit-backdrop-filter: blur(16px); /* Para Safari */

  border-radius: 1.5rem; /* Bordes muy redondeados */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil */

  /* Sombras suaves y profundas */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); /* Sombra oscura y difuminada */
  
  /* Transiciones para la animación de apertura/cierre */
  transform-origin: top center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Padding general para dar espacio a los elementos */
  padding: 1rem;
}

/* Estilos para el modo oscuro */
.dark .servicios-dropdown-menu {
  background: rgba(30, 41, 59, 0.8); /* Fondo oscuro semitransparente */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

/* --- ESTILOS DE LOS ENLACES DENTRO DEL MENÚ --- */
.servicios-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Espacio entre icono y texto */
  padding: 0.875rem 1rem; /* Padding generoso */
  border-radius: 1rem; /* Bordes redondeados para cada enlace */
  
  /* Color de texto */
  color: #1e293b; /* slate-800 */
  font-weight: 500;
  
  /* Transición suave para el hover */
  transition: all 0.2s ease-in-out;
}

/* Estilos para los enlaces en modo oscuro */
.dark .servicios-dropdown-menu a {
  color: #f1f5f9; /* slate-100 */
}

/* --- EFECTO HOVER --- */
.servicios-dropdown-menu a:hover {
  background-color: rgba(152, 83, 237, 0.15); /* Fondo morado suave al pasar el mouse */
  color: #7c3aed; /* Texto morado */
  transform: translateX(4px); /* Se mueve un poco a la derecha */
}

.dark .servicios-dropdown-menu a:hover {
  background-color: rgba(152, 83, 237, 0.25);
  color: #a78bfa; /* Morado más claro para el hover en modo oscuro */
}

/* --- ESTILOS PARA TEXTO E ICONOS --- */
.servicios-dropdown-menu .font-medium {
  font-weight: 600; /* Un poco más negrita */
  color: inherit; /* Hereda el color del <a> */
}

.servicios-dropdown-menu .text-sm {
  font-size: 0.875rem;
  color: #64748b; /* slate-500 */
  margin-top: 0.125rem; /* Espacio mínimo entre título y descripción */
}

.dark .servicios-dropdown-menu .text-sm {
  color: #94a3b8; /* slate-400 */
}

.servicios-dropdown-menu .text-cyan-400 {
  color: #06b6d4; /* Color cian para los iconos */
}

/* --- ANIMACIÓN DE APERTURA Y CIERRE (Controlada por JS) --- */
/* El menú está oculto por defecto */
.servicios-dropdown-menu.opacity-0 {
  opacity: 0;
  visibility: hidden; /* Usa visibility en lugar de invisible para mejor transición */
  transform: scale(0.95) translateY(-10px);
  pointer-events: none; /* Evita clics cuando está oculto */
}

/* El menú es visible cuando JS añade la clase */
.servicios-dropdown-menu.opacity-100 {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Transición para la flecha */
#servicios-arrow {
  transition: transform 0.3s ease-in-out;
}

/* Ajuste para el header */
#main-header {
  z-index: 40;
}