/*
-------------------------------------------------------
Proyecto : Instituto Técnico Superior Santa Rosa
Sprint   : Web 1.5
Archivo  : institucion-premium.css
Versión  : 1.6.0
Fecha    : 04/08/2026
-------------------------------------------------------
*/

.sr-institution-page {
    overflow: hidden;
}

.sr-institution-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    background: #071f38;
    color: #fff;
}

.sr-institution-hero-bg,
.sr-institution-hero-overlay {
    position: absolute;
    inset: 0;
}

.sr-institution-hero-bg {
    background:
        url('../img/fachada-santa-rosa.webp') center/cover no-repeat;
}

.sr-institution-hero-overlay {
    background:
        linear-gradient(90deg, rgba(7,31,56,.97) 0%, rgba(7,31,56,.78) 55%, rgba(7,31,56,.48) 100%),
        linear-gradient(0deg, rgba(7,31,56,.42), transparent 40%);
}

.sr-institution-hero-inner {
    position: relative;
    z-index: 2;
    padding-top: 100px;
    padding-bottom: 100px;
}

.sr-institution-kicker {
    display: inline-block;
    margin-bottom: 22px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: #9fe8f2;
}

.sr-institution-hero h1 {
    max-width: 980px;
    margin: 0;
    color: #fff;
    font-size: clamp(3rem, 6vw, 6.2rem);
    line-height: .98;
    letter-spacing: -.05em;
}

.sr-institution-hero h1 em {
    color: #8eddea;
    font-family: 'Playfair Display', serif;
}

.sr-institution-hero p {
    max-width: 710px;
    margin: 28px 0 0;
    font-size: 1.18rem;
    line-height: 1.8;
    color: rgba(255,255,255,.8);
}

.sr-institution-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.sr-institution-intro-grid,
.sr-founder-grid,
.sr-director-grid,
.sr-resources-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 75px;
    align-items: start;
}

