/* =============================================================
   bramante-100.css — Bloques B2B / institucionales de la landing
   Tela Bramante 100% Algodón (hotelería, confección, licitaciones).
   Arletex Design System v3.5 · prefijo scoped `brb-`.
   Radius 0 (N-06) · sombras sólidas offset sin blur (N-07) ·
   tokens --ax-* con fallback para robustez.
   ============================================================= */

.brb-section {
    padding: clamp(48px, 7vw, 80px) 0;
}
.brb-section--paper { background: var(--ax-paper, #FAF6EE); }

.brb-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

/* Encabezado editorial de sección (eyebrow + H2 + intro) */
.brb-head { max-width: 820px; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); }
.brb-eyebrow {
    display: inline-block;
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--ax-orange, #F15A29); color: #FAF6EE;
    padding: 4px 11px; margin-bottom: 0.9rem;
}
.brb-title {
    font-family: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.08;
    letter-spacing: 0.005em; color: var(--ax-ink, #1F2530); margin: 0 0 0.9rem;
}
.brb-title em {
    font-family: var(--ax-font-accent, 'Fraunces', 'Georgia', serif);
    font-style: italic; text-transform: lowercase; color: var(--ax-orange, #F15A29);
}
.brb-lead {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.65;
    color: var(--ax-ink, #1F2530); margin: 0 0 0.85rem;
}
.brb-lead strong { color: var(--ax-orange-deep, #B0401A); }

/* ─── Cintillo B2B: precios especiales por volumen ───────────────────────────
   Ink block + sombra sólida orange + panel WhatsApp verde con corte diagonal.
   Mismo lenguaje visual que banner-licitaciones (bl-lic) para coherencia. */
.brb-cintillo {
    display: flex; align-items: stretch;
    background: var(--ax-ink, #1F2530);
    box-shadow: 8px 8px 0 var(--ax-orange, #F15A29);
    margin: clamp(1.5rem, 4vw, 2.5rem) 8px clamp(1.5rem, 4vw, 2.5rem) 0;
    overflow: hidden;
}
.brb-cintillo__copy {
    flex: 1; min-width: 0;
    padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem);
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
}
.brb-cintillo__eyebrow {
    display: inline-block;
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--ax-orange, #F15A29); color: #FAF6EE;
    padding: 4px 10px; margin-bottom: 0.3rem;
}
.brb-cintillo__title {
    font-family: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.1;
    color: #FAF6EE; margin: 0;
}
.brb-cintillo__title em {
    font-family: var(--ax-font-accent, 'Fraunces', 'Georgia', serif);
    font-style: italic; text-transform: lowercase; color: var(--ax-orange, #F15A29);
}
.brb-cintillo__desc {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 0.96rem; line-height: 1.6; color: var(--ax-muted-dark, #A8A39A); margin: 0;
}
.brb-cintillo__factura {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 0.95rem; font-weight: 800; color: #FAF6EE;
    line-height: 1.4; margin: 0.15rem 0 0; padding-left: 1.5rem; position: relative;
}
.brb-cintillo__factura::before {
    content: '\f571'; /* fa-file-invoice-dollar */
    font-family: 'Font Awesome 5 Free'; font-weight: 900;
    position: absolute; left: 0; top: 0.05rem; color: var(--ax-orange, #F15A29);
}
/* Figura: modelo apuntando hacia la oferta (cutout sobre el bloque ink) */
.brb-cintillo__figure {
    flex: 0 0 auto; align-self: flex-end;
    display: flex; align-items: flex-end;
    margin: 0 clamp(-6px, 0.5vw, 4px) 0 clamp(0.4rem, 1.5vw, 1.2rem);
    padding-right: 22px; /* despeja el corte diagonal del panel WhatsApp */
    z-index: 0;
}
.brb-cintillo__figure img {
    display: block; width: auto;
    height: clamp(160px, 15vw, 220px);
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}
/* Panel WhatsApp (todo el panel es enlace) */
.brb-cintillo__wa {
    width: 230px; flex-shrink: 0;
    background: var(--ax-whatsapp, #25D366);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; cursor: pointer; position: relative;
    clip-path: polygon(22px 0px, 100% 0px, 100% 100%, 0px 100%);
    margin-left: -22px; padding: 1.9rem 1.5rem 1.9rem 2.25rem;
    transition: background-color 0.2s ease; z-index: 1;
}
.brb-cintillo__wa:hover, .brb-cintillo__wa:focus-visible {
    background: var(--ax-whatsapp-deep, #0F8C40); text-decoration: none;
}
.brb-cintillo__wa:focus-visible { outline: 3px solid #FAF6EE; outline-offset: -6px; }
.brb-cintillo__wa-inner {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    color: #fff; text-align: center;
}
.brb-cintillo__wa-icon { font-size: 2.35rem; line-height: 1; }
.brb-cintillo__wa-cta {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 1rem; font-weight: 900; color: #fff; line-height: 1.15;
}
.brb-cintillo__wa-hint {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 0.78rem; color: rgba(255,255,255,0.9); font-weight: 500;
}

/* ─── Tarjetas de dato técnico (blancos de hotel) ────────────────────────────── */
.brb-tech-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-top: clamp(1.25rem, 3vw, 2rem);
}
.brb-tech-card {
    background: var(--ax-white, #fff);
    border: 1.5px solid var(--ax-ink, #1F2530);
    border-top: 4px solid var(--ax-orange, #F15A29);
    padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.brb-tech-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 var(--ax-orange, #F15A29);
}
.brb-tech-card__label {
    font-family: var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ax-muted, #6E6A60);
}
.brb-tech-card__value {
    font-family: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.1; color: var(--ax-ink, #1F2530);
}

/* ─── Tarjetas institucionales (proyectos) ───────────────────────────────────── */
.brb-inst-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
    margin-top: clamp(1.25rem, 3vw, 2rem);
}
.brb-inst-card {
    background: var(--ax-white, #fff);
    border: 1.5px solid var(--ax-ink, #1F2530);
    box-shadow: 6px 6px 0 var(--ax-ink, #1F2530);
    padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.55rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.brb-inst-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ax-orange, #F15A29);
}
.brb-inst-card__icon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ax-paper, #FAF6EE);
    border: 1.5px solid var(--ax-ink, #1F2530);
    color: var(--ax-orange, #F15A29); font-size: 1.25rem;
}
.brb-inst-card__title {
    font-family: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    text-transform: uppercase; font-size: 1.15rem; line-height: 1.1;
    color: var(--ax-ink, #1F2530); margin: 0;
}
.brb-inst-card__text {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 0.94rem; line-height: 1.55; color: var(--ax-muted, #6E6A60); margin: 0;
}

/* ─── Bloque facturación + CTA final ─────────────────────────────────────────── */
.brb-factura {
    background: var(--ax-cream, #F2EDE4);
    border-left: 5px solid var(--ax-orange, #F15A29);
    padding: clamp(1.6rem, 3.5vw, 2.4rem);
    display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: center;
}
.brb-factura__title {
    font-family: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1;
    color: var(--ax-ink, #1F2530); margin: 0 0 0.7rem;
}
.brb-factura__text {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 1rem; line-height: 1.6; color: var(--ax-ink, #1F2530); margin: 0 0 0.5rem;
}
.brb-factura__note {
    font-family: var(--ax-font-accent, 'Fraunces', 'Georgia', serif);
    font-style: italic; font-size: 0.95rem; color: var(--ax-muted, #6E6A60); margin: 0;
}
.brb-factura__cta { display: flex; flex-direction: column; gap: 0.7rem; }
.brb-btn-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-weight: 900; font-size: 1.02rem; text-align: center;
    background: var(--ax-whatsapp, #25D366); color: #fff;
    padding: 0.95rem 1.4rem; text-decoration: none;
    box-shadow: 0 6px 0 var(--ax-whatsapp-deep, #0F8C40);
    transition: transform 0.15s ease, box-shadow 0.15s ease; border: none;
}
.brb-btn-wa:hover, .brb-btn-wa:focus-visible {
    color: #fff; text-decoration: none;
    transform: translateY(3px); box-shadow: 0 3px 0 var(--ax-whatsapp-deep, #0F8C40);
}
.brb-factura__hint {
    font-family: var(--ax-font-body, 'Lato', system-ui, sans-serif);
    font-size: 0.82rem; color: var(--ax-muted, #6E6A60); text-align: center; margin: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .brb-tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .brb-cintillo__figure { display: none; }
}
@media (max-width: 600px) {
    .brb-cintillo {
        flex-direction: column;
        box-shadow: 6px 6px 0 var(--ax-orange, #F15A29); margin-right: 6px;
    }
    .brb-cintillo__wa {
        width: 100%; clip-path: polygon(0px 18px, 100% 0px, 100% 100%, 0px 100%);
        margin-left: 0; margin-top: -18px; padding: 1.7rem 1.5rem 1.4rem;
    }
    .brb-cintillo__wa-inner { flex-direction: row; text-align: left; gap: 0.85rem; align-items: center; }
    .brb-cintillo__figure { display: none; }
    .brb-tech-grid { grid-template-columns: 1fr; }
    .brb-inst-grid { grid-template-columns: 1fr; }
    .brb-factura { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .brb-tech-card, .brb-inst-card, .brb-btn-wa,
    .brb-cintillo__wa { transition: none; }
    .brb-tech-card:hover, .brb-inst-card:hover { transform: none; }
    .brb-btn-wa:hover { transform: none; }
}