/* Bloque sobre-estudio — titular a dos tonos, tres fotos y cifras. */

.bl-sobre-cont { max-width: 1180px; margin: 0 auto; padding: var(--bl-aire, 72px) 20px; }

.bl-sobre-antetitulo {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 15px; color: #6b6b6b; margin: 0 0 22px;
}
.bl-sobre-antetitulo::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-rosa, #f8bcca); flex: none;
}

/* El titular va en el color suave y lo que el editor marque en <strong> sale
   en el fuerte. Es al revés de lo habitual, pero es como funciona la
   referencia: la primera frase pesa y el resto acompaña. */
.bl-sobre-titulo {
    font-size: clamp(28px, 3.6vw, 52px); line-height: 1.14; font-weight: 700;
    margin: 0 0 18px; color: var(--bl-sobre-suave, #9a9a9a);
}
.bl-sobre-titulo strong { color: var(--bl-sobre-fuerte, #1a1a1a); font-weight: 700; }
.bl-sobre-texto { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; color: #5a5a5a; max-width: 720px; margin: 0; }

.bl-sobre-fotos {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin: clamp(32px, 4vw, 56px) 0 0;
}
.bl-sobre-foto {
    position: relative; border-radius: 16px; overflow: hidden;
    aspect-ratio: 4 / 3; background: #ece9e4;
}
.bl-sobre-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-sobre-foto.es-hueco::after {
    content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(0,0,0,.26); border-radius: 12px;
}

.bl-sobre-cifras {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin: clamp(40px, 5vw, 76px) 0 0;
}
.bl-sobre-cifra-valor {
    font-size: clamp(34px, 3.8vw, 54px); font-weight: 700; line-height: 1;
    color: var(--bl-sobre-fuerte, #1a1a1a); margin: 0 0 8px;
}
.bl-sobre-cifra-etq { font-size: 15px; color: #6b6b6b; line-height: 1.4; margin: 0; }

@media (max-width: 760px) {
    .bl-sobre-cont { padding: var(--bl-aire, 48px) 16px; }
    .bl-sobre-fotos { grid-template-columns: 1fr; gap: 12px; }
    .bl-sobre-foto { aspect-ratio: 16 / 10; }
    .bl-sobre-cifras { grid-template-columns: 1fr 1fr; }
}