/* ============================================================================
   Catálogo de banners del hero del Home (15 diseños por rubro).
   Fuente: prototipo "DesignSettings Banners.dc.html" portado a clases.
   Cada banner se controla con 3 variables emitidas inline (como los tokens de
   tema): --bg1, --bg2, --tx. Todas las decoraciones derivan de esas variables
   con color-mix() para que cualquier paleta recoloree el banner completo.

   Se usa en DOS lugares con las MISMAS clases:
   - Admin (Diseño → Banner del Home): una tarjeta por banner, editable en vivo.
   - Home pública (_HomeBodyRubro): el banner elegido, como hero.
   ========================================================================== */

/* ── Keyframes (prefijo hb para no colisionar con los de site.css) ────────── */
@keyframes hbDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hbFloatUp {
    0% { transform: translateY(24px) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(-220px) rotate(26deg); opacity: 0; }
}
@keyframes hbStrokeSway {
    0%, 100% { transform: rotate(var(--rot)) translateX(0); }
    50% { transform: rotate(var(--rot)) translateX(14px); }
}
@keyframes hbTileFloat {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)) scale(var(--scale, 1)); }
    50% { transform: translateY(-8px) rotate(var(--rot, 0deg)) scale(var(--scale, 1)); }
}
@keyframes hbBlobDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -14px) scale(1.07); } }
@keyframes hbBlobDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16px, 12px) scale(1.05); } }
@keyframes hbBarAnim { 0% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }
@keyframes hbMatrixFall { 0% { transform: translateY(-35%); } 100% { transform: translateY(20%); } }
@keyframes hbTwinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
@keyframes hbEduFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hbGearSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hbGearSpinRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes hbDashMove { from { background-position: 0 0; } to { background-position: 40px 0; } }

/* ── Shell base ───────────────────────────────────────────────────────────── */
.hb-banner {
    --bg1: #3d0050;
    --bg2: #1a0030;
    --tx: #ffffff;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    min-height: 300px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--tx);
    background: radial-gradient(ellipse at 20% 30%, var(--bg1) 0%, transparent 60%),
               radial-gradient(ellipse at 80% 70%, var(--bg2) 0%, transparent 60%),
               var(--bg1);
    font-family: var(--theme-font-body);
}

.hb-banner__inner { position: relative; z-index: 2; }

/* Layout de 2 columnas (pastel, galería) */
.hb-banner--split {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    align-items: center;
    text-align: left;
    padding: 32px 28px;
}
.hb-banner--split .hb-banner__inner { text-align: left; }

