/* ──────────────────────────────────────────────────────────────────────────
   Convocatoria cerrada: cinta en la esquina + banda sobre el precio tachado.

   Dos piezas que dicen lo mismo de dos maneras: la cinta se ve de lejos y al
   pasar rápido; la banda sobre el precio remata la idea de «esto valía esto y
   ahora no lo puedes comprar», que es lo que deja ganas de la próxima.
   ────────────────────────────────────────────────────────────────────────── */

/* La tarjeta necesita recortar la cinta: si el bloque no la trae, se le pone
   `relative overflow-hidden` en el HTML, como ya hacía la cinta de OFERTA.

   Se coloca con ancho fijo y el centro fuera de la tarjeta, no a base de
   translate: así queda pegada a la esquina en cualquier ancho de pantalla. Con
   translate se metía hacia dentro en el móvil y pisaba el título. */
.cinta-agotado {
    position: absolute;
    top: 22px;
    right: -58px;
    width: 200px;
    text-align: center;
    transform: rotate(45deg);
    background: linear-gradient(to left, #dc2626, #b91c1c);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    padding: .38rem 0;
    box-shadow: 0 6px 18px rgba(220, 38, 38, .35);
    text-transform: uppercase;
    z-index: 3;
    pointer-events: none;
}

/* El precio sigue viéndose —importa saber cuánto vale— pero tachado y apagado. */
.precio-agotado {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .25rem 1.25rem;
}

/* El precio se ve: es la mitad del mensaje. Tachado y apagado, pero legible. */
.precio-agotado > * {
    opacity: .6;
    filter: grayscale(.5);
}

/* La banda cruza el precio, no la tarjeta entera: así no tapa nada más. */
.precio-agotado::after {
    content: attr(data-agotado);
    position: absolute;
    /* Cruza el TERCIO INFERIOR de las cifras, no su centro: así el precio se
       sigue leyendo, que es la mitad del mensaje —«esto valía 49 € y ya no lo
       puedes comprar»—. Centrada encima, lo tapaba entero. */
    left: 50%;
    top: 68%;
    transform: translate(-50%, -50%) rotate(-8deg);
    white-space: nowrap;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(.62rem, 2.4vw, .8rem);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .4rem 1rem;
    border-radius: .35rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
    border: 1px solid rgba(255, 255, 255, .22);
}

/* El aviso de debajo ya no repite «plazas agotadas»: eso lo dicen la cinta y la
   banda. Aquí solo queda el dato útil, que es cuándo vuelve a abrirse. */
.aviso-cerrado {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.4rem;
    border-radius: .75rem;
    border: 1px solid rgba(220, 38, 38, .35);
    background: rgba(220, 38, 38, .08);
    color: #fca5a5;
    font-size: .9rem;
}

@media (max-width: 480px) {
    .cinta-agotado { font-size: .58rem; top: 18px; right: -62px; }
}