/*====================================
QUIÉNES SOMOS
====================================*/

.qs-hero{

    height:430px;

    background:

    url("../img/quienes-somos/hero.jpg")

    center center/cover

    no-repeat;

}

.qs-hero-overlay{

    height:100%;

    background:rgba(0,0,0,.35);

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.qs-hero h1{

    color:#fff;

    font-size:58px;

    font-weight:300;

}

/*====================================
VIDEO
====================================*/

.qs-video{

    padding:90px 0;

    background:#ffffff;

}

.video-wrapper{

    max-width:1000px;

    margin:auto;

    aspect-ratio:16 / 9;

}

.video-wrapper iframe{

    width:100%;

    height:100%;

}

/*====================================
PRESENTACIÓN
====================================*/

.qs-presentacion{

    padding:90px 0;

    text-align:center;

}

.qs-presentacion h2{

    max-width:850px;

    margin:0 auto 30px;

    color:#810923;

    font-size:40px;

    line-height:1.3;

    font-weight:300;

}

.qs-presentacion p{

    max-width:900px;

    margin:0 auto 45px;

    color:#4d5966;

    font-size:20px;

    line-height:1.9;

}

/* ============================================
   QUIÉNES SOMOS — DONANTE RECURRENTE
============================================ */

.qs-donante {

    width: 100%;

    margin: 0;

    padding: 0;

    background: #ffffff;

}

.qs-donante-link {

    position: relative;

    display: block;

    width: 100%;

    min-height: 520px;

    overflow: hidden;
}

.qs-donante-link img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .4s ease;
}

.qs-donante-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    padding: 55px;

    background:
        linear-gradient(
            to left,
            rgba(0,0,0,.35),
            rgba(0,0,0,0)
        );
}

.qs-donante h2 {
    margin: 0;

    color: #ffffff;

    font-size: 50px;
    line-height: 1.1;
    font-weight: 700;

    text-align: right;
}

.qs-donante-link:hover img {
    transform: scale(1.025);
}

@media (max-width: 768px) {

    .qs-donante-link {
        min-height: 330px;
    }

    .qs-donante-overlay {
        padding: 30px 22px;
    }

    .qs-donante h2 {
        font-size: 34px;
    }
}

/* ============================================
   QUIÉNES SOMOS — VOLUNTARIADO
============================================ */

/* ============================================
   QUIÉNES SOMOS — VOLUNTARIADO
============================================ */

.qs-voluntariado-banner {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.qs-voluntariado-overlay {
    width: 100%;
    min-height: 520px;

    display: flex;
    align-items: center;

    padding: 59px 0 118px;

    background: rgba(0,0,0,.28);
}

.qs-voluntariado-overlay .container {
    text-align: center;
}

.qs-voluntariado-banner h2 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: 50px;
    line-height: 1.15;
    font-weight: 700;
}

@media (max-width: 768px) {

    .qs-voluntariado-banner,
    .qs-voluntariado-overlay {
        min-height: 380px;
    }

    .qs-voluntariado-overlay {
        padding: 60px 0;
    }

    .qs-voluntariado-banner h2 {
        font-size: 36px;
    }
}

.qs-voluntariado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 460px;
    background: #ffffff;
}

.qs-voluntariado-imagen {
    min-height: 460px;
}

.qs-voluntariado-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.qs-voluntariado-contenido {
    display: flex;
    align-items: center;
    padding: 55px 0;
}

.qs-voluntariado-contenido .container {
    width: min(500px, 80%);
}

.qs-voluntariado h2 {
    margin: 10px 0 20px;
    font-size: 38px;
}

.qs-voluntariado p {
    font-size: 17px;
    line-height: 1.75;
}

@media (max-width: 850px) {

    .qs-voluntariado {
        grid-template-columns: 1fr;
    }

    .qs-voluntariado-imagen {
        min-height: 360px;
    }

    .qs-voluntariado-contenido .container {
        width: min(650px, 90%);
    }
}

/* ============================================
   QUIÉNES SOMOS — TALLERES SOCIALES
============================================ */

.qs-talleres {
    padding: 90px 0;
    background: #ffffff;
}

.talleres-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.taller-flip {
    perspective: 1000px;
    min-height: 340px;
}

.taller-flip-inner {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 340px;

    transition: transform .6s;
    transform-style: preserve-3d;
}

.taller-flip:hover .taller-flip-inner {
    transform: rotateY(180deg);
}

.taller-front,
.taller-back {
    position: absolute;
    inset: 0;

    backface-visibility: hidden;

    overflow: hidden;

    background: #ffffff;
}

.taller-front {
    border: 1px solid #ececec;
}

.taller-front img {
    display: block;

    width: 100%;
    height: 245px;

    object-fit: cover;
}

.taller-front h3 {
    margin: 0;
    padding: 22px 18px;

    color: #810923;

    font-size: 21px;
    line-height: 1.25;

    text-align: center;
}

.taller-back {
    transform: rotateY(180deg);

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

    padding: 30px;

    background: #810923;
}

