/**
 * Ficha de producto «C · Vitrina» (v9.42.0).
 *
 * Marcado: templates/single-hik_producto.php + template-parts/ficha/*.php.
 * Clases NUEVAS fx-ficha__* a propósito: las .pdp-* de productos-style.css
 * traen reglas de modo claro con más especificidad y ya nos mordieron con la
 * tarjeta. Solo se reutilizan tal cual el visor (.pdp-lightbox*) y los nombres
 * que el JS global usa para marcar estado (.pdp-btn-favorite, .pdp-btn-compare,
 * .pdp-btn-add-to-cart); esos se neutralizan aquí dentro.
 *
 * Tokens: oscuro por defecto; claro con prefers-color-scheme, y el modo
 * elegido en el navbar (html y el propio envoltorio) manda sobre ambos.
 * Movimiento: solo transform / opacity; prefers-reduced-motion lo apaga.
 */

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

.fx-ficha {
    --f-bg: #0b0d10;
    --f-sup: #14171c;
    --f-sup2: #1b1f25;
    --f-sup3: #232933;
    --f-txt: #f2f4f7;
    --f-mut: #a3acb8;
    --f-sub: #8b95a3;
    --f-bor: rgba(255, 255, 255, .09);
    --f-bor2: rgba(255, 255, 255, .18);
    --f-acc: #ff5069;
    --f-sobre: #12161c;
    --f-ok: #34d399;
    --f-oksu: rgba(52, 211, 153, .14);
    --f-warn: #fbbf24;
    --f-warnsu: rgba(251, 191, 36, .14);
    --f-mal: #f87171;
    --f-malsu: rgba(248, 113, 113, .14);
    --f-chip: rgba(255, 255, 255, .1);
    --f-wa: #25d366;
    --f-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px -2px rgba(0, 0, 0, .45);
    --f-elev: 0 30px 70px -24px rgba(0, 0, 0, .8);
    --f-vidrio: rgba(20, 23, 28, .72);
    --f-grande: linear-gradient(160deg, rgba(227, 25, 55, .18), var(--f-sup) 62%);

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

@media (prefers-color-scheme: light) {
    .fx-ficha {
        --f-bg: #f2f3f5; --f-sup: #ffffff; --f-sup2: #f6f7f9; --f-sup3: #eceef1;
        --f-txt: #12161c; --f-mut: #4b5563; --f-sub: #5b6470;
        --f-bor: rgba(16, 20, 26, .12); --f-bor2: rgba(16, 20, 26, .24);
        --f-acc: #c8102e; --f-sobre: #ffffff;
        --f-ok: #0f7b56; --f-oksu: rgba(15, 123, 86, .1);
        --f-warn: #b45309; --f-warnsu: rgba(180, 83, 9, .1);
        --f-mal: #b91c1c; --f-malsu: rgba(185, 28, 28, .08);
        --f-chip: rgba(16, 20, 26, .06); --f-wa: #0f7a41;
        --f-sombra: 0 1px 2px rgba(16, 20, 26, .06), 0 4px 14px -2px rgba(16, 20, 26, .12);
        --f-elev: 0 30px 70px -30px rgba(16, 20, 26, .3);
        --f-vidrio: rgba(255, 255, 255, .8);
        --f-grande: linear-gradient(160deg, rgba(227, 25, 55, .1), var(--f-sup) 62%);
    }
}

:root[data-color-mode="dark"] .fx-ficha,
.fx-ficha[data-color-mode="dark"] {
    --f-bg: #0b0d10; --f-sup: #14171c; --f-sup2: #1b1f25; --f-sup3: #232933;
    --f-txt: #f2f4f7; --f-mut: #a3acb8; --f-sub: #8b95a3;
    --f-bor: rgba(255, 255, 255, .09); --f-bor2: rgba(255, 255, 255, .18);
    --f-acc: #ff5069; --f-sobre: #12161c;
    --f-ok: #34d399; --f-oksu: rgba(52, 211, 153, .14);
    --f-warn: #fbbf24; --f-warnsu: rgba(251, 191, 36, .14);
    --f-mal: #f87171; --f-malsu: rgba(248, 113, 113, .14);
    --f-chip: rgba(255, 255, 255, .1); --f-wa: #25d366;
    --f-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px -2px rgba(0, 0, 0, .45);
    --f-elev: 0 30px 70px -24px rgba(0, 0, 0, .8);
    --f-vidrio: rgba(20, 23, 28, .72);
    --f-grande: linear-gradient(160deg, rgba(227, 25, 55, .18), var(--f-sup) 62%);
}

:root[data-color-mode="light"] .fx-ficha,
.fx-ficha[data-color-mode="light"] {
    --f-bg: #f2f3f5; --f-sup: #ffffff; --f-sup2: #f6f7f9; --f-sup3: #eceef1;
    --f-txt: #12161c; --f-mut: #4b5563; --f-sub: #5b6470;
    --f-bor: rgba(16, 20, 26, .12); --f-bor2: rgba(16, 20, 26, .24);
    --f-acc: #c8102e; --f-sobre: #ffffff;
    --f-ok: #0f7b56; --f-oksu: rgba(15, 123, 86, .1);
    --f-warn: #b45309; --f-warnsu: rgba(180, 83, 9, .1);
    --f-mal: #b91c1c; --f-malsu: rgba(185, 28, 28, .08);
    --f-chip: rgba(16, 20, 26, .06); --f-wa: #0f7a41;
    --f-sombra: 0 1px 2px rgba(16, 20, 26, .06), 0 4px 14px -2px rgba(16, 20, 26, .12);
    --f-elev: 0 30px 70px -30px rgba(16, 20, 26, .3);
    --f-vidrio: rgba(255, 255, 255, .8);
    --f-grande: linear-gradient(160deg, rgba(227, 25, 55, .1), var(--f-sup) 62%);
}

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

/* Solo la primera fila del menú: la segunda ya la reserva .hada-bar-spacer. */
.hikvision-parking-page.fx-ficha {
    padding-top: var(--hada-bar-h, 66px);
    background: var(--f-bg);
    color: var(--f-txt);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Las clases con display ganan al [hidden] del navegador: aquí manda hidden. */
.fx-ficha [hidden] { display: none !important; }

.fx-ficha h1, .fx-ficha h2, .fx-ficha h3, .fx-ficha p, .fx-ficha dl, .fx-ficha dd, .fx-ficha ul, .fx-ficha ol { margin: 0; }
.fx-ficha ul, .fx-ficha ol { padding: 0; list-style: none; }

.fx-ficha :is(a, button, summary, select, input, [tabindex]):focus-visible {
    outline: 2px solid var(--f-acc);
    outline-offset: 2px;
}

.fx-ficha__marco {
    max-width: var(--f-ancho);
    margin: 0 auto;
    padding: 0 var(--f-gutter);
}

.fx-ficha__mono { font-family: var(--f-mono); }
.fx-ficha__ok { color: var(--f-ok); font-weight: 700; }

.fx-ficha__seccion { padding: 72px 0 64px; }

.fx-ficha__h2 {
    font-size: clamp(21px, 1rem + .55vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--f-txt);
}

.fx-ficha__sub { margin-top: 4px; font-size: 14px; color: var(--f-mut); }

.fx-ficha__mas { display: flex; justify-content: center; margin-top: 22px; }

/* ── Botones ─────────────────────────────────────────────────────────── */

.fx-ficha .fx-ficha__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--f-txt);
    font: 600 14px/1.2 inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.fx-ficha .fx-ficha__btn--lleno { background: var(--f-rojo); color: #fff; }
.fx-ficha .fx-ficha__btn--lleno:hover { background: var(--f-rojo-h); color: #fff; }
.fx-ficha .fx-ficha__btn--wa { border-color: var(--f-wa); color: var(--f-wa); }
.fx-ficha .fx-ficha__btn--wa:hover { background: var(--f-wa); color: var(--f-sobre); }
.fx-ficha .fx-ficha__btn--fantasma { border: 1px solid var(--f-bor2); }
.fx-ficha .fx-ficha__btn--fantasma:hover { background: var(--f-chip); }
.fx-ficha .fx-ficha__btn--agotado { background: var(--f-chip); color: var(--f-mut); cursor: not-allowed; }
.fx-ficha .fx-ficha__btn .fx-ico { width: 24px; height: 24px; flex-basis: 24px; }

/* ── 1. Escenario ────────────────────────────────────────────────────── */

.fx-ficha .fx-ficha__escenario {
    padding: clamp(28px, 3.5vw, 56px) 0 clamp(36px, 4vw, 64px);
    border-bottom: 1px solid var(--f-bor);
}

/* El lienzo del catálogo arranca bajo la barra fija; aquí la sección ya
   empieza debajo del menú, así que ocupa toda la sección. */
.fx-ficha .fx-ficha__escenario .fx-hero__lienzo { top: 0; height: 100%; }

.fx-ficha__escenario-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 64px);
    /* Arriba y no al centro: el panel de compra es más alto que la foto y,
       centrada, la foto dejaba un hueco encima. */
    align-items: start;
}

.fx-ficha__galeria { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.fx-ficha__plato {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--f-elev);
}

.fx-ficha__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: clamp(20px, 3.2vw, 44px);
    object-fit: contain;
    cursor: zoom-in;
}

