/* Cierre de ruta (templates/webapp/cierre_ruta.html): "¡Felicidades, completaste la Ruta Mastercard!" (en revisión).
   Fin de campaña (templates/webapp/campaign_closed.html): misma estructura, sin la X. */

.screen-cierre .app { background: var(--bg-lowest); }

.cierre {
    flex: 1;
    display: flex; flex-direction: column; gap: 16px;
    padding: 12px 16px 32px;
    color: var(--text-paragraph);
}
.cierre__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.cierre__logo { width: 36px; height: auto; }
.cierre__close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-circle);
    background: var(--bg-medium);
}
.cierre__close img { width: 16px; height: 16px; }

/* Alto según la imagen (banner de Registro, más ancho que el póster): completa, sin recortar. */
.cierre__poster { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

.cierre__pill {
    align-self: flex-start;
    padding: 5px 10px; border-radius: var(--radius-sm);
    background: var(--title-tint); color: var(--text-title);
    font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase;
}
.cierre__title { font-size: 28px; font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: var(--tracking-tight); }
.cierre__lead { font-size: 15px; line-height: 1.4; color: var(--text-placeholder); }
.cierre__lead strong { font-weight: var(--fw-semibold); color: var(--text-paragraph); }

.cierre-info {
    display: flex; flex-direction: column;
    margin-top: 8px; list-style: none;
    border: 1px solid var(--outline-low); border-radius: var(--radius-md);
    background: var(--bg-medium);
}
.cierre-info li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; font-size: var(--fs-14); line-height: 1.4; }
.cierre-info li + li { border-top: 1px solid var(--outline-low); }
.cierre-info svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 0; color: var(--text-title); }
.cierre-info a { color: inherit; text-decoration: underline; }

.cierre__closer { margin-top: 8px; text-align: center; font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--text-title); }
.cierre__cta { font-weight: var(--fw-medium); }