/* =========================================================
   DEPARTAMENTOS DIOCESANOS
========================================================= */


/* =========================================================
   HERO
========================================================= */

.departamentos-hero{

    background:#0b3f8f;

    color:#fff;

    padding:85px 0 80px;

    position:relative;

    overflow:hidden;

}

.departamentos-hero::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

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

    right:-180px;

    top:-260px;

}

.departamentos-eyebrow{

    margin:0 0 14px;

    color:#f5b400;

    font-size:15px;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;

}

.departamentos-hero h1{

    position:relative;

    z-index:1;

    margin:0;

    max-width:850px;

    color:#fff;

    font-family:Georgia, "Times New Roman", serif;

    font-size:clamp(46px, 6vw, 72px);

    line-height:1.05;

    font-weight:700;

}

.departamentos-lead{

    position:relative;

    z-index:1;

    max-width:700px;

    margin:22px 0 0;

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

    font-size:20px;

    line-height:1.55;

}


/* =========================================================
   SECCIÓN
========================================================= */

.departamentos-section{

    background:#f4f7fb;

    padding:70px 0 90px;

}


/* =========================================================
   GRID
========================================================= */

.departamentos-grid{

    display:grid;

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

    gap:22px;

}


/* =========================================================
   TARJETAS
========================================================= */

.departamento-card{

    position:relative;

    min-height:245px;

    display:flex;

    background:#fff;

    border:1px solid #e4eaf2;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(11,58,130,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.departamento-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:4px;

    background:#f5b400;

}

.departamento-card:hover{

    transform:translateY(-4px);

    border-color:#d8e1ed;

    box-shadow:0 16px 35px rgba(11,58,130,.10);

}


/* =========================================================
   CONTENIDO
========================================================= */

