/* Estilos exclusivos de la página Quiénes somos */
:root {
    --hk-azul: #064b7d;
    --hk-turquesa: #13bfc7;
    --hk-coral: #ef936f;
    --hk-crema: #fff8f0;
    --hk-tinta: #35424c;
}

.pagina-nosotros {
    max-width: 1400px;
    margin: 0 auto;
    padding: 170px 28px 60px;
    color: var(--hk-tinta);
}
.pagina-nosotros p { line-height: 1.75; }
.nosotros-portada {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 46px;
    padding: 34px 20px 70px;
}
.portada-texto { max-width: 620px; }
.sobrelinea {
    margin: 0 0 12px;
    color: #087e91;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.portada-texto h1 {
    margin: 0 0 22px;
    color: var(--hk-azul);
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.08;
    letter-spacing: -.04em;
}
.portada-bajada { max-width: 590px; font-size: 1.12rem; }
.boton-calido {
    display: inline-block;
    margin-top: 14px;
    padding: 13px 23px;
    border-radius: 999px;
    background: var(--hk-coral);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 7px 18px rgba(190, 104, 73, .2);
    transition: transform .2s ease, background .2s ease;
}
.boton-calido:hover, .boton-calido:focus { background: #d97755; transform: translateY(-2px); }
.portada-imagen { position: relative; min-width: 0; }
.portada-imagen > img {
    display: block;
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 48% 48% 22px 22px;
    background: #e6f5f4;
    box-shadow: 0 18px 45px rgba(6, 75, 125, .15);
}
.sello-portada {
    position: absolute;
    right: -12px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: var(--hk-turquesa);
    color: #fff;
    line-height: 1.25;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.sello-portada span { font-size: .75rem; }
.seccion-nosotros { margin: 28px 0 76px; }
.nosotros-intro, .nosotros-valores, .familia-escuela {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
    padding: clamp(24px, 5vw, 58px);
    border-radius: 26px;
    background: #fff;
}
.intro-imagen img, .valores-imagen img, .familia-imagen img {
    display: block;
    width: 100%;
    max-height: 390px;
    object-fit: contain;
}
.familia-imagen img { object-fit: cover; border-radius: 20px; min-height: 260px; }
.intro-texto h2, .valores-texto h2, .familia-texto h2, .encabezado-seccion h2 {
    margin: 0 0 18px;
    color: var(--hk-azul);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1.2;
}
.dato-destacado {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    padding: 18px 22px;
    border-left: 5px solid var(--hk-coral);
    border-radius: 0 14px 14px 0;
    background: var(--hk-crema);
}
.dato-destacado strong { color: var(--hk-azul); font-size: 1.8rem; white-space: nowrap; }
.dato-destacado span { font-size: .94rem; }
.enfoque-nosotros { padding: 12px 10px 0; }
.encabezado-seccion { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.tarjetas-enfoque { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tarjeta-enfoque {
    padding: 28px 22px;
    border: 1px solid #e6eeee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(6, 75, 125, .06);
}
.icono-enfoque {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 16px;
    background: #e5f8f7;
    color: #087e91;
    font-size: 1.35rem;
    font-weight: 800;
}
.tarjeta-enfoque h3 { margin: 0 0 10px; color: var(--hk-azul); font-size: 1.15rem; }
.tarjeta-enfoque p { margin: 0; font-size: .96rem; }
.nosotros-valores { grid-template-columns: 1.15fr .85fr; background: #f0f9f8; }
.valores-imagen img { max-height: 330px; }
.cierre-nosotros {
    padding: clamp(34px, 6vw, 70px) 24px;
    border-radius: 28px;
    background: var(--hk-azul);
    color: #fff;
    text-align: center;
}
.cierre-nosotros .sobrelinea { color: #8ce7e4; }
.cierre-nosotros h2 { max-width: 760px; margin: 0 auto 16px; font-size: clamp(1.9rem, 3.5vw, 3rem); line-height: 1.2; }
.cierre-nosotros > p:not(.sobrelinea) { max-width: 700px; margin: 0 auto; }
.boton-claro { background: #fff; color: var(--hk-azul); }
.boton-claro:hover, .boton-claro:focus { background: #e5f8f7; color: var(--hk-azul); }
.enlace-menu { display: inline-block; }

@media (max-width: 950px) {
    .pagina-nosotros { padding: 155px 18px 40px; }
    .nosotros-portada { gap: 26px; padding: 24px 8px 50px; }
    .portada-imagen > img { height: 350px; }
    .tarjetas-enfoque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .pagina-nosotros { padding: 145px 12px 30px; }
    .nosotros-portada, .nosotros-intro, .nosotros-valores, .familia-escuela { grid-template-columns: 1fr; }
    .nosotros-portada { padding: 18px 4px 38px; }
    .portada-texto h1 { font-size: 2.55rem; }
    .portada-imagen { margin: 0 10px; }
    .portada-imagen > img { height: 300px; border-radius: 32% 32% 18px 18px; }
    .sello-portada { right: -7px; width: 92px; height: 92px; font-size: .9rem; }
    .seccion-nosotros { margin: 18px 0 42px; }
    .nosotros-intro, .nosotros-valores, .familia-escuela { padding: 24px 18px; gap: 22px; }
    .intro-imagen img { max-height: 230px; }
    .tarjetas-enfoque { grid-template-columns: 1fr; }
    .tarjeta-enfoque { padding: 24px; }
    .dato-destacado { align-items: flex-start; flex-direction: column; gap: 4px; }
    .familia-imagen { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .boton-calido { transition: none; }
}