/* ==========================================================================
   Fenix Home — inicio «A · Mostrador» (v9.46.0)

   Solo se encola en la plantilla fenix-home-b2b.php. Tokens propios (--h-*)
   con la misma cascada de cuatro pasos que la ficha «Vitrina»:
     1. oscuro por defecto;
     2. claro si el sistema lo pide;
     3. y 4. el modo que fija el menú en <html> (gana por especificidad
        0,3,0) o, sin JS, el del envoltorio.
   Nunca se fija data-color-mode en <main>. Solo transform/opacity animan.
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────── */

.fx-home {
    --h-bg: #0b0d10;
    --h-sup: #14171c;
    --h-sup2: #1b1f25;
    --h-sup3: #232933;
    --h-txt: #f2f4f7;
    --h-mut: #a3acb8;
    --h-bor: rgba(255, 255, 255, .09);
    --h-bor2: rgba(255, 255, 255, .18);
    --h-acc: #ff5069;
    --h-ok: #34d399;
    --h-warn: #fbbf24;
    --h-chip: rgba(255, 255, 255, .1);
    --h-wa: #25d366;
    --h-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px -2px rgba(0, 0, 0, .45);
    --h-elev: 0 30px 70px -24px rgba(0, 0, 0, .8);
    --h-vidrio: rgba(20, 23, 28, .72);

    --h-rojo: #e31937;
    --h-rojo-h: #c8102e;
    --h-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --h-gutter: clamp(16px, 4.5vw, 72px);
    --h-ancho: 1440px;
    --h-ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: light) {
    .fx-home {
        --h-bg: #f2f3f5; --h-sup: #ffffff; --h-sup2: #f6f7f9; --h-sup3: #eceef1;
        --h-txt: #12161c; --h-mut: #4b5563;
        --h-bor: rgba(16, 20, 26, .12); --h-bor2: rgba(16, 20, 26, .24);
        --h-acc: #c8102e; --h-ok: #0f7b56; --h-warn: #b45309;
        --h-chip: rgba(16, 20, 26, .06); --h-wa: #0f7a41;
        --h-sombra: 0 1px 2px rgba(16, 20, 26, .06), 0 4px 14px -2px rgba(16, 20, 26, .12);
        --h-elev: 0 30px 70px -30px rgba(16, 20, 26, .3);
        --h-vidrio: rgba(255, 255, 255, .8);
    }
}

:root[data-color-mode="dark"] .fx-home,
.fx-home[data-color-mode="dark"] {
    --h-bg: #0b0d10; --h-sup: #14171c; --h-sup2: #1b1f25; --h-sup3: #232933;
    --h-txt: #f2f4f7; --h-mut: #a3acb8;
    --h-bor: rgba(255, 255, 255, .09); --h-bor2: rgba(255, 255, 255, .18);
    --h-acc: #ff5069; --h-ok: #34d399; --h-warn: #fbbf24;
    --h-chip: rgba(255, 255, 255, .1); --h-wa: #25d366;
    --h-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px -2px rgba(0, 0, 0, .45);
    --h-elev: 0 30px 70px -24px rgba(0, 0, 0, .8);
    --h-vidrio: rgba(20, 23, 28, .72);
}

:root[data-color-mode="light"] .fx-home,
.fx-home[data-color-mode="light"] {
    --h-bg: #f2f3f5; --h-sup: #ffffff; --h-sup2: #f6f7f9; --h-sup3: #eceef1;
    --h-txt: #12161c; --h-mut: #4b5563;
    --h-bor: rgba(16, 20, 26, .12); --h-bor2: rgba(16, 20, 26, .24);
    --h-acc: #c8102e; --h-ok: #0f7b56; --h-warn: #b45309;
    --h-chip: rgba(16, 20, 26, .06); --h-wa: #0f7a41;
    --h-sombra: 0 1px 2px rgba(16, 20, 26, .06), 0 4px 14px -2px rgba(16, 20, 26, .12);
    --h-elev: 0 30px 70px -30px rgba(16, 20, 26, .3);
    --h-vidrio: rgba(255, 255, 255, .8);
}

/* ── Base ────────────────────────────────────────────────────────────── */

