/* ==========================================================================
   Propuesta detalle — landing por eje
   ========================================================================== */

/* HERO */
.propuesta-detalle-hero .hero__title-line {
    font-size: clamp(2rem, 7vw, 3.5rem);
    line-height: 1.05;
}

.propuesta-detalle-hero__highlight {
    display: none;
}

.propuesta-detalle {
    padding: 2.5rem 0 3rem;
    background-color: var(--color-gris-claro);
}

/* VOLVER */
.propuesta-detalle__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-azul);
}

.propuesta-detalle__back i {
    color: var(--color-amarillo);
}

/* IMAGEN PRINCIPAL */
.propuesta-detalle__visual {
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--color-blanco);
    box-shadow: 0 8px 28px rgba(10, 76, 152, 0.12);
}

.propuesta-detalle__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--color-azul);
}

.propuesta-detalle__caption {
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    color: var(--color-gris-texto);
    background-color: var(--color-blanco);
}

/* TITULOS */
.propuesta-summary__eyebrow,
.propuesta-section-head__eyebrow,
.propuesta-life__eyebrow,
.propuesta-meeting__eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-amarillo);
}

.propuesta-summary__title,
.propuesta-section-head__title,
.propuesta-life__title,
.propuesta-meeting__title {
    margin-bottom: 0.875rem;
    font-size: clamp(1.375rem, 4vw, 2rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-azul);
}

.propuesta-summary__text,
.propuesta-life__text,
.propuesta-meeting__text,
.propuesta-benefit__text,
.propuesta-card__text {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-gris-texto);
}

.propuesta-summary__text,
.propuesta-life__text,
.propuesta-meeting__text {
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ESPACIADOS */
.propuesta-summary,
.propuesta-benefits,
.propuesta-cards,
.propuesta-life,
.propuesta-meeting,
.propuesta-more {
    margin-bottom: 2.5rem;
}

/* RESUMEN */
.propuesta-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 20px;
    background-color: var(--color-blanco);
    box-shadow: 0 6px 24px rgba(10, 76, 152, 0.08);
}

.propuesta-summary__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
    border-radius: 20px;
    background-color: var(--color-azul);
    color: var(--color-blanco);
}

.propuesta-summary__number {
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-amarillo);
}

.propuesta-summary__label {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.4;
}

/* HEADERS DE SECCION */
.propuesta-section-head {
    margin-bottom: 1.5rem;
}

.propuesta-section-head--center {
    text-align: center;
}

/* GRIDS */
.propuesta-benefits__grid,
.propuesta-cards__grid,
.propuesta-more__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* BOX BASE */
.propuesta-benefit,
.propuesta-card,
.propuesta-more__card {
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--color-blanco);
    border: 1px solid rgba(10, 76, 152, 0.1);
    box-shadow: 0 6px 24px rgba(10, 76, 152, 0.08);
}

/* BENEFICIOS */
.propuesta-benefit {
    padding: 1.5rem;
}

.propuesta-benefit--horizontal {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.propuesta-benefit__image {
    display: block;
    width: 100%;
    height: 240px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--color-azul);
}

.propuesta-benefit__body {
    padding: 1.5rem;
}

.propuesta-benefit__icon,
.propuesta-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: var(--color-amarillo);
    color: var(--color-azul);
    font-size: 1.25rem;
}

.propuesta-benefit__title,
.propuesta-card__title {
    margin-bottom: 0.625rem;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--color-azul);
}

/* CARDS */
.propuesta-card {
    position: relative;
    padding: 1.5rem;
}

.propuesta-card--horizontal {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.propuesta-card__image {
    display: block;
    width: 100%;
    height: 220px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--color-azul);
}

.propuesta-card__content {
    padding: 1.5rem;
}

.propuesta-card__number {
    position: static;
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--color-amarillo);
}

/* VIDA DIARIA */
.propuesta-life {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 20px;
    background-color: var(--color-blanco);
    box-shadow: 0 6px 24px rgba(10, 76, 152, 0.08);
}

.propuesta-life--visual {
    align-items: center;
}

.propuesta-life__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin-top: 1.25rem;
}

.propuesta-life__item {
    padding: 1rem;
    border-radius: 16px;
    background-color: var(--color-gris-claro);
    border-left: 5px solid rgba(10, 76, 152, 0.25);
}

.propuesta-life__item--after {
    border-left-color: var(--color-amarillo);
    background-color: rgba(248, 170, 22, 0.1);
}

.propuesta-life__item span {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-azul);
}

.propuesta-life__item p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-gris-texto);
}

.propuesta-life__visual {
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--color-azul);
}

.propuesta-life__visual img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

/* CTA REUNION */
.propuesta-meeting__box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem;
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--color-azul);
    color: var(--color-blanco);
}

.propuesta-meeting__title {
    color: var(--color-blanco);
}

.propuesta-meeting__text {
    color: rgba(255, 255, 255, 0.82);
}

.propuesta-meeting__btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

.propuesta-meeting__btn::after {
    content: none;
}

