/* EJEMPLOS E INSPIRACIÓN
De esta web me gusta como disponenalgunos cuadros para texto:
https://es.wix.com/website-template/view/html/1878?siteId=69f70099-9143-4c82-9043-355ef77db350&metaSiteId=a0e13289-34b7-4439-b4dc-daa2498953ef&originUrl=https%3A%2F%2Fes.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fevents%2Fconferences-meetups

Ejemplo de varias secciones en una sola página, sencillo de color:
https://es.wix.com/website-template/view/html/1858?siteId=ec59468c-4f42-4ab4-9b31-1875c3c5adf5&metaSiteId=2d39a38e-64f3-4139-bdb1-06b3b28f6c60&originUrl=https%3A%2F%2Fes.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fevents%2Fconferences-meetups

De esta web me gusta la disposición del título, superposición de cosas de una sección a otra:
https://es.wix.com/website-template/view/html/1350?siteId=b120de92-a878-4913-8da2-c9783ba5d795&metaSiteId=b56dc1af-cfdc-4eb2-903d-33ca470acb0b&originUrl=https%3A%2F%2Fes.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fblog
*/

body{
    margin: 0px;
    font-family: Arial;
}

:root {
    /*Color scheme of: https://es.wix.com/website-template/view/html/2376?siteId=eb4a108a-ae63-4644-91d1-97721d34e60f&metaSiteId=478e04dc-124c-4998-9464-f22523165680&originUrl=https%3A%2F%2Fes.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fevents%2Fconferences-meetups */
    --color1-1:rgb(201,209,222); /* fondo sección*/
    --color1-2:rgb(144, 19, 254); /* para textos puntuales o fondos botones*/
    --color1-3: rgb(12, 29, 57); /* Para títutlo o para fondo sección (con texto en blanco y detalles en color1-2 */
    --color1-4: rgb(115, 131, 156); /* Para subtítulo */
    --color1-5: rgb(58, 73, 97); /* Para texto párrafos */
    --color1-6: rgb(255, 255, 255); /* BLANCO */
    /*background: rgb(144,19,254);
    background: linear-gradient(0deg, rgba(144,19,254,1) 0%, rgba(231,205,255,1) 100%);*/

    /* Color scheme of: https://es.wix.com/website-template/view/html/1999?siteId=e84fc918-b2a3-44b1-a3e7-e5abe726632a&metaSiteId=3b44d09b-e795-48da-a656-090319601f0b&originUrl=https%3A%2F%2Fes.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fevents%2Fconferences-meetups */
    --color2-1: rgb(82,255,255); /* Para títulos sobre fondo oscuro, algunos detalles */
    --color2-2: #FF005A; /* para fondo sección con texto en blanco*/
    --color2-3: #0D0D59; /* color oscuro para titulos y textos y fondo sección oscuro */
    --color2-4: rgb(255,255,255); /* BLANCO */

    /* Color scheme of: https://es.wix.com/website-template/view/html/1871?siteId=40850fbe-1a06-4f19-8241-d1e07b1c26fe&metaSiteId=a98de706-2f7d-4ecc-9d95-758dbfbb52fa&originUrl=https%3A%2F%2Fes.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fevents%2Fconferences-meetups */
    --color3-1: #0D121A; /* Oscuro para fondo sección oscura, y algunos textos. */
    --color3-2: #00FFa8; /* Para títulos, detalles sobre blanco u oscuro o imagen */
    --color3-3: rgb(255,255,255); /* BLANCO para algunos textos y fondo de sección */
    --color3-4: rgb(0,0,0); /* NEGRO: para texto en general */
}

/*FUENTES:
PARA TITULOS Y TEXTOS EN MAYUSCULAS --> font-family: 'Arial Narrow';
PARA TEXTO PÁRRAFO GENÉRICO EN MINÚSCULAS --> font-family:  Arial;
PARA TÍTULOS Y TEXTOS PUNTULAES CON SERIF --> font-family: 'Times New Roman';
*/

section {
    /*border: 1px solid rgba(0,0,0,0);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 600px;
}

section h3 {
    margin: 30px;
}

/*   ##Device = mobile   */
@media (max-width: 768px) {
    section {
        min-height: 300px;
    }
    
}

/********************       SECCIÓN 0 - PORTADA       ********************/
section.section0 {
    background-color: var(--color1-5);
    background-image: url(../images/Portada02.jpg) ;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-position: center;
    /*background-attachment: fixed;*//*Esta propiedad es para que se quede fija y lo demás pase por encima, tipo Apple */
    background-size: cover;
    min-height: 700px;
}
section.section0 h1,
section.section0 h2 {
    color: var(--color1-6);
}

section.section0 h1 {
    font-size: 10vw;
}

section.section0 div.flex-container {
    display: flex;
    align-items: center;
}

section.section0 div.flex-container hr {
    width: 100px;
    border: 0;
    height: 1px;
    background-color: var(--color1-2);
    margin: 0 10px;
}

section.section0 h2 {
    font-weight: 400;
    text-align: center;
    letter-spacing: 2px;
    font-size: 15px;
}




/********************       SECCIÓN 1 - PRESENTACIÓN       ********************/
section.section1 {
    background-color: var(--color1-1);
    padding: 0 0 50px 0;
}
section.section1 h3 {
    color: var(--color1-3);
}
section.section1 div {
    width: 75%;
    color: var(--color1-5);
    font-family: 'Times New Roman';
    font-weight: 400;
    font-size: 2.5vw;
    /*text-transform: uppercase;*/
    text-align: center;
    padding: 10px 0;
}

/*   ##Device = mobile   */
@media (max-width: 768px) {
    section.section1 div {
        font-size: 16px;
    }
}



/********************       SECCIÓN 2 - OBJETIVOS       ********************/
section.section2 {
    background-color: var(--color1-3);
}
section.section2 h3 {
    color: var(--color1-6);
}
section.section2 div {
    color: var(--color1-3);
    font-family: Arial;
    font-size: 16px;
    word-break: break-word;
}

section.section2 div.flex-container-objetivos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 30px;
    width: 90%;
}