/* Solo la fila del logo: la del buscador ya la reserva .hada-bar-spacer. */
.hikvision-parking-page.fx-home {
    padding-top: var(--hada-bar-h, 66px);
    background: var(--h-bg);
    color: var(--h-txt);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.fx-home :is(h1, h2, h3, p, ul) { margin: 0; }
.fx-home ul { padding: 0; list-style: none; }
.fx-home :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--h-acc);
    outline-offset: 2px;
}
.fx-home__ancho {
    max-width: var(--h-ancho);
    margin: 0 auto;
    padding: 0 var(--h-gutter);
    box-sizing: border-box;
}
.fx-home__mono { font-family: var(--h-mono); font-weight: 700; }

/* Encabezado de sección */
.fx-home__sec { padding: clamp(36px, 4.5vw, 64px) 0; }
.fx-home__sec--alterna {
    background: var(--h-sup2);
    border-top: 1px solid var(--h-bor);
    border-bottom: 1px solid var(--h-bor);
}
.fx-home__cab {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-bottom: 18px;
}
.fx-home__cab-txt { min-width: 0; }
.fx-home__cab-der { display: flex; align-items: center; gap: 14px; }
.fx-home__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--h-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--h-mut);
}
.fx-home__kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--h-rojo);
}
.fx-home__kicker--sin-raya::before { display: none; }
.fx-home__h2 {
    margin-top: 8px;
    font-size: clamp(20px, 1.05rem + .6vw, 26px);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--h-txt);
}
.fx-home__sub { margin-top: 4px; font-size: 14px; color: var(--h-mut); }
.fx-home__enlace {
    font-size: 14px;
    font-weight: 600;
    color: var(--h-acc);
    white-space: nowrap;
    text-decoration: none;
}
.fx-home__enlace:hover { text-decoration: underline; }

/* Botones */
.fx-home__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s var(--h-ease), background-color .18s, color .18s, border-color .18s;
}
.fx-home__btn:active { transform: translateY(1px); }
.fx-home__btn .fx-ico { width: 24px; height: 24px; flex: 0 0 24px; }
.fx-home__btn--lleno { background: var(--h-rojo); color: #fff; border: 0; }
.fx-home__btn--lleno:hover { background: var(--h-rojo-h); color: #fff; }
/* La mancha roja del icono se pierde sobre el botón rojo: va en blanco. */
.fx-home__btn--lleno .fx-ico .bl { fill: rgba(255, 255, 255, .28); }
.fx-home__btn--fantasma { border: 1px solid var(--h-bor2); color: var(--h-txt); background: transparent; }
.fx-home__btn--fantasma:hover { background: var(--h-chip); color: var(--h-txt); }
.fx-home__btn--wa { border: 1.5px solid var(--h-wa); color: var(--h-wa); background: transparent; }
.fx-home__btn--wa:hover { background: var(--h-wa); color: var(--h-bg); }
.fx-home__btn--ok { color: var(--h-ok); border-color: var(--h-ok); }

/* ── 1. Hero ─────────────────────────────────────────────────────────── */

.fx-home .fx-home__hero {
    padding: clamp(32px, 4vw, 60px) 0 clamp(36px, 4.5vw, 64px);
    border-bottom: 1px solid var(--h-bor);
}
/* El lienzo del catálogo arranca bajo la barra fija; aquí la sección ya
   empieza debajo del menú (patrón de la ficha). */
.fx-home .fx-home__hero .fx-hero__lienzo { top: 0; height: 100%; }
.fx-home__hero-in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.fx-home__hero-txt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fx-home__pastilla {
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--fx-hero-pastilla-borde, var(--h-bor2));
    background: var(--fx-hero-pastilla, var(--h-chip));
    color: var(--h-txt);
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(8px);
}
.fx-home__h1 {
    font-size: clamp(32px, 1.6rem + 2.4vw, 54px);
    font-weight: 650;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--h-txt);
    text-shadow: var(--fx-hero-texto-sombra, none);
}
.fx-home__h1-2 { display: block; }
.fx-home__lead {
    max-width: 62ch;
    font-size: clamp(15px, .9rem + .25vw, 17px);
    color: var(--h-mut);
    text-shadow: var(--fx-hero-texto-sombra, none);
}
.fx-home__lead b { color: var(--h-txt); }
.fx-home__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* Estado de la cuenta: cuatro fichas sobre vidrio */
.fx-home__estado {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--h-bor2);
    border-radius: 18px;
    background: var(--h-vidrio);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.fx-home__ficha { min-width: 0; }
