/* =====================================================================
   HB Soluciones Tecnológicas - sistema visual
   Azul del logo (#19344d) + plateado del swoosh, con un azul vivo para resaltar.
   Radios: controles 10px, tarjetas 14px, paneles 18px, insignias 999px.
   ===================================================================== */

:root {
    --hb-bg: oklch(0.993 0.002 255);
    --hb-surface: oklch(0.966 0.006 250);
    --hb-surface-2: oklch(0.94 0.009 250);
    --hb-line: oklch(0.9 0.009 250);
    --hb-brand: #19344d;
    --hb-brand-hover: #244a6b;
    --hb-deep: oklch(0.2 0.035 252);
    --hb-ink: #19344d;
    --hb-ink-2: oklch(0.38 0.03 250);
    --hb-muted: oklch(0.48 0.02 250);
    --hb-on-ink: oklch(0.87 0.015 250);
    --hb-silver: #b4b9bf;
    --hb-silver-2: #e2e5e9;
    --hb-accent: oklch(0.6 0.14 245);
    --hb-accent-hover: oklch(0.55 0.14 246);
    --hb-accent-strong: oklch(0.49 0.13 248);
    --hb-accent-soft: oklch(0.955 0.022 245);
    --hb-wa: #25d366;
    --hb-wa-deep: #138a47;
    --hb-ok: oklch(0.5 0.12 152);
    --hb-ok-soft: oklch(0.96 0.04 152);
    --hb-warn: oklch(0.52 0.12 70);
    --hb-warn-soft: oklch(0.96 0.045 85);

    --hb-r-sm: 10px;
    --hb-r-md: 14px;
    --hb-r-lg: 18px;

    --hb-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --hb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --hb-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --hb-shadow: 0 1px 2px oklch(0.3 0.06 250 / 0.06), 0 8px 24px -12px oklch(0.3 0.06 250 / 0.22);

    --hb-z-sticky: 20;
    --hb-z-fab: 30;
    --hb-z-drawer: 50;

    --hb-gutter: clamp(16px, 3vw, 32px);
}

/* ---------- Base ---------- */
body.hb-site,
body.hb-site button,
body.hb-site input,
body.hb-site select,
body.hb-site textarea {
    font-family: var(--hb-font);
}
body.hb-site {
    background: var(--hb-bg);
    color: var(--hb-ink-2);
    -webkit-font-smoothing: antialiased;
}
body.hb-site h1, body.hb-site h2, body.hb-site h3, body.hb-site h4 {
    font-family: var(--hb-font);
    color: var(--hb-ink);
    text-wrap: balance;
}
body.hb-site p { text-wrap: pretty; }
html { scroll-behavior: smooth; }

.hb-ico { width: 1.25em; height: 1.25em; flex-shrink: 0; }

.hb-wrap {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--hb-gutter);
    box-sizing: border-box;
}

.hb-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: calc(var(--hb-z-drawer) + 1);
    background: var(--hb-ink);
    color: #fff !important;
    padding: 10px 16px;
    border-radius: var(--hb-r-sm);
    transition: top 160ms var(--hb-ease-out);
}
.hb-skip:focus { top: 12px; }

body.hb-site :focus-visible {
    outline: 2px solid var(--hb-accent-strong);
    outline-offset: 2px;
}

/* Las páginas a medida ocupan todo el ancho (anula el contenedor de Astra solo ahí). */
body.hb-custom-page #content.site-content .ast-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.hb-custom-page #content.site-content { padding: 0 !important; }

/* ---------- Botones y enlaces ---------- */
.hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.8em 1.2em;
    border-radius: var(--hb-r-sm);
    border: 1px solid transparent;
    font: 600 0.95rem/1.1 var(--hb-font);
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms var(--hb-ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.hb-btn:active { transform: scale(0.97); }
.hb-btn-lg { padding: 1em 1.45em; font-size: 1rem; }
.hb-btn-block { display: flex; width: 100%; box-sizing: border-box; }

.hb-btn-ink { background: var(--hb-ink); color: #fff !important; }
.hb-btn-ink .hb-ico { color: var(--hb-wa); }
.hb-btn-ink:hover { background: var(--hb-brand-hover); color: #fff !important; }

.hb-btn-light { background: #fff; color: var(--hb-ink) !important; }
.hb-btn-light .hb-ico { color: var(--hb-wa-deep); }
.hb-btn-light:hover { background: var(--hb-silver-2); color: var(--hb-ink) !important; }

.hb-btn-ghost { background: transparent; border-color: var(--hb-line); color: var(--hb-ink) !important; }
.hb-btn-ghost:hover { background: var(--hb-surface); border-color: oklch(0.82 0.01 258); }
.hb-btn-ghost .hb-ico { transition: transform 200ms var(--hb-ease-out); }
.hb-btn-ghost:hover .hb-ico { transform: translateX(3px); }

.hb-btn-line { background: #fff; border-color: var(--hb-line); color: var(--hb-ink) !important; }
.hb-btn-line .hb-ico { color: var(--hb-wa-deep); }
.hb-btn-line:hover { border-color: var(--hb-ink); background: #fff; }

.hb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--hb-accent-strong) !important;
    text-decoration: none !important;
}
.hb-link .hb-ico { width: 1.1em; height: 1.1em; transition: transform 200ms var(--hb-ease-out); }
.hb-link:hover { color: var(--hb-ink) !important; }
.hb-link:hover .hb-ico { transform: translateX(3px); }

.hb-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--hb-r-sm);
    background: transparent;
    color: var(--hb-ink);
    cursor: pointer;
    transition: background-color 200ms ease, transform 160ms var(--hb-ease-out), opacity 200ms ease;
}
.hb-icon-btn .hb-ico { width: 22px; height: 22px; }
.hb-icon-btn:hover { background: var(--hb-surface); }
.hb-icon-btn:active { transform: scale(0.95); }
.hb-icon-btn-line { border: 1px solid var(--hb-line); background: #fff; width: 40px; height: 40px; }
.hb-icon-btn-line .hb-ico { width: 18px; height: 18px; }
.hb-icon-btn:disabled { opacity: 0.35; cursor: default; transform: none; background: #fff; }

/* ---------- Header ---------- */
.hb-header {
    background: #fff;
    border-bottom: 1px solid var(--hb-line);
    position: relative;
    z-index: var(--hb-z-sticky);
}
.hb-header-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo search cta";
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    min-height: 76px;
}
.hb-menu-btn { display: none; grid-area: menu; margin-left: -10px; }
.hb-logo { grid-area: logo; display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
.hb-logo img { display: block; max-height: 46px; width: auto; }
.hb-logo-img { display: block; width: auto !important; height: 44px !important; max-width: 160px; object-fit: contain; }
.hb-logo-text { display: flex; flex-direction: column; font-weight: 800; font-stretch: 110%; color: var(--hb-ink); font-size: 1.05rem; line-height: 1.05; }
.hb-logo-text small { font-weight: 500; font-stretch: 100%; font-size: 0.78rem; color: var(--hb-muted); }

.hb-search {
    grid-area: search;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 640px;
    width: 100%;
    justify-self: center;
}
.hb-search > .hb-ico {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    color: var(--hb-muted);
    pointer-events: none;
}
.hb-search input[type="search"] {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 104px 0 44px;
    border: 1px solid var(--hb-line) !important;
    border-radius: var(--hb-r-sm) !important;
    background: var(--hb-surface) !important;
    color: var(--hb-ink) !important;
    font-size: 0.95rem;
    box-shadow: none !important;
    transition: background-color 200ms ease, border-color 200ms ease;
    -webkit-appearance: none;
}
.hb-search input[type="search"]::placeholder { color: var(--hb-muted); opacity: 1; }
.hb-search input[type="search"]:focus { background: #fff !important; border-color: var(--hb-ink) !important; outline: none; }
.hb-search button[type="submit"] {
    position: absolute;
    right: 5px;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 7px;
    background: var(--hb-ink);
    color: #fff;
    font: 600 0.875rem var(--hb-font);
    cursor: pointer;
    transition: background-color 200ms ease, transform 160ms var(--hb-ease-out);
}
.hb-search button[type="submit"]:hover { background: var(--hb-brand-hover); }
.hb-search button[type="submit"]:active { transform: scale(0.97); }

.hb-header-cta { grid-area: cta; }

.hb-header-nav { border-top: 1px solid var(--hb-line); }
.hb-header-nav-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; }
.hb-header-nav ul { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.hb-nav-cats {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    height: 48px;
    overflow: hidden;
}
.hb-header-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 11px;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--hb-ink-2) !important;
    text-decoration: none !important;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color 200ms ease, box-shadow 200ms ease;
}
.hb-header-nav a .hb-ico { width: 18px; height: 18px; }
.hb-header-nav a:hover { color: var(--hb-ink) !important; }
.hb-header-nav a.is-current { color: var(--hb-ink) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--hb-accent); }
.hb-nav-pages { flex-shrink: 0; border-left: 1px solid var(--hb-line); padding-left: 12px !important; }

@media (max-width: 1023px) {
    .hb-header-main { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "menu logo search cta"; gap: 12px 16px; }
    .hb-menu-btn { display: inline-grid; }
    .hb-header-nav { display: none; }
    .hb-header-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hb-header-cta { padding: 0; width: 48px; height: 48px; }
    .hb-header-cta .hb-ico { width: 22px; height: 22px; }
}
@media (max-width: 719px) {
    .hb-header-main {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "menu logo cta" "search search search";
        min-height: 0;
        padding-block: 10px 12px;
    }
    .hb-logo img { max-height: 38px; }
    .hb-search input[type="search"] { height: 44px; padding-right: 16px; }
    .hb-search button[type="submit"] { display: none; }
}

/* ---------- Menú móvil ---------- */
.hb-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 380px);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 16px 20px 28px;
    border: 0;
    background: #fff;
    color: var(--hb-ink);
    overflow-y: auto;
    box-sizing: border-box;
    z-index: var(--hb-z-drawer);
}
.hb-drawer[open] { animation: hb-drawer-in 320ms var(--hb-ease-drawer); }
.hb-drawer.is-closing { animation: hb-drawer-out 180ms var(--hb-ease-out) forwards; }
.hb-drawer::backdrop { background: oklch(0.22 0.025 258 / 0.45); animation: hb-fade-in 240ms ease; }
@keyframes hb-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes hb-drawer-out { to { transform: translateX(-100%); } }
@keyframes hb-fade-in { from { opacity: 0; } }

