/* =====================================================
   BLOQUE: Quienes Somos
   Metodología: Desktop First
   Breakpoint móvil: max-width 1023px
   ===================================================== */

/* Variables CSS del proyecto */
:root {
    --qs-verde: var(--wp--preset--color--custom-verde, #40BC84);
    --qs-azul: var(--wp--preset--color--custom-azul, #005E9E);
    --qs-celeste: var(--wp--preset--color--custom-celeste, #00BFFF);
    --qs-negro: var(--wp--preset--color--custom-negro, #242424);
    --qs-corridos: var(--wp--preset--color--custom-corridos, #272727);
    --qs-azul-oscuro: var(--wp--preset--color--custom-azul-oscuro, #2d3975);
    --qs-font-gazzeta: var(--wp--preset--font-family--gazzeta-variable, 'Gazzeta Variable', serif);
    --qs-font-barlow: var(--wp--preset--font-family--barlow, 'Barlow', sans-serif);
    --qs-content-size: var(--wp--style--global--content-size, 880px);
    --qs-wide-size: var(--wp--style--global--wide-size, 1280px);
}

/* Reset base del bloque */
.quienes-somos,
.quienes-somos-editor {
    box-sizing: border-box;
    width: 100%;
}

.quienes-somos *,
.quienes-somos-editor * {
    box-sizing: border-box;
}

/* =====================================================
   SECCIÓN: Hero
   ===================================================== */
.quienes-somos-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: var(--hero-padding-top, 155px);
    padding-bottom: var(--hero-padding-bottom, 130px);
    padding-left: 20px;
    padding-right: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.quienes-somos-hero__contenedor {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--qs-wide-size);
    position: relative;
    z-index: 1;
}

.quienes-somos-hero__contenido {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 738px;
    color: #fff;
}

.quienes-somos-hero__volanta {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: var(--hero-volanta-size, 40px);
    line-height: 0.9;
    text-transform: uppercase;
    opacity: 0.6;
    margin: 0;
    max-width: 135px;
}

.quienes-somos-hero__titulo {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: var(--hero-titulo-size, 100px);
    line-height: 0.9;
    text-transform: uppercase;
    max-width: 630px;
    margin: 0;
    color: #fff;
}

.quienes-somos-hero__bajada-wrapper {
    flex: 1;
    min-height: 1px;
    width: 100%;
}

.quienes-somos-hero__bajada-wrapper p,
.quienes-somos-hero__bajada {
    font-family: var(--qs-font-barlow) !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.35;
    color: #fff;
    margin: 0 0 13px 0;
    max-width: 738px;

}

.quienes-somos-hero__bajada-wrapper p:last-child {
    margin-bottom: 0;
}

.quienes-somos-hero__bajada-wrapper strong,
.quienes-somos-hero__bajada-wrapper b {
    font-weight: 700;
}

/* =====================================================
   SECCIÓN: Bloque de texto
   ===================================================== */
.quienes-somos-bloque-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: var(--bloque-texto-padding-top, 75px);
    padding-bottom: var(--bloque-texto-padding-bottom, 75px);
    padding-left: 20px;
    padding-right: 20px;
}

.quienes-somos-bloque-texto__contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--qs-content-size);
}

.quienes-somos-bloque-texto__contenido {
    font-family: var(--qs-font-barlow) !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--qs-corridos);
    width: 100%;
    max-width: 846px;
}

.quienes-somos-bloque-texto__contenido p {
    margin: 0 0 13px 0;
}

.quienes-somos-bloque-texto__contenido p:last-child {
    margin-bottom: 0;
}

.quienes-somos-bloque-texto__contenido strong,
.quienes-somos-bloque-texto__contenido b {
    font-weight: 600;
}

/* =====================================================
   SECCIÓN: Qué hacemos
   ===================================================== */
.quienes-somos-que-hacemos {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: var(--que-hacemos-padding-top, 95px);
    padding-bottom: var(--que-hacemos-padding-bottom, 94px);
    padding-left: 20px;
    padding-right: 20px;
    background-color:  rgba(0, 191, 255, 0.05);
    /* Evita que el color semitransparente mezcle con fondos debajo */
    isolation: isolate;
    mix-blend-mode: normal;
    border-radius: 5px;
    overflow: hidden;
}

.quienes-somos-que-hacemos__contenedor {
    display: flex;
    flex-direction: column;
    gap: 65px;
    width: 100%;
    max-width: var(--qs-wide-size);
}

.quienes-somos-que-hacemos__header {
    display: flex;
    flex-direction: column;
    gap: 13px;
    max-width: 629px;
}

.quienes-somos-que-hacemos__titulo {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: var(--que-hacemos-titulo-size, 130px);
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--qs-azul);
    margin: 0;
}