.departamento-card-content{

    width:100%;

    padding:30px 30px 28px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.departamento-card-label{

    margin:0 0 10px;

    color:#e7a900;

    font-size:11px;

    font-weight:800;

    letter-spacing:.15em;

    line-height:1.2;

    text-transform:uppercase;

}

.departamento-card-content h2{

    margin:0 0 14px;

    color:#0b3f8f;

    font-size:25px;

    line-height:1.15;

    font-weight:800;

}

.departamento-card-content > p:not(.departamento-card-label){

    margin:0;

    color:#60718a;

    font-size:16px;

    line-height:1.55;

}


/* =========================================================
   ENLACE
========================================================= */

.departamento-card-link{

    display:inline-flex;

    align-items:center;

    margin-top:auto;

    padding-top:24px;

    color:#0b3f8f;

    font-size:12px;

    font-weight:800;

    letter-spacing:.06em;

    text-decoration:none;

    text-transform:uppercase;

    transition:color .2s ease;

}

.departamento-card-link:hover{

    color:#e7a900;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px){

    .departamentos-grid{

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

    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width:700px){

    .departamentos-hero{

        padding:60px 0 55px;

    }

    .departamentos-section{

        padding:50px 0 65px;

    }

    .departamentos-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .departamento-card{

        min-height:220px;

    }

}

@media (max-width:480px){

    .departamentos-hero h1{

        font-size:42px;

    }

    .departamentos-lead{

        font-size:17px;

    }

    .departamento-card-content{

        padding:26px 25px;

    }

    .departamento-card-content h2{

        font-size:23px;

    }

}

/* =========================================================
   DEPARTAMENTOS - PÁGINA INDIVIDUAL
========================================================= */

.departamento-single {
    background: #f4f7fb;
    color: #092d67;
}


/* =========================================================
   HERO
========================================================= */

.departamento-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 85px;
    background:
        linear-gradient(
            135deg,
            #073d87 0%,
            #0b4d9c 55%,
            #174f91 100%
        );
    color: #ffffff;
}

.departamento-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    top: -190px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.departamento-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.departamento-eyebrow {
    margin: 0 0 18px;
    color: #f8b400;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.departamento-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    font-weight: 800;
}

.departamento-intro {
    max-width: 780px;
    margin-top: 25px;
    color: rgba(255,255,255,.9);
    font-size: 21px;
    line-height: 1.65;
}


/* =========================================================
   CONTENIDO
========================================================= */

.departamento-content {
    padding: 75px 0 100px;
}

.departamento-section {
    margin-bottom: 75px;
}

.departamento-section-heading {
    margin-bottom: 30px;
}

.departamento-section-eyebrow {
    margin: 0 0 9px;
    color: #f2ad00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.departamento-section-heading h2,
.departamento-contacto-heading h2 {
    margin: 0;
    color: #092d67;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.15;
    font-weight: 800;
}


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

.departamento-about {
    display: grid;
    grid-template-columns: 0.75fr 1.6fr;
    gap: 70px;
    align-items: start;
    padding: 50px;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(18, 54, 99, .07);
}

.departamento-about .departamento-section-heading {
    margin: 0;
}

.departamento-about-text {
    color: #496b91;
    font-size: 18px;
    line-height: 1.8;
}

.departamento-about-text p {
    margin-top: 0;
    margin-bottom: 18px;
}

.departamento-about-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   MISIÓN / VISIÓN
========================================================= */

.departamento-mision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.departamento-info-card {
    position: relative;
    padding: 38px;
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid #e1e8f1;
    box-shadow: 0 12px 35px rgba(18, 54, 99, .06);
    overflow: hidden;
}

.departamento-info-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #f7b500;
}

.departamento-card-number {
    margin-bottom: 18px;
    color: #f2ad00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.departamento-info-card h3 {
    margin: 0 0 18px;
    color: #0b438e;
    font-size: 27px;
    font-weight: 800;
}

.departamento-card-text {
    color: #496b91;
    font-size: 17px;
    line-height: 1.75;
}

.departamento-card-text p {
    margin-top: 0;
    margin-bottom: 16px;
}

.departamento-card-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   ÁREAS DE TRABAJO
========================================================= */

.departamento-secciones-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.departamento-area-card {
    padding: 32px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e1e8f1;
    box-shadow: 0 10px 30px rgba(18, 54, 99, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.departamento-area-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(18, 54, 99, .09);
}

.departamento-area-card h3 {
    margin: 0 0 15px;
    color: #0b438e;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
}

.departamento-area-text {
    color: #496b91;
    font-size: 16px;
    line-height: 1.7;
}

.departamento-area-text p {
    margin-top: 0;
    margin-bottom: 14px;
}

.departamento-area-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   EQUIPO
========================================================= */

.departamento-equipo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.departamento-persona {
    display: flex;
    gap: 22px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(18, 54, 99, .05);
}

.departamento-persona-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0b438e;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.departamento-persona-content {
    min-width: 0;
}

.departamento-persona h3 {
    margin: 0 0 7px;
    color: #092d67;
    font-size: 20px;
    font-weight: 800;
}

.departamento-persona-cargo {
    margin: 0 0 12px;
    color: #f0aa00;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
}

.departamento-persona-text {
    color: #607d9e;
    font-size: 15px;
    line-height: 1.65;
}

.departamento-persona-text p {
    margin: 0;
}


/* =========================================================
   CONTACTO
========================================================= */

.departamento-contacto {
    margin-top: 20px;
    padding: 45px 50px;
    background: #092d67;
    border-radius: 25px;
    color: #ffffff;
}

.departamento-contacto-heading {
    margin-bottom: 32px;
}

.departamento-contacto-heading h2 {
    color: #ffffff;
}

.departamento-contacto-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.departamento-contacto-item {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 0;
    padding: 18px 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    color: #ffffff;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.departamento-contacto-item:hover {
    background: rgba(255,255,255,.14);
    transform: translateY(-2px);
    color: #ffffff;
}

.departamento-contacto-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5b400;
    color: #092d67;
    font-size: 18px;
    font-weight: 800;
}

.departamento-contacto-item span:last-child {
    min-width: 0;
}

.departamento-contacto-item small {
    display: block;
    margin-bottom: 4px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.departamento-contacto-item strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .departamento-hero {
        padding: 65px 0 60px;
    }

    .departamento-content {
        padding: 55px 0 70px;
    }

    .departamento-about {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 35px;
    }

    .departamento-mision-grid,
    .departamento-secciones-grid,
    .departamento-equipo-grid,
    .departamento-contacto-grid {
        grid-template-columns: 1fr;
    }

    .departamento-section {
        margin-bottom: 55px;
    }

}


@media (max-width: 600px) {

    .departamento-hero {
        padding: 50px 0;
    }

    .departamento-hero h1 {
        font-size: 42px;
    }

    .departamento-intro {
        font-size: 17px;
        line-height: 1.6;
    }

    .departamento-content {
        padding: 40px 0 55px;
    }

    .departamento-about,
    .departamento-info-card,
    .departamento-area-card {
        padding: 27px;
    }

    .departamento-contacto {
        padding: 32px 25px;
        border-radius: 20px;
    }

    .departamento-persona {
        padding: 23px;
    }

}

/* =========================================================
   COLEGIOS CATÓLICOS
========================================================= */

.departamento-section-description {
    max-width: 760px;
    margin: 15px 0 0;
    color: #607d9e;
    font-size: 17px;
    line-height: 1.7;
}


.departamento-colegios-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}