.taller-back p {
    margin: 0;

    color: #ffffff;

    font-size: 18px;
    line-height: 1.7;

    text-align: center;
}

@media (max-width: 1000px) {

    .talleres-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .talleres-grid {
        grid-template-columns: 1fr;
    }

}

/* ============================================
   QUIÉNES SOMOS — TESTIMONIOS
============================================ */

.qs-testimonios {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.qs-testimonios-overlay {
    padding: 95px 0;
    background: rgba(0,0,0,.48);
}

.qs-testimonios-slider {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.qs-testimonios-track {
    position: relative;
    min-height: 360px;
}

.qs-testimonio-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition: opacity .35s ease;
}

.qs-testimonio-slide.active {
    opacity: 1;
    visibility: visible;
}

.qs-testimonio-slide img {
    width: 150px;
    height: 150px;

    margin: 0 auto 24px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid #ffffff;
}

.qs-testimonio-slide h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 700;
}

.qs-testimonio-slide span {
    color: rgba(255,255,255,.85);

    font-size: 16px;
}

.qs-testimonio-prev,
.qs-testimonio-next {
    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.9);
    color: #810923;

    font-size: 32px;

    cursor: pointer;
}

.qs-testimonio-prev {
    left: -70px;
}

.qs-testimonio-next {
    right: -70px;
}

.qs-testimonios-dots {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 28px;
}

.qs-testimonios-dots button {
    width: 10px;
    height: 10px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.45);

    cursor: pointer;
}

.qs-testimonios-dots button.active {
    background: #ffffff;
}

@media (max-width: 900px) {

    .qs-testimonio-prev {
        left: 10px;
    }

    .qs-testimonio-next {
        right: 10px;
    }

}

/* ============================================
   QUIÉNES SOMOS — DONANTES
============================================ */

.qs-donantes {
    padding: 70px 0;
    background: #ffffff;
}

.qs-donantes h2 {
    margin: 0 0 50px;

    text-align: center;

    color: #840707;

    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.qs-donantes-imagen {
    width: 100%;
}

.qs-donantes-imagen img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;
}

@media (max-width: 768px) {

    .qs-donantes {
        padding: 55px 20px;
    }

    .qs-donantes h2 {
        margin-bottom: 30px;
        font-size: 32px;
    }

}

/* ============================================
   PROPÓSITO DE FUNDACIÓN
============================================ */

.proposito-hero {
    min-height: 500px;
    background-size: cover;
    background-position: center;
}

.proposito-hero-overlay {
    min-height: 500px;

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

    background: rgba(0,0,0,.32);

    text-align: center;
}

.proposito-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: 58px;
    line-height: 1.1;
    font-weight: 700;
}

.proposito-enfoque {
    padding: 90px 0;
    background: #ffffff;
}

.proposito-enfoque-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 70px;
    align-items: center;
}

.proposito-slider {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

.proposito-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity .5s ease;
}

.proposito-slide.active {
    opacity: 1;
}

.proposito-enfoque h2 {
    margin: 0 0 25px;

    color: #263746;

    font-size: 38px;
    line-height: 1.25;
    font-weight: 300;
}

.proposito-enfoque h2 strong {
    display: block;
    color: #810923;
    font-weight: 700;
}

.proposito-enfoque p {
    margin: 0;

    color: #4d5966;

    font-size: 18px;
    line-height: 1.8;
}

.proposito-comunidades {
    min-height: 520px;

    background-size: cover;
    background-position: center;
}

.proposito-comunidades-overlay {
    min-height: 520px;

    display: flex;
    align-items: center;

    background: rgba(0,0,0,.35);
}

.proposito-comunidades h2 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: 48px;
    line-height: 1.15;
    font-weight: 300;
}

.proposito-comunidades h2 strong {
    font-weight: 700;
}

@media (max-width: 850px) {

    .proposito-enfoque-grid {
        grid-template-columns: 1fr;
    }

    .proposito-hero h1 {
        font-size: 40px;
    }

    .proposito-comunidades h2 {
        font-size: 36px;
    }

}

/* ============================================
   COMUNIDAD ODS
============================================ */

.ods-hero{

    min-height:560px;

    background-size:cover;
    background-position:center;

}

.ods-hero-overlay{

    min-height:560px;

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

    text-align:center;

    background:rgba(0,0,0,.35);

}

.ods-logo{

    width:180px;

    margin-bottom:30px;

}

.ods-hero h1{

    color:#ffffff;

    font-size:62px;

    font-weight:700;

}

.ods-beneficios{

    padding:90px 0;

}

.ods-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.ods-imagen img{

    width:100%;

    display:block;

}

.ods-texto h2{

    margin-bottom:25px;

    color:#840707;

    font-size:42px;

}

.ods-texto p{

    margin-bottom:18px;

    color:#4d5966;

    line-height:1.9;

    font-size:18px;

}

@media(max-width:900px){

    .ods-grid{

        grid-template-columns:1fr;

    }

}

/* ============================================
   COMUNIDAD ODS — VENTAJAS
============================================ */

.ods-ventajas{

    padding:90px 0;

    background:#f8f8f8;

}

