/* ============================================
   Pop-up "Programa Identidad Familias"
   Componente aislado: se incluye solo en la home.
   ============================================ */

.ifam-modal {
    --ifam-ink: #241b18;
    --ifam-night: #1d1715;
    --ifam-cream: #fdfaf6;
    --ifam-pink: #f9e8f2;
    --ifam-pink-line: #eec0db;
    --ifam-magenta: #bd2f75;
    --ifam-berry: #a62a63;
    --ifam-berry-dark: #8f2154;
    --ifam-blush: #e07ab8;
    --ifam-sans: "Montserrat", "Inter", system-ui, -apple-system, sans-serif;
    --ifam-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --ifam-script: "Dancing Script", "Segoe Script", cursive;

    /* Recortes exactos del PNG original (foto, logo y logotipo).
       1) assets/images/... (para servidor/producción).
       2) PNG original junto a la carpeta del sitio (para abrir con file://). */
    --ifam-art:
        url("../assets/images/popup-escritorio.png"),
        url("../../Pop-up%20escritorio@2x.png");
    --ifam-art-mobile:
        url("../assets/images/popup-celular.png"),
        url("../../Pop-up%20celular@2x.png");

    width: min(1120px, calc(100vw - 32px));
    max-width: 1120px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: var(--ifam-cream);
    color: var(--ifam-ink);
    box-shadow: 0 32px 90px rgba(15, 10, 8, 0.45);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d9a8c4 transparent;
    -webkit-overflow-scrolling: touch;
}

.ifam-modal:not([open]) {
    display: none;
}

.ifam-modal::-webkit-scrollbar {
    width: 10px;
}

.ifam-modal::-webkit-scrollbar-thumb {
    background: #d9a8c4;
    border: 3px solid var(--ifam-cream);
    border-radius: 999px;
}

.ifam-modal::-webkit-scrollbar-track {
    background: transparent;
}

