/* ===========================================================
   KiFixCenter - Paleta tomada del logo
   =========================================================== */
:root {
    --hr-navy: #0a1f5c;        /* azul marino del logo */
    --hr-navy-dark: #061645;
    --hr-blue: #1a3aa8;        /* azul intermedio */
    --hr-cyan: #4dc4ff;        /* azul claro / cyan brillo del logo */
    --hr-cyan-soft: #a8e0ff;
    --hr-bg: #f5f8fc;
    --hr-surface: #ffffff;
    /* Segunda superficie: recuadros de aviso/instrucciones dentro de una tarjeta.
       DEBE existir también en modo oscuro; si falta, el recuadro se queda claro
       mientras el texto se vuelve claro y no se lee nada. */
    --hr-surface-2: #f5f8fc;
    --hr-text: #0b1330;
    --hr-muted: #5c6a85;
    --hr-border: #d9e2ef;
    --hr-success: #16a34a;
    --hr-danger: #dc2626;
    --hr-warning: #d97706;
    --hr-shadow: 0 4px 18px rgba(10, 31, 92, 0.08);
    --hr-shadow-hover: 0 8px 24px rgba(10, 31, 92, 0.16);
    --hr-radius: 10px;
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] {
    --hr-navy: #4dc4ff;
    --hr-navy-dark: #7dd4ff;
    --hr-blue: #4dc4ff;
    --hr-cyan: #7dd4ff;
    --hr-cyan-soft: #b8e8ff;
    --hr-bg: #0f1117;
    --hr-surface: #1a1f2e;
    --hr-surface-2: #141a28;
    --hr-text: #e8edf5;
    --hr-muted: #8899bb;
    --hr-border: #2a3350;
    --hr-success: #34d399;
    --hr-danger: #f87171;
    --hr-warning: #fbbf24;
    --hr-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    --hr-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] body { background: var(--hr-bg); color: var(--hr-text); }