.fx-ficha__sin-foto { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa3ad; }

.fx-ficha__chip,
.fx-ficha__hot {
    position: absolute;
    top: 18px;
    z-index: 2;
    padding: 4px 9px;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.fx-ficha__chip { left: 18px; background: #4b5563; }
.fx-ficha__chip--ok { background: #0f7b56; }
.fx-ficha__chip--bajo { background: #b45309; }
.fx-ficha__chip--nulo { background: #b91c1c; }
.fx-ficha__hot { right: 18px; background: var(--f-rojo); letter-spacing: .06em; }

.fx-ficha .fx-ficha__lupa {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(12, 14, 18, .72);
    color: #fff;
    cursor: pointer;
}

.fx-ficha__lupa .fx-ico { width: 26px; height: 26px; flex-basis: 26px; }

.fx-ficha__video { position: absolute; inset: 0; z-index: 3; background: #000; }
.fx-ficha__video iframe { width: 100%; height: 100%; border: 0; }

.fx-ficha__minis { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.fx-ficha .fx-ficha__mini {
    position: relative;
    width: 72px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease;
}

.fx-ficha__mini img { width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.fx-ficha .fx-ficha__mini:hover { border-color: var(--f-bor2); }
.fx-ficha .fx-ficha__mini.is-activa { border-color: var(--f-acc); }
.fx-ficha__mini--video img { padding: 0; object-fit: cover; }

.fx-ficha__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .35);
    color: #fff;
}

.fx-ficha__info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.fx-ficha__miga ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--f-sub); }
.fx-ficha__miga li + li::before { content: "›"; margin-right: 8px; color: var(--f-sub); }
.fx-ficha__miga a { color: var(--f-mut); text-decoration: none; }
.fx-ficha__miga a:hover { color: var(--f-txt); text-decoration: underline; }
.fx-ficha__miga li:last-child a { color: var(--f-txt); font-weight: 500; }

.fx-ficha__modelo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

.fx-ficha__modelo {
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--f-chip);
    color: var(--f-txt);
    font: 700 15px/1.3 var(--f-mono);
    overflow-wrap: anywhere;
    user-select: all;
}

.fx-ficha .fx-ficha__copiar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--f-mut);
    font: 600 12.5px/1 inherit;
    cursor: pointer;
}

.fx-ficha .fx-ficha__copiar:hover { color: var(--f-txt); background: var(--f-chip); }
.fx-ficha .fx-ficha__copiar.is-copiado { color: var(--f-ok); }
.fx-ficha__copiar .fx-ico { width: 24px; height: 24px; flex-basis: 24px; }

.fx-ficha__marca {
    padding: 3px 9px;
    border: 1px solid var(--f-bor2);
    border-radius: 999px;
    color: var(--f-mut);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

a.fx-ficha__marca { text-decoration: none; transition: border-color .18s ease, color .18s ease; }
a.fx-ficha__marca:hover { border-color: var(--f-acc); color: var(--f-acc); }
.fx-ficha__enlace-marca { color: var(--f-acc); font-weight: 600; text-decoration: none; }
.fx-ficha__enlace-marca:hover { text-decoration: underline; text-underline-offset: 3px; }

.fx-ficha__titulo {
    font-size: clamp(26px, 1rem + 1.9vw, 40px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.028em;
    color: var(--f-txt);
    text-wrap: balance;
    text-shadow: var(--fx-hero-texto-sombra, none);
}

.fx-ficha__etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }

.fx-ficha__etiquetas li {
    padding: 6px 12px;
    border: 1px solid var(--f-bor2);
    border-radius: 999px;
    background: var(--f-vidrio);
    color: var(--f-txt);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

/* ── Panel de compra (vidrio) ────────────────────────────────────────── */

.fx-ficha__compra {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 580px;
    padding: 20px 22px;
    border: 1px solid var(--f-bor2);
    border-radius: 18px;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
}

.fx-ficha__tarifa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fx-ficha__tarifa label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-mut); }
.fx-ficha__tarifa select {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--f-bor2);
    border-radius: 8px;
    background: var(--f-sup);
    color: var(--f-txt);
    font: 13px inherit;
}

