/* Variables */
:root {
    --primario: #1928af;
    --secundario: #ebd511;
    --primario-oscuro: #121d7e;
    --secundario-oscuro: #f0c60c;
    --fondo: #f0f0f0;
    --blanco: #ffffff;
    --negro: #000000;
    --sombra: rgba(0, 0, 0, 0.3);
}

/* Globales */
html {
    box-sizing: border-box;
    font-size: 62.5%;
    font-family: 'Krub', sans-serif;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-size: 1.6rem;
    line-height: 2;
    margin: 0%;
    background-color: var(--fondo);
}
.contenedor {
    width: min(90%, 120rem);
    margin: 0 auto;
}
a {
    color: var(--negro);
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
h1, h2 {
    text-align: center;
}

/* Navegador */

#navegador {
    display: flex;
    justify-content: space-between;
    background-color: var(--blanco);
    border-bottom: 0.1rem solid var(--secundario);
    
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    transition: top 0.5s;
}

.navegador-links-in {
    display: flex;
    justify-content: space-between;
}

.navegador-links-in a{
    display: flex;
    justify-content: space-evenly;
    margin: 1rem 1.5rem;
    padding: 0rem;
    font-weight: bold;
}
.navegador-links-in a:hover {
    color: var(--primario);
    background-color: var(--fondo);
    padding: 1rem;
    margin: 0rem 0.5rem;
}
.navegador-links-in .navegador-logo:hover {
    background-color: var(--blanco);
}

/* Navegador-Responsivo */
@media (max-width: 780px) {
    .navegador-links-in a {
        margin: 1rem 0.5rem 1rem 1rem;
    }
}

/* Fondo Header*/
.fondo {
    background-image: url(../img/FRONTIS-1-scaled.jpg);
    background-size: cover;
    background-position: center;
}

.fondo-contenedor {
    background-color: var(--sombra);
    display: flex;
    justify-content: space-evenly;
    padding: 10rem;
}
.fondo-sombra {
    background-color: var(--sombra);
}

.fondo-izquierda {
    color: var(--blanco);
}
.fondo-izquierda a {
    background-color: var(--secundario);
    margin: 1rem 16rem 0rem 14rem;
    padding: 1rem 4rem;
    border-radius: 1rem;
}

.fondo-derecha {
    margin: 1rem;
    padding: 1rem;
    background-color: var(--secundario);
    border-radius: 1rem;
}
.fondo-derecha-contenido {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#email1 {
    display: block;
    margin: 0rem;
    padding: 1rem 30rem 1rem 1rem;
}
#inscripcion1 {
    padding: 1rem;
    background-color: var(--primario);
    border: 0.2rem solid var(--primario-oscuro);
    margin: 0rem;
    margin-top: 1rem;
}
#inscripcion1:active {
    background-color: var(--primario-oscuro);
}

/*Fondo-Responsividad*/
@media (max-width: 780px) {
    .fondo-contenedor {
        flex-direction: column;
        padding: 5rem;
    }
    .fondo-izquierda a {
        margin: 1rem 8rem 0rem 8rem;
    }
    .fondo-derecha{
        padding: 2rem;
        margin: 2rem 0rem;
    }
    #email1 {
        margin: 0rem;
        padding: 1rem 4rem 1rem 1rem;
    }
}


/* Publicaciones */

main .contenedor {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.publicaciones {
    background-color: var(--blanco);
    border-radius: 1rem;
    padding: auto;
    margin: 2rem;
    max-width: 30rem;
    text-align: center;
    box-shadow: 0px 7px 15px var(--secundario-oscuro);
}

.agrandar{
    /* Transision para agrandar y achicar */
    -webkit-transition: all .5s ease; /* Safari y Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -o-transition: all .5s ease; /* IE 9 */
    -ms-transition: all .5s ease; /* Opera */
}

/* Agrandar item cuando el mouse este encima */
.agrandar:hover {
    -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    -ms-transform:scale(1.05);
    -o-transform:scale(1.05);
    transform: scale(1.05);
}

.publi-img img{
    margin: 0rem;
    padding: 0rem;
    width: 100%;
    height: calc(100% - 60px);
    object-fit: contain;  
}

/* Publicaciones-Responsivas */
@media (max-width: 780px) {
    .publicaciones {
        margin-left: 2.6rem;
    }
}

/* Formulario */
#form {
    background-color: var(--primario-oscuro);
    padding: 2rem;
    margin: 10rem;
    border-radius: 2rem;
    text-align: center;
    box-shadow: 0px 5px 15px var(--secundario-oscuro);
}
#form p, #form h3, #form label {
    color: var(--fondo);
} 
.form {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* Formulario-Responsivo */
@media (max-width: 780px) {
    #form {
        margin: 6.5rem 3rem;
        padding: 2rem 5rem;
    }
}

