/* ==========================================================================
   SECCIONES
   ESTRUCTURA GENERAL
========================================================================== */


/* ==========================================================================
   ZONA DE CONTENIDO
========================================================================== */

.contenido {

    width: 100%;

    position: relative;

    z-index: 5;

}

/* ==========================================================================
   MÁRGENES
========================================================================== */

.margen-xxl-blanco {
    height: var(--espacio-xxl);
    background-color: var(--blanco);
}

/* ==========================================================================
   SECCIÓN 00
========================================================================== */

.seccion-00 {

    width: var(--page-width);

    margin-top: var(--espacio-xl);
    margin-left: var(--page-margin);
    margin-right: var(--page-margin);

}


.seccion-00 picture{
    /* Indica de la primera hasta la ultima*/
    grid-column: 1 / -1;
    
    width: 100%;

    display: block;

}
.seccion-00 picture img {

    display: block;
    width: 100%;

}

/* ==========================================================================
   SECCIÓN 01
========================================================================== */

.seccion-01 {

    width: var(--page-width);

    margin-left: var(--page-margin);
    margin-right: var(--page-margin);


    
}

/* ==========================================================================
   SECCIÓN 01 · FILA 01
========================================================================== */

.seccion-01-fila-01 {

    display: grid;

    grid-template-columns: repeat(10, 1fr);

    grid-auto-rows: auto;
    
    align-content: start;

    column-gap: 2%;
    /*
    background:
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0,
            rgba(0, 0, 0, 0.25) 8.2%,
            transparent 8.2%,
            transparent 10.2%
        );
    */
    background-color: var(--blanco);

    padding-top: var(--espacio-xxl);

    

}

.seccion-01-fila-01-izquierda {

    grid-column: 2 / 6;

}
.seccion-01-fila-01-izquierda p{

    margin-top: var(--espacio-s);

}


.seccion-01-fila-01-derecha {

    grid-column: 6 / 10;
    display: flex;
    text-align: right;
    flex-direction: column;
    padding-left: var(--espacio-m);

}
.seccion-01-fila-01-derecha p {

    margin-top: auto;

    margin-bottom: 0;

}

/* ==========================================================================
   SECCIÓN 01 · FILA 02
========================================================================== */

.seccion-01-fila-02 {

    display: grid;

    grid-template-columns: repeat(10, 1fr);

    grid-auto-rows: auto;

    align-content: start;

    column-gap: 2%;
/*
    background:
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0,
            rgba(0, 0, 0, 0.25) 8.2%,
            transparent 8.2%,
            transparent 10.2%
        );
        */

    background-color: var(--blanco);

    padding-top: var(--espacio-l);

}

.seccion-01-fila-02-caja {

    grid-column: 7 / 11;

    padding-top: var(--espacio-m);
    padding-bottom: var(--espacio-m);

    background: var(--magenta);

    text-align: right;

    display: grid;

    grid-template-columns: subgrid;

}

.seccion-01-fila-02-caja p {

    grid-column: 2 / 4;

}

/* ==========================================================================
   SECCIÓN 01 · FILA 03
========================================================================== */

.seccion-01-fila-03 {

    display: grid;

    grid-template-columns: repeat(10, 1fr);

    grid-auto-rows: auto;

    align-content: start;

    column-gap: 2%;
/*
    background:
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0,
            rgba(0, 0, 0, 0.25) 8.2%,
            transparent 8.2%,
            transparent 10.2%
        );
*/

}

.seccion-01-fila-03-izquierda {

    grid-column: 1 / 6;

    display: grid;

    grid-template-columns: subgrid;
    grid-template-rows: auto auto;

    align-content: start;

}

.seccion-01-fila-03-izquierda-imagen{
    grid-column: 1 / 6;
}
.seccion-01-fila-03-izquierda-imagen img {

    display: block;

    width: 100%;
    height: auto;

}
.seccion-01-fila-03-izquierda-textos {


    grid-column: 1 / 6;

    display: grid;

    grid-template-columns: subgrid;

    padding-top: var(--espacio-m);

    background-color: var(--blanco);
    

}
.seccion-01-fila-03-izquierda-textos p{

    grid-column: 2 / 5;
    margin-top: var(--espacio-m);

}
.seccion-01-fila-03-izquierda-textos p.centrado {

    text-align: center;

}


