@import url('bloque-documentos.css');
@import url('bloque-texto-imagen.css');

.seccion-titulo p {
    font-family: var(--header-family);
    font-weight: 500;
    font-size: var(--size-16);
    text-transform: uppercase;
    margin-bottom: var(--margin-bloques);
}

.seccion-titulo h1 {
    font-weight: 700;
    font-size: var(--size-titulo);
    text-transform: uppercase;
    width: 70%;
}

.page-memoria-anual {
    overflow-x: hidden;
}

.bloque-texto-medio .texto p {
    padding-bottom: var(--margin-elementos-int);
}

/* Cita */
.cita {
    display: flex;
    justify-content: right;
    margin-bottom: var(--margin-bloques);
}

.cita blockquote {
    margin-bottom: var(--margin-elementos);
}

.cita blockquote p, .seccion-primera-tarjeta .contenido .cita blockquote p  {
    color: var(--azul);
    font-size: var(--size-36);
    font-weight: 500;
}

.cita blockquote::before {
    content: '';
    background-image: url(../images/quote.svg);
    background-position:left;
    background-size: contain;
    background-repeat: no-repeat;
    height: var(--size-40);
    display: block;
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: var(--margin-elementos-int);
}

.cita .cargo-autor, .seccion-primera-tarjeta .contenido .cita .cargo-autor {
    padding-left: var(--margin-elementos-int);
    border-left: 1px solid var(--gris-02);
}

.cita .cargo, .seccion-primera-tarjeta .contenido .cita .cargo {
    text-transform: uppercase;
    color: var(--gris-02);
    font-weight: 500;
    font-size: var(--size-16);
}

.cita .autor, .seccion-primera-tarjeta .contenido .cita .autor {
    text-transform: uppercase;
    color: var(--azul);
    font-weight: 700;
    font-size: var(--size-21);
    margin-bottom: var(--margin-elementos-int);
}


/* Fondo rojo */

.fondo_rojo p {
    color: var(--second-color);
    font-weight: 400;
    font-size: var(--size-18);
    margin-bottom: var(--margin-elementos);
}

.fondo_rojo p:last-of-type {
    margin-bottom: 0;
}

.fondo_rojo h3 {
    font-weight: 600;
    font-size: var(--size-28);
    color: var(--second-color);
    margin-bottom: var(--margin-elementos);
}

.fondo_rojo .textos {
    padding-left: var(--margin-elementos);
    position: relative;
}

.fondo_rojo .row {
    display: flex;
    /*gap: var(--margin-bloques);*/
    flex-wrap: nowrap;
}

.fondo_rojo .row > div {
   flex: 1;
}

.fondo_rojo .row > div:not(:last-of-type) {
    margin-right: calc(100% / 12);
}

.fondo_rojo .textos::before {
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    left:0;
    display: inline-block;
    background-color: var(--second-color);
}

/* Datos */

.banner-datos .cabecera .texto p {
    font-weight: 400;
    font-size: var(--size-21);
    max-width: 50%;
    text-transform: none;
}

.mapa .imagen {
    height: 100%;
}

.mapa .dato .numero, .mapa .dato .texto {
    margin:auto;
    width: 50%;
    padding-left: 0;
}

.mapa .dato:last-of-type {
    border-bottom: 0;
}

.mapa .dato {
    padding-top: var(--margin-elementos);
}

.mapa .imagen img {
    height: 100%;
}

.seccion-datos-imagen {
    padding-top: 0;
}

.seccion-titulo {
    padding-bottom: 0;
}

.seccion-descarga .cta a {
    width: 100%;
}

/* Cards */
.card .cabecera .subtitulo {
    font-weight: 400;
    font-size: var(--size-21);
    text-transform: lowercase;
    margin-top: var(--margin-elementos-int);
    margin-bottom: 0;
    text-transform:initial;
}

.card .cabecera .titulo {
    font-weight: 600;
    font-size: var(--size-21);
    text-transform: uppercase;
    color: var(--header-color); 
    padding-bottom: var(--margin-elementos-int);
    border-bottom: 1px solid var(--color-line);
    padding-right: calc(100% / 12);
    position: relative;
    text-decoration: none;
}

.card .cabecera {
    width: 100%;
}

.card .contenido {
    padding: var(--margin-bloques) 0;
    display: none;
}

.card.card-open .contenido {
    display: block;
}

.card .cabecera .header_card:hover {
    cursor: pointer;
}


.card .cabecera .header_card:hover .titulo {
    text-decoration: underline;
    cursor: pointer;
    color: var(--rojo);
}



.card .contenido p{
    font-weight: 400;
    font-size: var(--size-21);
    margin-bottom: var(--margin-elementos);
}

.card .contenido p:last-of-type {
    margin-bottom: 0;
}

.seccion-primera-tarjeta .contenido .datos > div {
    display: flex;
    align-items: center;
    gap: var(--margin-elementos-int);
    margin-bottom: var(--margin-elementos);
    padding-left: var(--margin-elementos);
    border-left: 1px solid var(--color-line);
}

.seccion-primera-tarjeta .contenido .datos > div:last-of-type {
    margin-bottom: 0;

}

