/* =========================================================
   PREVENTAS
   ---------------------------------------------------------
   Se carga en la landing de una campaña y en el índice que las lista. Los dos
   comparten los distintivos de estado —`.bz-preorder__badge`—, que son el
   único vocabulario visual que tiene el módulo para decir «abierta» o
   «cerrada»; tenerlos dos veces sería tener dos verdades.

   La tabla de títulos se convierte en tarjetas por debajo de 780px, pero el
   marcado sigue siendo una tabla: cada celda conserva su encabezado en
   `data-label` y la relación entre título, precio y cantidad no se pierde.
========================================================= */

.bz-preorder {
    padding-block: var(--space-8) var(--space-10);
}

/*
 * Entradilla a dos columnas: el texto a la izquierda y la portada a la derecha.
 *
 * La imagen ocupaba el ancho de la página justo debajo del título, y en un
 * monitor de 1600px eso son 600px de alto de una sola imagen: el catálogo —que
 * es a lo que se entra— empezaba por debajo del primer scroll. Al lado, la
 * campaña entera cabe en una pantalla.
 *
 * El modificador `--split` lo pone la plantilla solo cuando hay imagen. Sin
 * ella el bloque se queda en una columna y el texto conserva su ancho, en vez
 * de encogerse a media caja al lado de un hueco.
 */
.bz-preorder__lede {
    margin-bottom: var(--space-8);
}

/* La separación por abajo la pone el bloque, no sus piezas. */
.bz-preorder__lede .bz-preorder__hero {
    margin-bottom: 0;
}

@media (min-width: 900px) {

    .bz-preorder__lede--split {
        display: grid;
        /*
         * El texto se lleva algo más de sitio: es lo que hay que leer, y la
         * imagen acompaña. En columnas iguales el título partía en tres líneas.
         */
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: center;
    }

    /* Apiladas siguen necesitando el hueco entre una y otra; al lado, no. */
    .bz-preorder__lede--split .bz-preorder__header {
        margin-bottom: 0;
    }
}

.bz-preorder__header {
    max-width: 70ch;
    margin-bottom: var(--space-6);
}

.bz-preorder__eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--bazinga-gold);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bz-preorder__title {
    margin: 0 0 var(--space-3);
}

.bz-preorder__subtitle {
    margin: 0 0 var(--space-4);
    color: var(--bazinga-text-secondary);
    font-size: var(--h5-size, 1.125rem);
}

.bz-preorder__state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

/* El estado se lee: el color acompaña, no informa por sí solo. */
.bz-preorder__badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-pill);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bz-preorder__badge--open {
    border-color: var(--bazinga-color-disponible, #3fb950);
    color: var(--bazinga-color-disponible, #3fb950);
}

.bz-preorder__badge--scheduled {
    border-color: var(--bazinga-gold);
    color: var(--bazinga-gold);
}

.bz-preorder__badge--paused,
.bz-preorder__badge--closed {
    border-color: var(--bazinga-text-secondary);
    color: var(--bazinga-text-secondary);
}

.bz-preorder__deadline {
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.bz-preorder__intro {
    margin: 0;
    color: var(--bazinga-text-secondary);
    line-height: 1.7;
}

.bz-preorder__hero {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bz-preorder__hero img {
    display: block;
    width: 100%;
    height: auto;
}

.bz-preorder__content,
.bz-preorder__instructions {
    max-width: 70ch;
    margin-bottom: var(--space-6);
    line-height: 1.7;
}

.bz-preorder__instructions h2 {
    margin-bottom: var(--space-3);
    font-size: var(--h4-size);
}

.bz-preorder__notice {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--bazinga-border-color);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--bazinga-medium-surface);
}

.bz-preorder__notice p {
    margin: 0 0 var(--space-2);
    line-height: 1.7;
}

.bz-preorder__notice p:last-child {
    margin-bottom: 0;
}

.bz-preorder__notice--closed,
.bz-preorder__notice--paused {
    border-left-color: var(--bazinga-color-agotado, #d64545);
}

.bz-preorder__notice--scheduled {
    border-left-color: var(--bazinga-gold);
}


/* =========================================================
   FILTROS
========================================================= */

.bz-preorder__catalogue-head {
    margin-bottom: var(--space-4);
}

.bz-preorder__catalogue-head h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--h4-size);
}

.bz-preorder__pending-note {
    margin: 0;
    max-width: 70ch;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
    line-height: 1.6;
}

.bz-preorder__filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    background: var(--bazinga-medium-surface);
}

