/** * Shortcode Header Apuestas — cabecera de reseña (variante "Clásico"). * * Sigue las convenciones de * sites/all/modules/custom/config_apuestas/SHORTCODE-CONVENTIONS.md * * Política de color (§5): * - --rk-brand → marca del host (de BrandResolver, inyectado inline) * - --rk-accent → acento de marca (BrandResolver) * - --rk-green → CTA UNIVERSAL FIJO (no se adapta — convención afiliados) * - --rk-green-d → sombra del CTA * - --rk-pick-color → color del badge EDITOR'S PICK (per-bookmaker, inline) * - Iconos funcionales, texto, líneas → neutros. */ .bdb-header { /* Tokens locales. --rk-brand / --rk-accent se sobreescriben inline desde * el template con los valores del preset de host. Si por lo que sea no * llegan, caemos a un verde neutro. */ --rk-brand:#16a34a; --rk-accent:#0c6f33; --rk-green:#16a34a; --rk-green-d:#0c6f33; --rk-pick-color:#d6a217; --rk-ink:#15181d; --rk-ink-2:#3a4047; --rk-mute:#6b7380; --rk-line:#e6e8ec; --rk-line-2:#eef0f3; --rk-soft:#f7f8fa; --rk-bg:#fff; --rk-gold:#d6a217; max-width:1180px; margin:14px auto 28px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; color:var(--rk-ink); line-height:1.55; -webkit-font-smoothing:antialiased; /* Card elevation: lifts the whole module off the page background. * Doble sombra: corta de contacto + difusa para luz ambiente. */ border-radius:14px; box-shadow: 0 1px 2px rgba(15,17,21,.05), 0 8px 28px -12px rgba(15,17,21,.18); } .bdb-header *{box-sizing:border-box} .bdb-header img{max-width:100%;display:block} .bdb-header a{color:inherit;text-decoration:none} /* ═══════════════════════════════════════════════════════════ BANNER (fondo blanco) ═══════════════════════════════════════════════════════════ */ .bdb-header__banner{ background:var(--rk-bg);border:1px solid var(--rk-line); border-radius:14px 14px 0 0; padding:22px 22px 0; /* position+overflow para clipping del pick badge esquinero. */ position:relative; overflow:hidden; } /* Cuando el banner tiene data-lk, todo el bloque es clickable. */ .bdb-header__banner[data-lk]{cursor:pointer} /* ── Cabecera del banner: logo · título+trust · score */ .bdb-header__banner-main{ display:grid;grid-template-columns:auto 1fr auto; gap:20px;align-items:center; padding-bottom:18px;border-bottom:1px solid var(--rk-line); } .bdb-header__banner-logo{ width:90px;height:90px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:#0a0a0a;flex-shrink:0;overflow:hidden; box-shadow:0 8px 20px -10px rgba(15,17,21,.35),0 2px 6px -2px rgba(15,17,21,.18); } .bdb-header__banner-logo img{ width:100%;height:100%;object-fit:contain;padding:6px; /* Logo siempre en blanco sobre el fondo de marca (logo_bg). Funciona * con PNGs/SVGs de cualquier color: brightness(0) los reduce a negro * macizo, invert(1) los pasa a blanco macizo. */ filter:brightness(0) invert(1); } .bdb-header__banner-logoTxt{ color:#fff;font-family:"Arial Black",sans-serif;font-weight:900; font-size:16px;letter-spacing:.02em;text-align:center;padding:6px;line-height:1.1; } .bdb-header__banner-t{min-width:0} /* ── H1 visual via h3 (SHORTCODE-CONVENTIONS §2): * El template usa

pero queremos look de H1. Sami aplica estilos * agresivos a h3 (naranja, mayúsculas, font custom). !important neutraliza. */ .bdb-header__banner-title{ font-size:32px !important; font-weight:800 !important; line-height:1.05 !important; letter-spacing:-.02em !important; color:var(--rk-ink) !important; text-transform:none !important; font-family:inherit !important; margin:0 !important; padding:0 !important; } .bdb-header__banner-title::before, .bdb-header__banner-title::after{display:none !important} .bdb-header__banner-subtitle{ font-size:15px;font-weight:400;color:var(--rk-mute); margin-top:6px;letter-spacing:.01em; } .bdb-header__banner-trust{ display:flex;gap:10px;flex-wrap:wrap;margin-top:10px; font-size:13px;color:var(--rk-mute);align-items:center; } .bdb-header__banner-trust b{color:var(--rk-ink);font-weight:700} .bdb-header__banner-stars{color:var(--rk-gold);letter-spacing:1px;font-size:14px} .bdb-header__banner-trust-sep{color:#cfd3da} .bdb-header__banner-score{ flex-shrink:0;text-align:center; padding-left:24px;border-left:1px solid var(--rk-line); } .bdb-header__banner-score-num{ font-size:34px;font-weight:800;line-height:1; color:var(--rk-brand);letter-spacing:-.02em; } .bdb-header__banner-score-num small{ font-size:14px;color:var(--rk-mute);font-weight:600; } .bdb-header__banner-score-label{ font-size:11px;color:var(--rk-mute); letter-spacing:.1em;text-transform:uppercase; margin-top:3px;font-weight:700; } /* ── Badge EDITOR'S PICK (color per-bookmaker via --rk-pick-color) * Mismo patrón que ranking_casas: badge esquinero "tab" anclado al top-right * del banner. Color de fondo, label e icono vienen del JSON (pick objeto). */ .bdb-header__pick-badge{ position:absolute;top:0;right:0; background:var(--rk-pick-color);color:#fff; font-size:9.5px;font-weight:800;letter-spacing:.14em; padding:5px 14px;border-radius:0 0 0 10px; z-index:2;line-height:1; display:inline-flex;align-items:center;gap:5px; text-transform:uppercase; } .bdb-header__pick-badge i{font-size:10px;line-height:1} /* ── Features row * Iteración completa de bm.features[]. En desktop: flex con separadores * verticales. En móvil: scroll horizontal — el usuario arrastra para ver * las features que no caben en pantalla. */ .bdb-header__banner-meta{ display:flex;gap:26px; padding:18px 0;border-bottom:1px solid var(--rk-line); /* Scroll horizontal cuando no caben todas en una fila. */ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--rk-line) transparent; } .bdb-header__banner-meta::-webkit-scrollbar{height:6px} .bdb-header__banner-meta::-webkit-scrollbar-track{background:transparent} .bdb-header__banner-meta::-webkit-scrollbar-thumb{background:var(--rk-line);border-radius:3px} .bdb-header__feature{ display:flex;flex-direction:column;align-items:center;gap:5px; padding-right:26px;border-right:1px solid var(--rk-line); min-width:0;flex-shrink:0; /* Centramos también el texto por dentro: cuando el valor o label tienen * varias palabras (ej. "iOS & Android"), evita desalineación visual con * el icono que arriba va naturalmente centrado. */ text-align:center; /* min-width garantiza que en móvil cada cell tenga tamaño legible * y el scroll horizontal funcione bien. */ min-width:100px; } .bdb-header__feature:last-child{border-right:0;padding-right:0} .bdb-header__feature-icon{ display:inline-flex;align-items:center;justify-content:center; color:var(--rk-ink-2);font-size:16px;line-height:1;margin-bottom:2px; } .bdb-header__feature-label{ font-size:12px;color:var(--rk-mute);font-weight:500; letter-spacing:.02em;line-height:1.2; } .bdb-header__feature-value{ font-size:14px;font-weight:700;color:var(--rk-ink); line-height:1.2; } /* Modifiers de resaltar: SÍ verde, NO rojo (§5 — semánticos, no de marca). */ .bdb-header__feature-value--yes{color:var(--rk-green-d, #0c6f33)} .bdb-header__feature-value--no{color:#b91c1c} /* ═══════════════════════════════════════════════════════════ BONUS STRIP + CTA Container brand-tinted siguiendo SHORTCODE-CONVENTIONS §5: - Fondo: tinte de marca (7%/2% color-mix con transparent) - Borde: dashed brand tint (35%) - Icono: macizo en --rk-brand - Label: accent de marca - CTA: VERDE FIJO --rk-green (no se adapta) ═══════════════════════════════════════════════════════════ */ .bdb-header__banner-bonus{ display:flex;align-items:center;justify-content:space-between; gap:24px;flex-wrap:wrap; padding:20px 24px; margin:18px 0; border-radius:10px; background:linear-gradient(135deg, color-mix(in srgb, var(--rk-brand) 7%, transparent), color-mix(in srgb, var(--rk-brand) 2%, transparent)); border:1px dashed color-mix(in srgb, var(--rk-brand) 35%, transparent); } .bdb-header__bonusLine{ display:flex;align-items:center;gap:14px; font-size:18px;font-weight:700;color:var(--rk-ink); line-height:1.35; } /* Caja icono del bono — fondo MACIZO con color de marca (§5). */ .bdb-header__bonusLine-ico{ width:38px;height:38px;border-radius:10px; background:var(--rk-brand);color:#fff; display:inline-flex;align-items:center;justify-content:center; flex-shrink:0; } .bdb-header__bonusLine-ico i{font-size:18px;line-height:1} .bdb-header__bonusLine-text{display:inline} /* Label "Bono bienvenida" en accent de marca. Usamos color-mix con ink * para garantizar legibilidad — los accent del YAML son tonos claros * (amarillo/lima) que sobre fondo blanco serían ilegibles a pelo. */ .bdb-header__bonusLine-label{ font-style:normal; color:color-mix(in srgb, var(--rk-accent) 35%, var(--rk-ink)); font-weight:700; } .bdb-header__bonusLine small{ display:block;font-size:11.5px;color:var(--rk-mute); font-weight:500;margin-top:2px;letter-spacing:.01em; } /* CTA — VERDE FIJO (no se adapta, §5). * en lugar de /