.hb-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hb-drawer-head span { font-weight: 700; font-size: 1.05rem; }
.hb-search-drawer { max-width: none; margin-bottom: 8px; }
.hb-search-drawer input[type="search"] { padding-right: 16px; }
.hb-drawer-label { margin: 22px 0 6px; font-size: 0.8rem; font-weight: 600; color: var(--hb-muted); }
.hb-drawer-list { list-style: none; margin: 0 0 8px; padding: 0; }
.hb-drawer-list a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--hb-line);
    color: var(--hb-ink) !important;
    font-weight: 500;
    text-decoration: none !important;
}
.hb-drawer .hb-btn-block { margin-top: 20px; }

/* ---------- Secciones genéricas ---------- */
.hb-sec { padding-block: clamp(56px, 7vw, 104px); }
.hb-sec-tint { background: var(--hb-surface); }
.hb-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: clamp(24px, 3vw, 36px);
}
body.hb-site .hb-sec-head h2,
body.hb-site .hb-h2,
body.hb-site .hb-why h2,
body.hb-site .hb-services h2,
body.hb-site .hb-prose h2 {
    margin: 0;
    font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.4rem);
    font-weight: 800;
    font-stretch: 108%;
    letter-spacing: -0.02em;
    line-height: 1.08;
}
.hb-lead { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.6; color: var(--hb-ink-2); max-width: 48ch; }