.bz-preorder__filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    flex: 1 1 240px;
}

.bz-preorder__filter-field label,
.bz-preorder__filter-toggles label {
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.bz-preorder__filter-field input {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    background: var(--bazinga-dark-surface, #16121f);
    color: var(--bazinga-light);
}

.bz-preorder__filter-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0;
}

.bz-preorder__filter-toggles label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    cursor: pointer;
}

.bz-preorder__filter-count {
    flex: 1 0 100%;
    margin: 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}


/* =========================================================
   TABLA DE TÍTULOS
========================================================= */

.bz-preorder__table-wrap {
    /* El desplazamiento se queda dentro de la tabla: la página nunca desborda. */
    overflow-x: auto;

    /*
     * Y esto es lo que hace que la frase de arriba sea verdad.
     *
     * `overflow` solo recorta a un descendiente absoluto si el que recorta está
     * en su cadena de bloques contenedores, y un envoltorio estático no lo
     * está. Cada celda de la tabla lleva su `label.screen-reader-text`, que es
     * absoluto: se escapaban del envoltorio y estiraban el documento hasta el
     * ancho real de la tabla. Entre los 780px donde la tabla pasa a tarjetas y
     * los ~1130 que mide entera, la página se desplazaba de lado —25px a
     * 860px— y no había nada visible que lo explicara.
     *
     * Con el envoltorio posicionado, esos rótulos pasan a colgar de él y el
     * recorte los alcanza.
     */
    position: relative;

    margin-bottom: var(--space-6);
}

.bz-preorder__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.bz-preorder__table th,
.bz-preorder__table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--bazinga-border-color);
    text-align: left;
    vertical-align: middle;
}

.bz-preorder__table thead th {
    color: var(--bazinga-gold);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bz-preorder__cell--price,
.bz-preorder__cell--qty,
.bz-preorder__cell--subtotal {
    text-align: right;
    white-space: nowrap;
}

/*
 * La editorial acompaña al título, en menor y apagada: identifica la edición
 * sin competir con el nombre.
 */
.bz-preorder__publisher {
    display: block;
    margin-top: 2px;
    color: var(--bazinga-text-secondary);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/*
 * El precio normal es contexto, no la cifra que importa: se apaga para que la
 * mirada caiga en los dos de pago. El tachado lo pone el <s> del marcado, así
 * que la información no depende del color.
 */
.bz-preorder__cell--normal {
    color: var(--bazinga-text-secondary);
}

.bz-preorder__price-normal {
    font-variant-numeric: tabular-nums;
}

/* El medio de pago se lee mejor alineado a la izquierda: es texto, no cifra. */
.bz-preorder__cell--pay {
    text-align: left;
    white-space: nowrap;
}

.bz-preorder__pay {
    width: 100%;
    min-width: 132px;
    /* Mismo mínimo que el resto de controles táctiles del sitio. */
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-sm, 4px);
    background: var(--bazinga-dark-surface);
    color: var(--bazinga-light);
    font-family: inherit;
    font-size: 14px;
}

.bz-preorder__pay:focus-visible {
    outline: 2px solid var(--bazinga-electric-purple);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Elección global del medio de pago
   ------------------------------------------------------------------ */

.bz-preorder__payment {
    margin: 0 0 var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bazinga-medium-surface);
}

.bz-preorder__payment-legend {
    padding: 0;
    font-family: var(--header-font);
    font-size: var(--h5-size, 18px);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.bz-preorder__payment-hint {
    margin: var(--space-2) 0 var(--space-4);
    color: var(--bazinga-text-secondary);
    font-size: var(--small-text);
}

.bz-preorder__payment-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/*
 * La opción entera es el objetivo, no solo el círculo del radio: un radio
 * suelto mide 13px y aquí hay que poder acertarle con el pulgar.
 */
.bz-preorder__payment-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--bazinga-border-color);
    border-radius: 999px;
    cursor: pointer;
}

