/* =====================================================
   INFORMACIÓN INSTITUCIONAL
===================================================== */

.inem-institution-page {
    background: var(--inem-color-bg, #f5f7f4);
}

.inem-institution-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: end;
    min-height: clamp(360px, 52vw, 610px);
    padding: clamp(7rem, 14vw, 11rem) 0 clamp(3.5rem, 7vw, 6rem);
    background: linear-gradient(90deg, rgba(7, 42, 28, .9), rgba(7, 42, 28, .42)), url('https://www.inemkennedy.edu.co/wp-content/uploads/2024/07/Plaza-principal-INEM.jpg') center/cover no-repeat;
    color: #fff;
}

.inem-institution-hero--history {
    background-image: linear-gradient(90deg, rgba(7, 42, 28, .9), rgba(7, 42, 28, .35)), url('https://www.inemkennedy.edu.co/wp-content/uploads/2024/01/INEM-Kennedy-catedra-inemita.jpg');
}

.inem-institution-hero--identity {
    background-image: linear-gradient(90deg, rgba(7, 42, 28, .9), rgba(7, 42, 28, .35)), url('https://www.inemkennedy.edu.co/wp-content/uploads/2024/07/Cumpleanos_19.jpeg');
}

.inem-institution-hero--map {
    background-image: linear-gradient(90deg, rgba(7, 42, 28, .88), rgba(7, 42, 28, .3)), url('https://www.inemkennedy.edu.co/wp-content/uploads/2024/04/Cumpleanos_17.jpeg');
}

.inem-institution-hero .inem-container { width: 100%; }
.inem-institution-hero .inem-kicker { color: #f5c400; }
.inem-institution-hero h1 {
    max-width: 900px;
    margin: .35rem 0 .8rem;
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 5.3rem);
    line-height: .98;
}
.inem-institution-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.92);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.inem-institution-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
}
.inem-institution-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid rgba(12, 70, 45, .12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(14, 49, 34, .09);
}
.inem-institution-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.inem-institution-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.inem-institution-card:hover .inem-institution-card__media img { transform: scale(1.04); }
.inem-institution-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(1.25rem, 3vw, 2rem); }
.inem-institution-card__body h3 { margin: 0 0 .65rem; font-size: 1.55rem; }
.inem-institution-card__body h3 a { color: inherit; text-decoration: none; }
.inem-institution-card__body p { flex: 1; margin: 0 0 1.4rem; }

.inem-institution-content-wrap { max-width: 1040px; }
.inem-institution-breadcrumb { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.4rem; color: #68736d; font-size: .93rem; }
.inem-institution-breadcrumb a { color: #0c6944; font-weight: 700; }
.inem-institution-content {
    padding: clamp(1.4rem, 4vw, 3.5rem);
    border: 1px solid rgba(12, 70, 45, .1);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 16px 48px rgba(13, 53, 36, .08);
}
.inem-institution-content > h2,
.inem-symbol-feature__content h2 { margin-top: 2.4rem; color: #0c5439; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.inem-institution-content > h2:first-child,
.inem-symbol-feature__content h2:first-child { margin-top: 0; }
.inem-institution-content p { font-size: 1.08rem; line-height: 1.78; }
.inem-institution-lead { color: #263c32; font-size: clamp(1.2rem, 2.4vw, 1.55rem) !important; line-height: 1.55 !important; }

.inem-institution-callout { margin-top: 2rem; padding: clamp(1.3rem, 3vw, 2.1rem); border-left: 6px solid #f3c300; border-radius: 18px; background: #f7f9ed; }
.inem-institution-callout--secondary { border-left-color: #1976a8; background: #eff7fb; }
.inem-institution-callout h2 { margin: 0 0 .5rem; color: #0c5439; }
.inem-institution-callout p { margin: 0; }

.inem-symbol-feature { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .65fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.inem-symbol-feature__visual { position: sticky; top: 130px; margin: 0; padding: 2rem; border-radius: 24px; background: #f1f6f2; }
.inem-symbol-feature__visual img { display: block; width: min(100%, 320px); margin: auto; }
.inem-flag-section { display: grid; grid-template-columns: 1fr minmax(260px, 460px); gap: 2rem; align-items: center; margin-top: 3rem; padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: 24px; background: #f2f7f3; }
.inem-flag-section img { width: 100%; border-radius: 16px; }

.inem-anthem { margin-top: 3rem; padding: clamp(1.4rem, 4vw, 2.7rem); border-radius: 24px; background: #102f25; color: #fff; }
.inem-anthem h2 { color: #fff; }
.inem-anthem audio { width: 100%; margin: 1rem 0 1.5rem; }
.inem-anthem__lyrics { columns: 2 280px; column-gap: 2.4rem; }
.inem-anthem__lyrics p { break-inside: avoid; color: rgba(255,255,255,.9); }
.inem-anthem__credits { margin-bottom: 0; color: #f7d452 !important; }

.inem-map-panel { overflow: hidden; border: 1px solid rgba(12, 70, 45, .12); border-radius: 28px; background: #fff; box-shadow: 0 16px 48px rgba(13, 53, 36, .08); }
.inem-map-panel__head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding: clamp(1.3rem, 4vw, 2.5rem); }
.inem-map-panel__head h2 { margin: .3rem 0 .35rem; }
.inem-map-panel__head p { margin: 0; }
.inem-map-selector { min-width: min(100%, 330px); }
.inem-map-selector select { width: 100%; min-height: 52px; padding: 0 2.7rem 0 1rem; border: 1px solid #a9b9b0; border-radius: 12px; background: #fff; color: #16382a; font: inherit; }
.inem-campus-map { width: 100%; height: min(70vh, 680px); min-height: 480px; background: #e9efeb; }
.inem-campus-map .leaflet-popup-content { font-family: inherit; font-size: 1rem; line-height: 1.45; }
.inem-campus-map .leaflet-popup-content a { color: #0c6944; font-weight: 700; }

@media (max-width: 900px) {
    .inem-institution-card-grid { grid-template-columns: 1fr; }
    .inem-symbol-feature,
    .inem-flag-section { grid-template-columns: 1fr; }
    .inem-symbol-feature__visual { position: static; }
    .inem-map-panel__head { align-items: stretch; flex-direction: column; }
}

@media (max-width: 600px) {
    .inem-institution-hero { min-height: 420px; }
    .inem-institution-content { border-radius: 20px; }
    .inem-campus-map { min-height: 420px; }
}