.fx-ficha__precio-oculto { display: flex; flex-direction: column; gap: 10px; }
.fx-ficha__precio-oculto p { font-size: 14px; color: var(--f-mut); }

.fx-ficha__precio-bloque { display: flex; flex-direction: column; gap: 6px; }

.fx-ficha__precio-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }

.fx-ficha__nivel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--f-mut);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fx-ficha__nivel .fenix-tier-badge { letter-spacing: .02em; }
.fx-ficha__vence { font-size: 12px; color: var(--f-mut); }

.fx-ficha__precio-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }

.fx-ficha__precio {
    color: var(--f-txt);
    font: 700 clamp(28px, 1rem + 1.5vw, 38px)/1.1 var(--f-mono);
    letter-spacing: -.02em;
}

.fx-ficha__dcto { padding: 2px 7px; border-radius: 5px; background: var(--f-rojo); color: #fff; font-size: 12px; font-weight: 700; }
.fx-ficha__iva { font-size: 13px; color: var(--f-mut); }
.fx-ficha__antes { font-size: 13px; color: var(--f-sub); }
.fx-ficha__antes s { font-family: var(--f-mono); }
.fx-ficha__consultar { font-size: 16px; font-weight: 600; color: var(--f-txt); }

.fx-ficha__aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--f-warnsu);
    color: var(--f-warn);
    font-size: 13.5px;
}

