/* -------------------------------------------- DEFINICION DE VARIABLES -------------------------------------------- */
:root {
    /* Box model */
    --header-height: 7vh;
    --side-margin: 10%; /* Se entiende a lo largo de todos los CSS, no se como */
    --vertical-margin: 3%;
    --section-horizontal-padding: min(2vw, 50px) 0px;
    --section-vertical-padding: 5vh 0;/* Separacion vertical entre secciones */
    /* --section-horizontal-padding-desktop: 2% 8%; */

    /* 2% 8%; */

    /* Colors */
    /* Primario */
    --color-primario: #212121;
    --color-primario-medio: #263238;
    --color-primario-claro: #f5f5f5;/* #a6a6a6; */
    /* Secundario */
    --color-secundario:  #000021; /* Familia de #000021: https://www.colorhexa.com/000021 */
    --color-secundario-medio: rgb(34, 104, 235);
    --color-secundario-claro:rgb(229,229,255);
    /* Terciario */
    --color-terciario:  #013220; /*  Familia de #013220: https://www.colorhexa.com/013220 */
    --color-terciario-medio: rgb(4,185,118); /* #04b977 */
    --color-terciario-claro: rgb(228,254,245);
    /* Otros */
    --color-de-fondo: #f2f2f2;

    /* Font */
    --font-family: "Outfit", sans-serif;
    --color: black;

    /* Sizes Fallback (para navegadores viejos) */
    --font-size: 16px; 
    --font-size-disclaimer: 12px;
    --font-size-info_message: 10px;
    --font-size-h1: 42px;
    --font-size-h2: 30px;
    --font-size-h3: 22px;
    --font-size-h4: 16px;
    --font-size-header: 16px;
    --font-size-header-logo: 25px;
    --font-size-tabla_predicciones: 12px;  /* Fallback x posible imcompatibilidad de clamp() */
    --font-size-metric: 120px;
    --font-size-metric-medium: 80px;

    /* Sizes en navegadores modernos */
    --font-size: clamp(16px, 1vw, 20px);
    --font-size-disclaimer: clamp(10px, 0.8vw, 12px);
    --font-size-info_message: clamp(8px, 0.8vw, 12px);
    --font-size-h1: clamp(40px, 4vw, 80px);
    --font-size-h2: clamp(30px, 3vw, 40px);
    --font-size-h3: clamp(20px, 2vw, 24px);
    --font-size-h4: clamp(14px, 1vw, 18px);
    --font-size-header: clamp(14px, 1vw, 20px);
    --font-size-header-logo: clamp(20px, 1.5vw, 30px);
    --font-size-tabla_predicciones: clamp(12px, 1.8vw, 20px); /* Ajusta entre 8px y 50px basado en 3vw */
    --font-size-metric: clamp(80px, 10vw, 180px);
    --font-size-metric-medium: clamp(60px, 8vw, 120px);

    /* Button */
    --border-radius-button: 1rem;
    --padding-button: 1rem;
    --padding-button: clamp(8px, 2vw, 14px)
}

/* -------------------------------------------- GENERALES? -------------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    /* Display */
    display: grid;
    grid-template-rows: var(--header-height) minmax(100vh, auto) auto; /* 1 fila para el encabezado, 1 fila para el cuerpo, 1 fila para el pie de página */
    grid-template-columns: 1fr; /*  2 de margenes y una central */

    /* Box model */
    min-height: 100vh; /* Para garantizar que la pagina ocupe siempre al menos el 100% del viewport height */
    width: 100vw;
    box-sizing: border-box;

    /* Font */
    font-family: var(--font-family);
    font-size: var(--font-size);
    text-align: center;
    color: var(--color);
    line-height: 150%;

    /* Color */
    background: var(--color-de-fondo);
}

body main > * {
    padding: 0% var(--side-margin);  /* Margen en main */
}

section {
    padding: var(--section-horizontal-padding);
}

.section-container {
    padding: var(--section-vertical-padding);
}


.background1 {
    background-color: var(--color-secundario);
    color: #fff;
}

.background2 {
    background-color: var(--color-secundario-claro);
}