.seccion-01-fila-03-izquierda-textos p.justificado {

    text-align: justify;

}
.seccion-01-fila-03-linea {

    grid-column: 2 / 5;

    border-top: 1px solid var(--magenta);

    margin-top: var(--espacio-m);

}


.seccion-01-fila-03-derecha {
    
    grid-column: 6 / 11;
    margin-left: -4.25%;
    display: grid;
    grid-template-columns: subgrid;
    background-color: var(--blanco);


}
.seccion-01-fila-03-derecha-textos {
    grid-column: 3 / 5;

    display: flex;
    text-align: right;
    flex-direction: column;

}
.seccion-01-fila-03-derecha-textos p {

    margin-top: auto;

    margin-bottom: 0;

   

}




/* ==========================================================================
   SECCIÓN GEN
========================================================================== */

.seccion-gen {

    width: 100%;

    position: relative;

    min-height: 100vh;

    margin-top: 400px;

    background: var(--gris);

}


/* ==========================================================================
   SECCIÓN GEN · VÍDEO
========================================================================== */

.seccion-gen-video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

}


/* ==========================================================================
   SECCIÓN GEN · TRAMA
========================================================================== */

.seccion-gen-trama {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            var(--magenta) 0.75px,
            transparent 0.75px
        );

    background-size: 3px 3px;

    opacity: 0.5;

    z-index: 1;

}


/* ==========================================================================
   SECCIÓN GEN · CONTENIDO
========================================================================== */

.seccion-gen-contenido {

    width: var(--page-width);

    margin-left: var(--page-margin);
    margin-right: var(--page-margin);

    position: relative;

    z-index: 5;

    min-height: 100vh;

    display: grid;

    grid-template-columns: repeat(10, 1fr);

    grid-auto-rows: auto;

    align-content: center;

    column-gap: 2%;
/*
    background:
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0,
            rgba(0, 0, 0, 0.25) 8.2%,
            transparent 8.2%,
            transparent 10.2%
        );
*/
    padding-top: var(--espacio-xl);
    padding-bottom: var(--espacio-xl); 


}


/* ==========================================================================
   SECCIÓN GEN · CAJA
========================================================================== */

.seccion-gen-izquierda {

    grid-column: 1 / 8;

}

.seccion-gen-caja {

    grid-column: 1 / -1;

}

.seccion-gen-caja p.margen-m{
    margin-top: var(--espacio-m);}


    .seccion-gen-derecha {

        grid-column: 9 / 11;
    }
    
    
    .seccion-gen-boton-caja {
    
        height: 100%;
    
        display: flex;
    
        flex-direction: column;
    
    }
    
    
    .seccion-gen-boton {
    
        width: 100%;
    
        margin-top: auto;
        padding-top: var(--espacio-m);
        padding-bottom: var(--espacio-m);
    
        background: var(--blanco);
    
        color: var(--magenta);
    
        text-align: center;
    
        text-decoration: none;
    
    }

/* ==========================================================================
   FOOTER
========================================================================== */

.footer {

    width: 100%;

    min-height: 100px;


    padding-bottom: var(--menu-height);


}


.footer-contenido {

    position: relative;

    width: var(--page-width);

    margin-left: var(--page-margin);
    margin-right: var(--page-margin);

    display: grid;

    grid-template-columns: repeat(10, 1fr);

    column-gap: 2%;
/*
    background:
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0,
            rgba(0, 0, 0, 0.25) 8.2%,
            transparent 8.2%,
            transparent 10.2%
        );
*/



    min-height: 500px;

}


/* ==========================================================================
   FOOTER · COLUMNA IZQUIERDA
========================================================================== */