/* ── Contenido común ──────────────────────────────────────────────────────── */
.hb-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--hb-accent, #ffffff);
    background: color-mix(in srgb, var(--hb-accent, #ffffff) 14%, transparent);
    color: var(--hb-accent, #ffffff);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.hb-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: hbDotPulse 2s ease-in-out infinite; }

.hb-title {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    font-family: var(--theme-font-heading-primary);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--tx);
}
.hb-title em { font-style: italic; }
.hb-banner--split .hb-title { font-size: clamp(24px, 3vw, 30px); }

.hb-sub {
    position: relative;
    z-index: 2;
    margin: 0 0 20px;
    max-width: 520px;
    font-size: 14.5px;
    line-height: 1.7;
    color: color-mix(in srgb, var(--tx) 68%, transparent);
}
.hb-banner--split .hb-sub { max-width: 42ch; margin-bottom: 18px; }

.hb-actions { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hb-banner--split .hb-actions { justify-content: flex-start; }

.hb-btn {
    min-width: 150px;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    font-family: var(--theme-font-body);
    transition: transform .12s ease, box-shadow .12s ease;
}
.hb-btn--a { background: var(--theme-primary, #9ed0c5); color: var(--theme-on-primary, #fff); border: 1.5px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }
.hb-btn--b { background: #fff; color: var(--theme-primary-strong, #2f7a6c); border: 1.5px solid var(--theme-primary, #9ed0c5); }
.hb-btn:hover { transform: translateY(-1px); }

/* Banners claros (texto oscuro): botón primario oscuro para contraste */
.hb-banner--light .hb-btn--a { background: #343a40; color: #fff; border-color: #343a40; box-shadow: 0 8px 22px rgba(0, 0, 0, .15); }
.hb-banner--light .hb-btn--b { background: #fff; color: #2f7a6c; border-color: #fff; }

/* Meta bullets (solo pastel) */
.hb-meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.hb-meta__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--tx) 82%, #2f7a6c); }

/* Accents de eyebrow por rubro */
.hb-banner--arte { --hb-accent: #ff93d6; }
.hb-banner--musica { --hb-accent: #42e7ff; }
.hb-banner--tecnica { --hb-accent: #ffbc45; }
.hb-banner--tech { --hb-accent: #00ff88; }
.hb-banner--biz { --hb-accent: #e0bf63; }
.hb-banner--fit { --hb-accent: #68f6ba; }
.hb-banner--edu { --hb-accent: #e6499b; }
.hb-banner--otros { --hb-accent: #a9b6ff; }
/* Pastel usa el badge sobre fondo claro (blanco translúcido) */
.hb-banner--pastel .hb-badge { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .6); color: color-mix(in srgb, var(--tx) 80%, transparent); }

/* ── Capas de adornos (glifos flotantes toggleables) ──────────────────────── */
.hb-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hb-deco[hidden], .hb-deco.is-off, .hb-stars.is-off { display: none; }
.hb-deco > span, .hb-deco > i {
    position: absolute;
    bottom: 2%;
    color: color-mix(in srgb, var(--tx) 55%, transparent);
    animation: hbFloatUp var(--d, 10s) linear infinite;
    animation-delay: var(--delay, 0s);
    font-size: var(--sz, 15px);
}
.hb-deco > :nth-child(1) { left: 10%; --d: 9.2s; --delay: 0s; --sz: 13px; }
.hb-deco > :nth-child(2) { left: 30%; --d: 11s; --delay: -3.5s; --sz: 16px; }
.hb-deco > :nth-child(3) { left: 52%; --d: 8.6s; --delay: -6s; --sz: 19px; }
.hb-deco > :nth-child(4) { left: 70%; --d: 10.4s; --delay: -1.8s; --sz: 13px; }
.hb-deco > :nth-child(5) { left: 88%; --d: 9.6s; --delay: -4.6s; --sz: 16px; }
.hb-deco > :nth-child(6) { left: 42%; --d: 12s; --delay: -8s; --sz: 19px; }

/* ── Fondos por banner ────────────────────────────────────────────────────── */
.hb-banner--pastel { background: linear-gradient(135deg, var(--bg1) 0%, color-mix(in oklab, var(--bg1), var(--bg2) 55%) 42%, var(--bg2) 100%); }
.hb-banner--trazos { background: linear-gradient(155deg, var(--bg1) 0%, var(--bg2) 100%); }
.hb-banner--acuarela { background: linear-gradient(180deg, var(--bg2), var(--bg1)); }
.hb-banner--galeria { background: radial-gradient(ellipse at 15% 20%, var(--bg1) 0%, transparent 65%), radial-gradient(ellipse at 85% 85%, var(--bg2) 0%, transparent 65%), var(--bg2); }
.hb-banner--plano { background: linear-gradient(165deg, var(--bg1), var(--bg2)); }
.hb-banner--carpinteria { background: linear-gradient(180deg, var(--bg1), var(--bg2)); }

/* ── PASTEL (split + collage de 3 cuadros + onda) ─────────────────────────── */
.hb-pastel-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 50% 40% at 82% 8%, rgba(255, 255, 255, .45), transparent 60%),
               radial-gradient(ellipse 60% 50% at 8% 100%, color-mix(in srgb, var(--bg2) 50%, transparent), transparent 60%); }
.hb-collage { position: relative; height: 250px; z-index: 2; }
.hb-collage__tile {
    position: absolute; background: #fff; border-radius: 10px; padding: 8px;
    box-shadow: 0 14px 30px rgba(46, 26, 51, .18);
    transform: rotate(var(--rot)) scale(var(--scale, 1)); animation: hbTileFloat var(--d, 7s) ease-in-out infinite; animation-delay: var(--delay, 0s);
    overflow: hidden; border: none; cursor: default;
}
.hb-collage__tile > img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.hb-collage__tile > .hb-collage__ph { width: 100%; height: 100%; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--tx) 55%, transparent); font-size: 20px; }
.hb-collage__tile--1 { top: 4px; left: 2px; width: 120px; height: 120px; --rot: -6deg; --d: 7s; }
.hb-collage__tile--1 .hb-collage__ph { background: linear-gradient(135deg, color-mix(in oklab, var(--bg1), white 20%), color-mix(in oklab, var(--bg2), white 10%)); }
.hb-collage__tile--2 { top: 50px; right: 0; width: 114px; height: 114px; --rot: 4deg; --d: 8.5s; --delay: -3s; }
.hb-collage__tile--2 .hb-collage__ph { background: linear-gradient(135deg, color-mix(in oklab, var(--bg2), white 15%), color-mix(in oklab, var(--bg1), white 25%)); }
.hb-collage__tile--3 { bottom: 2px; left: 54px; width: 117px; height: 117px; --rot: -3deg; --d: 7.8s; --delay: -5s; }
.hb-collage__tile--3 .hb-collage__ph { background: linear-gradient(135deg, color-mix(in oklab, var(--bg1), white 10%), color-mix(in oklab, var(--bg2), white 20%)); }
.hb-collage__tile[data-clickable="1"] { cursor: pointer; }
.hb-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 28px; z-index: 1; }
.hb-wave path { fill: var(--theme-tertiary, #f5ede1); }

/* ── CLÁSICO (puntos + pétalos) ───────────────────────────────────────────── */
.hb-dots { position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--tx) 12%, transparent) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent);
            mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent); }

/* ── TRAZOS (pinceladas) ──────────────────────────────────────────────────── */
.hb-stroke { position: absolute; pointer-events: none; z-index: 0; --rot: -14deg; transform: rotate(var(--rot)); animation: hbStrokeSway var(--d, 12s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.hb-stroke--1 { top: -30px; left: -100px; width: 420px; height: 88px; border-radius: 80px 120px 90px 140px / 60px 90px 70px 100px; background: linear-gradient(90deg, color-mix(in oklab, var(--bg1), white 30%), transparent 92%); opacity: .55; --d: 12s; }
.hb-stroke--2 { top: 44px; left: -150px; width: 340px; height: 52px; border-radius: 60px 100px 70px 110px / 40px 60px 50px 70px; background: linear-gradient(90deg, color-mix(in oklab, var(--bg2), white 42%), transparent 90%); opacity: .4; --d: 15s; --delay: -5s; }
.hb-stroke--3 { bottom: -24px; right: -110px; width: 450px; height: 96px; border-radius: 120px 80px 140px 90px / 90px 60px 100px 70px; background: linear-gradient(270deg, color-mix(in oklab, var(--bg1), white 34%), transparent 92%); opacity: .5; --d: 13s; --delay: -3s; }
.hb-stroke--4 { bottom: 52px; right: -160px; width: 340px; height: 46px; border-radius: 80px 60px 100px 70px / 50px 40px 60px 45px; background: linear-gradient(270deg, color-mix(in oklab, var(--bg2), white 48%), transparent 90%); opacity: .38; --d: 16s; --delay: -8s; }
.hb-underline { position: absolute; left: 0; right: 0; bottom: -9px; width: 100%; height: 9px; }
.hb-underline path { fill: none; stroke: color-mix(in oklab, var(--bg1), white 58%); stroke-width: 4; stroke-linecap: round; opacity: .85; }
.hb-title em.hb-em-rel { position: relative; display: inline-block; }

/* ── GALERÍA (marcos colgados) ────────────────────────────────────────────── */
.hb-gallery-dots { position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--tx) 10%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, black, transparent 55%);
            mask-image: linear-gradient(90deg, black, transparent 55%); }
.hb-gallery { position: relative; height: 250px; z-index: 2; }
.hb-gallery__spot { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 340px; height: 280px; background: radial-gradient(ellipse 55% 80% at 50% 0%, color-mix(in srgb, var(--tx) 14%, transparent), transparent 70%); pointer-events: none; }
.hb-gallery__wire { position: absolute; top: 0; width: 1px; background: color-mix(in srgb, var(--tx) 35%, transparent); }
.hb-gallery__wire--1 { left: 26px; height: 34px; }
.hb-gallery__wire--2 { left: 132px; height: 78px; }
.hb-gallery__wire--3 { right: 44px; height: 52px; }
.hb-frame { position: absolute; background: #fdfaf4; padding: 9px; box-shadow: 0 18px 34px rgba(0, 0, 0, .45); border: 1px solid color-mix(in srgb, var(--tx) 25%, transparent); overflow: hidden; }
.hb-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-frame > .hb-frame__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .85); font-size: 18px; }
.hb-frame--1 { top: 34px; left: -22px; width: 96px; height: 122px; }
.hb-frame--1 .hb-frame__ph { background: linear-gradient(160deg, color-mix(in oklab, var(--bg1), white 45%), color-mix(in oklab, var(--bg2), white 20%)); }
.hb-frame--2 { top: 78px; left: 86px; width: 112px; height: 92px; }
.hb-frame--2 .hb-frame__ph { background: linear-gradient(160deg, color-mix(in oklab, var(--bg2), white 50%), color-mix(in oklab, var(--bg1), white 22%)); }
.hb-frame--3 { top: 52px; right: -6px; width: 100px; height: 130px; }
.hb-frame--3 .hb-frame__ph { background: linear-gradient(160deg, color-mix(in oklab, var(--bg1), white 28%), color-mix(in oklab, var(--bg2), white 48%)); }
.hb-gallery__bench { position: absolute; bottom: 14px; left: 30px; right: 10px; display: flex; justify-content: space-around; }
.hb-gallery__bench span { width: 34px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--tx) 25%, transparent); }

/* ── ACUARELA (blobs + marco) ─────────────────────────────────────────────── */
.hb-blob { position: absolute; pointer-events: none; z-index: 0; }
.hb-blob--1 { top: -70px; left: -50px; width: 320px; height: 280px; border-radius: 48% 52% 55% 45% / 55% 46% 54% 45%; background: color-mix(in oklab, var(--bg1), white 32%); filter: blur(40px); opacity: .5; animation: hbBlobDrift 11s ease-in-out infinite; }
.hb-blob--2 { bottom: -80px; right: -60px; width: 340px; height: 300px; border-radius: 52% 48% 45% 55% / 46% 55% 45% 54%; background: color-mix(in oklab, var(--bg2), white 40%); filter: blur(46px); opacity: .45; animation: hbBlobDrift2 13s ease-in-out infinite; }
.hb-blob--3 { top: 40%; left: 58%; width: 180px; height: 160px; border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%; background: color-mix(in srgb, var(--tx) 10%, transparent); filter: blur(32px); animation: hbBlobDrift 15s ease-in-out infinite; animation-delay: -6s; }
.hb-canvas-frame { position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--tx) 22%, transparent); border-radius: 11px; pointer-events: none; z-index: 1; }
.hb-title em.hb-em-wavy { text-decoration: underline wavy color-mix(in oklab, var(--bg1), white 55%) 2px; text-underline-offset: 8px; }

/* ── ECUALIZADOR (barras EQ + notas nativas) ──────────────────────────────── */
.hb-banner--ecualizador { padding-bottom: 56px; }
.hb-eq { position: absolute; left: 0; right: 0; bottom: 0; height: 78px; display: flex; align-items: flex-end; gap: 3px; padding: 0 10px; opacity: .42; pointer-events: none; z-index: 0; }
.hb-eq span { flex: 1; background: linear-gradient(180deg, color-mix(in oklab, var(--bg1), white 58%), transparent); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: hbBarAnim var(--d, 2s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); height: var(--h, 30px); }

/* ── TALLER (grid + glow) ─────────────────────────────────────────────────── */
.hb-grid-lines { position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: linear-gradient(color-mix(in srgb, var(--tx) 5%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--tx) 5%, transparent) 1px, transparent 1px);
    background-size: 36px 36px; }
.hb-glow { position: absolute; top: -60px; left: -40px; width: 300px; height: 240px; border-radius: 50%; background: color-mix(in oklab, var(--bg1), white 28%); filter: blur(56px); opacity: .4; pointer-events: none; z-index: 0; }

/* ── MECÁNICA (engranajes + franja peligro) ───────────────────────────────── */
.hb-gear { position: absolute; pointer-events: none; z-index: 0; color: color-mix(in srgb, var(--tx) 10%, transparent); }
.hb-gear--1 { top: -38px; right: -30px; font-size: 150px; animation: hbGearSpin 26s linear infinite; }
.hb-gear--2 { top: 64px; right: 82px; font-size: 74px; color: color-mix(in srgb, var(--tx) 8%, transparent); animation: hbGearSpinRev 18s linear infinite; }
.hb-gear--3 { bottom: -30px; left: -24px; font-size: 120px; color: color-mix(in srgb, var(--tx) 9%, transparent); animation: hbGearSpinRev 32s linear infinite; }
.hb-tool { position: absolute; pointer-events: none; z-index: 0; color: color-mix(in srgb, var(--tx) 12%, transparent); }
.hb-tool--wrench { bottom: 56px; left: 96px; font-size: 30px; transform: rotate(-24deg); }
.hb-danger-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; opacity: .5; pointer-events: none; z-index: 0; background: repeating-linear-gradient(45deg, color-mix(in srgb, #ffbc45 55%, transparent) 0 14px, transparent 14px 28px); }

/* ── PLANO TÉCNICO (blueprint + cota) ─────────────────────────────────────── */
.hb-blueprint { position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--tx) 10%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--tx) 10%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--tx) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--tx) 5%, transparent) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; }
.hb-corner { position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 1; }
.hb-corner--tl { top: 14px; left: 14px; border-top: 2px solid color-mix(in srgb, var(--tx) 55%, transparent); border-left: 2px solid color-mix(in srgb, var(--tx) 55%, transparent); }
.hb-corner--tr { top: 14px; right: 14px; border-top: 2px solid color-mix(in srgb, var(--tx) 55%, transparent); border-right: 2px solid color-mix(in srgb, var(--tx) 55%, transparent); }
.hb-corner--bl { bottom: 14px; left: 14px; border-bottom: 2px solid color-mix(in srgb, var(--tx) 55%, transparent); border-left: 2px solid color-mix(in srgb, var(--tx) 55%, transparent); }
.hb-corner--br { bottom: 14px; right: 14px; border-bottom: 2px solid color-mix(in srgb, var(--tx) 55%, transparent); border-right: 2px solid color-mix(in srgb, var(--tx) 55%, transparent); }
.hb-dim { position: absolute; bottom: 34px; left: 20%; right: 20%; height: 1px; pointer-events: none; z-index: 1; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tx) 55%, transparent) 0 8px, transparent 8px 16px); animation: hbDashMove 2.4s linear infinite; }
.hb-dim-tick { position: absolute; bottom: 29px; width: 1px; height: 11px; background: color-mix(in srgb, var(--tx) 55%, transparent); pointer-events: none; z-index: 1; }
.hb-dim-tick--l { left: 20%; }
.hb-dim-tick--r { right: 20%; }
.hb-tool--compass { top: 44px; left: 36px; font-size: 34px; transform: rotate(-12deg); color: color-mix(in srgb, var(--tx) 22%, transparent); }
.hb-tool--ruler { bottom: 58px; right: 40px; font-size: 30px; transform: rotate(14deg); color: color-mix(in srgb, var(--tx) 20%, transparent); }