.fx-ficha__aviso svg { flex: none; }
.fx-ficha__aviso a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.fx-ficha__stock {
    --tono: var(--f-ok);
    --tono-su: var(--f-oksu);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--tono-su);
}

.fx-ficha__stock--bajo_pedido { --tono: var(--f-warn); --tono-su: var(--f-warnsu); }
.fx-ficha__stock--agotado { --tono: var(--f-mal); --tono-su: var(--f-malsu); }
.fx-ficha__stock--descontinuado { --tono: var(--f-mut); --tono-su: var(--f-chip); }

.fx-ficha__stock-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.fx-ficha__stock-linea strong { color: var(--tono); font-weight: 600; }
.fx-ficha__punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tono); }
.fx-ficha__stock-extra { color: var(--f-mut); }
.fx-ficha__stock-nota { padding-left: 16px; font-size: 12.5px; color: var(--f-mut); }

.fx-ficha__sedes { padding-left: 16px; font-size: 12.5px; color: var(--f-mut); }
.fx-ficha__sedes summary { width: fit-content; cursor: pointer; }
.fx-ficha__sedes ul { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-width: 260px; }
.fx-ficha__sedes li { display: flex; justify-content: space-between; gap: 12px; }
.fx-ficha__sedes strong { color: var(--f-txt); font-weight: 600; }

.fx-ficha__fila-compra { display: flex; gap: 10px; }
.fx-ficha__fila-compra > .fx-ficha__btn { flex: 1; min-height: 52px; }

.fx-ficha__qty {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 52px;
    border: 1px solid var(--f-bor2);
    border-radius: 10px;
}

.fx-ficha .fx-ficha__qty-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--f-txt);
    cursor: pointer;
}

.fx-ficha .fx-ficha__qty-btn:hover { background: var(--f-chip); }

.fx-ficha .fx-ficha__qty-input,
.fx-ficha__qty-num {
    width: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--f-txt);
    font: 600 15px/1 var(--f-mono);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.fx-ficha__qty-input::-webkit-outer-spin-button,
.fx-ficha__qty-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

.fx-ficha .fx-ficha__compra .fx-ficha__agregar,
.fx-ficha .fx-ficha__barra .fx-ficha__agregar {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--f-rojo);
    color: #fff;
    font: 700 15px/1 inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease;
}

.fx-ficha .fx-ficha__compra .fx-ficha__agregar:hover,
.fx-ficha .fx-ficha__barra .fx-ficha__agregar:hover { background: var(--f-rojo-h); }

/* Ya está en el carrito (la clase la pone el JS del carrito). */
.fx-ficha .fx-ficha__compra .fx-ficha__agregar.in-cart {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--f-ok);
    color: var(--f-ok);
}

/* Sobre el rojo la mancha roja no se vería: pasa a blanco translúcido. */
.fx-ficha__agregar .fx-ico { --fx-ico-blob: rgba(255, 255, 255, .32); width: 26px; height: 26px; flex-basis: 26px; }

