/* =========================================================
   FARMAVITAE — Sitio de clientes en CELULAR · diseño premium
   Capa de estilos SOBRE estilos.css, mercado.css, inicio.css y sitio.css: no cambia ninguna función ni ningún
   archivo de JavaScript de la tienda, solo cómo se ve (más aire, tarjetas con sombra suave, botón «+» en cada
   producto, un solo botón de ayuda). Solo actúa en pantallas de hasta 640 px.
   Usa las variables del sitio (--brand, --ink, --surface…) con color-mix(), así los diseños de temporada
   (Halloween, Navidad…) que cambian esas variables siguen funcionando.
   PARA QUITARLA: borrar la línea <link ... cliente-premium.css> y la <script ... cliente-premium.js> de las páginas.
   ========================================================= */

@media (max-width: 640px) {

    :root {
        --cp-linea: color-mix(in srgb, var(--ink) 9%, #fff);
        --cp-tinte: color-mix(in srgb, var(--brand) 7%, #fff);
        --cp-sombra: 0 1px 2px rgba(16,35,63,.05), 0 14px 30px -20px rgba(16,35,63,.28);
        --cp-sombra-alta: 0 2px 4px rgba(16,35,63,.06), 0 22px 40px -22px rgba(16,35,63,.38);
    }

    /* ---- Fondo: gris-azulado muy claro para que las tarjetas blancas «floten» ---- */
    body.cuerpo-mercado { background: color-mix(in srgb, var(--brand) 3%, #F7F9FC) !important; }

    /* ---- Encabezado y buscador ---- */
    .nav-sitio {
        background: #fff !important;
        border-bottom: 1px solid var(--cp-linea) !important;
        box-shadow: none !important;
    }
    .ini-header-buscador { background: #fff !important; border-bottom: 1px solid var(--cp-linea) !important; }
    .ini-header-buscador .ini-buscador-form,
    .ini-buscador-form {
        background: #fff !important;
        border: 1px solid var(--cp-linea) !important;
        border-radius: 999px !important;
        box-shadow: var(--cp-sombra) !important;
    }
    .ini-buscador-input { font-weight: 500; }

    /* ---- Banner «Ofertas de la semana»: tarjeta clara con círculo de color, como el mockup ---- */
    .ini-banner-campana-link,
    .hero-banner-oferta-movil {
        background: #fff !important;
        background-image: none !important;
        color: var(--ink) !important;
        border: 1px solid var(--cp-linea) !important;
        border-radius: 22px !important;
        box-shadow: var(--cp-sombra) !important;
        position: relative;
        overflow: hidden;
    }
    .ini-banner-campana-link::before,
    .hero-banner-oferta-movil::before {
        content: "";
        position: absolute;
        right: -34px; top: -34px;
        width: 140px; height: 140px;
        border-radius: 50%;
        background: var(--cp-tinte);
        pointer-events: none;
    }
    .ini-banner-campana-link > *,
    .hero-banner-oferta-movil > * { position: relative; }
    .ini-banner-campana-eyebrow,
    .hero-banner-oferta-kicker { color: var(--brand) !important; letter-spacing: .08em; }
    .ini-banner-campana-titular,
    .hero-banner-oferta-titulo { color: var(--ink) !important; font-family: var(--font-display); letter-spacing: -.02em; }
    /* Distribución: las cifras del banner eran blancas (el banner era oscuro) y con el fondo claro no se leían */
    .hero-banner-distribucion-stats:not(#_) strong { color: var(--ink) !important; }
    .hero-banner-distribucion-stats:not(#_) span { color: var(--ink-muted) !important; }
    .hero-banner-oferta-movil p, .hero-banner-oferta-movil small { color: var(--ink-muted); }

    .ini-banner-campana-cta,
    .hero-banner-oferta-cta {
        background: var(--brand) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 20px -10px var(--brand) !important;
    }

    /* ---- Títulos de sección: más de revista, con «Ver todas» a la derecha ---- */
    .seccion-header h2,
    .ini-seccion-cabecera h2 {
        font-family: var(--font-display) !important;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--ink);
    }
    .ini-seccion-eyebrow { color: var(--brand) !important; letter-spacing: .1em; font-weight: 800; }
    .seccion-header .btn-mkt-link { font-weight: 700; color: var(--brand); }

    /* ---- Marcas y categorías: píldoras blancas con sombra suave ---- */
    .ini-marca-item {
        border-color: var(--cp-linea) !important;
        box-shadow: var(--cp-sombra);
        color: var(--ink-light) !important;
    }
    .categoria-hero-item {
        background: #fff !important;
        border: 1px solid var(--cp-linea) !important;
        border-radius: 18px !important;
        box-shadow: var(--cp-sombra) !important;
    }
    .fila-categorias-hero { padding: 6px 4px 18px !important; }   /* la fila hace scroll y recortaba la sombra de las tarjetas */
    /* la tarjeta de cada categoría lleva aire alrededor: el círculo del ícono ya no toca el borde blanco */
    .fila-categorias-hero:not(#_) .categoria-hero-item {
        flex: 0 0 84px !important;
        width: 84px !important;
        padding: 14px 6px 12px !important;
        gap: 9px !important;
    }
    .fila-categorias-hero:not(#_) .categoria-hero-ico { width: 50px !important; height: 50px !important; }
    .categoria-hero-ico { background: var(--cp-tinte) !important; }
    .categoria-hero-item-activa { background: var(--brand) !important; border-color: var(--brand) !important; }

    /* ---- Tarjeta de producto: foto grande, marca, nombre, precio y botón «+» ---- */
    .producto-card-mkt {
        background: #fff !important;
        border: 1px solid var(--cp-linea) !important;
        border-radius: 18px !important;
        box-shadow: var(--cp-sombra) !important;
        overflow: hidden;
        height: auto !important;          /* mercado.js/inicio.js igualan alturas con un style inline: aquí cada tarjeta mide lo suyo */
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .producto-card-img-wrap {
        background: linear-gradient(180deg, var(--cp-tinte), #fff) !important;
        aspect-ratio: 1 / 1;
    }
    .producto-card-img { mix-blend-mode: multiply; object-fit: contain; padding: 8px; }
    html.a11y-tema-oscuro .producto-card-img { mix-blend-mode: normal; }   /* con el tema oscuro de accesibilidad no se mezcla la foto con el fondo */
    .producto-card-body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "tienda   tienda"
            "nombre   nombre"
            "desc     desc"
            "meta     meta"
            "precio   precio"
            "cantidad agregar"
            "visitar  visitar";
        align-items: center;
        column-gap: 10px;
        row-gap: 4px;
        padding: 10px 12px 12px !important;
        flex: 1;
    }
    .producto-card-tienda {
        grid-area: tienda;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--ink-muted) !important;
        margin: 0 !important;
    }
    .producto-card-nombre {
        grid-area: nombre;
        font-size: 13px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        color: var(--ink) !important;
        margin: 0 !important;
        min-height: 34px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .producto-card-descripcion { grid-area: desc; margin: 2px 0 8px !important; }
    .producto-card-cantidad { grid-area: cantidad; margin: 4px 0 0 !important; min-width: 0; height: 36px; gap: 4px !important; }
    .producto-card-cantidad button { width: 28px !important; border-radius: 10px !important; }
    .producto-card-cantidad .input-cantidad-card { min-width: 0; width: 100%; border-radius: 10px !important; }
    .producto-card-meta { grid-area: meta; margin: 0; }
    .producto-card-meta:empty { display: none; }
    .producto-card-precio {
        grid-area: precio;
        min-height: 0 !important;
        margin: 0 !important;
        font-family: var(--font-display) !important;
        font-weight: 800 !important;
        font-size: 16px !important;
        color: var(--ink) !important;
        align-self: center;
    }
    /* con descuento: el precio anterior tachado se lee bien y el precio nuevo resalta */
    .producto-card-precio.en-promocion { margin-top: 6px !important; gap: 1px !important; }
    .producto-card-precio-antes {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: var(--ink-light) !important;
        text-decoration: line-through;
        text-decoration-color: var(--error);
        text-decoration-thickness: 1.5px;
    }
    .producto-card-precio-actual { font-size: 17px !important; color: var(--ink) !important; }
    .producto-card-precio.en-promocion .producto-card-precio-actual { color: var(--error) !important; }
    .producto-card-acciones {
        display: contents !important;       /* el botón «+» y «Visitar tienda» se acomodan directo en la cuadrícula de la tarjeta */
    }
    .producto-card-mkt:not(#_) .btn-ir-perfil {
        grid-area: visitar;
        justify-self: center;
        margin: 6px 0 0 !important;
        font-weight: 700;
    }
    .producto-card-mkt:not(#_) .btn-agregar-carrito {
        grid-area: agregar;
        margin: 4px 0 0 12px !important;     /* separación con el selector de cantidad */
        width: 36px; height: 36px; min-width: 36px; min-height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;                          /* se oculta el texto «Agregar · $…» (sigue ahí para lectores de pantalla) */
        line-height: 0;
        display: block !important;
        position: relative;
        background: var(--brand) !important;
        box-shadow: 0 8px 16px -8px var(--brand) !important;
        overflow: hidden;
    }
    .producto-card-mkt .btn-agregar-carrito svg { display: none !important; }
    .producto-card-mkt .btn-agregar-carrito::after {
        /* el «+» se dibuja con dos barras: queda exactamente al centro, sin depender de la tipografía */
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;                 /* centrado exacto: el texto oculto del botón ya no empuja el «+» */
        width: 16px; height: 16px;
        background:
            linear-gradient(#fff, #fff) center / 100% 2.4px no-repeat,
            linear-gradient(#fff, #fff) center / 2.4px 100% no-repeat;
        border-radius: 1px;
    }
    .producto-card-mkt .btn-agregar-carrito.agregado { background: #0f7a7a !important; }
    .producto-card-mkt .btn-agregar-carrito.agregado::after {
        width: 15px; height: 8px;
        background: none;
        border-left: 2.6px solid #fff;
        border-bottom: 2.6px solid #fff;
        transform: translateY(-1.5px) rotate(-45deg);
    }

    /* ---- Selector de cantidad: el «−» y el «+» se dibujan con barras para que queden exactamente al centro ----
       (con el texto, la tipografía los dejaba un poco bajos; el botón conserva su texto oculto para lectores de pantalla) */
    .btn-cantidad-menos:not(#_),
    .btn-cantidad-mas:not(#_) {
        font-size: 0 !important;
        line-height: 0;
        position: relative;
        padding: 0 !important;
    }
    .btn-cantidad-menos::before,
    .btn-cantidad-mas::before,
    .btn-cantidad-mas::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        background: currentColor;
        border-radius: 2px;
    }
    .btn-cantidad-menos::before,
    .btn-cantidad-mas::before { width: 12px; height: 2.4px; }
    .btn-cantidad-mas::after { width: 2.4px; height: 12px; }

    /* ---- Insignias sobre la foto (Nuevo, -20 %, 2x1): píldoras pequeñas ---- */
    .producto-card-badge { border-radius: 999px !important; font-size: 10px !important; padding: 3px 9px !important; letter-spacing: .02em; }

    /* ---- Ficha del producto (ventana): imagen con degradado, precio grande, barra inferior fija ---- */
    .ini-producto-modal-contenido { border-radius: 26px 26px 0 0 !important; }
    .ini-producto-modal-img-principal { background: linear-gradient(180deg, var(--cp-tinte), #fff) !important; }
    .ini-producto-modal-cerrar { box-shadow: var(--cp-sombra) !important; }
    #ini-modal-titulo { font-family: var(--font-display) !important; letter-spacing: -.02em; color: var(--ink); }
    #ini-modal-precio:not(#_) {
        font-family: var(--font-display) !important;
        font-weight: 800 !important;
        font-size: 32px !important;
        text-align: left !important;
        margin: 2px 0 0 !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
        align-items: baseline;
        color: var(--ink) !important;
        letter-spacing: -.02em;
    }
    .ini-producto-modal-acciones {
        background: #fff !important;
        border-top: 1px solid var(--cp-linea) !important;
        box-shadow: 0 -14px 30px -22px rgba(16,35,63,.35);
    }
    .ini-producto-modal-acciones .btn-agregar-carrito,
    .ini-producto-modal-acciones button[type="button"].btn-mkt-primary {
        /* en la ficha el botón conserva su texto completo: no se convierte en «+» */
        width: auto; height: auto; min-width: 0;
        border-radius: 999px !important;
        font-size: 15px !important;
        line-height: 1.2;
        padding: 14px 20px !important;
        display: inline-flex !important;
    }
    .ini-producto-modal-acciones .btn-agregar-carrito svg { display: inline-block !important; }
    .ini-producto-modal-acciones .btn-agregar-carrito::after { content: none; }
    .ini-producto-modal-acciones .producto-card-cantidad { display: flex !important; }

    /* ---- Barra inferior de navegación ---- */
    .barra-inferior-movil {
        background: #fff !important;
        border-top: 1px solid var(--cp-linea) !important;
        box-shadow: 0 -12px 30px -24px rgba(16,35,63,.4) !important;
    }
    .barra-inferior-item { color: var(--ink-muted); font-weight: 600; }
    .barra-inferior-item.activo { color: var(--brand) !important; }

    /* ---- Reseñas, boletín: tarjetas limpias ---- */
    .testimonio-card { background: #fff !important; box-shadow: var(--cp-sombra) !important; border-color: var(--cp-linea) !important; }
    .ini-newsletter { border-radius: 22px; }

    /* ---- Botones principales del sitio ---- */
    .btn-mkt-primary { border-radius: 999px !important; font-weight: 700; box-shadow: 0 10px 20px -12px var(--brand) !important; }
    .btn-mkt-secundario { border-radius: 999px !important; font-weight: 700; }

    /* ---- Botón único de ayuda (lo arma cliente-premium.js) ----
       Accesibilidad y WhatsApp salen del mismo botón; sin el script se siguen viendo sueltos, como siempre. */
    body.cp-ayuda-activa #whatsapp-btn,
    body.cp-ayuda-activa #a11y-btn {
        left: 12px !important;
        width: 44px !important; height: 44px !important;
        opacity: 0;
        pointer-events: none;
        transform: translateY(14px) scale(.7);
        transition: opacity .18s ease, transform .18s ease;
        box-shadow: var(--cp-sombra-alta) !important;
        z-index: 49 !important;
    }
    body.cp-ayuda-activa #a11y-btn { bottom: calc(62px + 14px + 52px + var(--cp-extra, 0px)) !important; top: auto !important; }
    body.cp-ayuda-activa #whatsapp-btn { bottom: calc(62px + 14px + 52px + 52px + var(--cp-extra, 0px)) !important; top: auto !important; }
    body.cp-ayuda-abierta #whatsapp-btn,
    body.cp-ayuda-abierta #a11y-btn { opacity: 1; pointer-events: auto; transform: none; }
    .cp-ayuda-boton {
        position: fixed;
        left: 12px;
        bottom: calc(62px + 14px + var(--cp-extra, 0px));
        width: 46px; height: 46px;
        border-radius: 50%;
        border: 0;
        background: var(--brand);
        color: #fff;
        display: grid; place-items: center;
        box-shadow: 0 14px 26px -10px var(--brand);
        z-index: 50;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .cp-ayuda-boton svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
    body.cp-ayuda-abierta .cp-ayuda-boton svg { transform: rotate(90deg); }
}

/* En Fábrica hay una barra fija «Solicitar cotización» sobre la barra inferior: los botones flotantes suben encima de ella
   (cliente-premium.js pone la clase cp-cta-fija en <body> cuando existe esa barra). */
@media (max-width: 640px) {
    body.cp-cta-fija { --cp-extra: 70px; }
    body.cp-cta-fija .fv-ia-wrap:not(#_) { bottom: calc(84px + var(--cp-extra)) !important; }
    body.cp-cta-fija .fv-ia-globo:not(#_) { bottom: calc(146px + var(--cp-extra)) !important; }
}

@media (min-width: 641px) {
    .cp-ayuda-boton { display: none; }
}


/* =========================================================
   ESCRITORIO (más de 640 px) — mismo lenguaje visual que en celular:
   fondo claro, tarjetas blancas con sombra suave, precio con peso, promoción en rojo.
   No cambia estructura ni funciones: la tarjeta conserva descripción, cantidad, «Agregar» y «Visitar tienda».
   ========================================================= */
@media (min-width: 641px) {

    :root {
        --cp-linea: color-mix(in srgb, var(--ink) 9%, #fff);
        --cp-tinte: color-mix(in srgb, var(--brand) 7%, #fff);
        --cp-sombra: 0 1px 2px rgba(16,35,63,.05), 0 16px 34px -22px rgba(16,35,63,.30);
        --cp-sombra-alta: 0 2px 4px rgba(16,35,63,.06), 0 26px 44px -22px rgba(16,35,63,.40);
    }

    /* ---- Fondo y franja superior ---- */
    body.cuerpo-mercado { background: color-mix(in srgb, var(--brand) 3%, #F7F9FC) !important; }
    body.cuerpo-mercado .barra-confianza { background: var(--brand-dark); }

    /* ---- Encabezado: blanco, limpio, con la sección activa en píldora ---- */
    .nav-sitio {
        background: #fff !important;
        border-bottom: 1px solid var(--cp-linea) !important;
        box-shadow: none !important;
    }
    .nav-sitio-links a:not(#_) {
        display: inline-flex; align-items: center; gap: 6px;
        font-weight: 600; line-height: 1.2;
        border-radius: 999px;
        padding: 9px 15px !important;          /* igual arriba y abajo: la regla de la sección activa le sumaba relleno solo abajo y el texto quedaba bajo */
        border-bottom: 0 !important;
    }
    .nav-sitio-links a.activa:not(#_) {
        background: var(--cp-tinte);
        color: var(--brand) !important;
    }
    .btn-nav-carrito { box-shadow: var(--cp-sombra); }

    /* ---- Portada: degradado suave en vez de recuadro con borde ---- */
    .hero-mercado-wrap {
        border: 0 !important;
        border-radius: 28px !important;
        background: linear-gradient(180deg, var(--cp-tinte), color-mix(in srgb, var(--brand) 2%, #fff)) !important;
    }

    /* ---- Títulos de sección ---- */
    .ini-seccion-cabecera h2,
    .seccion-header h2 { font-family: var(--font-display) !important; letter-spacing: -.02em; }
    .seccion-header .btn-mkt-link,
    .seccion-header a { font-weight: 700; }

    /* ---- «Ofertas de la semana»: tarjeta clara en vez de bloque oscuro ---- */
    .ini-ofertas-seccion:not(#_) {
        background: #fff !important;
        background-image: none !important;
        color: var(--ink) !important;
        border: 1px solid var(--cp-linea);
        box-shadow: var(--cp-sombra);
    }
    .ini-ofertas-seccion:not(#_) .ini-seccion-cabecera h2 { color: var(--ink) !important; }
    .ini-ofertas-seccion:not(#_) .ini-seccion-cabecera p { color: var(--ink-muted) !important; }
    .ini-ofertas-seccion:not(#_) .ini-seccion-eyebrow { color: var(--brand) !important; }
    .ini-ofertas-grid::-webkit-scrollbar-thumb { background: var(--cp-linea); }

    /* ---- Categorías, marcas, reseñas ---- */
    .categoria-hero-item { box-shadow: var(--cp-sombra) !important; border-color: var(--cp-linea) !important; }
    .categoria-hero-item:hover { box-shadow: var(--cp-sombra-alta) !important; transform: translateY(-3px) !important; }
    .ini-marca-item { box-shadow: var(--cp-sombra); border-color: var(--cp-linea) !important; }
    .testimonio-card { box-shadow: var(--cp-sombra) !important; border-color: var(--cp-linea) !important; background: #fff !important; }

    /* ---- Filas de productos: las tarjetas se reparten todo el ancho si son pocas y siguen haciendo scroll si son muchas ---- */
    .ini-ofertas-grid:not(#_),
    .ini-productos-scroll:not(#_),
    #grid-productos-inicio:not(#_) {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(230px, 1fr);
        justify-content: stretch !important;
        padding: 6px 6px 20px !important;     /* aire para que la sombra de las tarjetas no se recorte */
    }
    .ini-ofertas-grid:not(#_) > .producto-card-mkt,
    .ini-productos-scroll:not(#_) > .producto-card-mkt,
    #grid-productos-inicio:not(#_) > .producto-card-mkt { width: auto !important; flex: none !important; min-height: 0 !important; }

    /* ---- Tarjeta de producto ---- */
    .producto-card-mkt:not(#_) {
        background: #fff !important;
        border: 1px solid var(--cp-linea) !important;
        border-radius: 20px !important;
        box-shadow: var(--cp-sombra) !important;
        overflow: hidden;
        height: auto !important;          /* mercado.js/inicio.js fijan una altura inline: aquí manda el contenido y la fila las iguala */
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .producto-card-mkt:not(#_):hover { transform: translateY(-4px) !important; box-shadow: var(--cp-sombra-alta) !important; }
    .producto-card-img-wrap { background: linear-gradient(180deg, var(--cp-tinte), #fff) !important; }
    .producto-card-img { mix-blend-mode: multiply; object-fit: contain; padding: 10px; }
    html.a11y-tema-oscuro .producto-card-img { mix-blend-mode: normal; }
    .producto-card-body { padding: 14px 16px 16px !important; }

    /* orden: marca → nombre → descripción → precio → avisos → cantidad → botón */
    .producto-card-mkt .producto-card-tienda { order: 0; }
    .producto-card-mkt .producto-card-nombre { order: 1; }
    .producto-card-mkt .producto-card-descripcion { order: 2; }
    .producto-card-mkt .producto-card-precio { order: 3; }
    .producto-card-mkt .producto-card-meta { order: 4; }
    .producto-card-mkt .producto-card-cantidad { order: 5; }
    .producto-card-mkt .producto-card-acciones { order: 6; }
    .producto-card-tienda {
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink-muted) !important;
        margin: 0 0 3px !important;
    }
    .producto-card-nombre {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: var(--ink) !important;
    }
    .producto-card-precio {
        font-family: var(--font-display) !important;
        font-weight: 800 !important;
        color: var(--ink) !important;
        margin-top: 6px;
    }
    .producto-card-precio-actual { font-size: 21px !important; color: var(--ink) !important; }
    .producto-card-precio-antes {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--ink-light) !important;
        text-decoration: line-through;
        text-decoration-color: var(--error);
        text-decoration-thickness: 1.5px;
    }
    .producto-card-precio.en-promocion .producto-card-precio-actual { color: var(--error) !important; }

    .producto-card-mkt:not(#_) .btn-agregar-carrito {
        border-radius: 999px !important;
        font-weight: 700;
        box-shadow: 0 12px 22px -12px var(--brand) !important;
    }
    .btn-ir-perfil { font-weight: 700; }
    .producto-card-badge { border-radius: 999px !important; letter-spacing: .02em; }

    /* ---- Selector de cantidad: «−» y «+» dibujados con barras, exactamente al centro ---- */
    .producto-card-cantidad { height: 38px; }
    .producto-card-cantidad button { border-radius: 12px !important; }
    .producto-card-cantidad .input-cantidad-card { border-radius: 12px !important; }
    .btn-cantidad-menos:not(#_),
    .btn-cantidad-mas:not(#_) { font-size: 0 !important; line-height: 0; position: relative; padding: 0 !important; }
    .btn-cantidad-menos::before,
    .btn-cantidad-mas::before,
    .btn-cantidad-mas::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        background: currentColor;
        border-radius: 2px;
    }
    .btn-cantidad-menos::before,
    .btn-cantidad-mas::before { width: 12px; height: 2.4px; }
    .btn-cantidad-mas::after { width: 2.4px; height: 12px; }

    /* ---- Ficha del producto (ventana) ---- */
    .ini-producto-modal-img-principal { background: linear-gradient(180deg, var(--cp-tinte), #fff) !important; }
    #ini-modal-titulo { font-family: var(--font-display) !important; letter-spacing: -.02em; }
    #ini-modal-precio:not(#_) { font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 34px !important; }
    #ini-modal-precio.en-promocion { display: block !important; }
    #ini-modal-precio .producto-card-precio-actual { font-size: 34px !important; }
    #ini-modal-precio.en-promocion .producto-card-precio-actual { color: var(--error) !important; }

    /* ---- Botones ---- */
    .btn-mkt-primary { border-radius: 999px !important; font-weight: 700; box-shadow: 0 12px 22px -12px var(--brand) !important; }
    .btn-mkt-secundario { border-radius: 999px !important; font-weight: 700; }

    /* ---- Boletín ---- */
    .ini-newsletter { border-radius: 26px; }
}

/* =========================================================
   Aviso «Instala Farmavitae Market»: queda por encima del botón del asistente de IA y del «?» de ayuda
   (antes quedaba detrás porque el asistente usa z-index 9000).
   ========================================================= */
.banner-instalar-app-publico { z-index: 9002 !important; }
@media (max-width: 640px) {
    .banner-instalar-app-publico { bottom: 74px !important; box-shadow: 0 16px 36px -8px rgba(10,30,60,.38); }
}

/* Barra inferior con hasta 7 accesos (Inicio, Marketplace, Marcas, Distribución, Fábrica, Carrito, Buscar): los nombres se achican lo justo para caber */
@media (max-width: 640px) {
    .barra-inferior-item { min-width: 0; padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 420px) {
    .barra-inferior-item { font-size: 8px !important; letter-spacing: -.15px; }
}

/* Panel de Accesibilidad en celular: encabezado fijo con botón «✕» para cerrarlo */
@media (max-width: 640px) {
    .a11y-cab {
        position: sticky; top: -16px; z-index: 2;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        margin: -16px -16px 6px; padding: 14px 16px 8px;
        background: #fff;
    }
    .a11y-cab h3 { margin: 0 !important; }
    .a11y-cerrar:not(#_) {
        display: grid !important; place-items: center;
        flex-shrink: 0; width: 38px; height: 38px; padding: 0;
        border: 0; border-radius: 50%;
        background: color-mix(in srgb, var(--brand) 9%, #fff);
        color: var(--brand); font-size: 17px; line-height: 1; font-weight: 700; cursor: pointer;
    }
    .a11y-cerrar:active { background: color-mix(in srgb, var(--brand) 18%, #fff); }
}

/* Globo «¿Necesitas ayuda? Pregúntame» en celular: aparece justo ENCIMA del botón del asistente y alineado a la derecha.
   (Antes salía hacia la izquierda, a la altura del botón, y tapaba el botón «?» de ayuda.) */
@media (max-width: 640px) {
    .fv-ia-globo:not(#_) {
        left: auto !important;
        right: 10px !important;
        bottom: 146px !important;
        max-width: min(310px, calc(100vw - 20px));
        white-space: normal !important;
    }
}


/* =====================================================================
   PRIMERA VISITA DESDE UN ANUNCIO (16 oct 2026)
   1) El regalo de bienvenida es una franja discreta («Tu primera compra incluye un regalo ›») y una hoja que sube
      desde abajo SOLO si la persona la toca (antes era una ventana a pantalla completa).
   2) En celular, la primera pantalla de Inicio muestra productos: el envío gratis se vuelve una píldora y los
      productos suben por encima de banners, marcas y categorías.
   ===================================================================== */
.regalo-franja {
    display: flex; align-items: stretch; gap: 0;
    margin: 0 0 10px; padding: 0;
    border-radius: 14px; overflow: hidden;
    background: linear-gradient(90deg, color-mix(in srgb, #F0A52B 24%, #fff), color-mix(in srgb, #F0A52B 9%, #fff));
    border: 1px solid color-mix(in srgb, #F0A52B 48%, #fff);
    color: #6F4300;
}
.regalo-franja-abrir:not(#_) {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px 8px 12px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; color: inherit; text-align: left;
}
.regalo-franja-icono { font-size: 17px; line-height: 1; flex-shrink: 0; }
.regalo-franja-texto { flex: 1; min-width: 0; line-height: 1.25; }
.regalo-franja-flecha {
    width: 22px; height: 22px; padding: 5px; box-sizing: border-box; flex-shrink: 0; display: block;
    border-radius: 50%; background: #4A2D00; color: #FFF1D2;
}
.regalo-franja-abrir:hover { opacity: 1; }
.regalo-franja-abrir:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }

/* Hoja del regalo: en celular sube desde abajo; en escritorio queda como tarjeta centrada. */
.cross-sell-overlay.regalo-hoja:not(#_) { z-index: 10002; }   /* por encima del aviso de cookies (10001) */
.regalo-hoja-asa { display: none; }
@media (max-width: 640px) {
    .regalo-franja { margin: -6px 0 8px; }   /* el <main> ya trae 16px de relleno arriba: la franja queda a ~10px del encabezado */
    .cross-sell-overlay.regalo-hoja:not(#_) { align-items: flex-end; padding: 0; }
    .regalo-hoja .regalo-bienvenida-caja {
        max-width: none; width: 100%; max-height: 82vh; overflow-y: auto;
        border-radius: 24px 24px 0 0;
        padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
        animation: regalo-hoja-sube .28s cubic-bezier(.2, .8, .2, 1);
        touch-action: pan-y;
    }
    .regalo-hoja-asa { display: block; width: 40px; height: 4px; border-radius: 99px; background: #D5DEEA; margin: 0 auto 12px; }
    .regalo-hoja .regalo-bienvenida-opciones { max-height: none; }
}
@keyframes regalo-hoja-sube { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .regalo-hoja .regalo-bienvenida-caja { animation: none !important; } }

@media (max-width: 640px) {
    /* ---- Inicio: orden de la primera pantalla ---- */
    .regalo-franja { order: -2; }
    #banner-promo-global-wrap:not(#_) { order: -1; }
    .ini-modulo-productos-cabecera:not(#_) { order: 1; }
    .ini-tabs-catalogo-movil:not(#_) { order: 2; }
    #ini-ofertas-seccion:not(#_), #seccion-novedades:not(#_), #seccion-mas-vendidos:not(#_) { order: 3; }
    .ini-banner-campana:not(#_) { order: 0; }   /* «Ofertas de la semana / Hasta 20%»: justo debajo del envío gratis, antes de los productos */
    #seccion-impacto-social-inicio:not(#_) { order: 5; }
    #ini-marcas-seccion:not(#_) { order: 6; }
    #categorias:not(#_) { order: 7; }

    #banner-promo-global-wrap:not(:empty):not(#_) { margin: 0 0 12px; }
}

/* ---- Marketplace (celular): el catálogo sube a la primera pantalla, el banner de ofertas se oculta (solo va en Inicio) y las marcas quedan después ---- */
@media (max-width: 640px) {
    main.mercado-main:has(> #seccion-catalogo):not(#_) { display: flex; flex-direction: column; }
    main.mercado-main:has(> #seccion-catalogo) > .regalo-franja { order: -3; }
    main.mercado-main:has(> #seccion-catalogo) > #banner-promo-global-wrap:not(#_) { order: -2; }
    main.mercado-main:has(> #seccion-catalogo) > .hero-mercado-wrap:not(#_) { display: none; }   /* el banner «Ofertas de la semana» solo va en Inicio (celular) */
    main.mercado-main:has(> #seccion-catalogo) > #seccion-catalogo:not(#_) { order: 0; }
    main.mercado-main:has(> #seccion-catalogo) > #seccion-marcas-mkt:not(#_) { order: 2; }
}

/* Escritorio: la franja del regalo vive dentro de la barra superior (no ocupa una fila sobre el contenido) y no se puede cerrar:
   ahí no estorba. */
@media (min-width: 641px) {
    .barra-confianza-inner > .regalo-franja {
        margin: 0 auto; width: auto; flex: 0 0 auto;
        border-radius: 999px;
        background: linear-gradient(180deg, #FFF1D2 0%, #FBD98A 100%);
        border: 0; color: #4A2D00;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 2px 8px -2px rgba(0, 0, 0, .35);
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .barra-confianza-inner > .regalo-franja:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 5px 12px -3px rgba(0, 0, 0, .4); }
    .barra-confianza-inner > .regalo-franja .regalo-franja-abrir:not(#_) { padding: 2px 4px 2px 12px; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .005em; }
    .barra-confianza-inner > .regalo-franja .regalo-franja-icono { font-size: 14px; }
    .barra-confianza-inner > .regalo-franja .regalo-franja-flecha {
        width: 17px; height: 17px; padding: 3px; box-sizing: border-box; margin-left: 1px;
        border-radius: 50%; background: #4A2D00; color: #FFF1D2; opacity: 1;
        transition: transform .15s ease;
    }
    .barra-confianza-inner > .regalo-franja .regalo-franja-abrir:hover .regalo-franja-flecha { transform: translateX(2px); }
    /* Sin regalo de bienvenida activo (no hay franja en la barra): los tres beneficios quedan centrados en la barra, con
       «¿Necesitas ayuda?» a la derecha. */
    /* (solo en pantallas anchas: en una ventana angosta se queda con el acomodo original, que sí envuelve) */
}
@media (min-width: 1100px) {
    html:not(.fv-hay-regalo) .barra-confianza-inner:not(:has(> .regalo-franja)) { display: grid; grid-template-columns: 1fr auto 1fr; }
    html:not(.fv-hay-regalo) .barra-confianza-inner:not(:has(> .regalo-franja)) .barra-confianza-lista { grid-column: 2; justify-content: center; flex-wrap: nowrap; gap: 44px; }
    html:not(.fv-hay-regalo) .barra-confianza-inner:not(:has(> .regalo-franja)) .barra-confianza-ayuda { grid-column: 3; justify-self: end; }
}
@media (min-width: 641px) {
    /* Si no hay barra superior en esta página, queda como píldora compacta al inicio del contenido. */
    main > .regalo-franja { width: fit-content; max-width: 100%; margin: 0 0 14px; border-radius: 999px; }
    main > .regalo-franja .regalo-franja-abrir:not(#_) { padding-right: 14px; }
}

/* Marketplace y página de cada tienda (celular): la barra del buscador + Filtros + orden debe llegar de borde a borde. Tenía margen negativo de 16px
   pero el <main> solo trae 12px de relleno y `max-width:100%` la dejaba de 351px: sobraba un hueco blanco a la derecha. */
@media (max-width: 640px) {
    main.mercado-main .catalogo-buscador:not(#_) {
        margin-left: -12px; margin-right: -12px;
        width: auto; max-width: none;
        padding-left: 12px; padding-right: 12px;
    }
}


/* ---- «Nuestras marcas» en Inicio (celular): mismo encabezado que «Categorías» (título grande + «Ver todas») ---- */
.ini-marcas-ver-todas { display: none; }
@media (max-width: 640px) {
    #ini-marcas-seccion .ini-seccion-cabecera:not(#_) {
        display: flex; align-items: baseline; justify-content: space-between; gap: var(--fv-s-3, 12px);
        margin: 0 0 var(--fv-s-3, 12px);
    }
    #ini-marcas-seccion .ini-seccion-cabecera h2:not(#_) {
        font-size: 19px !important; font-weight: 800; letter-spacing: normal; text-transform: none;
        color: var(--fv-ink, var(--ink)); white-space: nowrap; margin: 0;
    }
    #ini-marcas-seccion .ini-marcas-ver-todas:not(#_) {
        display: inline; flex: 0 0 auto; white-space: nowrap; font-weight: 700; color: var(--fv-blue, var(--brand));
    }
    /* Tienda (Marketplace): más aire entre «Cargar más productos» y «Nuestras marcas» */
    #seccion-marcas-mkt:not(#_) { margin-top: 40px; }
}


/* ---- Tienda (Marketplace): «Nuestras marcas» igual que en Inicio (celular) + filtro por categoría en «Todas las tiendas» ---- */
.mkt-marcas-ver-todas { display: none; }
.chips-todas-tiendas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-4, 16px); }
.chips-todas-tiendas.oculto { display: none; }
.chips-todas-tiendas .chip-categoria { display: inline-flex; align-items: center; gap: 6px; }
.chips-todas-tiendas .chip-n {
    min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center;
    background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand);
    font-size: 11px; font-weight: 800; line-height: 1.5;
}
.chips-todas-tiendas .chip-categoria.activo .chip-n { background: rgba(255, 255, 255, .25); color: #fff; }
@media (max-width: 640px) {
    #seccion-marcas-mkt .mkt-seccion-fija:not(#_) {
        display: flex; align-items: baseline; justify-content: space-between; gap: var(--fv-s-3, 12px);
        margin: 0 0 var(--fv-s-3, 12px);
    }
    #seccion-marcas-mkt .mkt-seccion-fija h2:not(#_) {
        font-size: 19px; font-weight: 800; letter-spacing: normal; text-transform: none;
        color: var(--fv-ink, var(--ink)); white-space: nowrap; margin: 0;
    }
    #seccion-marcas-mkt .mkt-marcas-ver-todas:not(#_) {
        display: inline; flex: 0 0 auto; white-space: nowrap; font-weight: 700; color: var(--fv-blue, var(--brand));
    }
    /* Píldoras de marca como en Inicio */
    #seccion-marcas-mkt .ini-marca-item:not(#_) {
        height: auto; border: 1px solid var(--fv-border, #E3EAF3); border-radius: var(--fv-r-pill, 999px);
        padding: 6px 12px; background: #fff; color: var(--fv-body, var(--ink-light));
        font-family: var(--font); font-size: 12px; font-weight: 600; text-transform: uppercase; opacity: 1;
    }
    #seccion-marcas-mkt .ini-marca-item img:not(#_) { height: 20px; width: 20px; }
    #seccion-marcas-mkt .ini-marcas-track:not(#_) { gap: var(--space-4, 16px); }
    /* Filtro del modal: una fila deslizable */
    .chips-todas-tiendas:not(.oculto) {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
        margin-left: -2px; margin-right: -2px;
    }
    .chips-todas-tiendas::-webkit-scrollbar { display: none; }
}


/* La tarjeta que describe la tienda/marca al pasar el cursor debe quedar POR ENCIMA del modal «Todas las tiendas» (z-index 1100). */
.tienda-preview-hover:not(#_) { z-index: 1200; }


/* =====================================================================
   BANNERS DE PROMOCIÓN (descuento de temporada y envío gratis) — rediseño premium, 19 oct 2026
   Sin emojis: íconos de línea. En celular se ve completo (qué descuento es, a qué aplica y hasta cuándo).
   ===================================================================== */
#banner-promo-global-wrap:not(:empty):not(#_) { gap: 12px; align-items: stretch; }
/* Franja delicada: ícono pequeño + título, una línea de texto y una fila con fechas y aviso (versiones cortas) */
#banner-promo-global-wrap .banner-promo-global-tarjeta:not(#_) {
    display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: center;
    padding: 13px 20px; border-radius: 16px; min-width: 280px;
    background:
        radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 55%),
        linear-gradient(125deg, var(--brand-dark, var(--brand)) 0%, var(--brand) 100%);
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--brand-dark, var(--brand)) 80%, transparent);
}
#banner-promo-global-wrap .banner-promo-global-tarjeta:not(#_)::before { display: none; }
#banner-promo-global-wrap .banner-promo-global-tarjeta > div:not(#_) { min-width: 0; }
#banner-promo-global-wrap .banner-promo-global-icono:not(#_) {
    width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0; font-size: 0; margin: 0;
    background: color-mix(in srgb, #fff 14%, transparent);
    border: 1px solid color-mix(in srgb, #fff 24%, transparent);
    color: #fff;
}
#banner-promo-global-wrap .banner-promo-global-icono svg { width: 21px; height: 21px; }
.bpg-etiqueta { display: none; }
#banner-promo-global-wrap .banner-promo-global-titulo:not(#_) { font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
#banner-promo-global-wrap .banner-promo-global-texto:not(#_) { font-size: 13.5px; line-height: 1.35; margin-top: 2px; color: color-mix(in srgb, #fff 88%, transparent); }
#banner-promo-global-wrap .bpg-detalle { display: none; }
.bpg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 5px; }
#banner-promo-global-wrap .banner-promo-global-vigencia:not(#_) {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none;
    font-size: 12px; font-weight: 700; letter-spacing: 0; color: color-mix(in srgb, #fff 92%, transparent);
}
#banner-promo-global-wrap .banner-promo-global-aviso:not(#_) { display: inline-flex; margin: 0; font-size: 11.5px; color: color-mix(in srgb, #fff 66%, transparent); }
.banner-promo-global-vigencia svg { flex-shrink: 0; opacity: .9; width: 13px; height: 13px; }
/* Textos cortos para todos los tamaños (los largos quedan solo en el HTML por si se necesitan) */
.bpg-largo { display: none; }
.bpg-corto { display: inline; }
.bpg-clave { font-weight: 800; color: #fff; }
@media (max-width: 640px) {
    #banner-promo-global-wrap:not(:empty):not(#_) { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
    #banner-promo-global-wrap .banner-promo-global-tarjeta:not(#_) {
        flex: none; width: 100%; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 11px 14px; border-radius: 14px; min-width: 0;
    }
    #banner-promo-global-wrap .banner-promo-global-icono:not(#_) { width: 36px; height: 36px; border-radius: 11px; }
    #banner-promo-global-wrap .banner-promo-global-icono svg { width: 19px; height: 19px; }
    #banner-promo-global-wrap .banner-promo-global-titulo:not(#_) { font-size: 15.5px; }
    #banner-promo-global-wrap .banner-promo-global-texto:not(#_) { font-size: 12.5px; }
    #banner-promo-global-wrap .banner-promo-global-vigencia:not(#_) { font-size: 11.5px; }
    #banner-promo-global-wrap .banner-promo-global-aviso:not(#_) { font-size: 11px; }
}


/* Imagen del diseño de temporada dentro de la tarjeta (se funde con el color de la tarjeta hacia la derecha) — 20 oct 2026 */
#banner-promo-global-wrap .bpg-temporada { min-height: 88px; }
#banner-promo-global-wrap .bpg-temporada > *:not(.bpg-fondo) { position: relative; z-index: 1; }
#banner-promo-global-wrap .bpg-fondo {
    position: absolute; top: 0; right: 0; bottom: 0; width: clamp(150px, 36%, 260px); z-index: 0; pointer-events: none;
    /* auto 100%: la imagen panorámica (5:1) se ve a toda su altura anclada a la derecha (las calabazas), sin que sus letras compitan con el texto */
    background-size: auto 100%; background-position: right center; background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
}
.bpg-cta {
    display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; color: #fff; text-decoration: none;
    border: 1px solid color-mix(in srgb, #fff 38%, transparent); border-radius: 999px; padding: 3px 13px; margin-top: 2px;
}
.bpg-cta:hover { background: color-mix(in srgb, #fff 16%, transparent); }
@media (max-width: 640px) {
    #banner-promo-global-wrap .bpg-temporada { min-height: 78px; }
    #banner-promo-global-wrap .bpg-fondo { width: clamp(100px, 30%, 150px); opacity: .85; }
}


/* Portada de temporada en escritorio (opción A del mockup, 20 oct 2026): imagen completa a todo el ancho con el mensaje encima.
   La posición del mensaje (izquierda / centro / derecha) se elige en el diseño de temporada. */
.fv-portada-temporada { display: none; }
/* con la portada visible las promociones van dentro de ella (en escritorio y en celular): las tarjetas aparte se ocultan */
body.fv-tiene-portada #banner-promo-global-wrap { display: none; }
@media (min-width: 761px) {
    .fv-portada-temporada {
        display: block; position: relative; overflow: hidden; border-radius: 24px; margin: 0 0 18px;
        aspect-ratio: 5 / 1; background: var(--fv-blue, #2858A0);
    }
    .fv-portada-temporada > img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .fv-portada-cap {
        position: absolute; left: 46%; top: 50%; transform: translateY(-50%); max-width: 27%;
        color: var(--fv-ink, #10233F);
    }
    .fv-portada-texto-izquierda .fv-portada-cap { left: 4%; }
    .fv-portada-texto-derecha .fv-portada-cap { left: 66%; max-width: 28%; }
    .fv-portada-cap small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
    .fv-portada-cap b { display: block; font-family: Manrope, "Plus Jakarta Sans", sans-serif; font-size: clamp(17px, 1.72vw, 23px); line-height: 1.1; text-wrap: balance; letter-spacing: -.025em; margin: 3px 0 10px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.28); }
    .fv-portada-fila { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    .fv-portada-cta { background: var(--fv-ink, #10233F); color: #fff; border-radius: 999px; padding: 8px 20px; font-size: 13px; font-weight: 800; text-decoration: none; }
    .fv-portada-cta:hover { filter: brightness(1.15); }
    .fv-portada-fila span { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--fv-ink, #10233F); }
    /* Contraste automático (mercado.js, ajustarContrastePortada): imagen clara → titular oscuro; imagen oscura → todo el mensaje en blanco */
    .fv-portada-clara .fv-portada-cap b { color: var(--fv-ink, #10233F); text-shadow: none; }
    .fv-portada-oscura .fv-portada-cap, .fv-portada-oscura .fv-portada-cap small, .fv-portada-oscura .fv-portada-fila span { color: #fff; }
    .fv-portada-oscura .fv-portada-cta { background: #fff; color: var(--fv-ink, #10233F); }
}
/* Celular y tablet angosta (≤ 760 px): la imagen completa (sin recortes) arriba y el mensaje en una franja oscura debajo, dentro de la
   misma tarjeta redondeada — así se ven las letras y las calabazas enteras y el texto nunca se encima al dibujo (20 oct 2026) */
@media (max-width: 760px) {
    .fv-portada-temporada { display: block; position: relative; overflow: hidden; border-radius: 18px; margin: 0 0 12px; background: var(--fv-ink, #2b1810); }
    main.mercado-main > .fv-portada-temporada { order: -1; }
    main.mercado-main:has(> #seccion-catalogo) > .fv-portada-temporada { order: -2; }
    .fv-portada-temporada > img { width: 100%; height: auto; aspect-ratio: 5 / 1; object-fit: cover; display: block; }
    .fv-portada-cap { position: static; padding: 11px 14px 13px; color: #fff; background: var(--fv-ink, #2b1810); }
    .fv-portada-cap small { display: none; }
    .fv-portada-cap b { display: block; font-family: Manrope, "Plus Jakarta Sans", sans-serif; font-size: 18px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 9px; color: #fff; }
    .fv-portada-cap b br { display: none; }
    .fv-portada-fila { display: flex; align-items: center; gap: 12px; }
    .fv-portada-cta { background: #fff; color: var(--fv-ink, #10233F); border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; flex: none; }
    .fv-portada-fila span { font-size: 10.5px; font-weight: 700; line-height: 1.3; color: rgba(255,255,255,.85); }
}

/* Con temporada activa (portada visible) la tarjeta principal se reduce a UNA FRANJA de una sola fila en escritorio — opción B del
   mockup, 20 oct 2026: titular en dos líneas | búsqueda (Inicio) o cifras (Tienda) | botones. Se ocultan párrafo, viñetas y tarjetas
   flotantes. Al terminar la temporada la clase fv-tiene-portada desaparece y la tarjeta vuelve a su tamaño completo. */
@media (min-width: 901px) {
    body.fv-tiene-portada .hero-mercado:not(#_) {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 20px 30px;
    }
    body.fv-tiene-portada .hero-mercado-texto:not(#_) { display: contents; }   /* sus hijos pasan a ser celdas de la franja */
    body.fv-tiene-portada .hero-mercado h1:not(#_) { grid-column: 1; grid-row: 1; font-size: 25px; line-height: 1.08; margin: 0; max-width: 310px; }
    body.fv-tiene-portada .hero-mercado .hero-kicker:not(#_),
    body.fv-tiene-portada .hero-mercado .ini-hero-kicker-nuevo:not(#_),
    body.fv-tiene-portada .hero-mercado .hero-sub:not(#_),
    body.fv-tiene-portada .hero-mercado .fila-confianza-hero:not(#_),
    body.fv-tiene-portada .hero-mercado .hero-inicio-visual:not(#_) { display: none; }
    body.fv-tiene-portada .hero-mercado .ini-buscador:not(#_) { grid-column: 2; grid-row: 1; margin: 0; width: 100%; max-width: none; }
    body.fv-tiene-portada .hero-mercado .hero-acciones:not(#_) { grid-column: 3; grid-row: 1; margin: 0; flex-wrap: nowrap; gap: 10px; }
    body.fv-tiene-portada .hero-mercado .hero-acciones a { white-space: nowrap; padding: 10px 20px; }
    /* Tienda: la tarjeta de cifras ocupa el lugar de la búsqueda, en una fila */
    body.fv-tiene-portada .hero-mercado-stats:not(#_) { grid-column: 2; grid-row: 1; flex-direction: row; justify-content: space-around; gap: 12px; padding: 10px 14px; box-shadow: none; min-width: 0; }
    body.fv-tiene-portada .hero-mercado-stats .stat-ico { display: none; }
    body.fv-tiene-portada .hero-mercado-stats .stat-card { gap: 8px; }
    body.fv-tiene-portada .hero-mercado-stats .stat-card strong { font-size: 15px; }
    body.fv-tiene-portada .hero-mercado-stats .stat-card span { font-size: 11px; line-height: 1.2; }
}


/* Celular: la barra superior de temporada no se muestra (en celular la temporada se ve dentro de las tarjetas de promoción) — 20 oct 2026 */
@media (max-width: 640px) { .fv-banner-temporada { display: none !important; } }


/* Inicio en celular: el buscador va AL LADO del logo, en la misma fila del encabezado (antes quedaba debajo) — 20 oct 2026 */
@media (max-width: 640px) {
    .nav-sitio:has(> .ini-header-buscador):not(#_) { display: flex; align-items: center; gap: 10px; padding-right: 14px; }
    .nav-sitio:has(> .ini-header-buscador) > .nav-sitio-inner:not(#_) { flex: 0 0 auto; width: auto; margin: 0; padding: 9px 0 9px 14px; }
    .nav-sitio:has(> .ini-header-buscador) > .ini-header-buscador:not(#_) { flex: 1 1 0; min-width: 0; padding: 0 !important; border-bottom: 0 !important; }
    .nav-sitio:has(> .ini-header-buscador) .ini-header-buscador .ini-buscador-form { min-height: 40px; padding: 0 12px; }
    .nav-sitio:has(> .ini-header-buscador) .ini-header-buscador .ini-buscador-input { font-size: 14px; padding: 9px 0; min-width: 0; text-overflow: ellipsis; }
}


/* Tarjetas de producto con descuento: precio anterior (tachado) a la IZQUIERDA y precio actual a la DERECHA, en una sola fila
   (antes iban uno encima del otro) — 20 oct 2026 */
.producto-card-mkt .producto-card-precio.en-promocion:not(#_) {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 10px !important;
}
.producto-card-mkt .producto-card-precio.en-promocion .producto-card-promo-badge { flex: 0 0 100%; }   /* si se muestra la etiqueta «En promoción», va arriba de ambos */


/* ---- Íconos de línea (reemplazan a los emojis en la interfaz pública) ---- */
.fv-ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.22em; display: inline-block; }
.fv-ico-lg { width: 1.6em; height: 1.6em; vertical-align: -0.4em; }
.panel-carrito-progreso { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.panel-carrito-progreso > span:not(.pc-paso) { opacity: .5; }
.panel-carrito-progreso .pc-paso { display: inline-flex; align-items: center; gap: 6px; }
/* mercado.css pinta TODOS los <span> de esta línea con el celeste casi blanco de las flechas: los pasos (span.pc-paso) quedaban invisibles */
.panel-carrito-progreso span.pc-paso { color: var(--ink-muted, #5F7089); font-size: 12.5px; }
.panel-carrito-progreso > span:not(.pc-paso) { color: var(--brand-mid, #8aa4c8); opacity: .8; }
.panel-carrito-exito-icono { display: grid; place-items: center; color: var(--success, #1a9e5c); }
.panel-carrito-exito-icono .fv-ico { width: 56px; height: 56px; }
.stat-ico { display: inline-grid; place-items: center; }
.stat-ico .fv-ico { width: 22px; height: 22px; }
.marcas-hero-stat-num .fv-ico { width: 22px; height: 22px; vertical-align: middle; }

/* ===== Carrito: caja «Retiras tu pedido en…» (retiro en tienda) — ícono, título pequeño, nombre y dirección ordenados ===== */
#carrito-retiro-info.fv-retiro-info { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; padding: 14px 16px; border-radius: 16px; background: #F0FAF9; border: 1px solid #BFE6E1; box-sizing: border-box; }
#carrito-retiro-info .fv-retiro-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0E8F86; color: #fff; }
#carrito-retiro-info .fv-retiro-ico .fv-ico { width: 20px; height: 20px; vertical-align: 0; }
#carrito-retiro-info .fv-retiro-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#carrito-retiro-info .fv-retiro-txt small { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #0B6F68; line-height: 1.2; }
#carrito-retiro-info .fv-retiro-txt strong { font-size: 15.5px; font-weight: 800; line-height: 1.3; color: #0F1D2E; }
#carrito-retiro-info .fv-retiro-txt span { font-size: 13px; line-height: 1.45; color: #46586B; overflow-wrap: anywhere; }

/* ---- Precio de la ventana del producto, todos los anchos ---- */
/* Precio de la ventana (propuesta A): precio grande + chip del descuento y, debajo, «Antes … · Ahorras …». */
#ini-modal-precio.en-promocion { display: block !important; }
#ini-modal-precio .precio-fila { display: flex; align-items: center; gap: 10px; }
#ini-modal-precio .precio-chip { font: 800 12px/1 var(--font); letter-spacing: 0; color: var(--error); background: #FCE4DF; padding: 5px 9px; border-radius: 8px; }
#ini-modal-precio .precio-detalle { margin-top: 6px; font: 400 12.5px/1.4 var(--font); letter-spacing: 0; color: var(--ink-muted); }
#ini-modal-precio .precio-detalle .producto-card-precio-antes { font-size: 12.5px !important; font-weight: 400; color: var(--ink-light); }
#ini-modal-precio .precio-detalle em { font-style: normal; font-weight: 700; color: #0F7A4A; }
#ini-modal-precio .precio-iva { margin-top: 4px; font: 400 11.5px/1.3 var(--font); letter-spacing: 0; color: var(--ink-muted); }
#ini-modal-precio .producto-card-precio-actual { font-size: 32px !important; line-height: 1; }

/* ---------- Espacio reservado para la portada de temporada (28 oct 2026) ----------
   El script del <head> activa html.fv-hay-temporada cuando hay un diseño de temporada con imagen y le pone la foto a este esqueleto;
   mercado.js lo convierte en la portada real SIN cambiar la imagen (así no se crea otra) y solo rellena el texto. El contenido de
   abajo ya no salta al aparecer la portada y la imagen es lo primero que se pinta. */
html:not(.fv-hay-temporada) .fv-portada-reserva { display: none; }
.fv-portada-reserva-cap { min-height: 101px; box-sizing: border-box; }
@media (min-width: 761px) {
    .fv-portada-reserva { background: #EDF0F4; }
    .fv-portada-reserva-cap { display: none; }
}
/* Franja «Tu primera compra incluye un regalo» (celular): se reserva su alto (40 px + márgenes -6/+8) hasta que llega. */
@media (max-width: 640px) {
    html.fv-hay-regalo main.mercado-main::before { content: ""; display: block; order: -3; height: 42px; flex: none; }
}

/* Inicio en celular: mientras llegan los productos, la primera cuadrícula reserva espacio. Sin esto las secciones de más abajo (marcas,
   categorías, opiniones) se veían al pie de la pantalla y, al aparecer los productos, salían disparadas hacia abajo (salto de diseño ~0,13).
   mercado.js pone html.fv-catalogo-listo en cuanto aparece el primer producto (o a los 8 s si no llega ninguno), y ahí se suelta la reserva. */
@media (max-width: 640px) {
    html:not(.fv-catalogo-listo) #grid-ofertas:empty { min-height: 760px; }
    html:not(.fv-catalogo-listo) #grid-productos:empty { min-height: 700px; }   /* Marketplace: igual, la lista de productos reserva su lugar mientras carga */
}

/* Franja fina de la temporada arriba de todo (escritorio): se reserva su alto (34 px) hasta que se crea, para que el encabezado no baje de golpe. */
@media (min-width: 641px) {
    html.fv-hay-franja body::before { content: ""; display: block; height: 34px; }
}

/* Escritorio: cuando se sabe que habrá franja de regalo, la barra superior usa desde el inicio el acomodo CON franja y reserva su lugar
   (283 × 21 px) hasta que farmavitae-utils.js la inserta; antes la lista de beneficios saltaba del centro a la izquierda (CLS ~0,2). */
@media (min-width: 641px) {
    html.fv-hay-regalo .barra-confianza-inner:not(:has(> .regalo-franja))::after { content: ""; order: 1; flex: 0 0 auto; width: 283px; height: 21px; margin: 0 auto; }
    html.fv-hay-regalo .barra-confianza-inner:not(:has(> .regalo-franja)) .barra-confianza-ayuda { order: 2; }
}

/* ---------- Áreas táctiles de 24 px (WCAG 2.5.8 — 28 oct 2026) ----------
   El enlace del nombre de la tienda (y «Visitar tienda» en el Marketplace de escritorio) medía 13 px de alto y PageSpeed lo marca como
   objetivo táctil pequeño. Se agranda con relleno vertical y un margen negativo IGUAL, así ocupa exactamente el mismo lugar y no se
   mueve nada: solo crece la zona que responde al toque (hacia arriba/abajo, ~6 px), y lleva a la misma página que el nombre del producto. */
@media (max-width: 640px) {
    .producto-card-mkt:not(#_) .producto-card-tienda { padding-block: 6px !important; margin-block: -6px !important; }
}
@media (min-width: 641px) {
    .producto-card-mkt:not(#_) .producto-card-tienda { padding-block: 6px !important; margin-block: -6px -3px !important; }   /* abajo conserva su margen original de 3 px */
    body.cuerpo-mercado :is(#grid-productos, #grid-productos-tienda, #grid-tienda-destacados) .producto-card-mkt:not(#_) :is(.producto-card-tienda, .btn-ir-perfil) { padding-block: 6px !important; margin-block: -6px !important; }   /* en esas cuadrículas el margen original ya era 0 */
}


/* =====================================================================
   CLS (5 nov 2026): el banner de promoción global aparecía ~1 s después y empujaba toda la página (≈0.19 de CLS).
   Se reserva su alto desde el primer pintado cuando se sabe (o se asume en la 1.ª visita) que hay promoción: html.fv-hay-promo.
   Alto medido: celular ≈189 px (2 líneas de título); escritorio ≈89 px en Marketplace y ≈109 px en Inicio (promedio).
   ===================================================================== */
html.fv-hay-promo #banner-promo-global-wrap:empty { min-height: 189px; }
@media (min-width: 641px) {
    html.fv-hay-promo #banner-promo-global-wrap:empty { min-height: 99px; }
}


/* Farmi, solo como decoración, en la tarjeta «Ofertas de la semana» de Inicio en celular (no es un botón: ni enlace propio ni clic).
   Va completo, abajo a la derecha, sobre el círculo de color. Se oculta fuera del celular, donde esa tarjeta no se muestra. */
.ini-banner-campana-farmi { display: none; }
@media (max-width: 640px) {
    .ini-banner-campana-link > .ini-banner-campana-farmi:not(#_) {
        display: block;
        position: absolute;
        right: 12px; bottom: 8px;
        width: 72px; height: 72px;
        object-fit: contain;
        pointer-events: none;
        user-select: none;
        filter: drop-shadow(0 6px 8px rgba(10, 35, 71, .22));
    }
}