/* Estilos generales */
html, body {
    height: 100%;
}

/* Modificar el modelo de cajas CSS*/
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* Resetear márgenes y padding */
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}

.container {
    width: 90vw;
    max-width: 1366px;
    margin: 0 auto;
}

/* ESTILOS DE LOS CONTENIDOS */
/* Estilos del header */


header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#intro .material-symbols-outlined,  
#info-contacto .material-symbols-outlined {
    color: #fff;
    margin: 0 15px; 
}

#info-contacto a {
    display: inline-block; /*los enlaces <a> son, por defecto, elementos inline. Las transformaciones (transform) y algunas animaciones no se comportan correctamente sobre elementos inline. Haz que los enlaces sean inline-block*/
}

#info-contacto a:hover {
    animation: salto 1s ease-in-out 1 alternate-reverse;
}

@keyframes salto {
    0%, 100% {transform: translateY(0px);}
    50% {transform: translateY(-5px)}
}

h2 {
    margin-bottom: 20px;
    font-size: 1.6rem;
   
}

/* Sección 1 - Intro */

.hero {
    background-image:
        linear-gradient(to left top,
            rgba(55,185,30,.83),
            rgba(22,59,240,.83)),
        url("../images/fondo_superior.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

#intro {
    display: flex;                  /* Convierte el contenedor en un contenedor Flexbox */
    justify-content: space-between; /* Coloca el primer elemento a la izquierda y el último a la derecha, repartiendo el espacio libre entre ellos */
    align-items: center;            /* Centra verticalmente los elementos dentro del contenedor */
    min-height: 80vh;              /* Establece una altura mínima de 600 píxeles */
    padding: 50px 0;                /* Añade un espacio interno de 50px arriba y abajo, y 0 a los lados */
    flex-flow: row wrap;
}

#descripcion {
    flex-basis: 60%; /* Establece un tamaño inicial del 60% del ancho del contenedor Flexbox */
    padding: 0 5% 0 0;
    flex-grow: 2; /* La columna se expande ocupando los espacios en blanco disponibles*/
    color: #fff;
}

#formulario {
    flex-basis: 30%; /* Establece un tamaño inicial del 30% del ancho del contenedor Flexbox */
    background-color: rgba(0,0,0,0.8);
    padding: 20px 1em;
    color: #fff;
}

h1 {
    font-size: 2.80rem;
    margin-bottom: 25px;
}

#descripcion p {
    margin-bottom: 25px;
    line-height: 1.25;
}

#formulario h2 {
    font-size: 1.6em;
    margin-bottom: 25px;
}

label {
    display: block;
    margin: 10px 0;
    font-size: 0.9em;
}

input[type="text"], input[type="email"] {
    display: inline-block;
    width: 100%;
    height: 45px;
    padding: 0 1em;
    margin: 5px 0;
    border: 1px solid #ccc;
}

input[type="submit"] {
    display: inline-block;
    border: none;
    background-color: #008000;
    color: #fff;
    width: 100%;
    padding: 10px 1em;
    margin: 25px auto;
    font-size: 1.2em;
}

input[type="submit"]:hover {
    opacity: 0.8;
}

#descripcion span {
    font-size: 0.90rem;
    border: 1px, solid;
    border-radius: 50%;
    padding: 5px;
    background-color: #fff;
    color: #008000 !important;
    font-weight: 600;
}

small a {
    color: #fff;
}


/* Sección 2 - Información*/

#informacion {
    padding: 8vh 0;
    display: flex;
    flex-flow: row wrap; /* Coloca los elementos en fila y permite que pasen a otra línea si no caben. Abreviatura de flex-direction y flex-wrap */
    justify-content: space-between;
    text-align: center;
}

#informacion span {
    color: #13a3db;
    font-size: 2.50rem;
    border: 1px solid;
    border-radius: 50%;
    padding: 48px 0;
    width: 130px;
    height: 130px;
    margin-bottom: 3vh;
}

#informacion h3 {
   color: #13a3db; 
   font-size: 1.10rem;
   font-weight: 500;
   margin-bottom: 5vh;
}

/* Sección 3 - Temario */
#temario {
    background-color: #f6f9fd;
    padding: 40px 0;
}

#info-temario {
    display: flex;
    gap: 2rem;
}

#info-temario > div {
    flex: 1.5;
    padding-right: 3%;
}

#info-temario video {
    flex: 1;
    width: 100%;
    height: auto;
}

