/* =======================================
   FONDOS Y SECCIONES
   ======================================= */

/* 1. HERO (Sin cambios) */
/* BORRA ESTO DE TU CSS SI YA USASTE EL HTML DE ARRIBA */
/* 1. IMPORTANTE: Esto va en la línea 1 de tu CSS para cargar la letra */
@import url('https://fonts.googleapis.com/css2?family=Poltawski+Nowy:ital,wght@0,400..700;1,400..700&display=swap');

/* ... (aquí va el resto de tu CSS que ya tenías) ... */
/* ESTILO PARA LA ENTRADA (TÍTULO PRINCIPAL) */
/* 1. Definimos la animación (Muévete de abajo hacia arriba y aparece) */
@keyframes entradaTriunfal {
    0% {
        opacity: 0;
        transform: translateY(60px); /* Empieza 60px más abajo */
    }
    100% {
        opacity: 1;
        transform: translateY(0);    /* Termina en su posición original */
    }
}

@keyframes titleFloat {
    0%, 100% { 
        transform: translateY(0) scale(1);
        text-shadow: 0 4px 12px rgba(46, 26, 95, 0.1);
    }
    50% { 
        transform: translateY(-3px) scale(1.01);
        text-shadow: 0 5px 14px rgba(46, 26, 95, 0.12);
    }
}

/* 2. Tu clase con la animación aplicada */
.hero-description {
    /* --- TUS ESTILOS VISUALES (Se mantienen igual) --- */
    font-family: 'Poltawski Nowy', serif !important;
    font-size: 3.8rem; 
    font-weight: 600;  
    color: #421D9D;
    text-align: center;
    line-height: 1.1;  
    max-width: 2000px; 
    width: 100%;       
    margin: 40px auto; 
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5); 

    /* --- AQUÍ ESTÁ LA ANIMACIÓN DE ENTRADA QUE PEDISTE --- */
    opacity: 0; /* IMPORTANTE: Empieza invisible para no parpadear */
    animation: entradaTriunfal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards, titleFloat 3s ease-in-out 1.5s infinite; 
    /* 1.5s de duración con un efecto de "frenado" suave al final */
}

@media (max-width: 1366px) {
    .hero-description {
        font-size: 3rem;
        max-width: 1200px;
        margin: 30px auto;
    }
}

/* Ajuste para celular */
@media (max-width: 768px) {
    .hero-description {
        font-size: 1.4rem; 
        line-height: 1.5;
        animation-duration: 1s; /* Un poco más rápido en celular */
    }
}
.bg-hero-gradient {
    background: linear-gradient(123.79deg, rgba(250, 255, 254, 0) 50.71%, rgba(255, 255, 255, .2) 52.17%),
        linear-gradient(280.42deg, rgba(59, 188, 168, .18) 13.12%, rgba(255, 251, 251, .2) 45.24%),
        linear-gradient(101.84deg, rgba(59, 188, 168, .58) 18.18%, rgba(238, 249, 247, .6) 46.15%);
}
/* =======================================
   FONDO ANIMADO (ELEMENTOS FLOTANTES)
   ======================================= */

/* 1. Fondo Base (Degradado Verde Unificado) */
.unified-section {
    background: linear-gradient(111.98deg, rgba(250, 255, 254, 0) 25.94%,
            rgba(255, 255, 255, 0.2) 32.44%), linear-gradient(280.42deg,
            rgba(255, 251, 251, 0.2) 13.38%, rgba(59, 188, 168, 0.176) 43.9%),
        linear-gradient(101.84deg, rgba(59, 188, 168, 0.072) 6.29%,
            rgba(126, 242, 224, 0.6) 28.51%,
            rgba(238, 249, 247, 0.6) 43.95%);
    background-size: cover;
    background-attachment: fixed;
}

/* 2. Estilos Generales de los Iconos */
.medical-icon {
    position: absolute;
    color: #ffffff;    /* Color Blanco */
    opacity: 0;        /* Empiezan invisibles */
    z-index: 0;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); /* Brillo suave */
    
    /* Animación: Nombre | Duración | Infinito | Suave */
    animation: floatFade 8s infinite ease-in-out;
}

/* 3. Definición de la Animación "Aparecer - Flotar - Desaparecer" */
@keyframes floatFade {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8) rotate(0deg);
    }
    50% {
        opacity: 0.25; /* Máxima visibilidad (suave) */
        transform: translateY(0px) scale(1) rotate(10deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8) rotate(0deg);
    }
}

/* 4. Posiciones y Retardos (Para que no aparezcan todos juntos) */

/* Arriba Izquierda - Grande */
.icon-1 { top: 10%; left: 5%; font-size: 5rem; animation-delay: 0s; }

/* Arriba Derecha - Medio */
.icon-2 { top: 15%; right: 10%; font-size: 4rem; animation-delay: 4s; }

/* Centro Izquierda - Pequeño */
.icon-3 { top: 40%; left: 15%; font-size: 3rem; animation-delay: 2s; }