section.section2 div.flex-container-objetivos div.flex-item {
    display: flex;
    align-items: center;
    width: 25%;
    background-color: var(--color1-1);
    border-radius: 10px;
    padding: 2.5vw;
    margin: 1vw;
}

section.section2 div.flex-container-objetivos div.flex-item div.item-text {
    text-align: center;
}



/*   ##Device = mobile   */
@media (max-width: 768px) {
    section.section2 div.flex-container-objetivos {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding-bottom: 30px;
        width: 90%;
    }

    section.section2 div.flex-container-objetivos div.flex-item {
        width: 60%;
    }

    section.section2 div {
        font-size: 12px;
        word-break: break-word;
    }
    
}



/********************       SECCIÓN 3 - COMPONENTES       ********************/
section.section3 {
    background-color: var(--color1-6);
    min-height: 400px;
}
section.section3 h3 {
    color: var(--color1-3);
}

section.section3 div.flex-container-componentes {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 30px 0;
    width: 75%;
}

section.section3 div.flex-container-componentes div.flex-item {
    display: flex;
    flex-direction: column;
    width: 35%;
    margin: 0 20px;
}

section.section3 div.flex-container-componentes div.flex-item div.titulo-componente {
    font-family: 'Arial Narrow';
    font-weight: bold;
    text-align: center;
    margin: 5px 0;
    border-bottom: 1px solid var(--color1-2);
}

section.section3 div.flex-container-componentes div.flex-item div.datos-componente {
    font-weight: 100;
    text-align: center;
    font-size: small;
}

/*   ##Device = mobile   */
@media (max-width: 768px) {
    section.section3 div.flex-container-componentes {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
        width: 100%;
    }

    section.section3 div.flex-container-componentes div.flex-item {
        margin: 20px 0;
        width: 50%;
    }
    
}




/********************       SECCIÓN 4 - ACTIVIDADES       ********************/
section.section4 {
    background-color: var(--color1-1);
    min-height: 700px;
}
section.section4 h3 {
    color: var(--color1-3);
}

section.section4 div.flex-container-actividades {
    display: flex;
    align-items: center;
    margin: 30px 0;
    justify-content: space-evenly;
    width: 100%;
}

section.section4 div.flex-container-actividades div.flex-item {
    display: flex;
    flex-direction: column;
    width: 30%;
    align-items: center;
    /*margin: 0 40px;*/
}

section.section4 div.flex-container-actividades div.flex-item a {
    width: fit-content;
}

section.section4 div.flex-container-actividades div.flex-item a img {
    width: 100%;
}

/*   ##Device = mobile   */
@media (max-width: 768px) {
    section.section4 div.flex-container-actividades {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        margin: 0;
        width: 100%;
    }

    section.section4 div.flex-container-actividades div.flex-item {
        margin: 20px 0;
        width: 75%;
        align-items: center;
    }
    
}





/********************       SECCIÓN 5 - SOBRE NOSOTROS       ********************/
section.section5 {
    background-color: var(--color1-6);
    min-height: 300px !important;
}
section.section5 h3 {
    color: var(--color1-3);
}

section.section5 div.flex-container-about-us {
    display: flex;
    flex-direction: column;
    width: 80%;
}

section.section5 div.flex-container-about-us div.flex-item-title {
    font-family:  Arial;
    font-size: 16px;
}
section.section5 div.flex-container-about-us div.flex-item-bulletpoints {
    font-family:  Arial;
    font-size: 13px;
    border-left: 1px solid var(--color1-4);
    margin: 1.5vw 0 1vw 2vw;
    padding: 0 2vw;
}

/*   ##Device = mobile   */
@media (max-width: 768px) {
    section.section5 {
        padding: 4vw 0 8vw 0;
    }
    section.section5 div.flex-container-about-us div.flex-item-bulletpoints {
        margin: 4vw 0 2vw 4vw;
        padding: 0 4vw;
    }
}




/********************       SECCIÓN 6 - CONTACTO       ********************/
section.section6 {
    background-color: var(--color1-3);
    min-height: 300px !important;
}
section.section6 h3 {
    color: var(--color1-6);
}
section.section6 div {
    color: var(--color1-6);
    font-family: Arial;
    font-size: 16px;
    word-break: break-word;
    text-align: center;
}




/***********************************************************************/

h1 {
    font-family:  'Times New Roman';
    font-weight: 900; 
    font-size: 8vw;
    text-align: center;
}
h2 {
    font-family: 'Arial Narrow';
    font-weight: 800;
    text-align: center;
}
h3 {
    font-family: 'Arial Narrow';
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}
p {
    font-weight: 100;
    text-align: justify;
    font-size: 16px;
}


.borderBox {
    border: 1px solid black;
}



/************   HEADER   ************/

header.header {
    display: flex;
    align-items: flex-start;
    position: fixed;
}

header a {
    text-decoration: none;
    margin: 20px;
}

header div.header-back-button {
    border: 1px solid var(--color1-3);
    color: var(--color1-3);
    background-color: rgb(255 255 255 / 50%);
    padding: 12px 6px;
    font-size: 10px;
    font-family: 'Arial Narrow';
}

header div.header-back-button div.textspaced {
    letter-spacing: 5px;
    text-align: center;
}

/*   ##Device = mobile   */
@media (max-width: 768px) {
    header a {
        text-decoration: none;
        margin: 15px;
    }
    header div.header-back-button {
        padding: 5px;
        font-size: 10px;
    }
}