/* ---------- Hero ---------- */
.hb-hero { padding-block: clamp(36px, 5vw, 80px) clamp(44px, 6vw, 96px); background: var(--hb-bg); overflow: hidden; }
.hb-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.hb-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--hb-ink-2);
}
.hb-hero-kicker .hb-ico { color: var(--hb-accent-strong); }
body.hb-site .hb-hero h1 {
    margin: 18px 0 0;
    font-size: clamp(2.4rem, 1.5rem + 3.1vw, 4rem);
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.03em;
    line-height: 1.02;
}
.hb-hero h1 mark {
    background: linear-gradient(var(--hb-accent), var(--hb-accent)) no-repeat 0 92% / 100% 0.2em;
    color: inherit;
    padding: 0 0.04em;
}
.hb-hero .hb-lead { margin: 22px 0 0; }
.hb-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hb-hero-visual { position: relative; }
.hb-hero-mosaic {
    display: grid;
    gap: 14px;
    padding: 14px;
    border-radius: var(--hb-r-lg);
    background: var(--hb-brand);
    aspect-ratio: 5 / 4;
    position: relative;
    z-index: 1;
}
.hb-hero-visual::before {
    content: "";
    position: absolute;
    inset: 6% -7% 2% -9%;
    border-radius: 50%;
    border: 12px solid transparent;
    border-bottom-color: var(--hb-silver);
    border-left-color: var(--hb-silver-2);
    transform: rotate(-16deg);
    pointer-events: none;
}
.hb-hero-mosaic-3 { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
.hb-hero-mosaic-3 .hb-hero-tile:first-child { grid-row: span 2; }
.hb-hero-mosaic-2 { grid-template-columns: 1fr 1fr; }
.hb-hero-mosaic-1 { grid-template-columns: 1fr; }
.hb-hero-mosaic-logos { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.hb-hero-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 16px;
    border-radius: var(--hb-r-md);
    background: #fff;
    overflow: hidden;
    text-decoration: none !important;
    animation: hb-rise 640ms var(--hb-ease-out) both;
    animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
.hb-hero-tile img {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 400ms var(--hb-ease-out);
}
.hb-hero-tile-name {
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hb-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hb-hero-mosaic-logos .hb-hero-tile { align-items: center; justify-content: center; }
.hb-hero-mosaic-logos .hb-hero-tile img { max-height: 70%; mix-blend-mode: multiply; }
@keyframes hb-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

@media (hover: hover) and (pointer: fine) {
    a.hb-hero-tile:hover img { transform: scale(1.04); }
}

@media (max-width: 899px) {
    .hb-hero-grid { grid-template-columns: 1fr; }
    .hb-hero-mosaic { aspect-ratio: 4 / 3; }
}
@media (max-width: 519px) {
    .hb-hero-ctas .hb-btn { flex: 1 1 100%; }
    .hb-hero-mosaic { gap: 10px; padding: 10px; }
    .hb-hero-tile { padding: 10px; }
}

/* ---------- Franja de marcas ---------- */
.hb-brands { border-block: 1px solid var(--hb-line); background: #fff; }
.hb-brands-inner { display: flex; align-items: center; gap: 32px; min-height: 92px; }
.hb-brands-label { flex-shrink: 0; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--hb-muted); }
.hb-marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.hb-marquee-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    padding-block: 16px;
    animation: hb-marquee 36s linear infinite;
}
.hb-marquee:hover .hb-marquee-track { animation-play-state: paused; }
.hb-marquee-track img { height: 60px; width: auto; max-width: 170px; object-fit: contain; mix-blend-mode: multiply; }
@keyframes hb-marquee { to { transform: translateX(calc(-50% - 32px)); } }
@media (max-width: 719px) {
    .hb-brands-inner { flex-direction: column; align-items: stretch; gap: 0; padding-top: 18px; }
    .hb-brands-label { text-align: center; }
}

/* ---------- Categorías (bento) ---------- */
.hb-cats { display: grid; gap: 16px; }
.hb-cats-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); }
.hb-cats-n1 { grid-template-columns: 1fr; }
.hb-cats-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-cats-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-cats-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hb-cat {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    grid-column: span var(--span, 1);
    min-height: 210px;
    padding: 20px;
    border-radius: var(--hb-r-lg);
    background: var(--hb-surface);
    text-decoration: none !important;
    overflow: hidden;
    transition: background-color 240ms ease;
}
.hb-cat.is-lead { grid-column: span 2; grid-row: span 2; background: var(--hb-accent-soft); padding: 28px; }
.hb-cat-media { display: grid; place-items: center; min-height: 0; }
.hb-cat-media img { width: 100%; height: 100%; max-height: 150px; object-fit: contain; mix-blend-mode: multiply; transition: transform 400ms var(--hb-ease-out); }
.hb-cat.is-lead .hb-cat-media img { max-height: 340px; }
.hb-cat-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--hb-ink-2); }
.hb-cat-icon .hb-ico { width: 34px; height: 34px; }
.hb-cat.is-lead .hb-cat-icon { width: 120px; height: 120px; }
.hb-cat.is-lead .hb-cat-icon .hb-ico { width: 56px; height: 56px; color: var(--hb-accent-strong); }
.hb-cat-text { display: flex; flex-direction: column; gap: 2px; padding-right: 44px; }
.hb-cat-name { font-weight: 700; font-stretch: 105%; font-size: 1.05rem; color: var(--hb-ink); line-height: 1.2; }
.hb-cat.is-lead .hb-cat-name { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem); font-weight: 800; }
.hb-cat-count { font-size: 0.875rem; color: var(--hb-muted); }
.hb-cat-arrow {
    position: absolute;
    right: 16px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--hb-ink);
    transition: transform 240ms var(--hb-ease-out), background-color 240ms ease, color 240ms ease;
}
.hb-cat-arrow .hb-ico { width: 18px; height: 18px; }
.hb-cat.is-lead .hb-cat-arrow { right: 24px; bottom: 26px; width: 44px; height: 44px; background: var(--hb-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
    .hb-cat:hover { background: var(--hb-surface-2); }
    .hb-cat.is-lead:hover { background: oklch(0.93 0.035 245); }
    .hb-cat:hover .hb-cat-media img { transform: scale(1.05); }
    .hb-cat:hover .hb-cat-arrow { transform: translate(2px, -2px); background: var(--hb-brand); color: #fff; }
}
/* Última tarjeta a todo el ancho: imagen y texto en horizontal */
.hb-cat.is-wide { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 28px; min-height: 0; }
.hb-cat.is-wide .hb-cat-media img { max-height: 120px; }
@media (max-width: 1023px) {
    .hb-cats-bento, .hb-cats-n3, .hb-cats-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hb-cats-bento .hb-cat { grid-column: span 1; }
    .hb-cats-bento .hb-cat.is-lead { grid-column: span 2; grid-row: span 1; }
    .hb-cats-bento .hb-cat:last-child:nth-child(even),
    .hb-cats-n3 .hb-cat:last-child { grid-column: span 2; }
    .hb-cat.is-lead .hb-cat-media img { max-height: 200px; }
}
@media (max-width: 559px) {
    .hb-cats, .hb-cats-bento {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--hb-gutter) * -1);
        padding-inline: var(--hb-gutter);
        scroll-padding-inline: var(--hb-gutter);
        gap: 12px;
    }
    .hb-cats::-webkit-scrollbar { display: none; }
    .hb-cat, .hb-cat.is-lead { flex: 0 0 72%; min-height: 230px; scroll-snap-align: start; padding: 20px; }
    .hb-cat.is-lead .hb-cat-media img { max-height: 150px; }
}

/* ---------- Carrusel de productos ---------- */
.hb-rail-ctrl { display: flex; align-items: center; gap: 8px; }
.hb-rail-ctrl .hb-link { margin-right: 12px; }
.hb-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
    overscroll-behavior-x: contain;
}
.hb-rail::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) { .hb-rail { grid-auto-columns: calc((100% - 2 * 16px) / 2.6); gap: 16px; } }
@media (max-width: 559px) {
    .hb-rail { grid-auto-columns: 74%; gap: 12px; margin-inline: calc(var(--hb-gutter) * -1); padding-inline: var(--hb-gutter); scroll-padding-inline: var(--hb-gutter); }
    .hb-rail-ctrl .hb-icon-btn { display: none; }
    .hb-rail-ctrl .hb-link { margin: 0; }
}

/* Tarjeta de producto (home y catálogo comparten anatomía) */
.hb-pcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-md);
    overflow: hidden;
    scroll-snap-align: start;
    transition: border-color 200ms ease, box-shadow 240ms ease;
}
.hb-pcard-media { display: block; aspect-ratio: 1 / 1; padding: 18px; background: #fff; }
.hb-pcard-media img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms var(--hb-ease-out); }
.hb-pcard-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 4px 18px 18px; border-top: 1px solid var(--hb-line); padding-top: 16px; }
.hb-pcard-cat { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--hb-muted); }
body.hb-site .hb-pcard-title { margin: 4px 0 0; font-size: 1rem; font-weight: 600; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hb-pcard-title a { color: var(--hb-ink) !important; text-decoration: none !important; }
.hb-pcard-title a::after { content: ""; position: absolute; inset: 0; }
.hb-pcard { position: relative; }
.hb-pcard .hb-btn { position: relative; z-index: 1; margin-top: auto; }
.hb-pcard-price { margin: 12px 0 0; font-weight: 700; font-size: 1.1rem; color: var(--hb-ink); font-variant-numeric: tabular-nums; }
.hb-pcard-price del { color: var(--hb-muted); font-weight: 500; font-size: 0.85em; }
.hb-pcard-price ins { text-decoration: none; }
.hb-pcard .hb-stock { margin: 6px 0 16px; }
@media (hover: hover) and (pointer: fine) {
    .hb-pcard:hover { border-color: oklch(0.8 0.012 258); box-shadow: var(--hb-shadow); }
    .hb-pcard:hover .hb-pcard-media img { transform: scale(1.04); }
}

.hb-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; margin: 0; }
.hb-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hb-stock.is-in { color: var(--hb-ok); }
.hb-stock.is-out { color: var(--hb-warn); }
.hb-price-ask { font-size: 0.85em; font-weight: 600; color: var(--hb-ink-2); }
.hb-igv-note { font-size: 0.7em; font-weight: 600; color: var(--hb-muted); margin-left: 2px; white-space: nowrap; }