.footer-izquierda {

    grid-column: 1 / 8;

    margin-left: calc(var(--page-margin) * -2);

    padding-left: calc(var(--page-margin) * 2);

    background: var(--blanco);

    padding-top: var(--espacio-xl);
    padding-bottom: var(--espacio-xl);
    margin-top: var(--espacio-xl);
    margin-bottom: var(--espacio-xl);

    display: grid;
grid-template-columns: subgrid;

}

.footer-izquierda h4 {

    grid-column: 1 / 7;

}

.footer-izquierda p {

    grid-column: 1 / 5;

}

.footer-izquierda p.margen-m{
    margin-top: var(--espacio-m);}

.footer-izquierda-linea {

        grid-column: 1 / 5;
    
        border-top: 1px solid var(--magenta);
    
        margin-top: var(--espacio-m);
    
}

/* ==========================================================================
   FOOTER · COLUMNA DERECHA
========================================================================== */

.footer-derecha {

    grid-column: 8 / 11;

    display: flex;

    flex-direction: column;

    gap: var(--espacio-s);

    align-self: end;

    margin-bottom: var(--espacio-xl);



}


.footer-boton {

    display: block;

    width: 100%;

    padding-top: var(--espacio-m);
    padding-bottom: var(--espacio-m);

    background: var(--blanco);

    color: var(--magenta);

    text-align: center;

    text-decoration: none;

    cursor: pointer;

}

/* ==========================================================================
   FOOTER · BLOQUE CONCEPTUAL
========================================================================== */

.footer-concepto {

    width: 100%;

    background: var(--magenta);

    border-bottom: 10px solid var(--amarillo);

}


.footer-concepto-contenido {

    width: var(--page-width);

    margin-left: var(--page-margin);
    margin-right: var(--page-margin);

    padding-top: var(--espacio-xl);
    padding-bottom: var(--espacio-xl);

    text-align: justify;

}

/* ==========================================================================
   FOOTER · BLOQUE INFERIOR
========================================================================== */

.footer-inferior {

    width: 100%;

    background: var(--blanco);

    

}


.footer-inferior-contenido {

    width: var(--page-width);

    margin-left: var(--page-margin);
    margin-right: var(--page-margin);

    padding-top: var(--espacio-xl);
    padding-bottom: var(--espacio-xl);

    display: grid;

    grid-template-columns: repeat(10, 1fr);

    grid-auto-rows: auto;

    align-content: start;

    column-gap: 2%;
/*
    background:
    repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.25) 0,
        rgba(0, 0, 0, 0.25) 8.2%,
        transparent 8.2%,
        transparent 10.2%
    );
*/


}

/* ==========================================================================
   FOOTER · LOGOTIPOS
========================================================================== */

.footer-logos {

    grid-column: 3 / 9;

    display: flex;
    gap: 5%;
    align-items: center;
    justify-content: space-between;


}


.footer-logos img {

    display: block;

    width: 45%;
    height: auto;

}


/* ==========================================================================
   FOOTER · ENLACES LEGALES
========================================================================== */

.footer-legales {

    grid-column: 1 / 11;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    margin-top: var(--espacio-l);

}


.footer-legales a,
.footer-gestionar-cookies {

    color: var(--magenta);

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    text-transform: inherit;

    text-decoration: none;

    background: none;

    border: 0;

    padding: 0;

    cursor: pointer;

}

.footer-legales a,
.footer-legales button {

    color: var(--magenta);

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    text-transform: inherit;

    text-decoration: none;

    background: none;

    border: 0;

    padding: 0;

    cursor: pointer;

}


.footer-separador {

    margin-left: var(--espacio-xs);
    margin-right: var(--espacio-xs);

    color: var(--magenta);

}


/* ==========================================================================
   FOOTER · CRÉDITOS
========================================================================== */

.footer-creditos {

    grid-column: 1 / 11;

    text-align: center;

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-9);

    font-weight: var(--sans-regular);

    line-height: var(--interlineado-muyseparado);

    margin-top: var(--espacio-l);

    

}


.footer-creditos a {

    color: var(--magenta);

    text-decoration: none;

}