/* Footer */
footer p {
    margin: 0rem 0rem 1.5rem 1.2rem;
}


/* Publicacion */
.publicacion {
    background-color: var(--blanco);
    border-radius: 1rem;
    margin: 2rem;
    padding: auto;
    padding-top: 1rem;
    box-shadow: 0px 7px 15px var(--sombra);
}

.publi-contenedor{
    margin: 1rem 3rem 3rem 3rem;
    padding-bottom: 1rem;
}
hr {
    margin: 4rem 1rem;
}
.separacion {
    margin-left: 2rem;
}

/* Publicacion-Responsiva */
@media (max-width: 780px) {
    .publi-contenedor p{
        font-size: 1.2rem;
    }
    .centrar {
        text-align: justify;
    }
}
@media (min-width: 780px) {
    .salto-responsivo {
        display: none;
    }
}



/* Videos */
.video {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 4rem 2.5rem 4rem 13rem;
    padding: 2rem;
    width: 80%;

    /* Fondo */
    background-color: var(--blanco);
    box-shadow: 0px 7px 15px var(--sombra);
    border-radius: 2rem;
}
.video-img {
    width: 50%;
    margin-right: 2rem;
}
.video-img img{
    margin: 0rem 2rem 2rem 2rem;
    padding: 0rem;
    width: 100%;
    height: 100%;
    object-fit: contain; 
}
.video-texto {
    margin-left: 2rem;
}
.video-img > #video-img1 {
    max-width: 65%;
    margin-left: 8rem;
}
.video-img > #video-img2 {
    max-width: 80%;
    margin-left: 5rem;
}
.video-img > #video-img3 {
    max-width: 60%;
    margin-left: 8rem;
}

/* Videos-Responsivos */
@media (max-width: 780px) {
    .video {
        flex-direction: column;
        margin-left: 4rem;
        text-align: center;
    }
    .video-img {
        width: 100%;
    }
    .video-img img {
        margin-left: 0rem;
        margin-bottom: 0.5rem;
    }
    .video-texto {
        margin-left: 0rem;
    }
    .video-img > #video-img1 {
        max-width: 80%;
        margin-left: 3rem;
    }
    .video-img > #video-img2 {
        max-width: 100%;
        margin-left: 0rem;
    }
    .video-img > #video-img3 {
        max-width: 80%;
        margin-left: 2rem;
    }
    
}



/* Contacto */
#contacto {
    background-color: var(--primario-oscuro);
    padding: 2rem;
    margin: 2rem 10rem 2rem 2rem;
    border-radius: 2rem;
    box-shadow: 0px 5px 15px var(--secundario-oscuro);
    color: var(--fondo);
}
.contacto {
    display: flex;
    flex-direction: column;
}
.contacto textarea {
    max-width: 100%;
    min-width: 50%;
    max-height: 250px;
    min-height: 45%;
}

#contacto-name, #contacto-email {
    padding: 1rem 3rem 1rem 1rem;
    margin-bottom: 1rem;
}

#contacto-boton {
    padding: 0.5rem 3rem;
    margin: 0.5rem 15rem;
    background-color: var(--secundario-oscuro);
    border: 0.3rem solid var(--secundario);
}
#contacto-boton:hover {
    background-color: var(--secundario);
    border: 0.3rem solid var(--secundario-oscuro);
}

/* Contacto-Responsivo */
@media (max-width: 780px) {
    #contacto {
        text-align: center;
        margin: 2rem;
    }
    #contacto-boton {
        margin: 0.5rem 5rem;
    }
    
    .contacto textarea {
        min-width: 100%;
        max-height: 250px;
        min-height: 42.5%;
    }
}