button.colaborar-card {
            border: none;
            width: 100%;
            font-family: inherit;
            color: inherit;
            cursor: pointer;
        }

        .card-cta {
            display: inline-block;
            margin-top: .4rem;
            color: var(--amarillo);
            font-family: var(--subtitulo);
            font-weight: 700;
            font-size: .8rem;
            letter-spacing: .02em;
        }

        .requisitos-trigger {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            border: none;
            background: var(--amarillo);
            color: #111;
            font: inherit;
            font-weight: 800;
            font-size: .92em;
            padding: .15rem .75rem;
            border-radius: 999px;
            cursor: pointer;
            transition: .25s ease;
            vertical-align: middle;
        }

        .requisitos-trigger:hover,
        .requisitos-trigger:focus-visible {
            transform: translateY(-2px) scale(1.04);
            outline: none;
        }

        .requisitos-box {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .35s ease;
            margin-top: .3rem;
        }

        .requisitos-box.abierta {
            grid-template-rows: 1fr;
        }

        .requisitos-inner {
            overflow: hidden;
            min-height: 0;
        }

        .requisitos-lista {
            list-style: none;
            margin: 0;
            padding: 1.1rem 0 .3rem;
            display: flex;
            flex-direction: column;
            gap: .9rem;
        }

.requisitos-lista li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    text-align: left;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    line-height: 1.6;
    color: rgba(255,255,255,.92);
    font-size: .92rem;
}

.requisitos-lista li::before {
    content: "✓";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(7,173,118,.22);
    color: var(--verdemasclaro);
    font-weight: 800;
    font-size: .8rem;
    margin-top: .1rem;
}

.requisitos-lista li.requisito-pin::before {
    content: "📍";
    background: rgba(211,204,6,.2);
    font-size: .85rem;
}

#modalBeneficiarios p {
    margin: .3rem 0 .3rem;
    line-height: 1.75;
    color: rgba(255,255,255,.88);
}

#modalBeneficiarios .btn-colaborar {
    margin-top: 1.6rem;
    margin-bottom: 1.2rem;
}

#modalBeneficiarios small {
    display: block;
    color: rgba(255,255,255,.55);
    font-size: .8rem;
    line-height: 1.6;
    font-style: italic;
}

#modalBeneficiarios small p {
    color: inherit;
    margin: 0;
}

        .tema-beneficiario {
    background: linear-gradient(160deg, rgba(7,173,118), rgba(11,53,39));
}

/* =========== MADRINAS Y PADRINOS =========== */

.tema-madrina {
    position: relative;
    background:
        radial-gradient(circle at 90% -10%, rgba(255,252,153,.30), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(225,96,126,.25), transparent 50%),
        linear-gradient(160deg, #6b5a05, #0b3527 80%);
}

/* corazón de fondo, decorativo */
.tema-madrina::before {
    content: "♥";
    position: absolute;
    top: -.5rem;
    right: 1rem;
    font-size: 9rem;
    line-height: 1;
    color: rgba(255,252,153,.07);
    pointer-events: none;
}

#modalMadrinas .cerrar-modal {
    color: white;
}

.madrina-header {
    text-align: center;
    margin-bottom: 1.2rem;
}

#modalMadrinas .madrina-header h3 {
    font-family: var(--titulo);
    font-weight: 400;
    font-size: clamp(1.7rem, 4.5vw, 2.3rem);
    line-height: 1.1;
    letter-spacing: .01em;
    margin: 0;
}

#modalMadrinas .madrina-lead {
    text-align: center;
    line-height: 1.7;
    color: rgba(255,255,255,.9);
}

.madrina-quienes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.1rem 0 1.4rem;
}

.madrina-quienes span {
    padding: .4rem 1rem;
    border-radius: 999px;
    background: rgba(255,252,153,.12);
    border: 1px solid rgba(255,252,153,.4);
    color: var(--amarillo);
    font-family: var(--subtitulo);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

#modalMadrinas .madrina-destacado {
    margin: 0 0 2rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,.07);
    border-left: 4px solid var(--rosa);
    border-radius: 0 14px 14px 0;
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(255,255,255,.92);
}