.fx-home__ficha-in {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--h-bor);
    background: var(--h-sup);
    color: var(--h-txt);
    text-decoration: none;
    transition: transform .22s var(--h-ease), border-color .2s;
}
.fx-home__ficha-in:hover { transform: translateY(-2px); border-color: var(--h-bor2); color: var(--h-txt); }
.fx-home__ficha-t {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--h-mut);
}
.fx-home__ficha-t .fx-ico { width: 24px; height: 24px; flex: 0 0 24px; color: var(--h-txt); }
.fx-home__ficha-v { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fx-home__ficha-nota { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--h-mut); }
.fx-home__ficha-a { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--h-acc); }
.fx-home__ficha--alerta .fx-home__ficha-in { border-color: var(--h-warn); }

/* Visitante: producto de la semana */
.fx-home__semana { display: block; color: var(--h-txt); text-decoration: none; }
.fx-home__plato {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--h-elev);
}
.fx-home__plato img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7%;
    box-sizing: border-box;
    transition: transform .45s var(--h-ease);
}
.fx-home__semana:hover .fx-home__plato img { transform: scale(1.03); }
.fx-home__plato-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 9px;
    border-radius: 4px;
    background: #0f7b56;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.fx-home__plato-chip--pedido { background: #4b5563; }
.fx-home__semana-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; font-size: 14px; }
.fx-home__semana-nota { color: var(--h-mut); }

/* ── Carruseles (marcado de Relacionados con los tokens del inicio) ─── */

.fx-home .fx-rel {
    --fx-bg: transparent;
    --fx-surface: var(--h-sup);
    --fx-text: var(--h-txt);
    --fx-muted: var(--h-mut);
    --fx-border: var(--h-bor2);
    --fx-primary: var(--h-rojo);
    --fx-card-w: clamp(214px, 18.5vw, 252px);
    padding: clamp(36px, 4.5vw, 64px) 0;
    border-top: 0;
    background: transparent;
}
.fx-home .fx-rel.fx-home__sec--alterna {
    background: var(--h-sup2);
    border-top: 1px solid var(--h-bor);
    border-bottom: 1px solid var(--h-bor);
}
.fx-home .fx-rel__item > .hik-product-card { height: 100%; }

.fx-home__campana {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -4px 0 16px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--h-bor2);
    border-radius: 999px;
    background: var(--h-vidrio);
    font-size: 13px;
}
.fx-home__campana .fx-ico { width: 22px; height: 22px; flex: 0 0 22px; }
.fx-home__campana span { color: var(--h-mut); }

.fx-home__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.fx-home__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--h-bor2);
    border-radius: 999px;
    color: var(--h-txt);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s, border-color .18s;
}
.fx-home__chip:hover { background: var(--h-chip); color: var(--h-txt); }
.fx-home__chip-n { color: var(--h-mut); font-weight: 500; }

/* ── Avisos y equipo ─────────────────────────────────────────────────── */

.fx-home__cuenta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}
.fx-home__avisos {
    padding: 4px 16px;
    border: 1px solid var(--h-bor);
    border-radius: 14px;
    background: var(--h-sup);
}
.fx-home__aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--h-bor);
    font-size: 14px;
}
.fx-home__aviso:first-child { border-top: 0; }
.fx-home__aviso .fx-ico { width: 26px; height: 26px; flex: 0 0 26px; }
.fx-home__aviso-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-home__aviso-txt span { font-size: 13px; color: var(--h-mut); }
.fx-home__aviso--nuevo .fx-home__aviso-txt b::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--h-rojo);
    vertical-align: middle;
}
.fx-home__aviso-cuando { font-size: 12px; color: var(--h-mut); white-space: nowrap; }
.fx-home__vacio {
    padding: 18px 16px;
    border: 1px dashed var(--h-bor2);
    border-radius: 14px;
    font-size: 14px;
    color: var(--h-mut);
}

.fx-home__asesora {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--h-bor);
    border-radius: 16px;
    background: var(--h-sup);
}
.fx-home__inicial {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--h-sup3);
    font-size: 20px;
    font-weight: 700;
}
.fx-home__inicial::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 22px;
    height: 16px;
    border-radius: 50%;
    background: var(--h-rojo);
    opacity: .9;
    transform: rotate(-15deg);
}
.fx-home__asesora-txt { flex: 1 1 200px; min-width: 0; }
.fx-home__asesora-nombre { margin-top: 4px; font-size: 17px; font-weight: 700; }
.fx-home__asesora-nota { font-size: 13px; color: var(--h-mut); line-height: 1.5; }
.fx-home__asesora-btns { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100%; }
.fx-home__asesora-btns .fx-home__btn { min-height: 44px; font-size: 14px; }