[data-theme="dark"] .navbar { background: linear-gradient(135deg, #060d1f 0%, #0a1428 100%); }
[data-theme="dark"] .table { background: var(--hr-surface); }
[data-theme="dark"] .table th { background: #1a2040; color: var(--hr-text); }
[data-theme="dark"] .table tfoot td { background: #1a2040; color: var(--hr-text); }
[data-theme="dark"] .table td { color: var(--hr-text); }
[data-theme="dark"] .form-control { background: #1a2040; color: var(--hr-text); border-color: var(--hr-border); }
[data-theme="dark"] .form-control::placeholder { color: var(--hr-muted); }
[data-theme="dark"] footer.footer { background: #060d1f; }
[data-theme="dark"] .product-card { background: var(--hr-surface); }
[data-theme="dark"] .live-card { background: var(--hr-surface); }
[data-theme="dark"] .pdp-wrap { background: var(--hr-surface); }
[data-theme="dark"] .search-dropdown { background: #1a2040; border-color: var(--hr-border); }
[data-theme="dark"] .search-dropdown-item:hover, [data-theme="dark"] .sdi-active { background: #2a3350; }
[data-theme="dark"] select.form-control option { background: #1a2040; color: var(--hr-text); }

/* Botón toggle dark mode */
.dark-toggle {
    background: none;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}
.dark-toggle:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Geist (Vercel) es la base. Variable, cargada vía Google Fonts en el head.
       Si no llega (red o adblock), Segoe UI / Roboto rellenan sin cambios de layout. */
    font-family: 'Geist', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'ss01', 'cv11';  /* alt a y "1" tabular de Geist */
    color: var(--hr-text);
    background: var(--hr-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Tipografía display: títulos grandes con presencia editorial. */
h1, h2, h3,
.hm-hero-title,
.pdp-title {
    letter-spacing: -0.02em;    /* tracking negativo para headlines */
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;         /* evita viudas (palabra sola en última línea) */
}
h1 { font-weight: 800; letter-spacing: -0.03em; }
h4, h5, h6 { letter-spacing: -0.01em; }
p, li { text-wrap: pretty; }

/* ── Números tabulares para datos: stats del hero, precios, cantidades.
      Sin esto, el ancho de cada dígito varía y las columnas bailan al cambiar. */
.hm-stat-n,
.price, .price-now, .price-old,
.badge-stock, .cart-qty, .order-total,
td.num, .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'cv11'; }

/* Mono para números técnicos (SKU, folio, códigos). */
.sku, code, kbd, samp,
.folio, .guia, .code-num {
    font-family: 'Geist Mono', ui-monospace, 'JetBrains Mono', monospace;
    font-feature-settings: 'ss02';
}

a { color: var(--hr-blue); text-decoration: none; }
a:hover { color: var(--hr-cyan); }

img { max-width: 100%; height: auto; display: block; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Header / Navbar ---------- */
/* ══════════════════════════════════════════════════
   SITE HEADER — 3 niveles: topbar / mainbar / menubar
   ══════════════════════════════════════════════════ */
.site-header {
    position: sticky; top: 0; z-index: 200;
    box-shadow: 0 2px 16px rgba(10,31,92,.22);
}

/* ── Topbar ── */
.topbar { background: #060d1f; color: rgba(255,255,255,.85); font-size: 12px; }
.topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 6px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar-msgs { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar-msgs span { white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.topbar-links { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.topbar-links a { color: rgba(255,255,255,.72); font-size: 12px; transition: color .15s; }
.topbar-links a:hover { color: var(--hr-cyan-soft); }

/* ── Mainbar ── */
.mainbar { background: #fff; border-bottom: 1px solid #e5e7eb; }
.mainbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 13px 20px;
    display: flex; align-items: center; gap: 20px;
}

/* Buscador */
.nav-search {
    flex: 1; max-width: 580px;
    display: flex; border: 2px solid var(--hr-navy);
    border-radius: 8px; overflow: hidden; transition: box-shadow .2s;
}
.nav-search:focus-within { box-shadow: 0 0 0 3px rgba(14,165,233,.3); }
.nav-search input {
    flex: 1; border: none; border-right: 1px solid #e5e7eb;
    padding: 11px 16px; font-size: 14.5px; outline: none;
    background: #fff; color: var(--hr-text);
}
.nav-search input::placeholder { color: #94a3b8; }
.nav-search button {
    background: var(--hr-navy); color: #fff; border: none;
    padding: 0 22px; font-weight: 700; font-size: 13px;
    cursor: pointer; display: flex; align-items: center; gap: 7px;
    white-space: nowrap; transition: background .2s;
}
.nav-search button:hover { background: var(--hr-blue); }

/* Acciones (cuenta, favoritos, carrito) */
.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-action {
    display: flex; align-items: center; gap: 9px;
    color: #0f172a; text-decoration: none;
    padding: 8px 12px; border-radius: 8px;
    border: 1.5px solid transparent;
    transition: border-color .15s, background .15s; position: relative;
}
.header-action:hover { border-color: var(--hr-navy); background: #f1f5f9; color: var(--hr-navy); }
.header-action svg { flex-shrink: 0; }
.header-action-text { display: flex; flex-direction: column; }
.header-action-text .ha-label { font-size: 10px; color: var(--hr-muted); line-height: 1; }
.header-action-text .ha-txt  { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.header-action.cart-link .cart-badge {
    position: absolute; top: 2px; left: 28px;
    background: var(--hr-cyan); color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 800;
    padding: 1px 6px; line-height: 1.6; border: 2px solid #fff; margin: 0;
}

/* ── Menubar ── */
.menubar {
    background: linear-gradient(135deg, var(--hr-navy) 0%, #1a3aa8 100%);
    border-bottom: 3px solid var(--hr-cyan);
}
/* La tira de categorías no cabe: se desplaza. Como la barra de scroll está
   oculta, el borde se difumina y aparecen flechas para que se note que hay más
   (antes el último nombre quedaba cortado a media palabra y parecía un error). */
.menubar-wrap { position: relative; max-width: 1200px; margin: 0 auto; }
.menubar-wrap::before,
.menubar-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 54px;
    pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 1;
}
.menubar-wrap::before { left: 0;  background: linear-gradient(90deg, var(--hr-navy) 35%, transparent); }
.menubar-wrap::after  { right: 0; background: linear-gradient(270deg, #1a3aa8 35%, transparent); }
.menubar-wrap.hay-izq::before,
.menubar-wrap.hay-der::after { opacity: 1; }

.menubar-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.18); color: #fff;
    font-size: 17px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.menubar-arrow:hover { background: rgba(255,255,255,.34); }
.menubar-arrow:focus-visible { outline: 2px solid var(--hr-cyan-soft); outline-offset: 2px; }
.menubar-arrow.izq { left: 3px; }
.menubar-arrow.der { right: 3px; }
.menubar-arrow[hidden] { display: none; }

.menubar-inner {
    padding: 0 20px;
    display: flex; align-items: center;
    overflow-x: auto; scrollbar-width: none;
    scroll-behavior: smooth;
}
.menubar-inner::-webkit-scrollbar { display: none; }
.menubar-inner a {
    color: rgba(255,255,255,.82); font-weight: 600; font-size: 13px;
    letter-spacing: .3px; white-space: nowrap;
    padding: 13px 15px; border-bottom: 3px solid transparent; margin-bottom: -3px;
    transition: color .15s, background .15s, border-color .15s;
}
.menubar-inner a:hover { color: #fff; background: rgba(255,255,255,.1); border-bottom-color: var(--hr-cyan-soft); }
.menubar-inner a.active { color: #fff; border-bottom-color: var(--hr-cyan-soft); background: rgba(255,255,255,.07); }
.menubar-inner a.menu-right { margin-left: auto; }

/* Dark mode overrides */
[data-theme="dark"] .mainbar { background: #121826; border-color: #1e2a3a; }
[data-theme="dark"] .header-action { color: #e2e8f0; }
[data-theme="dark"] .header-action:hover { background: #1e2a3a; border-color: #4dc4ff; }
[data-theme="dark"] .header-action-text .ha-txt { color: #e2e8f0; }
[data-theme="dark"] .nav-search { border-color: #4dc4ff; }
[data-theme="dark"] .nav-search input { background: #1e2a3a; color: #e2e8f0; border-color: #2a3a50; }
[data-theme="dark"] .topbar { background: #040810; }

/* La barra de categorías era la ÚNICA franja del encabezado sin versión
   oscura: seguía con linear-gradient(var(--hr-navy) → #1a3aa8) y en modo
   noche --hr-navy vale cian claro, así que quedaba una tira eléctrica entre
   la barra superior y la página, ambas casi negras. Ahora sigue el mismo
   tono que el resto del encabezado y el cian se reserva para la categoría
   activa, que es donde sí aporta. */
[data-theme="dark"] .menubar {
    background: linear-gradient(135deg, #0d1422 0%, #16203a 100%);
    border-bottom-color: #24304a;
}
[data-theme="dark"] .menubar-wrap::before { background: linear-gradient(90deg, #0d1422 35%, transparent); }
[data-theme="dark"] .menubar-wrap::after  { background: linear-gradient(270deg, #16203a 35%, transparent); }
[data-theme="dark"] .menubar-inner a { color: rgba(226,232,240,.78); }
[data-theme="dark"] .menubar-inner a:hover,
[data-theme="dark"] .menubar-inner a.active { color: #fff; background: rgba(77,196,255,.10); border-bottom-color: var(--hr-cyan); }
[data-theme="dark"] .menubar-arrow { background: rgba(255,255,255,.12); }
[data-theme="dark"] .menubar-arrow:hover { background: rgba(255,255,255,.24); }

/* ── Dark mode: sidebar catálogo ── */
[data-theme="dark"] .sidebar {
    background: #0f1823;
    border: 1px solid #1e2a3a;
    box-shadow: none;
}
[data-theme="dark"] .sidebar h3 {
    color: #4dc4ff;
    border-color: #1e3a50;
}
[data-theme="dark"] .sidebar li a {
    color: #94a3b8;
}
[data-theme="dark"] .sidebar li a:hover {
    background: #1e2a3a;
    color: #4dc4ff;
}
[data-theme="dark"] .sidebar li a.active {
    background: #0a2a42;
    color: #4dc4ff;
    font-weight: 600;
}
/* Lista de categorías en modo oscuro */
[data-theme="dark"] .cat-list { scrollbar-color: #1e2a3a transparent; }
[data-theme="dark"] .cat-list::-webkit-scrollbar-thumb { background: #1e2a3a; }
[data-theme="dark"] .cat-list .cat-conteo { background: #16202e; color: #7c8ba1; }
[data-theme="dark"] .cat-list li a:hover { border-left-color: #4dc4ff; }
[data-theme="dark"] .cat-list li a:hover .cat-conteo { background: #24344a; color: #4dc4ff; }
[data-theme="dark"] .cat-list li a.active { border-left-color: #4dc4ff; }
[data-theme="dark"] .cat-list li a.active .cat-conteo { background: #10405f; color: #7dd4ff; }
[data-theme="dark"] .empty-state {
    background: #0f1823;
    border: 1px solid #1e2a3a;
}
[data-theme="dark"] .empty-state h2 { color: #e2e8f0; }

/* ── Dark mode: cards y formularios generales ── */
[data-theme="dark"] .card-form { background: #0f1823; border: 1px solid #1e2a3a; }
[data-theme="dark"] .search-dropdown { background: #121826; border-color: #1e2a3a; }
[data-theme="dark"] .search-dropdown-item:hover { background: #1e2a3a; }

/* ── Legacy .navbar (admin y otras páginas) ── */
.navbar {
    background: linear-gradient(135deg, var(--hr-navy) 0%, var(--hr-navy-dark) 100%);
    color: #fff; box-shadow: var(--hr-shadow); position: sticky; top: 0; z-index: 50;
}
.navbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; max-width: 1200px; margin: 0 auto; gap: 20px;
}

/* Logo: placa blanca redondeada con glow cyan. El fondo + padding viven en el
   contenedor <a>, no en el <img>. Esto garantiza el logo PERFECTAMENTE centrado:
   display:flex en el padre + display:block en la imagen cualquier aspect ratio
   queda alineado. */
.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    background: #fff;
    padding: 5px 12px;
    border-radius: 12px;
    filter: drop-shadow(0 0 8px rgba(77, 196, 255, 0.45));
    transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s;
}
.brand img {
    height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
}
.brand:hover {
    transform: translateY(-1px) scale(1.03);
    filter: drop-shadow(0 0 14px rgba(77, 196, 255, 0.75));
}
.brand:active { transform: scale(.97); transition-duration: .08s; }
/* Dark mode: refuerza el glow para despegar la placa del navbar oscuro. */
[data-theme="dark"] .brand {
    filter: drop-shadow(0 0 12px rgba(77, 196, 255, 0.6));
}
/* Una sola imagen: el fondo blanco de la placa funciona en los dos modos. */
.brand .logo-dark { display: none; }

.nav-search {
    flex: 1;
    max-width: 480px;
    display: flex;
}

.nav-search input {
    flex: 1;
    border: none;
    border-radius: var(--hr-radius) 0 0 var(--hr-radius);
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
}

.nav-search button {
    background: var(--hr-cyan);
    color: var(--hr-navy);
    border: none;
    padding: 0 18px;
    font-weight: 700;
    border-radius: 0 var(--hr-radius) var(--hr-radius) 0;
    cursor: pointer;
    transition: background 0.2s;
}
.nav-search button:hover { background: var(--hr-cyan-soft); }

/* ---------- Autocomplete Dropdown ---------- */
/* position/top/left/width son manejados por JS (position:fixed + getBoundingClientRect) */
.search-dropdown {
    background: #fff;
    border: 1px solid var(--hr-border);
    border-radius: 0 0 var(--hr-radius) var(--hr-radius);
    box-shadow: 0 12px 32px rgba(10,31,92,0.18);
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}
.search-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--hr-text);
    border-bottom: 1px solid var(--hr-border);
    transition: background 0.12s;
}
.search-dropdown-item:last-child { border-bottom: none; }
.search-dropdown-item:hover,
.search-dropdown-item.sdi-active { background: var(--hr-bg); color: var(--hr-text); }
.sdi-img-box {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--hr-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sdi-img-box img {
    width: 42px !important;
    height: 42px !important;
    object-fit: cover;
    display: block !important;
}
.sdi-text { flex: 1; min-width: 0; }
.sdi-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--hr-text);
}
.sdi-meta { font-size: 11px; color: var(--hr-muted); margin-top: 2px; }
.sdi-price { font-size: 13px; font-weight: 700; color: var(--hr-navy); flex-shrink: 0; padding-left: 8px; }

/* Autocomplete PRO: resaltado, badge de stock, pie y estado vacío */
.sdi-name mark {
    background: #fff3bf; color: inherit; padding: 0 1px;
    border-radius: 3px; font-weight: 800;
}
[data-theme="dark"] .sdi-name mark { background: #4d4326; color: #ffe9a8; }
.sdi-stock { font-weight: 700; font-size: 10.5px; letter-spacing: .2px; }
.sdi-stock.in  { color: var(--hr-success); }
.sdi-stock.out { color: var(--hr-danger); }
.sd-empty {
    padding: 20px 16px; text-align: center; font-size: 13.5px;
    color: var(--hr-text); line-height: 1.5;
}
.sd-empty span { color: var(--hr-muted); font-size: 12px; }
.sd-footer {
    display: block; text-align: center; padding: 11px 12px;
    font-size: 13px; font-weight: 700; color: var(--hr-blue);
    text-decoration: none; border-top: 1px solid var(--hr-border);
    background: var(--hr-bg); transition: background .15s, color .15s;
    position: sticky; bottom: 0;
}
.sd-footer:hover { background: #e7eefb; color: var(--hr-navy); }
[data-theme="dark"] .sd-footer { background: #121826; border-color: #1e2a3a; }
[data-theme="dark"] .sd-footer:hover { background: #1e2a3a; color: var(--hr-cyan); }

/* Admin search wrapper */
.admin-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 400px;
}
.admin-search-wrap .form-control { width: 100%; }
.admin-search-wrap .search-dropdown {
    border-top: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
}

.nav-links {
    display: flex;
    gap: 18px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}
.nav-links a:hover { border-bottom-color: var(--hr-cyan); color: var(--hr-cyan); }

.cart-link { position: relative; }
.cart-badge {
    background: var(--hr-cyan);
    color: var(--hr-navy);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    margin-left: 4px;
    vertical-align: top;
}

/* ---------- Botones ---------- */
/* Todos los botones con la MISMA altura y alineados entre sí.
   Antes .btn-outline llevaba 2px de borde y .btn-primary ninguno, así que el de
   contorno salía 4px más alto y, al ir juntos, se veían descuadrados. El borde
   transparente iguala la caja; inline-flex los alinea por su centro (y no por la
   línea base del texto, que es lo que desnivelaba los que llevan emoji). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    vertical-align: middle;
    line-height: 1.2;
    padding: 10px 18px;
    border-radius: var(--hr-radius);
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.05s, box-shadow 0.2s, background 0.2s;
    text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--hr-navy);
    color: #fff;
}
.btn-primary:hover { background: var(--hr-blue); color: #fff; box-shadow: var(--hr-shadow-hover); }

.btn-accent {
    background: var(--hr-cyan);
    color: var(--hr-navy);
}
.btn-accent:hover { background: var(--hr-cyan-soft); color: var(--hr-navy); }

.btn-outline {
    background: transparent;
    color: var(--hr-navy);
    border: 2px solid var(--hr-navy);
}
.btn-outline:hover { background: var(--hr-navy); color: #fff; }

.btn-danger { background: var(--hr-danger); color: #fff; }
/* flex (no block) para que herede el centrado de .btn ahora que es inline-flex */
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

/* ---------- Flash messages ---------- */
.flashes {
    max-width: 1200px;
    margin: 16px auto 0;
    padding: 0 20px;
}
.flash {
    padding: 12px 16px;
    border-radius: var(--hr-radius);
    margin-bottom: 10px;
    border-left: 4px solid;
    background: #fff;
    box-shadow: var(--hr-shadow);
}
.flash-success { border-color: var(--hr-success); color: #14532d; }
.flash-danger  { border-color: var(--hr-danger);  color: #7f1d1d; }
.flash-warning { border-color: var(--hr-warning); color: #78350f; }
.flash-info    { border-color: var(--hr-cyan);    color: var(--hr-navy); }

/* ---------- Hero ---------- */
/* ══════════════════════════════════════════════════
   HOMEPAGE — Hero, trust bar, categorías, secciones
   ══════════════════════════════════════════════════ */

/* ── Hero ── */
.hm-hero {
    display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center;
    background: linear-gradient(135deg, var(--hr-navy) 0%, #0d2a8c 55%, #1a3aa8 100%);
    background-image: linear-gradient(135deg, #0a1f5c 0%, #0d2a8c 55%, #1a3aa8 100%),
                      repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px);
    background-blend-mode: normal;
    color: #fff; padding: 56px max(20px, calc(50vw - 580px));
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -18px;
    border-bottom: 4px solid var(--hr-cyan);
}
.hm-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600;
    margin-bottom: 18px; letter-spacing: .2px;
}
.hm-hero-title {
    font-size: 48px; font-weight: 900; line-height: 1.08;
    margin: 0 0 16px; letter-spacing: -1px;
}
.hm-hero-accent { color: var(--hr-cyan-soft); }
.hm-hero-sub {
    font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82);
    max-width: 520px; margin: 0 0 28px;
}
.hm-hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; }
.hm-cta-primary { font-size: 15px; padding: 13px 26px; border-radius: 10px; font-weight: 800; }
.hm-cta-secondary {
    color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px;
    transition: color .15s, border-color .15s;
}
.hm-cta-secondary:hover { color: #fff; border-color: #fff; }
.hm-hero-stats { display: flex; gap: 0; align-items: center; }
.hm-stat { display: flex; flex-direction: column; padding: 0 20px; }
.hm-stat:first-child { padding-left: 0; }
.hm-stat-n { font-size: 28px; font-weight: 900; color: var(--hr-cyan-soft); line-height: 1;
             white-space: nowrap; }   /* "24-48h" rompia en "24-" / "48h" */
.hm-stat-l { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }
.hm-stat-div { width: 1px; height: 36px; background: rgba(255,255,255,.2); }

/* Icono-grid lado derecho del hero */
.hm-hero-art { display: flex; align-items: center; justify-content: center; }
.hm-icon-grid {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
    max-width: 300px;
}
.hm-icon-card {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px; width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; cursor: default;
    animation: hm-float 3s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    transition: transform .2s, background .2s;
}
.hm-icon-card:hover { background: rgba(255,255,255,.2); transform: scale(1.1); }
@keyframes hm-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* ── Trust bar ── */
.hm-trust-bar {
    background: #fff; border-bottom: 1px solid var(--hr-border);
    box-shadow: 0 2px 8px rgba(10,31,92,.06);
}
.hm-trust-bar-inner {
    max-width: 1200px; margin: 0 auto; padding: 16px 20px;
    display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
}
.hm-trust-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4;
    transition: background .15s;
}
.hm-trust-item:hover { background: var(--hr-bg); }
.hm-trust-item svg { flex-shrink: 0; color: var(--hr-navy); }
.hm-trust-item strong { color: var(--hr-navy); font-size: 13px; }
.hm-trust-item small { color: var(--hr-muted); font-size: 11.5px; }

/* ── Banners ── */
.hm-banner-link { text-decoration: none; display: block; }
.hm-banner {
    min-height: 220px; border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, var(--hr-navy), var(--hr-blue));
    background-size: cover; background-position: center;
    display: flex; align-items: center;
}
.hm-banner-overlay {
    padding: 32px 40px;
    background: linear-gradient(90deg, rgba(10,31,92,.88) 40%, transparent 100%);
    width: 100%; color: #fff;
}
.hm-banner-overlay h2 { font-size: 28px; font-weight: 900; margin: 0 0 8px; }
.hm-banner-overlay p  { font-size: 15px; margin: 0 0 18px; opacity: .9; }

/* ── Secciones generales ── */
.hm-section { margin: 36px 0; }
.hm-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; gap: 12px;
}
.hm-section-title {
    font-size: 22px; font-weight: 800; color: var(--hr-navy);
    margin: 0; display: flex; align-items: center; gap: 10px;
}
.hm-section-badge { font-size: 20px; }
.hm-see-all {
    font-size: 13px; font-weight: 700; color: var(--hr-blue);
    white-space: nowrap; transition: color .15s;
}
.hm-see-all:hover { color: var(--hr-cyan); }

/* ── Grilla de categorías ── */
.hm-cats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.hm-cat-card {
    background: var(--hr-surface); border: 1.5px solid var(--hr-border);
    border-radius: 14px; padding: 24px 16px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    text-decoration: none; color: var(--hr-text);
    transition: transform .18s, box-shadow .18s, border-color .18s;
    cursor: pointer;
}
.hm-cat-card:hover {
    transform: translateY(-4px); box-shadow: var(--hr-shadow-hover);
    border-color: var(--hr-cyan); color: var(--hr-text);
}
.hm-cat-icon { font-size: 38px; margin-bottom: 12px; line-height: 1; }
.hm-cat-name { font-size: 14px; font-weight: 700; color: var(--hr-navy); line-height: 1.3; }
.hm-cat-desc { font-size: 12px; color: var(--hr-muted); margin-top: 5px; }

/* Dark mode homepage */
[data-theme="dark"] .hm-trust-bar { background: var(--hr-surface); border-color: var(--hr-border); }
[data-theme="dark"] .hm-cat-card { background: var(--hr-surface); border-color: var(--hr-border); }
[data-theme="dark"] .hm-cat-name { color: var(--hr-navy); }
[data-theme="dark"] .hm-section-title { color: var(--hr-navy); }

/* ── Legacy .hero ── */
.hero {
    background: linear-gradient(120deg, var(--hr-navy) 0%, var(--hr-blue) 60%, var(--hr-cyan) 130%);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    border-radius: 0 0 24px 24px;
    box-shadow: var(--hr-shadow);
    margin-bottom: 28px;
}
.hero h1 {
    font-size: 38px;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
}
.hero p {
    font-size: 17px;
    opacity: 0.95;
    max-width: 640px;
    margin: 0 auto 24px;
}

/* ---------- Secciones ---------- */
section { margin: 32px 0; }
.section-title {
    font-size: 22px;
    margin: 0 0 18px;
    color: var(--hr-navy);
    border-left: 5px solid var(--hr-cyan);
    padding-left: 12px;
}

/* ---------- Grid de productos ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

.product-card {
    background: var(--hr-surface);
    border-radius: var(--hr-radius);
    overflow: hidden;
    box-shadow: var(--hr-shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s, box-shadow 0.18s;
    border: 1px solid var(--hr-border);
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--hr-shadow-hover);
    border-color: var(--hr-cyan);
}
.product-card .img-wrap {
    /* Cuadrado. Medido sobre las 1737 imagenes del disco: el 80% son
       1:1 (800x800, 1000x1000). Solo las subidas mas recientes salen
       en 16:9, y son las que aparecen primero en el catalogo porque
       ordena por novedad: muestrear ahi enganya. Con marco cuadrado y
       `contain`, el 80% llena el marco exacto y la minoria 16:9 deja
       una franja; al reves romperia 1392 fotos para arreglar unas pocas.
       El arreglo de verdad es normalizar al subir, no en CSS. */
    aspect-ratio: 1 / 1;
    /* Blanco, no gris azulado: las fotos del proveedor vienen recortadas
       sobre blanco y el fondo de color les dibujaba un marco visible. */
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.product-card .img-wrap img {
    /* `contain`, no `cover`: las imagenes son banners del proveedor con
       texto incrustado y proporciones distintas. Recortarlas cortaba el
       producto y el texto por la mitad. */
    width: 100%; height: 100%; object-fit: contain;
    padding: 4px;
    transition: transform .35s ease;
}
.product-card:hover .img-wrap img { transform: scale(1.06); }

/* ── Badges de urgencia sobre la imagen ── */
.pc-flag {
    position: absolute;
    /* Pegado a la esquina, no flotando sobre el centro de la imagen. */
    top: 6px; left: 6px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    pointer-events: none;
    z-index: 2;
}
.pc-flag-last { background: linear-gradient(135deg, #dc2626, #f97316); animation: pc-pulse 1.6s ease-in-out infinite; }
.pc-flag-new  { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.pc-flag-hot  { background: linear-gradient(135deg, #f59e0b, #d97706); }
/* Oferta: el rojo es el que más pesa en una tarjeta, por eso va aquí y no en
   las demás etiquetas. */
.pc-flag-off  { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.pc-antes { font-size: 12px; color: var(--hr-muted); margin-top: -4px; }
.pc-antes s { opacity: .85; }
@keyframes pc-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* ── Carrusel de marcas (marquee infinito, puro CSS) ── */
.brands-strip {
    overflow: hidden;
    padding: 22px 0;
    background: linear-gradient(90deg, #0a1f5c, #12309e 50%, #0a1f5c);
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.brands-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: brands-scroll 32s linear infinite;
}
.brands-strip:hover .brands-track { animation-play-state: paused; }
.brand-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 9px 24px;
    border: 1.5px solid rgba(255,255,255,.28);
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: #fff;
    background: rgba(255,255,255,.06);
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.brand-chip:hover {
    border-color: var(--hr-cyan);
    background: rgba(77,196,255,.2);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(77,196,255,.35);
}
@keyframes brands-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .pc-flag-last { animation: none; }
}

/* ── Reveal al hacer scroll ── */
.reveal-init {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease;
}
.reveal-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1; transform: none; transition: none; }
}
.product-card .info {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.product-card .name {
    /* Tres lineas SIEMPRE: con min-height las tarjetas de nombre corto
       dejaban un hueco y los botones de cada columna quedaban a distinta
       altura. Con altura fija la parrilla se alinea sola. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
    /* Tinta, no color de marca. El acento se reserva para la ACCION: si
       nombre, precio y boton comparten color, nada senala donde pulsar. */
    color: var(--hr-text);
    font-size: 15px;
    line-height: 1.3;
    height: calc(1.3em * 3);
}
.product-card .price {
    font-size: 18px;
    font-weight: 700;
    color: var(--hr-blue);
}
.product-card .badge-stock {
    font-size: 11px;
    /* #16a34a sobre blanco da 3.30:1 y AA exige 4.5 para 11px.
       #15803d da 4.54:1. En oscuro se mantiene --hr-success (8.5:1). */
    color: #15803d;
    font-weight: 600;
}
.product-card .badge-stock.out { color: var(--hr-danger); }
.product-card .actions {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    gap: 6px;
}
.product-card .actions .btn {
    /* La etiqueta nunca parte: mas vale reducir el tipo que un boton de
       tres lineas. */
    white-space: nowrap;
    font-size: 13px;
}

/* ---------- Detalle de producto ---------- */
.product-detail {
    display: grid;
    grid-template-columns: 52% 1fr;
    gap: 36px;
    align-items: start;
    background: #fff;
    border-radius: var(--hr-radius);
    padding: 28px;
    box-shadow: var(--hr-shadow);
}
.product-detail .img-wrap {
    background: #eef3fb;
    border-radius: var(--hr-radius);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.product-detail .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-detail h1 { color: var(--hr-navy); margin: 0 0 8px; font-size: 26px; }
.product-detail .price { font-size: 36px; color: var(--hr-blue); font-weight: 800; margin: 12px 0; letter-spacing: -0.5px; }
.product-detail .desc { color: var(--hr-muted); line-height: 1.6; }

/* ===== Galería estilo AliExpress: thumbs izquierda · imagen grande derecha ===== */
.pdp-gallery {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

/* Columna izquierda: tira vertical sin scrollbar, altura = imagen grande */
.pdp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    max-height: 520px;          /* fallback CSS — JS lo reemplaza con el valor exacto */
}
.pdp-thumbs::-webkit-scrollbar { display: none; }

.pdp-thumb {
    width: 84px;
    height: 84px;
    min-height: 84px;           /* evita que flex los comprima */
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    outline: 1px solid #dde1e7;
    cursor: pointer;
    flex-shrink: 0;
    display: block;
    opacity: .72;
    transition: outline-color .15s, border-color .15s, opacity .15s;
    box-sizing: border-box;
}
.pdp-thumb:hover  { opacity: 1; outline-color: #a0aec0; }
.pdp-thumb.active { border-color: var(--hr-cyan); outline-color: var(--hr-cyan); opacity: 1; }

/* Columna derecha: imagen principal */
.pdp-main {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #f5f7fa;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    user-select: none;
}
.pdp-main > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .18s ease;
}

/* Flechas: solo visibles al hover sobre la imagen */
.pdp-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.9);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    opacity: 0;
    transition: opacity .15s, background .12s;
    padding: 0;
    color: #1a2035;
}
.pdp-main:hover .pdp-arrow { opacity: 1; }
.pdp-arrow:hover            { background: #fff; }
.pdp-arrow-prev { left: 10px; }
.pdp-arrow-next { right: 10px; }

/* Contador "3 / 21" */
.pdp-badge {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 99px;
    pointer-events: none;
}

/* 1 sola imagen: ocultar todo lo innecesario */
.pdp-gallery.pdp-single .pdp-arrow  { display: none !important; }
.pdp-gallery.pdp-single .pdp-badge  { display: none !important; }
.pdp-gallery.pdp-single .pdp-thumbs { display: none !important; }
.pdp-gallery.pdp-single             { grid-template-columns: 1fr; }

/* Info lateral — aspecto ventas */
.pdp-info { display: flex; flex-direction: column; gap: 0; }
.pdp-category-link { font-size: 12px; color: var(--hr-muted); text-decoration: none; letter-spacing: .4px; text-transform: uppercase; }
.pdp-category-link:hover { color: var(--hr-cyan); }
.pdp-title { color: var(--hr-navy); font-size: 24px; font-weight: 800; margin: 6px 0 4px; line-height: 1.25; }
.pdp-sku   { color: var(--hr-muted); font-size: 12px; margin: 0 0 10px; }
.pdp-price-wrap { margin: 14px 0; }
.pdp-price { font-size: 38px; font-weight: 900; color: var(--hr-blue); letter-spacing: -1px; line-height: 1; }
.pdp-price-label { font-size: 13px; color: var(--hr-muted); margin-top: 2px; }
.pdp-stock-ok  { display: inline-flex; align-items: center; gap: 5px; color: #16a34a; font-weight: 700; font-size: 14px; background: #f0fdf4; padding: 5px 12px; border-radius: 99px; border: 1px solid #bbf7d0; margin-bottom: 14px; }
.pdp-stock-out { display: inline-flex; align-items: center; gap: 5px; color: #dc2626; font-weight: 700; font-size: 14px; background: #fef2f2; padding: 5px 12px; border-radius: 99px; border: 1px solid #fecaca; margin-bottom: 14px; }
.pdp-add-wrap  { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.pdp-qty { width: 70px; text-align: center; font-size: 16px; font-weight: 600; }
.btn-add-cart { font-size: 16px; padding: 12px 28px; font-weight: 700; border-radius: 10px; }
.pdp-wishlist-btn { background: none; border: 1.5px solid var(--hr-border); border-radius: 10px; padding: 10px 16px; cursor: pointer; font-size: 16px; transition: border-color .15s, background .15s; }
.pdp-wishlist-btn:hover, .pdp-wishlist-btn.active { border-color: #ef4444; background: #fff0f0; }
.pdp-divider { border: none; border-top: 1px solid var(--hr-border); margin: 18px 0; }
.pdp-desc { color: var(--hr-muted); line-height: 1.65; font-size: 14px; }

@media (max-width: 720px) {
    .product-detail { grid-template-columns: 1fr; }
    .pdp-arrow { opacity: 1; width: 34px; height: 34px; font-size: 22px; }
    .pdp-gallery { grid-template-columns: 1fr; }
    .pdp-thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none !important; height: auto !important; }
    .pdp-thumb { width: 60px; height: 60px; min-height: 60px; }
    .pdp-price { font-size: 30px; }
    .hero h1 { font-size: 28px; }
    .navbar-inner { flex-wrap: wrap; }

    /* ── Responsive: nuevo header 3 niveles ── */
    .topbar-msgs { gap: 10px; font-size: 11px; }
    .mainbar-inner { gap: 10px; flex-wrap: wrap; padding: 10px 14px; }
    .nav-search { order: 3; flex-basis: 100%; max-width: 100%; }
    .header-actions { gap: 2px; }
    .header-action-text { display: none; }
    .header-action { padding: 8px 10px; }

    /* ── Responsive: homepage ── */
    .hm-hero { grid-template-columns: 1fr; padding: 36px 20px 32px; text-align: center; }
    .hm-hero-art { display: none; }
    .hm-hero-title { font-size: 32px; }
    .hm-hero-ctas { justify-content: center; }
    .hm-hero-stats { justify-content: center; }
    .hm-trust-bar-inner { grid-template-columns: 1fr 1fr; }
    .hm-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .hm-section-title { font-size: 18px; }

    /* Topbar también oculto en portrait móvil para ganar espacio */
    .topbar { display: none; }
}

/* ── Landscape móvil: header ultra compacto ── */
@media (max-width: 1024px) and (orientation: landscape) {
    .topbar { display: none; }
    .mainbar-inner { padding: 5px 14px; gap: 10px; }
    .menubar-inner a { padding: 7px 10px; font-size: 12px; }
    .header-action-text { display: none; }
    .header-action { padding: 6px 8px; }
    .nav-search input { padding: 7px 12px; font-size: 13px; }
}

/* ---------- Formularios ---------- */
.card-form {
    background: #fff;
    max-width: 460px;
    margin: 40px auto;
    border-radius: var(--hr-radius);
    box-shadow: var(--hr-shadow);
    padding: 32px;
    border-top: 4px solid var(--hr-cyan);
}
.card-form h1 {
    color: var(--hr-navy);
    margin: 0 0 8px;
    font-size: 24px;
    text-align: center;
}
.card-form .subtitle {
    text-align: center;
    color: var(--hr-muted);
    margin-bottom: 22px;
}

.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hr-navy);
    margin-bottom: 6px;
}
.form-control {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--hr-radius);
    border: 1px solid var(--hr-border);
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
    outline: none;
    border-color: var(--hr-cyan);
    box-shadow: 0 0 0 3px rgba(77, 196, 255, 0.25);
}
textarea.form-control { resize: vertical; min-height: 100px; }

.form-error { color: var(--hr-danger); font-size: 12px; margin-top: 4px; }
.form-foot {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--hr-muted);
}

/* ---------- Tabla de carrito / pedidos ---------- */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--hr-radius);
    overflow: hidden;
    box-shadow: var(--hr-shadow);
}
.table th, .table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--hr-border);
}
.table th {
    background: var(--hr-navy);
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table tr:last-child td { border-bottom: none; }
.table tfoot td { font-weight: 700; background: #f5f8fc; }

/* Imágenes dentro de tablas (admin): mantienen su tamaño fijo y NO se encogen a
   0 cuando la tabla se comprime en móvil (el max-width:100% global las aplastaba). */
.table td img { max-width: none; }
/* Contenedor para tablas anchas: se desplazan horizontal en vez de romper la página. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Los items del grid deben poder encogerse (min-width:auto por defecto los hace
   desbordar en móvil); esto permite que el contenido ancho scrollee en su caja. */
.shop-layout > * { min-width: 0; }

.qty-input {
    width: 60px;
    padding: 6px;
    text-align: center;
    border: 1px solid var(--hr-border);
    border-radius: 6px;
}

/* ---------- Estados (badges) ---------- */
.status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.status-pendiente { background: #fef3c7; color: #92400e; }
.status-pagado    { background: #d1fae5; color: #065f46; }
.status-enviado   { background: #dbeafe; color: #1e3a8a; }
.status-entregado { background: #c7d2fe; color: #312e81; }
.status-cancelado { background: #fee2e2; color: #991b1b; }

/* ---------- Footer ---------- */
.footer {
    background: var(--hr-navy-dark);
    color: #c8d6ef;
    margin-top: 60px;
    padding: 28px 20px;
    text-align: center;
    font-size: 13px;
}
.footer a { color: var(--hr-cyan); }

/* ---------- Filtros / barra lateral categorías ---------- */
.shop-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
}
.sidebar {
    background: #fff;
    border-radius: var(--hr-radius);
    box-shadow: var(--hr-shadow);
    padding: 18px;
    height: fit-content;
}
.sidebar h3 {
    margin: 0 0 10px;
    color: var(--hr-navy);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--hr-cyan);
    padding-bottom: 8px;
}
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li a {
    display: block;
    padding: 6px 4px;
    color: var(--hr-text);
    border-radius: 6px;
}
.sidebar li a:hover, .sidebar li a.active {
    background: var(--hr-cyan-soft);
    color: var(--hr-navy);
}

/* ── Lista de categorías ──
   Eran 31 nombres sueltos, alineados a la izquierda y sin jerarquía: se leía
   como un volcado de la base de datos. Ahora cada renglón es una fila con el
   nombre y su número de productos, la activa lleva una barra de color, y la
   lista tiene alto máximo con scroll propio para no empujar el filtro fuera
   de la pantalla. */
.cat-list {
    max-height: 420px;
    overflow-y: auto;
    margin: 0 -4px 0 0 !important;
    padding-right: 4px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--hr-border) transparent;
}
.cat-list::-webkit-scrollbar { width: 6px; }
.cat-list::-webkit-scrollbar-thumb { background: var(--hr-border); border-radius: 99px; }
.cat-list::-webkit-scrollbar-track { background: transparent; }

.cat-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px 7px 11px;
    font-size: 13.5px;
    line-height: 1.35;
    border-radius: 7px;
    border-left: 3px solid transparent;
    transition: background .13s, color .13s, border-color .13s;
}
.cat-list .cat-nombre { min-width: 0; }
.cat-list .cat-conteo {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hr-muted);
    background: var(--hr-bg);
    border-radius: 99px;
    padding: 2px 8px;
    transition: background .13s, color .13s;
}
.cat-list li a:hover {
    background: var(--hr-bg);
    border-left-color: var(--hr-cyan);
    color: var(--hr-navy);
}
.cat-list li a.active {
    background: var(--hr-cyan-soft);
    border-left-color: var(--hr-navy);
    color: var(--hr-navy);
    font-weight: 700;
}
.cat-list li a.active .cat-conteo { background: rgba(255,255,255,.75); color: var(--hr-navy); }
.cat-list li a:hover .cat-conteo { background: #fff; color: var(--hr-navy); }

@media (max-width: 720px) {
    .shop-layout { grid-template-columns: 1fr; }
}

/* ── Tablet / iPad (721–1024px) ──
   El sitio caía en el layout de escritorio apretado (el iPad vertical mide
   768–834px, justo arriba del corte de celular). Esta capa lo adapta. */
@media (min-width: 721px) and (max-width: 1024px) {
    /* Catálogo: apilar el filtro lateral para que los productos usen todo el ancho
       (antes quedaba 1 sola columna con imagen gigante). */
    .shop-layout { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    /* Al apilar, el filtro quedaba ENCIMA de los productos: en un iPad vertical
       se abría el catálogo con ~870px de filtros y ni una foto a la vista. Es
       el mismo arreglo que ya existía para celular, que nunca llegó aquí. */
    .shop-layout > .sidebar { order: 2; margin-top: 24px; }
    .cat-list { max-height: 300px; }
    /* El buscador es flex:1 con overflow:hidden: en este rango el botón
       «Buscar» se recortaba o desaparecía. Ocultar las etiquetas de los
       iconos libera ~215px sin crecer el alto del encabezado pegajoso. */
    .header-action-text { display: none; }
    /* Admin: miniaturas de producto más grandes, fáciles de ver en el iPad. */
    .tbl-products td:nth-child(1) img,
    .inv-tbl td img { width: 88px !important; height: 88px !important; }
    .tbl-products td:nth-child(1),
    .inv-tbl td:first-child { width: 96px; }
}

/* ---------- Avisos ---------- */
.empty-state {
    background: #fff;
    border-radius: var(--hr-radius);
    padding: 40px 20px;
    text-align: center;
    color: var(--hr-muted);
    box-shadow: var(--hr-shadow);
}
.empty-state h2 { color: var(--hr-navy); margin-top: 0; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    /* En movil sube: sobre la tarjeta de producto tapaba el boton de
       comprar de la ultima fila visible. */
    z-index: 100;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.wa-float:hover {
    transform: scale(1.1) rotate(-8deg);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.65);
    color: #fff;
}
.wa-float svg { width: 32px; height: 32px; }
.wa-float-tooltip {
    position: absolute;
    right: 72px;
    background: var(--hr-navy);
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateX(8px);
    box-shadow: var(--hr-shadow);
}
.wa-float:hover .wa-float-tooltip { opacity: 1; transform: translateX(0); }

/* (galería migrada a .pdp-gallery — ver sección producto-detalle) */

/* ---------- Estrellas (rating) ---------- */
.stars {
    display: inline-flex;
    gap: 2px;
    font-size: 16px;
    line-height: 1;
}
.star-on { color: #f59e0b; }
.star-off { color: #d4d4d8; }

/* ---------- Tags de compatibilidad ---------- */
.compat-tag {
    display: inline-block;
    background: #eef3fb;
    color: var(--hr-navy);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin: 2px 4px 2px 0;
    border: 1px solid var(--hr-border);
}

/* ---------- Banner / Carrusel ---------- */
.banner-carousel {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--hr-shadow);
    margin-bottom: 28px;
}
.banner-slide {
    display: flex;
    align-items: center;
    background: linear-gradient(120deg, var(--hr-navy), var(--hr-blue), var(--hr-cyan));
    color: #fff;
    padding: 40px;
    min-height: 220px;
}
.banner-slide-text { flex: 1; }
.banner-slide-text h2 { margin: 0 0 8px; font-size: 28px; }
.banner-slide-text p { margin: 0 0 14px; opacity: 0.92; }
.banner-slide-img {
    flex: 0 0 auto;
    max-width: 40%;
    max-height: 200px;
    border-radius: 12px;
    overflow: hidden;
}

/* ---------- Wishlist button ---------- */
.wishlist-btn {
    background: #fff;
    border: 1px solid var(--hr-border);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--hr-muted);
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.wishlist-btn:hover { color: #e11d48; border-color: #e11d48; }
.wishlist-btn.active { color: #e11d48; border-color: #e11d48; background: #fff1f2; }


/* ═══════════════════════════════════════════════════════════
   LOOK DE EVENTO — hero con más brillo y acentos de sección
   ═══════════════════════════════════════════════════════════ */

/* Título del hero: acento con degradado luminoso */
.hm-hero-accent {
    background: linear-gradient(92deg, #4dc4ff 0%, #a8e0ff 55%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* CTA principal: degradado + resplandor + destello que barre cada 3s */
.hm-cta-primary {
    background: linear-gradient(135deg, #4dc4ff 0%, #1a7ae0 100%);
    color: #fff !important;
    border: none;
    box-shadow: 0 6px 24px rgba(77, 196, 255, .45);
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.hm-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(77, 196, 255, .65);
}
.hm-cta-primary::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-20deg);
    animation: cta-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cta-shine {
    0%, 55% { left: -80%; }
    100%    { left: 140%; }
}

/* Resplandor cyan detrás de la cuadrícula de iconos */
.hm-hero-art { position: relative; }
.hm-hero-art::before {
    content: "";
    position: absolute;
    inset: -36px;
    background: radial-gradient(circle at 50% 42%, rgba(77,196,255,.38), transparent 62%);
    filter: blur(14px);
    pointer-events: none;
}
.hm-icon-grid { position: relative; }
.hm-icon-card { transition: transform .2s, border-color .2s, box-shadow .2s; cursor: default; }
.hm-icon-card:hover {
    transform: scale(1.12) rotate(-3deg);
    border-color: var(--hr-cyan);
    box-shadow: 0 6px 20px rgba(77,196,255,.4);
}

/* Badge del hero: pastilla de cristal */
.hm-hero-badge {
    backdrop-filter: blur(4px);
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
}

/* Títulos de sección: barra de acento con degradado */
.hm-section-title, .section-title {
    position: relative;
    padding-bottom: 8px;
}
.hm-section-title::after, .section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 58px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--hr-cyan), transparent);
}

/* Números del hero con brillo */
.hm-stat-n { text-shadow: 0 0 18px rgba(77,196,255,.55); }


/* ═══════════════════════════════════════════════════════════
   SISTEMA DE MOVIMIENTO GLOBAL — micro-animaciones en toda
   la plataforma (solo transform/opacity: fluidas y ligeras)
   ═══════════════════════════════════════════════════════════ */

/* Entrada suave de cada página */
main.container { animation: page-in .45s ease both; }
@keyframes page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Botones: se levantan al hover, se hunden al clic */
.btn { transition: transform .16s, box-shadow .16s, background .2s, border-color .2s, color .2s; }
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-primary:hover, .btn-accent:hover { box-shadow: 0 6px 18px rgba(26,58,168,.35); }

/* Tarjetas de producto: levitan (además del zoom de imagen) */
.product-card { transition: transform .22s ease, box-shadow .22s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--hr-shadow-hover); }

/* Tarjetas de categoría: levitan + el icono saluda */
.hm-cat-card { transition: transform .2s, box-shadow .2s, border-color .2s; }
.hm-cat-card:hover { transform: translateY(-4px); box-shadow: var(--hr-shadow-hover); }
.hm-cat-icon { display: inline-block; }
.hm-cat-card:hover .hm-cat-icon { animation: cat-wiggle .5s ease; }
@keyframes cat-wiggle {
    0%, 100% { transform: rotate(0); }
    30%      { transform: rotate(-8deg) scale(1.15); }
    60%      { transform: rotate(6deg); }
}

/* Campos de formulario: anillo de enfoque */
.form-control { transition: border-color .18s, box-shadow .18s; }
.form-control:focus { border-color: var(--hr-cyan); box-shadow: 0 0 0 3px rgba(77,196,255,.25); outline: none; }

/* Avisos flash: entran deslizándose */
.flash { animation: flash-in .35s ease both; }
@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* Tablas (admin): la fila se ilumina al pasar */
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: rgba(77,196,255,.08); }

/* WhatsApp flotante: flota y emite un anillo (imposible no verlo) */
.wa-float { animation: wa-bob 3.4s ease-in-out infinite; }
.wa-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: wa-ring 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes wa-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes wa-ring {
    from { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
    to   { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
}

/* Modales del escáner (POS, inventario, productos): pop al abrir */
[id$="scanner-modal"] > div { animation: modal-pop .22s ease; }
@keyframes modal-pop {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Contador del carrito: pop al cargar */
.cart-badge { animation: badge-pop .4s cubic-bezier(.5, 1.8, .5, 1) .3s both; }
@keyframes badge-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* Miniaturas de galería: crecen al hover */
.pdp-gal-thumb:hover { transform: scale(1.06); }
.pdp-gal-thumb { transition: transform .15s, border-color .15s, opacity .15s !important; }

/* "Ver todos" con flecha que avanza */
.hm-see-all { transition: color .15s, transform .15s; display: inline-block; }
.hm-see-all:hover { color: var(--hr-cyan); transform: translateX(3px); }


/* ═══════════════════════════════════════════════════════════
   CAPA PREMIUM — pulido extra de interacción y movimiento.
   Todo con transform/opacity (barato para la GPU) y desactivable
   con prefers-reduced-motion. Objetivo: sensación de tienda de
   primer nivel sin sacrificar rendimiento.
   ═══════════════════════════════════════════════════════════ */

/* Desplazamiento suave, selección y foco accesible de marca */
html { scroll-behavior: smooth; }
::selection { background: rgba(77,196,255,.35); color: var(--hr-navy); }
:focus-visible { outline: 2px solid var(--hr-focus); outline-offset: 2px; }

/* Barra de scroll discreta y de marca (WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #c3d2e8; border-radius: 10px; border: 3px solid var(--hr-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--hr-cyan); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3a55; border-color: var(--hr-bg); }

/* Header: gana profundidad y el logo se compacta al hacer scroll */
.site-header { transition: box-shadow .3s ease; will-change: box-shadow; }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(10,31,92,.30); }
.mainbar .brand img, .navbar .brand img { transition: transform .15s, filter .15s, height .25s ease; }
.site-header.is-scrolled .brand img { height: 52px; }

/* Entrada escalonada del hero (solo si el usuario acepta movimiento) */
@media (prefers-reduced-motion: no-preference) {
    .hm-hero-badge { animation: hero-rise .6s .05s ease both; }
    .hm-hero-title { animation: hero-rise .6s .15s ease both; }
    .hm-hero-sub   { animation: hero-rise .6s .27s ease both; }
    .hm-hero-ctas  { animation: hero-rise .6s .39s ease both; }
    .hm-hero-stats { animation: hero-rise .6s .51s ease both; }
    .hm-hero-art   { animation: hero-pop  .8s .40s ease both; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-pop  { from { opacity: 0; transform: scale(.94); }        to { opacity: 1; transform: none; } }

/* Botones: barrido de luz al pasar + hundido táctil (ripple lo pone el JS) */
.btn { position: relative; overflow: hidden; }
.btn-primary::before, .btn-accent::before, .btn-outline:hover::before {
    content: ""; position: absolute; top: 0; left: -125%;
    width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover::before, .btn-accent:hover::before, .btn-outline:hover::before { left: 145%; }
.btn-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,.5); transform: scale(0);
    animation: btn-ripple .6s ease-out; pointer-events: none;
}
@keyframes btn-ripple { to { transform: scale(2.4); opacity: 0; } }

/* Iconos del header: pequeño rebote al pasar */
.header-action svg { transition: transform .2s ease; }
.header-action:hover svg { transform: translateY(-2px) scale(1.08); }

/* Tarjeta de producto: pista "Ver producto" que sube al pasar */
.product-card .img-wrap::after {
    content: "Ver producto →";
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 26px 12px 10px; text-align: center;
    font-size: 12px; font-weight: 800; letter-spacing: .4px; color: #fff;
    background: linear-gradient(transparent, rgba(10,31,92,.85));
    transform: translateY(101%); opacity: 0;
    transition: transform .3s ease, opacity .3s ease; pointer-events: none; z-index: 1;
}
.product-card:hover .img-wrap::after { transform: none; opacity: 1; }

/* Botón "volver arriba" flotante (abajo-izquierda, no choca con WhatsApp) */
.to-top {
    position: fixed; left: 22px; bottom: 22px; z-index: 300;
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hr-navy), var(--hr-blue));
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(10,31,92,.42);
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
    transition: opacity .3s, transform .3s, visibility .3s, background .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); background: linear-gradient(135deg, var(--hr-blue), var(--hr-cyan)); }
.to-top svg { width: 22px; height: 22px; }

/* Reveal al hacer scroll: curva más elegante + un pelín de escala */
.reveal-init {
    opacity: 0; transform: translateY(24px) scale(.985);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal-in { opacity: 1; transform: none; }

/* Respeto total a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn-primary::before, .btn-accent::before, .btn-outline::before,
    .product-card .img-wrap::after { transition: none; }
    .btn-ripple { display: none; }
    .reveal-init { opacity: 1 !important; transform: none !important; transition: none; }
    .to-top { transition: opacity .2s; }
}


/* ── Banners: proporción correcta en celular y tableta ── */
@media (max-width: 900px) {
    .hm-banner-overlay h2 { font-size: 24px; }
    /* Tableta: el hero pasa a una columna (la cuadrícula fija de 380px
       desbordaba 24px el ancho de la página entre 721 y 900px) */
    .hm-hero { grid-template-columns: minmax(0, 1fr); }
    .hm-hero-art { display: none; }
}
@media (max-width: 720px) {
    .hm-banner { min-height: 170px; border-radius: 12px; }
    .hm-banner-overlay {
        padding: 18px 20px;
        background: linear-gradient(90deg, rgba(10,31,92,.85) 55%, rgba(10,31,92,.15) 100%);
    }
    .hm-banner-overlay h2 { font-size: 19px; }
    .hm-banner-overlay p  { font-size: 13px; margin-bottom: 12px; }
    .hm-banner-overlay .btn { font-size: 13px; padding: 8px 16px; }
}

/* ============================================================
   MODO OSCURO — tinta legible sobre los colores de marca
   ------------------------------------------------------------
   En oscuro --hr-navy, --hr-blue y --hr-cyan pasan a ser tonos CLAROS
   (son el color de acento del logo). Por eso los botones "se perdían":
   .btn-accent quedaba azul claro sobre azul claro y .btn-primary blanco
   sobre azul claro. Encima de esos fondos la tinta debe ser OSCURA.
   ============================================================ */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .btn-accent:hover,
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .cart-badge,
[data-theme="dark"] .header-action.cart-link .cart-badge,
[data-theme="dark"] .nav-search button {
    color: #0d1117;
}
/* OJO: .sidebar li a:hover NO va aquí — ya tiene su propio fondo oscuro en
   modo noche, así que ponerle tinta oscura lo dejaría negro sobre negro. */

/* Chips y cajas con fondo claro fijo → versión oscura */
[data-theme="dark"] .compat-tag {
    background: #232b3f;
    color: var(--hr-text);
}
[data-theme="dark"] .nav-search input {
    background: #1a2040;
    color: var(--hr-text);
}
[data-theme="dark"] .sd-footer:hover,
[data-theme="dark"] .header-action:hover {
    background: #1e2a3a;
    color: var(--hr-text);
}

/* El globito del botón de WhatsApp usa el color de marca de fondo: en oscuro
   ese color es claro, así que el texto blanco no se leía. */
[data-theme="dark"] .wa-float-tooltip { color: #0d1117; }

/* ═══════════════════════════════════════════════════════════════════════
   PULIDO — bloque aditivo, va al FINAL a propósito.
   Todo lo de aquí gana por orden de cascada sin editar las capas de arriba,
   así que revertirlo es borrar este bloque. Nada usa nombres de Bootstrap.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Pantalla de pago por transferencia (SPEI) ──
   Esta plantilla usaba 20 clases .spei-* que NO existían en ninguna hoja: la
   CLABE salía como texto corrido y el botón principal como enlace subrayado.
   Es donde el cliente teclea una cuenta bancaria, así que necesita leerse
   sin esfuerzo y verse de la casa. */
.spei-wrap { max-width: 760px; margin: 0 auto; }
.spei-tips, .spei-review, .spei-picker, .spei-warn, .spei-upload {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    color: var(--hr-text);
}
.spei-warn { border-left: 4px solid var(--hr-warning); }
.spei-upload { border-left: 4px solid var(--hr-cyan); }
.spei-review { border-left: 4px solid var(--hr-success); }

.spei-card {
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: 14px;
    box-shadow: var(--hr-shadow);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.spei-card-top { height: 5px; background: linear-gradient(90deg, var(--hr-navy), var(--hr-cyan)); }
.spei-card-inner { padding: 18px 20px; }

.spei-bank { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.spei-bank-badge {
    background: var(--hr-navy); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .06em;
    padding: 4px 10px; border-radius: 6px;
}
[data-theme="dark"] .spei-bank-badge { color: #0d1117; }
.spei-bank-name { font-size: 17px; font-weight: 800; color: var(--hr-text); }
.spei-holder { font-size: 13.5px; color: var(--hr-muted); margin-bottom: 10px; }

.spei-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 11px 0; border-top: 1px solid var(--hr-border);
}
.spei-lbl {
    display: block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--hr-muted);
    margin-bottom: 2px;
}
/* Monoespaciada y espaciada: una CLABE se teclea dígito por dígito */
.spei-val {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px; letter-spacing: .09em; color: var(--hr-text);
    word-break: break-all;
}
.spei-copy {
    flex: 0 0 auto; cursor: pointer;
    background: var(--hr-bg); color: var(--hr-navy);
    border: 1.5px solid var(--hr-border); border-radius: 8px;
    padding: 8px 14px; font-size: 12.5px; font-weight: 700;
    min-height: 38px; transition: background .13s, border-color .13s;
}
.spei-copy:hover { background: var(--hr-cyan-soft); border-color: var(--hr-cyan); }
.spei-copy:focus-visible { outline: 2px solid var(--hr-cyan); outline-offset: 2px; }

.spei-amount { display: flex; flex-wrap: wrap; gap: 22px; }
.spei-total {
    display: block; font-size: 26px; font-weight: 900;
    color: var(--hr-navy); letter-spacing: -.5px; line-height: 1.1;
}

/* ── Móvil: que el catálogo se vea como catálogo ── */
@media (max-width: 720px) {
    /* Una sola columna daba un producto por pantallazo con foto gigante */
    .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .product-card .info { padding: 10px; }
    .product-card .name { font-size: 14px; }
    .product-card .price { font-size: 16px; }
    .cat-list { max-height: 240px; }

    /* Los filtros iban ANTES que los productos: ~700px de estorbo. Con order
       solo en el sidebar basta, los demás hijos del grid quedan en 0. */
    .shop-layout > .sidebar { order: 2; margin-top: 24px; }

    /* Área de toque de 44px en todo lo que decide la venta */
    .product-card .actions { gap: 8px; }
    .product-card .actions .btn { min-height: 44px; padding: 11px 10px; font-size: 13px; }
    .table .btn-sm, .btn-sm { min-height: 44px; padding: 10px 14px; font-size: 13.5px; }
    /* 16px evita el zoom automático de Safari al enfocar el campo */
    .qty-input { width: 74px; min-height: 44px; font-size: 16px; }
    .spei-copy { min-height: 44px; }
    .pdp-gal-main .g-arrow { width: 44px !important; height: 44px !important; }
}

/* En escritorio, igualar altura del campo de cantidad con su botón */
.qty-input { min-height: 38px; }
.table .btn-sm { min-height: 34px; }

/* ── Restos de modo oscuro ──
   En oscuro --hr-navy y --hr-blue valen el MISMO cian, así que los títulos de
   sección se pintaban igual que los enlaces y todo parecía clicable. */
[data-theme="dark"] .hm-section-title,
[data-theme="dark"] .hm-cat-name,
[data-theme="dark"] .hm-trust-item strong { color: var(--hr-text); }

/* Los avisos tenían el fondo blanco fijo: en oscuro el texto claro encima
   quedaba ilegible (el informativo, que es el más común, a 1.9 de contraste) */
.flash { background: var(--hr-surface); color: var(--hr-text); }
[data-theme="dark"] .flash-success { color: #86efac; }
[data-theme="dark"] .flash-danger  { color: #fca5a5; }
[data-theme="dark"] .flash-warning { color: #fcd34d; }
[data-theme="dark"] .flash-info    { color: var(--hr-cyan-soft); }

/* Carrito: el descuento y el «¡GRATIS!» llevan el color en línea y quedaban
   a ~1.3 de contraste sobre el pie oscuro de la tabla. Se corrige por
   selector de atributo para no tocar la plantilla. */
[data-theme="dark"] .table tfoot td[style*="065f46"],
[data-theme="dark"] .table tfoot td[style*="166534"] { color: #86efac !important; }
[data-theme="dark"] .table tfoot td[style*="92400e"] { color: #fcd34d !important; }

/* ═══════════════════════════════════════════════════════════
   MODAL DE CONFIRMACIÓN  (reemplaza los confirm() del navegador)
   Los confirm() nativos se ven distintos en cada navegador, no
   respetan el modo oscuro y no se pueden redactar bien. Este es
   uno solo, reusable, que se dispara con el atributo data-confirm.
   ═══════════════════════════════════════════════════════════ */
.hr-modal-back {
    position: fixed;
    inset: 0;
    background: rgba(6, 13, 31, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Visible de entrada: la aparición es una animación, no una transición.
       Si el navegador no llega a animar (pestaña en segundo plano, equipo
       cargado), el modal se ve igual en vez de quedarse transparente
       tapando la pantalla. */
    opacity: 1;
    animation: hr-modal-fade .16s ease;
}
@keyframes hr-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.hr-modal-back.cerrando { opacity: 0; transition: opacity .15s ease; }

.hr-modal {
    background: var(--hr-surface);
    color: var(--hr-text);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
    width: 100%;
    max-width: 420px;
    padding: 24px 24px 20px;
    border: 1px solid var(--hr-border);
    animation: hr-modal-pop .18s cubic-bezier(.2, .9, .3, 1);
}
@keyframes hr-modal-pop {
    from { transform: translateY(10px) scale(.97); }
    to   { transform: none; }
}

.hr-modal-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 23px;
    margin-bottom: 14px;
    background: rgba(217, 119, 6, .13);
}
.hr-modal.is-danger .hr-modal-icon { background: rgba(220, 38, 38, .13); }

.hr-modal-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--hr-text);
    line-height: 1.3;
}
.hr-modal-text {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--hr-muted);
}
.hr-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.hr-modal-actions .btn { min-height: 42px; padding: 10px 20px; font-size: 14.5px; }

/* En celular los botones ocupan el ancho: se aciertan con el pulgar y el
   de cancelar queda abajo, que es donde descansa el dedo. */
@media (max-width: 480px) {
    .hr-modal { padding: 20px 18px 18px; }
    .hr-modal-actions { flex-direction: column-reverse; }
    .hr-modal-actions .btn { width: 100%; justify-content: center; }
}

/* Pastilla de calificación de las reseñas: el color viene de un diccionario
   de la plantilla, así que en oscuro se le sube el brillo en bloque. */
[data-theme="dark"] .rating-chip { filter: brightness(1.5) saturate(.85); }

/* Botón rojo en modo oscuro.
   --hr-danger se aclara a #f87171 para que los TEXTOS de error se lean sobre
   fondo oscuro, pero como FONDO de botón con letra blanca daba 2.8 de
   contraste. Los botones conservan el rojo saturado en los dos modos. */
[data-theme="dark"] .btn-danger { background: #dc2626; color: #fff; }
[data-theme="dark"] .btn-danger:hover { background: #b91c1c; }

/* ═══════════════════════════════════════════════════════════
   ESTADOS DE CONTROLES Y RITMO DE TEXTO
   Va al final a propósito: neutraliza el hover y el barrido de
   luz que se declaran más arriba (.btn:hover y .btn-*::before).
   ═══════════════════════════════════════════════════════════ */

/* Un botón deshabilitado se levantaba al pasar el ratón, cambiaba de fondo
   y le corría el destello: parecía vivo y al hacer clic no pasaba nada.
   Hay varios de verdad (carritos abandonados, subida de fotos, cotizador). */
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: none; }
.btn:disabled::before, .btn[disabled]::before { display: none; }
.form-control:disabled { background: var(--hr-surface-2); color: var(--hr-muted); cursor: not-allowed; }

/* .btn-danger era la única variante sin hover en tema claro: en oscuro y en
   el panel sí lo tenía, así que era un olvido. Afecta al «Sí, eliminar» del
   modal, al «Eliminar» del carrito y al de direcciones. */
.btn-danger:hover { background: #b91c1c; color: #fff; box-shadow: 0 6px 18px rgba(185,28,28,.35); }
.btn-danger::before {
    content: ""; position: absolute; top: 0; left: -125%;
    width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.30), transparent);
    transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-danger:hover::before { left: 145%; }

/* El botón «Buscar» no mostraba foco de teclado: .nav-search lleva
   overflow:hidden y recortaba el anillo, que va por fuera del elemento. */
.nav-search button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }

/* Validación del navegador: hasta ahora un campo mal llenado no se marcaba
   por ningún lado. :user-invalid (no :invalid) solo pinta DESPUÉS de que la
   persona escribió, así que un formulario recién abierto no sale en rojo. */
.form-control:user-invalid { border-color: var(--hr-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.form-control:user-invalid:focus { border-color: var(--hr-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.28); }

/* html/body nunca declaró line-height, así que todo párrafo sin regla propia
   caía en el ~1.2 del navegador y el texto corrido salía apretado. */
p { line-height: 1.55; }

/* El h2 del estado vacío se quedaba en el 1.5em del navegador (24px) y era
   MÁS grande que el título de la pantalla (.section-title, 22px). */
.empty-state h2 { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }

/* ═══════════════════════════════════════════════════════════
   REJILLAS DE CUENTA Y COMPRA EN CELULAR
   Las pantallas de cuenta, direcciones, envío y pago traían la
   rejilla escrita en el atributo style, sin ninguna @media: a
   375px la dirección se tecleaba en campos de 32 px y el
   documento se salía de la pantalla. El style en línea solo se
   puede vencer con !important, y por eso va así.
   Solo aplica a la tienda: la clase no existe en el panel.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .co-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════
   FOCO DE TECLADO Y BANDAS DE ANCHO COMPLETO
   ═══════════════════════════════════════════════════════════ */

/* El anillo de foco usaba --hr-cyan, un cian pensado para fondo oscuro: sobre
   el blanco de la tienda daba 1.97 de contraste, o sea casi invisible para
   quien navega con el tabulador. Ahora tiene su propia variable, oscura en
   tema claro y clara en oscuro. */
:root { --hr-focus: #0a1f5c; }
[data-theme="dark"] { --hr-focus: #7dd4ff; }

/* Excepciones: superficies que son oscuras en AMBOS temas (barras del
   encabezado, pie, hero y carrusel). Ahí el anillo navy desaparecería. */
.topbar-links a:focus-visible,
.menubar-inner a:focus-visible,
.footer a:focus-visible,
.hm-hero a:focus-visible,
.banner-slide a:focus-visible { outline-color: var(--hr-cyan-soft); }

/* Las tres bandas de la portada tenían tres anchos distintos: el hero 1200px
   (por sus márgenes negativos), la barra de confianza y la de marcas 1160px,
   y la barra de categorías de arriba el ancho completo de la pantalla. En un
   monitor ancho se veían tres escalones. Ahora las tres van de borde a borde
   y su contenido sigue alineado con el resto de la página. */
.hm-trust-bar,
.brands-strip { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* CLIP, no hidden: hidden convertiría al body en contenedor de scroll y
   rompería el encabezado pegajoso. Hace falta porque 50vw incluye el ancho
   de la barra de scroll y si no sobraría un pelo por cada lado. */
html, body { overflow-x: clip; }

/* Este relleno venía escrito en el atributo style de base.html y el hero
   copiaba su valor a mano en un margen negativo: si uno cambiaba, aparecía
   un escalón. Ahora vive en un solo lugar. */
main.container { padding-top: 18px; }

/* ═══════════════════════════════════════════════════════════
   PIE DE PÁGINA Y ANCHO DE LECTURA
   ═══════════════════════════════════════════════════════════ */

/* Las columnas del pie llegaban a 1200px mientras el contenido de la página
   llega a 1160 (.container son 1200 menos sus 20px de relleno a cada lado),
   así que el pie sobresalía 20px por lado respecto de todo lo de arriba.
   Y la línea del copyright ni siquiera estaba dentro de esa rejilla, así que
   se centraba sobre el ancho completo. Con esto las tres cosas alinean. */
.footer > div { max-width: 1160px; margin-left: auto; margin-right: auto; }

/* Las páginas de contenido (aviso de privacidad, términos, contacto) corrían
   a ~105 caracteres por renglón. Se acota SOLO el texto corrido: si se
   acotara el contenedor, se estrangularían las tablas de envíos y la
   rejilla de contacto. */
.pg-body > p,
.pg-body > ul,
.pg-body > ol { max-width: 68ch; }

/* Las cuatro tarjetas de confianza de la portada tenían :hover pero eran
   <div> muertos: ahora llevan a la página que explica cada promesa. */
.hm-trust-item { text-decoration: none; color: inherit; }

/* ══════════════════════════════════════════════════════════════════════════
   HR Tools en el CITEC 2026 — banda de portada (shop/_citec.html).

   Una sola pieza: el cartel oficial sangra por un costado y se disuelve hacia
   el texto, con los dos logotipos reales encima. Nada de miniatura con marco.

   Los azules van en LITERALES, no en `var(--hr-navy)`: en modo oscuro esa
   variable vale #4dc4ff (es CLARA) y pintaría la tarjeta de cian. Las
   variables se usan solo donde el reanclaje es deseable, o sea en los botones.

   NO lleva botón de cerrar. Se retira sola el 23 de agosto desde la plantilla.
   ══════════════════════════════════════════════════════════════════════════ */
.hm-citec {
    /* .hm-hero lleva margin-top:-18px para cancelar el relleno del contenedor,
       así que un margen de 20px aquí dejaría 2px de separación y las dos
       manchas azules se leerían como una sola. */
    margin: 0 0 calc(1.25rem + 18px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    /* La base es el azul REAL del cartel: su margen mide rgb(3,35,62), más
       oscuro y más verde que el #0a1f5c de la casa. El resplandor se desplaza
       al lado por donde entra el arte, para que la costura no invente luz. */
    background:
        radial-gradient(118% 150% at 78% 26%, rgba(41, 104, 206, .34) 0%, rgba(6, 22, 63, 0) 64%),
        linear-gradient(100deg, #05173f 0%, #071c4e 44%, #0a2464 100%);
    box-shadow:
        0 12px 32px rgba(4, 14, 44, .30),
        inset 0 0 0 1px rgba(141, 214, 255, .16);
}

/* La hoja global pone ::selection { color: var(--hr-navy) } y sobre marino
   eso queda en unos 2:1. */
.hm-citec ::selection { background: rgba(255, 255, 255, .30); color: #fff; }

/* ── Capa 1: el arte ─────────────────────────────────────────────────────
   Absoluta: no aporta altura, así que la tarjeta mide lo mismo con la imagen
   cargada, sin cargar o rota. */
.hm-citec-arte {
    position: absolute;
    inset: 0 0 0 52%;
    z-index: 0;
    pointer-events: none;
    /* Mientras la imagen no llega (o si falla) aquí no queda un hueco: queda
       el propio resplandor del cartel. */
    background: radial-gradient(88% 118% at 58% 36%, rgba(58, 124, 224, .52) 0%, rgba(5, 20, 54, 0) 72%);
    /* La máscara vive en el contenedor, así el respaldo se desvanece igual
       que la foto y la transición es la misma haya imagen o no. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 48%, rgba(0, 0, 0, .85) 72%, #000 90%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 48%, rgba(0, 0, 0, .85) 72%, #000 90%);
}
.hm-citec-cartel {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;   /* encuadre: el logotipo grande sobre la tienda */
    opacity: .90;
}

/* ── Capa 2: el velo y el haz de la costura ──────────────────────────────
   El cartel es marino y la tarjeta también: un degradado largo entre dos
   azules casi iguales se lee como una mancha sucia. Por eso la transición es
   corta y lleva encima una columna de luz cian que la vuelve un gesto. */
.hm-citec-velo {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(143, 220, 255, 0) 55.5%, rgba(143, 220, 255, .22) 61.5%, rgba(143, 220, 255, 0) 68.5%),
        linear-gradient(90deg, rgba(3, 16, 44, 0) 54%, rgba(3, 16, 44, .52) 64%, rgba(3, 16, 44, .28) 76%, rgba(3, 16, 44, .14) 90%, rgba(3, 16, 44, .18) 100%);
}

/* ── Capa 3: el mensaje ──────────────────────────────────────────────────
   El tope al 56% no es estético: es lo que mantiene el texto sobre la parte
   limpia del compuesto. */
.hm-citec-cuerpo {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 56%;
    padding: 17px 30px;
}

/* ── Los dos logotipos, uno junto al otro ── */
.hm-citec-lockup {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin: 0 0 11px;
    min-width: 0;
}
.hm-citec-marca { display: block; width: auto; min-width: 0; }
/* El del congreso va más alto a propósito: su marca es más aireada y carga
   además el nombre completo debajo. Igualar alturas de caja haría que el
   emblema de HR Tools, que es macizo, se comiera al otro. */
.hm-citec-marca--citec { height: 44px; }
/* Placa clara para HR Tools. Su logotipo es azul con filo blanco y está
   dibujado para fondo claro: suelto sobre el marino se hunde y la marca
   desaparece. El del congreso NO puede llevarla, porque su nombre va en blanco
   y sobre claro es el que se pierde — de ahí que solo uno la tenga.
   `content-box` porque la hoja pone `border-box` a todo: sin esto el relleno
   se comería la altura del logotipo en vez de agrandar la placa. */
.hm-citec-marca--hr {
    box-sizing: content-box;
    height: 46px;
    padding: 6px 10px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(4, 14, 44, .38);
}
.hm-citec-union {
    flex: 0 0 auto;
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, rgba(168, 224, 255, 0), rgba(168, 224, 255, .55), rgba(168, 224, 255, 0));
}

/* ── Estado del día: etiqueta, no pastilla. Una caja dentro de la caja
   rompería la idea de pieza continua. ── */
.hm-citec-estado {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #a8e0ff;
}
.hm-citec-punto {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8fdcff;
    box-shadow: 0 0 0 4px rgba(143, 220, 255, .20);
}

.hm-citec-titulo {
    margin: 0 0 6px;
    min-width: 0;
    font-size: clamp(19px, 2.2vw, 27px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    text-wrap: balance;
}
.hm-citec-detalle {
    margin: 0 0 10px;
    min-width: 0;
    font-size: clamp(13px, 1.15vw, 14.5px);
    line-height: 1.45;
    color: #d6e6ff;
}

.hm-citec-cuando {
    margin: 0 0 12px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #cfe0ff;
}
.hm-citec-cuando b { color: #fff; font-weight: 800; }
.hm-citec-sep { padding: 0 7px; color: rgba(168, 224, 255, .55); }
.hm-citec-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Acciones ────────────────────────────────────────────────────────────
   `flex-wrap` con `flex: 0 1 auto` y sin `white-space: nowrap`: al agrandar
   el texto los botones bajan de renglón en vez de quedar recortados por el
   `overflow: hidden` de la tarjeta, que es un recorte que no se nota. */
.hm-citec-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}
.hm-citec-btn,
.hm-citec-btn2 {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}
/* Variable y no literal, para que el hover también cambie en modo oscuro: con
   el hexadecimal puesto a mano, en oscuro el reposo y el hover eran el mismo
   color y el botón no respondía. */
.hm-citec-btn {
    background: var(--hr-cyan);
    color: #06163f;
    box-shadow: 0 6px 18px rgba(4, 14, 44, .35);
}
.hm-citec-btn:hover,
.hm-citec-btn:focus-visible { background: var(--hr-cyan-soft); color: #06163f; }

.hm-citec-btn2 {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(168, 224, 255, .42);
}
.hm-citec-btn2:hover,
.hm-citec-btn2:focus-visible { background: rgba(255, 255, 255, .18); color: #fff; }

/* El foco se dibuja FUERA del botón, sobre el marino: blanco sobre cian sería
   invisible. */
.hm-citec-btn:focus-visible,
.hm-citec-btn2:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── Modo oscuro ─────────────────────────────────────────────────────────
   La tarjeta no se aclara: se hunde. Al oscurecer la base y bajar la opacidad
   del arte, todos los contrastes solo mejoran respecto al tema claro. */
[data-theme="dark"] .hm-citec {
    background:
        radial-gradient(118% 150% at 78% 26%, rgba(34, 86, 176, .28) 0%, rgba(4, 16, 44, 0) 64%),
        linear-gradient(100deg, #04122f 0%, #05173c 44%, #071c49 100%);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .50),
        inset 0 0 0 1px rgba(125, 212, 255, .14);
}
[data-theme="dark"] .hm-citec-cartel { opacity: .74; }
[data-theme="dark"] .hm-citec-velo {
    background:
        linear-gradient(90deg, rgba(125, 212, 255, 0) 55.5%, rgba(125, 212, 255, .18) 61.5%, rgba(125, 212, 255, 0) 68.5%),
        linear-gradient(90deg, rgba(2, 10, 32, 0) 54%, rgba(2, 10, 32, .56) 64%, rgba(2, 10, 32, .34) 76%, rgba(2, 10, 32, .20) 90%, rgba(2, 10, 32, .24) 100%);
}

/* ── Tableta ─────────────────────────────────────────────────────────────
   La composición no cambia: el arte entra en el mismo 52% y el texto topa en
   el mismo 56%, y como son porcentajes la relación se conserva sola. Solo se
   aprieta el aire. */
@media (max-width: 1023px) {
    .hm-citec-cuerpo { padding: 14px 24px; }
    .hm-citec-marca--citec { height: 40px; }
    .hm-citec-marca--hr    { height: 42px; padding: 5px 8px; border-radius: 10px; }
    .hm-citec-lockup { gap: 12px; margin-bottom: 10px; }
    .hm-citec-detalle { margin-bottom: 8px; }
    .hm-citec-cuando { font-size: 12.5px; margin-bottom: 10px; }
    .hm-citec-sep { padding: 0 5px; }
}

/* ── Teléfono ────────────────────────────────────────────────────────────
   La banda gira noventa grados: deja de sangrar por la derecha y sangra por
   arriba. Misma capa, misma máscara, mismo velo. En un teléfono no hay sitio
   para dos columnas, y una máscara diagonal desde la esquina deja el título
   por debajo de 2,5:1: el arte se aparta del texto o no hay pieza que valga. */
@media (max-width: 699px) {
    .hm-citec { border-radius: 16px; }

    .hm-citec-arte {
        inset: 0 0 auto 0;
        height: 96px;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, .42) 76%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, .42) 76%, transparent 100%);
    }
    .hm-citec-cartel { object-position: 50% 30%; opacity: .80; }

    .hm-citec-velo {
        background:
            linear-gradient(180deg, rgba(143, 220, 255, 0) 62%, rgba(143, 220, 255, .16) 70%, rgba(143, 220, 255, 0) 80%),
            linear-gradient(180deg, rgba(3, 16, 44, .34) 0%, rgba(3, 16, 44, .42) 42%, rgba(3, 16, 44, .72) 66%, rgba(3, 16, 44, .28) 96%, rgba(3, 16, 44, 0) 100%);
    }
    [data-theme="dark"] .hm-citec-velo {
        background:
            linear-gradient(180deg, rgba(125, 212, 255, 0) 62%, rgba(125, 212, 255, .14) 70%, rgba(125, 212, 255, 0) 80%),
            linear-gradient(180deg, rgba(2, 10, 32, .42) 0%, rgba(2, 10, 32, .50) 42%, rgba(2, 10, 32, .76) 66%, rgba(2, 10, 32, .32) 96%, rgba(2, 10, 32, 0) 100%);
    }

    .hm-citec-cuerpo {
        max-width: none;
        padding: 60px 16px 14px;   /* 60px = el alto limpio de la banda */
    }
    .hm-citec-lockup { gap: 10px; margin-bottom: 9px; }
    .hm-citec-marca--citec { height: 34px; }
    .hm-citec-marca--hr    { height: 37px; padding: 4px 7px; border-radius: 9px; }
    .hm-citec-union { height: 24px; }
    .hm-citec-estado { font-size: 11px; letter-spacing: .07em; margin-bottom: 5px; }
    .hm-citec-titulo { font-size: 18px; line-height: 1.2; }
    .hm-citec-detalle { font-size: 13px; line-height: 1.42; margin-bottom: 8px; }
    .hm-citec-cuando { font-size: 12.5px; margin-bottom: 12px; }
    .hm-citec-btn, .hm-citec-btn2 { padding: 8px 16px; font-size: 13.5px; }
}

/* ── Teléfono estrecho ───────────────────────────────────────────────────
   Por debajo de 480px la altura ya no da para todo. Cae la frase larga: es lo
   único que el titular ya cuenta, y las dos cambian con el día. */
@media (max-width: 480px) {
    .hm-citec-detalle { display: none; }
    .hm-citec-btn, .hm-citec-btn2 { padding: 8px 13px; font-size: 13px; }
}

/* ── Movimiento ──────────────────────────────────────────────────────────
   La entrada NO toca la opacidad, a propósito: con `from { opacity: 0 }` y
   relleno `both`, cualquier cosa que congele la animación (pestaña en segundo
   plano, compositor detenido) deja el cartel invisible para siempre. Animando
   solo la escala, si la animación no llega a correr no se pierde nada. */
@media (prefers-reduced-motion: no-preference) {
    .hm-citec-cartel { animation: hm-citec-entra .7s ease both; }
    .hm-citec-btn, .hm-citec-btn2 { transition: background .18s ease, box-shadow .18s ease; }
    @keyframes hm-citec-entra {
        from { transform: scale(1.045); }
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Carrusel de promociones de la portada.

   Con un solo banner no pasa nada: se pinta y ya. Con dos o mas, giran solos
   cada 5 segundos. Las laminas se apilan en la MISMA celda de una rejilla, asi
   que la altura del carrusel es la de la lamina mas alta y no hay salto de
   maqueta al cambiar. El cruce es por opacidad; `visibility` se retrasa al
   salir para que la lamina que se va siga viendose mientras se desvanece, y
   sobre todo para que las laminas ocultas NO reciban el foco del tabulador.
   ══════════════════════════════════════════════════════════════════════════ */
.hm-carrusel {
    position: relative;
    margin: 28px 0;
}

.hm-carrusel-pista { display: grid; }
.hm-carrusel-lamina { grid-area: 1 / 1; min-width: 0; }

/* El degradado de respaldo del banner (el que se ve cuando todavía no hay foto)
   usaba `var(--hr-navy)` y `var(--hr-blue)`, y en modo oscuro esas dos variables
   se reanclan a cian: el banner salía como un bloque azul claro con el texto
   blanco encima. Aquí van fijos, porque esta superficie es oscura en los dos
   temas y el texto que lleva encima es blanco siempre.

   Los banners que SÍ tienen foto no se ven afectados: su imagen va en un
   `style=` en la etiqueta y el estilo en línea siempre gana sobre la hoja. */
.hm-banner { background-image: linear-gradient(135deg, #0a1f5c, #1a3aa8); }

.es-carrusel .hm-carrusel-lamina {
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
}
.es-carrusel .hm-carrusel-lamina.activa {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease;
}

/* ── Flechas ── */
.hm-carrusel-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: rgba(6, 22, 69, .55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    transition: background .15s ease;
}
.hm-carrusel-flecha:hover { background: rgba(6, 22, 69, .8); }
.hm-carrusel-ant { left: 10px; }
.hm-carrusel-sig { right: 10px; }

/* ── Puntos ── */
.hm-carrusel-puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.hm-carrusel-punto {
    /* El circulo se ve de 10px pero el area que se toca es de 24: en el
       telefono un blanco de 10px no se acierta. */
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hm-carrusel-punto::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    box-shadow: 0 0 0 1px rgba(6, 22, 69, .35);
    transition: background .2s ease, transform .2s ease;
}
.hm-carrusel-punto.activo::before {
    background: #fff;
    transform: scale(1.25);
}

.hm-carrusel-flecha:focus-visible,
.hm-carrusel-punto:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    /* En el telefono las flechas se comen el ancho del banner: se quedan solo
       los puntos, que ademas es el gesto que la gente ya conoce ahi. */
    .hm-carrusel-flecha { display: none; }
    .hm-carrusel-puntos { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .es-carrusel .hm-carrusel-lamina,
    .es-carrusel .hm-carrusel-lamina.activa { transition: none; }
    .hm-carrusel-flecha, .hm-carrusel-punto::before { transition: none; }
}


/* ── Auditoria visual: correcciones de movil ── */
@media (max-width: 768px) {
    /* Un boton fijo siempre tapa algo. La esquina es donde menos
       contenido hay, asi que se quedan ahi y se hacen mas chicos.
       Subirlos a 88px los ponia sobre el boton de comprar. */
    /* Los dos flotantes APILADOS en la misma esquina, no uno en cada
       lado: separados tapaban el boton de comprar de las DOS columnas
       a la vez. Juntos solo afectan a una, y el pulgar los alcanza sin
       cruzar la pantalla. El de volver arriba va translucido: es una
       ayuda, no una accion principal. */
    .wa-float { bottom: 14px; right: 14px; width: 48px; height: 48px; }
    .wa-float svg { width: 24px; height: 24px; }
    .wa-float-tooltip { display: none; }
    .to-top { bottom: 70px; right: 20px; left: auto;
              width: 36px; height: 36px; }
    .to-top.show { opacity: .55; }
    .to-top:active { opacity: 1; }
    .to-top svg { width: 18px; height: 18px; }
    /* Aire al final para que la ultima fila no quede bajo los
       flotantes. */
    main.container { padding-bottom: 72px; }
    /* El heroe ocupaba la pantalla entera y el primer producto
       quedaba a dos scrolls. Es una tienda, no una landing. */
    /* Es una tienda: el primer producto tiene que asomar en la primera
       pantalla. En movil el badge sobra, el subtitulo se acota a dos
       lineas y las cifras bajan. De ~395px de heroe a ~250px. */
    .hm-hero { padding: 18px 20px 18px; }
    .hm-hero-badge { display: none; }
    .hm-hero-title { font-size: 26px; line-height: 1.15; margin-bottom: 10px; }
    .hm-hero-sub {
        font-size: 13.5px; line-height: 1.45; margin-bottom: 16px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .hm-hero-ctas { margin-bottom: 16px; }
    .hm-stat-n { font-size: 20px; }
    .hm-stat-l { font-size: 10.5px; }
}


/* ── Filtros alcanzables en movil ──────────────────────────────────────────
   Medido en produccion: el 46.6% del trafico es movil, y el catalogo tiene
   427 productos repartidos en 31 categorias con su conteo. En una pantalla
   de 6 pulgadas la categoria es la UNICA forma practica de recorrerlo, y
   estaba despues de toda la parrilla.

   Nota sobre los otros filtros: `modelo` y `marca` consultan
   product_compatibility, y solo 4 de los 427 productos tienen filas ahi
   (marcas: cero). Por eso el panel se apoya en categoria y precio; el campo
   de modelo se queda donde estaba, sin protagonismo, hasta que haya datos
   detras. Un filtro visible que devuelve vacio es peor que uno escondido.

   No es pegajoso a proposito: .site-header ya es sticky con z-index 200 y
   alto variable (.is-scrolled encoge el logo), asi que un segundo pegajoso
   se le metia debajo y desaparecia. */
.filtros-toggle { display: none; }

@media (max-width: 1024px) {
    .filtros-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 46px;          /* area de toque completa */
        padding: 11px 14px;
        background: var(--hr-surface);
        color: var(--hr-text);
        border: 1px solid var(--hr-border);
        border-radius: var(--hr-radius);
        font: inherit;
        font-weight: 600;
        font-size: 14.5px;
        text-align: left;
        cursor: pointer;
    }
    .filtros-toggle .ft-txt {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .filtros-toggle .ft-n {
        flex-shrink: 0;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        font-size: 12px;
        font-weight: 700;
        /* --hr-cyan-soft es azul claro en los DOS temas (#a8e0ff / #b8e8ff),
           asi que el texto va en un navy fijo. Con var(--hr-navy) se rompia:
           en oscuro vale #4dc4ff y quedaba cian sobre cian. */
        background: var(--hr-cyan-soft);
        color: #06243a;
    }
    .filtros-toggle .ft-caret {
        flex-shrink: 0;
        color: var(--hr-muted);
        transition: transform .18s ease;
    }
    .filtros-toggle[aria-expanded="true"] .ft-caret { transform: rotate(180deg); }
    .filtros-toggle:focus-visible {
        outline: 2px solid var(--hr-cyan);
        outline-offset: 2px;
    }

    /* Anula el `order: 2; margin-top: 24px` de las dos reglas anteriores.
       Va al final del fichero, asi que gana por orden de aparicion sin
       necesidad de !important. */
    .shop-layout > .sidebar { order: 0; margin-top: 0; }

    /* El boton es hermano ANTERIOR del aside dentro de .shop-layout, asi que
       el combinador ~ deja que el CSS lea el estado del propio boton y no
       haga falta una clase paralela que se pueda desincronizar. */
    .filtros-toggle[aria-expanded="false"] ~ .sidebar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .filtros-toggle .ft-caret { transition: none; }
}

/* ======================================================================
   RED DE SEGURIDAD PARA CELULAR (auditoría 2026-10-04, 375 px)
   html/body llevan overflow-x:clip: lo que se sale por la derecha NO se
   puede deslizar, simplemente desaparece. Estas reglas evitan que algo
   quede fuera en primer lugar.
   ====================================================================== */
@media (max-width: 720px) {
    /* iPhone hace zoom al tocar un campo con letra < 16 px y la página
       queda descuadrada. Pasaba en 53 pantallas (buscador, filtros, POS…). */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
    select, textarea, .form-control, .nav-search input { font-size: 16px !important; }

    /* Tablas: base.html las mete en .tbl-scroll (se deslizan dentro de su
       caja). Aquí, que no recorten su propio contenido. */
    .tbl-scroll { max-width: 100%; }
    .tbl-scroll > .table { overflow: visible; }

    /* Rejillas escritas a mano ("2fr 1fr", "1fr 1fr 1fr"…) en la tienda y el
       portal de proveedores: en celular, una columna. Las que ya se adaptan
       solas (auto-fit / auto-fill / repeat(minmax)) se respetan. */
    .container [style*="grid-template-columns"]:not([style*="auto-f"]):not([style*="repeat("]):not(.keep-cols) {
        /* minmax(0,…): una columna "1fr" no encoge por debajo de su contenido
           y una tabla ancha la empujaba fuera de la pantalla */
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Textos largos (correos, URLs, claves) que empujaban la página */
    .section-title, .card-form, .empty-state, .pg-body, .container p, .container li { overflow-wrap: anywhere; }

    /* Turnstile mide 300 px fijos y no cabía en la tarjeta de login/registro */
    .card-form { padding: 22px 16px; }

    /* Tarjetas de producto: "Agregar al carrito" no cabía en una línea */
    .product-grid > * { min-width: 0; }
    .product-card .actions .btn { white-space: normal; padding: 9px 6px; }

    /* Toques cómodos (≥ 40 px) */
    .footer a { display: inline-block; padding: 9px 0; }
    .cat-list li a { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 480px) {
    .hm-trust-bar-inner { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    /* CLABE de 18 dígitos: con el espaciado el último dígito brincaba solo a
       otro renglón y era fácil copiarla mal a mano */
    .spei-val { font-size: 15px; letter-spacing: .03em; }
}


/* Aviso de "agregado al carrito" (ver base.html, agregar sin recargar).
   Colores fijos: se lee igual en modo claro y oscuro. */
.hr-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 10000;
    transform: translate(-50%, 16px); opacity: 0;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
    width: max-content; max-width: min(92vw, 480px);
    padding: 12px 18px; border-radius: 12px;
    background: #0f172a; color: #fff; font-size: 14px; line-height: 1.35;
    border-left: 4px solid #22c55e;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    transition: opacity .2s ease, transform .2s ease;
}
.hr-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.hr-toast a { color: #7dd3fc; font-weight: 700; white-space: nowrap; text-decoration: none; }
.hr-toast a:hover { text-decoration: underline; }
.hr-toast-warning, .hr-toast-danger { border-left-color: #f59e0b; }
.cart-badge.salta { animation: hr-salta .45s ease; }
@keyframes hr-salta { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (max-width: 720px) {
    /* por encima de la barra fija de compra / pago */
    .hr-toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .hr-toast { transition: none; }
    .cart-badge.salta { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   REFINAMIENTOS VISUALES — pequeñas mejoras que suman al "feel" premium.
   Añadidas tras auditoría con la skill redesign-existing-projects.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Focus ring consistente (accesibilidad). Se ve solo con teclado, no con
      mouse (gracias a :focus-visible), así que no molesta a nadie. */
:focus-visible {
    outline: 2px solid var(--hr-cyan);
    outline-offset: 2px;
    border-radius: 6px;
}
/* Botones y links ya tienen su propio ring; evita el doble marco. */
button:focus-visible, .btn:focus-visible, a.btn:focus-visible {
    outline-offset: 3px;
}

/* 2. Active state físico — todo lo clickable "cede" al presionar.
      Es sutil (2% de escala) pero da sensación de peso. Respeta reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .btn:active,
    button:not(:disabled):active,
    a.btn:active,
    .hm-cta-primary:active,
    .hm-cta-secondary:active,
    .hm-trust-item:active,
    .product-card:active {
        transform: scale(.98);
        transition-duration: .08s;
    }
}

/* 3. Transiciones estándar — curva natural (cubic-bezier), 220ms.
      Aplicado a interactivos comunes que antes cambiaban "en seco". */
.btn, button, .product-card, .hm-trust-item, .hm-cta-primary, .hm-cta-secondary,
.brand-chip, .topbar-links a, .mainbar a, .form-control, .hm-icon-card {
    transition-timing-function: cubic-bezier(.2, .8, .2, 1);
    transition-duration: .22s;
    transition-property: transform, background-color, border-color, box-shadow, color, filter;
}

/* 4. Sombras tintadas al navy del brand en lugar de negro plano.
      Las sombras negras planas se ven baratas; con el hue del fondo se funden. */
.hm-trust-item { box-shadow: 0 1px 2px rgba(10,31,92,.04); }
.hm-trust-item:hover {
    box-shadow: 0 8px 24px rgba(10,31,92,.10);
    transform: translateY(-2px);
}

/* 5. Textura sutil + sol virtual en el fondo del hero.
      - ::before = radial glow desde arriba-derecha (rompe el gradient plano).
      - ::after = ruido de alta frecuencia (quita la planicie digital).
      Ambos pointer-events none, no interfieren con nada. */
.hm-hero { position: relative; isolation: isolate; overflow: hidden; }
.hm-hero::before {
    content: '';
    position: absolute; inset: -20% -10% auto auto;
    width: 60%; height: 140%;
    background: radial-gradient(circle at 70% 30%, rgba(77,196,255,.22), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.hm-hero::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
    z-index: 0;
}
.hm-hero > * { position: relative; z-index: 1; }

/* Variación sutil en el grid de iconos: alturas alternas rompen la rigidez
   del 3x3 uniforme sin perder la cuadrícula. */
.hm-icon-card:nth-child(3n+2) { height: 92px; }
.hm-icon-card:nth-child(4n+1) { border-top-right-radius: 22px; }
.hm-icon-card:nth-child(4n+3) { border-bottom-left-radius: 22px; }

/* 6. Hero stats: números grandes con mejor peso visual, divisor más sutil. */
.hm-stat-n {
    font-weight: 700;
    letter-spacing: -0.02em;
}
.hm-stat-l {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    opacity: .72;
}
.hm-stat-div { opacity: .35; }

/* 7. Hero icon cards: menos "cuadrados AI", más tarjeta flotante.
      Variación sutil de rotación da ritmo visual sin ser un carrusel. */
.hm-icon-card {
    border-radius: 14px;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 30px rgba(5,10,30,.25);
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                background .25s, border-color .25s;
}
.hm-icon-card:hover {
    transform: translateY(-3px) rotate(-1.5deg) scale(1.03);
    background: rgba(255,255,255,.14);
    border-color: rgba(77,196,255,.35);
}
.hm-icon-card:nth-child(odd):hover { transform: translateY(-3px) rotate(1.5deg) scale(1.03); }

/* 8. Botones primarios: shift sutil al hover + leading-trim para que el texto
      quede ópticamente centrado. */
.btn-accent, .btn-primary, .hm-cta-primary {
    font-weight: 600;
    letter-spacing: -0.005em;
}
.btn-accent:hover, .btn-primary:hover, .hm-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(77,196,255,.35);
}

/* 9. Cards de producto: hover suave en vez de brusco. */
.product-card {
    transition: transform .25s cubic-bezier(.2,.8,.2,1),
                box-shadow .25s,
                border-color .25s;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(10,31,92,.12);
}

/* 10. Inputs: focus ring que use el acento del brand. */
.form-control:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--hr-cyan);
    box-shadow: 0 0 0 3px rgba(77,196,255,.18);
}

/* 11. Links de navegación: subrayado animado desde el centro al hover. */
.menubar a, .topbar-links a {
    position: relative;
}
.menubar a::after, .topbar-links a::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%; bottom: -4px;
    height: 2px;
    background: var(--hr-cyan);
    transition: left .22s cubic-bezier(.2,.8,.2,1),
                right .22s cubic-bezier(.2,.8,.2,1);
}
.menubar a:hover::after, .menubar a.active::after,
.topbar-links a:hover::after { left: 20%; right: 20%; }

/* 12. Dark mode: ajusta la textura y las sombras para que no griten. */
[data-theme="dark"] .hm-hero::after { opacity: .06; mix-blend-mode: screen; }
[data-theme="dark"] .hm-icon-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .product-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.5); }

/* 13. Empty state nuevo del catálogo: ilustración + copy accionable. */
.kf-empty {
    display: block;
    max-width: 520px;
    width: 100%;
    margin: 72px auto;
    text-align: center;
    padding: 44px 32px;
    background: var(--hr-surface);
    border: 1px solid var(--hr-border);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(10, 31, 92, .06);
}
.kf-empty-art {
    width: 160px;
    max-width: 100%;
    margin: 0 auto 18px;
    opacity: .88;
}
.kf-empty-art svg { width: 100%; height: auto; display: block; }
.kf-empty-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--hr-text);
}
.kf-empty-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--hr-muted);
    max-width: 420px;
    margin: 0 auto;
}
.kf-empty-sub a { color: var(--hr-blue); font-weight: 600; }
.kf-empty-sub a:hover { color: var(--hr-cyan); }
[data-theme="dark"] .kf-empty {
    background: var(--hr-surface);
    border-color: var(--hr-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

/* 14. Trust bar: rompe la uniformidad de 4 columnas iguales.
      Hover eleva, el ítem central es ligeramente más denso visualmente. */
.hm-trust-bar-inner { gap: 18px; }
.hm-trust-item {
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid transparent;
}
.hm-trust-item:hover {
    border-color: rgba(77, 196, 255, .35);
    background: rgba(77, 196, 255, .04);
}
.hm-trust-item svg {
    color: var(--hr-cyan);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.hm-trust-item:hover svg {
    transform: translateX(-2px) scale(1.08);
}
[data-theme="dark"] .hm-trust-item:hover { background: rgba(77, 196, 255, .08); }