/* 
    Créditos: Cristhian Yalle 
    Descripción: Estilos responsivos para el sitio web de la comunidad de desarrolladores Grupo Yalle.
    Fecha: 2025-06-15
    Licencia: MIT License
    Este archivo contiene estilos CSS para hacer que el sitio web sea responsivo y se adapte a diferentes tamaños de pantalla.
*/

/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: 'Arial', sans-serif;*/
    font-family: Poppins, sans-serif;
}

body {
    background-color: #fff;
    color: #000;
    overflow-x: hidden;
}


@font-face {
    font-family: 'renogaresoft-regular';
    src: url('./../fonts/renogaresoft-regular.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

.texto-fuente {
    font-family: "renogaresoft-regular", serif;
}

/*
         color fondo de banner : #420098
         color de texto: #fff
         color texto hover: #fd5efe 
         **/


/*.mega-menu-item:hover {
            color: #ff00ff;
            border-left: 3px solid #ff00ff;
            padding-left: 20px;
        }*/

/* Contenido principal */
.main-content {
    margin-left: 80px;
    padding: 40px;
}

/* Sección hero */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 50px;
    padding: 40px;
}

.hero-text {
    flex: 1;
    max-width: 400px;
    text-align: right;
}

.hero-text h3 {
    font-size: 30px;
    margin-bottom: 20px;
    color: #430099;
}

.hero-text h5 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #430099;
}

.hero-text h1 {
    font-size: 48px;
    margin-bottom: 20px;
    color: #ff00ff;
}

.hero-text h2 {
    font-size: 24px;
    margin-bottom: 30px;
    color: #ccc;
}

.hero-text p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #430099;
}

.hero-text .float {
    width: 100%;
    border-radius: 10px;
    /*box-shadow: 0 0 30px rgba(255, 0, 255, 0.3);*/
    animation: float 3s ease-in-out infinite;
}

.hero-image {
    flex: 1;
    max-width: 500px;
}

.hero-image img {
    width: 100%;
    border-radius: 10px;
    /*box-shadow: 0 0 30px rgba(255, 0, 255, 0.3);*/
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}