/* ---------- Por qué HB ---------- */
.hb-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.hb-why-intro > p { margin: 16px 0 0; max-width: 46ch; font-size: 1.05rem; line-height: 1.65; color: var(--hb-ink-2); }
.hb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 36px 0 0; }
.hb-facts > div { padding: 18px 0; border-top: 1px solid var(--hb-line); }
.hb-facts dt { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem); font-weight: 800; font-stretch: 110%; color: var(--hb-ink); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hb-facts dd { margin: 6px 0 0; font-size: 0.92rem; color: var(--hb-muted); }
.hb-why-list { list-style: none; margin: 0; padding: 0; }
.hb-why-list li { display: flex; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--hb-line); }
.hb-why-list li:first-child { border-top: 1px solid var(--hb-line); }
.hb-why-ico { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--hb-r-sm); background: var(--hb-accent-soft); color: var(--hb-accent-strong); }
.hb-why-ico .hb-ico { width: 24px; height: 24px; }
body.hb-site .hb-why-list h3 { margin: 0; font-size: 1.08rem; font-weight: 700; }
.hb-why-list p { margin: 4px 0 0; color: var(--hb-muted); line-height: 1.55; }
@media (max-width: 899px) { .hb-why { grid-template-columns: 1fr; } }

/* ---------- Servicios (home) ---------- */
.hb-services { background: var(--hb-surface); }
.hb-services-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.hb-services-intro p { margin: 16px 0 24px; max-width: 40ch; font-size: 1.05rem; line-height: 1.65; }
.hb-services-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.hb-services-list li { padding: 28px 0; border-top: 1px solid var(--hb-line); }
.hb-services-list .hb-ico { width: 30px; height: 30px; color: var(--hb-accent-strong); }
body.hb-site .hb-services-list h3 { margin: 14px 0 6px; font-size: 1.1rem; font-weight: 700; }
.hb-services-list p { margin: 0; color: var(--hb-muted); line-height: 1.6; }
@media (max-width: 899px) { .hb-services-grid { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .hb-services-list { grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.hb-cta { position: relative; overflow: hidden; background: var(--hb-brand); padding-block: clamp(48px, 6vw, 88px); }
.hb-cta::after { content: ""; position: absolute; right: -8%; top: -40%; width: 46%; height: 180%; border-radius: 50%; border: 14px solid transparent; border-left-color: oklch(1 0 0 / 0.14); border-bottom-color: oklch(1 0 0 / 0.08); transform: rotate(-18deg); pointer-events: none; }
.hb-cta-inner { position: relative; z-index: 1; }
.hb-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
body.hb-site .hb-cta h2 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); font-weight: 800; font-stretch: 110%; letter-spacing: -0.025em; line-height: 1.05; max-width: 22ch; }
body.hb-site .hb-cta h2 { color: #fff; }
.hb-cta p { margin: 12px 0 0; color: var(--hb-on-ink); font-size: 1.05rem; max-width: 50ch; }

/* ---------- Footer ---------- */
.hb-footer { background: var(--hb-deep); color: var(--hb-on-ink); }
.hb-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 72px 48px; }
.hb-footer-grid.has-legal { grid-template-columns: 1.4fr 1fr 0.9fr 1fr 1.3fr; gap: 32px; }
.hb-footer-legal { margin: -12px 0 24px; font-size: 0.85rem; line-height: 1.6; color: oklch(0.75 0.015 250); }
.hb-footer-name { margin: 0; color: #fff; font-weight: 800; font-stretch: 110%; font-size: 1.2rem; }
.hb-footer-desc { margin: 12px 0 24px; max-width: 36ch; line-height: 1.6; color: var(--hb-on-ink); }
body.hb-site .hb-footer-h { margin: 0 0 14px; font-size: 0.95rem; font-weight: 700; color: #fff; }
.hb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hb-footer a { color: var(--hb-on-ink) !important; text-decoration: none !important; transition: color 200ms ease; }
.hb-footer a.hb-btn-light { color: var(--hb-ink) !important; }
.hb-footer ul a:hover { color: #fff !important; }
.hb-footer-contact li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.hb-footer-contact .hb-ico { width: 18px; height: 18px; margin-top: 2px; color: var(--hb-silver); }
.hb-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px; border-top: 1px solid oklch(1 0 0 / 0.12); font-size: 0.85rem; }
.hb-footer-bottom p { margin: 0; color: oklch(0.72 0.012 258); }
@media (max-width: 1023px) { .hb-footer-grid, .hb-footer-grid.has-legal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .hb-footer-grid, .hb-footer-grid.has-legal { grid-template-columns: 1fr; padding-block: 56px 32px; } }

/* El footer original de Astra queda reemplazado por el hook; esto es respaldo. */
#colophon { display: none !important; }
.site-info a[href*="wpastra.com"] { display: none; }

/* ---------- WhatsApp flotante ---------- */
.hb-fab {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: var(--hb-z-fab);
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--hb-wa-deep);
    color: #fff !important;
    box-shadow: 0 10px 24px -8px oklch(0.45 0.12 150 / 0.6);
    transition: transform 200ms var(--hb-ease-out), background-color 200ms ease;
}
.hb-fab .hb-ico { width: 30px; height: 30px; }
.hb-fab:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .hb-fab:hover { transform: translateY(-2px); background: #0f7a3e; } }

/* ---------- Páginas internas ---------- */
.hb-phead { background: var(--hb-surface); border-bottom: 1px solid var(--hb-line); padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 80px); }
.hb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--hb-muted); }
.hb-crumbs a { color: var(--hb-ink-2) !important; text-decoration: none !important; }
.hb-crumbs a:hover { color: var(--hb-accent-strong) !important; }
.hb-crumbs .hb-ico { width: 14px; height: 14px; }
body.hb-site .hb-phead h1 { margin: 18px 0 0; max-width: 20ch; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1.04; }
.hb-phead .hb-lead { margin: 18px 0 0; }

.hb-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.hb-split-center { align-items: center; }
.hb-prose p { margin: 18px 0 0; max-width: 62ch; font-size: 1.05rem; line-height: 1.75; color: var(--hb-ink-2); }
.hb-facts-boxed { margin: 0; gap: 12px; }
.hb-facts-boxed > div { padding: 22px; border: 0; border-radius: var(--hb-r-md); background: var(--hb-surface); }
@media (max-width: 899px) { .hb-split { grid-template-columns: 1fr; } }

