/* BOTONES */
.btn-primary {
    background: #1D2648;
    border-color: #1D2648;
}

    .btn-primary:hover {
        background: #141B33;
        border-color: #141B33;
    }

.btn-success {
    background: #A5C83C;
    border-color: #A5C83C;
}

    .btn-success:hover {
        background: #8EAE34;
        border-color: #8EAE34;
    }

.btn-outline-primary {
    color: #1D2648;
    border-color: #1D2648;
}

    .btn-outline-primary:hover {
        color: #FEFEFE;
        background: #1D2648;
        border-color: #1D2648;
    }

/* CARDS (base) */
.card {
    border-radius: 1rem;
    box-shadow: var(--shadow-1);
    border: 1px solid var(--line);
    overflow: hidden;
}

.card-header {
    background: #FEFEFE;
}

.program-card {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #FEFEFE;
    transition: transform .15s, box-shadow .15s;
}

    .program-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-2);
    }

/* HERO genérico (compatibilidad) */
.hero {
    position: relative;
    min-height: unset;
    overflow: hidden;
    background: linear-gradient(180deg, #1D2648, #A5C83C);
    color: #FEFEFE;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: clamp(24px, 6vw, 72px);
    padding-inline: 1rem;
}

.hero-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: brightness(.55);
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

    .hero-content h1 {
        font-weight: 800;
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

.hero img:not(.hero-img) {
    display: block;
    width: 100%;
    max-width: min(52vw, 520px);
    max-height: min(42vh, 420px);
    height: auto;
    object-fit: contain;
    margin-inline: auto;
}

@media (max-width: 991.98px) {
    .hero {
        padding-block: clamp(20px, 6vw, 48px);
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .hero img:not(.hero-img) {
        max-width: min(70vw, 420px);
        max-height: min(36vh, 360px);
    }
}

/* Media slots reutilizables */
.media-slot {
    position: relative;
    background: #EEF1F4;
    border: 1px solid var(--line);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

    .media-slot.ratio-21x9 {
        aspect-ratio: 21/9;
    }

    .media-slot.ratio-16x9 {
        aspect-ratio: 16/9;
    }

    .media-slot.ratio-4x3 {
        aspect-ratio: 4/3;
    }

    .media-slot.ratio-1x1 {
        aspect-ratio: 1/1;
    }

    .media-slot > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

.media-dim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .05));
}

.media-caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    color: #FEFEFE;
    font-weight: 800;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

/* Feature card – BASE ÚNICA */
.feature-card {
    background: #FEFEFE;
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-1);
}

/* Cycle card – BASE ÚNICA */
.cycle-card {
    background: #FEFEFE;
    border: 1px solid var(--line);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    height: 100%;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

    .cycle-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-2);
        border-color: #E5E7EB;
    }

    .cycle-card .body {
        padding: 1rem 1.1rem;
        text-align: center;
    }

    .cycle-card h5 {
        color: #1D2648;
        font-weight: 800;
        margin-bottom: .35rem;
    }

    .cycle-card p {
        color: #64748B;
        margin: 0;
    }

/* KPIs reutilizables */
.kpi-band {
    background: #F3F4F6;
}

.kpi {
    display: grid;
    place-items: center;
}

    .kpi h2 {
        font-weight: 800;
        color: #1D2648;
        margin: 0;
    }

    .kpi small {
        color: #64748B;
    }

/* KPIs pro (grid con separadores) */
.kpi-pro {
    background: #F3F4F6;
    padding: 3rem 0;
}

.kpi-wrap {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(29, 38, 72, 0.08);
    border-radius: 1rem;
    overflow: hidden;
    background: #FEFEFE;
}

.kpi-item {
    padding: 1.4rem 1rem;
    text-align: center;
    position: relative;
}

    .kpi-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 18%;
        bottom: 18%;
        right: 0;
        width: 1px;
        background: #E5E7EB;
    }

.kpi-num {
    display: block;
    font-weight: 800;
    font-size: 1.9rem;
    color: #A5C83C;
    line-height: 1;
}

.kpi-lbl {
    display: block;
    margin-top: .15rem;
    color: #1D2648;
    font-size: .95rem;
}

.kpi-cta {
    margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .kpi-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .kpi-num {
        font-size: 1.6rem;
    }
}