.seccion-primera-tarjeta .datos_descripcion {
    margin-bottom: var(--margin-bloques);
}

.seccion-primera-tarjeta .descripcion.col_1_2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: var(--gris-04-claro);
    padding: var(--padding-interior);
}

.seccion-primera-tarjeta .datos {
    margin-top: var(--margin-bloques);
}

.seccion-primera-tarjeta .datos_descripcion .col_1_2:first-of-type {
    padding-right: var(--margin-elementos);
}

.seccion-primera-tarjeta .datos .numero {
    color: var(--azul);
    font-weight: 500;
    font-size: var(--size-50);
    margin-bottom: 0;
}

.seccion-primera-tarjeta .datos .destacado, .seccion-primera-tarjeta .datos .textos {
    font-weight: 700;
    font-size: var(--size-21);
    text-transform: uppercase;
    color: var(--azul);
    margin-bottom: 0;
}


.seccion-primera-tarjeta .datos .textos {
    font-weight: 400;
}


.seccion-primera-tarjeta h3 {
    font-weight: 600;
    font-size: var(--size-21);
    text-transform: uppercase;
    color: var(--azul);
    margin-bottom: var(--margin-elementos);
}

.seccion-primera-tarjeta .testimonios .col_1_2:first-of-type {
    padding-right: calc(var(--margin-elementos) / 2 );
}

.seccion-primera-tarjeta .testimonios .col_1_2:last-of-type {
    padding-left: calc(var(--margin-elementos) / 2);
}

.seccion-primera-tarjeta .testimonios .imagen {
    margin-bottom: var(--margin-elementos);
}

.card .cta, .card .cta a{
    width: 100%;
}

.card .cabecera .titulo::after {
    content: url(../images/flecha_gris.svg);
    position: absolute;
    right: 0;
    bottom: var(--margin-elementos);
    transition: all 0.2s ease-in-out;
}

.seccion-segunda-tarjeta .datos {
    margin-bottom: var(--padding-interior);
    margin-top: var(--padding-interior);
}

.seccion-segunda-tarjeta .masters {
    margin-bottom: var(--margin-bloques);
}

.seccion-segunda-tarjeta .master {
    padding: var(--padding-interior);
    background-color: var(--second-color);
}


.seccion-segunda-tarjeta .master .texto {
    font-weight: 600;
    font-size: var(--size-28);
    text-transform: uppercase;
    color: var(--azul);
}

.seccion-segunda-tarjeta .master .imagen{
    max-width: 90px;
    margin-bottom: var(--margin-elementos);
}

.seccion-segunda-tarjeta h2 {
    margin-top: var(--margin-bloques);
    text-decoration: underline;
}

/* Super voluntarios */
.tab-content .tab-pane {
    display: none; 
}

.tab-content .tab-pane.show.active {
    display: block;
}

.supervoluntario-image-wrapper {
    width: 100px; 
    height: 100px; 
    min-width: 100px;
    border-radius: 50%; 
    overflow: hidden;
    background-color: var(--gris-04);
}

.supervoluntario-image {
    height: 100%; 
    object-fit: cover;
    width: 100%;
}

.supervoluntario-item {
    display: flex;
    gap: var(--margin-elementos-int);
    align-items: center;
    width: calc(100% / 4 - var(--margin-bloques));
    margin-bottom: var(--margin-bloques);
}

.supervoluntarios-grid p {
    font-weight: 600;
    font-size: var(--size-15);
    text-transform: uppercase;
    color: var(--azul);
}

#bloque-supervoluntarios-region button {
    font-family: var(--header-family);
    color: var(--azul);
    font-weight: 600;
    font-size: var(--size-15);
    text-align: right;
    text-transform: uppercase;
    background-color: transparent;
    border: none;
    padding-bottom: 5px;
}

#bloque-supervoluntarios-region button.active {
    color: var(--rojo);
    border-bottom:1px solid var(--rojo);
}

#bloque-supervoluntarios-region button:hover {
    cursor: pointer;
    color: var(--rojo);
}

.supervoluntarios-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--margin-bloques);
}

#bloque-supervoluntarios-region ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--margin-elementos-int);
    list-style: none;
    padding-bottom: var(--margin-elementos-int);
    border-bottom: 1px solid var(--color-line);
    margin-bottom: var(--margin-bloques);
    margin-top: var(--margin-bloques);
}

#bloque-supervoluntarios-region {
    width: 100%;
}

/* Tabla documentos */
.documentos-descargas {
    margin-top: var(--margin-bloques);
    margin-bottom: var(--margin-bloques);
    background-color: var(--gris-04-claro);
}

.seccion-bloque-final .col_7_12, .seccion-bloque-final .texto {
    display: flex;
    align-items: flex-start;
}

.seccion-bloque-final .col_7_12 {
    padding-left: calc(100% / 12);
}

.seccion-bloque-final .texto {
    justify-content: flex-end;
}

.seccion-bloque-final .col_7_12 > div {
    flex:1;
}

.seccion-bloque-final .cta {
    text-align: right;
}

.seccion-bloque-final .texto p{
    font-weight: 500;
    font-size: var(--size-28);
    color: var(--azul);
    width: 70%;
}


