/* ─────────────────────────────────────────────────────────
   Banner de contacto por WhatsApp
   Sale también en lugar del «no se han encontrado productos»
   de WooCommerce, así que tiene que aguantar de pie solo en
   medio de una categoría vacía.
   ───────────────────────────────────────────────────────── */

.brs {
    --brs-oro: var(--canun-brand, #e3b576);
    --brs-oro-fuerte: #b8933f;
    --brs-tinta: var(--color1, #050a30);
    --brs-verde: #25d366;

    position: relative;
    box-sizing: border-box;
    margin: 34px 0;
    padding: 64px 28px;
    overflow: hidden;
    border-radius: 18px;
    background-color: var(--brs-tinta);
    font-family: var(--tipo1, "Muli"), system-ui, sans-serif;
    text-align: center;
    color: #fff;
    isolation: isolate;
}

/* La foto de la categoría, si la hay. Va como capa propia y no como
   background del bloque para poder oscurecerla sin tocar el texto. */
.brs__foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.02);
}

/* Sin este velo, un título blanco sobre una foto clara no se lee. El degradado
   deja respirar la imagen por los lados y aprieta en el centro, que es donde
   está el texto. */
.brs__velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at center, rgba(5, 10, 48, .88) 0%, rgba(5, 10, 48, .72) 55%, rgba(5, 10, 48, .82) 100%);
}

/* Sin foto: el degradado de siempre, con un punto de luz dorada arriba. */
.brs--liso .brs__velo {
    background:
        radial-gradient(circle at 78% -10%, rgba(227, 181, 118, .16) 0%, rgba(227, 181, 118, 0) 46%),
        linear-gradient(135deg, #0c1230 0%, #16204a 55%, #0c1230 100%);
}

.brs__dentro {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
}

.brs__antetitulo {
    display: inline-block;
    margin: 0 0 16px;
    padding: 5px 14px;
    border: 1px solid rgba(227, 181, 118, .45);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brs-oro);
}

.brs__titulo {
    margin: 0 0 14px !important;
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.35rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff !important;
    text-wrap: balance;
}

.brs__destacado {
    color: var(--brs-oro) !important;
    box-shadow: inset 0 -.28em 0 rgba(227, 181, 118, .22);
}

.brs__texto {
    margin: 0 auto 30px !important;
    max-width: 52ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82) !important;
}

.brs__boton {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--brs-verde);
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(37, 211, 102, .34);
    transition: transform .18s ease, box-shadow .18s ease;
}

.brs__boton:hover,
.brs__boton:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, .48);
    color: #fff !important;
}

.brs__boton svg { flex: 0 0 auto; }

.brs__pie {
    margin: 18px 0 0 !important;
    font-size: .86rem;
    color: rgba(255, 255, 255, .6) !important;
}

@media (max-width: 600px) {
    .brs { padding: 44px 20px; margin: 24px 0; }
    .brs__titulo { font-size: 1.45rem; }
    .brs__texto { font-size: .95rem; margin-bottom: 24px !important; }
    .brs__boton { font-size: .98rem; padding: 14px 24px; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .brs__boton { transition: none; }
    .brs__boton:hover { transform: none; }
}