#info-temario a {
    display: inline-block;
    background-color: #008000;
    padding: 12px 10em;
    text-decoration: none;
    color:#fff;
    margin: 25px 0;

}

#info-temario a:hover {
    opacity: 0.8;
}


/*Sección 4- Equipo */
#equipo {
    padding: 40px 0;
    text-align: center;
}

#info-equipo {
    display: flex;
    justify-content: space-between;
    margin: 50px auto;
}

.card img {
    width: 100%;
    margin-bottom: 20px;
}

.card {
    margin: 20px 0.5em;
    box-shadow: 2px 5px 15px rgba(0,0,0,0.3); /* Eje x, eje y, difuminado, color */
    padding-bottom: 35px;
}

.card p {
    font-size: 0.90rem;
    padding: 12px 2em;
}

.card a span {
    font-size: 1.7rem !important;
    color: #107ba7;
    margin: 0 0.2em;
}

.card a:hover span{
    animation: rrss 1s ease-in-out alternate-reverse;
}

@keyframes rrss {
    0%, 100% {transform: scale(1) ;}
    50% {transform: scale(1.5)}
}

.card a:active {
    opacity: 0.8;
}

/* Sección 5 - Solicitud*/
 #solicitud{
     background-image:
        linear-gradient(to left top,
            rgba(16,123,167,.80),
             rgba(16,123,167,.80)),
             url("../images/fondo_inferior.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

#solicitud-info {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
    min-height: 30vh;
    justify-content: center;
    align-items: center;
    color: #fff;
}

#solicitud-info p {
    padding: 20px 0;
}

#solicitud-info h2 {
    margin-bottom: 0;
}

#solicitud-info a {
    display: block;
    background-color: #008000;
    color:#fff;
    text-decoration: none;
    padding: 12px 2em;
}

#solicitud-info a:hover {
    opacity: 0.6;
    transition: all 0.5s;
}


/* Pie de página */
footer {
    background-color: #2c2a2a;
    padding: 20px 0;
}

#piedepagina {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.nav {
    display: flex;
    flex: row wrap;
    list-style-type: none;
    gap: 1rem; /* Añade un espacio uniforme entre los elementos hijos del contenedor Flexbox o Grid */
    
}

.nav li {
    font-size: 0.8rem;
    
}

.nav li a {
    color: #cccccc;
    text-decoration: none;
}

.nav li a:hover {
   text-decoration: underline;
   transition: all 0.5s;
  
}

.copyright {
   color: #cccccc; 
}


/* MEDIA QUERIES */
/* Aplicar los siguientes estilos cuando el tamaño del viewport se encuentre en un rango de 960px - 1199px */
@media screen and (min-width:960px) and (max-width:1199px) {

    #informacion h3 {
        font-size: 1rem;
    }

    h2 {
        font-size: 1.4rem;
        
    }

}

/* Aplicar los siguientes estilos cuando el tamaño del viewport sea igual o menor que 959px */
@media screen and (max-width:959px) {

    #intro {
        flex-flow: column wrap;
    }

    #descripcion {
        flex-basis: 100%;
        padding: 0 0 0 0;
        flex-grow: 0;
        
    }

    h1 {
         font-size: 3rem;
  
    }

    #informacion {
        flex-flow: column nowrap;
        padding-bottom: 20px;
        
        }
    

    .col {
        padding: 30px 0;
    }

    #info-temario {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding-bottom: 10px;
}

#info-temario > div {
    flex: none;
    width: 100%;
    padding-right: 0;
    text-align: center;
    padding-bottom: 10px;
}

#info-equipo {
  flex-flow: column nowrap;
}

.card h3 {
    font-size: 1.5rem;
}

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


    }


/* Aplicar los siguientes estilos cuando el tamaño del viewport sea igual o menor a 659px */
@media screen and (max-width:659px) {
   header .container {
    flex-direction: column;
}

#info-contacto a span {
    font-size: 1.8rem;
}

h1 {
    font-size: 2rem;
    text-align: center;
}

#descripcion p {
    text-align: justify;
}

 .col {
    padding: 10px 0;
  }

  #info-temario a {
 
  padding: 12px 5em;
  margin: 25px 1em;
}

#solicitud-info {
  text-align: center;
}

#piedepagina {
 
  flex-flow: column wrap;
  justify-content: space-around;
  

}

.nav {

  flex-flow: column wrap;
  text-align: center;
  margin-bottom: 15px;
  
}

.copyright {
    border-top: 0.5px solid #cccccc;
    padding-top: 10px;
    width: 100%;
    text-align: center;
}
}