/* --- Pasos --- */

.madrina-pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-bottom: 1.8rem;
}

.madrina-paso {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding: 1.6rem .8rem 1.1rem;
    text-align: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    color: white;
    font-family: var(--subtitulo);
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.3;
}

.madrina-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--amarillo);
    color: #111;
    font-family: var(--titulo);
    font-size: .95rem;
}

.madrina-icono {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

.madrina-icono svg {
    width: 26px;
    height: 26px;
    fill: var(--amarillo);
}

/* flecha entre pasos */
.madrina-paso:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -1.45rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--amarillo);
    font-size: 1.2rem;
}

/* --- Botón --- */

.madrina-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 0;
}

.madrina-cta svg {
    width: 18px;
    height: 18px;
    fill: var(--rojo);
}

/* --- Mobile: pasos en filas con flecha hacia abajo --- */

@media (max-width: 600px){

    .madrina-pasos {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .madrina-paso {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
    }

    .madrina-num {
        top: -10px;
        left: 14px;
        transform: none;
        width: 24px;
        height: 24px;
        font-size: .85rem;
    }

    .madrina-paso:not(:last-child)::after {
        content: "↓";
        right: auto;
        left: 50%;
        top: auto;
        bottom: -1.3rem;
        transform: translateX(-50%);
        font-size: 1rem;
    }

    .tema-madrina::before {
        font-size: 6rem;
    }
}

/* =====================================================
   MODALES DE PARTICIPAR — diseño común (.mdl)
   Mismo lenguaje visual que Madrinas y Padrinos.
   Pegar al final de participar.css.
   Dejá los estilos .requisitos-* (se siguen usando).
   Podés borrar los viejos de: #modalBeneficiarios p / small /
   .btn-colaborar, .tema-beneficiario y .modal-contenido .nota-compra
   ===================================================== */

.modal-contenido.mdl {
    --acento: var(--amarillo);
    --acento-suave: rgba(255,252,153,.12);
    --acento-borde: rgba(255,252,153,.4);
    --acento-texto-btn: #111;
    position: relative;
}

/* Variantes de color */

.modal-contenido.mdl.tema-beneficiario {
    --acento: var(--verde-claro);
    --acento-suave: rgba(120,216,179,.12);
    --acento-borde: rgba(120,216,179,.45);
    background:
        radial-gradient(circle at 90% -10%, rgba(120,216,179,.28), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(7,173,118,.25), transparent 50%),
        linear-gradient(160deg, #0b6b4a, #0b3527 80%);
}

.modal-contenido.mdl.tema-compra {
    --acento: var(--rosa);
    --acento-suave: rgba(225,96,126,.14);
    --acento-borde: rgba(225,96,126,.5);
    --acento-texto-btn: #fff;
    background:
        radial-gradient(circle at 90% -10%, rgba(225,96,126,.30), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(255,252,153,.12), transparent 50%),
        linear-gradient(160deg, #7a2f45, #0b3527 80%);
}

.modal-contenido.mdl.tema-beca {
    --acento: var(--amarillo);
    background:
        radial-gradient(circle at 90% -10%, rgba(255,252,153,.22), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(7,173,118,.25), transparent 50%),
        linear-gradient(160deg, #006E6B, #0b3527 80%);
}

/* Símbolo decorativo de fondo (como el corazón de Madrinas) */

.modal-contenido.mdl::before {
    position: absolute;
    top: -.5rem;
    right: 1rem;
    font-size: 9rem;
    line-height: 1;
    color: rgba(255,255,255,.07);
    pointer-events: none;
}

.tema-beneficiario.mdl::before { content: "⌂"; }
.tema-compra.mdl::before       { content: "✦"; }
.tema-beca.mdl::before         { content: "★"; }

.modal-contenido.mdl .cerrar-modal {
    color: white;
    z-index: 2;
}

/* Encabezado y texto */

.mdl-header {
    text-align: center;
    margin-bottom: 1.2rem;
}

.modal-contenido.mdl .modal-eyebrow {
    color: var(--acento);
}

.modal-contenido.mdl .mdl-header h3 {
    font-family: var(--titulo);
    font-weight: 400;
    font-size: clamp(1.7rem, 4.5vw, 2.3rem);
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--acento);
    margin: 0;
}

.modal-contenido.mdl .mdl-lead {
    text-align: center;
    line-height: 1.7;
    color: rgba(255,255,255,.9);
}

/* Chips */

.mdl-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.1rem 0 1.4rem;
}

.mdl-chips span {
    padding: .4rem 1rem;
    border-radius: 999px;
    background: var(--acento-suave);
    border: 1px solid var(--acento-borde);
    color: var(--acento);
    font-family: var(--subtitulo);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Bloque destacado */

.modal-contenido.mdl .mdl-destacado {
    margin: 0 0 2rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,.07);
    border-left: 4px solid var(--acento);
    border-radius: 0 14px 14px 0;
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(255,255,255,.92);
}

/* Pasos */

.mdl-pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin: 1.8rem 0;
}

.mdl-chips + .mdl-pasos {
    margin-top: 2rem;
}

.mdl-paso {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding: 1.6rem .8rem 1.1rem;
    text-align: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    color: white;
    font-family: var(--subtitulo);
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.35;
}

.mdl-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--acento);
    color: var(--acento-texto-btn);
    font-family: var(--titulo);
    font-size: .95rem;
}