/* ── CARPINTERÍA (vetas + nudos + zócalo) ─────────────────────────────────── */
.hb-wood { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .8;
    background: repeating-linear-gradient(178deg, color-mix(in srgb, var(--tx) 6%, transparent) 0 3px, transparent 3px 26px, color-mix(in srgb, var(--tx) 3%, transparent) 26px 30px, transparent 30px 58px); }
.hb-knot { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.hb-knot--1 { top: 38px; left: 12%; width: 52px; height: 38px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tx) 14%, transparent) 0 22%, transparent 24%, color-mix(in srgb, var(--tx) 9%, transparent) 34%, transparent 38%, color-mix(in srgb, var(--tx) 6%, transparent) 52%, transparent 56%); }
.hb-knot--2 { bottom: 52px; right: 10%; width: 64px; height: 44px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tx) 12%, transparent) 0 20%, transparent 22%, color-mix(in srgb, var(--tx) 8%, transparent) 34%, transparent 38%, color-mix(in srgb, var(--tx) 5%, transparent) 52%, transparent 56%); }
.hb-tool--hammer { top: 48px; right: 52px; font-size: 32px; transform: rotate(-18deg); color: color-mix(in srgb, var(--tx) 16%, transparent); }
.hb-tool--ruler2 { bottom: 44px; left: 48px; font-size: 30px; transform: rotate(22deg); color: color-mix(in srgb, var(--tx) 14%, transparent); }
.hb-skirting { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none; z-index: 0; background: linear-gradient(90deg, color-mix(in oklab, var(--bg1), white 25%), color-mix(in oklab, var(--bg2), white 12%)); }