.bz-preorder__payment-option:has(input:checked) {
    border-color: var(--bazinga-electric-purple);
    background: rgba(124, 58, 237, .16);
    font-weight: 600;
}

.bz-preorder__payment-option:has(input:focus-visible) {
    outline: 2px solid var(--bazinga-electric-purple);
    outline-offset: 2px;
}

.bz-preorder__cell--name {
    font-weight: 600;
}

.bz-preorder__name {
    display: block;
}

.bz-preorder__isbn {
    font-variant-numeric: tabular-nums;
    color: var(--bazinga-text-secondary);
}

.bz-preorder__row.is-selected {
    background: rgba(124, 58, 237, .12);
}

.bz-preorder__row.is-selected .bz-preorder__cell--name {
    box-shadow: inset 3px 0 0 var(--bazinga-electric-purple);
}

.bz-preorder__row--inactive {
    opacity: .6;
}

/* Los distintivos llevan texto; la forma y el borde solo acompañan. */
.bz-preorder__flag {
    display: inline-block;
    padding: 2px var(--space-2);
    border: 1px dashed var(--bazinga-border-color);
    border-radius: var(--radius-sm, 4px);
    font-size: 12px;
    white-space: nowrap;
}

.bz-preorder__flag--pending {
    border-color: var(--bazinga-gold);
    color: var(--bazinga-gold);
}

.bz-preorder__flag--inactive {
    margin-top: var(--space-1);
    color: var(--bazinga-text-secondary);
}

.bz-preorder__qty {
    width: 5.5rem;
    min-height: 44px;
    padding: var(--space-2);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    background: var(--bazinga-dark-surface, #16121f);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--small-text);
    text-align: right;
}

.bz-preorder__qty:focus-visible {
    border-color: var(--bazinga-electric-purple);
}

.bz-preorder__unavailable,
.bz-preorder__no-results {
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}


/* =========================================================
   FORMULARIO
========================================================= */

.bz-preorder__form-section {
    max-width: 760px;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--bazinga-border-color);
}

.bz-preorder__form-section h2 {
    margin-bottom: var(--space-3);
    font-size: var(--h4-size);
}

.bz-preorder__form-intro {
    margin-bottom: var(--space-4);
    color: var(--bazinga-text-secondary);
    line-height: 1.7;
}

.bz-preorder__summary {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    background: var(--bazinga-medium-surface);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.bz-preorder__summary p {
    margin: 0 0 var(--space-2);
}

.bz-preorder__summary-heading {
    font-weight: 700;
}

.bz-preorder__summary-list {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
    line-height: 1.7;
}

.bz-preorder__summary-total {
    margin: 0;
    color: var(--bazinga-light);
    font-weight: 700;
}

.bz-preorder__summary-pending {
    margin: var(--space-2) 0 0;
    color: var(--bazinga-gold);
}

.bz-preorder__fieldset {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.bz-preorder__fieldset legend {
    margin-bottom: var(--space-3);
    padding: 0;
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bazinga-gold);
}

.bz-preorder__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
}

.bz-preorder__field label {
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 600;
}