.fx-ficha .fx-ficha__wa-cuadro {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid var(--f-wa);
    border-radius: 10px;
    color: var(--f-wa);
    transition: background-color .18s ease, color .18s ease;
}

.fx-ficha .fx-ficha__wa-cuadro:hover { background: var(--f-wa); color: var(--f-sobre); }

/* ── Acciones y confianza ────────────────────────────────────────────── */

/* v9.43.0: Guardar, Comparar y Ficha técnica son BOTONES (antes parecían
   texto suelto). Mismo idioma que «Agregar» de la tarjeta: contorno rojo que
   se llena al pasar el ratón, a lo ancho del panel de compra. */
.fx-ficha__acciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    max-width: 580px;
}

.fx-ficha .fx-ficha__acciones .fx-ficha__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1.5px solid var(--f-acc);
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: var(--f-acc);
    font: 600 14px/1.2 inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.fx-ficha .fx-ficha__acciones .fx-ficha__accion:hover,
.fx-ficha .fx-ficha__acciones .fx-ficha__accion.active {
    background: var(--f-acc);
    color: var(--f-sobre);
}

.fx-ficha .fx-ficha__acciones .fx-ficha__accion:focus-visible { outline: 2px solid var(--f-acc); outline-offset: 2px; }

/* Sobre el relleno rojo la mancha roja no se vería: pasa a translúcida. */
.fx-ficha__accion:hover .fx-ico,
.fx-ficha__accion.active .fx-ico { --fx-ico-blob: rgba(255, 255, 255, .35); }
.fx-ficha .fx-ficha__acciones .fx-ficha__accion.active .bl { transform: scale(1); }
.fx-ficha__accion .fx-ico { width: 24px; height: 24px; flex-basis: 24px; }

.fx-ficha__confianza { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fx-ficha__confianza li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--f-mut); }
.fx-ficha__confianza .fx-ico { width: 24px; height: 24px; flex-basis: 24px; }

/* ── 2. Lo esencial ──────────────────────────────────────────────────── */

.fx-ficha__lead { max-width: 72ch; margin: 8px 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--f-mut); }
.fx-ficha__esencial .fx-ficha__h2 + .fx-ficha__bento { margin-top: 22px; }

.fx-ficha__bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
    gap: 14px;
}

.fx-ficha__tile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--f-bor);
    border-radius: 16px;
    background: var(--f-sup);
    transition: border-color .2s ease, transform .3s var(--f-ease);
}

.fx-ficha__tile:hover { border-color: var(--f-bor2); transform: translateY(-2px); }

.fx-ficha__tile--grande {
    grid-row: span 2;
    justify-content: flex-end;
    background: var(--f-grande);
}

.fx-ficha__tile-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--f-sup2);
    color: var(--f-txt);
}

.fx-ficha__tile--grande .fx-ficha__tile-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--f-vidrio); }
.fx-ficha__tile-ico .fx-ico { width: 30px; height: 30px; flex-basis: 30px; }
.fx-ficha__tile--grande .fx-ficha__tile-ico .fx-ico { width: 36px; height: 36px; flex-basis: 36px; }

.fx-ficha__tile-t { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--f-txt); }
.fx-ficha__tile--grande .fx-ficha__tile-t { font-size: clamp(22px, 1rem + .9vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.fx-ficha__tile-d { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--f-mut); }

/* ── 3. Relacionados dentro de la ficha ──────────────────────────────── */

.fx-ficha .fx-rel {
    --fx-bg: var(--f-bg);
    --fx-text: var(--f-txt);
    --fx-muted: var(--f-mut);
    --fx-border: var(--f-bor);
    --fx-primary: var(--f-rojo);
    --fx-card-w: clamp(200px, 19vw, 250px);
    padding: 60px 0 68px;
    border-top: 0;
}

.fx-ficha .fx-rel--similares {
    border-top: 1px solid var(--f-bor);
    border-bottom: 1px solid var(--f-bor);
    background: var(--f-sup2);
}

.fx-ficha .fx-rel--cross { border-top: 1px solid var(--f-bor); background: transparent; }
.fx-ficha .fx-rel__head { margin-bottom: 22px; }

.fx-ficha .fx-rel__title {
    padding-left: 0;
    font-size: clamp(21px, 1rem + .55vw, 26px);
    font-weight: 700;
    letter-spacing: -.015em;
}

.fx-ficha .fx-rel__title::before { display: none; }
.fx-ficha .fx-rel__sub { padding-left: 0; }

/* ── 4. Especificaciones ─────────────────────────────────────────────── */

.fx-ficha__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.fx-ficha__cabeza-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.fx-ficha__idiomas { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--f-chip); }

