/* Estilos generales */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #f3f4f6, #e8eaed); /* Fondo degradado */
            color: #333333;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        h1, h2, h3 {
            font-family: 'Montserrat', sans-serif;
        }

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #6c63ff, #6fb9ff); /* Fondo morado */
    color: #ffffff;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
    position: relative;
    overflow: hidden;
}

/* Imagen de fondo con opacidad */
.hero .background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/fondo01.jpg'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    opacity: 0.7; /* Opacidad de la imagen */
    z-index: 1; /* Debajo del contenido */
}

/* Contenido principal */
.hero h1, .hero p, .hero .btn {
    position: relative;
    z-index: 2; /* Encima de la imagen */
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

/* Botón con estilo */
.hero .btn {
    padding: 1rem 2.5rem;
    background-color: rgba(0, 0, 0, 0.2); /* Caja negra con opacidad */
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.hero .btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: #333333;
}

/* Caja negra con contenido en hero */
.hero .content-box {
    position: relative;
    z-index: 2; /* Encima de la imagen */
    background-color: rgba(0, 0, 0, 0.7); /* Caja negra con opacidad */
    padding: 2rem 3rem;
    border-radius: 20px; /* Esquinas redondeadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Sutil sombra */
    text-align: center;
}


        /* Sección características */
        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 4rem 2rem;
            background-color: #ffffff;
            border-top-left-radius: 20% 10%;
            border-top-right-radius: 20% 10%;
        }

        .feature-box {
            width: 280px;
            text-align: center;
            margin: 1rem;
            padding: 2rem;
            background: linear-gradient(135deg, #ffffff, #f3f4f6);
            border-radius: 20px;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
        }

        .feature-box h3 {
            margin-top: 1.5rem;
            font-size: 1.5rem;
            color: #333333;
            opacity: 0.9;
        }

        .feature-box p {
            margin-top: 1rem;
            font-size: 1rem;
            color: #555555;
            opacity: 0.7;
        }

        .feature-box .icon {
            font-size: 4rem;
            background: linear-gradient(135deg, #6c63ff, #6fb9ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1rem;
        }

        /* Paneles Informativos */
        .info-panel {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 2rem;
            margin: 2rem 0;
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .info-panel:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
        }

        .info-panel .icon {
            font-size: 3rem;
            margin-right: 1rem;
            color: #6c63ff; /* Color que va con el tema general */
        }

        .info-panel h3 {
            font-size: 1.8rem;
            color: #333333;
            margin-bottom: 0.5rem;
        }

        .info-panel p {
            font-size: 1rem;
            color: #555555;
            line-height: 1.5;
        }

        /* Contacto */
        .contact {
            background: linear-gradient(135deg, #6fb9ff, #6c63ff);
            color: #ffffff;
            padding: 3rem 2rem;
            text-align: center;
        }

        .contact h2 {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            opacity: 0.9;
        }

        .contact form {
            max-width: 600px;
            margin: auto;
        }

        .contact input, .contact textarea {
            width: calc(100% - 2rem);
            margin: 0.5rem 0;
            padding: 1rem;
            border: none;
            border-radius: 10px;
            outline: none;
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        .contact button {
            background-color: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            border: 2px solid #ffffff;
            padding: 1rem 2rem;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .contact button:hover {
            background-color: rgba(255, 255, 255, 0.5);
            color: #333333;
        }

        /* Footer */
	footer {
        background: linear-gradient(135deg, #333333, #555555);
        color: #ffffff;
        padding: 1.5rem 1rem;
        font-family: 'Poppins', sans-serif;
        font-size: 0.9rem;
        text-align: center;
    }

    .footer-compact {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .footer-links a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .footer-links a:hover {
        color: #6fb9ff;
    }

    .footer-info, .footer-copy {
        color: rgba(255, 255, 255, 0.7);
    }

    .footer-info a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .footer-info a:hover {
        color: #6fb9ff;
    }

    .footer-copy {
        font-size: 0.8rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }
    /* Estilos para la superposición de fondo */
    .popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    /* Estilos para la ventana emergente */
    .popup {
        background: #ffffff;
        padding: 2rem;
        border-radius: 10px;
        max-width: 600px;
        width: 90%;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        position: relative;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            transform: scale(0.8);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Botón para cerrar */
    .close-popup {
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        border: none;
        font-size: 1.5rem;
        font-weight: bold;
        cursor: pointer;
        color: #555555;
        transition: color 0.3s ease;
    }

    .close-popup:hover {
        color: #6c63ff;
    }

    /* Contenido de la ventana emergente */
    .popup-content {
        max-height: 70vh;
        overflow-y: auto;
        font-size: 1rem;
        color: #333333;
        line-height: 1.5;
    }
/* Estilos para la ventana emergente */
.popup-content {
    max-height: 70vh;
    overflow-y: auto;
    font-size: 1rem;
    color: #333333;
    line-height: 1.5;
    scrollbar-width: thin; /* Para navegadores basados en Firefox */
    scrollbar-color: #6c63ff #f3f4f6; /* Color del scroll y fondo */
}

/* Estilo para navegadores basados en WebKit (Chrome, Edge, Safari) */
.popup-content::-webkit-scrollbar {
    width: 10px; /* Ancho del scrollbar */
}

.popup-content::-webkit-scrollbar-track {
    background: #f3f4f6; /* Color del fondo del scrollbar */
    border-radius: 10px; /* Bordes redondeados */
}

.popup-content::-webkit-scrollbar-thumb {
    background: #6c63ff; /* Color del "dedo" del scrollbar */
    border-radius: 10px; /* Bordes redondeados */
    border: 2px solid #f3f4f6; /* Espacio alrededor del dedo */
}

.popup-content::-webkit-scrollbar-thumb:hover {
    background: #5649d6; /* Color más oscuro al pasar el mouse */
}

        /* Estilo para el círculo que rodea solo el número de mensajes */
        .circle {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: green;
            color: white;
            text-align: center;
            font-weight: bold;
            line-height: 30px;
            margin-right: 10px;
        }