.bz-preorder__field input[type="text"],
.bz-preorder__field input[type="email"],
.bz-preorder__field input[type="tel"],
.bz-preorder__field textarea {
    min-height: 44px;
    padding: var(--space-3);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    background: var(--bazinga-dark-surface, #16121f);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--body-size);
}

.bz-preorder__field textarea {
    min-height: 96px;
    resize: vertical;
}

.bz-preorder__required {
    color: var(--bazinga-gold);
}

.bz-preorder__hint {
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 12px;
}

/* El error se anuncia con texto y se marca con borde: nunca solo con color. */
.bz-preorder__error:empty {
    display: none;
}

.bz-preorder__error {
    display: block;
    padding-left: var(--space-5);
    color: var(--bazinga-color-agotado, #ff8080);
    font-family: var(--body-font);
    font-size: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff8080'%3E%3Cpath d='M8 1 1 15h14L8 1zm0 5v4h.01V6H8zm0 6v1.5h.01V12H8z'/%3E%3C/svg%3E") no-repeat left center / 14px 14px;
}

.has-error {
    border-color: var(--bazinga-color-agotado, #d64545) !important;
}

.bz-preorder__field--consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-weight: 400;
    line-height: 1.6;
    cursor: pointer;
}

.bz-preorder__field--consent input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

/* Trampa para robots: fuera de la vista sin usar display:none. */
.bz-preorder__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bz-preorder__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.bz-preorder__submit {
    min-height: 48px;
}

.bz-preorder__submit[aria-busy="true"] {
    opacity: .7;
    cursor: progress;
}

.bz-preorder__legal {
    flex: 1 1 260px;
    margin: 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 12px;
    line-height: 1.6;
}

.bz-preorder__form-message {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--bazinga-color-agotado, #d64545);
    border-radius: var(--radius-md);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.bz-preorder__confirmation {
    padding: var(--space-6);
    border: 1px solid var(--bazinga-electric-purple);
    border-radius: var(--radius-lg);
    background: var(--bazinga-medium-surface);
}

.bz-preorder__confirmation:focus-visible {
    outline: 2px solid var(--bazinga-gold);
    outline-offset: 4px;
}

.bz-preorder__confirmation h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--h4-size);
}

.bz-preorder__confirmation p {
    margin: 0 0 var(--space-3);
    line-height: 1.7;
}

.bz-preorder__confirmation ul {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
    font-family: var(--body-font);
    font-size: var(--small-text);
    line-height: 1.8;
}

.bz-preorder__reference {
    font-family: var(--body-font);
    font-size: var(--h5-size, 1.125rem);
    font-weight: 700;
    letter-spacing: .06em;
}


/* =========================================================
   MÓVIL
   ---------------------------------------------------------
   La tabla pasa a tarjetas. Cada celda imprime su encabezado desde
   `data-label`, así que la asociación entre dato y columna se mantiene.
========================================================= */

@media (max-width: 780px) {

    .bz-preorder__table,
    .bz-preorder__table tbody,
    .bz-preorder__table tr,
    .bz-preorder__table td,
    .bz-preorder__table th {
        display: block;
        width: auto;
    }

    .bz-preorder__table thead {
        /* Oculta visualmente sin sacarla del árbol de accesibilidad. */
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .bz-preorder__table tr {
        margin-bottom: var(--space-4);
        padding: var(--space-4);
        border: 1px solid var(--bazinga-border-color);
        border-radius: var(--radius-md);
        background: var(--bazinga-medium-surface);
    }

    .bz-preorder__table td,
    .bz-preorder__table th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        border-bottom: 0;
        text-align: right;
    }

    .bz-preorder__table .bz-preorder__cell--name {
        display: block;
        margin-bottom: var(--space-2);
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--bazinga-border-color);
        text-align: left;
    }

    .bz-preorder__table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--bazinga-text-secondary);
        font-size: 12px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .bz-preorder__row.is-selected .bz-preorder__cell--name {
        box-shadow: none;
    }

    .bz-preorder__row.is-selected {
        border-color: var(--bazinga-electric-purple);
    }

    .bz-preorder__qty {
        width: 6.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bz-preorder__confirmation {
        scroll-behavior: auto;
    }
}