.sr-institution-intro h2,
.sr-section-heading h2,
.sr-founder-copy h2,
.sr-director-copy h2,
.sr-resources-copy h2 {
    margin: 12px 0 0;
    color: #071f38;
    font-size: clamp(2.25rem, 4vw, 4.3rem);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.sr-institution-intro-copy p,
.sr-founder-copy p,
.sr-director-copy p,
.sr-resources-copy p,
.sr-section-heading p {
    color: #687786;
    line-height: 1.82;
}

.sr-timeline-section {
    background: #f6f9fc;
}

.sr-section-heading {
    max-width: 850px;
    margin-bottom: 40px;
}

.sr-timeline-premium {
    position: relative;
    display: grid;
    gap: 0;
}

.sr-timeline-premium::before {
    content: "";
    position: absolute;
    left: 118px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(#4cb9ca, rgba(76,185,202,.08));
}

.sr-timeline-premium article {
    position: relative;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 45px;
    padding: 0 0 48px;
}

.sr-timeline-premium article::before {
    content: "";
    position: absolute;
    left: 110px;
    top: 8px;
    width: 18px;
    height: 18px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #4cb9ca;
    box-shadow: 0 0 0 1px rgba(14,58,102,.12);
}

.sr-timeline-year {
    font-size: 1.55rem;
    font-weight: 900;
    color: #0e3a66;
    text-align: right;
}

.sr-timeline-content {
    padding: 0 0 0 14px;
}

.sr-timeline-content > span {
    color: #4cb9ca;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.sr-timeline-content h3 {
    margin: 6px 0 8px;
    color: #071f38;
    font-size: 1.4rem;
}

.sr-timeline-content p {
    margin: 0;
    color: #687786;
    line-height: 1.65;
}

.sr-founder-section {
    background: #fff;
}

.sr-founder-grid {
    align-items: center;
}

.sr-founder-photo,
.sr-director-photo {
    position: relative;
    min-height: 620px;
    border-radius: 28px;
    overflow: hidden;
    background: #eef5fb;
}

.sr-founder-photo img,
.sr-director-photo img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.sr-founder-photo-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(7,31,56,.9);
    backdrop-filter: blur(10px);
    color: #fff;
}

.sr-founder-photo-label span,
.sr-founder-photo-label strong {
    display: block;
}

.sr-founder-photo-label span {
    margin-bottom: 4px;
    color: #8eddea;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.sr-founder-quote {
    font-family: 'Playfair Display', serif;
    font-size: 1.55rem;
    color: #0e3a66 !important;
}

.sr-founder-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.sr-founder-values span {
    padding: 9px 14px;
    border-radius: 999px;
    background: #eef5fb;
    color: #0e3a66;
    font-size: .84rem;
    font-weight: 800;
}

.sr-director-section {
    color: #fff;
    background:
        radial-gradient(circle at 15% 20%, rgba(76,185,202,.22), transparent 30%),
        linear-gradient(145deg, #071f38, #0e3a66);
}

.sr-director-grid {
    align-items: center;
}

.sr-director-copy h2 {
    color: #fff;
}

.sr-director-copy p {
    color: rgba(255,255,255,.74);
}

.sr-director-lead {
    font-size: 1.2rem;
    color: #fff !important;
}

.sr-director-pillars {
    display: grid;
    gap: 10px;
    margin-top: 30px;
}

.sr-director-pillars article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
    padding: 15px 18px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    background: rgba(255,255,255,.07);
}

.sr-director-pillars span {
    color: #8eddea;
    font-weight: 900;
}

.sr-director-photo {
    background: rgba(255,255,255,.08);
}

.sr-purpose-section {
    background: #f6f9fc;
}

.sr-purpose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.sr-purpose-card {
    min-height: 330px;
    padding: 42px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(14,58,102,.11);
}

.sr-purpose-card > span {
    color: #4cb9ca;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.sr-purpose-card h3 {
    margin: 20px 0 0;
    color: #071f38;
    font-size: clamp(1.7rem, 2.5vw, 2.6rem);
    line-height: 1.3;
}

.sr-purpose-card-dark {
    background: linear-gradient(145deg, #071f38, #0e3a66);
}

.sr-purpose-card-dark h3 {
    color: #fff;
}

.sr-values-grid,
.sr-infrastructure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.sr-values-grid article,
.sr-infrastructure-grid article {
    min-height: 220px;
    padding: 26px;
    border: 1px solid rgba(14,58,102,.11);
    border-radius: 20px;
    background: #fff;
}

.sr-values-grid article > span,
.sr-infrastructure-grid article > span {
    display: inline-block;
    margin-bottom: 28px;
    color: #4cb9ca;
    font-weight: 900;
}

.sr-values-grid h3,
.sr-infrastructure-grid h3 {
    margin: 0 0 10px;
    color: #071f38;
    font-size: 1.35rem;
}

.sr-values-grid p,
.sr-infrastructure-grid p {
    margin: 0;
    color: #687786;
    line-height: 1.65;
}

.sr-resources-section {
    background:
        radial-gradient(circle at 10% 20%, rgba(76,185,202,.2), transparent 28%),
        linear-gradient(145deg, #071f38, #0e3a66);
    color: #fff;
}

.sr-resources-copy h2 {
    color: #fff;
}

.sr-resources-copy p {
    color: rgba(255,255,255,.72);
}

.sr-resources-cards {
    display: grid;
    gap: 14px;
}

.sr-resources-cards article {
    padding: 24px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.07);
}

.sr-resources-cards strong {
    display: block;
    margin-bottom: 7px;
    color: #fff;
    font-size: 1.1rem;
}

.sr-resources-cards p {
    margin: 0;
    color: rgba(255,255,255,.67);
    line-height: 1.6;
}

.sr-infrastructure-section {
    background: #f6f9fc;
}

.sr-institution-cta {
    background: #fff;
}

.sr-institution-cta-inner {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    padding: 46px;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(145deg, #071f38, #0e3a66);
}

.sr-institution-cta-inner h2 {
    margin: 10px 0;
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 3.5rem);
}

.sr-institution-cta-inner p {
    margin: 0;
    color: rgba(255,255,255,.72);
}

@media (max-width: 980px) {
    .sr-institution-intro-grid,
    .sr-founder-grid,
    .sr-director-grid,
    .sr-resources-grid {
        grid-template-columns: 1fr;
    }

    .sr-founder-photo,
    .sr-director-photo {
        max-width: 650px;
        min-height: 520px;
    }

    .sr-founder-photo img,
    .sr-director-photo img {
        min-height: 520px;
    }

    .sr-values-grid,
    .sr-infrastructure-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .sr-institution-hero {
        min-height: auto;
    }

    .sr-institution-hero-inner {
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .sr-institution-hero h1 {
        font-size: 3rem;
    }

    .sr-institution-hero-actions {
        display: grid;
    }

    .sr-institution-hero-actions .btn {
        width: 100%;
    }

    .sr-purpose-grid,
    .sr-values-grid,
    .sr-infrastructure-grid {
        grid-template-columns: 1fr;
    }

    .sr-timeline-premium::before {
        left: 18px;
    }

    .sr-timeline-premium article {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-left: 48px;
    }

    .sr-timeline-premium article::before {
        left: 10px;
    }

    .sr-timeline-year {
        text-align: left;
    }

    .sr-timeline-content {
        padding-left: 0;
    }

    .sr-founder-photo,
    .sr-director-photo,
    .sr-founder-photo img,
    .sr-director-photo img {
        min-height: 430px;
    }

    .sr-institution-cta-inner {
        display: block;
        padding: 30px;
    }

    .sr-institution-cta-inner .btn {
        width: 100%;
        margin-top: 22px;
    }
}


/* ==========================================================
   WEB 1.6 · AJUSTE VISUAL INSTITUCIÓN
   - reduce espacios vacíos
   - mejora proporciones de fotos
   - unifica ritmo vertical
   - mantiene contenido institucional existente
========================================================== */

.sr-institution-page .section{
    padding-top:78px;
    padding-bottom:78px;
}

/* Historia: más compacta y equilibrada */
.sr-institution-intro-grid{
    align-items:center;
    gap:64px;
}
.sr-institution-intro-copy p{
    margin:0 0 16px;
}
.sr-institution-intro-copy p:last-child{
    margin-bottom:0;
}

/* Línea de tiempo: evita sensación de bloque excesivamente largo */
.sr-timeline-section{
    padding-top:82px !important;
    padding-bottom:62px !important;
}
.sr-timeline-premium article{
    padding-bottom:34px;
}
.sr-timeline-premium article:last-child{
    padding-bottom:0;
}

/* Fundadora: foto más contenida y composición menos vacía */
.sr-founder-section{
    padding-top:76px !important;
    padding-bottom:76px !important;
}
.sr-founder-grid{
    grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);
    gap:64px;
}
.sr-founder-photo{
    min-height:520px;
    max-height:560px;
    border-radius:24px;
}
.sr-founder-photo img{
    min-height:520px;
    height:100%;
    object-fit:cover;
    object-position:center top;
}
.sr-founder-copy p{
    margin:14px 0 0;
}
.sr-founder-quote{
    margin-top:18px !important;
}

/* Dirección: mejor balance entre texto y retrato */
.sr-director-section{
    padding-top:76px !important;
    padding-bottom:76px !important;
}
.sr-director-grid{
    grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr);
    gap:64px;
}
.sr-director-photo{
    min-height:520px;
    max-height:590px;
    border-radius:24px;
    background:#fff;
}
.sr-director-photo img{
    min-height:520px;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    background:#fff;
}
.sr-director-copy p{
    margin:14px 0 0;
}

/* Misión y visión */
.sr-purpose-section{
    padding-top:72px !important;
    padding-bottom:72px !important;
}
.sr-purpose-card{
    min-height:250px;
    padding:34px;
    border-radius:22px;
}

/* Valores: tarjetas menos altas */
.sr-values-section{
    padding-top:72px !important;
    padding-bottom:72px !important;
}
.sr-values-grid article,
.sr-infrastructure-grid article{
    min-height:190px;
    padding:24px;
    border-radius:18px;
}
.sr-values-grid article > span,
.sr-infrastructure-grid article > span{
    margin-bottom:22px;
}

/* Recursos e infraestructura */
.sr-resources-section,
.sr-infrastructure-section{
    padding-top:76px !important;
    padding-bottom:76px !important;
}
.sr-resources-grid{
    align-items:center;
}

/* CTA final más compacto */
.sr-institution-cta{
    padding-top:64px !important;
    padding-bottom:72px !important;
}
.sr-institution-cta-inner{
    padding:38px 42px;
    border-radius:24px;
}

/* Desktop grande: evita huecos desproporcionados */
@media (min-width:1200px){
    .sr-founder-grid,
    .sr-director-grid,
    .sr-institution-intro-grid,
    .sr-resources-grid{
        max-width:1240px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* Tablet */
@media (max-width:980px){
    .sr-institution-page .section{
        padding-top:64px;
        padding-bottom:64px;
    }
    .sr-founder-grid,
    .sr-director-grid{
        grid-template-columns:1fr;
        gap:34px;
    }
    .sr-founder-photo,
    .sr-director-photo{
        width:100%;
        max-width:none;
        min-height:430px;
        max-height:520px;
    }
    .sr-founder-photo img,
    .sr-director-photo img{
        min-height:430px;
    }
}

/* Móvil */
@media (max-width:720px){
    .sr-institution-page .section{
        padding-top:52px;
        padding-bottom:52px;
    }
    .sr-institution-intro-grid{
        gap:26px;
    }
    .sr-founder-section,
    .sr-director-section,
    .sr-timeline-section,
    .sr-purpose-section,
    .sr-values-section,
    .sr-resources-section,
    .sr-infrastructure-section{
        padding-top:54px !important;
        padding-bottom:54px !important;
    }
    .sr-founder-photo,
    .sr-director-photo{
        min-height:360px;
        max-height:430px;
        border-radius:20px;
    }
    .sr-founder-photo img,
    .sr-director-photo img{
        min-height:360px;
    }
    .sr-purpose-card{
        min-height:auto;
        padding:26px;
    }
    .sr-values-grid article,
    .sr-infrastructure-grid article{
        min-height:auto;
    }
    .sr-institution-cta-inner{
        display:block;
        padding:28px;
    }
    .sr-institution-cta-inner .btn{
        width:100%;
        margin-top:22px;
    }
}