.fx-ficha .fx-ficha__idioma {
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--f-mut);
    font: 600 13px/1 inherit;
    cursor: pointer;
}

.fx-ficha .fx-ficha__idioma[aria-selected="true"] { background: var(--f-sup); color: var(--f-txt); box-shadow: var(--f-sombra); }

.fx-ficha__grupos { column-count: 3; column-gap: 16px; }

.fx-ficha__grupo {
    display: block;
    margin: 0 0 16px;
    overflow: hidden;
    border: 1px solid var(--f-bor);
    border-radius: 12px;
    background: var(--f-sup);
    break-inside: avoid;
}

.fx-ficha__grupo h3,
.fx-ficha__caja--tabla h3 {
    padding: 14px 18px;
    border-bottom: 1px solid var(--f-bor);
    background: var(--f-sup2);
    color: var(--f-txt);
    font-size: 15px;
    font-weight: 700;
}

.fx-ficha__fila {
    display: grid;
    grid-template-columns: minmax(92px, 40%) minmax(0, 1fr);
    gap: 14px;
    padding: 10px 18px;
    border-top: 1px solid var(--f-bor);
    font-size: 13.5px;
    line-height: 1.5;
}

.fx-ficha__fila:first-child { border-top: 0; }
.fx-ficha__fila:nth-child(even) { background: var(--f-sup2); }
.fx-ficha__fila dt { color: var(--f-mut); }
.fx-ficha__fila dd { color: var(--f-txt); overflow-wrap: anywhere; }
.fx-ficha__fila--total { border-top: 2px solid var(--f-bor2); font-weight: 700; }

/* ── 5. Descripción y datos ──────────────────────────────────────────── */

.fx-ficha__datos { border-top: 1px solid var(--f-bor); }
.fx-ficha__datos .fx-ficha__h2 { margin-bottom: 22px; }

.fx-ficha__datos-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.fx-ficha__datos-grid--una { grid-template-columns: minmax(0, 1fr); max-width: 900px; }

.fx-ficha__datos-izq,
.fx-ficha__datos-der { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.fx-ficha__texto,
.fx-ficha__faq,
.fx-ficha__caja {
    padding: 20px 22px;
    border: 1px solid var(--f-bor);
    border-radius: 14px;
    background: var(--f-sup);
}

.fx-ficha__texto h3,
.fx-ficha__faq h3,
.fx-ficha__caja h3 { margin-bottom: 12px; color: var(--f-txt); font-size: 16px; font-weight: 700; }

.fx-ficha__prosa { font-size: 15px; line-height: 1.7; color: var(--f-mut); overflow-wrap: anywhere; }
.fx-ficha__prosa p { margin: 0 0 .8em; }
.fx-ficha__prosa p:last-child { margin-bottom: 0; }
.fx-ficha__prosa strong { color: var(--f-txt); }
.fx-ficha__prosa ul { padding-left: 1.2em; list-style: disc; }

/* «Leer más»: el degradado es una máscara sobre el texto, no un color de
   fondo, así funciona igual en claro y en oscuro. */
.fx-ficha__texto.is-plegado .fx-ficha__prosa {
    max-height: 340px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
}

.fx-ficha .fx-ficha__leer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--f-acc);
    font: 600 14px/1.2 inherit;
    cursor: pointer;
}

.fx-ficha .fx-ficha__leer::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.fx-ficha .fx-ficha__leer[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.fx-ficha .fx-ficha__leer:hover { text-decoration: underline; text-underline-offset: 3px; }

.fx-ficha__faq-item { border-top: 1px solid var(--f-bor); }

.fx-ficha__faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    color: var(--f-txt);
    font-size: 14.5px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.fx-ficha__faq-item summary::-webkit-details-marker { display: none; }

.fx-ficha__faq-item summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--f-mut);
    border-bottom: 2px solid var(--f-mut);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}

.fx-ficha__faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.fx-ficha__faq-item .fx-ficha__prosa { padding-bottom: 14px; }

.fx-ficha__caja--tabla { padding: 0; overflow: hidden; }
.fx-ficha__caja--tabla h3 { margin: 0; }

.fx-ficha__doc {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    padding: 12px;
    border-radius: 10px;
    background: var(--f-sup2);
    color: var(--f-txt);
    text-decoration: none;
    transition: background-color .18s ease;
}