.footer-creditos .version {
    margin-top: var(--espacio-m);
    font-weight: var(--sans-bold);

}

/* ==========================================================================
   COOKIES · AVISO
========================================================================== */

.cookie-notice {

    position: fixed;

    bottom: 0px;

    width: 100%;
    


    padding: var(--espacio-m) 5%;

    background: color-mix(
        in srgb,
        var(--amarillo) 90%,
        transparent
    );

    color: var(--magenta);

    z-index: 1000;

}

/* ==========================================================================
   COOKIES · MENSAJE
========================================================================== */

.cookie-notice-message {

    color: var(--magenta);

    font-family: var(--font-sans);

    font-size: var(--size-12);

    font-weight: var(--sans-regular);

    line-height: var(--interlineado-separado);

}

/* ==========================================================================
   COOKIES · BOTONES
========================================================================== */

.cookie-buttons {

    display: flex;

    justify-content: center;

    gap: var(--espacio-s);

    margin-top: var(--espacio-m);

}


.cookie-buttons button {

    padding: var(--espacio-xs) var(--espacio-m);

    border: 0;

    background: var(--magenta);

    color: var(--amarillo);

    font-family: var(--font-sans);

    font-size: var(--size-12);

    font-weight: var(--sans-semibold);

    text-transform: uppercase;

    cursor: pointer;

}










































/* ==========================================================================
   SECCIONES · TABLET
========================================================================== */

@media (max-width: 900px) {
    .seccion-gen-contenido {
        grid-template-columns: repeat(6, 1fr);
        column-gap: 3%;
/*
        background:
            repeating-linear-gradient(
                to right,
                rgba(0, 0, 255, 0.25) 0,
                rgba(0, 0, 255, 0.25) calc((100% - 15%) / 6),
                transparent calc((100% - 15%) / 6),
                transparent calc((100% - 15%) / 6 + 3%)
            );
*/
    }

    .seccion-gen-izquierda {
        grid-column: 1 / 6;

    }

    .seccion-gen-derecha {
        grid-column: 1 / 6;
    }

    .seccion-gen-boton {

        grid-column: 1 / 6;
        margin-top: var(--espacio-l);
    
    }


    .footer-contenido {

        grid-template-columns: repeat(6, 1fr);
    
        column-gap: 3%;
/* 
        background:
                repeating-linear-gradient(
                    to right,
                    rgba(0, 0, 255, 0.25) 0,
                    rgba(0, 0, 255, 0.25) calc((100% - 15%) / 6),
                    transparent calc((100% - 15%) / 6),
                    transparent calc((100% - 15%) / 6 + 3%)
                );
*/
                
    
    }
    
    .footer-izquierda {
    
        grid-column: 1 / 7;
    
    

    
    }
    .footer-izquierda h4 {
    
        grid-column: 1 / 6;
 
    }
    
    .footer-izquierda p {
    
        grid-column: 1 / 6;

    
    }
    
    .footer-izquierda-linea {
    
            grid-column: 1 / 6;
        
            border-top: 1px solid var(--magenta);
        
            margin-top: var(--espacio-m);
        
    }
    
    .footer-derecha {
    
        grid-column: 1 / 6;
    
    }


}


/* ==========================================================================
   SECCIONES · MÓVIL
========================================================================== */