/* ── Catálogo ────────────────────────────────────────────────────────── */

.fx-home__cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.fx-home__cat {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--h-bor);
    border-radius: 12px;
    background: var(--h-sup);
    color: var(--h-txt);
    text-decoration: none;
    transition: transform .22s var(--h-ease), border-color .2s;
}
.fx-home__cat:hover { transform: translateY(-2px); border-color: var(--h-bor2); color: var(--h-txt); }
.fx-home__cat-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--h-sup2);
    color: var(--h-txt);
}
.fx-home__cat-ic .fx-ico { width: 28px; height: 28px; }
.fx-home__cat-txt { min-width: 0; }
.fx-home__cat-n { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.fx-home__cat-c { display: block; margin-top: 2px; font-size: 12px; color: var(--h-mut); }
.fx-home__cat-c b { color: var(--h-acc); font-weight: 700; }
.fx-home__marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--h-mut);
}
.fx-home__marcas .fx-home__kicker { margin-right: 6px; }
.fx-home__marcas a { color: var(--h-txt); text-decoration: none; font-weight: 600; }
.fx-home__marcas a:hover { text-decoration: underline; }

/* ── Aprende ─────────────────────────────────────────────────────────── */

.fx-home__aprende {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}
.fx-home__aprende--uno { grid-template-columns: minmax(0, 760px); }
.fx-home__guias { display: flex; flex-direction: column; gap: 10px; }
.fx-home__guia {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--h-bor);
    border-radius: 14px;
    background: var(--h-sup);
    color: var(--h-txt);
    text-decoration: none;
    transition: border-color .2s;
}
.fx-home__guia:hover { border-color: var(--h-bor2); color: var(--h-txt); }
.fx-home__guia-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--h-acc); }
.fx-home__guia-t { font-size: 15px; font-weight: 700; line-height: 1.3; }
.fx-home__guia-f { font-size: 12.5px; color: var(--h-mut); }

.fx-home__afiche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--h-bor);
    border-radius: 14px;
    background: var(--h-sup);
}
.fx-home__dia {
    flex: none;
    width: 74px;
    padding: 10px 0;
    border-radius: 10px;
    background: var(--h-sup2);
    font-family: var(--h-mono);
    text-align: center;
}
.fx-home__dia b { display: block; font-size: 26px; line-height: 1; }
.fx-home__dia span { font-size: 11px; letter-spacing: .1em; color: var(--h-mut); }
.fx-home__afiche-txt { flex: 1 1 220px; min-width: 0; }
.fx-home__afiche-txt h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.fx-home__afiche-txt p { margin-top: 3px; font-size: 12.5px; color: var(--h-mut); }
.fx-home__afiche .fx-home__btn { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .fx-home__hero-in { grid-template-columns: minmax(0, 1fr); }
    .fx-home__cuenta-grid { grid-template-columns: minmax(0, 1fr); }
    .fx-home__asesora-btns { flex-direction: row; flex-wrap: wrap; }
    .fx-home__asesora-btns .fx-home__btn { flex: 1 1 220px; }
}

@media (max-width: 768px) {
    .fx-home .fx-rel { --fx-card-w: min(78vw, 280px); }
    .fx-home__h1 { font-size: clamp(28px, 7.5vw, 34px); }
    .fx-home__ctas .fx-home__btn { flex: 1 1 100%; }
    /* Las cuatro fichas pasan a un carril que se desliza con el dedo. */
    .fx-home__estado {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 calc(var(--h-gutter) * -1);
        padding: 4px var(--h-gutter);
        border: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .fx-home__estado::-webkit-scrollbar { display: none; }
    .fx-home__ficha { flex: 0 0 78%; scroll-snap-align: start; }
    .fx-home__ficha-in { background: var(--h-vidrio); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .fx-home__aprende { grid-template-columns: minmax(0, 1fr); }
    .fx-home__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fx-home__cat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    .fx-home__cab-der .fx-rel__nav { display: none; }
}

@media (max-width: 380px) {
    .fx-home__cats { grid-template-columns: minmax(0, 1fr); }
    .fx-home__cat { flex-direction: row; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-home *,
    .fx-home *::before,
    .fx-home *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .fx-home__ficha-in:hover,
    .fx-home__cat:hover,
    .fx-home__semana:hover .fx-home__plato img { transform: none; }
}