.mdl-icono {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

.mdl-icono svg {
    width: 26px;
    height: 26px;
    fill: var(--acento);
}

/* Flecha entre pasos */
.mdl-paso:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -1.45rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--acento);
    font-size: 1.2rem;
}

/* Contacto (Comprá) */

.mdl-contacto {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 0 0 1.4rem;
}

.mdl-contacto a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.2rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    color: white;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: .25s ease;
}

.mdl-contacto a:hover {
    background: rgba(255,255,255,.14);
    transform: translateY(-2px);
}

.mdl-contacto svg {
    width: 16px;
    height: 16px;
    fill: var(--acento);
    flex-shrink: 0;
}

/* Botones */

.modal-contenido.mdl .mdl-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 0;
    background: var(--acento);
    color: var(--acento-texto-btn);
}

/* Botones de beca: se muestran apilados y centrados */
.modal-contenido.mdl .becadxs-botones {
    flex-direction: column;
    align-items: stretch;
}

/* El script los muestra con display:block/inline-block: respetamos el flex */
.modal-contenido.mdl .becadxs-botones .mdl-cta:not(.becadxs-link-oculto) {
    display: flex;
}

/* Nota al pie */

.modal-contenido.mdl .mdl-nota {
    display: block;
    margin-top: 1.2rem;
    text-align: center;
    color: rgba(255,255,255,.6);
    font-size: .8rem;
    font-style: italic;
    line-height: 1.6;
}

/* Cuenta regresiva alineada al nuevo estilo */

.modal-contenido.mdl .countdown-becadxs {
    margin: 1.8rem 0 1.6rem;
}

.modal-contenido.mdl .countdown-bloque span {
    color: var(--acento);
}

/* Mobile: pasos en filas con flecha hacia abajo */

@media (max-width: 600px){

    .mdl-pasos {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .mdl-paso {
        flex-direction: row;
        text-align: left;
        padding: 1rem;
    }

    .mdl-num {
        top: -10px;
        left: 14px;
        transform: none;
        width: 24px;
        height: 24px;
        font-size: .85rem;
    }

    .mdl-paso:not(:last-child)::after {
        content: "↓";
        right: auto;
        left: 50%;
        top: auto;
        bottom: -1.3rem;
        transform: translateX(-50%);
        font-size: 1rem;
    }

    .modal-contenido.mdl::before {
        font-size: 6rem;
    }
}