/* ══════════════════════════════════════════════════════════════════════ mo-brand.css — Skin de marca MariachisOrale (Camino B) · v1.0.18 ══════════════════════════════════════════════════════════════════════ Se carga DESPUÉS de css/styles.css (generado) y de header.css/footer.css vía el mecanismo "Theme/Skin de marca" — NO toca ni un Jinja de business.html/municipio.html/provincia.html: repinta los componentes t1-* que YA existen, reutilizando el sistema de variables --primary/ --secondary/--hero-g1-3 que el propio generador expone con var(...,fallback). Por qué algunas reglas llevan !important: business.html/municipio.html/ provincia.html declaran su PROPIO bloque `:root{--t1-bg:#f7f8fa;...}` inline en , DESPUÉS de este archivo en el documento. Para esos tokens literales (no derivados de --primary/--secondary), el orden del documento haría ganar al inline de la plantilla; !important en un archivo de "skin" cargado al final es el patrón estándar para esto y no altera estructura ni lógica alguna. ══════════════════════════════════════════════════════════════════════ */ :root{ /* ── Paleta de marca (estos SÍ cascan solos: t1-primary/-dark/secondary están definidos como var(--primary,#…) en cada plantilla) ── */ --primary: #0f6b57; --primary-dark: #0b5646; --secondary: #c89b3c; --secondary-dark: #b8872f; --hero-g1: #0d2a23; --hero-g2: #0f6b57; --hero-g3: #14805f; --footer-bg: #12382f; --bg-page: #faf7f2; --bg-header: #ffffff; /* ── Tokens literales de las plantillas t1-* (forzados con !important: ver nota arriba) ── */ --t1-bg: #faf7f2 !important; --t1-card: #ffffff !important; --t1-ink: #252525 !important; --t1-strong: #1a1712 !important; --t1-muted: #6f6a61 !important; --t1-line: #e8ddcc !important; --t1-line-strong: #d8c9a8 !important; --t1-primary-soft: #e6f2ee !important; --t1-radius: 8px !important; --t1-radius-sm: 6px !important; --t1-shadow: 0 14px 34px rgba(42,36,31,.10) !important; --t1-shadow-sm: 0 1px 3px rgba(42,36,31,.07) !important; } /* ── Heros de ficha y municipio: mismo lenguaje cálido que home/pricing/ locations (crema + radial dorado + filete tricolor), NO oscuro. ── */ .t1-profile-hero, .t1-context-hero{ background: radial-gradient(circle at 84% 15%,rgba(200,155,60,.16),transparent 34%), linear-gradient(135deg,#fffaf2 0%,#f7ecdc 55%,#fffdf9 100%) !important; border-bottom:1px solid var(--t1-line) !important; position:relative;overflow:hidden; } .t1-profile-hero::before, .t1-context-hero::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2; background:linear-gradient(90deg,var(--primary) 0 33.3%,#f3ead9 33.3% 66.6%,#b33a2e 66.6% 100%); } .t1-profile-hero > *,.t1-context-hero > *{position:relative;z-index:1} .t1-profile-title,.t1-context-hero h1,.t1-title{color:var(--t1-strong) !important;letter-spacing:-.03em} .t1-eyebrow{color:var(--primary) !important} .t1-eyebrow::before{background:var(--secondary) !important} /* ── Tarjetas y superficies: fuera el gris azulado frío, dentro crema/blanco cálido ── */ .t1-top-rated-card, .t1-listing-media{background:#faf5ea !important} .t1-map-panel,.t1-side-card,.t1-data-card,.t1-modal-card{background:#fff !important} /* ── Botón WhatsApp: color universal de marca, no se retiñe (igual que verificado/cerrado son señales fijas, no de marca). ── */ .t1-btn-wa{background:#25D366 !important;border-color:#25D366 !important} .t1-btn-wa:hover{background:#128C7E !important;border-color:#128C7E !important} /* ── .t1-hero (home de subdominio / hero de provincia con buscador): MISMO tratamiento cálido que profile-hero/context-hero. Antes usaba var(--hero-g1/2/3) como degradado OSCURO con texto blanco — es el mismo error que se corrigió en la home del hub: el primer elemento que ve el usuario debe ser cálido, no oscuro. --hero-g1/2/3 SÍ se mantienen oscuros (ver :root arriba) a propósito: los sigue usando .t1-cta y .t1-claim-card como bloques de acento oscuro (a juego con el footer verde profundo), que es un uso distinto y correcto — un CTA de cierre antes del footer, no el primer hero de la página. ── */ .t1-hero{ background: radial-gradient(circle at 84% 15%,rgba(200,155,60,.16),transparent 34%), linear-gradient(135deg,#fffaf2 0%,#f7ecdc 55%,#fffdf9 100%) !important; color:var(--t1-ink) !important; border-bottom:1px solid var(--t1-line) !important; } .t1-hero::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2; background:linear-gradient(90deg,var(--primary) 0 33.3%,#f3ead9 33.3% 66.6%,#b33a2e 66.6% 100%); } .t1-hero > *{position:relative;z-index:1} .t1-hero .t1-lead{color:#4a443c !important} .t1-hero .t1-hero-card{ background:rgba(255,255,255,.68) !important; border:1px solid var(--t1-line) !important; backdrop-filter:blur(6px); } .t1-hero .t1-hero-card-head{color:var(--t1-strong) !important} .t1-hero .t1-mini-chip{ background:rgba(255,255,255,.55) !important; border:1px solid var(--t1-line) !important; color:var(--t1-ink) !important; } .t1-check-item,.t1-data-pill,.t1-nearby-pill{background:#f5f0e4 !important} .t1-btn{border-radius:var(--t1-radius-sm)} .t1-chip,.t1-filter-chip,.t1-data-pill,.t1-nearby-pill{border-radius:6px} .t1-category-badge,.t1-verified-badge{border-radius:6px} /* ── Bordes “evidentes” a hairline + sombra tenue en vez de línea dura ── */ .t1-main-card,.t1-info-card,.t1-nearby-card,.t1-top-rated-card,.t1-side-card{ border-color:var(--t1-line) !important; } .t1-nearby-card:hover{box-shadow:var(--t1-shadow)} /* ───────────────────────────────────────────────────────────────────── Leaders Matrix — skin Mariachis Órale Las páginas leaders_hub.html y leaders.html declaran estilos inline específicos después de layout.css. Por eso aquí se fuerza el mismo lenguaje visual cálido que provincia/municipio/home: hero crema, filete tricolor, tipografía oscura y acentos verde/dorado. ───────────────────────────────────────────────────────────────────── */ .t1-hub-hero, .t1-matrix-hero{ background: radial-gradient(circle at 84% 15%,rgba(200,155,60,.16),transparent 34%), linear-gradient(135deg,#fffaf2 0%,#f7ecdc 55%,#fffdf9 100%) !important; color:var(--t1-ink) !important; border-bottom:1px solid var(--t1-line) !important; position:relative !important; overflow:hidden !important; } .t1-hub-hero::before, .t1-matrix-hero::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2; background:linear-gradient(90deg,var(--primary) 0 33.3%,#f3ead9 33.3% 66.6%,#b33a2e 66.6% 100%) !important; } .t1-hub-hero > *, .t1-matrix-hero > *{position:relative;z-index:1} .t1-hub-hero h1, .t1-matrix-hero h1{color:var(--t1-strong) !important;letter-spacing:-.045em !important;font-weight:900 !important} .t1-hub-hero p, .t1-matrix-hero p{color:#4a443c !important} .t1-hub-hero .t1-breadcrumb, .t1-hub-hero .t1-breadcrumb a, .t1-hub-hero .t1-sep, .t1-matrix-hero .t1-breadcrumb, .t1-matrix-hero .t1-breadcrumb a, .t1-matrix-hero .t1-sep{color:var(--t1-muted) !important} .t1-hub-hero .t1-eyebrow, .t1-matrix-hero .t1-eyebrow{color:var(--primary) !important} .t1-hub-hero .t1-eyebrow::before, .t1-matrix-hero .t1-eyebrow::before{background:var(--secondary) !important} .t1-selector-card{ background:rgba(255,255,255,.78) !important; border:1px solid var(--t1-line) !important; border-radius:var(--t1-radius) !important; box-shadow:var(--t1-shadow-sm) !important; } .t1-selector-btn, .t1-btn-primary{ background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; } .t1-selector-btn:hover, .t1-btn-primary:hover{background:var(--primary-dark) !important;border-color:var(--primary-dark) !important;color:#fff !important} .t1-select:focus,.t1-input:focus{border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(15,107,87,.12) !important} .t1-matrix-badge{ background:var(--t1-primary-soft) !important; border:1px solid #d6eadf !important; border-left:4px solid var(--primary) !important; color:var(--primary-dark) !important; border-radius:var(--t1-radius-sm) !important; } .t1-matrix-card{ background:#fff !important; border:1px solid var(--t1-line) !important; border-radius:var(--t1-radius) !important; box-shadow:var(--t1-shadow-sm) !important; } .t1-rank-table{border-color:var(--t1-line) !important;border-radius:var(--t1-radius) !important;overflow:hidden} .t1-rank-table th{background:var(--primary-dark) !important;color:#fff !important} .t1-rank-table tr:hover td{background:var(--t1-primary-soft) !important} .t1-rank-table a{color:var(--primary-dark) !important} .t1-prov-card{border-left-color:var(--t1-primary-soft) !important;border-color:var(--t1-line) !important;background:#fff !important} .t1-prov-card:hover{border-left-color:var(--primary) !important;box-shadow:var(--t1-shadow-sm) !important;transform:translateY(-2px) !important} .t1-prov-arrow{color:var(--primary) !important}