/* MAS EJES */
.propuesta-more__card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-azul);
}

.propuesta-more__card i {
    font-size: 1.25rem;
    color: var(--color-amarillo);
}

.propuesta-more__footer {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* MODALES */
body.modal-open {
    overflow: hidden;
}

.meeting-modal,
.proposal-soft-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
}

.meeting-modal.is-visible,
.proposal-soft-popup.is-visible {
    display: block;
}

.meeting-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(3, 23, 48, 0.78);
}

.meeting-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    width: min(92vw, 980px);
    max-height: 90vh;
    margin: 5vh auto;
    overflow-y: auto;
    border-radius: 20px;
    background-color: var(--color-blanco);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.meeting-modal__close,
.proposal-soft-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--color-amarillo);
    color: var(--color-azul);
    font-size: 1rem;
}

.meeting-modal__visual {
    display: none;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            rgba(8, 48, 104, 0.82),
            rgba(8, 48, 104, 0.82)
        ),
        url("/assets/img/imagenfondo-hero.jpg");
    background-size: cover;
    background-position: center;
}

.meeting-modal__image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 2rem 1rem 0;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.35));
}

.meeting-modal__badge {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-blanco);
    font-size: 0.8125rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.meeting-modal__badge i {
    color: var(--color-amarillo);
    font-size: 1.25rem;
}

.meeting-modal__content {
    padding: 2rem 1.5rem;
}

.meeting-modal__eyebrow,
.proposal-soft-popup__eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-amarillo);
}

.meeting-modal__title,
.proposal-soft-popup__title {
    margin-bottom: 0.625rem;
    font-size: clamp(1.375rem, 4vw, 2rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-azul);
}

.meeting-modal__text,
.proposal-soft-popup__text {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-gris-texto);
}

.proposal-soft-popup {
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background-color: rgba(3, 23, 48, 0.78);
}

.proposal-soft-popup.is-visible {
    display: flex;
}

.proposal-soft-popup__box {
    position: relative;
    width: min(92vw, 520px);
    padding: 2rem 1.5rem;
    border-radius: 20px;
    background-color: var(--color-blanco);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.proposal-soft-popup__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.proposal-soft-popup__actions .btn::after {
    content: none;
}

/* RESPONSIVE */
@media (min-width: 768px) {
    .propuesta-detalle-hero__highlight {
        display: block;
    }

    .propuesta-summary {
        grid-template-columns: 1fr 260px;
        padding: 2rem;
    }

    .propuesta-benefits__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .propuesta-cards__grid,
    .propuesta-more__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .propuesta-life {
        padding: 2rem;
    }

    .propuesta-life--visual {
        grid-template-columns: 1fr 0.9fr;
    }

    .propuesta-meeting__box {
        grid-template-columns: 1fr auto;
        padding: 2rem;
    }

    .meeting-modal__dialog {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .meeting-modal__visual {
        display: block;
    }

    .meeting-modal__content {
        padding: 2.5rem 2rem;
    }

    .proposal-soft-popup__actions {
        flex-direction: row;
    }
}

@media (min-width: 900px) {
    .propuesta-benefits__grid {
        align-items: stretch;
    }

    .propuesta-benefit--horizontal,
    .propuesta-card--horizontal {
        flex-direction: column;
    }

    .propuesta-benefit--horizontal .propuesta-benefit__image {
        height: 240px;
    }

    .propuesta-benefit--horizontal .propuesta-benefit__body {
        min-height: 260px;
    }

    .propuesta-card--horizontal .propuesta-card__image {
        height: 240px;
    }

    .propuesta-card--horizontal .propuesta-card__content {
        min-height: 210px;
    }
}

@media (min-width: 1024px) {
    .propuesta-detalle {
        padding: 3rem 0 4rem;
    }

    .propuesta-summary,
    .propuesta-benefits,
    .propuesta-cards,
    .propuesta-life,
    .propuesta-meeting,
    .propuesta-more {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1200px) {
    .propuesta-cards__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .propuesta-card--horizontal .propuesta-card__image {
        height: 210px;
    }
}

@media (max-width: 767px) {
    .propuesta-detalle__image {
        aspect-ratio: 4 / 3;
    }

    .propuesta-summary,
    .propuesta-life {
        padding: 1.25rem;
    }

    .propuesta-benefit__body,
    .propuesta-card__content,
    .propuesta-more__card {
        padding: 1.25rem;
    }

    .propuesta-life__visual img {
        min-height: 220px;
        aspect-ratio: 4 / 3;
    }

    .propuesta-meeting {
        margin-bottom: 2rem;
    }

    .propuesta-meeting__box {
        width: 100%;
        max-width: 100%;
        padding: 1.75rem 1.25rem;
    }

    .propuesta-meeting__title {
        font-size: 1.65rem;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .propuesta-meeting__text {
        font-size: 0.95rem;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    .propuesta-meeting__btn {
        width: 100%;
        padding: 1rem 1.25rem;
        line-height: 1.25;
        min-height: auto;
    }
}