/* Centro Derecha - Grande */
.icon-4 { top: 50%; right: 20%; font-size: 6rem; animation-delay: 6s; }

/* Abajo Izquierda - Medio */
.icon-5 { bottom: 20%; left: 8%; font-size: 4.5rem; animation-delay: 1s; }

/* Abajo Centro - Pequeño */
.icon-6 { bottom: 10%; left: 50%; font-size: 3rem; animation-delay: 5s; }

/* Muy arriba centro - Decorativo */
.icon-7 { top: 5%; left: 45%; font-size: 2.5rem; animation-delay: 3s; }

/* Abajo Derecha */
.icon-8 { bottom: 15%; right: 5%; font-size: 5rem; animation-delay: 7s; }


/* =======================================
   TARJETAS GLASS (Para proteger el texto)
   ======================================= */
.glass-card {
    background: rgba(255, 255, 255, 0.85); /* Un poco más transparente */
    backdrop-filter: blur(10px);
    border-radius: 40px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 40px rgba(46, 26, 95, 0.1);
    transition: transform 0.3s ease;
}
.glass-card:hover { transform: translateY(-5px); }

/* --- RESTO DE ESTILOS (Sin cambios) --- */
/* (Mantén aquí los estilos de Stacked Cards, Navbar, etc. que ya tenías) */
.stacked-circle-card { 
    position: relative; 
    width: 100%;
    max-width: 320px;
    height: 420px; 
    display: flex; 
    justify-content: center; 
    transition: transform 0.3s ease;
    margin: 0 auto;
}

.stacked-circle-card:hover { 
    transform: translateY(-10px); 
}

.circle-purple-bg { 
    position: absolute; 
    top: 15px; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100%;
    max-width: 300px;
    height: 400px; 
    background-color: #2E1A5F; 
    border-radius: 50%; 
    z-index: 1; 
    box-shadow: 0 15px 30px rgba(46, 26, 95, 0.2); 
    transition: all 0.3s ease; 
}

.stacked-circle-card:hover .circle-purple-bg { 
    background-color: #3BBCA8; 
    box-shadow: 0 20px 40px rgba(59, 188, 168, 0.4); 
}

.circle-white-content { 
    position: relative; 
    width: 100%;
    max-width: 300px;
    height: 400px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    z-index: 2; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
    text-align: center; 
    border: 1px solid rgba(0, 0, 0, 0.05); 
}

.inner-img-container { 
    width: 200px; 
    height: 150px; 
    margin-bottom: 10px; 
    border-radius: 20%; 
    overflow: hidden; 
    border: 2px solid #f0f0f0; 
}

.inner-img-container img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.card-title { 
    color: #2E1A5F; 
    font-weight: 800; 
    font-size: 1.1rem; 
    margin-bottom: 5px; 
    text-transform: uppercase; 
}

.card-divider { 
    width: 30px; 
    height: 3px; 
    background-color: #3BBCA8; 
    margin-bottom: 10px; 
    border-radius: 10px; 
}

.card-text { 
    font-size: 0.85rem; 
    color: #666; 
    line-height: 1.3; 
    max-width: 220px; 
}

/* Responsive para valores/valores */
@media (max-width: 768px) {
    .stacked-circle-card {
        width: 100%;
        max-width: 280px;
        height: 380px;
    }

    .circle-purple-bg {
        width: 100%;
        max-width: 260px;
        height: 360px;
    }

    .circle-white-content {
        width: 100%;
        max-width: 260px;
        height: 360px;
    }

    .inner-img-container {
        width: 150px;
        height: 120px;
    }

    .card-title {
        font-size: 1rem;
    }

    .card-text {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .stacked-circle-card {
        width: 100%;
        max-width: 240px;
        height: 340px;
        margin: 0 auto 20px;
    }

    .circle-purple-bg {
        width: 100%;
        max-width: 220px;
        height: 320px;
        top: 10px;
    }

    .circle-white-content {
        width: 100%;
        max-width: 220px;
        height: 320px;
        padding: 15px;
    }

    .inner-img-container {
        width: 120px;
        height: 90px;
        margin-bottom: 8px;
    }

    .card-title {
        font-size: 0.9rem;
        margin-bottom: 3px;
    }

    .card-divider {
        margin-bottom: 8px;
    }

    .card-text {
        font-size: 0.75rem;
        max-width: 180px;
    }
}
.image-wrapper { position: relative; z-index: 10; }
.main-web-image { width: 100%; border-radius: 50px; box-shadow: 0 25px 50px -12px rgba(46, 26, 95, 0.15); transition: transform 0.5s ease; }
.main-web-image:hover { transform: scale(1.02) translateY(-5px); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.animate-on-scroll { opacity: 0; }
.is-visible { animation: fadeInUp 0.8s ease-out forwards; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; }
.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; background: #25d366; color: #fff; border-radius: 50%; font-size: 2rem; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 6px 22px rgba(37, 211, 102, .45); z-index: 999; transition: .3s; }
.whatsapp-float:hover { transform: scale(1.1); }