.quienes-somos-que-hacemos__bajada {
    font-family: var(--qs-font-barlow) !important;
    font-weight: 500;
    font-size: var(--que-hacemos-bajada-size, 18px);
    line-height: 1.4;
    color: var(--qs-negro);
    margin: 0;
}

/* Grilla de cards */
.quienes-somos-que-hacemos__grilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    width: 100%;
}

.quienes-somos-que-hacemos__card {
    display: flex;
    flex-direction: column;
    gap: 73px;
    background-color: #fff;
    border-radius: 5px;
    padding: 36px 31px 55px 24px;
    min-height: 393px;
    min-width: 306px;
}

.quienes-somos-que-hacemos__card:hover {
    background: linear-gradient(135deg, var(--qs-azul) 0%, #005E9E 100%);
    color: #fff;
}

.quienes-somos-que-hacemos__card:hover .quienes-somos-que-hacemos__card-titulo,
.quienes-somos-que-hacemos__card:hover .quienes-somos-que-hacemos__card-descripcion {
    color: #fff;
}

.quienes-somos-que-hacemos__card:hover .quienes-somos-que-hacemos__card-icono {
    color: #fff;
}

.quienes-somos-que-hacemos__card-icono {
    width: 60px;
    height: 48px;
    color: var(--qs-negro);
}

.quienes-somos-que-hacemos__card-icono svg {
    width: 100%;
    height: 100%;
}

.quienes-somos-que-hacemos__card-contenido {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quienes-somos-que-hacemos__card-titulo {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: 54px;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--qs-negro);
    margin: 0;
}

.quienes-somos-que-hacemos__card-descripcion {
    font-family: var(--qs-font-barlow) !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--qs-negro);
    margin: 0;
}

/* =====================================================
   SECCIÓN: Mesa directiva
   ===================================================== */
.quienes-somos-mesa-directiva {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: var(--mesa-padding-top, 100px);
    padding-bottom: var(--mesa-padding-bottom, 215px);
    padding-left: 20px;
    padding-right: 20px;
}

.quienes-somos-mesa-directiva__contenedor {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
    max-width: 1076px;
}

.quienes-somos-mesa-directiva__header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 700px;
}

.quienes-somos-mesa-directiva__titulo {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: var(--mesa-titulo-size, 100px);
    line-height: 0.9;
    text-transform: uppercase;
    color: #005e9e;
    margin: 0;
}

.quienes-somos-mesa-directiva__bajada {
    font-family: var(--qs-font-barlow) !important;
    font-weight: 500;
    font-size: var(--mesa-bajada-size, 18px);
    line-height: 1.4;
    color: var(--qs-negro);
    margin: 0;
}

/* Grilla de cards */
.quienes-somos-mesa-directiva__grilla {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 42px 40px;
    width: 100%;
}

/* Card destacada (primer item - Hermes Binner) */
.quienes-somos-mesa-directiva__card--destacada {
    grid-column: span 2;
}

.quienes-somos-mesa-directiva__card--destacada .quienes-somos-mesa-directiva__card-foto {
    width: 100%;
}

.quienes-somos-mesa-directiva__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quienes-somos-mesa-directiva__card-foto {
    position: relative;
    width: 200px;
    height: 255px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.quienes-somos-mesa-directiva__card-foto img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quienes-somos-mesa-directiva__card-foto-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    color: #999;
    font-size: 14px;
}

.quienes-somos-mesa-directiva__card-contenido {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quienes-somos-mesa-directiva__card-nombre {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: 40px;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--qs-negro);
    margin: 0;
}

.quienes-somos-mesa-directiva__card-cargo {
    font-family: var(--qs-font-barlow) !important;
    font-weight: 700;
    font-size: 12px;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--qs-verde);
}

/* Corrimiento de la primera card de la fila 2 */
.quienes-somos-mesa-directiva__card:nth-child(5) {
    grid-column-start: 2;
}