/* =========================================================
   ÍNDICE DE CAMPAÑAS
   ---------------------------------------------------------
   La rejilla es la misma que la de las guías de lectura, a propósito: son dos
   listas de fichas editoriales y no hay ninguna razón para que el sitio tenga
   dos maneras distintas de presentarlas.

   Lo que sí cambia es la tarjeta cerrada. No se enlaza —eso se resuelve en la
   plantilla, no imprimiendo la etiqueta `a`—, así que aquí solo queda decirlo
   visualmente: sin color en la imagen y sin el gesto de elevarse al pasar por
   encima. Una tarjeta que se mueve invita a pulsarla.
========================================================= */

.bz-campaigns {
    padding-block: var(--space-8) var(--space-10);
}

.bz-campaigns__header {
    max-width: 70ch;
    margin-bottom: var(--space-8);
}

.bz-campaigns__intro {
    margin: var(--space-3) 0 0;
    color: var(--bazinga-text-secondary);
    line-height: 1.7;
}

.bz-campaigns__group + .bz-campaigns__group {
    margin-top: var(--space-10);
}

.bz-campaigns__group-title {
    margin: 0 0 var(--space-5);
    font-size: var(--h3-size);
}

.bz-campaigns__truncated {
    margin: var(--space-6) 0 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.bz-campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bz-campaign-card > article {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    background: var(--bazinga-medium-surface);
    transition: transform var(--transition-base), border-color var(--transition-base);
}

.bz-campaign-card:not(.is-closed) > article:hover {
    transform: translateY(-4px);
    border-color: var(--bazinga-purple);
}

.bz-campaign-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bazinga-dark);
}

.bz-campaign-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * El marcador se ve.
 *
 * El de las guías raya dos grises del tema que se diferencian en un par de
 * puntos de luminancia: sobre el fondo oscuro no se distingue de una caja
 * vacía, y una campaña sin imagen —la que hay hoy en la tienda no tiene—
 * parecía una tarjeta rota. Con la trama en morado a baja opacidad el hueco se
 * lee como una decisión y no como un fallo de carga.
 */
.bz-campaign-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg,
            rgba(109, 40, 217, .28) 0 10px,
            transparent 10px 20px),
        var(--bazinga-dark-surface);
}

/*
 * El distintivo va sobre la imagen y con fondo propio: encima de una portada
 * clara, el borde de una sola línea que basta en la landing se pierde.
 */
.bz-campaign-card__media .bz-preorder__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: var(--bazinga-dark);
}

.bz-campaign-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.bz-campaign-card__eyebrow {
    margin: 0;
    color: var(--bazinga-gold);
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bz-campaign-card__title {
    margin: 0;
    font-family: var(--header-font);
    font-size: 22px;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--bazinga-light);
}

.bz-campaign-card__title a {
    color: inherit;
}

.bz-campaign-card__title a:hover,
.bz-campaign-card__title a:focus-visible {
    color: var(--bazinga-gold);
}

.bz-campaign-card__text {
    margin: 0;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
    line-height: 1.6;
}

/* Pegada abajo: la fecha es el último dato que se mira, y así las tarjetas
   de una fila la alinean aunque sus textos midan distinto. */
.bz-campaign-card__when {
    margin: auto 0 0;
    padding-top: var(--space-3);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 12px;
}


/* --- Cerradas ------------------------------------------------------------ */

.bz-campaign-card.is-closed > article {
    border-style: dashed;
}

/*
 * La imagen pierde el color y algo de luz; el texto no. Atenuar la tarjeta
 * entera dejaría el título por debajo del contraste mínimo, y una campaña
 * cerrada se sigue leyendo: para eso se conserva en el índice.
 */
.bz-campaign-card.is-closed .bz-campaign-card__media img {
    filter: grayscale(1);
    opacity: .55;
}

.bz-campaign-card.is-closed .bz-campaign-card__title {
    color: var(--bazinga-text-secondary);
}

@media (max-width: 600px) {

    .bz-campaign-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }
}