.ifam-modal::backdrop {
    background: rgba(20, 13, 10, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Entrada suave (se desactiva con prefers-reduced-motion) */
@keyframes ifam-modal-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ifam-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ifam-modal[open] {
    animation: ifam-modal-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ifam-modal[open]::backdrop {
    animation: ifam-backdrop-in 0.3s ease both;
}

.ifam-modal:focus {
    outline: none;
}

/* ============================================
   Estructura
   ============================================ */
.ifam-card {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    min-height: 660px;
    background: var(--ifam-cream);
}

/* Cierre: queda sticky para seguir accesible si el modal scrollea */
.ifam-close-wrap {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 0;
    pointer-events: none;
}

.ifam-close {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 12px 12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3b2d28;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ifam-close:hover {
    background: rgba(28, 21, 18, 0.08);
}

.ifam-close:active {
    transform: scale(0.94);
}

.ifam-close:focus {
    outline: none;
}

.ifam-close:focus-visible {
    outline: 3px solid var(--ifam-magenta);
    outline-offset: 2px;
}

.ifam-close svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* ============================================
   Panel visual: una sola imagen recortada del PNG original
   (foto, título, logo y texto ya vienen en la imagen)
   ============================================ */
.ifam-visual {
    position: relative;
    min-height: 660px;
    overflow: hidden;
    background-color: var(--ifam-night);
    background-image: var(--ifam-art);
    background-repeat: no-repeat;
    /* 240% + desplazamiento: el panel oscuro llega al borde del modal
       y deja fuera el margen blanco y la esquina de la página del PNG. */
    background-size: 240% auto;
    background-position: -18px -18px;
}

/* ============================================
   Contenido (beneficios + frase + CTA)
   ============================================ */
.ifam-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(58px, 5.3vw, 64px) clamp(30px, 4.4vw, 50px) 28px;
    background: var(--ifam-cream);
}

.ifam-features {
    margin: 0;
    padding: 6px clamp(18px, 2.2vw, 28px);
    list-style: none;
    background: var(--ifam-pink);
    border-radius: 18px;
}

.ifam-feature {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 28px 0;
}

.ifam-feature+.ifam-feature {
    border-top: 1px solid var(--ifam-pink-line);
}

.ifam-feature__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ifam-blush);
}

.ifam-feature__icon svg {
    display: block;
    width: 40px;
    height: 40px;
}

.ifam-feature__title {
    margin: 0 0 2px;
    font-family: var(--ifam-sans);
    font-size: clamp(1.18rem, 1.9vw, 1.42rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--ifam-magenta);
}

.ifam-feature__desc {
    margin: 0;
    font-family: var(--ifam-sans);
    font-size: clamp(0.88rem, 1.2vw, 0.96rem);
    font-weight: 500;
    line-height: 1.4;
    color: #2d2424;
}

.ifam-quote {
    margin: clamp(28px, 3.4vw, 40px) 0 0;
    font-family: var(--ifam-script);
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0.002em;
    text-align: center;
    color: var(--ifam-magenta);
}

.ifam-cta {
    display: block;
    margin-top: clamp(26px, 3.2vw, 38px);
    padding: clamp(18px, 2.3vw, 24px) clamp(18px, 2.4vw, 28px);
    border-radius: 16px;
    background: var(--ifam-berry);
    color: #fff;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 16px 32px rgba(139, 32, 82, 0.22);
    transition: background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.ifam-cta:hover {
    background: var(--ifam-berry-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(139, 32, 82, 0.3);
}

.ifam-cta:active {
    transform: translateY(0);
}

.ifam-cta:focus {
    outline: none;
}

.ifam-cta:focus-visible {
    outline: 3px solid var(--ifam-magenta);
    outline-offset: 4px;
}

.ifam-cta__eyebrow {
    display: block;
    font-family: var(--ifam-sans);
    font-size: clamp(0.7rem, 0.95vw, 0.82rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
}

.ifam-cta__title {
    display: block;
    margin-top: 8px;
    font-family: var(--ifam-sans);
    font-size: clamp(1.18rem, 1.95vw, 1.58rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

/* ============================================
   Layout celular (misma pieza, apilada)
   ============================================ */
@media (max-width: 940px) {
    .ifam-modal {
        width: min(560px, calc(100vw - 16px));
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
    }

    .ifam-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .ifam-visual {
        min-height: 0;
        padding: 0;
        aspect-ratio: 720 / 760;
        background-image: var(--ifam-art-mobile);
        /* Ampliado y corrido para sacar el borde blanco de las esquinas */
        background-size: 102% auto;
        background-position: -7px -7px;
    }

    .ifam-body {
        justify-content: flex-start;
        padding: 20px 18px 24px;
    }

    .ifam-features {
        padding: 4px 16px;
        border-radius: 16px;
    }

    .ifam-feature {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 13px;
        padding: 12px 0;
    }

    .ifam-feature__icon,
    .ifam-feature__icon svg {
        width: 34px;
        height: 34px;
    }

    .ifam-feature__title {
        font-size: clamp(1.04rem, 4.6vw, 1.24rem);
    }

    .ifam-feature__desc {
        font-size: clamp(0.82rem, 3.4vw, 0.9rem);
    }

    .ifam-quote {
        margin-top: 18px;
        font-size: clamp(1.24rem, 5.8vw, 1.52rem);
    }

    .ifam-cta {
        margin-top: 18px;
        padding: 13px 14px 15px;
        border-radius: 14px;
    }

    .ifam-cta__eyebrow {
        font-size: clamp(0.62rem, 2.7vw, 0.72rem);
    }

    .ifam-cta__title {
        margin-top: 6px;
        font-size: clamp(1.04rem, 4.7vw, 1.24rem);
    }

    /* La X ya viene dentro del PNG del panel superior; se usa un
       botón transparente encima para que siga siendo accesible. */
    .ifam-close {
        width: 44px;
        height: 44px;
        margin: 10px 10px 0 0;
        color: transparent;
        background: transparent;
        border: 0;
        filter: none;
    }

    .ifam-close svg {
        opacity: 0;
    }

    .ifam-close:hover {
        background: transparent;
    }

    .ifam-close:focus-visible {
        outline-color: #fff;
    }
}

@media (max-width: 380px) {
    .ifam-body {
        padding: 20px 14px 24px;
    }

    .ifam-features {
        padding: 4px 12px;
    }

    .ifam-feature {
        gap: 10px;
    }

    .ifam-quote {
        font-size: 1.15rem;
    }
}

/* ============================================
   Detalles de accesibilidad / sistema
   ============================================ */
.ifam-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html.ifam-modal-open,
html.ifam-modal-open body {
    overflow: hidden;
}

html.ifam-modal-open {
    overscroll-behavior: none;
}

html.ifam-modal-open body {
    padding-right: var(--ifam-scrollbar, 0px);
}

html.ifam-modal-open .navbar.fixed-top {
    padding-right: var(--ifam-scrollbar, 0px);
}

@media (prefers-reduced-motion: reduce) {

    .ifam-modal[open],
    .ifam-modal[open]::backdrop {
        animation: none;
    }

    .ifam-cta,
    .ifam-close {
        transition: none;
    }
}

@media (forced-colors: active) {

    .ifam-cta,
    .ifam-close,
    .ifam-features {
        border: 1px solid CanvasText;
    }
}

@media print {
    .ifam-modal {
        display: none !important;
    }
}