/* ── MATRIX (lluvia de glifos, fuente mono) ───────────────────────────────── */
.hb-banner--matrix .hb-title,
.hb-banner--matrix .hb-sub,
.hb-banner--matrix .hb-btn { font-family: var(--theme-font-mono, "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace); }
.hb-banner--matrix .hb-title { font-weight: 700; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: 0; }
.hb-banner--matrix .hb-title em { font-style: normal; text-shadow: 0 0 18px color-mix(in srgb, var(--tx) 45%, transparent); }
.hb-matrix { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .55; z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
            mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent); }
.hb-matrix span {
    position: absolute; writing-mode: vertical-rl;
    font-family: var(--theme-font-mono, "Space Mono", monospace); font-size: 11px; letter-spacing: 7px;
    color: color-mix(in oklab, var(--bg2), white 52%);
    animation: hbMatrixFall var(--d, 7s) linear infinite; animation-delay: var(--delay, 0s);
}
.hb-matrix span:nth-child(1) { top: -10%; left: 6%; --d: 7s; }
.hb-matrix span:nth-child(2) { top: -16%; left: 22%; --d: 9s; --delay: -3s; }
.hb-matrix span:nth-child(3) { top: -8%; left: 47%; --d: 6s; --delay: -1.5s; }
.hb-matrix span:nth-child(4) { top: -14%; left: 72%; --d: 8s; --delay: -4.2s; }
.hb-matrix span:nth-child(5) { top: -12%; left: 90%; --d: 7.5s; --delay: -2.4s; }

/* ============================================================================
   Banners de TECNOLOGÍA nuevos (4): firewall, codigo, redes, neural.
   Mismas reglas del catálogo: todo deriva de --bg1/--bg2/--tx via color-mix().
   ========================================================================== */

/* ── Keyframes nuevos (prefijo hb) ────────────────────────────────────────── */
@keyframes hbScanY { 0% { top: -4px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% + 4px); opacity: 0; } }
@keyframes hbRadarPing { 0% { transform: scale(.22); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
@keyframes hbRadarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hbCaretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hbTokenDrift { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); } }
@keyframes hbNodePulse { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }
@keyframes hbSynapse { to { stroke-dashoffset: -24; } }

/* ── FIREWALL (seguridad informática: escaneo + radar + hex dump) ─────────── */
.hb-banner--firewall { --hb-accent: #ff7a7a; background: linear-gradient(160deg, var(--bg1), var(--bg2)); }
.hb-fw-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: linear-gradient(color-mix(in srgb, var(--tx) 4%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--tx) 4%, transparent) 1px, transparent 1px);
    background-size: 30px 30px; }