.hb-mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
body.hb-site .hb-mv h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); font-weight: 800; font-stretch: 108%; }
.hb-mv h2 .hb-ico { width: 30px; height: 30px; color: var(--hb-accent-strong); }
.hb-mv p { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.75; max-width: 58ch; }
.hb-promise { display: flex; align-items: center; gap: 16px; margin-top: clamp(32px, 4vw, 56px); padding: 20px 24px; border-radius: var(--hb-r-md); background: #fff; border: 1px solid var(--hb-line); }
.hb-promise .hb-ico { width: 28px; height: 28px; color: var(--hb-accent-strong); }
.hb-promise p { margin: 0; color: var(--hb-ink-2); }
.hb-promise strong { color: var(--hb-ink); }
@media (max-width: 719px) { .hb-mv { grid-template-columns: 1fr; } }

.hb-logo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.hb-logo-grid li { display: grid; place-items: center; height: 128px; border: 1px solid var(--hb-line); border-radius: var(--hb-r-md); background: #fff; }
.hb-logo-grid img { max-height: 92px; max-width: 82%; object-fit: contain; mix-blend-mode: multiply; }

.hb-svc-rows { list-style: none; margin: 0; padding: 0; }
.hb-svc-rows li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: 16px 32px;
    padding: 32px 0;
    border-bottom: 1px solid var(--hb-line);
}
.hb-svc-rows li:first-child { border-top: 1px solid var(--hb-line); }
.hb-svc-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--hb-r-md); background: var(--hb-accent-soft); color: var(--hb-accent-strong); }
.hb-svc-ico .hb-ico { width: 28px; height: 28px; }
body.hb-site .hb-svc-rows h2 { margin: 0; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 700; font-stretch: 105%; }
.hb-svc-rows p { margin: 0; color: var(--hb-ink-2); line-height: 1.6; }
@media (max-width: 899px) {
    .hb-svc-rows li { grid-template-columns: 56px minmax(0, 1fr); }
    .hb-svc-rows p, .hb-svc-rows .hb-link { grid-column: 2; }
}

.hb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: hb-step; }
.hb-steps li { counter-increment: hb-step; padding-top: 18px; border-top: 2px solid var(--hb-ink); }
.hb-steps li::before { content: counter(hb-step, decimal-leading-zero); display: block; font-weight: 800; font-stretch: 110%; font-size: 1.1rem; color: var(--hb-accent-strong); font-variant-numeric: tabular-nums; }
body.hb-site .hb-steps h3 { margin: 10px 0 0; font-size: 1.15rem; font-weight: 700; }
.hb-steps p { margin: 8px 0 0; color: var(--hb-muted); line-height: 1.6; }
@media (max-width: 899px) { .hb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .hb-steps { grid-template-columns: 1fr; } }

.hb-checklist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.hb-checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--hb-ink); line-height: 1.45; }
.hb-checklist .hb-ico { width: 24px; height: 24px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: var(--hb-accent-soft); color: var(--hb-accent-strong); }
@media (max-width: 559px) { .hb-checklist { grid-template-columns: 1fr; } }

.hb-panel-ink { padding: clamp(28px, 4vw, 44px); border-radius: var(--hb-r-lg); background: var(--hb-ink); color: var(--hb-on-ink); }
.hb-panel-ink > .hb-ico { width: 40px; height: 40px; color: var(--hb-silver); }
body.hb-site .hb-panel-ink h3 { margin: 16px 0 0; color: #fff; font-size: 1.5rem; font-weight: 800; font-stretch: 108%; }
.hb-panel-ink p { margin: 8px 0 24px; color: var(--hb-on-ink); }

/* Contacto */
.hb-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hb-contact-wa {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--hb-r-md);
    background: var(--hb-ink);
    color: #fff !important;
    text-decoration: none !important;
    transition: background-color 200ms ease, transform 160ms var(--hb-ease-out);
}
.hb-contact-wa:hover { background: var(--hb-brand-hover); }
.hb-contact-wa:active { transform: scale(0.99); }
.hb-contact-wa-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--hb-wa-deep); }
.hb-contact-wa-ico .hb-ico { width: 26px; height: 26px; }
.hb-contact-wa .hb-contact-k { color: var(--hb-on-ink); }
.hb-contact-wa .hb-contact-v { color: #fff; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-contact-go { margin-left: auto; width: 22px; height: 22px; }
.hb-contact-k { display: block; font-size: 0.82rem; color: var(--hb-muted); }
.hb-contact-v { display: block; color: var(--hb-ink); font-weight: 600; text-decoration: none !important; }
a.hb-contact-v:hover { color: var(--hb-accent-strong); }
.hb-contact-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hb-contact-list li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 2px; border-bottom: 1px solid var(--hb-line); }
.hb-contact-list .hb-ico { width: 22px; height: 22px; margin-top: 2px; color: var(--hb-accent-strong); }
.hb-map { margin-top: 24px; border: 1px solid var(--hb-line); border-radius: var(--hb-r-md); overflow: hidden; background: var(--hb-surface); }
.hb-map iframe { display: block; width: 100%; height: 280px; border: 0; }
.hb-form-card { padding: clamp(24px, 3.5vw, 44px); border: 1px solid var(--hb-line); border-radius: var(--hb-r-lg); background: #fff; box-shadow: var(--hb-shadow); }
body.hb-site .hb-form-card h2 { margin: 0; font-size: 1.6rem; font-weight: 800; font-stretch: 108%; }
.hb-form-card > p { margin: 6px 0 24px; color: var(--hb-muted); }
@media (max-width: 899px) { .hb-contact { grid-template-columns: 1fr; } }

/* ---------- Formularios (Contact Form 7) ---------- */
.hb-contact-form .wpcf7-form p { margin: 0 0 16px; }
.hb-contact-form .wpcf7-form label,
.hb-cf7-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hb-ink);
}
.hb-contact-form input[type="text"],
.hb-contact-form input[type="email"],
.hb-contact-form input[type="tel"],
.hb-contact-form select,
.hb-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid oklch(0.84 0.01 258) !important;
    border-radius: var(--hb-r-sm) !important;
    background: #fff !important;
    color: var(--hb-ink) !important;
    font: 400 1rem var(--hb-font);
    box-shadow: none !important;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hb-contact-form textarea { min-height: 130px; resize: vertical; }
.hb-contact-form input::placeholder, .hb-contact-form textarea::placeholder { color: var(--hb-muted); opacity: 1; }
.hb-contact-form input:focus, .hb-contact-form textarea:focus, .hb-contact-form select:focus {
    outline: none;
    border-color: var(--hb-ink) !important;
    box-shadow: 0 0 0 3px oklch(0.6 0.14 245 / 0.28) !important;
}
.hb-contact-form .wpcf7-form input[type="submit"] {
    width: auto;
    padding: 14px 26px;
    border: 0;
    border-radius: var(--hb-r-sm);
    background: var(--hb-ink);
    color: #fff;
    font: 600 1rem var(--hb-font);
    cursor: pointer;
    transition: background-color 200ms ease, transform 160ms var(--hb-ease-out);
}
.hb-contact-form .wpcf7-form input[type="submit"]:hover { background: var(--hb-brand-hover); }
.hb-contact-form .wpcf7-form input[type="submit"]:active { transform: scale(0.97); }
.hb-cf7-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.hb-cf7-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .hb-cf7-grid { grid-template-columns: 1fr; } }
.wpcf7-form .wpcf7-not-valid { border-color: oklch(0.55 0.19 27) !important; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; color: oklch(0.5 0.19 27); font-size: 0.82rem; font-weight: 500; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0 !important; padding: 12px 16px; border: 0 !important; border-radius: var(--hb-r-sm); font-size: 0.9rem; }
.wpcf7 form.sent .wpcf7-response-output { background: var(--hb-ok-soft); color: var(--hb-ok); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: oklch(0.96 0.03 27); color: oklch(0.45 0.17 27); }

/* =====================================================================
   WooCommerce: catálogo y ficha de producto
   ===================================================================== */

/* Oculta el título por defecto de Astra en Tienda y Categorías (lo reemplaza hb-shop-intro) */
.woocommerce-shop .page-header,
.post-type-archive-product .page-header,
.tax-product_cat .page-header,
.tax-product_tag .page-header,
.ast-woocommerce-container .page-title,
.woocommerce-products-header { display: none !important; }

