/* ═══════════════════════════════════════════════════════════════════════
   sitio.gt V7.4 — capa de marca (Jade Motagua y Obsidiana; tono elegible)
   Se carga de ÚLTIMO y solo con html body.sitio-brand (Personalizar → ⚡ V7).
   Reglas: fondo gris frío + tarjetas blancas con sombra (profundidad, no papel),
   cabecera de color con buscador blanco, vidrio en la navegación, WhatsApp en
   su verde, jade como marca, rojo solo para descuentos. Cero emojis, cero beige.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────────────── */
html body.sitio-brand {
  --ink: #101828; --head: #101828; --txt: #344054; --muted: #667085; --muted-2: #98A2B3;
  --line: #EAECF0; --bdr: #EAECF0; --bdr-m: #D0D5DD;
  --bg: #F2F4F7; --card: #FFFFFF; --bg-s: #F7F8FA; --bg-e: #EEF1F4;
  --jade: #0B7A5C; --jade-600: #0E8E6B; --jade-700: #075E46; --jade-800: #08624A; --jade-900: #063D30; --jade-950: #04281F;
  --jade-l: #E3F4EE; --jade-50: #F0FAF6; --mint: #A7F0D6; --mint-2: #7FDDBE; --jade-bright: #12A27C; --jade-on-dark: #2BC99A;
  /* V7.4: tripletas para rgba(); el tono elegido (inline en brand.php) las reemplaza */
  --jade-rgb: 11,122,92; --jade-bright-rgb: 18,162,124; --jade-900-rgb: 6,61,48; --jade-950-rgb: 4,40,31;
  --jade-d: var(--jade-700); --jade-xl: var(--jade-900); --jade-bg: var(--jade-l); --jade-glow: rgba(var(--jade-rgb),.22);
  --p: var(--jade); --p-d: var(--jade-700); --p-v: var(--jade-bright); --p-l: var(--jade-l); --lime: var(--jade-bright);
  --wa: #25D366; --wa-600: #1EBE5A; --wa-d: #128C7E; --wa-ink: #0B5D3B; --wa-l: #E8FBEF; --wa-m: #D9FDD3;
  --sale: #E5383B; --orange: #E5383B; --orange-l: #FDECEC; --achiote: #E5383B; --a: #E5383B; --a-l: #FDECEC;
  --maiz: #EAECF0; --maiz-l: #F7F8FA; --gold: #F59E0B; --star: #F5A524;
  --blue: var(--jade); --blue-l: var(--jade-l); --purple: #101828; --purple-l: #F7F8FA;
  --sh-s: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.09);
  --sh-m: 0 6px 16px rgba(16,24,40,.09), 0 2px 4px rgba(16,24,40,.04);
  --sh-l: 0 18px 44px rgba(16,24,40,.16);
  --sh-jade: 0 10px 24px rgba(var(--jade-rgb),.28);
  --sh-wa: 0 6px 14px rgba(37,211,102,.30);
  --r-s: 10px; --r: 12px; --r-m: 14px; --r-l: 16px; --r-xl: 20px;
  --gut: 16px;
  --hdr-bg: linear-gradient(135deg, var(--jade-600) 0%, var(--jade) 55%, var(--jade-800) 100%);
  --hero-bg: radial-gradient(120% 95% at 100% 0%, rgba(var(--jade-bright-rgb),.55) 0%, rgba(var(--jade-bright-rgb),0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(var(--jade-950-rgb),.9) 0%, rgba(var(--jade-950-rgb),0) 60%), linear-gradient(135deg, var(--jade) 0%, var(--jade-800) 45%, var(--jade-900) 100%);
  --fd: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fb: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html body.sitio-brand.sitio-hdr-oscuro { --hdr-bg: linear-gradient(135deg, #1A2925 0%, #0F1A17 100%); }
html body.sitio-brand.sitio-hdr-blanco { --hdr-bg: #FFFFFF; }
html body.sitio-brand .h7 { --h7-x: var(--gut); --h7-gap: 12px; --h7-r: 20px; --h7-r-s: 16px; }
html body.sitio-brand h1, html body.sitio-brand h2, html body.sitio-brand h3, html body.sitio-brand h4 { font-family: var(--fd); letter-spacing: -.02em; }
html body.sitio-brand a { color: var(--jade); }
html body.sitio-brand .sitio-ic { flex: 0 0 auto; }
html body.sitio-brand #sitio-app, html body.sitio-brand .sitio-page, html body.sitio-brand .h7 { background: transparent; }

/* ── 2. LOGO ─────────────────────────────────────────────────────────── */
html body.sitio-brand .sitio-logo { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
html body.sitio-brand .sitio-logo-mark { display: block; flex: 0 0 auto; }
html body.sitio-brand .sitio-logo-txt { font-family: var(--fd); font-weight: 800; font-size: 22px; letter-spacing: -.045em; line-height: 1; }
html body.sitio-brand .sitio-desk-logo { flex-shrink: 0; }
html body.sitio-brand .sitio-desk-logo .sitio-logo-txt { font-size: 24px; }

/* ── 3. CABECERA MÓVIL (color + buscador blanco; al hacer scroll queda solo el buscador) ── */
html body.sitio-brand #sitio-mob-hdr {
  background: var(--hdr-bg); border: 0; padding: 8px var(--gut) 12px; gap: 10px;
  box-shadow: 0 8px 20px rgba(var(--jade-900-rgb),.16);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .24s cubic-bezier(.2,.7,.2,1); will-change: transform;
}
/* El header es fijo (regla heredada); el contenido arranca debajo de sus 114 px.
   Al bajar, la fila del logo se esconde (58 px) y queda solo el buscador. */
@media (max-width: 768px) {
  html body.sitio-gt.sitio-v5.sitio-brand, html body.admin-bar.sitio-gt.sitio-v5.sitio-brand { padding-top: 114px !important; }
  /* V7.6: sube 48 px y no 58: quedan 10 px arriba del buscador (antes quedaba pegado al borde) */
  html body.sitio-brand.sitio-hdr-compact #sitio-mob-hdr { transform: translateY(-48px); }
  html body.sitio-brand.sitio-hdr-compact #sitio-mob-hdr .sitio-mob-hdr-row { opacity: 0; }
  html body.sitio-brand .sitio-mob-hdr-row { transition: opacity .18s ease; }
}
@media (min-width: 769px) {
  html body.sitio-gt.sitio-v5.sitio-brand, html body.admin-bar.sitio-gt.sitio-v5.sitio-brand { padding-top: 70px !important; }
}
html body.sitio-brand .sitio-mob-hdr-row { height: 40px; }
html body.sitio-brand .sitio-mob-logo { display: inline-flex; align-items: center; }
html body.sitio-brand .sitio-mob-hdr-actions { display: flex; gap: 8px; }
html body.sitio-brand .sitio-mob-hdr-btn { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.16); }
html body.sitio-brand .sitio-mob-hdr-btn:active { background: rgba(255,255,255,.24); }
html body.sitio-brand .sitio-mob-hdr-search { height: 44px; padding: 0 14px; gap: 10px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(var(--jade-950-rgb),.18); }
html body.sitio-brand .sitio-mob-hdr-search-ic { color: var(--jade); display: inline-flex; }
html body.sitio-brand .sitio-mob-hdr-search-ph { color: var(--muted); font-family: var(--fb); font-weight: 500; font-size: 14px; }
html body.sitio-brand.sitio-hdr-blanco #sitio-mob-hdr { box-shadow: 0 1px 0 var(--line); }
html body.sitio-brand.sitio-hdr-blanco .sitio-mob-hdr-btn { background: var(--bg); color: var(--head); border-color: var(--line); }
html body.sitio-brand.sitio-hdr-blanco .sitio-mob-hdr-search { background: var(--bg); box-shadow: none; border: 1px solid var(--line); }

/* ── 4. CABECERA ESCRITORIO ─────────────────────────────────────────── */
html body.sitio-brand #sitio-desk-hdr { background: var(--hdr-bg); border: 0; box-shadow: 0 8px 22px rgba(var(--jade-900-rgb),.14); height: 70px; padding: 0 32px; gap: 28px; z-index: 260; }
html body.sitio-brand .sitio-desk-search { flex: 1; max-width: 680px; height: 46px; padding: 0 16px; gap: 10px; background: #fff; border: 0; border-radius: 12px; box-shadow: 0 2px 10px rgba(var(--jade-950-rgb),.18); }
html body.sitio-brand .sitio-desk-search > span { color: var(--jade) !important; }
html body.sitio-brand .sitio-desk-search input { font-family: var(--fb); font-weight: 500; font-size: 14.5px; color: var(--head); cursor: pointer; }
html body.sitio-brand .sitio-desk-search input::placeholder { color: var(--muted); }
html body.sitio-brand .sitio-desk-nav { gap: 8px; }
html body.sitio-brand .sitio-desk-nav a { height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff !important; font-family: var(--fd); font-weight: 700; font-size: 14px; }
html body.sitio-brand .sitio-desk-nav a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff !important; }
html body.sitio-brand .sitio-desk-nav a:last-child { background: #fff; color: var(--jade-700) !important; border-color: #fff; }
html body.sitio-brand .sitio-desk-nav a:last-child:hover { background: var(--jade-50); color: var(--jade-700) !important; }
html body.sitio-brand .sitio-desk-nav .user-av { width: 26px; height: 26px; border-radius: 50%; background: var(--jade); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
html body.sitio-brand.sitio-hdr-blanco #sitio-desk-hdr { box-shadow: 0 1px 0 var(--line); }
html body.sitio-brand.sitio-hdr-blanco .sitio-desk-search { background: var(--bg); box-shadow: none; border: 1px solid var(--line); }
html body.sitio-brand.sitio-hdr-blanco .sitio-desk-nav a { color: var(--head) !important; border-color: var(--line); }
html body.sitio-brand.sitio-hdr-blanco .sitio-desk-nav a:last-child { background: var(--jade); color: #fff !important; border-color: var(--jade); }

/* ── 5. BARRA INFERIOR MÓVIL — vidrio + botón central ─────────────── */
html body.sitio-brand #sitio-nav { background: rgba(255,255,255,.80); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-top: 1px solid rgba(16,24,40,.06); box-shadow: 0 -8px 28px rgba(16,24,40,.07); }
html body.sitio-brand #sitio-nav .sitio-nav-it, html body.sitio-brand #sitio-nav .sitio-nav-ctr { color: var(--muted); }
html body.sitio-brand #sitio-nav .sitio-nav-lbl { font-family: var(--fd); font-weight: 700; font-size: 10.5px; letter-spacing: 0; }
html body.sitio-brand #sitio-nav .sitio-nav-it.active { color: var(--jade); }
html body.sitio-brand #sitio-nav .sitio-nav-it.active .sitio-nav-pill { background: var(--jade-l) !important; border-radius: 999px; padding: 4px 16px; }
html body.sitio-brand #sitio-nav .sitio-nav-fab { width: 54px; height: 54px; margin-top: -24px; padding: 0; border-radius: 50%; background: linear-gradient(145deg, var(--jade-bright) 0%, var(--jade) 55%, var(--jade-700) 100%); color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 10px 22px rgba(var(--jade-rgb),.36); }
html body.sitio-brand #sitio-nav .sitio-nav-fab svg { width: 24px; height: 24px; }
html body.sitio-brand #sitio-nav .sitio-nav-ctr.active .sitio-nav-fab-lbl { color: var(--jade); }
html body.sitio-brand #sitio-nav .sitio-nav-bdg { background: var(--sale); box-shadow: 0 0 0 2px #fff; }

/* ── 6. DOCK DE ESCRITORIO — vidrio ─────────────────────────────────── */
html body.sitio-brand #sitio-desk-dock { background: rgba(255,255,255,.70); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 14px 44px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.7); border-radius: 999px; padding: 6px; }
html body.sitio-brand #sitio-desk-dock .sdk-it { color: var(--txt); font-family: var(--fd); font-weight: 700; font-size: 13.5px; padding: 10px 16px; border-radius: 999px; }
html body.sitio-brand #sitio-desk-dock .sdk-it:hover { background: rgba(16,24,40,.05); color: var(--head); }
html body.sitio-brand #sitio-desk-dock .sdk-it.active { background: var(--jade); color: #fff; box-shadow: var(--sh-jade); }
html body.sitio-brand #sitio-desk-dock .sdk-bdg { background: var(--sale); }

/* ── 7. BOTONES ──────────────────────────────────────────────────────── */
html body.sitio-brand .btn-wa { background: var(--wa); color: #fff !important; border: 0; border-radius: 12px; font-family: var(--fd); font-weight: 800; letter-spacing: -.005em; box-shadow: var(--sh-wa); text-shadow: 0 1px 0 rgba(0,0,0,.10); }
html body.sitio-brand .btn-wa::after { display: none; }
html body.sitio-brand .btn-wa:hover { background: var(--wa-600); transform: none; box-shadow: 0 8px 18px rgba(37,211,102,.36); color: #fff !important; }
html body.sitio-brand .btn-wa:active { transform: scale(.98); }
html body.sitio-brand .btn-wa .sitio-ic { color: #fff; }
html body.sitio-brand .btn-consult { background: #fff; color: var(--wa-ink) !important; border: 1.5px solid var(--wa); border-radius: 12px; font-family: var(--fd); font-weight: 700; }
html body.sitio-brand .btn-consult .sitio-ic { color: var(--wa-600); }
html body.sitio-brand .btn-consult:hover { background: var(--wa-l); color: var(--wa-ink) !important; }
html body.sitio-brand .btn-cart, html body.sitio-brand .gt-card-actions-row .btn-cart { background: var(--bg); color: var(--head); border: 0; border-radius: 12px; font-family: var(--fd); font-weight: 700; }
html body.sitio-brand .btn-cart:hover { background: var(--bg-e); }
html body.sitio-brand .btn-cart.in-cart, html body.sitio-brand .gt-card-actions-row .btn-cart.in-cart { background: var(--jade-l); color: var(--jade); }
html body.sitio-brand .btn-primary { background: var(--jade); color: #fff !important; border: 0; border-radius: 12px; font-family: var(--fd); font-weight: 800; box-shadow: var(--sh-jade); }
html body.sitio-brand .btn-primary:hover { background: var(--jade-700); color: #fff !important; }
html body.sitio-brand .btn-outline { background: #fff; border: 1.5px solid var(--bdr-m); color: var(--head); border-radius: 12px; font-family: var(--fd); font-weight: 700; }
html body.sitio-brand .btn-outline:hover { border-color: var(--head); color: var(--head); background: #fff; }
html body.sitio-brand .btn-checkout, html body.sitio-brand .btn-confirm-order { background: var(--wa); color: #fff !important; box-shadow: var(--sh-wa); border-radius: 14px; }
html body.sitio-brand .btn-checkout:hover, html body.sitio-brand .btn-confirm-order:hover { background: var(--wa-600); }
html body.sitio-brand .sitio-wa-float { background: var(--wa); border: 3px solid #fff; box-shadow: 0 10px 24px rgba(37,211,102,.4); }

/* ── 8. TARJETA DE PRODUCTO ──────────────────────────────────────────── */
html body.sitio-brand .gt-card { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); overflow: hidden; }
html body.sitio-brand .gt-card:hover { transform: translateY(-2px); box-shadow: var(--sh-m); }
html body.sitio-brand .gt-card-img { height: auto; aspect-ratio: 1 / 1; background: var(--bg-s) !important; }
html body.sitio-brand .gt-card-img img { width: 100%; height: 100%; object-fit: cover; }
html body.sitio-brand .gt-card-img .sitio-ic-image { color: var(--muted-2); }
/* V7.36: un servicio sin foto (técnicos y profesionales): su ícono sobre jade claro, no un cuadro gris vacío */
html body.sitio-brand .gt-card-img .gt-card-svc-ic { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(160deg, rgba(var(--jade-rgb),.10), rgba(var(--jade-rgb),.03)); color: var(--jade-xl); }
html body.sitio-brand .gt-card-img .gt-card-svc-ic small { font-family: var(--fd); font-weight: 700; font-size: 12px; letter-spacing: -.005em; color: var(--muted); }
html body.sitio-brand .gt-card-img .gt-badge, html body.sitio-brand .gt-badge-tl { top: 10px; left: 10px; background: var(--sale) !important; color: #fff !important; font-family: var(--fd); font-weight: 800; font-size: 11.5px; letter-spacing: -.01em; padding: 4px 8px; border-radius: 8px; box-shadow: 0 4px 10px rgba(229,56,59,.30); text-shadow: none; }
html body.sitio-brand .gt-stock-low { background: rgba(16,24,40,.70); color: #fff; font-family: var(--fd); font-weight: 700; font-size: 10.5px; padding: 5px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html body.sitio-brand .gt-card-body { padding: 10px 12px 8px; }
html body.sitio-brand .gt-card-store { font-family: var(--fb); font-weight: 600; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
html body.sitio-brand .gt-card-store .sitio-ic-shield { color: var(--jade); }
html body.sitio-brand .gt-card-title { font-family: var(--fb); font-weight: 600; font-size: 13.5px; line-height: 1.32; color: var(--head); min-height: 35px; margin-bottom: 0; }
html body.sitio-brand .gt-card-rating { font-family: var(--fd); font-size: 11.5px; font-weight: 700; color: var(--head); display: flex; align-items: center; gap: 3px; margin: 4px 0 0; }
html body.sitio-brand .gt-card-rating .sitio-ic-star { color: var(--star); }
html body.sitio-brand .gt-card-rating small { color: var(--muted); font-weight: 500; }
html body.sitio-brand .gt-card-price { font-family: var(--fd); font-weight: 800; font-size: 16px; color: var(--head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 6px 0 0; }
html body.sitio-brand .gt-card-price del { font-size: 11.5px; color: var(--muted-2); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
html body.sitio-brand .gt-card-price .sitio-price-ask { color: var(--muted); font-size: 13px; font-weight: 700; }
html body.sitio-brand .gt-card-actions { display: flex; gap: 8px; padding: 4px 12px 12px; }
html body.sitio-brand .gt-card-actions .btn-wa.sm, html body.sitio-brand .gt-card-actions .btn-consult { flex: 1; margin: 0; height: 38px; padding: 0 10px; font-size: 13px; border-radius: 10px; gap: 6px; }
html body.sitio-brand .gt-card-actions .btn-consult { display: inline-flex; align-items: center; justify-content: center; background: var(--wa); color: #fff !important; border: 0; box-shadow: var(--sh-wa); }
html body.sitio-brand .gt-card-actions .btn-consult .sitio-ic { color: #fff; }
html body.sitio-brand .gt-card-actions .btn-cart { flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
html body.sitio-brand .gt-save-btn { width: 32px; height: 32px; top: 10px; right: 10px; background: rgba(255,255,255,.92); box-shadow: 0 2px 8px rgba(16,24,40,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html body.sitio-brand .gt-save-btn svg { stroke: var(--head); }
html body.sitio-brand .gt-save-btn.is-saved svg { fill: var(--sale); stroke: var(--sale); }
html body.sitio-brand .gt-card-mini { border: 0; border-radius: 16px; box-shadow: var(--sh-s); background: #fff; overflow: hidden; }
html body.sitio-brand .gt-card-mini-img { background: var(--bg-s); }
html body.sitio-brand .gt-card-mini-price { color: var(--head); }
html body.sitio-brand .gt-card-mini-img .badge-pct { background: var(--sale); border-radius: 8px; padding: 3px 7px; font-size: 11px; }
html body.sitio-brand .sitio-grid, html body.sitio-brand .h7-grid, html body.sitio-brand .sst-grid { gap: 12px; }
html body.sitio-brand .sitio-svc-badge { background: rgba(255,255,255,.94) !important; color: var(--head) !important; border-radius: 8px; font-family: var(--fd); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 10px; box-shadow: 0 2px 6px rgba(16,24,40,.12); }
html body.sitio-brand .sitio-svc-badge .sitio-ic { display: none; }

/* ── 9. CARRUSELES (inicio y categorías) ────────────────────────────── */
html body.sitio-brand .sitio-carousel-track { gap: 12px; scroll-padding-inline: var(--gut); }
html body.sitio-brand .sitio-carousel-link { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); overflow: hidden; }
html body.sitio-brand .sitio-carousel-img { aspect-ratio: 1 / 1; height: auto; background: var(--bg-s); }
html body.sitio-brand .sitio-carousel-img img { width: 100%; height: 100%; object-fit: cover; }
html body.sitio-brand .sitio-carousel-badge { background: var(--sale) !important; color: #fff !important; border-radius: 8px; font-family: var(--fd); font-weight: 800; font-size: 11px; padding: 4px 7px; box-shadow: 0 4px 10px rgba(229,56,59,.28); }
html body.sitio-brand .sitio-carousel-info { padding: 10px 12px 12px; }
html body.sitio-brand .sitio-carousel-name { font-family: var(--fb); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--head); }
html body.sitio-brand .sitio-carousel-vendor { font-family: var(--fb); font-weight: 600; font-size: 11px; color: var(--muted); }
html body.sitio-brand .sitio-carousel-price { font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--head); letter-spacing: -.02em; }
html body.sitio-brand .sitio-carousel-price-old { font-size: 11px; color: var(--muted-2); }

/* ── 10. TÍTULOS DE SECCIÓN ─────────────────────────────────────────── */
html body.sitio-brand .h7-title, html body.sitio-brand .sitio-carousel-title, html body.sitio-brand .sitio-sec-title, html body.sitio-brand .sst-section-h { font-family: var(--fd); font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -.025em; color: var(--head); }
html body.sitio-brand .h7-kicker, html body.sitio-brand .sitio-sec-sub, html body.sitio-brand .sst-section-sub { font-family: var(--fb); font-weight: 500; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
html body.sitio-brand .h7-more, html body.sitio-brand .sitio-sec-link, html body.sitio-brand .sitio-carousel-cta { background: transparent; color: var(--jade); font-family: var(--fd); font-weight: 800; font-size: 13px; padding: 0; border: 0; box-shadow: none; white-space: nowrap; }
html body.sitio-brand .h7-more:hover, html body.sitio-brand .sitio-carousel-cta:hover { background: transparent; color: var(--jade-700); }

/* ── 11. INICIO V7.1 (h7-*) ──────────────────────────────────────────── */
html body.sitio-brand .h7-sec { margin-top: 22px; }
/* marcas (stories) */
html body.sitio-brand .h7-brands { background: transparent; border: 0; }
html body.sitio-brand .h7-brands-row { padding: 14px var(--gut) 4px; gap: 14px; }
html body.sitio-brand .h7-brand { width: 66px; }
html body.sitio-brand .h7-brand-av { width: 62px; height: 62px; background: #fff !important; color: var(--jade-700); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--line), 0 4px 10px rgba(16,24,40,.08); }
html body.sitio-brand .h7-brand-av.is-ver { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--jade-bright), 0 4px 10px rgba(16,24,40,.08); }
html body.sitio-brand .h7-brand-av .sitio-av-ini, html body.sitio-brand .h7-brand-av > span { color: var(--jade-700); }
html body.sitio-brand .h7-brand-av-flash { background: linear-gradient(140deg, #FF6B6B 0%, #E5383B 55%, #C8213A 100%) !important; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #E5383B, 0 8px 18px rgba(229,56,59,.32); }
html body.sitio-brand .h7-brand-av-flash > span { color: #fff; }
html body.sitio-brand .h7-brand-av-flash::before, html body.sitio-brand .h7-brand-av-flash::after { display: none; }
html body.sitio-brand .h7-brand-lbl { font-family: var(--fd); font-weight: 700; font-size: 11px; color: var(--txt); }
/* V7.5 — Historias tipo Instagram: anillo jade (sin ver), gris (ya vistas en 24 h), destello y giro al abrir */
html body.sitio-brand .h7-brands-row { padding-top: 16px; }
html body.sitio-brand .h7-brand { position: relative; -webkit-tap-highlight-color: transparent; }
html body.sitio-brand .h7-brand:not(.h7-brand-flash) .h7-brand-av,
html body.sitio-brand .h7-brand:not(.h7-brand-flash) .h7-brand-av.is-ver { box-shadow: 0 3px 10px rgba(16,24,40,.10); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
html body.sitio-brand .h7-brand:not(.h7-brand-flash)::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 72px; height: 72px; margin-left: -36px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 210deg, var(--jade-on-dark), var(--jade-bright) 38%, var(--jade) 60%, var(--jade-bright) 80%, var(--jade-on-dark));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.4px));
}
html body.sitio-brand .h7-brand.is-seen::before {
  background: var(--bdr-m);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.4px));
}
html body.sitio-brand .h7-brand.is-seen .h7-brand-lbl { color: var(--muted); font-weight: 600; }
html body.sitio-brand .h7-brand.is-ver::after {
  content: ""; position: absolute; top: 44px; left: 50%; margin-left: 13px; width: 18px; height: 18px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: var(--jade-bright) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 0 0 2px var(--bg, #F2F4F7);
}
@keyframes h7-ring-spin { to { transform: rotate(360deg); } }
html body.sitio-brand .h7-brand.is-spot::before { animation: h7-ring-spin 1.3s cubic-bezier(.45,0,.2,1); }
html body.sitio-brand .h7-brand.is-spot .h7-brand-av { transform: scale(1.045); }
html body.sitio-brand .h7-brand.is-opening::before { animation: h7-ring-spin .75s linear infinite; }
html body.sitio-brand .h7-brand.is-opening .h7-brand-av { transform: scale(.93); }
html body.sitio-brand .h7-brand:active .h7-brand-av { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  html body.sitio-brand .h7-brand.is-spot::before, html body.sitio-brand .h7-brand.is-opening::before { animation: none; }
  html body.sitio-brand .h7-brand.is-spot .h7-brand-av { transform: none; }
}
/* hero */
html body.sitio-brand .h7-top { padding: 12px var(--gut) 0; gap: 12px; }
html body.sitio-brand .h7-hero { border-radius: 20px; background: var(--jade-900); box-shadow: 0 14px 34px rgba(var(--jade-900-rgb),.24); }
html body.sitio-brand .h7-slide { min-height: 216px; overflow: hidden; align-items: flex-end; }
html body.sitio-brand .h7-slide:not(.has-img) { background: var(--hero-bg) !important; }
html body.sitio-brand .h7-slide:not(.has-img)::after { display: none; }
html body.sitio-brand .h7-slide.has-img::before { background: linear-gradient(90deg, rgba(4,26,20,.84) 0%, rgba(4,26,20,.48) 55%, rgba(4,26,20,.06) 100%), linear-gradient(0deg, rgba(4,26,20,.62) 0%, rgba(4,26,20,0) 60%); }
html body.sitio-brand .h7-slide-em { display: none !important; }
html body.sitio-brand .h7-slide-mark { position: absolute; right: -86px; top: -64px; opacity: .09; pointer-events: none; z-index: 0; }
html body.sitio-brand .h7-slide-mark svg { width: 300px; height: 300px; display: block; }
html body.sitio-brand .h7-collage { position: absolute; inset: 0 0 0 auto; width: 46%; pointer-events: none; z-index: 1; }
html body.sitio-brand .h7-col { position: absolute; display: block; width: 92px; height: 92px; border-radius: 18px; overflow: hidden; background: #fff; border: 3px solid #fff; box-shadow: 0 16px 30px rgba(0,0,0,.30); }
html body.sitio-brand .h7-col img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body.sitio-brand .h7-col-1 { right: 70px; top: 18px; transform: rotate(-8deg); }
html body.sitio-brand .h7-col-2 { right: 12px; top: 56px; width: 100px; height: 100px; transform: rotate(7deg); z-index: 2; }
html body.sitio-brand .h7-col-3 { right: 86px; top: 116px; width: 78px; height: 78px; transform: rotate(5deg); z-index: 1; }
html body.sitio-brand .h7-slide-inner { position: relative; z-index: 3; padding: 20px 18px 32px; }
html body.sitio-brand .h7-slide.has-collage .h7-slide-inner { max-width: 60%; }
html body.sitio-brand .h7-tag { display: inline-block; background: none; border: 0; padding: 0; margin: 0 0 8px; color: var(--mint); font-family: var(--fd); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
html body.sitio-brand .h7-h1 { font-family: var(--fd); font-weight: 800; font-size: 23px; line-height: 1.08; letter-spacing: -.03em; color: #fff; margin: 0 0 6px; text-shadow: none; text-wrap: balance; }
html body.sitio-brand .h7-sub { color: rgba(255,255,255,.84); font-family: var(--fb); font-weight: 500; font-size: 13px; line-height: 1.45; margin: 0 0 14px; }
html body.sitio-brand .h7-cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
html body.sitio-brand .h7-btn { height: 40px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--fd); font-weight: 800; font-size: 13.5px; box-shadow: none; text-decoration: none; }
html body.sitio-brand .h7-btn-primary { background: var(--jade); color: #fff !important; }
html body.sitio-brand .h7-slide .h7-btn-primary { background: #fff; color: var(--jade-700) !important; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
html body.sitio-brand .h7-btn-ghost { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.38); color: #fff !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html body.sitio-brand .h7-btn-light { background: #fff; color: var(--jade-700) !important; }
html body.sitio-brand .h7-btn-wa { background: var(--wa); color: #fff !important; box-shadow: var(--sh-wa); }
html body.sitio-brand .h7-hero-nav { left: 18px; bottom: 13px; }
html body.sitio-brand .h7-hero-dot { background: rgba(255,255,255,.32); }
html body.sitio-brand .h7-hero-dot i { background: #fff; }
/* tarjetas junto al hero */
html body.sitio-brand .h7-side { gap: 12px; }
html body.sitio-brand .h7-side-card { border: 0; border-radius: 16px; box-shadow: var(--sh-s); min-height: 124px; padding: 14px; }
html body.sitio-brand .h7-side-card:hover { transform: translateY(-2px); box-shadow: var(--sh-m); }
html body.sitio-brand .h7-side-sell { background: #fff; color: var(--head); }
html body.sitio-brand .h7-side-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--jade-l); color: var(--jade); display: inline-flex; align-items: center; justify-content: center; font-size: 0; }
html body.sitio-brand .h7-side-site { background: radial-gradient(100% 90% at 100% 0%, rgba(var(--jade-bright-rgb),.55), rgba(var(--jade-bright-rgb),0) 60%), linear-gradient(135deg, var(--jade), var(--jade-900)) !important; color: #fff; }
html body.sitio-brand .h7-side-site .h7-side-ico { background: rgba(255,255,255,.14); color: var(--mint); }
html body.sitio-brand .h7-side-txt strong { font-family: var(--fd); font-weight: 800; font-size: 14px; line-height: 1.2; letter-spacing: -.015em; }
html body.sitio-brand .h7-side-txt span { font-family: var(--fb); font-weight: 500; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
html body.sitio-brand .h7-side-site .h7-side-txt span { color: rgba(255,255,255,.82); }
html body.sitio-brand .h7-side-site .h7-side-txt strong { color: #fff; }
html body.sitio-brand .h7-side-arrow { color: var(--jade); }
html body.sitio-brand .h7-side-site .h7-side-arrow { color: var(--mint); }
/* confianza */
html body.sitio-brand .h7-trust { padding: 14px var(--gut) 2px; gap: 8px; }
html body.sitio-brand .h7-pill, html body.sitio-brand .h7-trust-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 0; border-radius: 999px; box-shadow: var(--sh-s); padding: 7px 12px; font-family: var(--fb); font-weight: 600; font-size: 12px; color: var(--txt); white-space: nowrap; }
html body.sitio-brand .h7-trust-pill .sitio-ic { color: var(--jade); }
html body.sitio-brand .h7-trust-pill .sitio-ic-whatsapp { color: var(--wa-600); }
/* categorías */
html body.sitio-brand .h7-cats { gap: 10px; }
html body.sitio-brand .h7-cat { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); padding: 12px 8px 11px; gap: 8px; }
html body.sitio-brand .h7-cat:hover { transform: translateY(-2px); box-shadow: var(--sh-m); }
html body.sitio-brand .h7-cat-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--jade-l) !important; color: var(--jade); font-size: 0; }
html body.sitio-brand .h7-cat-ico .sitio-ic { color: var(--jade); }
html body.sitio-brand .h7-cat-name { font-family: var(--fd); font-weight: 700; font-size: 11.5px; line-height: 1.25; color: var(--head); white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 29px; }
html body.sitio-brand .h7-cat-n { font-family: var(--fb); font-weight: 600; font-size: 10.5px; color: var(--muted); }
/* flash sale */
html body.sitio-brand .h7-flash { margin: 22px var(--gut) 0; padding: 0 0 14px; background: #fff !important; border: 0; border-radius: 20px; box-shadow: var(--sh-s); color: var(--head); overflow: hidden; }
html body.sitio-brand .h7-flash::before, html body.sitio-brand .h7-flash::after { display: none; }
html body.sitio-brand .h7-flash-head { padding: 14px 14px 12px; margin-bottom: 2px; background: linear-gradient(90deg, #FFF1F1 0%, rgba(255,255,255,0) 100%); }
html body.sitio-brand .h7-flash-bolt { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: linear-gradient(140deg, #FF6B6B, #E5383B); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(229,56,59,.32); animation: none; font-size: 0; }
html body.sitio-brand .h7-flash-ttl strong { font-family: var(--fd); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--head); }
html body.sitio-brand .h7-flash-ttl small { font-family: var(--fb); font-weight: 500; font-size: 11.5px; color: var(--muted); opacity: 1; }
html body.sitio-brand .h7-flash .sitio-cd { background: var(--sale); color: #fff; border-radius: 8px; width: 30px; height: 30px; font-family: var(--fd); font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
html body.sitio-brand .h7-flash .sitio-cd-sep { color: var(--sale); }
html body.sitio-brand .h7-flash-row { padding: 2px 14px 4px; gap: 10px; scroll-padding-inline: 14px; }
html body.sitio-brand .h7-fcard { padding: 0; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; overflow: hidden; color: var(--head); }
html body.sitio-brand .h7-fcard:hover { box-shadow: var(--sh-m); }
html body.sitio-brand .h7-fimg { border-radius: 0; background: var(--bg-s); }
html body.sitio-brand .h7-fbadge { top: 8px; left: 8px; background: var(--sale); color: #fff; border-radius: 8px; padding: 4px 7px; font-family: var(--fd); font-weight: 800; font-size: 11px; box-shadow: 0 4px 10px rgba(229,56,59,.28); text-shadow: none; }
html body.sitio-brand .h7-fph { color: var(--muted-2); display: flex; align-items: center; justify-content: center; height: 100%; }
html body.sitio-brand .h7-fname { padding: 9px 10px 0; font-family: var(--fb); font-weight: 600; font-size: 12.5px; line-height: 1.3; color: var(--head); }
html body.sitio-brand .h7-fstore { padding: 3px 10px 0; font-family: var(--fb); font-weight: 600; font-size: 11px; color: var(--muted); }
html body.sitio-brand .h7-fprice { padding: 5px 10px 11px; font-family: var(--fd); font-weight: 800; font-size: 15px; letter-spacing: -.02em; color: var(--sale); }
html body.sitio-brand .h7-fprice del { color: var(--muted-2); font-size: 11px; font-weight: 600; margin-left: 4px; }
/* rail de tarjetas */
html body.sitio-brand .h7-rail { gap: 12px; }
/* banda "Tu marca" */
html body.sitio-brand .h7-site { margin: 24px var(--gut) 0; border-radius: 20px; background: radial-gradient(90% 70% at 100% 0%, rgba(var(--jade-bright-rgb),.45), rgba(var(--jade-bright-rgb),0) 60%), linear-gradient(140deg, var(--jade) 0%, var(--jade-900) 62%, var(--jade-950) 100%) !important; box-shadow: 0 16px 38px rgba(var(--jade-900-rgb),.26); position: relative; overflow: hidden; color: #fff; }
html body.sitio-brand .h7-site::before { content: ""; display: block; position: absolute; right: -110px; bottom: -120px; width: 360px; height: 360px; opacity: .08; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M47.31 77.4C46.55 75.43 46.12 73.41 45.92 71.43C45.72 69.45 45.76 67.51 45.95 65.64C46.13 63.76 46.46 61.94 46.88 60.17C47.29 58.41 47.79 56.69 48.32 55.01C48.86 53.32 49.43 51.66 50 50C50.57 48.34 51.14 46.68 51.67 45.01C52.2 43.34 52.69 41.65 53.09 39.93C53.49 38.22 53.8 36.48 53.97 34.7C54.13 32.92 54.15 31.1 53.95 29.26C53.74 27.41 53.32 25.53 52.58 23.67' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M53.21 25.52C52.36 22.57 50.76 19.53 48.22 17.18C45.67 14.83 42.12 13.25 38.4 13.29C34.68 13.33 30.94 15.07 28.51 17.9C26.09 20.73 25.01 24.46 25.06 27.83C25.12 31.21 26.29 34.31 28.04 36.87C29.79 39.43 32.08 41.47 34.52 43.12C36.96 44.77 39.55 46.03 42.16 47.11C44.76 48.2 47.38 49.1 50 50C52.62 50.9 55.24 51.8 57.85 52.89C60.46 53.97 63.07 55.24 65.56 56.92C68.05 58.59 70.44 60.68 72.33 63.36C74.23 66.03 75.63 69.34 75.83 72.96C76.02 76.57 74.91 80.49 72.38 83.44C69.86 86.38 65.96 88.2 62.09 88.24C58.21 88.28 54.51 86.64 51.86 84.19C49.2 81.74 47.54 78.58 46.66 75.43' fill='none' stroke='%23fff' stroke-width='10.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
html body.sitio-brand .h7-site-kicker { background: none; border: 0; padding: 0; color: var(--mint); font-family: var(--fd); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; }
html body.sitio-brand .h7-site-title { font-family: var(--fd); font-weight: 800; font-size: 26px; line-height: 1.08; letter-spacing: -.03em; color: #fff; }
html body.sitio-brand .h7-site-sub { color: rgba(255,255,255,.84); }
html body.sitio-brand .h7-site-feats li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.92); font-family: var(--fb); font-weight: 600; font-size: 13px; }
html body.sitio-brand .h7-site-feats .sitio-ic { color: var(--mint); }
html body.sitio-brand .h7-site-feats strong { color: var(--mint); }
html body.sitio-brand .h7-site-price { color: var(--mint); }
html body.sitio-brand .h7-site-form { background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.20); padding: 18px; color: var(--head); position: relative; z-index: 1; }
html body.sitio-brand .h7-site-lbl { font-family: var(--fd); font-weight: 800; color: var(--head); }
html body.sitio-brand .h7-site-input { border: 1.5px solid var(--bdr-m); border-radius: 12px; background: #fff; }
html body.sitio-brand .h7-site-input:focus-within { border-color: var(--jade); box-shadow: 0 0 0 4px rgba(var(--jade-rgb),.12); }
html body.sitio-brand .h7-site-dom { background: var(--jade-l); color: var(--jade-700); font-weight: 800; }
html body.sitio-brand .h7-site-extra input { border: 1.5px solid var(--bdr-m); border-radius: 12px; background: #fff; }
html body.sitio-brand .h7-site-extra input:focus { border-color: var(--jade); box-shadow: 0 0 0 4px rgba(var(--jade-rgb),.12); }
html body.sitio-brand .h7-site-btn { height: 46px; border-radius: 12px; font-size: 14px; }
html body.sitio-brand .h7-site-btn:disabled { background: var(--bdr-m); color: #fff !important; opacity: 1; box-shadow: none; cursor: progress; }
html body.sitio-brand .h7-site-status.is-ok { color: var(--jade); }
html body.sitio-brand .h7-site-status.is-bad { color: var(--sale); }
/* tiendas */
html body.sitio-brand .h7-stores { gap: 12px; }
html body.sitio-brand .h7-store { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); overflow: hidden; }
html body.sitio-brand .h7-store:hover { transform: translateY(-2px); box-shadow: var(--sh-m); }
html body.sitio-brand .h7-store-cover { height: 74px; }
html body.sitio-brand .h7-store-cover:not(.has-img) { background: radial-gradient(90% 120% at 100% 0%, rgba(var(--jade-bright-rgb),.55), rgba(var(--jade-bright-rgb),0) 60%), linear-gradient(135deg, var(--jade), var(--jade-900)) !important; }
html body.sitio-brand .h7-store-cover.has-img { background-size: cover; background-position: center; }
html body.sitio-brand .h7-store-logo { width: 56px; height: 56px; border-radius: 16px; margin: -28px 0 0 12px; background: #fff !important; color: var(--jade-700); border: 0; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(16,24,40,.14); }
html body.sitio-brand .h7-store-body { padding: 8px 12px 12px; }
html body.sitio-brand .h7-store-name { font-family: var(--fd); font-weight: 800; font-size: 14px; color: var(--head); }
html body.sitio-brand .h7-ver { color: var(--jade); display: inline-flex; vertical-align: -2px; font-style: normal; background: none; width: auto; height: auto; }
html body.sitio-brand .h7-store-meta { font-family: var(--fb); font-weight: 600; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
html body.sitio-brand .h7-store-tier { background: var(--bg) !important; color: var(--txt) !important; border: 0; border-radius: 8px; padding: 3px 8px; font-family: var(--fd); font-weight: 700; font-size: 10.5px; }
html body.sitio-brand .h7-store-tier.is-oro { background: #FFF6E0 !important; color: #8A5A00 !important; }
/* catálogo */
html body.sitio-brand .h7-modebar, html body.sitio-brand .sitio-mode-bar { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); }
html body.sitio-brand .sitio-mode-switch { background: var(--bg); border-radius: 12px; padding: 4px; }
html body.sitio-brand .sitio-mode-btn { border-radius: 10px; font-family: var(--fd); font-weight: 800; font-size: 13px; color: var(--muted); }
html body.sitio-brand .sitio-mode-btn.active { background: #fff; color: var(--head); box-shadow: var(--sh-s); }
html body.sitio-brand .sitio-cat-chip, html body.sitio-brand .sitio-sort-btn, html body.sitio-brand .sitio-sort-chip, html body.sitio-brand .sitio-fchip, html body.sitio-brand .sitio-filter-btn, html body.sitio-brand .sitio-dir-chips .chip, html body.sitio-brand .st-chip { background: var(--bg); border: 0 !important; color: var(--txt); border-radius: 999px; font-family: var(--fb); font-weight: 700; font-size: 12.5px; padding: 8px 14px; box-shadow: none; }
html body.sitio-brand .sitio-cat-chip.active, html body.sitio-brand .sitio-sort-btn.active, html body.sitio-brand .sitio-sort-chip.active, html body.sitio-brand .sitio-fchip.active, html body.sitio-brand .sitio-dir-chips .chip.active, html body.sitio-brand .st-chip.active { background: var(--jade) !important; color: #fff !important; box-shadow: var(--sh-jade); }
html body.sitio-brand .sitio-dir-chips .chip-gold.active, html body.sitio-brand .sitio-dir-chips .chip-silver.active { background: var(--jade) !important; color: #fff !important; }
html body.sitio-brand .sitio-filter-cnt { background: var(--jade); color: #fff; }
/* CTA final */
html body.sitio-brand .h7-cta { margin: 28px var(--gut) 0; border-radius: 20px; background: radial-gradient(90% 80% at 0% 0%, rgba(var(--jade-bright-rgb),.5), rgba(var(--jade-bright-rgb),0) 60%), linear-gradient(140deg, var(--jade) 0%, var(--jade-900) 70%) !important; box-shadow: 0 16px 38px rgba(var(--jade-900-rgb),.24); overflow: hidden; position: relative; }
html body.sitio-brand .h7-cta::before, html body.sitio-brand .h7-cta::after { display: none; }
html body.sitio-brand .h7-cta h2 { color: #fff; font-family: var(--fd); font-weight: 800; letter-spacing: -.03em; }
html body.sitio-brand .h7-cta p { color: rgba(255,255,255,.84); }
html body.sitio-brand .h7-cta-ico { font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
html body.sitio-brand .h7-cta .h7-btn-ghost { background: rgba(255,255,255,.10); }
html body.sitio-brand .h7-empty { background: #fff; border-radius: 16px; box-shadow: var(--sh-s); }
html body.sitio-brand .h7-empty > span:first-child { font-size: 0; display: inline-flex; color: var(--muted-2); }
html body.sitio-brand .sitio-rv-row .gt-card-mini { flex: 0 0 132px; }

/* ── 12. INICIO V7.0 (respaldo si "Home V7.1" está apagado) ─────────── */
html body.sitio-brand .sitio-hero-slide { border-radius: 20px; background: var(--hero-bg) !important; }
html body.sitio-brand .sitio-hero-em { display: none !important; }
html body.sitio-brand .sitio-flash-hdr { background: linear-gradient(90deg, #FFF1F1, #fff); color: var(--head); }
html body.sitio-brand .sitio-cd { background: var(--sale); color: #fff; }

/* ── 13. FICHA DE PRODUCTO (sp-*) ───────────────────────────────────── */
html body.sitio-brand .sp-vendor-bar { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); margin: 12px var(--gut) 12px; padding: 12px 14px; color: var(--head); }
html body.sitio-brand .sp-vendor-bar:hover { background: #fff; box-shadow: var(--sh-m); }
html body.sitio-brand .sp-vendor-logo { border-radius: 12px; overflow: hidden; }
html body.sitio-brand .sp-vendor-name { font-family: var(--fd); font-weight: 800; color: var(--head); }
html body.sitio-brand .sp-vendor-cta { background: var(--jade-l); color: var(--jade-700); border-radius: 999px; font-family: var(--fd); font-weight: 800; }
html body.sitio-brand .sp-badge-verified, html body.sitio-brand .badge-verified-mini, html body.sitio-brand .st-name-ver, html body.sitio-brand .st-badge-ver { background: var(--jade); color: #fff; }
/* V7.3: sello de verificada redondo (antes un cuadrito) y glifo blanco en los botones verdes de WhatsApp (la regla general de enlaces los pintaba jade) */
html body.sitio-brand .st-name-ver, html body.sitio-brand .badge-verified-mini { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; font-size: 9px; line-height: 1; font-weight: 800; vertical-align: 2px; margin-left: 3px; }
html body.sitio-brand a.st-foot-wa, html body.sitio-brand a.sitio-order-btn-wa, html body.sitio-brand a.sd-card-btn-wa, html body.sitio-brand a.sitio-svc-cta-wa, html body.sitio-brand a.sitio-wa-float, html body.sitio-brand a.sst-btn-wa { color: #fff; }
html body.sitio-brand .st-foot-wa { box-shadow: var(--sh-wa); }
/* En móvil la barra fija del producto ya trae WhatsApp: el botón flotante quedaba escondido detrás */
@media (max-width: 768px) { html body.sitio-brand .sitio-wa-float { display: none; } }
html body.sitio-brand .st-foot-wa svg { width: 18px; height: 18px; }
html body.sitio-brand .sp-gallery { background: #fff; border-radius: 20px; box-shadow: var(--sh-s); overflow: hidden; }
html body.sitio-brand .sp-gallery-main { background: #fff; }
html body.sitio-brand .sp-back, html body.sitio-brand .sp-save, html body.sitio-brand .sp-img-zoom, html body.sitio-brand .sp-img-prev, html body.sitio-brand .sp-img-next { background: rgba(255,255,255,.92); color: var(--head); box-shadow: 0 2px 10px rgba(16,24,40,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: inline-flex; align-items: center; justify-content: center; }
html body.sitio-brand .sp-discount-badge { background: var(--sale); border-radius: 8px; font-family: var(--fd); font-weight: 800; font-size: 13px; padding: 5px 9px; box-shadow: 0 4px 10px rgba(229,56,59,.3); }
html body.sitio-brand .sp-thumbs { background: #fff; padding: 10px 12px 12px; }
html body.sitio-brand .sp-thumb { border-radius: 10px; border: 2px solid var(--line); }
html body.sitio-brand .sp-thumb.active { border-color: var(--jade); }
html body.sitio-brand .sp-title { font-family: var(--fd); font-weight: 800; letter-spacing: -.025em; color: var(--head); }
html body.sitio-brand .sp-price-main { color: var(--head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html body.sitio-brand .sp-price-old { color: var(--muted-2); }
html body.sitio-brand .sp-in-stock { color: var(--jade); }
html body.sitio-brand .sp-low-stock { color: var(--sale); }
html body.sitio-brand .sp-sale-banner { background: #FFF1F1; color: var(--head); border: 0; border-radius: 14px; }
html body.sitio-brand .sp-sale-banner strong { color: var(--sale); }
html body.sitio-brand .sp-sale-icon { font-size: 0; display: inline-flex; color: var(--sale); }
html body.sitio-brand .sp-tabs { border-bottom: 1px solid var(--line); }
html body.sitio-brand .sp-tab { font-family: var(--fd); font-weight: 800; font-size: 13.5px; color: var(--muted); }
html body.sitio-brand .sp-tab.active { color: var(--head); border-bottom-color: var(--jade); }
html body.sitio-brand .sp-qty-control { background: var(--bg); border: 0; border-radius: 12px; }
html body.sitio-brand .sp-cta-main { border-radius: 14px; font-size: 15px; min-height: 52px; }
html body.sitio-brand .sp-vendor-card { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); }
html body.sitio-brand .sp-no-img { font-size: 0; color: var(--muted-2); display: flex; align-items: center; justify-content: center; }
html body.sitio-brand .sitio-sticky-cta { background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(16,24,40,.06); box-shadow: 0 -8px 28px rgba(16,24,40,.08); }
html body.sitio-brand .sitio-sticky-cta .btn-consult { border-radius: 14px; }
html body.sitio-brand .sitio-sticky-cta .btn-cart { border-radius: 14px; }

/* ── 14. TIENDA (sst-*) ──────────────────────────────────────────────── */
html body.sitio-brand.sitio-is-store .sst-search-wrap { display: none; }
html body.sitio-brand .sst-hero { min-height: 200px; padding: 16px var(--gut) 22px; background-color: var(--jade-900); }
html body.sitio-brand .sst-hero::before { background: linear-gradient(180deg, rgba(4,26,20,.12) 0%, rgba(4,26,20,.34) 45%, rgba(4,26,20,.84) 100%); }
html body.sitio-brand .sst-back { top: 14px; left: var(--gut); width: 40px; height: 40px; color: #fff !important; background: rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; }
html body.sitio-brand .sst-hero-inner { padding-top: 64px; gap: 14px; align-items: flex-end; }
html body.sitio-brand .sst-logo { width: 84px; height: 84px; border-radius: 22px; background: #fff !important; color: var(--jade-700); box-shadow: 0 0 0 3px #fff, 0 12px 26px rgba(0,0,0,.32); overflow: hidden; }
html body.sitio-brand .sst-name, html body.sitio-brand .sst-hero .sst-name { font-family: var(--fd); font-weight: 800; font-size: 26px; line-height: 1.05; letter-spacing: -.03em; background: none !important; padding: 0 !important; margin: 2px 0 4px !important; text-shadow: 0 2px 14px rgba(0,0,0,.4) !important; }
html body.sitio-brand .sst-badges { gap: 6px; }
html body.sitio-brand .sst-badge { background: rgba(255,255,255,.16) !important; color: #fff !important; border-radius: 8px; padding: 3px 8px; font-family: var(--fd); font-weight: 800; font-size: 10.5px; letter-spacing: .02em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html body.sitio-brand .sst-badge-verified { background: var(--jade) !important; }
html body.sitio-brand .sst-loc { color: rgba(255,255,255,.92); font-family: var(--fb); font-weight: 600; font-size: 13px; }
html body.sitio-brand .sst-quick span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); font-weight: 600; }
html body.sitio-brand .sst-stats { background: #fff; margin: 0; border: 0; box-shadow: var(--sh-s); }
html body.sitio-brand .sst-stat-num { font-family: var(--fd); font-weight: 800; color: var(--head); letter-spacing: -.02em; }
html body.sitio-brand .sst-stat-lbl { font-family: var(--fd); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; color: var(--muted); }
html body.sitio-brand .sst-actions { background: transparent; border: 0; padding: 14px var(--gut) 4px; gap: 10px; }
html body.sitio-brand .sst-btn { height: 46px; border-radius: 12px; background: #fff; border: 0; box-shadow: var(--sh-s); color: var(--head); font-family: var(--fd); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
html body.sitio-brand .sst-btn:hover { transform: none; box-shadow: var(--sh-m); }
html body.sitio-brand .sst-btn-wa { background: var(--wa); color: #fff !important; box-shadow: var(--sh-wa); }
html body.sitio-brand .sst-btn-follow.is-following { background: var(--jade-l); color: var(--jade); }
html body.sitio-brand .sst-tabs { top: 56px; background: #fff; border: 0; box-shadow: 0 1px 0 var(--line), 0 6px 14px rgba(16,24,40,.04); padding: 0 var(--gut); margin-top: 12px; z-index: 20; }
html body.sitio-brand .sst-tab { font-family: var(--fd); font-weight: 800; font-size: 14px; color: var(--muted); }
html body.sitio-brand .sst-tab.is-active { color: var(--head); border-bottom-color: var(--jade); }
html body.sitio-brand .sst-tab-ct { background: var(--bg); color: var(--muted); }
html body.sitio-brand .sst-tab.is-active .sst-tab-ct { background: var(--jade-l); color: var(--jade); }
html body.sitio-brand .sst-section { padding: 22px var(--gut) 6px; }
html body.sitio-brand .sst-section-svc { background: transparent; border: 0; }
html body.sitio-brand .sst-carousel { margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 10px; gap: 12px; scroll-padding-inline: var(--gut); }
html body.sitio-brand .sst-mini-card { flex: 0 0 152px; background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); overflow: hidden; }
html body.sitio-brand .sst-mini-card:hover { transform: translateY(-2px); box-shadow: var(--sh-m); }
html body.sitio-brand .sst-mini-img { background: var(--bg-s); }
html body.sitio-brand .sst-mini-badge { top: 8px; left: 8px; border-radius: 8px; padding: 4px 7px; font-family: var(--fd); font-weight: 800; font-size: 11px; }
html body.sitio-brand .sst-mini-badge-sale { background: var(--sale); color: #fff; box-shadow: 0 4px 10px rgba(229,56,59,.28); }
html body.sitio-brand .sst-mini-badge-new { display: none; }
html body.sitio-brand .sst-mini-body { padding: 10px 12px 12px; }
html body.sitio-brand .sst-mini-name { font-family: var(--fb); font-weight: 600; font-size: 12.5px; line-height: 1.3; color: var(--head); height: 33px; }
html body.sitio-brand .sst-mini-price { font-family: var(--fd); font-weight: 800; font-size: 15px; color: var(--head); letter-spacing: -.02em; }
html body.sitio-brand .sst-about-block, html body.sitio-brand .sst-review-summary, html body.sitio-brand .sst-review-card { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); }
html body.sitio-brand .sst-about-icon { color: var(--jade); display: inline-flex; }
html body.sitio-brand .sst-empty { background: #fff; border-radius: 16px; box-shadow: var(--sh-s); }
html body.sitio-brand .sst-empty-icon { color: var(--muted-2); font-size: 0; }
html body.sitio-brand .sst-more { border-radius: 12px; }

/* ── 15. DIRECTORIO DE TIENDAS (st-*, sitio-dir-*) ──────────────────── */
html body.sitio-brand .sitio-dir-hero, html body.sitio-brand .st-hero { background: var(--hero-bg) !important; border-radius: 20px; color: #fff; }
html body.sitio-brand .st-hero-h, html body.sitio-brand .sitio-dir-hero h1 { color: #fff; }
html body.sitio-brand .st-hero a.st-hero-link { color: #fff; } /* V7.28.2: «N que sigo» se perdía (el color de enlaces le ganaba) */
html body.sitio-brand a.sitio-btn-primary, html body.sitio-brand a.sitio-btn-primary:hover { color: #fff; } /* V7.28.2: «Volver al inicio» de /dejar-resena/, igual */
html body.sitio-brand .sitio-dir-card, html body.sitio-brand .st-card { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); overflow: hidden; }
html body.sitio-brand .sitio-dir-card:hover, html body.sitio-brand .st-card:hover { transform: translateY(-2px); box-shadow: var(--sh-m); }
html body.sitio-brand .sitio-dir-card-banner, html body.sitio-brand .st-banner { background-color: var(--jade-900); }
html body.sitio-brand .st-badge-gold, html body.sitio-brand .st-tier { display: none !important; }
html body.sitio-brand .st-searchbar, html body.sitio-brand .ssv-search { background: #fff; border: 0; border-radius: 12px; box-shadow: var(--sh-s); }

/* ── 16. CARRITO, CHECKOUT, CUENTA, PEDIDOS ─────────────────────────── */
html body.sitio-brand .sitio-cart-header, html body.sitio-brand .sitio-checkout-hero, html body.sitio-brand .sitio-orders-hero, html body.sitio-brand .sitio-review-hero, html body.sitio-brand .sd-hero, html body.sitio-brand .sf-hero, html body.sitio-brand .ssv-hero, html body.sitio-brand .vl-hero { background: var(--hero-bg) !important; border-radius: 20px; color: #fff; }
html body.sitio-brand .vl-hero::before, html body.sitio-brand .vl-final-cta-card::before { display: none; }
html body.sitio-brand .vl-final-cta-card, html body.sitio-brand .vl-calc-card { background: #fff !important; border: 0; border-radius: 20px; box-shadow: var(--sh-s); color: var(--head); }
html body.sitio-brand .sitio-cart-free-progress > div { background: var(--jade); }
html body.sitio-brand .sitio-cart-item, html body.sitio-brand .sitio-cart-vendor, html body.sitio-brand .sitio-order-card, html body.sitio-brand .sitio-menu-item { background: #fff; border-color: var(--line); }
html body.sitio-brand .sitio-menu-icon { background: var(--jade-l); color: var(--jade); border-radius: 12px; }
html body.sitio-brand .sitio-svc-card { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--sh-s); }
html body.sitio-brand .sitio-svc-img { background: var(--bg-s); }
html body.sitio-brand .sitio-svc-type-subscription, html body.sitio-brand .sitio-svc-type-service, html body.sitio-brand .sitio-svc-info-card { background: var(--bg-s) !important; color: var(--head); border: 1px solid var(--line); }
html body.sitio-brand .sk, html body.sitio-brand .skeleton { background: var(--bg-e); }

/* ── 17. MODAL DE WHATSAPP (puente) ─────────────────────────────────── */
html body.sitio-brand .sitio-bridge-ov { background: rgba(16,24,40,.52); }
html body.sitio-brand .sitio-bridge-sheet { background: #fff; border-radius: 24px 24px 0 0; padding-bottom: 0; box-shadow: 0 -10px 40px rgba(16,24,40,.2); }
html body.sitio-brand .sitio-bridge-body { padding: 14px var(--gut) 10px; }
html body.sitio-brand .sitio-bridge-why { background: var(--wa-l); border: 0; border-radius: 14px; padding: 12px 14px; }
html body.sitio-brand .sitio-bridge-why .sitio-ic { color: var(--wa-600); }
html body.sitio-brand .sitio-bridge-why div div:first-child { color: var(--wa-ink) !important; }
html body.sitio-brand .sitio-bridge-vendor { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
html body.sitio-brand .sitio-bridge-ver { color: var(--jade); display: inline-flex; }
html body.sitio-brand .sitio-bridge-resp { color: var(--wa-ink) !important; display: inline-flex; align-items: center; gap: 4px; }
html body.sitio-brand .sitio-bridge-resp .sitio-ic { color: var(--wa-600); }
html body.sitio-brand .sitio-wa-preview { background-color: #EFEAE2; background-image: radial-gradient(rgba(17,27,33,.05) 1px, transparent 1px); background-size: 14px 14px; border-radius: 16px; padding: 12px 14px 14px; }
html body.sitio-brand .sitio-wa-lbl { color: #667781; font-family: var(--fd); font-weight: 800; font-size: 10px; letter-spacing: .08em; }
html body.sitio-brand .sitio-wa-bubble { position: relative; background: #D9FDD3; border-radius: 12px 0 12px 12px; box-shadow: 0 1px .5px rgba(11,20,26,.13); max-width: 88%; padding: 8px 10px 6px; }
html body.sitio-brand .sitio-wa-bubble::after { content: ""; position: absolute; top: 0; right: -8px; width: 0; height: 0; border-left: 8px solid #D9FDD3; border-bottom: 10px solid transparent; }
html body.sitio-brand .sitio-wa-txt { color: #111B21; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13.5px; line-height: 1.45; }
html body.sitio-brand .sitio-wa-tick { color: #667781; font-size: 11px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 2px; }
html body.sitio-brand .sitio-bridge-perks { gap: 8px; margin-bottom: 6px; }
html body.sitio-brand .sitio-bridge-perk { display: flex; align-items: flex-start; gap: 10px; background: var(--bg-s); border: 0; border-radius: 14px; padding: 10px 12px; }
html body.sitio-brand .sitio-bridge-perk-ic { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; background: var(--wa-l); color: var(--wa-600); display: inline-flex; align-items: center; justify-content: center; }
html body.sitio-brand .sitio-bridge-perk-ttl { font-family: var(--fd); font-weight: 800; font-size: 12.5px; line-height: 1.25; color: var(--head); }
html body.sitio-brand .sitio-bridge-perk-sub { font-family: var(--fb); font-weight: 500; font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; }
html body.sitio-brand .sitio-bridge-cta { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2; padding: 12px var(--gut) calc(14px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
html body.sitio-brand .sitio-bridge-cta .btn-wa { width: 100%; min-height: 52px; border-radius: 14px; font-size: 15.5px; gap: 8px; }
html body.sitio-brand .sitio-bridge-foot-txt { text-align: center; font-family: var(--fb); font-weight: 500; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
html body.sitio-brand .sitio-bridge-x { color: var(--head) !important; }

/* ── 18. BUSCADOR EN VIVO, CAJÓN DE FILTROS, TOAST ──────────────────── */
html body.sitio-brand .sitio-ls-panel { border-radius: 20px; box-shadow: var(--sh-l); }
html body.sitio-brand .sitio-ls-search { border-bottom: 1px solid var(--line); }
html body.sitio-brand .sitio-ls-search > span:first-child { font-size: 0; display: inline-flex; color: var(--jade); opacity: 1; }
html body.sitio-brand .sitio-ls-close { border-radius: 10px; background: var(--bg); color: var(--head); }
html body.sitio-brand .sitio-ls-close:hover { background: var(--head); color: #fff; }
html body.sitio-brand .sitio-ls-results { background: var(--bg); }
html body.sitio-brand .sitio-ls-item, html body.sitio-brand .sitio-ls-cat { background: #fff; border: 0; border-radius: 14px; box-shadow: var(--sh-s); }
html body.sitio-brand .sitio-ls-item:hover, html body.sitio-brand .sitio-ls-cat:hover { background: #fff; box-shadow: var(--sh-m); }
html body.sitio-brand .sitio-ls-item img { border-radius: 10px; background: var(--bg-s); }
html body.sitio-brand .sitio-ls-item-price { color: var(--head); font-weight: 800; }
html body.sitio-brand .sitio-ls-store-logo { background: var(--jade-l); color: var(--jade-700); }
html body.sitio-brand .sitio-ls-arrow { color: var(--muted-2); }
html body.sitio-brand .sitio-ls-more { padding: 4px 0 8px; text-align: center; }
html body.sitio-brand .sitio-ls-all { display: inline-flex; align-items: center; justify-content: center; margin: 14px auto 0; padding: 10px 18px; border: 1.5px solid var(--jade); border-radius: 999px; background: #fff; color: var(--jade); font: 700 14px/1 var(--fd, inherit); cursor: pointer; }
html body.sitio-brand .sitio-ls-empty .sitio-ls-all { display: flex; }
html body.sitio-brand .sitio-ls-all:hover { background: var(--jade); color: #fff; }
html body.sitio-brand .sitio-drawer-sheet { border-radius: 24px 24px 0 0; }
html body.sitio-brand .sitio-drawer-ttl, html body.sitio-brand .sitio-f-lbl { color: var(--head); font-family: var(--fd); font-weight: 800; }
html body.sitio-brand #sitio-toast, html body.sitio-brand .sitio-toast { background: var(--head); color: #fff; border-radius: 12px; font-family: var(--fd); font-weight: 700; box-shadow: var(--sh-l); }
html body.sitio-brand .sitio-av-ini { color: var(--jade-700); }
html body.sitio-brand .sitio-onb-card { border-radius: 24px; }
/* Onboarding V7.3: pantalla completa jade profundo, ícono en baldosa blanca, texto blanco legible */
html body.sitio-brand .sitio-onboarding { border-radius: 0; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, var(--jade-600) 0%, var(--jade) 36%, var(--jade-900) 100%); padding: 24px 0 calc(24px + env(safe-area-inset-bottom)); }
html body.sitio-brand .sitio-onboarding::before { content: ""; position: absolute; left: 50%; bottom: -16%; width: 150vw; max-width: 900px; height: 60%; transform: translateX(-50%); opacity: .07; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M47.31 77.4C46.55 75.43 46.12 73.41 45.92 71.43C45.72 69.45 45.76 67.51 45.95 65.64C46.13 63.76 46.46 61.94 46.88 60.17C47.29 58.41 47.79 56.69 48.32 55.01C48.86 53.32 49.43 51.66 50 50C50.57 48.34 51.14 46.68 51.67 45.01C52.2 43.34 52.69 41.65 53.09 39.93C53.49 38.22 53.8 36.48 53.97 34.7C54.13 32.92 54.15 31.1 53.95 29.26C53.74 27.41 53.32 25.53 52.58 23.67' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M53.21 25.52C52.36 22.57 50.76 19.53 48.22 17.18C45.67 14.83 42.12 13.25 38.4 13.29C34.68 13.33 30.94 15.07 28.51 17.9C26.09 20.73 25.01 24.46 25.06 27.83C25.12 31.21 26.29 34.31 28.04 36.87C29.79 39.43 32.08 41.47 34.52 43.12C36.96 44.77 39.55 46.03 42.16 47.11C44.76 48.2 47.38 49.1 50 50C52.62 50.9 55.24 51.8 57.85 52.89C60.46 53.97 63.07 55.24 65.56 56.92C68.05 58.59 70.44 60.68 72.33 63.36C74.23 66.03 75.63 69.34 75.83 72.96C76.02 76.57 74.91 80.49 72.38 83.44C69.86 86.38 65.96 88.2 62.09 88.24C58.21 88.28 54.51 86.64 51.86 84.19C49.2 81.74 47.54 78.58 46.66 75.43' fill='none' stroke='%23fff' stroke-width='10.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
html body.sitio-brand .sitio-ob-slide { position: relative; }
html body.sitio-brand .sitio-ob-icon { width: 92px; height: 92px; margin: 0 auto 28px; border-radius: 28px; background: #fff; color: var(--jade); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 44px rgba(0,0,0,.28), 0 0 0 8px rgba(255,255,255,.08); }
html body.sitio-brand .sitio-ob-slide:nth-of-type(2) .sitio-ob-icon { color: var(--wa); }
html body.sitio-brand .sitio-onboarding .sitio-ob-h { color: #fff; font-size: 27px; line-height: 1.14; letter-spacing: -.03em; margin: 0 auto 12px; max-width: 320px; }
html body.sitio-brand .sitio-ob-p { color: rgba(255,255,255,.84); font-size: 15px; line-height: 1.55; max-width: 300px; }
html body.sitio-brand .sitio-ob-dot { background: rgba(255,255,255,.32); }
html body.sitio-brand .sitio-ob-next { position: relative; height: 54px; padding: 0 36px; border-radius: 16px; color: var(--jade-900); font-size: 16px; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
html body.sitio-brand .sitio-ob-skip { color: rgba(255,255,255,.72); font-size: 14px; font-weight: 700; }
/* Buscador en vivo: recientes, sin la "x" azul del navegador */
html body.sitio-brand #sitio-ls-input::-webkit-search-cancel-button, html body.sitio-brand #sitio-ls-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
html body.sitio-brand .sitio-ls-group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html body.sitio-brand .sitio-ls-clear { border: 0; background: none; padding: 4px 2px; color: var(--jade); font: 700 12px/1 var(--fd, inherit); text-transform: none; letter-spacing: 0; cursor: pointer; }
html body.sitio-brand .sitio-ls-recent { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
html body.sitio-brand .sitio-ls-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 9px 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--sh-s); color: var(--head); font: 600 14px/1.1 var(--fb, inherit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
html body.sitio-brand .sitio-ls-chip::before { content: ""; width: 14px; height: 14px; flex: none; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain; }
html body.sitio-brand .sitio-ls-chip:hover { box-shadow: var(--sh-m); color: var(--jade); }
.sitio-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── 19. TABLETA Y ESCRITORIO ───────────────────────────────────────── */
@media (min-width: 600px) {
  html body.sitio-brand .h7-slide { min-height: 280px; }
  html body.sitio-brand .h7-h1 { font-size: 30px; }
  html body.sitio-brand .h7-col { width: 130px; height: 130px; border-radius: 22px; }
  html body.sitio-brand .h7-col-1 { right: 120px; top: 22px; }
  html body.sitio-brand .h7-col-2 { right: 18px; top: 70px; width: 140px; height: 140px; }
  html body.sitio-brand .h7-col-3 { right: 150px; top: 150px; width: 104px; height: 104px; }
}
@media (min-width: 1024px) {
  html body.sitio-brand { --gut: 24px; }
  html body.sitio-brand .h7 { --h7-x: 0px; }
  html body.sitio-brand .h7-top { padding: 22px 0 0; gap: 16px; }
  html body.sitio-brand .h7-slide { min-height: 430px; }
  html body.sitio-brand .h7-slide-inner { padding: 48px 52px 56px; }
  html body.sitio-brand .h7-slide.has-collage .h7-slide-inner { max-width: 56%; }
  html body.sitio-brand .h7-tag { font-size: 12px; margin-bottom: 12px; }
  html body.sitio-brand .h7-h1 { font-size: 50px; line-height: 1.02; margin-bottom: 12px; }
  html body.sitio-brand .h7-sub { font-size: 17px; margin-bottom: 22px; }
  html body.sitio-brand .h7-btn { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 14px; }
  html body.sitio-brand .h7-hero-nav { left: 52px; bottom: 26px; }
  html body.sitio-brand .h7-collage { width: 48%; }
  html body.sitio-brand .h7-col { width: 188px; height: 188px; border-radius: 28px; border-width: 4px; }
  html body.sitio-brand .h7-col-1 { right: 236px; top: 46px; }
  html body.sitio-brand .h7-col-2 { right: 46px; top: 104px; width: 214px; height: 214px; }
  html body.sitio-brand .h7-col-3 { right: 262px; top: 236px; width: 150px; height: 150px; }
  html body.sitio-brand .h7-slide-mark { right: -40px; top: -80px; }
  html body.sitio-brand .h7-slide-mark svg { width: 520px; height: 520px; }
  html body.sitio-brand .h7-side-card { min-height: 0; padding: 20px; }
  html body.sitio-brand .h7-side-txt strong { font-size: 17px; }
  html body.sitio-brand .h7-side-txt span { font-size: 13px; }
  html body.sitio-brand .h7-trust { padding: 18px 0 0; justify-content: center; }
  html body.sitio-brand .h7-sec { margin-top: 34px; }
  html body.sitio-brand .h7-title, html body.sitio-brand .sitio-carousel-title, html body.sitio-brand .sitio-sec-title, html body.sitio-brand .sst-section-h { font-size: 24px; }
  html body.sitio-brand .h7-flash, html body.sitio-brand .h7-site, html body.sitio-brand .h7-cta { margin-left: 0; margin-right: 0; }
  html body.sitio-brand .h7-flash-head { padding: 18px 20px 14px; }
  html body.sitio-brand .h7-flash-row { padding: 2px 20px 6px; }
  html body.sitio-brand .h7-site-title { font-size: 38px; }
  html body.sitio-brand .gt-card-title { font-size: 14px; }
  html body.sitio-brand .gt-card-price { font-size: 17px; }
  html body.sitio-brand .sp-vendor-bar { margin: 18px auto 18px; }
  html body.sitio-brand .sst-hero { min-height: 280px; padding: 28px 32px 34px; border-radius: 0 0 24px 24px; }
  html body.sitio-brand .sst-back { left: 32px; top: 24px; }
  html body.sitio-brand .sst-name, html body.sitio-brand .sst-hero .sst-name { font-size: 36px; }
  html body.sitio-brand .sst-logo { width: 112px; height: 112px; border-radius: 28px; }
  html body.sitio-brand .sst-tabs { top: 70px; }
  html body.sitio-brand .sst-mini-card { flex: 0 0 200px; }
  html body.sitio-brand .sst-actions .sst-btn-wa { flex: 0 1 340px; min-width: 240px; } /* escritorio: botón de WhatsApp de ancho razonable */
}

/* ── 20. AJUSTES TRAS REVISIÓN (V7.3) ───────────────────────────────── */
@media (max-width: 599px) {
  html body.sitio-brand .h7-slide.has-collage .h7-btn-ghost { display: none; }
  html body.sitio-brand .sp-gallery { border-radius: 0; box-shadow: none; }
  html body.sitio-brand .sp-gallery-main { height: auto; aspect-ratio: 1 / 1; }
}
html body.sitio-brand .sp-out-stock { color: var(--muted); font-weight: 700; }
html body.sitio-brand .st-card-cover:not(.has-img) { background: radial-gradient(90% 120% at 100% 0%, rgba(var(--jade-bright-rgb),.55), rgba(var(--jade-bright-rgb),0) 60%), linear-gradient(135deg, var(--jade), var(--jade-900)) !important; }
html body.sitio-brand .st-card-logo { background: #fff !important; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(16,24,40,.14); }
html body.sitio-brand .st-card .btn-wa, html body.sitio-brand .st-card .st-wa { background: var(--wa); }
html body.sitio-brand .sst-stat-num .sitio-ic { color: var(--jade); }
html body.sitio-brand .sitio-bridge-vendor { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 12px; }
html body.sitio-brand .sitio-bridge-vendor > .sitio-av, html body.sitio-brand .sitio-bridge-vendor > div:first-child:not([style]) { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--jade-l) !important; box-shadow: 0 0 0 1px var(--line); }
html body.sitio-brand .sitio-bridge-vendor > .sitio-av img { width: 100%; height: 100%; object-fit: cover; }
html body.sitio-brand .sitio-bridge-vendor .gt-tier { font-size: 10.5px; padding: 2px 7px; }

/* anchos fijos solo en móvil (en escritorio mandan las filas de 5–6 de V7.1) */
@media (max-width: 1023px) {
  html body.sitio-brand .h7-rail > .gt-card { flex: 0 0 168px; width: 168px; }
  html body.sitio-brand .sitio-carousel-item { flex: 0 0 156px; max-width: 156px; }
  html body.sitio-brand .h7-store { width: 184px; }
  html body.sitio-brand .h7-fcard { width: 148px; }
  html body.sitio-brand .h7-cat { width: 100px; }
}

html body.sitio-brand .sp-info { background: #fff; padding: 16px var(--gut) 8px; }
@media (min-width: 1024px) {
  html body.sitio-brand .h7-rails .sitio-home-carousel { padding-left: 0; padding-right: 0; }
  html body.sitio-brand .sp-info { border-radius: 20px; box-shadow: var(--sh-s); padding: 24px 26px; align-self: start; }
}
html body.sitio-brand .sitio-carousel-price-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 6px; }
html body.sitio-brand .sitio-saved-hero { background: var(--hero-bg) !important; border-radius: 0 0 20px 20px; }
html body.sitio-brand .ssv-hero h1, html body.sitio-brand .ssv-hero h2, html body.sitio-brand .vl-hero h1, html body.sitio-brand .vl-hero h2, html body.sitio-brand .sitio-dir-hero h1, html body.sitio-brand .st-hero h1, html body.sitio-brand .sitio-orders-hero h1, html body.sitio-brand .sitio-review-hero h1, html body.sitio-brand .sitio-cart-header h1, html body.sitio-brand .sitio-checkout-hero h1 { color: #fff; }
html body.sitio-brand .ssv-hero p, html body.sitio-brand .vl-hero p { color: rgba(255,255,255,.86); }

/* ── 21. V7.6 — MENOS VERDE: OBSIDIANA + ORO PARA LO DE VENDEDORES ───────────
   El jade queda para la marca (cabecera, botones, historias); las tarjetas para
   vendedores y la banda "Tu marca" pasan a obsidiana con acento oro. */
html body.sitio-brand { --obs: #101828; --obs-2: #1D2939; --oro: #F59E0B; --oro-d: #B45309; --oro-l: #FEF3C7; --oro-on-dark: #FBBF24; }
html body.sitio-brand .h7-side-sell .h7-side-ico { background: var(--oro-l); color: var(--oro-d); }
html body.sitio-brand .h7-side-sell .h7-side-arrow { color: var(--oro-d); }
html body.sitio-brand .h7-side-site { background: radial-gradient(110% 90% at 100% 0%, rgba(245,158,11,.20), rgba(245,158,11,0) 58%), linear-gradient(135deg, var(--obs-2) 0%, var(--obs) 100%) !important; color: #fff; }
html body.sitio-brand .h7-side-site .h7-side-ico { background: rgba(251,191,36,.14); color: var(--oro-on-dark); }
html body.sitio-brand .h7-side-site .h7-side-arrow { color: var(--oro-on-dark); }
html body.sitio-brand .h7-side-site .h7-side-txt span { color: rgba(255,255,255,.78); }
html body.sitio-brand .h7-site { background: radial-gradient(90% 70% at 100% 0%, rgba(245,158,11,.18), rgba(245,158,11,0) 60%), linear-gradient(140deg, var(--obs-2) 0%, var(--obs) 70%) !important; box-shadow: 0 16px 38px rgba(16,24,40,.24); }
html body.sitio-brand .h7-site-kicker, html body.sitio-brand .h7-site-feats .sitio-ic, html body.sitio-brand .h7-site-feats strong, html body.sitio-brand .h7-site-price { color: var(--oro-on-dark); }
html body.sitio-brand .h7-site-dom { background: var(--oro-l); color: var(--oro-d); }
html body.sitio-brand .h7-site-input:focus-within { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(245,158,11,.16); }
html body.sitio-brand .h7-site-extra input:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(245,158,11,.16); }
html body.sitio-brand .h7-cat-ico { background: var(--bg) !important; }
/* La portada: el jade de la marca se funde a obsidiana (menos masa verde bajo la cabecera) */
html body.sitio-brand { --hero-bg: radial-gradient(120% 95% at 100% 0%, rgba(var(--jade-bright-rgb),.42) 0%, rgba(var(--jade-bright-rgb),0) 55%), linear-gradient(135deg, var(--jade-800) 0%, var(--jade-900) 38%, var(--obs) 100%); }
html body.sitio-brand .h7-store-cover:not(.has-img), html body.sitio-brand .st-card-cover:not(.has-img) { background: var(--hero-bg) !important; }
/* V7.6: "hidden" debe ganarle al display de los botones (si no, se veían los dos) */
html body.sitio-gt .h7-site-form [hidden], html body.sitio-brand .h7-site-form [hidden] { display: none !important; }