/* Corrimiento de la primera card de la fila 3 */
.quienes-somos-mesa-directiva__card:nth-child(9) {
    grid-column-start: 2;
}

/* =====================================================
   SECCIÓN: Últimas novedades
   ===================================================== */
.quienes-somos-novedades {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: var(--novedades-padding-top, 0);
    padding-bottom: var(--novedades-padding-bottom, 100px);
    padding-left: 10px;
    padding-right: 10px;
}

.quienes-somos-novedades__contenedor {
    display: flex;
    flex-direction: column;
    gap: 35px;
    align-items: center;
    width: 100%;
}

.quienes-somos-novedades__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--qs-wide-size);
}

.quienes-somos-novedades__titulo {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: var(--novedades-titulo-size, 100px);
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--qs-negro);
    margin: 0;
}

.quienes-somos-novedades__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 19px 25px;
    background: linear-gradient(135deg, var(--qs-azul) 0%, #005E9E 100%);
    border-radius: 5px;
    text-decoration: none;
    min-width: 159px;
    min-height: 53px;
    transition: transform 0.2s ease;
}

.quienes-somos-novedades__boton:hover {
    transform: scale(1.03);
}

.quienes-somos-novedades__boton-texto {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: 32px;
    line-height: 0.9;
    text-transform: uppercase;
    color: #fff;
}

.quienes-somos-novedades__boton-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    
}

.quienes-somos-novedades__boton-icono svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

/* Preview en editor */
.quienes-somos-novedades__boton-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 19px 25px;
    background: linear-gradient(135deg, var(--qs-azul) 0%, #005E9E 100%);
    border-radius: 5px;
    min-width: 170px;
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: 36px;
    line-height: 0.9;
    text-transform: uppercase;
    color: #fff;
}

.quienes-somos-novedades__boton-preview svg {
    transform: rotate(45deg);
}

/* Grilla de novedades */
.quienes-somos-novedades__grilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: var(--qs-wide-size);
}

.quienes-somos-novedades__preview {
    width: 100%;
    max-width: var(--qs-wide-size);
}

/* Card de novedad */

.quienes-somos-novedades__card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: rgba(0, 191, 255, 0.05);
    text-decoration: none;
    transition: transform 0.2s ease;
    height: 100%;
}

.quienes-somos-novedades__card:hover {
    transform: scale(1.02);
}

.quienes-somos-novedades__card-foto {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}

.quienes-somos-novedades__card-foto img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quienes-somos-novedades__card-contenido {
    display: flex;
    flex-direction: column;
    gap: 69px;
    padding: 0 80px 35px 30px;
    flex: 1;
}

.quienes-somos-novedades__card-titulo {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: 40px;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--qs-negro);
    margin: 0;
}

.quienes-somos-novedades__card-leer-mas {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.quienes-somos-novedades__card-leer-mas-texto {
    font-family: var(--qs-font-gazzeta);
    font-weight: 700;
    font-size: 32px;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--qs-azul);
}

.quienes-somos-novedades__card-leer-mas-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.quienes-somos-novedades__card-leer-mas-icono svg {
    width: 14px;
    height: 14px;
    color: var(--qs-azul);
}

.quienes-somos-inner-blocks {
    padding-bottom: 60px;
}

/* =====================================================
   RESPONSIVE: Tablet y Mobile (max-width: 1023px)
   ===================================================== */