.fx-ficha__doc:hover { background: var(--f-sup3); }

.fx-ficha__doc-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(227, 25, 55, .12);
}

.fx-ficha__doc-ico .fx-ico { width: 28px; height: 28px; flex-basis: 28px; }
.fx-ficha__doc-txt { min-width: 0; }
.fx-ficha__doc-txt strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.fx-ficha__doc-txt span { font-size: 12.5px; color: var(--f-mut); }
.fx-ficha__enlace { display: inline-block; margin-top: 4px; color: var(--f-acc); font-size: 13.5px; font-weight: 600; text-underline-offset: 3px; }

/* ── CTA ─────────────────────────────────────────────────────────────── */

.fx-ficha__cta { padding: 16px 0 72px; }

.fx-ficha__cta-caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 28px 32px;
    border: 1px solid var(--f-bor);
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(227, 25, 55, .14), var(--f-sup) 55%);
}

.fx-ficha__cta-caja h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--f-txt); }
.fx-ficha__cta-caja p { margin-top: 6px; font-size: 14.5px; color: var(--f-mut); }

/* ── Barra de compra fija ────────────────────────────────────────────── */

.fx-ficha__barra {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 8000;
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(1100px, calc(100vw - 192px));
    padding: 10px 12px;
    border: 1px solid var(--f-bor2);
    border-radius: 18px;
    background: var(--f-vidrio);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    box-shadow: var(--f-elev);
    color: var(--f-txt);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(100% + 40px));
    transition: transform .35s var(--f-ease), opacity .25s ease, visibility 0s linear .35s;
}

.fx-ficha__barra.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

/* La barra de comparación y el visor van por encima: la de compra se aparta. */
body:has(.hik-compare-bar.visible) .fx-ficha__barra,
body.pdp-lightbox-open .fx-ficha__barra {
    opacity: 0;
    visibility: hidden;
}

.fx-ficha__barra-foto {
    flex: none;
    width: 64px;
    height: 48px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.fx-ficha__barra-foto img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.fx-ficha__barra-id { flex: 1; min-width: 0; }
.fx-ficha__barra-modelo { overflow: hidden; font: 700 15px/1.3 var(--f-mono); white-space: nowrap; text-overflow: ellipsis; }
.fx-ficha__barra-stock { font-size: 12.5px; font-weight: 600; color: var(--f-mut); }
.fx-ficha__barra-stock--ok { color: var(--f-ok); }
.fx-ficha__barra-stock--bajo { color: var(--f-warn); }
/* v9.43.2: faltaban los dos tonos restantes, así que un producto agotado salía
   en gris en la barra fija mientras la chapa sobre la foto lo pintaba en rojo. */
.fx-ficha__barra-stock--pedido { color: var(--f-warn); }
.fx-ficha__barra-stock--nulo { color: var(--f-mal); }
.fx-ficha__barra-precio { flex: none; text-align: right; }
.fx-ficha__barra-nivel { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-mut); }
.fx-ficha__barra-precio p { font-size: 20px; font-weight: 700; line-height: 1.2; }
.fx-ficha__barra-precio .fx-ficha__iva { font-size: 12px; font-weight: 400; }
.fx-ficha__qty--barra { height: 46px; }
.fx-ficha__qty-num { display: inline-block; width: 36px; }
.fx-ficha .fx-ficha__barra .fx-ficha__agregar { flex: 0 0 auto; height: 46px; padding: 0 22px; }
.fx-ficha__barra-cta { flex: none; }