.background3 {
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    line-height: initial;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color:black;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

p {
    text-align: justify; /* Justificar párrafos */
}

.without-margin {
    padding: 0;
}

.link_color {
    text-decoration: underline;
    color: #0056b3;  /* #007bff */
}

/* -------------------------------------------- HEADER SECTION -------------------------------------------- */
.header {
    /* Display & Position */
    display: flex;
    position: sticky; /* a diferencia de fixed, mantiene la posicion en el dom */
    top: 0;
    z-index: 10; /* para que quede la barra no quede oculta atras del body */

    /* Alineación */
    justify-content: space-between;
    align-items: center;  /* centro verticalmente */

    /* Box model */
    height: var(--header-height);
    padding: 0% var(--side-margin);

    /* Color */
    background-color: var(--color-primario);
}

/* ## Logo y nombre de la empresa */
.header__logo-container a {
    display: flex; /* el logo y el nombre de la empresa en linea */
    align-items: center;
    color: #fff;
    transition: scale 0.3s;
}

.header__logo-container a:hover {
    scale: 1.1;
}

.header__logo-title, .footer__logo-title {
    font-size: var(--font-size-header-logo);
}

/* Barra de navegacion MOBILE*/
.header__nav-list {
    /* Display */
    display: flex;

    /* Alineación */
    justify-content: flex-end; /* Alinea todo al final de la direccion flex, en este caso, al final de la linea, es como un right=0 */
    align-items: center; /* centrar verticalmente */

    /* Box model */
    width: 100%;

    /* Otro */
    font-size: var(--font-size-header);
    list-style: none;
}

.header__nav-list button {
    background-color: transparent;
    border: none;
}

.header__nav-list a {
    color: #fff;
    padding: 0 1vw; /* espacio lateral entre items */
}

.header__nav-item:hover {
    opacity: 0.7;
}

.mobile-navbar {
    /* Display & position */
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    /* Alineacion */
    justify-content: start;
    text-align: left;

    /* Box model */
    height: 100vh;
    width: 0%;
    overflow-x: hidden; /* Las palabras no salen de la caja al hacer la transicion */

    /* Transicion */
    transition: width 0.5s ease; /* Agregamos una transición suave a la propiedad width */

    /* Color */
    background-color:rgb(0, 0, 0, 0.92);   /* background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8)); */
    /* -webkit-backdrop-filter: blur(10px); Esto no arregla el problema de Iphone 
    backdrop-filter: blur(10px);  No funciona para Iphone */
}

.mobile-navbar li {
    /* Box model */
    width: 100%;
    margin-left: var(--side-margin);
    margin-top: 3vh;

    /* font */
    font-size: 3vh;
}

.header__nav-item:is(:hover, :focus) {
    opacity: 0.7;
}

.menu-toggle {
    display: block;
}

.hideOnMobile {
    display: none;
}

/* -------------------------------------------- HEADER QUERIES -------------------------------------------- */
@media only screen and (min-width: 1000px) {
    .hideOnDesktop {
        display: none !important; /* tuve que usar important porque sino js la deja abierta */
    }

    .hideOnMobile {
        display: block;
    }
}


/* -------------------------------------------- COOKIES SECTION -------------------------------------------- */
#cookie-banner {
    /* Display & Position */
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;  /* Permite que los elementos se ajusten en pantallas pequeñas */
    
    position: fixed;
    bottom: 0;
    z-index: 1000;  /* Incrementa el z-index para asegurar que esté por encima de otros elementos */

    /* Box model */
    height: auto;  /* Ajusta automáticamente la altura según el contenido */
    width: 100%;
    padding: 2vh 0;
    box-sizing: border-box;  /* Incluye el padding y el border en el tamaño total */

    /* Color */
    background-color: #fff;
    border-top: 1px solid #000;
}

.cookie-banner__text p {
    text-align: center;
    padding: 0 2vw;
    margin: 0;
}

/* .cookie-banner__text a {
    text-decoration: underline;
    color: #0056b3;
} */

.cookie-banner__buttons button {
    /* Box model */
    padding: 0.4rem;
    margin: 0 0.5vw;

    /* Color */
    background-color: #fff;
    color: #000;

    /*  Border */
    border: 1px solid #000;
    border-radius: 8px;

    /* Otro */
    cursor: pointer;
}

#accept-cookies {
    background-color: var(--color-terciario);
    color: #fff;
}


/* -------------------------------------------- FOOTER SECTION -------------------------------------------- */
/* Display footer */
footer {
    /* Display */
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(2, 1fr);

    /* Box model */
    padding: 0% var(--side-margin);

    /* Color */
    background-color: var(--color-primario);
    color: white;

    font-size: var(--font-size-disclaimer);
}

.footer__logo-container, .footer__copyright, .footer__credits, .footer__disclaimer_legal {
    grid-column: span 2;
}

.footer__credits {
    font-size: var(--font-size-info_message);
}

.footer__logo-container, .footer__logo-link, .footer-navbar, .footer__social-media, .footer__copyright {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Links */
footer a {
    color: white;
}

footer a:not(.footer__logo-link):hover {
    opacity: 0.7;
}

/* Social media */
.footer-social-media-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    gap: clamp(10px, 1vw, 20px)
}

.footer-social-media-list i {
    font-size: 2vh;
    font-size: 30px;
    font-size: clamp(20px, 2vw, 30px);
}


/* Credits */
#credits h5 {
    margin: 0;
    margin-top: 1vh;
    font-weight: bold;
}

#credits p {
    margin: 0;
    text-align: center;
}

/* Copyright */
.footer__copyright p, .footer__disclaimer_legal p {
    text-align: center;
    font-size: var(--font-size-disclaimer);
}

@media only screen and (min-width: 1000px) {

    section {
        padding: var(--section-horizontal-padding-desktop);
    }

    footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 3vh;
        font-size: var(--font-size);
    }

    .footer__copyright, .footer__copyright p {
        width: 100%;
        text-align: left;
    }
}

.cta-button {
    padding: 0.5rem;
    border-radius: 15px;
    background-color: var(--color-secundario-medio);
    color: #fff;
}