@media (max-width: 1023px) {
    /* Hero */
    .quienes-somos-hero {
        padding-top: var(--hero-padding-top-mobile, 80px);
        padding-bottom: var(--hero-padding-bottom-mobile, 60px);
    }

    .quienes-somos-hero__volanta {
        font-size: var(--hero-volanta-size-mobile, 24px);
    }

    .quienes-somos-hero__titulo {
        font-size: var(--hero-titulo-size-mobile, 48px);
        max-width: 100%;
    }

    .quienes-somos-hero__contenido {
        max-width: 100%;
    }

    .quienes-somos-hero__bajada-wrapper p,
    .quienes-somos-hero__bajada {
        font-size: 16px;
    }

    /* Bloque de texto */
    .quienes-somos-bloque-texto {
        padding-top: var(--bloque-texto-padding-top-mobile, 40px);
        padding-bottom: var(--bloque-texto-padding-bottom-mobile, 40px);
    }

    .quienes-somos-bloque-texto__contenido {
        font-size: 16px;
    }

    /* Qué hacemos */
    .quienes-somos-que-hacemos {
        padding-top: var(--que-hacemos-padding-top-mobile, 60px);
        padding-bottom: var(--que-hacemos-padding-bottom-mobile, 60px);
    }

    .quienes-somos-que-hacemos__contenedor {
        gap: 40px;
    }

    .quienes-somos-que-hacemos__titulo {
        font-size: var(--que-hacemos-titulo-size-mobile, 48px);
    }

    .quienes-somos-que-hacemos__bajada {
        font-size: var(--que-hacemos-bajada-size-mobile, 16px);
    }

    .quienes-somos-que-hacemos__grilla {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .quienes-somos-que-hacemos__card {
        gap: 30px;
        min-height: auto;
        padding: 25px 20px;
    }

    .quienes-somos-que-hacemos__card-titulo {
        font-size: 36px;
    }

    .quienes-somos-que-hacemos__card-descripcion {
        font-size: 14px;
    }

    /* Mesa directiva */
    .quienes-somos-mesa-directiva {
        padding-top: var(--mesa-padding-top-mobile, 60px);
        padding-bottom: var(--mesa-padding-bottom-mobile, 80px);
    }

    .quienes-somos-mesa-directiva__contenedor {
        gap: 35px;
    }

    .quienes-somos-mesa-directiva__titulo {
        font-size: var(--mesa-titulo-size-mobile, 48px);
    }

    .quienes-somos-mesa-directiva__bajada {
        font-size: var(--mesa-bajada-size-mobile, 16px);
    }

    .quienes-somos-mesa-directiva__grilla {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .quienes-somos-mesa-directiva__card--destacada {
        grid-column: span 2;
    }

    .quienes-somos-mesa-directiva__card-foto {
        width: 100%;
        height: 200px;
    }

    .quienes-somos-mesa-directiva__card-nombre {
        font-size: 28px;
    }

    /* Novedades */
    .quienes-somos-novedades {
        padding-top: var(--novedades-padding-top-mobile, 40px);
        padding-bottom: var(--novedades-padding-bottom-mobile, 60px);
        
    }

    .quienes-somos-novedades__header {
        
        gap: 20px;
        display: flex;
        align-items: center; /* 👈 CLAVE */
        justify-content: space-between;
    }

    .quienes-somos-novedades__titulo {
        font-size: var(--novedades-titulo-size-mobile, 48px);
    }

    .quienes-somos-novedades__boton {
        width: 150px;
        height: 60px;
        min-width: auto;
    }

    .quienes-somos-novedades__boton-texto {
        font-size: 24px;
    }

    .quienes-somos-novedades__boton-preview {
        padding: 15px 20px;
        min-width: auto;
        font-size: 24px;
    }

    .quienes-somos-novedades__grilla {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .quienes-somos-novedades__card-foto {
        height: auto;
        aspect-ratio: 325 / 180;
        

    }

    .quienes-somos-novedades__card-contenido {
        gap: 40px;
        padding: 0 20px 30px;
    }

    .quienes-somos-novedades__card-titulo {
        font-size: 28px;
    }

    .quienes-somos-novedades__card-leer-mas-texto {
        font-size: 24px;
    }

    .quienes-somos-novedades__contenedor {
        position: relative;
        padding-bottom: 100px;
    }

    .quienes-somos-novedades__boton {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .quienes-somos-inner-blocks {
        padding-bottom: 20px;
    }

}

/* =====================================================
   ESTILOS DEL EDITOR
   ===================================================== */
.quienes-somos-editor .quienes-somos-hero__volanta[data-rich-text-placeholder]::before,
.quienes-somos-editor .quienes-somos-hero__titulo[data-rich-text-placeholder]::before {
    color: rgba(255, 255, 255, 0.5);
}

.quienes-somos-editor .block-editor-rich-text__editable:focus {
    outline: 2px solid var(--qs-azul);
    outline-offset: 2px;
}

.quienes-somos-editor .quienes-somos-hero .block-editor-inner-blocks {
    width: 100%;
}

.quienes-somos-editor section {
    margin-bottom: 0;
}