/** ==============================================================================================================================================
 * Estilos Generales para sitio
 * ==============================================================================================================================================
 */

/** ==============================================================================================================================================
 * I. Colores
 */
 :root{
    /* Blancos del sitio */
    --blanco: #FFFFFF;
    --blanco_opaco: #E8E8E8;
  
    /* Fuentes */
    --fuente_principal: #1C1C1C;
    --fuente_blanco: #E8E8E8;
  
    /* negro */
    --negro-suave: #1C1C1C;
  
    /* Varios */
    --magenta: #FF0055;
    --cian: #36b3c9;
    --dorado: #FFC400;
    --verde: #4CAF50;
    --verde_wsp: #25d366;
    --rojo: #8E0B0B;
    --negro_transparente: rgba(0, 0, 0, 0.6);
}
/** ==============================================================================================================================================
 * II. Estilos Generales
 */
.section_container{
    transition: all 0.5s;
}
.seccion_head_bottom{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.seccion_head h2{
    text-transform: uppercase;
}
.contenedor_imagen{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contenedor_imagen img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para que encaje perfectamente */
    object-position: center; /* Centra la parte visible de la imagen */
}
.contenedor_imagen a{
    position: relative;
    transition: all 1s;
}
.contenedor_imagen span{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    text-align: center;
    z-index: 2;
    display: none;
    transition: all 1s;
}
.contenedor_imagen .pantalla_negro_transparente{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--negro_transparente) !important;
    display: none;
    transition: all 1s;
}
.nav_principal button,
.nav_secundario button{
    background-color: transparent;
    border: none;
    color: var(--blanco);
}
.navbar_movil button{
    background-color: transparent;
    border: none;
    color: #231F20;
}
.seccion_contenido_texto_left h1,
.seccion_contenido_texto_left h2,
.seccion_contenido_texto_right h2{
    font-weight: bold;
    margin-bottom: 1.1em;
}
.seccion_contenido_texto_left p,
.seccion_contenido_texto_right p{
    font-size: 1.1em;
}
#home .pre-titulo-home{
    color: #FF0055;

}
#home h2{
    font-size: 250%;
    font-weight: bold;
}
#home .sub-titulo{
    font-weight: bold;
}
#home .texto-cuerpo{
    text-align: justify;
    color: #4d4d4d;
    margin-bottom: 3em;
}
/** ==============================================================================================================================================
 * IV. Menu secciones
 */
 .menu_secciones {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
    justify-content: center;
}

.menu_secciones li {
    position: relative;
    width: 250px; /* Ajusta según necesidad */
    height: 250px; /* Ajusta según necesidad */
    overflow: hidden;
}

.menu_secciones li img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.menu_secciones li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: white;
    position: relative;
    z-index: 2;
    flex-direction: column;
}

.contenido_menu_secciones {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 20px;
    z-index: 3;
    padding: 5%;
}

.contenido_menu_secciones h4 {
    font-size: 1.5rem;
    margin: 0;
    position: relative;
    z-index: 4;
    font-weight: bold;
}

.contenido_menu_secciones p {
    font-size: 1rem;
    margin: 10px 0 0;
    opacity: 0;
    height: 0;
}

.menu_secciones li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: all 0.5s;
    z-index: 2;
}

.menu_secciones li:hover::before,
.menu_secciones li:hover .contenido_menu_secciones p {
    opacity: 1;
}
.menu_secciones li:hover .contenido_menu_secciones p{
    height: auto;
    transition: all 0.5s;
}
.contenido_menu_secciones_carta{
    background-color: rgb(255, 255, 255, 0.5);
    padding: 5%;
}
.contenido_menu_secciones_carta h4{
    color: var(--magenta);
}
.contenido_menu_secciones_carta p{
    color: var(--fuente_principal);
}

/** ==============================================================================================================================================
 * V. contacto_wsp
 */
#contacto_wsp{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}
#contacto_wsp h2{
    font-size: 300%;
    font-weight: bold;
    text-align: center;
}
#contacto_wsp h3{
    margin-bottom: 1em;
    text-align: center;
}
#contacto_wsp a{
    text-decoration: none;
    text-align: center;
}


@media (min-width: 1200px) {
    .elemento_movil{
        display: none;
    }
    .seccion_head h2{
        font-size: 200%;
    }
    .seccion_head{
        padding-top: 3%;
    }
    #merch .seccion_head,
    #graficas .seccion_head,
    #eventos .seccion_head,
    #diseño_marketing .seccion_head{
        padding-top: 7% !important;
    }
    #home .seccion_contenido{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #home .seccion_contenido:nth-child(even) {
        flex-direction: row-reverse; /* Invierte los elementos hijos solo en pares */
    }
    #home .seccion_contenido_texto{
        width: 50%;
        text-align: justify;
    }
    #home .seccion_contenido:nth-child(even) .seccion_contenido_texto{
        padding-left: 5%;
    }
    #home .seccion_contenido:nth-child(odd) .seccion_contenido_texto{
        padding-right: 5%;
    }
}
/* Media Query para pantallas de 1199px o menos */
@media (max-width: 1199px) {
    .elemento_escritorio{
        display: none;
    }
    #nuestros_productos{
        display: none;
    }
    #menu_home .seccion_head{
        padding: 10% 0 0 0;
    }
    .seccion_head{
        padding: 15% 5% 0 5%;
    }
    #home .seccion_contenido:nth-child(even){
        padding-bottom: 15% !important;
    }
}