/* =============================================================================
   voz-antes.css — "Tu voz de antes y de ahora" en el resultado de Acento (24-sep).
   ========================================================================== */
.voz-antes {
    margin: .7rem 0 .2rem; padding: .8rem .9rem .75rem;
    border-radius: 16px; text-align: left;
    background: linear-gradient(135deg, #F5EEFF 0%, #EDE3FF 100%);
    border: 1.5px solid #D8C2FF;
    box-shadow: 0 6px 16px rgba(138, 43, 226, .12);
    animation: voz-antes-entra 480ms cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes voz-antes-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.voz-antes__txt b { display: block; font-size: .98rem; font-weight: 900; color: #3B1D6E; }
.voz-antes__txt small { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 700; color: #6B4FA0; }
.voz-antes__btn {
    margin-top: .6rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: 0; border-radius: 999px; padding: .65rem 1rem; cursor: pointer;
    font-family: inherit; font-weight: 900; font-size: .95rem; color: #fff;
    background: linear-gradient(135deg, #9B4DFF, #7A2BD9); box-shadow: 0 4px 0 #5B1FA6;
}
.voz-antes__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #5B1FA6; }
.voz-antes__btn:disabled { opacity: .85; }
/* La línea "1 oct ——— hoy": se enciende el punto que está sonando */
.voz-antes__linea { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .72rem; font-weight: 900; color: #8A74B8; text-transform: uppercase; letter-spacing: .04em; }
.voz-antes__linea i { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #D8C2FF, #9B4DFF); }
.voz-antes__p { padding: .15rem .5rem; border-radius: 999px; background: #fff; transition: background 200ms, color 200ms, transform 200ms; }
.voz-antes.is-antes .voz-antes__p--antes,
.voz-antes.is-hoy .voz-antes__p--hoy { background: #7A2BD9; color: #fff; transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .voz-antes { animation: none; } }
/* Modo noche de la app (body.pa-noche): la tarjeta no puede quedarse blanca */
body.pa-noche .voz-antes { background: linear-gradient(135deg, #2a1f44 0%, #241c36 100%); border-color: #5B3FA0; }
body.pa-noche .voz-antes__txt b { color: #f3eefb; }
body.pa-noche .voz-antes__txt small { color: #c9c0dc; }
body.pa-noche .voz-antes__p { background: #3a2f52; color: #d9d0ea; }

/* 1.5.5: tarjeta de la portada "Tu acento: antes y ahora" (reusa .pa-aviso de Mensajes de Axel) */
.pa-aviso--antes { --pa-aviso-c: #0E8F9E; }
.pa-aviso--antes .pa-aviso__t { font-size: 15px; }