/* Define las variables para los colores */
:root{
    --colorA: #ffffff;
    --colorB: #eceee4;
    --colorC: #979797;
    --colorD: #000000;
    --colorE: #e43333;
    --colorF: #09bd1b;
    --colorG: #0c09cc;
    
    --colorH: #E1A807;
    --colorI: #B35150;
}

html{
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Estilos generales para elementos de la página */
* {
    /* Hace que se incluyan en las dimensiones de los elementos los rellenos y los bordes, pero no los margenes */
    box-sizing: border-box;

    /* Tipo de letra general */
    font-family: Arial, sans-serif;
}

/* -------------- Estilos base: para móviles (desde 4´ en adelante) -------------------- */
body{
    display:grid;
    /* Define el número y tamaño de las columnas y filas  */
    grid-template-columns: 99%;    grid-template-rows: 90px 0px 1400px 100px 100px 50px;
    /* Define la separación entre filas y columnas */
    grid-row-gap: px;
    /* grid-column-gap: 1px;*/
    /* Define las celdas*/
    grid-template-areas:    "header"
                            "nav"
                            "contenido_1"
                            "contenido_2"
                            "contenido_3"
                            "footer";                          
    justify-content: center;
    height: 100%;
    margin: 0;
    background-color: var(--colorA);

        border: rgb(255, 0, 0), 0px, solid;
}

/* Área de Cabecera */
header {
    grid-area:header;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;

        border: rgb(38, 0, 255), 0cqi, solid;
}

.cabecera_imagen{
    width: 100%;

        border: rgb(0, 255, 55), 0px, solid;
}

/* Área de navegación*/
nav{
    grid-area: nav;
    width: 100%;
    display: none;

        border: rgb(25, 0, 255), 0px, solid;
}

/* Área del contenido */
main{
    display: contents;
}

#contenido_1{
    grid-area:contenido_1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    width: 100%;

        border: rgb(17, 0, 255), 0px, solid;
}

#contenido_1_titulo{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 96%;
    height: 5vh;
    margin: 2%;
    font-size: 5vw;
    color:var(--colorI);

        border: rgb(255, 0, 0), 0px, solid;
}

.link_capsula{
    text-decoration: none;
    color: var(--colorD);
}

.capsula{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    box-shadow: -5px -5px 20px -5px var(--colorC), 5px 5px 20px -5px var(--colorC);
    border-radius: 15px;
    width: 96%;
    height: 36vh;
    margin: 2%;

        border: rgb(0, 255, 34), 0px, solid;
}

.nombre{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 99%;
    height: 4vh;
    font-size: 3.5vw;

        border: rgb(255, 0, 0), 0px, solid;
}

.div_info{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    width: 99%;
    height: 31vh;

        border: rgb(255, 0, 0), 0px, solid;
}

.div_imagen{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content:start;
    width: 52%;
    height: 30vh;
    overflow: hidden;   /* Oculta partes que sobresalgan */

        border: rgb(38, 0, 255), 0px, solid;
}

.imagen_evento{
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Hace que la imagen cubra el div */
    display: block;     /* usar junto con cover */
}

.div_calendario{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    width: 44%;
    height: 30vh;

        border: rgb(47, 0, 255), 0px, solid;
}

.mes{
    font-size: 3vw;
    margin-top: 2%;

        border: rgb(0, 255, 0), 0px, solid;
}

.calendario_evento{
    font-size: 2.5vw;
    text-align: center;
    width: 90%;
    border: var(--colorI), 1px, solid;
}

.dias_evento{
    color:var(--colorA);
    background-color: var(--colorF);
}

.organizador{
    text-align: left;
    width: 90%;
    font-size: 3vw;

        border: rgb(0, 255, 0), 0px, solid;
}




/* ---------- Smartphone grande ---------- */
@media (min-width: 500px) {
    body {
    grid-template-rows: 110px 0px 1500px 100px 100px 50px;

        background-color: #ffffff;
    }

    #contenido_1_titulo{
        font-size: 3vw;
    }

    .capsula{
        max-width: 645px;
        height: 41vh;
    }

    .div_info{
        height: 36vh;
    }

    .div_imagen{
        height: 35vh;
    }

    .div_calendario{
        height: 35vh;
    }

}

/* ----------- Tablets pequeñas en adelante --------- */
@media (min-width: 650px) {
    body {
        grid-template-rows: 140px 0px 1600px 100px 100px 50px;

            background-color:#ffffff;
    }

    .nombre{
        font-size: 2vw;
    }

    .mes{
        font-size: 2vw;
    }

    .organizador{
        font-size: 2vw;
    }
}

/* ----------- Escritorio mediano (max-width: 1000px) ------------------- */
@media (min-width: 850px) {
    body {
        grid-template-rows: 185px 0px 2100px 100px 100px 50px;

            background-color:#ffffff;
    }

    .cabecera_imagen{
        width: 1000px;
    }
    
    #contenido_1_titulo{
        font-size: 25px;
    }

    .capsula{
        height: 460px;
    }

    .div_info{
        height: 410px;
    }

    .div_imagen{
        height: 410px;
    }

    .div_calendario{
        height: 400px;
    }

    .nombre{
        font-size: 22px;
    }

    .mes{
        font-size: 20px;
    }

    .organizador{
        font-size: 20px;
    }

    .calendario_evento{
        font-size: 18px;
    }
}