/* ═══════════════════════════════════════════════════════════════════════════
   Banner · Beneficios de comprar en Arletex   (prefijo `bdc-`)
   Arletex Design System v3.5

   Registro:  Fanzine (excepción autorizada — información importante que debe
              gritar). Rompe la simetría, mezcla tipográfica agresiva.
   Apertura:  ManifestoClaim run-in — stamp ink + Display Heavy con <em>
              Fraunces invertida en chip ink
   Marco:     Full-frame ink 4px + cinta diagonal de señalización (warning tape)
   Fondo:     --ax-yellow PLENO.  ⚠ Excepción deliberada a la regla de §3:
              el amarillo es token de SEÑAL (máx 2 elementos por vista). Este
              partial se incluye en 44 vistas: si una página ya usa amarillo en
              otro elemento, ese otro elemento cede — no este banner.
   Burst:     1 sticker rotado -6° (obligatorio en registro Fanzine)
   Hover:     ninguno (la franja no es interactiva)

   Contraste: ink #1F2530 sobre yellow #FFEB3B = 12.3:1 ✓
              muted sobre yellow = 4.4:1 ✗ → los textos de apoyo viven sobre
              tarjeta blanca, nunca sobre el amarillo.

   Se usa como banda: ocupa el ancho del padre (sea `.container` Bootstrap o
   una section full-bleed) y centra su contenido con `.bdc__inner`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El partial viaja a vistas legacy: no damos por hecho el reset de Bootstrap */
.bdc,
.bdc *,
.bdc *::before,
.bdc *::after { box-sizing: border-box; }

.bdc {
    /* Tokens --ax-* con fallback local */
    --bdc-ink:          var(--ax-ink, #1F2530);
    --bdc-white:        var(--ax-white, #FFFFFF);
    --bdc-yellow:       var(--ax-yellow, #FFEB3B);
    --bdc-orange:       var(--ax-orange, #F15A29);
    --bdc-orange-deep:  var(--ax-orange-deep, #B0401A);
    --bdc-muted:        var(--ax-muted, #6E6A60);

    --bdc-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --bdc-font-accent:  var(--ax-font-accent, 'Fraunces', Georgia, serif);
    --bdc-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --bdc-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);

    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(30px, 4vw, 46px) 0 clamp(26px, 3.4vw, 38px);
    background: var(--bdc-yellow);
    border-top: 4px solid var(--bdc-ink);
    border-bottom: 4px solid var(--bdc-ink);
    border-radius: 0;
    color: var(--bdc-ink);
    font-family: var(--bdc-font-body);
    overflow: hidden;
}

/* Cinta de señalización — franja diagonal ink al filo superior */
.bdc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--bdc-ink) 0 10px,
        transparent 10px 20px
    );
    pointer-events: none;
}

/* Cinta de señalización — franja diagonal ink al filo inferior */
.bdc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--bdc-ink) 0 10px,
        transparent 10px 20px
    );
    pointer-events: none;
}

.bdc__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3.5vw, 40px);
}

/* ─── Apertura — claim + burst ──────────────────────────────────────────── */

.bdc__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px clamp(20px, 3vw, 40px);
    margin-bottom: clamp(22px, 3vw, 34px);
}

.bdc__claim {
    flex: 1 1 460px;
    min-width: 0;
}

.bdc__stamp {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 11px;
    background: var(--bdc-ink);
    color: var(--bdc-yellow);
    font-family: var(--bdc-font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.2;
}

.bdc__title {
    margin: 0;
    font-family: var(--bdc-font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 4vw, 3.1rem);
    line-height: .98;
    letter-spacing: .004em;
    text-transform: uppercase;
    color: var(--bdc-ink);
}

/* <em> Fraunces: minúscula, recta (sin rotate). Sobre amarillo el naranja
   no alcanza AA, así que se invierte en chip ink → amarillo. */
.bdc__title em {
    display: inline-block;
    padding: 0 .18em;
    background: var(--bdc-ink);
    color: var(--bdc-yellow);
    font-family: var(--bdc-font-accent);
    font-style: italic;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0;
}

.bdc__burst {
    flex: 0 0 auto;
    padding: 9px 14px;
    background: var(--bdc-ink);
    color: var(--bdc-yellow);
    font-family: var(--bdc-font-display);
    font-size: clamp(.82rem, 1.3vw, 1rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.1;
    transform: rotate(-6deg);
    box-shadow: 5px 5px 0 var(--bdc-orange-deep);
}

/* ─── Grilla de beneficios — tarjetas chunky sobre el amarillo ──────────── */

.bdc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 26px);
}

.bdc__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "num  icon"
        "name name"
        "desc desc";
    align-content: start;
    gap: 6px 10px;
    padding: clamp(14px, 1.6vw, 18px);
    background: var(--bdc-white);
    border: 2px solid var(--bdc-ink);
    box-shadow: 5px 5px 0 var(--bdc-ink);   /* sombra sólida, sin blur */
}

.bdc__num {
    grid-area: num;
    align-self: center;
    font-family: var(--bdc-font-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--bdc-orange-deep);   /* naranja profundo: AA sobre blanco */
}

.bdc__icon {
    grid-area: icon;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: var(--bdc-ink);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.bdc__name {
    grid-area: name;
    margin-top: 4px;
    font-family: var(--bdc-font-display);
    font-weight: 400;
    font-size: clamp(.95rem, 1.15vw, 1.06rem);
    line-height: 1.14;
    letter-spacing: .015em;
    text-transform: uppercase;
    color: var(--bdc-ink);
}

.bdc__desc {
    grid-area: desc;
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--bdc-muted);
}

/* ─── Breakpoints ───────────────────────────────────────────────────────── */

/* En grilla, reservar 2 líneas de título alinea el arranque de los textos */
@media (min-width: 768px) {
    .bdc__name { min-height: 2.28em; }
}

@media (max-width: 1099px) {
    .bdc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .bdc__burst { transform: rotate(-4deg); box-shadow: 4px 4px 0 var(--bdc-orange-deep); }
}

@media (max-width: 767px) {
    .bdc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Móvil chico: fila horizontal — icono a la izquierda, texto a la derecha */
@media (max-width: 559px) {
    .bdc__list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .bdc__item {
        grid-template-columns: 44px 1fr;
        grid-template-areas:
            "icon num"
            "icon name"
            "icon desc";
        align-items: start;
        gap: 2px 14px;
        padding: 14px;
        box-shadow: 4px 4px 0 var(--bdc-ink);
    }

    .bdc__icon {
        width: 30px;
        height: 30px;
        align-self: start;
        margin-top: 4px;
    }

    .bdc__name { margin-top: 2px; font-size: 1rem; }
    .bdc__desc { font-size: .82rem; }
}