.ods-ventajas .ods-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.ods-cta{

    min-height:520px;

    background-size:cover;
    background-position:center;

}

.ods-cta-overlay{

    min-height:520px;

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

    text-align:center;

    background:rgba(0,0,0,.35);

}

.ods-cta h2{

    color:#ffffff;

    font-size:58px;

    line-height:1.15;

    margin-bottom:35px;

    font-weight:300;

}

.ods-cta h2 strong{

    font-weight:700;

}

@media(max-width:900px){

    .ods-ventajas .ods-grid{

        grid-template-columns:1fr;

    }

    .ods-cta h2{

        font-size:38px;

    }

}

/*============================================
ECOBLOCK
============================================*/

.ecoblock-hero{

    min-height:560px;

    background-size:cover;
    background-position:center;

}

.ecoblock-hero-overlay{

    min-height:560px;

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

    background:rgba(0,0,0,.35);

    text-align:center;

}

.ecoblock-hero h1{

    color:#fff;

    font-size:64px;

    font-weight:700;

}

.ecoblock-intro{

    padding:90px 0;

    text-align:center;

}

.ecoblock-intro h2{

    margin-bottom:28px;

    color:#840707;

    font-size:42px;

}

.ecoblock-intro p{

    max-width:900px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:#4d5966;

}

/* ============================================
   ECOBLOCK — ¿POR QUÉ ES ECO?
============================================ */

.ecoblock-eco{

    padding:90px 0;

     background:#810923;

}

.ecoblock-eco h2{

    margin-bottom:60px;

    text-align:center;

        color:#ffffff;

    font-size:42px;

}

.eco-grid{

    display:grid;

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

    gap:30px;

}

.eco-item{

    text-align:center;

}

.eco-item img{

    width:90px;

    height:90px;

    object-fit:contain;

    margin-bottom:22px;

}

.eco-item h3{

    margin-bottom:14px;

        color:#ffffff;

    font-size:20px;

}

.eco-item p{

       color:rgba(255,255,255,.85);

    line-height:1.7;

    font-size:15px;

}

.ecoblock-eco{

    padding:90px 0;

    background:linear-gradient(
        135deg,
        #8b0822 0%,
        #a50d28 100%
    );

}

@media(max-width:1100px){

    .eco-grid{

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

    }

}

@media(max-width:768px){

    .eco-grid{

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

    }

}

@media(max-width:520px){

    .eco-grid{

        grid-template-columns:1fr;

    }

}

/* ============================================
   ECOBLOCK — MÁQUINA TERRAPRESS
============================================ */

.ecoblock-maquina{

    padding:100px 0;

    background:#ffffff;

}

.maquina-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:70px;

    align-items:center;

}

.maquina-info h2{

    margin-bottom:30px;

    color:#840707;

    font-size:42px;

}

.maquina-info p{

    margin-bottom:22px;

    color:#4d5966;

    font-size:18px;

    line-height:1.8;

}

.maquina-imagen img{

    width:100%;

    display:block;

}

@media(max-width:900px){

    .maquina-grid{

        grid-template-columns:1fr;

    }

}

/*============================================
RECONSTRUCCIÓN
============================================*/

.reconstruccion-hero{

    min-height:560px;

    background-size:cover;
    background-position:center;

}

.reconstruccion-hero-overlay{

    min-height:560px;

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

    background:rgba(0,0,0,.35);

}

.reconstruccion-hero h1{

    color:#fff;

    font-size:62px;

    font-weight:700;

    text-align:center;

}

.reconstruccion-intro{

    padding:90px 0;

}

.reconstruccion-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.reconstruccion-imagen img{

    width:100%;

    display:block;

}

.reconstruccion-texto h2{

    color:#840707;

    font-size:42px;

    margin-bottom:25px;

}

.reconstruccion-texto p{

    font-size:18px;

    line-height:1.9;

    color:#4d5966;

}

@media(max-width:900px){

    .reconstruccion-grid{

        grid-template-columns:1fr;

    }

}

/* ============================================
   RECONSTRUCCIÓN — GALERÍA
============================================ */

.reconstruccion-galeria{

    padding:90px 0;

    background:#f8f8f8;

}

.reconstruccion-galeria h2{

    text-align:center;

    color:#840707;

    font-size:42px;

    margin-bottom:45px;

}

.reconstruccion-galeria-grid{

    display:grid;

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

    gap:22px;

}

.reconstruccion-galeria-grid img{

    width:100%;

    display:block;

    border-radius:8px;

}

.reconstruccion-proceso{

    padding:90px 0;

}

.reconstruccion-cta{

    min-height:520px;

    background-size:cover;

    background-position:center;

}

.reconstruccion-cta-overlay{

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:rgba(0,0,0,.35);

}

.reconstruccion-cta h2{

    color:#ffffff;

    font-size:56px;

    line-height:1.15;

    margin-bottom:35px;

    font-weight:300;

}

.reconstruccion-cta h2 strong{

    font-weight:700;

}

@media(max-width:900px){

    .reconstruccion-galeria-grid{

        grid-template-columns:1fr;

    }

}