body.woocommerce-shop .ast-container,
body.post-type-archive-product .ast-container,
body.tax-product_cat .ast-container,
body.tax-product_tag .ast-container,
body.search-results.woocommerce .ast-container,
body.single-product .ast-container { max-width: 1344px !important; }

.hb-shop-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; padding-block: 32px 64px; }
.hb-shop-sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.hb-filter { padding: 16px 0; border-bottom: 1px solid var(--hb-line); }
.hb-filter:first-child { padding-top: 0; }
.hb-filter summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--hb-ink); margin-bottom: 10px; }
.hb-filter summary::-webkit-details-marker { display: none; }
.hb-filter summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 200ms var(--hb-ease-out); }
.hb-filter:not([open]) summary { margin-bottom: 0; }
.hb-filter:not([open]) summary::after { transform: rotate(-45deg); }
.hb-filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hb-filter-list a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; margin-inline: -10px; border-radius: 8px; color: var(--hb-ink-2) !important; text-decoration: none !important; font-size: 0.93rem; transition: background-color 160ms ease; }
.hb-filter-list a span { color: var(--hb-muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.hb-filter-list a:hover { background: var(--hb-surface); }
.hb-filter-list a.is-active { background: var(--hb-accent-soft); color: var(--hb-ink) !important; font-weight: 600; }
.hb-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--hb-ink) !important; font-weight: 500; text-decoration: none !important; font-size: 0.93rem; }
.hb-toggle-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: oklch(0.82 0.01 258); transition: background-color 200ms ease; }
.hb-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px oklch(0 0 0 / 0.2); transition: transform 200ms var(--hb-ease-out); }
.hb-toggle.is-on .hb-toggle-track { background: var(--hb-ink); }
.hb-toggle.is-on .hb-toggle-track::after { transform: translateX(16px); }
.hb-filter-help { border-bottom: 0; }
.hb-filter-help p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.55; color: var(--hb-muted); }
.hb-shop-main { min-width: 0; }
@media (max-width: 899px) {
    .hb-shop-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 16px; }
    .hb-shop-sidebar { min-width: 0; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; }
    .hb-filter-help { display: none; }
    /* Categorías como chips deslizables */
    .hb-filter:first-child { flex: 1 1 100%; min-width: 0; padding: 0 0 10px; border: 0; }
    .hb-filter:first-child summary { display: none; }
    .hb-filter-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: calc(var(--hb-gutter) * -1);
        padding-inline: var(--hb-gutter);
    }
    .hb-filter-list::-webkit-scrollbar { display: none; }
    .hb-filter-list a { margin: 0; padding: 8px 14px; border: 1px solid var(--hb-line); border-radius: 999px; background: #fff; white-space: nowrap; }
    .hb-filter-list a.is-active { border-color: var(--hb-accent-strong); }
    .hb-filter:nth-child(2) { padding: 4px 0 12px; border: 0; }
}
@media (max-width: 768px) {
    .woocommerce div.product .woocommerce-product-gallery,
    .woocommerce div.product .summary { width: 100% !important; float: none !important; }
    .woocommerce div.product .summary { margin-top: 24px; }
}

.hb-shop-intro { margin-bottom: 20px; }
body.hb-site .hb-shop-intro h1 { margin: 0; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 800; font-stretch: 110%; letter-spacing: -0.025em; line-height: 1.08; }
.hb-shop-intro-desc { margin: 10px 0 0; max-width: 60ch; color: var(--hb-muted); }
.hb-shop-intro-desc p { margin: 0; }

.woocommerce nav.woocommerce-breadcrumb { font-size: 0.85rem; color: var(--hb-muted); margin-bottom: 12px !important; }
.woocommerce nav.woocommerce-breadcrumb a { color: var(--hb-ink-2); text-decoration: none; }
.woocommerce nav.woocommerce-breadcrumb a:hover { color: var(--hb-accent-strong); }
.hb-shop-main .woocommerce-result-count { float: none; display: inline-block; margin: 0; color: var(--hb-muted); font-size: 0.9rem; line-height: 40px; }
.hb-shop-main .woocommerce-ordering { float: right; margin: 0 0 8px; }
.woocommerce .woocommerce-ordering select { height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--hb-line); border-radius: var(--hb-r-sm); background-color: #fff; color: var(--hb-ink); font: 500 0.9rem var(--hb-font); }

/* Grilla y tarjetas del catálogo */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) !important;
    gap: 20px !important;
    margin: 20px 0 48px !important;
    padding: 0 !important;
    clear: both;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: #fff;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-r-md);
    overflow: hidden;
    text-align: left !important;
    transition: border-color 200ms ease, box-shadow 240ms ease;
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { display: block; }
.woocommerce ul.products li.product img {
    display: block;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    margin: 0 !important;
    padding: 18px;
    box-sizing: border-box;
    object-fit: contain;
    background: #fff;
    border-bottom: 1px solid var(--hb-line);
    transition: transform 400ms var(--hb-ease-out);
}
.woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .posted_in { display: block; margin: 0 0 2px; font-size: 0.8rem; font-weight: 600; color: var(--hb-muted) !important; text-transform: none; letter-spacing: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 4px 0 0 !important;
    padding: 0 18px;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hb-ink) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .woocommerce-loop-product__title { padding: 0; }
.woocommerce ul.products li.product .price {
    display: block;
    margin: 10px 0 0 !important;
    padding: 0 18px;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--hb-ink) !important;
    font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .price { padding: 0; }