/* ── Tablet ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .fx-ficha__escenario-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .fx-ficha__bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fx-ficha__grupos { column-count: 2; }
    .fx-ficha__barra { width: calc(100vw - 120px); }
}

@media (max-width: 900px) {
    .fx-ficha__escenario-grid { grid-template-columns: minmax(0, 1fr); }
    /* Más contenida que en escritorio: si no, en tableta la foto empuja el
       precio fuera de la primera pantalla. */
    .fx-ficha__galeria { width: 100%; max-width: 540px; margin: 0 auto; }
    .fx-ficha__compra { max-width: none; }
    .fx-ficha__datos-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Móvil ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .fx-ficha { font-size: 14.5px; }
    .fx-ficha__seccion { padding: 40px 0 36px; }
    .fx-ficha .fx-ficha__escenario { padding: 16px 0 28px; }
    .fx-ficha__escenario-grid { gap: 20px; }
    .fx-ficha__info { gap: 14px; }
    .fx-ficha__plato { border-radius: 22px; }
    .fx-ficha__chip, .fx-ficha__hot { top: 12px; }
    .fx-ficha__chip { left: 12px; }
    .fx-ficha__hot { right: 12px; }
    .fx-ficha .fx-ficha__lupa { right: 12px; bottom: 12px; width: 42px; height: 42px; }
    .fx-ficha__modelo { font-size: 13.5px; }
    .fx-ficha__etiquetas li { padding: 5px 10px; font-size: 12px; }
    .fx-ficha__compra { padding: 16px; border-radius: 16px; }
    .fx-ficha__qty, .fx-ficha .fx-ficha__compra .fx-ficha__agregar, .fx-ficha .fx-ficha__wa-cuadro { height: 48px; }
    .fx-ficha .fx-ficha__wa-cuadro { width: 48px; }
    .fx-ficha .fx-ficha__qty-btn { width: 36px; }
    .fx-ficha .fx-ficha__qty-input { width: 36px; }

    .fx-ficha__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
    .fx-ficha__tile { gap: 10px; padding: 14px; border-radius: 14px; }
    .fx-ficha__tile--grande { grid-column: span 2; grid-row: auto; }
    .fx-ficha__tile-ico { width: 40px; height: 40px; border-radius: 10px; }
    .fx-ficha__tile-ico .fx-ico { width: 26px; height: 26px; flex-basis: 26px; }
    .fx-ficha__tile--grande .fx-ficha__tile-ico { width: 48px; height: 48px; }
    .fx-ficha__tile--grande .fx-ficha__tile-ico .fx-ico { width: 30px; height: 30px; flex-basis: 30px; }
    .fx-ficha__tile-t { font-size: 14px; }
    .fx-ficha__tile--grande .fx-ficha__tile-t { font-size: 20px; }
    .fx-ficha__tile-d { font-size: 12.5px; }

    .fx-ficha .fx-rel { padding: 32px 0 36px; }
    .fx-ficha__grupos { column-count: 1; }
    .fx-ficha__fila { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 14px; }
    .fx-ficha__texto, .fx-ficha__faq, .fx-ficha__caja { padding: 16px; }
    .fx-ficha__caja--tabla { padding: 0; }
    .fx-ficha__cta { padding-bottom: 48px; }
    .fx-ficha__cta-caja { padding: 22px 18px; }
    .fx-ficha__cta-caja .fx-ficha__btn { width: 100%; }

    /* La barra va ENCIMA de la barra de navegación del tema (56 px + área segura). */
    .fx-ficha__barra {
        left: 10px;
        right: 10px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
        gap: 10px;
        padding: 10px 10px 10px 14px;
        border-radius: 16px;
        transform: translateY(calc(100% + 90px));
    }

    body:has(.flavor-tabbar) .fx-ficha__barra { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
    .fx-ficha__barra.is-visible { transform: translateY(0); }
    .fx-ficha__barra-foto { display: none; }
    .fx-ficha__barra:has(.fx-ficha__barra-precio) .fx-ficha__barra-id { display: none; }
    .fx-ficha__barra-precio { flex: 1; min-width: 0; text-align: left; }
    .fx-ficha__barra-precio p { font-size: 17px; }
    .fx-ficha__qty--barra { height: 44px; }
    .fx-ficha .fx-ficha__barra .fx-ficha__agregar { height: 44px; padding: 0 14px; }
}

/* El botón dice solo «Agregar» cuando el panel es estrecho (teléfono, y las
   dos columnas de 901–1180 px): con la cantidad y WhatsApp al lado,
   «Agregar al carrito» partía en dos renglones. */
@media (max-width: 480px), (min-width: 901px) and (max-width: 1180px) {
    .fx-ficha__ancho { display: none; }
}

@media (max-width: 380px) {
    .fx-ficha .fx-ficha__barra .fx-ficha__agregar span { display: none; }
    .fx-ficha .fx-ficha__barra .fx-ficha__agregar { padding: 0 12px; }
    .fx-ficha__fila-compra { flex-wrap: wrap; }
    .fx-ficha .fx-ficha__compra .fx-ficha__agregar { flex: 1 1 100%; order: -1; }
}

/* ── Movimiento reducido ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fx-ficha__tile,
    .fx-ficha__barra,
    .fx-ficha__faq-item summary::after { transition: none; }
    .fx-ficha__tile:hover { transform: none; }
}