/* Importar una fuente bonita */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    /* Colores base para el tema claro */
    background-color: #E3F3FE;
    color: #485157;
}

/* Efecto de desenfoque de fondo (glassmorphism) para tema claro */
.glass-effect {
    background: rgba(240, 245, 250, 0.7); /* Color base gris azulado y opacidad del 70% */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(66, 141, 209, 0.2);
}

/* Texto con degradado (ajustado para mayor contraste) */
.gradient-text {
    background: linear-gradient(135deg, #428DD1, #485157);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Efecto de brillo sutil */
.glow-effect {
    filter: drop-shadow(0 0 15px rgba(210, 236, 255, 0.9));
}

/* Fondo de la sección Héroe con superposición clara */
.hero-bg {
    background-image: linear-gradient(rgba(227, 243, 254, 0.4), rgba(201, 229, 250, 0.5)), url('imagenes/head.png');
}

/* Estilos para los enlaces de navegación y botones */
.nav-link { color: #485157; transition: color 0.3s ease; background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: 500; }
.nav-link:hover { color: #428DD1; }
.btn { padding: 0.75rem 2rem; font-weight: 600; border-radius: 0.75rem; transition: all 0.3s ease; }
.btn:hover { transform: scale(1.05); }
.btn-primary { color: white; background: #428DD1; }
.btn-primary:hover { background: #3575b0; }
.btn-secondary { border: 2px solid #428DD1; color: #428DD1; background-color: transparent; }
.btn-secondary:hover { background-color: #428DD1; color: white; }
.about-card { transition: transform 0.3s ease; }
.about-card:hover { transform: scale(1.05); }

/* Nuevo estilo para el fondo de las tarjetas del equipo */
.team-card-bg {
    /* --- IMPORTANTE: Cambia la ruta a tu imagen --- */
    background-image: 
        /* Capa de color para atenuar la imagen (blanco con 85% de opacidad) */
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        /* Tu imagen de fondo */
        url('imagenes/fondoTeam.jpg');
    background-size: cover; /* Para que la imagen cubra toda la tarjeta */
    background-position: center; /* Para centrar la imagen */
    border: 1px solid rgba(66, 141, 209, 0.2); /* Mantenemos un borde sutil */
}

/* Estilos para los campos del formulario */
.contact-input { 
    width: 100%; 
    background-color: #FFFFFF; 
    border: 1px solid #D2ECFF; 
    color: #485157; 
    padding: 0.75rem 1rem; 
    border-radius: 0.5rem; 
    transition: border-color 0.3s;
}
.contact-input::placeholder {
    color: #485157A0;
}
.contact-input:focus { 
    outline: none; 
    border-color: #428DD1; 
}

/* Animaciones */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animated-chevron { animation: bounce 2s infinite; }
@keyframes scale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.animated-logo { animation: scale-pulse 3s infinite ease-in-out; }

/* ---- ESTILOS PARA EL DESPLEGABLE DEL EQUIPO ---- */
.team-section-toggle {
    cursor: pointer;
}
.collapsible-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out, padding 0.5s ease-out;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid transparent;
}
.collapsible-content.open {
    max-height: 2000px;
    opacity: 1;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top-color: #D2ECFF;
}
.chevron-icon {
    transition: transform 0.3s ease;
}
.chevron-icon.open {
    transform: rotate(180deg);
}

/* ---- PARA REDES FOOTER ---- */
.footer-icon {
    display: inline-block;
    padding: 0.5rem; /* 8px */
    color: #428DD1; /* Color del icono */
    background-color: #E3F3FE; /* Fondo claro */
    border-radius: 9999px; /* Para hacerlo un círculo perfecto */
    transition: all 0.3s ease;
    border: 1px solid #D2ECFF; /* Un borde sutil */
}
.footer-icon:hover {
    transform: scale(1.1);
    background-color: #D2ECFF; /* Color de fondo al pasar el ratón */
    color: #3575b0; /* Color del icono al pasar el ratón */
}

/* ---- EFECTO HOLOGRÁFICO PARA EL BOTÓN DE CONTACTO ---- */
#contact .btn-primary {
    position: relative;
    background: linear-gradient(45deg, #428DD1, #428DD1, #3575b0, #3575b0);
    background-size: 200% 200%;
    animation: holographicGlow 8s ease infinite;
    color: white;
    text-shadow: 0 0 10px rgba(0, 187, 255, 0.7), 0 0 20px rgba(66, 141, 209, 0.5);
    box-shadow: 0 0 15px rgba(0, 187, 255, 0.7), 0 0 30px rgba(66, 141, 209, 0.3);
}

#contact .btn-primary:hover {
    transform: scale(1.2);
    background-position: 100% 100%;
}

@keyframes holographicGlow {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}