.woocommerce ul.products li.product .hb-stock { margin: 6px 18px 0; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .hb-stock { margin: 6px 0 0; }
.woocommerce ul.products li.product .hb-spec-bullets { margin: 10px 18px 0; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .hb-spec-bullets { margin: 10px 0 0; }
.woocommerce ul.products li.product .hb-loop-whatsapp { margin: 0 18px 18px; width: auto; padding-block: 11px; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .hb-loop-whatsapp { margin: auto 0 0; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .hb-stock { margin-bottom: 16px; }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { flex: 1 1 auto; display: flex; flex-direction: column; text-decoration: none; padding-bottom: 16px; }
.woocommerce ul.products li.product a.ajax_add_to_cart,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product form.cart,
.woocommerce ul.products li.product .ast-on-card-button { display: none !important; }
.woocommerce ul.products li.product .onsale { top: 12px !important; left: 12px !important; right: auto !important; margin: 0 !important; min-height: 0; min-width: 0; padding: 4px 10px; border-radius: 999px; background: var(--hb-accent-strong) !important; color: #fff !important; font-size: 0.78rem; font-weight: 700; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
    .woocommerce ul.products li.product:hover { border-color: oklch(0.8 0.012 258); box-shadow: var(--hb-shadow); }
    .woocommerce ul.products li.product:hover img { transform: scale(1.03); }
}

.hb-spec-bullets { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.hb-spec-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; line-height: 1.4; color: var(--hb-ink-2); }
.hb-spec-bullets .hb-ico { width: 15px; height: 15px; margin-top: 2px; color: var(--hb-accent-strong); }

/* Paginado */
.woocommerce nav.woocommerce-pagination { text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers { display: inline-flex; gap: 6px; border: 0 !important; margin: 0; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul.page-numbers a,
.woocommerce nav.woocommerce-pagination ul.page-numbers span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border: 1px solid var(--hb-line); border-radius: var(--hb-r-sm); background: #fff; color: var(--hb-ink); font-weight: 600; text-decoration: none; }
.woocommerce nav.woocommerce-pagination ul.page-numbers span.current { background: var(--hb-ink); border-color: var(--hb-ink); color: #fff; }
.woocommerce nav.woocommerce-pagination ul.page-numbers a:hover { background: var(--hb-surface); }

/* Ficha de producto */
.woocommerce div.product { padding-block: 24px 56px; }
.woocommerce div.product .woocommerce-product-gallery { border: 1px solid var(--hb-line); border-radius: var(--hb-r-lg); overflow: hidden; background: #fff; }
.woocommerce div.product .woocommerce-product-gallery img { object-fit: contain; }
.woocommerce div.product .flex-control-thumbs { padding: 12px !important; display: flex; gap: 8px; }
.woocommerce div.product .flex-control-thumbs li { width: 64px !important; margin: 0 !important; }
.woocommerce div.product .flex-control-thumbs img { border: 1px solid var(--hb-line); border-radius: 8px; padding: 4px; opacity: 1 !important; }
.woocommerce div.product .flex-control-thumbs img.flex-active { border-color: var(--hb-ink); }
.hb-product-meta-row { margin-bottom: 10px; font-size: 0.875rem; font-weight: 600; color: var(--hb-muted); }
.hb-product-meta-row a { color: var(--hb-accent-strong) !important; text-decoration: none !important; }
.woocommerce div.product .product_title { margin: 0; color: var(--hb-ink) !important; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem) !important; font-weight: 800; font-stretch: 106%; letter-spacing: -0.02em; line-height: 1.12; }
.woocommerce div.product .summary .price { margin: 16px 0 !important; color: var(--hb-ink) !important; font-size: 1.85rem !important; font-weight: 800; font-variant-numeric: tabular-nums; }
.woocommerce div.product .summary .hb-spec-bullets { margin: 0 0 24px; gap: 8px; }
.woocommerce div.product .summary .hb-spec-bullets li { font-size: 0.95rem; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--hb-ink-2); line-height: 1.65; margin-bottom: 24px; }
.woocommerce div.product .hb-product-whatsapp { width: 100%; max-width: 380px; padding-block: 16px; font-size: 1rem; }
.hb-assure { list-style: none; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hb-line); display: grid; gap: 10px; }
.hb-assure li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--hb-ink-2); }
.hb-assure .hb-ico { width: 20px; height: 20px; color: var(--hb-accent-strong); }
.woocommerce div.product form.cart,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product .quantity,
.woocommerce div.product .product_meta { display: none !important; }

.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 4px; margin: 48px 0 24px !important; padding: 0 !important; border-bottom: 1px solid var(--hb-line); overflow-x: auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 16px !important; color: var(--hb-muted) !important; font-weight: 600; box-shadow: inset 0 -2px 0 transparent; transition: color 200ms ease, box-shadow 200ms ease; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hb-ink) !important; box-shadow: inset 0 -2px 0 var(--hb-accent); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 75ch; line-height: 1.7; }
.woocommerce .related.products > h2, .woocommerce .up-sells > h2 { font-size: 1.6rem; font-weight: 800; font-stretch: 108%; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hb-hero-tile { animation: none; }
    .hb-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 20px; }
    .hb-marquee-track img[aria-hidden="true"] { display: none; }
    .hb-marquee { -webkit-mask-image: none; mask-image: none; }
    .hb-drawer[open], .hb-drawer.is-closing { animation-duration: 1ms; }
    .hb-drawer::backdrop { animation: none; }
    .hb-pcard-media img, .hb-cat-media img, .hb-hero-tile img,
    .woocommerce ul.products li.product img { transition: none; }
}

/* Listas de WooCommerce sin viñetas; enlaces de tarjetas sin subrayado */
.woocommerce ul.products li.product a { text-decoration: none !important; }
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .flex-control-thumbs { list-style: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { text-decoration: none !important; }

/* Catálogo en celular: dos productos por fila, tarjeta compacta */
@media (max-width: 559px) {
    .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .woocommerce ul.products li.product img { padding: 10px; }
    .woocommerce ul.products li.product .astra-shop-summary-wrap { padding: 12px; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.9rem !important; }
    .woocommerce ul.products li.product .price { font-size: 1rem !important; }
    .woocommerce ul.products li.product .hb-spec-bullets { display: none; }
    .woocommerce ul.products li.product .hb-loop-whatsapp { padding: 9px 8px; font-size: 0.875rem; }
}

/* ---------- Menú "Categorías" (panel con todas, cualquier cantidad) ---------- */
.hb-catmenu { position: relative; flex-shrink: 0; margin-left: -12px; }
.hb-catmenu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--hb-ink);
    font: 500 0.9rem var(--hb-font);
    cursor: pointer;
    box-shadow: inset 0 -2px 0 transparent;
    transition: box-shadow 200ms ease, background-color 200ms ease;
}
.hb-catmenu-btn .hb-ico { width: 18px; height: 18px; }
.hb-catmenu-btn .hb-catmenu-caret { width: 14px; height: 14px; transition: transform 200ms var(--hb-ease-out); }
.hb-catmenu-btn[aria-expanded="true"] .hb-catmenu-caret { transform: rotate(180deg); }
.hb-catmenu-btn:hover { background: var(--hb-surface); }
.hb-catmenu-btn.is-current { box-shadow: inset 0 -2px 0 var(--hb-accent); }
.hb-catmenu-panel {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    z-index: var(--hb-z-sticky);
    width: min(640px, calc(100vw - 2 * var(--hb-gutter)));
    padding: 16px;
    border: 1px solid var(--hb-line);
    border-radius: 0 0 var(--hb-r-md) var(--hb-r-md);
    background: #fff;
    box-shadow: var(--hb-shadow);
    transform-origin: top left;
    animation: hb-pop 180ms var(--hb-ease-out);
}
.hb-catmenu-panel[hidden] { display: none; }
@keyframes hb-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.hb-catmenu-panel ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; }
.hb-catmenu-panel li a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--hb-ink) !important;
    text-decoration: none !important;
    font-size: 0.93rem;
    transition: background-color 160ms ease;
}
.hb-catmenu-panel li a small { color: var(--hb-muted); font-variant-numeric: tabular-nums; }
.hb-catmenu-panel li a:hover { background: var(--hb-surface); }
.hb-catmenu-panel li a.is-current { background: var(--hb-accent-soft); font-weight: 600; }
.hb-catmenu-panel > .hb-link { padding: 4px 12px; }

/* ---------- Tarjeta del catálogo (cuerpo único, en orden) ---------- */
.woocommerce ul.products li.product .astra-shop-summary-wrap { display: none !important; }
.woocommerce ul.products li.product .hb-loop-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.woocommerce ul.products li.product .hb-loop-cat { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--hb-muted); }
.woocommerce ul.products li.product .hb-loop-title { margin: 4px 0 0 !important; padding: 0 !important; }
.woocommerce ul.products li.product .hb-loop-title a { color: var(--hb-ink) !important; }
.woocommerce ul.products li.product .hb-loop-title a::after { content: ""; position: absolute; inset: 0; }
.woocommerce ul.products li.product .hb-loop-price { padding: 0 !important; margin: 8px 0 0 !important; }
.woocommerce ul.products li.product .hb-loop-body .hb-spec-bullets { margin: 10px 0 0; }
.woocommerce ul.products li.product .hb-loop-body .hb-stock { margin: 10px 0 16px; }
.woocommerce ul.products li.product .hb-loop-body .hb-loop-whatsapp { position: relative; z-index: 1; margin: auto 0 0; }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { flex: 0 0 auto; padding-bottom: 0; }
.woocommerce ul.products li.product .button:not(.hb-loop-whatsapp) { display: none !important; }

