/* ==========================================================================
   Tarjeta de agradecimiento / confirmación de envío, reutilizable en todo
   el sitio (Views/Shared/_ThanksCard.cshtml). Bloque BEM: app-thanks-sh
   ("sh" de "shared" — para no chocar con clases de página como app-aval__*
   o app-beca__* si algún día coinciden en la misma vista).

   Se carga como CSS global (ver _Layout.cshtml) para que cualquier
   controlador pueda usar el partial sin tener que enlazar un CSS aparte.
   ========================================================================== */

.app-thanks-sh {
    max-width: 34rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.app-thanks-sh__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--base-color);
    color: #ffffff;
}

.app-thanks-sh__icon svg {
    width: 2rem;
    height: 2rem;
}

.app-thanks-sh__eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--main-color);
    background: rgba(1, 95, 234, .08);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.app-thanks-sh__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--black-color);
    margin: 0 0 0.9rem;
}

.app-thanks-sh__text {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--body-color);
    margin: 0 0 2rem;
}

.app-thanks-sh__button {
    display: inline-block;
    font-weight: 600;
    font-size: 1rem;
    color: #ffffff;
    padding: 0.9rem 2.5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #0163ea 0%, #00bcf9 50%, #0163ea);
    background-size: 200% auto;
    text-decoration: none;
    transition: background-position .3s ease, transform .15s ease;
}

.app-thanks-sh__button:hover,
.app-thanks-sh__button:focus {
    background-position: right center;
    transform: translateY(-1px);
    color: #ffffff;
}

@media (max-width: 480px) {
    .app-thanks-sh {
        padding: 2.5rem 1rem;
    }

    .app-thanks-sh__title {
        font-size: 1.4rem;
    }
}