@media (max-width: 600px) {

    .seccion-01-fila-01 {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 4%;

   /*  
        background:
    repeating-linear-gradient(
        to right,
        rgba(0, 0, 255, 0.25) 0,
        rgba(0, 0, 255, 0.25) calc((100% - 12%) / 4),
        transparent calc((100% - 12%) / 4),
        transparent calc((100% - 12%) / 4 + 4%)
    );
    */
                

    padding-left: 6%;
    padding-right: 6%;
    padding-top: 70px;
    

    }

    .seccion-01-fila-01-izquierda {
text-align: center;
        grid-column: 1 / 5;  

    }

    .seccion-01-fila-01-derecha {

        grid-column: 1 / 5;
        padding-top: var(--espacio-l);
        text-align: center;
        padding-left: 6%;
    padding-right: 6%;

    }
    .seccion-01-fila-02 {

    
        grid-template-columns: repeat(4, 1fr);
    
        column-gap: 4%;
  /* 
        background:
    repeating-linear-gradient(
        to right,
        rgba(0, 0, 255, 0.25) 0,
        rgba(0, 0, 255, 0.25) calc((100% - 12%) / 4),
        transparent calc((100% - 12%) / 4),
        transparent calc((100% - 12%) / 4 + 4%)
    );
    */

    padding-bottom: var(--espacio-xl);
    
    
    }
    
    .seccion-01-fila-02-caja {
    
        grid-column: 1 / 5;
        text-align: center;
    
    
    }
    
    .seccion-01-fila-02-caja p {
    
        grid-column: 2 / 4;
    
    }

    /* ==========================================================================
   SECCIÓN 01 · FILA 03
========================================================================== */

.seccion-01-fila-03 {

    grid-template-columns: repeat(4, 1fr);
    column-gap: 4%;
/*
    background:
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0,
            rgba(0, 0, 0, 0.25) 8.2%,
            transparent 8.2%,
            transparent 10.2%
        );
*/

}

.seccion-01-fila-03-izquierda {

    grid-column: 1 / 5;

}

.seccion-01-fila-03-izquierda-imagen{
    grid-column: 1 / -1;
}

.seccion-01-fila-03-izquierda-textos {
    grid-column: 1 / 5;
    

}
.seccion-01-fila-03-izquierda-textos p{

    grid-column: 1 / 5;
    margin-left: 7%;
    margin-right: 7%;

}

.seccion-01-fila-03-linea {

    grid-column: 2 / 4;

}


.seccion-01-fila-03-derecha {
    
    grid-column: 1 / 5;
    margin-left: 0%;

    padding-top: var(--espacio-l);


}
.seccion-01-fila-03-derecha-textos {
    grid-column: 2 / 4;
    text-align: center;

}


.footer-inferior-contenido {

    grid-template-columns: repeat(4, 1fr);

    column-gap: 4%;
/*
    background:
    repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.25) 0,
        rgba(0, 0, 0, 0.25) calc((100% - 12%) / 4),
        transparent calc((100% - 12%) / 4),
        transparent calc((100% - 12%) / 4 + 4%)
    );
*/


}

/* ==========================================================================
   FOOTER · LOGOTIPOS
========================================================================== */

.footer-logos {

    grid-column: 1 / 5;



}




/* ==========================================================================
   FOOTER · ENLACES LEGALES
========================================================================== */

.footer-legales {

    grid-column: 1 / 5;

}









/* ==========================================================================
   FOOTER · CRÉDITOS
========================================================================== */

.footer-creditos {

    grid-column: 1 / 5;


    

}

}


/* ==========================================================================
   SECCIONES · PANTALLAS GRANDES
========================================================================== */

@media (min-width: 1920px) {


    .footer-inferior-contenido {

        grid-template-columns: repeat(13, 1fr);

        column-gap: 2%;
/*
        background:
            repeating-linear-gradient(
                to right,
                rgba(0, 0, 0, 0.25) 0,
                rgba(0, 0, 0, 0.25) 5.84615%,
                transparent 5.84615%,
                transparent 7.84615%
            );
     */
    
    
    }
    
    /* ==========================================================================
       FOOTER · LOGOTIPOS
    ========================================================================== */
    
    .footer-logos {
    
        grid-column: 5 / 10;

    
    
    
    }
    
    

    
    
    /* ==========================================================================
       FOOTER · ENLACES LEGALES
    ========================================================================== */
    
    .footer-legales {
    
        grid-column: 5 / 10;
    
    }
    
    
    
    
    
    
    
    
    
    /* ==========================================================================
       FOOTER · CRÉDITOS
    ========================================================================== */
    
    .footer-creditos {
    
        grid-column: 5 / 10;
    
    
        
    
    }
    

}