.hb-scan { position: absolute; left: 0; right: 0; top: -4px; height: 2px; pointer-events: none; z-index: 1;
    background: linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--hb-accent, #ffffff) 65%, transparent), transparent 96%);
    box-shadow: 0 0 16px color-mix(in srgb, var(--hb-accent, #ffffff) 40%, transparent);
    animation: hbScanY 5.5s linear infinite; }
.hb-radar { position: absolute; right: -72px; bottom: -72px; width: 260px; height: 260px; pointer-events: none; z-index: 0; }
.hb-radar__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tx) 15%, transparent); }
.hb-radar__ring:nth-child(2) { inset: 46px; }
.hb-radar__ring:nth-child(3) { inset: 92px; }
.hb-radar__ping { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--hb-accent, #ffffff) 55%, transparent); animation: hbRadarPing 3.4s ease-out infinite; }
.hb-radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--hb-accent, #ffffff) 20%, transparent), transparent 24%); animation: hbRadarSweep 6.5s linear infinite; }
.hb-tool--shield { top: 36px; left: 38px; font-size: 34px; transform: rotate(-8deg); color: color-mix(in srgb, var(--tx) 18%, transparent); }
.hb-tool--lock { bottom: 56px; left: 92px; font-size: 22px; transform: rotate(10deg); color: color-mix(in srgb, var(--tx) 14%, transparent); }
.hb-hexdump { position: absolute; left: 16px; right: 16px; bottom: 9px; pointer-events: none; z-index: 0; overflow: hidden; white-space: nowrap;
    font-family: var(--theme-font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 10px; letter-spacing: 3px;
    color: color-mix(in srgb, var(--tx) 20%, transparent); }

/* ── CÓDIGO (programación: gutter + guías de indentación + tokens) ────────── */
.hb-banner--codigo { --hb-accent: #5bc9ff; background: linear-gradient(165deg, var(--bg1), var(--bg2)); }
.hb-banner--codigo .hb-title em { font-family: var(--theme-font-mono, "JetBrains Mono", ui-monospace, monospace); font-style: normal; letter-spacing: -.02em; color: color-mix(in oklab, var(--bg1), white 68%); }
.hb-banner--codigo .hb-title em::after { content: "_"; margin-left: 2px; color: var(--hb-accent, #5bc9ff); animation: hbCaretBlink 1.1s steps(1) infinite; }
/* En la Home pública el título es un span único (headline del tenant, sin <em>):
   se le agrega solo el caret para conservar la firma del banner sin cambiarle la fuente. */
.hb-banner--codigo .hb-title [data-hb-title-full]::after { content: "_"; margin-left: 2px; color: var(--hb-accent, #5bc9ff); animation: hbCaretBlink 1.1s steps(1) infinite; }
.hb-gutter { position: absolute; top: 14px; bottom: 14px; left: 16px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; z-index: 0;
    padding-right: 9px; border-right: 1px solid color-mix(in srgb, var(--tx) 10%, transparent); text-align: right;
    font-family: var(--theme-font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 10px;
    color: color-mix(in srgb, var(--tx) 22%, transparent); }
.hb-indent { position: absolute; top: 12%; bottom: 12%; width: 1px; background: color-mix(in srgb, var(--tx) 7%, transparent); pointer-events: none; z-index: 0; }
.hb-indent--1 { left: 60px; }
.hb-indent--2 { left: 82px; }
.hb-indent--3 { left: 104px; }
.hb-token { position: absolute; pointer-events: none; z-index: 0; font-weight: 700;
    font-family: var(--theme-font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: var(--sz, 22px); color: color-mix(in srgb, var(--tx) 15%, transparent);
    animation: hbTokenDrift var(--d, 7s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.hb-token--1 { top: 15%; right: 9%; --sz: 34px; --rot: 8deg; }
.hb-token--2 { bottom: 22%; right: 15%; --sz: 26px; --rot: -10deg; --delay: -2.4s; --d: 8.5s; color: color-mix(in srgb, var(--hb-accent, #5bc9ff) 30%, transparent); }
.hb-token--3 { top: 26%; left: 15%; --sz: 24px; --rot: -6deg; --delay: -4s; --d: 7.6s; }
.hb-token--4 { bottom: 16%; left: 20%; --sz: 22px; --rot: 12deg; --delay: -1.5s; }
.hb-token--5 { top: 58%; right: 5%; --sz: 20px; --delay: -3.2s; --d: 9s; }

/* ── REDES (malla de nodos + paquetes viajando + señal) ───────────────────── */
.hb-banner--redes { --hb-accent: #6ff0d8;
    background: radial-gradient(ellipse at 82% 12%, color-mix(in oklab, var(--bg1), white 8%) 0%, transparent 55%),
               linear-gradient(160deg, var(--bg1), var(--bg2)); }
.hb-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black, transparent);
            mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black, transparent); }
.hb-net__link { stroke: color-mix(in srgb, var(--tx) 15%, transparent); stroke-width: 1; }
.hb-net__node { fill: color-mix(in srgb, var(--tx) 50%, transparent); animation: hbNodePulse var(--d, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.hb-net__hub { fill: none; stroke: color-mix(in srgb, var(--hb-accent, #6ff0d8) 50%, transparent); stroke-width: 1.5; }
.hb-net__packet { fill: var(--hb-accent, #6ff0d8); opacity: .85; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hb-accent, #6ff0d8) 80%, transparent)); }
.hb-tool--wifi { top: 40px; right: 46px; font-size: 30px; transform: rotate(12deg); color: color-mix(in srgb, var(--tx) 16%, transparent); }
.hb-tool--server { bottom: 46px; left: 44px; font-size: 28px; transform: rotate(-8deg); color: color-mix(in srgb, var(--tx) 14%, transparent); }
/* fa-wifi NO está declarado en el subset de css/fontawesome.min.css (sí lo están
   shield-halved, lock, server, brain y microchip). El glifo SÍ existe en el webfont
   completo fa-solid-900.woff2, así que solo falta la regla. Se declara acá y no en el
   FA vendorizado para que sobreviva a una regeneración de ese archivo. */
.fa-wifi, .fa-wifi-3, .fa-wifi-strong { --fa: "\f1eb"; }

/* ── NEURAL (IA: red neuronal + glow + chip) ──────────────────────────────── */
.hb-banner--neural { --hb-accent: #c792ff;
    background: radial-gradient(ellipse at 18% 22%, var(--bg1) 0%, transparent 60%),
               radial-gradient(ellipse at 86% 82%, color-mix(in oklab, var(--bg1), white 12%) 0%, transparent 55%),
               var(--bg2); }
.hb-ai-glow { position: absolute; top: -70px; right: -50px; width: 300px; height: 260px; border-radius: 50%;
    background: color-mix(in oklab, var(--bg1), white 26%); filter: blur(54px); opacity: .45;
    animation: hbBlobDrift 12s ease-in-out infinite; pointer-events: none; z-index: 0; }
.hb-neural { position: absolute; right: -34px; top: 50%; transform: translateY(-50%); width: 250px; height: 220px; pointer-events: none; z-index: 0; opacity: .9; }
.hb-neural--l { right: auto; left: -34px; transform: translateY(-50%) scaleX(-1); opacity: .45; }
.hb-neural__link { stroke: color-mix(in srgb, var(--tx) 13%, transparent); stroke-width: 1; stroke-dasharray: 4 8; animation: hbSynapse 1.6s linear infinite; }
.hb-neural__node { fill: color-mix(in srgb, var(--tx) 10%, transparent); stroke: color-mix(in srgb, var(--hb-accent, #c792ff) 40%, transparent); stroke-width: 1; }
.hb-neural__node.is-active { fill: color-mix(in srgb, var(--hb-accent, #c792ff) 35%, transparent); animation: hbNodePulse 2.6s ease-in-out infinite; }
.hb-neural__node.is-active--2 { animation-delay: -1.3s; }
.hb-tool--brain { top: 42px; left: 42px; font-size: 32px; transform: rotate(-10deg); color: color-mix(in srgb, var(--tx) 16%, transparent); }
.hb-tool--chip { bottom: 50px; right: 54px; font-size: 26px; transform: rotate(8deg); color: color-mix(in srgb, var(--tx) 13%, transparent); }

/* ── MERCADOS (grid + velas de trading) ───────────────────────────────────── */
.hb-banner--mercados { padding-bottom: 52px; }
.hb-trade-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: linear-gradient(color-mix(in srgb, var(--tx) 4%, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, color-mix(in srgb, var(--tx) 4%, transparent) 1px, transparent 1px);
    background-size: 42px 42px; }
.hb-candles { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: flex-end; gap: 6px; justify-content: center; padding: 0 24px; opacity: .55; pointer-events: none; z-index: 0; }
.hb-candles span { width: 8px; border-radius: 2px; height: var(--h, 30px); }
.hb-candles span.is-up { background: #22c55e; }
.hb-candles span.is-down { background: #ef4444; }

/* ── ENERGÍA (rayas diagonales + glow) ────────────────────────────────────── */
.hb-diag { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tx) 4%, transparent) 0 2px, transparent 2px 20px); }
.hb-energy-glow { position: absolute; top: -60px; right: -40px; width: 280px; height: 240px; border-radius: 50%; background: color-mix(in oklab, var(--bg1), white 30%); filter: blur(52px); opacity: .4; animation: hbBlobDrift 12s ease-in-out infinite; pointer-events: none; z-index: 0; }

/* ── BIBLIOTECA (banner claro, libros nativos vía adorno libros) ──────────── */
.hb-banner--biblioteca .hb-sub { color: color-mix(in srgb, var(--tx) 72%, transparent); }

/* Los libros/estrellas/notas "nativos" de biblioteca/cosmos/ecualizador se
   renderizan como capa de adorno (.hb-deco--libros/--estrellas/--notas) por
   defecto; ver el partial. Posiciones especiales para esas capas nativas: */
.hb-deco--books-native > i { bottom: auto; animation: hbEduFloat var(--d, 5.5s) ease-in-out infinite; animation-delay: var(--delay, 0s); color: color-mix(in srgb, var(--tx) 20%, transparent); }
.hb-deco--books-native > :nth-child(1) { left: 7%; top: 16%; --d: 5s; --sz: 20px; }
.hb-deco--books-native > :nth-child(2) { left: 88%; top: 22%; --d: 6.2s; --delay: -2s; --sz: 24px; }
.hb-deco--books-native > :nth-child(3) { left: 12%; top: 72%; --d: 5.6s; --delay: -3.4s; --sz: 18px; }
.hb-deco--books-native > :nth-child(4) { left: 82%; top: 70%; --d: 6.8s; --delay: -1.2s; --sz: 19px; }
.hb-deco--books-native > :nth-child(5) { left: 46%; top: 8%; --d: 5.2s; --delay: -4.5s; --sz: 16px; }

.hb-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hb-stars span { position: absolute; border-radius: 99px; background: color-mix(in srgb, var(--tx) 70%, transparent); animation: hbTwinkle var(--d, 2.8s) ease-in-out infinite; animation-delay: var(--delay, 0s); width: var(--sz, 3px); height: var(--sz, 3px); }
.hb-stars span.is-glyph { width: auto; height: auto; background: none; color: color-mix(in srgb, var(--tx) 55%, transparent); border-radius: 0; }
.hb-stars span:nth-child(1) { left: 8%; top: 22%; --sz: 3px; --d: 2.4s; }
.hb-stars span:nth-child(2) { left: 24%; top: 64%; --sz: 2px; --d: 3.1s; --delay: -.8s; }
.hb-stars span:nth-child(3) { left: 41%; top: 14%; --sz: 3px; --d: 2.8s; --delay: -1.6s; }
.hb-stars span:nth-child(4) { left: 58%; top: 78%; --sz: 2px; --d: 2.2s; --delay: -.4s; }
.hb-stars span:nth-child(5) { left: 72%; top: 28%; --sz: 3px; --d: 3.4s; --delay: -2.1s; }
.hb-stars span:nth-child(6) { left: 87%; top: 58%; --sz: 2px; --d: 2.6s; --delay: -1.1s; }
.hb-stars span:nth-child(7) { left: 15%; top: 84%; --sz: 2px; --d: 3s; --delay: -1.9s; }
.hb-stars span:nth-child(8) { left: 93%; top: 12%; --sz: 3px; --d: 2.5s; --delay: -.6s; }
.hb-stars span:nth-child(9) { left: 35%; top: 40%; font-size: 12px; --d: 3.6s; --delay: -2.4s; }
.hb-stars span:nth-child(10) { left: 66%; top: 52%; font-size: 10px; --d: 2.9s; --delay: -1.3s; }

/* ============================================================================
   Banners de NEGOCIOS nuevos (4): cripto, inversiones, marketing, corporativo.
   Mismas reglas del catálogo: todo deriva de --bg1/--bg2/--tx via color-mix().
   Los verdes/rojos de mercado son fijos, igual que en .hb-candles.
   ========================================================================== */

@keyframes hbCoinFloat { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--rot, 0deg)); } }
@keyframes hbChartDraw { 0% { stroke-dashoffset: 940; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes hbChipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hbRingPing { 0% { transform: scale(.3); opacity: .75; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes hbWindowGlow { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }

/* ── CRIPTO (monedas + cadena de bloques + ticker) ────────────────────────── */
.hb-banner--cripto { --hb-accent: #f7931a; padding-bottom: 60px;
    background: radial-gradient(ellipse at 78% 12%, color-mix(in srgb, var(--hb-accent) 14%, transparent) 0%, transparent 50%),
               linear-gradient(160deg, var(--bg1), var(--bg2)); }
.hb-crypto-glow { position: absolute; top: -70px; right: -50px; width: 300px; height: 250px; border-radius: 50%;
    background: color-mix(in srgb, var(--hb-accent) 30%, transparent); filter: blur(64px); opacity: .55;
    animation: hbBlobDrift 12s ease-in-out infinite; pointer-events: none; z-index: 0; }
.hb-coin { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; pointer-events: none; z-index: 0;
    border: 2px solid color-mix(in srgb, var(--tx) 22%, transparent); color: color-mix(in srgb, var(--tx) 40%, transparent);
    animation: hbCoinFloat var(--d, 8s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.hb-coin--1 { top: 16%; left: 7%; width: 48px; height: 48px; font-size: 23px; --rot: -8deg; --d: 7s;
    border-color: color-mix(in srgb, var(--hb-accent) 45%, transparent); color: color-mix(in srgb, var(--hb-accent) 60%, transparent); }
.hb-coin--2 { top: 24%; right: 8%; width: 38px; height: 38px; font-size: 18px; --rot: 9deg; --d: 8.5s; --delay: -3s; }
.hb-coin--3 { bottom: 32%; left: 13%; width: 30px; height: 30px; font-size: 14px; --rot: -5deg; --d: 9s; --delay: -5.2s; border-width: 1.5px; }
.hb-chain { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; align-items: center; justify-content: center; opacity: .5; pointer-events: none; z-index: 0; }
.hb-chain__block { width: 22px; height: 22px; border: 1.5px solid color-mix(in srgb, var(--tx) 35%, transparent); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.hb-chain__block > span { width: 6px; height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--tx) 40%, transparent); }
.hb-chain__block:nth-child(4n+1) > span { background: color-mix(in srgb, var(--hb-accent) 75%, transparent); }
.hb-chain__link { width: 16px; height: 1.5px; background: color-mix(in srgb, var(--tx) 25%, transparent); }
.hb-ticker { position: absolute; left: 16px; right: 16px; bottom: 9px; overflow: hidden; white-space: nowrap; pointer-events: none; z-index: 0;
    font-family: var(--theme-font-mono, "Space Mono", ui-monospace, monospace); font-size: 10px; letter-spacing: 2px;
    color: color-mix(in srgb, var(--tx) 32%, transparent); }
.hb-ticker b { font-weight: 700; }
.hb-ticker b.is-up { color: #22c55e; }
.hb-ticker b.is-down { color: #ef4444; }

/* ── INVERSIONES (grid + curva de rendimiento + chips) ────────────────────── */
.hb-banner--inversiones { --hb-accent: #4ade80; padding-bottom: 64px; }
/* Reusa .hb-trade-grid de mercados como fondo. */
.hb-invest-chart { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; pointer-events: none; z-index: 0; }
.hb-invest-chart__area { fill: rgba(34, 197, 94, .12); }
.hb-invest-chart__line { fill: none; stroke: rgba(34, 197, 94, .85); stroke-width: 2; stroke-dasharray: 940; animation: hbChartDraw 9s ease-out infinite; }
.hb-invest-chart__dot { fill: #22c55e; }
.hb-invest-chart__ring { fill: none; stroke: rgba(34, 197, 94, .7); stroke-width: 1.5; animation: hbNodePulse 2.4s ease-in-out infinite; }
.hb-invest-chip { position: absolute; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; pointer-events: none; z-index: 0;
    animation: hbChipFloat var(--d, 7s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.hb-invest-chip--1 { top: 20%; right: 8%; background: rgba(34, 197, 94, .15); border: 1px solid rgba(34, 197, 94, .45); color: #7ce8a4; --d: 7s; }
.hb-invest-chip--2 { top: 32%; left: 7%; background: color-mix(in srgb, var(--tx) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tx) 25%, transparent); color: color-mix(in srgb, var(--tx) 65%, transparent); --d: 8.5s; --delay: -3.4s; }
.hb-tool--pie { top: 38px; left: 40px; font-size: 30px; transform: rotate(-10deg); color: color-mix(in srgb, var(--tx) 14%, transparent); }

/* Verdes/rojos de mercado sobre paletas CLARAS (ej. preset "Marfil"): los tonos
   brillantes quedan ilegibles sobre fondo claro (el chip #7ce8a4 daba 1.33:1), así
   que se cambian por variantes oscuras. Usa .hb-banner--light, la misma clase que ya
   ajusta los botones y que se aplica según la luminancia del texto (admin y público). */
.hb-banner--light .hb-ticker b.is-up { color: #15803d; }
.hb-banner--light .hb-ticker b.is-down { color: #b91c1c; }
.hb-banner--light .hb-invest-chart__area { fill: rgba(21, 128, 61, .14); }
.hb-banner--light .hb-invest-chart__line { stroke: rgba(21, 128, 61, .9); }
.hb-banner--light .hb-invest-chart__dot { fill: #15803d; }
.hb-banner--light .hb-invest-chart__ring { stroke: rgba(21, 128, 61, .7); }
.hb-banner--light .hb-invest-chip--1 { background: rgba(21, 128, 61, .12); border-color: rgba(21, 128, 61, .45); color: #15803d; }

/* ── MARKETING (megáfono + ondas + funnel + engagement) ───────────────────── */
.hb-banner--marketing { --hb-accent: #ff8fd4; }
.hb-mkt-dots { position: absolute; top: 0; left: 0; width: 45%; height: 62%; opacity: .5; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--tx) 14%, transparent) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 0% 0%, black, transparent 85%);
            mask-image: radial-gradient(ellipse at 0% 0%, black, transparent 85%); }
.hb-tool--megaphone { left: 42px; top: 46px; font-size: 36px; transform: rotate(-14deg); color: color-mix(in srgb, var(--tx) 18%, transparent); }
.hb-mkt-ring { position: absolute; left: 32px; top: 34px; width: 64px; height: 64px; border-radius: 50%; pointer-events: none; z-index: 0;
    border: 1.5px solid color-mix(in srgb, var(--hb-accent) 50%, transparent);
    animation: hbRingPing 3.2s ease-out infinite; }
.hb-mkt-ring--2 { animation-delay: -1.1s; }
.hb-mkt-ring--3 { animation-delay: -2.2s; }
.hb-funnel { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; opacity: .6; pointer-events: none; z-index: 0; }
.hb-funnel span { height: 13px; border-radius: 4px; background: color-mix(in srgb, var(--tx) 13%, transparent); }
.hb-funnel span:nth-child(1) { width: 86px; }
.hb-funnel span:nth-child(2) { width: 62px; background: color-mix(in srgb, var(--tx) 17%, transparent); }
.hb-funnel span:nth-child(3) { width: 40px; background: color-mix(in srgb, var(--hb-accent) 35%, transparent); }
.hb-funnel span:nth-child(4) { width: 22px; background: color-mix(in srgb, var(--hb-accent) 65%, transparent); }
.hb-mkt-social { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hb-mkt-social i { position: absolute; bottom: 2%; animation: hbFloatUp var(--d, 10s) linear infinite; animation-delay: var(--delay, 0s);
    font-size: var(--sz, 15px); color: color-mix(in srgb, var(--tx) 38%, transparent); }
.hb-mkt-social i:nth-child(1) { left: 16%; --d: 9.5s; --sz: 14px; color: color-mix(in srgb, var(--hb-accent) 50%, transparent); }
.hb-mkt-social i:nth-child(2) { left: 36%; --d: 11s; --delay: -4s; --sz: 17px; }
.hb-mkt-social i:nth-child(3) { left: 58%; --d: 8.8s; --delay: -6.5s; --sz: 15px; }
.hb-mkt-social i:nth-child(4) { left: 78%; --d: 10.4s; --delay: -2s; --sz: 16px; color: color-mix(in srgb, var(--hb-accent) 45%, transparent); }

/* ── CORPORATIVO (pinstripes + skyline + glow dorado) ─────────────────────── */
/* No declara --hb-accent: hereda el dorado #e0bf63 de .hb-banner--biz. */
.hb-banner--corporativo { padding-bottom: 64px; background: linear-gradient(165deg, var(--bg1), var(--bg2)); }
.hb-pinstripes { position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tx) 3.5%, transparent) 0 1px, transparent 1px 16px); }
.hb-corp-glow { position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); width: 440px; height: 200px; border-radius: 50%;
    background: color-mix(in srgb, var(--hb-accent, #e0bf63) 22%, transparent); filter: blur(52px); pointer-events: none; z-index: 0; }
.hb-skyline { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 94px; opacity: .65; pointer-events: none; z-index: 0; }
.hb-skyline span { width: var(--w, 44px); height: var(--h, 60px); border-radius: 2px 2px 0 0;
    background-color: color-mix(in srgb, var(--tx) 8%, transparent);
    background-image: radial-gradient(color-mix(in srgb, var(--tx) 30%, transparent) 1px, transparent 1.5px);
    background-size: 9px 12px; background-position: 4px 5px; }
.hb-skyline span.is-lit { background-image: radial-gradient(color-mix(in srgb, var(--hb-accent, #e0bf63) 55%, transparent) 1px, transparent 1.5px);
    animation: hbWindowGlow 4.5s ease-in-out infinite; }
.hb-skyline span.is-lit:nth-child(5) { animation-delay: -2s; }
.hb-tool--briefcase { top: 40px; right: 46px; font-size: 30px; transform: rotate(8deg); color: color-mix(in srgb, var(--tx) 15%, transparent); }
.hb-tool--handshake { top: 48px; left: 44px; font-size: 30px; transform: rotate(-8deg); color: color-mix(in srgb, var(--tx) 13%, transparent); }

/* ── Hero en la Home pública: full-bleed (ancho total) ────────────────────── */
/* La sección .home-hero-fullbleed ya rompe a 100vw; acá el banner ocupa el 100%,
   sin bordes redondeados ni sombra (no es una tarjeta), con padding-top que despeja
   el navbar transparente y el contenido centrado a ~1180px (como el hero histórico). */
.home-hero-catalog-section { display: block; }
.home-hero-catalog-section .hb-banner {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    min-height: 360px;
    padding-top: 6.5rem;
    padding-bottom: 6rem;
    padding-inline: clamp(1.25rem, calc((100% - 1180px) / 2), 46%);
}
/* Collage / galería más grandes para el hero ancho. */
.home-hero-catalog-section .hb-collage,
.home-hero-catalog-section .hb-gallery { height: 400px; }
.home-hero-catalog-section .hb-collage__tile { --scale: 1.2; border: 4px solid #fff; box-shadow: 0 20px 50px rgba(46, 26, 51, .28); }
.home-hero-catalog-section .hb-collage__tile--1 { width: 190px; height: 190px; top: 6px; left: 6px; }
.home-hero-catalog-section .hb-collage__tile--2 { width: 180px; height: 180px; top: 92px; right: 0; }
.home-hero-catalog-section .hb-collage__tile--3 { width: 185px; height: 185px; bottom: 4px; left: 92px; }
.home-hero-catalog-section .hb-frame--1 { width: 150px; height: 190px; top: 50px; left: -12px; }
.home-hero-catalog-section .hb-frame--2 { width: 176px; height: 146px; top: 122px; left: 132px; }
.home-hero-catalog-section .hb-frame--3 { width: 156px; height: 204px; top: 78px; right: -8px; }

/* Tipografía del hero público al tamaño histórico (matchea .home-hero-* de site.css:
   título grande, subtítulo 1.06rem, botones anchos). Las tarjetas del admin
   conservan el tamaño compacto del preview. */
.home-hero-catalog-section .hb-badge { font-size: 0.72rem; padding: 0.35rem 0.95rem; margin-bottom: 1.25rem; }
.home-hero-catalog-section .hb-title { font-size: clamp(2.1rem, 4.8vw, 3.7rem); line-height: 1.1; margin-bottom: 0.85rem; }
.home-hero-catalog-section .hb-banner--split .hb-title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.home-hero-catalog-section .hb-banner--arte.hb-banner--split .hb-title { font-style: italic; }
.home-hero-catalog-section .hb-sub { font-size: 1.06rem; line-height: 1.7; margin-bottom: 1.6rem; }
.home-hero-catalog-section .hb-banner:not(.hb-banner--split) .hb-sub { max-width: 630px; }
.home-hero-catalog-section .hb-banner--split .hb-sub { max-width: 46ch; }
.home-hero-catalog-section .hb-actions { gap: 0.8rem; }
.home-hero-catalog-section .hb-btn { min-width: 185px; padding: 0.72rem 1.6rem; font-size: 0.95rem; }
.home-hero-catalog-section .hb-meta { gap: 0.6rem 1.4rem; margin-top: 1.5rem; }
.home-hero-catalog-section .hb-meta__item { font-size: 0.82rem; }

@media (max-width: 991.98px) {
    .home-hero-catalog-section .hb-banner { padding-top: 3rem; padding-bottom: 5rem; min-height: 300px; }
}

/* ── Responsive: split → 1 columna en móvil ───────────────────────────────── */
@media (max-width: 720px) {
    .hb-banner--split { grid-template-columns: 1fr; text-align: center; }
    .hb-banner--split .hb-banner__inner { text-align: center; }
    .hb-banner--split .hb-actions { justify-content: center; }
    .hb-collage, .hb-gallery { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-banner *,
    .hb-banner *::before,
    .hb-banner *::after { animation: none !important; }
}

/* ============================================================================
   Chrome del catálogo en el admin (Diseño → Banner del Home).
   ========================================================================== */
.hb-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hb-chip {
    border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
    border: 1.5px solid rgba(var(--theme-primary-rgb, 158, 208, 197), .6);
    background: var(--theme-surface, #fff); color: var(--theme-on-surface, #343a40);
    font-family: var(--theme-font-body); transition: background .15s, color .15s, border-color .15s;
}
.hb-chip:hover { border-color: var(--theme-primary, #9ed0c5); }
.hb-chip.is-active { background: var(--theme-primary, #9ed0c5); color: var(--theme-on-primary, #fff); border-color: var(--theme-primary, #9ed0c5); }

.hb-panel { display: none; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 18px; }
.hb-panel.is-visible { display: grid; }
.hb-panel--single.is-visible { display: block; }
.hb-panel--single .hb-card { max-width: 820px; }

.hb-card {
    border: 2px solid rgba(var(--theme-primary-rgb, 158, 208, 197), .35);
    border-radius: 20px; background: var(--theme-surface, #fff);
    box-shadow: var(--theme-shadow-1, 0 4px 14px rgba(0, 0, 0, .08));
    padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.hb-card.is-selected { border-color: var(--theme-primary, #9ed0c5); box-shadow: var(--theme-shadow-2, 0 8px 24px rgba(0, 0, 0, .15)); }
.hb-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hb-card__name { font-weight: 700; font-size: 14px; color: var(--theme-on-surface, #343a40); }
.hb-card__tag { color: var(--theme-on-surface-muted, #8a8f96); font-weight: 600; }
.hb-select {
    border-radius: 999px; padding: 6px 18px; font-weight: 700; font-size: 12.5px; cursor: pointer;
    background: var(--theme-surface, #fff); color: var(--theme-primary-strong, var(--theme-primary, #2f7a6c));
    border: 1.5px solid var(--theme-primary, #9ed0c5); font-family: var(--theme-font-body); white-space: nowrap;
    transition: background .15s, color .15s;
}
.hb-select.is-selected { background: var(--theme-primary, #9ed0c5); color: var(--theme-on-primary, #fff); }
.hb-card__preview { border-radius: 16px; overflow: hidden; }
.hb-card__preview .hb-banner { min-height: 280px; }

.hb-pals { display: flex; flex-direction: column; gap: 8px; }
.hb-adornos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hb-adornos__label { color: var(--theme-on-surface-muted, #8a8f96); font-size: 11.5px; font-weight: 600; }
.hb-pill {
    display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 11px;
    font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: var(--theme-font-body);
    border: 1.5px solid var(--theme-primary, #9ed0c5);
    background: var(--theme-surface, #fff); color: var(--theme-primary-strong, var(--theme-primary, #4f9a8b));
}
.hb-pill.is-on { background: var(--theme-primary, #9ed0c5); color: var(--theme-on-primary, #fff); }
.hb-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hb-preset {
    display: inline-flex; align-items: center; gap: 6px; background: var(--theme-surface, #fff);
    border: 1px solid rgba(0, 0, 0, .12); color: var(--theme-on-surface, #495057);
    border-radius: 999px; padding: 4px 10px 4px 5px; font-size: 11.5px; font-weight: 600; cursor: pointer;
    font-family: var(--theme-font-body);
}
.hb-preset.is-active { border-color: var(--theme-primary, #9ed0c5); box-shadow: 0 0 0 1.5px var(--theme-primary, #9ed0c5); }
.hb-preset .hb-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hb-preset .hb-sw:last-of-type { border: 1px solid rgba(0, 0, 0, .18); }
.hb-custom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--theme-on-surface-muted, #8a8f96); font-size: 11.5px; font-weight: 600; }
.hb-custom__pick { width: 24px; height: 24px; border: none; border-radius: 6px; padding: 0; background: none; cursor: pointer; }

.hb-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    border-top: 1px solid rgba(var(--theme-primary-rgb, 158, 208, 197), .3); padding-top: 16px; margin-top: 4px;
}
.hb-status { font-size: 13px; color: var(--theme-primary-strong, var(--theme-primary, #4f9a8b)); font-weight: 600; }

@media (max-width: 560px) {
    .hb-panel, .hb-panel.is-visible { grid-template-columns: 1fr; }
}