/* ---------- Ficha: sin repetir descripción ni categoría ---------- */
.woocommerce div.product .summary:has(.hb-spec-bullets) .woocommerce-product-details__short-description { display: none; }
.woocommerce div.product .summary .single-product-category { margin-bottom: 8px; font-size: 0.875rem; font-weight: 600; }
.woocommerce div.product .summary .single-product-category a { color: var(--hb-accent-strong) !important; text-decoration: none !important; }
.woocommerce div.product .summary .product_meta { display: none !important; }

@media (max-width: 559px) {
    .woocommerce ul.products li.product .hb-loop-body { padding: 12px; }
    .woocommerce ul.products li.product .hb-loop-body .hb-spec-bullets { display: none; }
    .woocommerce ul.products li.product .hb-loop-title { font-size: 0.9rem !important; }
}

/* ---------- Libro de reclamaciones ---------- */
.hb-lr-wrap { max-width: 880px; }
.hb-lr-provider { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0 0 28px; padding: 18px 22px; border: 1px solid var(--hb-line); border-radius: var(--hb-r-md); background: var(--hb-surface); }
.hb-lr-provider div { min-width: 0; }
.hb-lr-provider dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hb-muted); }
.hb-lr-provider dd { margin: 2px 0 0; color: var(--hb-ink); font-weight: 600; }
.hb-lr-alert { margin: 0 0 24px; padding: 12px 16px; border-radius: var(--hb-r-sm); background: oklch(0.96 0.03 27); color: oklch(0.45 0.17 27); font-weight: 600; }
.hb-lr-form { display: grid; gap: 28px; }
.hb-lr-form fieldset { margin: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--hb-line); border-radius: var(--hb-r-lg); background: #fff; box-shadow: var(--hb-shadow); min-width: 0; }
.hb-lr-form legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 0; font-size: 1.15rem; font-weight: 800; font-stretch: 108%; color: var(--hb-ink); }
.hb-lr-form legend + * { clear: both; }
.hb-lr-form legend span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hb-ink); color: #fff; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.hb-lr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.hb-lr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hb-lr-field.is-full { grid-column: 1 / -1; }
.hb-lr-field > label, .hb-lr-label { font-size: 0.875rem; font-weight: 600; color: var(--hb-ink); }
.hb-lr-form input[type="text"], .hb-lr-form input[type="email"], .hb-lr-form input[type="tel"], .hb-lr-form select, .hb-lr-form textarea {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border: 1px solid oklch(0.84 0.01 258) !important; border-radius: var(--hb-r-sm) !important;
    background: #fff !important; color: var(--hb-ink) !important; font: 400 1rem var(--hb-font); box-shadow: none !important;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hb-lr-form select { height: 48px; }
.hb-lr-form textarea { resize: vertical; }
.hb-lr-form input:focus, .hb-lr-form select:focus, .hb-lr-form textarea:focus { outline: none; border-color: var(--hb-ink) !important; box-shadow: 0 0 0 3px oklch(0.6 0.14 245 / 0.28) !important; }
.hb-lr-field.has-error input, .hb-lr-field.has-error select, .hb-lr-field.has-error textarea { border-color: oklch(0.55 0.19 27) !important; }
.hb-lr-error { margin: 0; color: oklch(0.5 0.19 27); font-size: 0.85rem; font-weight: 500; }
.hb-lr-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; font-weight: 500; color: var(--hb-ink-2); line-height: 1.5; cursor: pointer; }
.hb-lr-check input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--hb-ink); }
.hb-lr-check a { color: var(--hb-accent-strong); }
.hb-lr-minor { display: none; }
.hb-lr-minor.is-open { display: flex; }
.hb-lr-seg { display: flex; gap: 8px; }
.hb-lr-seg label, .hb-lr-cards label { position: relative; cursor: pointer; border: 1px solid oklch(0.84 0.01 258); border-radius: var(--hb-r-sm); background: #fff; transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.hb-lr-seg label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; font-weight: 600; color: var(--hb-ink); }
.hb-lr-seg input, .hb-lr-cards input { accent-color: var(--hb-ink); }
.hb-lr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.hb-lr-cards label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 16px; }
.hb-lr-cards input { grid-row: 1 / 3; margin: 3px 0 0; width: 18px; height: 18px; }
.hb-lr-cards strong { color: var(--hb-ink); }
.hb-lr-cards span { color: var(--hb-muted); font-size: 0.9rem; line-height: 1.45; }
.hb-lr-seg label:has(input:checked), .hb-lr-cards label:has(input:checked) { border-color: var(--hb-ink); background: var(--hb-accent-soft); box-shadow: inset 0 0 0 1px var(--hb-ink); }
.hb-lr-seg label:has(input:focus-visible), .hb-lr-cards label:has(input:focus-visible) { box-shadow: 0 0 0 3px oklch(0.6 0.14 245 / 0.28); }
@media (hover: hover) { .hb-lr-seg label:hover, .hb-lr-cards label:hover { border-color: var(--hb-ink); } }
.hb-lr-form > .hb-btn { justify-self: start; }
.hb-lr-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hb-lr-notes { margin: 36px 0 0; padding: 20px 22px 20px 40px; border-radius: var(--hb-r-md); background: var(--hb-surface); color: var(--hb-muted); font-size: 0.88rem; line-height: 1.55; }
.hb-lr-notes li + li { margin-top: 6px; }
.hb-lr-notes strong { color: var(--hb-ink); }
.hb-lr-done { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; padding: 20px 22px; border-radius: var(--hb-r-md); background: var(--hb-ok-soft); }
.hb-lr-done .hb-ico { flex-shrink: 0; width: 30px; height: 30px; color: var(--hb-ok); }
body.hb-site .hb-lr-done h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--hb-ink); }
.hb-lr-done p { margin: 6px 0 0; color: var(--hb-ink-2); line-height: 1.55; }
.hb-lr-sheet { padding: clamp(16px, 3vw, 28px); border: 1px solid var(--hb-line); border-radius: var(--hb-r-lg); background: #fff; overflow-x: auto; }
.hb-lr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; }
@media (max-width: 600px) {
    .hb-lr-grid, .hb-lr-cards { grid-template-columns: 1fr; }
    .hb-lr-sheet th, .hb-lr-sheet td { display: block; width: auto !important; }
    .hb-lr-sheet th[style*="width"] { border-bottom: 0 !important; padding-bottom: 0 !important; }
}
.hb-footer a.hb-footer-book { display: inline-flex; align-items: center; gap: 8px; }
.hb-footer-book .hb-ico { width: 18px; height: 18px; color: var(--hb-silver); }

@media print {
    body.hb-site .hb-header, body.hb-site .hb-footer, .hb-fab, .hb-crumbs, .hb-lr-actions, .hb-lr-done .hb-ico, #hb-drawer { display: none !important; }
    .hb-lr-sheet { border: 0; padding: 0; }
    .hb-sec { padding-block: 0 !important; }
}