.departamento-colegio-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e1e8f1;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(18, 54, 99, .06);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.departamento-colegio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(18, 54, 99, .10);
}


.departamento-colegio-image {
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: #e9eff7;
}


.departamento-colegio-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.departamento-colegio-content {
    padding: 25px;
}


.departamento-colegio-content h3 {
    margin: 0 0 7px;
    color: #0b438e;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
}


.departamento-colegio-city {
    margin: 0 0 14px;
    color: #092d67;
    font-size: 15px;
    font-weight: 700;
}


.departamento-colegio-phone {
    display: block;
    margin-bottom: 20px;
    color: #496b91;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}


.departamento-colegio-phone:hover {
    color: #0b438e;
}


.departamento-colegio-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.departamento-colegio-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border-radius: 30px;
    background: #f5b400;
    color: #092d67;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background .2s ease,
        transform .2s ease;
}


.departamento-colegio-links a:hover {
    background: #e8a900;
    transform: translateY(-1px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .departamento-colegios-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .departamento-colegios-grid {
        grid-template-columns: 1fr;
    }

    .departamento-colegio-image {
        height: 210px;
    }

}

/* =====================================================
   ACTIVIDADES - DEPARTAMENTOS
   ===================================================== */

.departamento-actividades {
    margin-top: 80px;
}

.departamento-actividades .departamento-section-heading {
    margin-bottom: 32px;
}

.departamento-actividades-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.departamento-actividad-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #dce4ef;
    border-radius: 20px;
    padding: 30px 30px 32px 34px;
    box-shadow: 0 12px 30px rgba(17, 55, 100, 0.06);
    overflow: hidden;
    min-height: 210px;
}

/* Línea amarilla característica del sitio */
.departamento-actividad-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #f5b400;
    border-radius: 20px 0 0 20px;
}

.departamento-actividad-date {
    margin-bottom: 14px;
    color: #f0aa00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.departamento-actividad-card h3 {
    margin: 0 0 14px;
    color: #073b82;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
}

.departamento-actividad-text {
    color: #52729a;
    font-size: 16px;
    line-height: 1.7;
}

.departamento-actividad-text p {
    margin: 0 0 12px;
}

.departamento-actividad-text p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1024px) {

    .departamento-actividades-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =====================================================
   MÓVIL
   ===================================================== */

@media (max-width: 700px) {

    .departamento-actividades {
        margin-top: 60px;
    }

    .departamento-actividades-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .departamento-actividad-card {
        padding: 25px 24px 27px 28px;
        min-height: auto;
        border-radius: 18px;
    }

    .departamento-actividad-card h3 {
        font-size: 20px;
    }

    .departamento-actividad-text {
        font-size: 15px;
        line-height: 1.65;
    }

}