.seccion-bloque-final h2{
    text-decoration: underline;
}

@media (max-width: 1350px) { 
	.mapa .descripcion, .mapa .numero {
		padding: var(--margin-elementos) var(--padding-interior);
	}
}

@media only screen and (max-width: 1250px) {  
    .supervoluntario-item {
        width: calc(100% / 3 - var(--margin-bloques));
    }
    .supervoluntario-image-wrapper {
        width: 90px;
        min-width: 90px;
        height: 90px;
    }

    .seccion-bloque-final .col_7_12, .seccion-bloque-final .texto {
        flex-direction: column;
        gap: var(--margin-elementos);
    }

    .seccion-bloque-final .texto p{
        width: 100%;
    }

    .mapa .dato .numero, .mapa .dato .texto {
        width: 100%;
    }

    .mapa .dato {
        padding-top: var(--margin-elementos-int);
    }
}

@media only screen and (max-width: 1024px) { 
    .seccion-titulo h1 {
        width: 100%;
    }

    .mapa .dato .numero, .mapa .dato .texto, .mapa .descripcion {
		padding-right: 0;
		padding-left: calc(var(--margin-elementos-int) / 2);
	}

    .mapa .col_4_6, .mapa .col_2_6{
        width: calc(100% / 2) !important;
    }
    
    .mapa .imagen {
        padding-right: 0;
        border-right: none;
    }

    .banner-datos .cabecera .texto p {
        max-width: 100%;
    }

    .datos .dato:first-child {
        padding-top: 0;
    }

    
}

@media only screen and (max-width: 950px) { 

    .cita .col_7_12 {
        width: 100% !important;
    }

    .fondo_rojo .row {
        flex-wrap: wrap;
    }

    .fondo_rojo .row > div:not(:last-of-type) {
        margin-bottom: var(--margin-bloques);
        margin-right: 0;
    }

    .fondo_rojo .row > div {
        width: 100%;
        flex: none;
    }

     .supervoluntario-item {
        width: calc(100% / 2 - var(--margin-bloques));
    }
}

@media only screen and (max-width: 900px) { 

    .cita .col_7_12 {
        width: 100% !important;
    }
}


@media only screen and (max-width: 768px) {  

    .mapa .col_4_6, .mapa .col_2_6 {
        width: 100% !important;
    }

    .mapa .dato {
        padding-top: 0;
    }

    .mapa .imagen, .mapa {
		border: none;
	}

    .mapa .dato:last-of-type {
        border-bottom: 1px solid var(--azul);
    }

	.mapa .imagen {
		border-bottom: 1px solid var(--azul);
		padding-bottom: var(--margin-elementos-int);
		margin-bottom: var(--margin-elementos-int);
	}

	.mapa .dato, .mapa .descripcion {
		margin-left: 0;
	} 

    .banner-datos .dato .destacado, .banner-datos .dato .descripcion {
            padding-bottom: var(--margin-elementos-int);
    }

    .banner-datos .dato .destacado {
        padding: var(--margin-elementos) 0;
    }

    .banner-datos .datos .dato {
        padding-top: 0;
        padding-bottom: 0;
        border-bottom:1px solid var(--azul);
    }

    .seccion-bloque-final .col_7_12 {
        padding-left: 0;
    }

    .seccion-segunda-tarjeta .datos .dato {
        padding: var(--margin-elementos) 0;
    }

    .seccion-primera-tarjeta .descripcion.col_1_2 {
        margin-top: var(--margin-bloques);
    }

    .seccion-primera-tarjeta .testimonios .col_1_2:last-of-type, 
    .seccion-primera-tarjeta .testimonios .col_1_2:first-of-type{
        padding-left: 0;
        padding-right: 0;
    }

    .seccion-segunda-tarjeta .master {
        display: flex;
        align-items: center;
        gap: var(--margin-elementos);
        padding: 0;
        padding-bottom: var(--margin-elementos);
    }

    .seccion-segunda-tarjeta .masters {
        margin-top: var(--margin-bloques);
    }

    .seccion-segunda-tarjeta h2 {
        margin-bottom: 0;
    }

    .seccion-segunda-tarjeta .master .imagen {
        max-width: 70px;
        width: 70px;
        min-width: 70px;
    }

    .mapa, .mapa .imagen {
		border: none;
		padding: 0;
	}

	.mapa .dato, .mapa .descripcion{
		margin-left: 0;
	}

	.mapa .imagen {
		border-bottom: 1px solid var(--azul);
		padding-bottom: var(--margin-elementos-int);
		margin-bottom: var(--margin-elementos-int);
	}
}

@media only screen and (max-width: 765px) {   
    .supervoluntario-item {
        width: calc(100%);
    }

    .supervoluntario-image-wrapper {
        min-width: 70px;
        width: 70px;
        height: 70px;
    }

     .seccion-segunda-tarjeta .master .imagen {
        max-width: 55px;
        width: 55px;
        min-width: 55px;
    }
}

@media only screen and (max-width: 400px) {   
     .seccion-segunda-tarjeta .master {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--margin-elementos);
    }
}