/* ============================================================================
   VITOFARMA · MODERN UI LAYER
   Capa de rediseño visual moderna sobre el tema ozado.
   No reemplaza markup ni funcionalidad: solo reestiliza header, footer,
   shop (archive) y single product. Se carga DESPUÉS de las hojas del tema
   para ganar especificidad. Reversible: quitar el enqueue en functions.php.

   Marca: --theme-color-1 (#bc0811 rojo) · --theme-color-2 (#00266f azul)
   ========================================================================== */

:root {
    /* Tokens de diseño moderno derivados de la marca */
    --vf-red:        var(--theme-color-1, #bc0811);
    --vf-red-dark:   #970610;
    --vf-blue:       var(--theme-color-2, #00266f);
    --vf-blue-700:   #001b52;
    --vf-blue-50:    #eef2fb;
    --vf-ink:        #14181f;
    --vf-muted:      #5b6472;
    --vf-line:       #e7ebf2;
    --vf-bg-soft:    #f6f8fc;
    --vf-white:      #ffffff;

    --vf-radius:     14px;
    --vf-radius-sm:  10px;
    --vf-radius-lg:  20px;
    --vf-shadow-sm:  0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --vf-shadow:     0 6px 18px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
    --vf-shadow-lg:  0 18px 40px rgba(16,24,40,.14);
    --vf-ring:       0 0 0 3px rgba(0,38,111,.14);
    --vf-trans:      .22s cubic-bezier(.4,0,.2,1);

    --vf-container:  1280px;
}

/* Suavizado tipográfico global, sin tocar la fuente del tema */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--vf-ink);
}

/* Foco accesible y moderno en todos los interactivos reestilizados */
.vf-modern a:focus-visible,
.vf-modern button:focus-visible,
.envios-header a:focus-visible {
    outline: none;
    box-shadow: var(--vf-ring);
    border-radius: 6px;
}

/* ==========================================================================
   1 · HEADER
   ========================================================================== */

/* --- 1.1 Barra de envíos: marquesina infinita moderna (.vf-marquee) ---
   Reemplaza la etiqueta obsoleta <marquee> por una animación CSS con scroll
   infinito real (dos copias del mensaje en bucle). El banner sigue rojo. */
.envios-header .fondo1 { background: var(--vf-red); }
.envios-header .vf-marquee {
    background: var(--vf-red);
    color: #fff;
    overflow: hidden;
    padding: 0;
    display: block;
    width: 100%;
    position: relative;
    white-space: nowrap;
}
.envios-header .vf-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: vf-marquee 26s linear infinite;
    will-change: transform;
}
.envios-header .vf-marquee:hover .vf-marquee__track { animation-play-state: paused; }
/* Cada copia ocupa al menos el ancho del viewport, así solo se ve UN mensaje
   a la vez (la segunda copia queda fuera de pantalla hasta que entra en bucle). */
.envios-header .vf-marquee__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100vw;
    min-width: 100vw;
    padding: 11px 48px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}
.envios-header .vf-marquee__item .vf-ship-msg,
.envios-header .vf-marquee__item p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}
.envios-header .vf-marquee__item img { max-width: 44px; height: auto; vertical-align: middle; }
.envios-header .vf-marquee__item strong,
.envios-header .vf-marquee__item em { color: #fff; font-style: italic; }

/* Sentido izquierda -> derecha: arranca desplazado y vuelve a 0. */
@keyframes vf-marquee {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
/* Respeta usuarios que prefieren menos movimiento: centra sin animar. */
@media (prefers-reduced-motion: reduce) {
    .envios-header .vf-marquee__track { animation: none; justify-content: center; width: 100%; }
    .envios-header .vf-marquee__item[aria-hidden="true"] { display: none; }
}
@media (max-width: 575.98px) {
    .envios-header .vf-marquee__item { font-size: 14px; padding: 9px 32px; }
    .envios-header .vf-marquee__item img { max-width: 34px; }
}

/* --- 1.2 Top bar (cuenta, info) --- */
#header-top {
    background: var(--vf-white);
    border-bottom: 1px solid var(--vf-line);
}
#header-top .fwt-1,
#header-top .fwt-2 { font-size: 13px; color: var(--vf-muted); }
#header-top .iniciar-sesion,
#header-top .hola-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--vf-blue);
    transition: color var(--vf-trans);
}
#header-top .iniciar-sesion:hover,
#header-top .hola-admin:hover { color: var(--vf-red); }

/* --- 1.3 Masthead principal --- */
#masthead.site-header {
    background: var(--vf-white);
    box-shadow: var(--vf-shadow-sm);
    position: relative;
    z-index: 50;
}
#masthead .head-antiguo.row {
    align-items: center;
    gap: 8px;
}
#masthead .site-branding img {
    max-height: 64px;
    width: auto;
    height: auto;
    transition: transform var(--vf-trans);
}
#masthead .site-branding a:hover img { transform: scale(1.03); }

/* Botones de acción del header (contacto, filtro, menús, buscar) */
#masthead .btn-menu {
    background: var(--vf-bg-soft);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-radius-sm);
    color: var(--vf-ink);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.15;
    padding: 8px 12px;
    transition: background var(--vf-trans), border-color var(--vf-trans), transform var(--vf-trans), box-shadow var(--vf-trans);
}
#masthead .btn-menu:hover {
    background: var(--vf-blue-50);
    border-color: #cfd9ee;
    transform: translateY(-1px);
    box-shadow: var(--vf-shadow-sm);
}
#masthead .btn-menu img { transition: transform var(--vf-trans); }
#masthead .btn-menu:hover img { transform: scale(1.08); }
#btn-mobile-search p img { border-radius: var(--vf-radius-sm) !important; border-color: var(--vf-blue) !important; }

/* --- 1.4 Buscador (ajax search lite) --- */
#masthead .search-head .probox,
#masthead .px-5 .probox,
.asl_w .probox {
    border-radius: 999px !important;
    overflow: hidden;
    border: 1.5px solid var(--vf-line) !important;
    box-shadow: var(--vf-shadow-sm);
    transition: border-color var(--vf-trans), box-shadow var(--vf-trans);
}
.asl_w .probox:focus-within {
    border-color: var(--vf-blue) !important;
    box-shadow: var(--vf-ring);
}
.asl_w .probox .proinput input {
    font-size: 14px !important;
    color: var(--vf-ink) !important;
}

/* --- 1.0 HEADER FIJO con auto mostrar/ocultar al hacer scroll ---
   El JS (oz-header-scroll.js) añade .vf-header--fixed al cargar y conmuta
   .vf-header--hidden según la dirección del scroll:
     scroll ABAJO  -> visible    scroll ARRIBA -> oculto (translateY suave). */
#masthead.vf-header--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}
/* Oculto: se desliza hacia arriba fuera de la pantalla. */
#masthead.vf-header--fixed.vf-header--hidden {
    transform: translateY(-100%);
}
/* Compensación: el body recibe padding-top = altura del header fijo,
   para que el contenido no quede tapado al activarse position:fixed.
   La clase la añade el JS al <html>. */
html.vf-header-has-fixed body {
    padding-top: var(--vf-header-h, 160px);
}

/* --- 1.4b Botón "My Account" + banderas (zona derecha del header) ---
   El botón va a la izquierda y las banderas se empujan al extremo derecho. */
#masthead .grid-top .content-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
#masthead .grid-top .content-right .vf-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    transition: background var(--vf-trans), border-color var(--vf-trans), transform var(--vf-trans);
}
#masthead .grid-top .content-right .vf-account:hover,
#masthead .grid-top .content-right .vf-account:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}
#masthead .grid-top .content-right .vf-account__ic {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}
/* Banderas al extremo derecho */
#masthead .grid-top .content-right .paises {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- 1.5 Barra de menú principal (header-menu) --- */
#header-menu {
    background: var(--vf-white);
    border-top: 1px solid var(--vf-line);
    border-bottom: 1px solid var(--vf-line);
}
#header-menu .container { display: flex; justify-content: center; }
#header-menu ul#primary-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#header-menu ul#primary-menu > li { position: relative; }
#header-menu ul#primary-menu > li > a {
    display: block;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vf-ink);
    border-radius: var(--vf-radius-sm);
    transition: color var(--vf-trans), background var(--vf-trans);
}
#header-menu ul#primary-menu > li > a:hover,
#header-menu ul#primary-menu > li.current-menu-item > a {
    color: var(--vf-red);
    background: var(--vf-bg-soft);
}
/* Subrayado animado del item activo/hover */
#header-menu ul#primary-menu > li > a::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: 6px;
    height: 2px;
    background: var(--vf-red);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--vf-trans);
}
#header-menu ul#primary-menu > li:hover > a::after,
#header-menu ul#primary-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* Submenús modernos */
#header-menu ul#primary-menu ul.sub-menu {
    background: var(--vf-white);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-radius);
    box-shadow: var(--vf-shadow-lg);
    padding: 8px;
    min-width: 220px;
}
#header-menu ul#primary-menu ul.sub-menu li a {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    transition: background var(--vf-trans), color var(--vf-trans);
}
#header-menu ul#primary-menu ul.sub-menu li a:hover {
    background: var(--vf-blue-50);
    color: var(--vf-blue);
}

/* --- 1.6 Botón "Categorías" (slide menu) --- */
.button-slide-menu-left > a,
.grid-bottom .button-slide-menu-left a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--vf-red);
    color: #fff;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: var(--vf-radius-sm);
    box-shadow: var(--vf-shadow-sm);
    transition: background var(--vf-trans), transform var(--vf-trans);
}
.button-slide-menu-left > a:hover { background: var(--vf-red-dark); transform: translateY(-1px); }

/* --- 1.7 Header sticky (se fija al hacer scroll vía clase añadida por JS opcional) --- */
body.vf-sticky-on #masthead.site-header {
    position: sticky;
    top: 0;
}

/* ==========================================================================
   2 · FOOTER
   Diseño pedido: franja de BENEFICIOS arriba con FONDO AZUL, y el footer
   principal (logo, menú, follow us, pagos, copyright) con FONDO BLANCO.
   ========================================================================== */

/* --- 2.1 Franja de beneficios (4 íconos) — FONDO AZUL --- */
.pagos_content_foo {
    background: linear-gradient(180deg, var(--vf-blue) 0%, var(--vf-blue-700) 100%);
    padding: 52px 0;
    color: #fff;
}
.pagos_content_foo .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 24px;
    align-items: start;
}
/* Responsive: evita el desborde en pantallas pequeñas.
   Tablet y móvil → cuadrícula 2×2 (dos arriba, dos abajo). */
@media (max-width: 900px) {
    .pagos_content_foo .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .pagos_content_foo { padding: 36px 0; }
    .pagos_content_foo .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 14px;
    }
    /* Que el contenido de cada celda quepa sin empujar el ancho */
    .pagos_content_foo .textwidget { max-width: 100%; }
    .pagos_content_foo .textwidget img { width: 52px; }
    .pagos_content_foo .textwidget strong { font-size: 15px; }
    .pagos_content_foo .textwidget p:last-child,
    .pagos_content_foo .textwidget { font-size: 12.5px; }
}
/* Cada beneficio (text widget) como tarjeta centrada */
.pagos_content_foo .widget_text { text-align: center; }
.pagos_content_foo .textwidget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.pagos_content_foo .textwidget p { margin: 0; }
/* Íconos: se invierten a blanco (los originales son rojos sobre claro) */
.pagos_content_foo .textwidget img {
    width: 64px;
    height: auto;
    margin-bottom: 8px;
    filter: brightness(0) invert(1);
    transition: transform var(--vf-trans);
}
.pagos_content_foo .widget_text:hover .textwidget img { transform: translateY(-4px) scale(1.05); }
/* Título del beneficio (el <strong>) */
.pagos_content_foo .textwidget strong {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2px;
    margin-top: 4px;
}
/* Descripción */
.pagos_content_foo .textwidget p:last-child,
.pagos_content_foo .textwidget {
    color: #cdd8ef;
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 280px;
}

/* --- 2.2 Texto adicional (envíos a países — chips) --- */
.text-footer-adicio {
    text-align: center;
    color: var(--vf-muted);
    font-size: 13.5px;
    padding: 28px 32px 30px;
    background: var(--vf-white);
}

.text-footer-adicio .widget { margin: 0; }

/* Título de la sección */
.text-footer-adicio .widget-title {
    margin: 0 0 6px;
    color: var(--vf-blue);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: center;
}

/* Wrapper de la lista de países (ancho completo para reducir la altura) */
.vf-ship {
    max-width: 1600px;
    margin: 0 auto;
}

.vf-ship__lead {
    margin: 0 0 18px;
    color: var(--vf-muted);
    font-size: 14px;
    font-weight: 500;
}

/* Contenedor flex de chips */
.vf-ship__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Chip base (país sin enlace) */
.vf-ship__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--vf-blue-50);
    border: 1px solid var(--vf-line);
    color: var(--vf-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

/* Chip con enlace: destaca y es interactivo */
.vf-ship__chip--link {
    color: var(--vf-blue);
    border-color: #d7defa;
    cursor: pointer;
}

.vf-ship__chip--link:hover,
.vf-ship__chip--link:focus-visible {
    background: var(--vf-blue);
    border-color: var(--vf-blue);
    color: var(--vf-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 38, 111, 0.22);
    outline: none;
}

/* Toggle "Ver más" — checkbox oculto (controla el estado sin JS) */
.vf-ship__toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* Botón Ver más/menos — oculto por defecto (solo aparece en móvil) */
.vf-ship__btn { display: none; }

@media (max-width: 600px) {
    .text-footer-adicio { padding: 24px 12px 28px; }
    .vf-ship__chips { gap: 6px; }
    .vf-ship__chip { padding: 5px 11px; font-size: 12px; }

    /* Por defecto en móvil: muestra solo los primeros 12 chips.
       Usamos nth-child (no nth-of-type) porque los chips mezclan <a> y <span>. */
    .vf-ship__chips .vf-ship__chip:nth-child(n+13) { display: none; }

    /* Expandido: muestra todos */
    .vf-ship__toggle:checked ~ .vf-ship__chips .vf-ship__chip:nth-child(n+13) {
        display: inline-flex;
    }

    /* Botón visible en móvil */
    .vf-ship__btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 14px auto 0;
        padding: 9px 20px;
        border-radius: 999px;
        border: 1.5px solid var(--vf-blue);
        background: var(--vf-white);
        color: var(--vf-blue);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.18s ease, color 0.18s ease;
    }
    .vf-ship__btn:hover,
    .vf-ship__btn:active {
        background: var(--vf-blue);
        color: var(--vf-white);
    }
    /* Indicador ▾ que rota al expandir */
    .vf-ship__btn::after {
        content: "▾";
        font-size: 11px;
        line-height: 1;
        transition: transform 0.18s ease;
    }
    .vf-ship__toggle:checked ~ .vf-ship__btn::after { transform: rotate(180deg); }

    /* Alterna el texto del botón según el estado */
    .vf-ship__btn-less { display: none; }
    .vf-ship__toggle:checked ~ .vf-ship__btn .vf-ship__btn-more { display: none; }
    .vf-ship__toggle:checked ~ .vf-ship__btn .vf-ship__btn-less { display: inline; }
}

/* --- Escritorio (≥601px): mostrar solo 3 FILAS de chips + botón "Ver más" ---
   Limitamos por ALTURA (no por número de chips) porque la cantidad por fila
   varía con el ancho. --vf-ship-rows-h = altura aprox. de 3 filas. */
@media (min-width: 601px) {
    .vf-ship {
        --vf-ship-row: 34px;   /* alto de un chip */
        --vf-ship-gap: 8px;    /* gap vertical entre filas */
        /* 3 filas + 2 gaps entre ellas */
        --vf-ship-rows-h: calc(var(--vf-ship-row) * 3 + var(--vf-ship-gap) * 2);
    }

    /* Colapsado: recorta a 3 filas. */
    .vf-ship__chips {
        max-height: var(--vf-ship-rows-h);
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    /* Expandido (botón pulsado): muestra todo. */
    .vf-ship__toggle:checked ~ .vf-ship__chips {
        max-height: 2000px; /* suficientemente grande para todas las filas */
    }

    /* Botón visible también en escritorio. */
    .vf-ship__btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 16px auto 0;
        padding: 9px 22px;
        border-radius: 999px;
        border: 1.5px solid var(--vf-blue);
        background: var(--vf-white);
        color: var(--vf-blue);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease;
    }
    .vf-ship__btn:hover,
    .vf-ship__btn:focus-visible {
        background: var(--vf-blue);
        color: var(--vf-white);
        outline: none;
    }
    .vf-ship__btn::after {
        content: "▾";
        font-size: 11px;
        line-height: 1;
        transition: transform 0.18s ease;
    }
    .vf-ship__toggle:checked ~ .vf-ship__btn::after { transform: rotate(180deg); }

    /* Alterna el texto del botón. */
    .vf-ship__btn-less { display: none; }
    .vf-ship__toggle:checked ~ .vf-ship__btn .vf-ship__btn-more { display: none; }
    .vf-ship__toggle:checked ~ .vf-ship__btn .vf-ship__btn-less { display: inline; }
}

/* --- 2.3 Métodos de pago (banda intermedia) — BLANCO --- */
.pagos_content_foo + .text-footer-adicio { background: var(--vf-white); }

/* --- 2.4 Footer widgets principal (5 columnas) — FONDO BLANCO --- */
#footer-widgets {
    background: var(--vf-white);
    color: var(--vf-ink);
    border-top: 1px solid var(--vf-line);
    margin-top: 0;
}
#footer-widgets .fw-1,
#footer-widgets .fw-2,
#footer-widgets .fw-3,
#footer-widgets .fw-4,
#footer-widgets .fw-5 { font-size: 14px; color: var(--vf-muted); }

#footer-widgets a { color: var(--vf-muted); transition: color var(--vf-trans), padding var(--vf-trans); }
#footer-widgets a:hover { color: var(--vf-red); }

/* Logo del footer: el watermark gris claro vuelve visible */
#footer-widgets .fw-1 img,
#footer-widgets img.custom-logo { opacity: 1; }

/* Títulos de columnas del footer (azul con subrayado rojo) */
#footer-widgets .widget-title,
#footer-widgets .widgettitle,
#footer-widgets h2,
#footer-widgets h3,
#footer-widgets h4,
#footer-widgets h5 {
    color: var(--vf-blue);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    position: relative;
}
#footer-widgets .widget-title::after,
#footer-widgets .widgettitle::after,
#footer-widgets h2::after,
#footer-widgets h3::after,
#footer-widgets h4::after,
#footer-widgets h5::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 38px; height: 3px;
    background: var(--vf-red);
    border-radius: 3px;
}

/* Listas de enlaces del footer */
#footer-widgets ul { list-style: none; margin: 0; padding: 0; }
#footer-widgets ul li {
    padding: 7px 0;
    border-bottom: 1px solid var(--vf-line);
}
#footer-widgets ul li a { display: inline-flex; align-items: center; }
#footer-widgets ul li a:hover { padding-left: 5px; }

/* Contador de visitas: forzar texto oscuro sobre blanco */
#footer-widgets .text-white,
#footer-widgets .text-white span { color: var(--vf-ink) !important; }

/* --- 2.5 Redes flotantes --- */
.redes-flotantes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.redes-flotantes a img,
.redes-flotantes img {
    border-radius: 50%;
    box-shadow: var(--vf-shadow);
    transition: transform var(--vf-trans);
}
.redes-flotantes a:hover img { transform: scale(1.1) translateX(-2px); }

/* Ocultar las redes flotantes (FB + Instagram) en TODAS las resoluciones */
.redes-flotantes { display: none !important; }

/* --- 2.6 Colophon (copyright + métodos de pago) — BLANCO --- */
#colophon.site-footer {
    background: var(--vf-white);
    color: var(--vf-muted);
    border-top: 1px solid var(--vf-line);
    padding: 18px 0;
}
#colophon .grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
#colophon .payment-methods { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#colophon a {
    color: var(--vf-blue);
    font-size: 13px;
    font-weight: 600;
    transition: color var(--vf-trans);
}
#colophon a:hover { color: var(--vf-red); }
#colophon .site-info {
    width: 100%;
    text-align: center;
    font-size: 12.5px;
    color: var(--vf-muted);
    border-top: 1px solid var(--vf-line);
    padding-top: 12px;
    margin-top: 6px;
}
#colophon .site-info a { color: var(--vf-blue); }

/* --- 2.7 Footer fijo móvil (app bar) --- */
#footer-button-fixed {
    background: var(--vf-white);
    box-shadow: 0 -6px 18px rgba(16,24,40,.12);
    border-top: 1px solid var(--vf-line);
}

/* --- 2.7 Banner flotante "versión en español" --- */
.btn-eng {
    border-radius: 999px 0 0 999px;
    box-shadow: var(--vf-shadow);
    background: var(--vf-blue);
}
.btn-eng a { color: #fff; display: inline-flex; align-items: center; font-weight: 600; font-size: 13px; }

/* ==========================================================================
   3 · SHOP / ARCHIVE (grid de productos + tarjetas)
   ========================================================================== */

/* --- 3.1 Breadcrumb --- */
.woocommerce .woocommerce-breadcrumb {
    background: var(--vf-bg-soft);
    border-radius: var(--vf-radius);
    padding: 12px 18px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--vf-muted);
    text-align: left;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--vf-blue); font-weight: 600; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--vf-red); }

/* --- 3.2 Encabezado de la categoría / título --- */
.header-banner-products .title-breadcrumb .page-title,
.woocommerce-products-header__title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: var(--vf-ink);
    letter-spacing: -.5px;
    /* Sin recuadro gris heredado de woo-custom.css (h1.page-title) */
    background: none;
    padding: 0;
}

/* Título + botón de filtros SIEMPRE en la misma fila (botón pegado a la derecha) */
.title-breadcrumb--with-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}
/* El título ocupa el espacio disponible y puede encogerse; el botón no se encoge */
.title-breadcrumb--with-filters .page-title,
.title-breadcrumb--with-filters .woocommerce-products-header__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.title-breadcrumb--with-filters .vf-shop-filters-btn {
    flex: 0 0 auto;
}

/* Botón "Filters" — abre el panel lateral izquierdo (mismas clases que Categories).
   Solo visible en móvil/tablet; en escritorio el sidebar ya está a la vista. */
.vf-shop-filters-btn {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 9px 16px;
    background: var(--vf-blue);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--vf-shadow);
    transition: background var(--vf-trans), transform var(--vf-trans);
}
.vf-shop-filters-btn:hover,
.vf-shop-filters-btn:focus { background: var(--vf-red); color: #fff; transform: translateY(-1px); outline: none; }
.vf-shop-filters-btn svg { display: block; }

@media (max-width: 991.98px) {
    .vf-shop-filters-btn { display: inline-flex; }
}

/* Evita el desborde horizontal del .row de Bootstrap en la tienda (móvil) */
@media (max-width: 991.98px) {
    .woocommerce .row.py-4,
    .woocommerce-page .row.py-4 {
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden;
    }
}

/* --- 3.3 Grid de productos ---
   IMPORTANTE: se excluye el track de los carruseles de OZ-Sliders. Esos
   sliders renderizan su pista como <ul class="ozs__track ... products"> dentro
   de un contenedor con clase .woocommerce, así que sin el :not() esta regla
   les forzaría display:grid y rompería el carrusel (slides apilados). */
.woocommerce ul.products:not(.ozs__track):not(.ozs__track--list) {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Neutraliza las clases float legacy de WooCommerce (first/last) que rompían
   la alineación de la primera tarjeta dentro del grid. No se aplica dentro de
   un slider (.ozs) para no tocar los slides del carrusel. */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
    clear: none !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
}
/* En el slider, el ancho de cada slide lo fija el propio carrusel (flex-basis
   con --ozs-cols). Solo quitamos el float/clear legacy de WooCommerce; NO se
   fuerza width para no descuadrar la primera tarjeta (.first). */
.ozs ul.products li.product.first,
.ozs ul.products li.product.last {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    width: auto !important;
}
.woocommerce ul.products:not(.ozs__track)::before,
.woocommerce ul.products:not(.ozs__track)::after { display: none !important; content: none !important; }

/* Columnas responsivas del grid de la tienda (excluye carruseles OZ-Sliders).
   minmax(0,1fr) deja que las tarjetas bajen de su ancho mínimo → sin desborde. */
@media (max-width: 1199.98px) {
    .woocommerce ul.products:not(.ozs__track):not(.ozs__track--list) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 991.98px) {
    .woocommerce ul.products:not(.ozs__track):not(.ozs__track--list) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
/* Móvil: exactamente 2 columnas, gap reducido para que entren bien. */
@media (max-width: 575.98px) {
    .woocommerce ul.products:not(.ozs__track):not(.ozs__track--list) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* --- 3.4 Tarjeta de producto ---
   El selector excluye los slides de los carruseles de OZ-Sliders
   (li.product.ozs__slide): allí el ancho lo calcula el slider con --ozs-cols,
   y un width:auto!important lo rompería (los slides se apilarían). La tarjeta
   del carrusel se reestiliza aparte, más abajo, sin tocar el ancho. */
/* Tarjeta del shop. Se EXCLUYE el <li> que ya contiene una tarjeta del
   cotizador (.ozc-product-card pinta su propio marco) para evitar DOBLE BORDE:
   en ese caso el <li> es solo contenedor y no dibuja borde/fondo/sombra. */
.woocommerce ul.products li.product:not(.ozs__slide):not(:has(.ozc-product-card)) {
    width: auto !important;
    margin: 0 !important;
    background: var(--vf-white);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-radius);
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--vf-trans), box-shadow var(--vf-trans), border-color var(--vf-trans);
}
.woocommerce ul.products li.product:not(.ozs__slide):not(:has(.ozc-product-card)):hover {
    transform: translateY(-4px);
    box-shadow: var(--vf-shadow);
    border-color: #d7e0f1;
}

/* <li> que envuelve una tarjeta del cotizador en el shop: solo contenedor,
   sin marco propio. La tarjeta visible es la .ozc-product-card. */
.woocommerce ul.products li.product:not(.ozs__slide):has(.ozc-product-card) {
    width: auto !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
}

/* Tarjeta dentro de un carrusel OZ-Sliders: mismo aspecto que en el shop pero
   SIN tocar width/margin (el ancho de cada slide lo fija el slider).
   IMPORTANTE: se EXCLUYE el slide que ya contiene una tarjeta del cotizador
   (.ozc-product-card es la tarjeta visual). Sin :not(:has(...)) el <li>
   pintaría su propio marco y se vería doble borde/fondo/sombra. */
.ozs ul.products li.product.ozs__slide:not(:has(.ozc-product-card)) {
    background: var(--vf-white);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-radius);
    padding: 12px 12px 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--vf-trans), box-shadow var(--vf-trans), border-color var(--vf-trans);
}

/* Slide que envuelve una tarjeta del cotizador: el <li> es solo contenedor,
   la tarjeta visual es la .ozc-product-card. Se anula cualquier marco propio.
   Se hace flex-column con estiramiento para que la tarjeta llene la altura del
   slide (los slides del carrusel ya se igualan por flex-stretch del track) y
   así todas las tarjetas queden a la misma altura con el botón abajo. */
.ozs ul.products li.product.ozs__slide:has(.ozc-product-card) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
}
.ozs ul.products li.product.ozs__slide:has(.ozc-product-card) > .ozc-product-card {
    flex: 1 1 auto;
}
.ozs ul.products li.product.ozs__slide:has(.ozc-product-card):hover {
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Imagen del producto */
.woocommerce ul.products li.product #img-content-product,
.woocommerce ul.products li.product #img-hover-product {
    border-radius: var(--vf-radius-sm);
    overflow: hidden;
    background: var(--vf-bg-soft);
}
.woocommerce ul.products li.product #img-hover-product img,
.woocommerce ul.products li.product img {
    border-radius: var(--vf-radius-sm);
    transition: transform .45s cubic-bezier(.4,0,.2,1), filter var(--vf-trans);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    width: 100%;
}
.woocommerce ul.products li.product:hover #img-hover-product img,
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }

/* Título del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vf-ink);
    margin: 12px 0 6px;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--vf-trans);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--vf-blue); }

/* Precio */
.woocommerce ul.products li.product .price {
    color: var(--vf-red);
    font-weight: 800;
    font-size: 18px;
    margin: 2px 0 12px;
}
.woocommerce ul.products li.product .price del { color: #9aa3b2; font-weight: 500; font-size: 14px; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Badge de oferta moderno */
.woocommerce span.onsale {
    display: inline-flex !important;
    align-items: center;
    background: var(--vf-red);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .4px;
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: var(--vf-shadow-sm);
    position: absolute;
    top: 14px; left: 14px;
    margin: 0;
    min-height: 0;
    min-width: 0;
    z-index: 3;
}

/* Botonera de la tarjeta (add to cart + qty + details) */
.woocommerce ul.products li.product .wc-buttons {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: auto;
}
.woocommerce ul.products li.product .wc-buttons .add_to_cart_button,
.woocommerce ul.products li.product .wc-buttons .btn-details,
.woocommerce ul.products li.product .agregarcarrito {
    background: var(--vf-blue);
    color: #fff;
    border-radius: var(--vf-radius-sm);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 12px;
    transition: background var(--vf-trans), transform var(--vf-trans);
}
.woocommerce ul.products li.product .wc-buttons .add_to_cart_button:hover,
.woocommerce ul.products li.product .agregarcarrito:hover { background: var(--vf-blue-700); }
.woocommerce ul.products li.product .wc-buttons .btn-details {
    background: var(--vf-bg-soft);
    color: var(--vf-blue);
    border: 1px solid var(--vf-line);
}
.woocommerce ul.products li.product .wc-buttons .btn-details:hover { background: var(--vf-blue-50); }
.woocommerce ul.products li.product .wc-buttons .quantity {
    background: var(--vf-bg-soft);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-radius-sm);
    overflow: hidden;
}
.woocommerce ul.products li.product .wc-buttons .quantity input.qty {
    background: transparent;
    border: 0;
    text-align: center;
    width: 42px;
    font-weight: 600;
}

/* Producto sin stock */
.woocommerce ul.products li.outofstock { opacity: 1; }
.woocommerce ul.products li.outofstock #img-content-product { filter: grayscale(.4); opacity: .75; }

/* --- 3.5 Paginación --- */
.woocommerce nav.woocommerce-pagination ul {
    border: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 28px;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border-radius: var(--vf-radius-sm);
    border: 1px solid var(--vf-line);
    min-width: 42px;
    height: 42px;
    line-height: 42px;
    padding: 0;
    font-weight: 600;
    color: var(--vf-ink);
    transition: background var(--vf-trans), color var(--vf-trans), border-color var(--vf-trans);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--vf-blue-50); border-color: #cfd9ee; }
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--vf-blue);
    color: #fff;
    border-color: var(--vf-blue);
}

/* --- 3.6 Sidebar de la tienda --- */
aside.widget-area .widget-title,
aside.widget-area .widget_price_filter .widget-title {
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: var(--vf-ink);
    padding: 0 0 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--vf-line);
    text-align: left;
    text-transform: none;
}
aside.widget-area .product-categories li a {
    color: var(--vf-muted);
    padding: 7px 0;
    display: inline-block;
    transition: color var(--vf-trans), padding var(--vf-trans);
}
aside.widget-area .product-categories li a:hover { color: var(--vf-blue); padding-left: 4px; }

/* ==========================================================================
   4 · SINGLE PRODUCT (ficha)
   ========================================================================== */

/* --- 4.1 Layout general --- */
.single-product div.product .grid > .content { padding-top: 6px; }

/* --- 4.2 Galería --- */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-radius-lg);
    overflow: hidden;
    background: var(--vf-white);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img { border-radius: var(--vf-radius-lg); }
.woocommerce div.product div.images .flex-control-thumbs { gap: 10px; display: flex; flex-wrap: wrap; margin-top: 12px; }
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 72px !important;
    border: 2px solid var(--vf-line);
    border-radius: var(--vf-radius-sm);
    overflow: hidden;
    transition: border-color var(--vf-trans);
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li:hover { border-color: var(--vf-blue); }

/* Galería propia (oz-product-gallery.js): imagen principal + miniaturas.
   Antes de que cargue el JS solo se muestra la primera imagen para evitar
   que se apilen; si el JS fallara, al menos se ve la imagen principal. */
.woocommerce-product-gallery:not([data-oz-gallery]) .woocommerce-product-gallery__image:not(:first-child) { display: none; }
.woocommerce-product-gallery[data-oz-gallery] .woocommerce-product-gallery__image { display: none; }
.woocommerce-product-gallery[data-oz-gallery] .woocommerce-product-gallery__image.oz-active { display: block; }
.woocommerce-product-gallery__image a { display: block; cursor: default; }
/* Todas las imágenes principales al mismo tamaño (ancho completo). */
.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }

.oz-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.oz-gallery-thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid var(--vf-line);
    border-radius: var(--vf-radius-sm);
    background: var(--vf-white);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--vf-trans);
}
.oz-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oz-gallery-thumb:hover,
.oz-gallery-thumb.is-active { border-color: var(--vf-red); }

/* --- 4.3 Resumen (summary) --- */
.woocommerce div.product div.summary .product_title {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--vf-ink);
    letter-spacing: -.5px;
    border-bottom: 1px solid var(--vf-line);
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.woocommerce div.product div.summary p.price,
.woocommerce div.product div.summary .price {
    color: var(--vf-red);
    font-weight: 900;
    font-size: 34px;
}
.woocommerce div.product div.summary p.price del { color: #9aa3b2; font-weight: 500; font-size: 18px; }

/* --- 4.4 Formulario de compra --- */
/* Fila de compra: cantidad + botón Add en línea, alineados y con aire. */
.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation { flex: 1 1 100%; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; }
.woocommerce div.product form.cart .quantity {
    border: 1.5px solid var(--vf-line);
    border-radius: var(--vf-radius-sm);
    overflow: hidden;
}
.woocommerce div.product form.cart .quantity input.qty {
    border: 0;
    height: 52px;
    width: 64px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
.woocommerce div.product div.summary form.cart .single_add_to_cart_button {
    background: var(--vf-red);
    color: #fff;
    border-radius: var(--vf-radius-sm);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .3px;
    padding: 15px 26px;
    box-shadow: var(--vf-shadow-sm);
    transition: background var(--vf-trans), transform var(--vf-trans), box-shadow var(--vf-trans);
}
.woocommerce div.product div.summary form.cart .single_add_to_cart_button:hover {
    background: var(--vf-red-dark);
    transform: translateY(-2px);
    box-shadow: var(--vf-shadow);
}

/* Botones secundarios (WhatsApp / PDF / Compartir) */
.woocommerce div.product div.summary form.cart .single-whatsapp,
.woocommerce div.product div.summary form.cart .download-pdf,
.woocommerce div.product div.summary form.cart .shared-product {
    border-radius: var(--vf-radius-sm);
    font-weight: 700;
    transition: transform var(--vf-trans), filter var(--vf-trans);
}
.woocommerce div.product div.summary form.cart .single-whatsapp:hover,
.woocommerce div.product div.summary form.cart .download-pdf:hover,
.woocommerce div.product div.summary form.cart .shared-product:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}
.woocommerce div.product div.summary form.cart .box-share {
    border-radius: var(--vf-radius);
    box-shadow: var(--vf-shadow-lg);
    border: 1px solid var(--vf-line);
}

/* Navegación prev/next */
.prev_next_buttons {
    display: flex;
    gap: 8px;
}
.prev_next_buttons a {
    background: var(--vf-bg-soft);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-radius-sm);
    color: var(--vf-blue);
    transition: background var(--vf-trans);
}
.prev_next_buttons a:hover { background: var(--vf-blue-50); }

/* Variaciones */
.woocommerce div.product form.cart .variations select {
    border: 1.5px solid var(--vf-line);
    border-radius: var(--vf-radius-sm);
    padding: 11px 14px;
    background: var(--vf-white);
    transition: border-color var(--vf-trans), box-shadow var(--vf-trans);
}
.woocommerce div.product form.cart .variations select:focus {
    border-color: var(--vf-blue);
    box-shadow: var(--vf-ring);
    outline: none;
}

/* --- 4.5 Meta del producto --- */
.woocommerce div.product .product_meta {
    border-top: 1px solid var(--vf-line);
    margin-top: 18px;
    padding-top: 16px;
    font-size: 13px;
    color: var(--vf-muted);
}
.woocommerce div.product .product_meta a { color: var(--vf-blue); font-weight: 600; }

/* --- 4.6 Tabs --- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--vf-bg-soft);
    border: 1px solid var(--vf-line);
    border-radius: var(--vf-radius-sm) var(--vf-radius-sm) 0 0;
    margin: 0;
    padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--vf-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 13px 22px;
    display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--vf-white);
    border-bottom-color: var(--vf-white);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--vf-blue); }
.woocommerce div.product .woocommerce-tabs .panel {
    border: 1px solid var(--vf-line);
    border-radius: 0 var(--vf-radius) var(--vf-radius) var(--vf-radius);
    padding: 26px;
    margin-top: 0;
    background: var(--vf-white);
}

/* --- 4.7 Productos relacionados --- */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--vf-ink);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vf-line);
}

/* ==========================================================================
   6 · HOME
   --------------------------------------------------------------------------
   Los estilos de las secciones del Home (clases .pg-home-*) NO viven aquí.
   Se gestionan desde el panel "Clases CSS" de OZ Page Builder
   (wp_options.oz_pb_global_classes_css), igual que la página "Nosotros".
   Motivo: así se ven y previsualizan dentro del propio editor del builder.
   ========================================================================== */

/* ==========================================================================
   7 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    #header-menu ul#primary-menu > li > a { padding: 12px 12px; font-size: 13px; }
}
@media (max-width: 767px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .woocommerce ul.products li.product { padding: 10px 10px 14px; }
    .woocommerce ul.products li.product .price { font-size: 16px; }
    #footer-widgets { border-radius: 0; }
    #colophon .grid { justify-content: center; text-align: center; }
    .woocommerce div.product div.summary .product_title { font-size: 22px; }
    .woocommerce div.product div.summary p.price,
    .woocommerce div.product div.summary .price { font-size: 24px; }
}
@media (max-width: 480px) {
    .woocommerce ul.products { gap: 10px; }
    .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13px; min-height: 2.5em; }
    .woocommerce ul.products li.product .wc-buttons { flex-wrap: wrap; }
}

/* =========================================================
   6. HOME (page 111) — secciones pg-home-* (OZ Maquetador Pro V2)
   Replica FIEL del look original de WPBakery (title-prin,
   secciones #section-N) portado a las clases del maquetador.
   Origen: _wpb_post_custom_css del post 111.
   Vive aqui (modern.css) y NO en el CSS Global del maquetador,
   porque el panel del maquetador sobrescribe su propio CSS al
   guardar. Este archivo lo encola el tema (prioridad 99) y es
   inmune a los guardados del builder.
   ========================================================= */

:root {
	--pg-blue: var(--theme-color-2, #00266f);
	--pg-red: #bc0811;
	--pg-bg-soft: #f7f8fa;
	--pg-vector: url(/wp-content/uploads/2024/09/Vector.png);
}

/* Ancho comodo para secciones "theme" */
.oz-pb-root .oz-pb-section--theme > .oz-pb-inner {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* TITULO DE SECCION (equivalente a .title-prin del Bakery) */
.oz-pb-root [class*="__title"] .oz-pb-text h2 {
	font-size: 30px;
	color: var(--pg-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	margin: 0;
	font-weight: 700;
}
.oz-pb-root [class*="__title"] .oz-pb-text h2 a { color: inherit; text-decoration: none; }
.oz-pb-root [class*="__title"] .oz-pb-text h2::after {
	content: "";
	background-image: var(--pg-vector);
	background-repeat: no-repeat;
	background-position: center;
	width: 17px;
	height: 30px;
	display: block;
	flex: 0 0 auto;
}

/* HERO */
.pg-home-hero { width: 100%; }
.pg-home-hero .ozs--banner .ozs__img { width: 100%; height: auto; display: block; }
.pg-home-hero .ozs__nav-btn { background: rgba(255,255,255,.85); color: var(--pg-blue); }

/* 1. INTRO (#section-1)
   Nota: el padding/margin de la seccion lo controla el panel del maquetador
   (variables --oz-pb-padding-*). Aqui solo estilos visuales, sin spacing. */
.pg-home-intro { background: var(--pg-bg-soft) !important; }
.pg-home-intro .oz-pb-text { max-width: 1000px; margin-inline: auto; text-align: center; }
.pg-home-intro .oz-pb-text h2 {
	font-size: 30px;
	color: var(--pg-blue);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2%;
	margin: 0 0 10px;
	font-weight: 700;
}
.pg-home-intro .oz-pb-text h2::before,
.pg-home-intro .oz-pb-text h2::after {
	content: "";
	background: red;
	width: 5%;
	display: block;
	height: 1px;
	flex: 0 0 auto;
}
.pg-home-intro .oz-pb-text p { color: #000; font-size: 17px; margin: 0; }
.pg-home-intro .oz-pb-text a { color: var(--pg-red); font-weight: 500; text-decoration: none; }
.pg-home-intro .oz-pb-text a:hover { text-decoration: underline; }

/* 2. ABOUT (#section-2) — spacing del contenedor lo controla el panel */
.pg-home-about .oz-pb-grid { align-items: center; }
.pg-home-about .oz-pb-image img { width: 100%; height: auto; border-radius: 10px; }
.pg-home-about .oz-pb-text h2 { color: #000; font-weight: 700; font-size: 30px; margin: 0 0 1rem; }
.pg-home-about .oz-pb-text strong {
	margin: 2rem 0 !important;
	display: block;
	border: 1px solid #ddd;
	border-right: 0;
	border-left: 0;
	padding: 1.5rem 0;
	font-size: 21px;
	font-weight: 500;
	color: #000;
}
.pg-home-about .oz-pb-text p { color: #000; margin: 0 0 1rem; line-height: 1.6; }
.pg-home-about__btn,
.pg-home-about .oz-pb-text a.pg-home-about__btn {
	font-weight: 500;
	background: var(--pg-red);
	color: #fff !important;
	border-radius: 10px;
	padding: 12px 3rem;
	display: block;
	width: max-content;
	margin-top: 3rem;
	text-decoration: none;
	transition: background .2s ease;
}
.pg-home-about__btn:hover { background: #8f0009; }

/* 3. BANNERS */
.pg-home-banners .oz-pb-image,
.pg-home-banners .oz-pb-image a { display: block; line-height: 0; }
.pg-home-banners .oz-pb-image img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.pg-home-banners .oz-pb-image a:hover img { transform: scale(1.03); }

/* 4. PRODUCTOS (#section-4) — spacing del contenedor lo controla el panel */
.pg-home-products__title { margin-bottom: 1.5rem; }

/* 5. ANIMAL HEALTH LINE (#section-5) — spacing lo controla el panel */
.pg-home-animal { background: var(--pg-blue) !important; }
.pg-home-animal .oz-pb-grid { align-items: center; }
.pg-home-animal .oz-pb-text h2 {
	color: #fff;
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0 0 1rem;
	font-weight: 700;
	font-size: 30px;
}
.pg-home-animal .oz-pb-text h2 a { color: #fff !important; text-decoration: none; }
.pg-home-animal .oz-pb-text h2::after {
	content: "";
	background-image: var(--pg-vector);
	background-repeat: no-repeat;
	width: 17px;
	height: 30px;
	display: block;
	flex: 0 0 auto;
}
.pg-home-animal .oz-pb-text p { color: #fff; max-width: 900px; margin: 1.5rem 0 !important; line-height: 1.6; }
.pg-home-animal__img img { width: 100%; height: auto; border-radius: 10px; }
.pg-home-animal .ozs--images { margin-top: 1rem; }
.pg-home-animal .ozs--images .ozs__img { background: #fff; border: 1px solid #fff; border-radius: 10px; padding: 1.5rem; }
/* Las flechas se estilizan globalmente en la sección 7 (rojo 50% + flecha blanca). */

/* 5.b Carrusel de categorías (Carrusel simple `ozs--cards`, [oz_carousel id=9311])
   dentro de la banda animal. Las imágenes son íconos de LÍNEA BLANCOS con fondo
   transparente (horses.webp, cattle-2.webp, ...). El look objetivo: caja azul
   con borde blanco redondeado, ícono blanco directo sobre el azul (sin pastilla
   blanca) y título debajo en blanco.
   NOTE: no se tocan .ozs__track / .ozs__slide (memoria OZ-Sliders gotcha). */
/* El viewport del plugin recorta horizontalmente (oculta los slides extra).
   El scroll-snap alinea cada slide al borde del track: con el padding del
   track, el borde de la tarjeta quedaba justo en el límite recortado y se
   cortaba por el costado. Solución robusta:
   - aire vertical en el track para el hover (translateY);
   - el BORDE visible NO se dibuja en el slide sino en un wrapper interno
     (.ozs-card) con margen lateral propio, así el borde nunca toca el límite
     del slide, pase lo que pase con el snap. */
.pg-home-animal .ozs--cards .ozs__track {
	padding: 8px 8px 4px !important;   /* aire vertical (hover) + lateral (borde) */
	scroll-snap-type: none !important; /* sin snap: el borde no queda pegado al límite recortado */
}
.pg-home-animal .ozs--cards .ozs__slide { scroll-snap-align: none !important; }
.pg-home-animal .ozs--cards .ozs-card {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	margin: 0 5px !important;   /* aire lateral propio: el borde nunca llega al límite del slide */
}
/* Caja del ícono: azul con borde blanco redondeado */
.pg-home-animal .ozs--cards .ozs-card__media {
	background: var(--pg-blue, #00266f) !important;
	border: 1.5px solid rgba(255,255,255,.85) !important;
	border-radius: 16px !important;
	aspect-ratio: 1 / 1 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 22px !important;
	overflow: visible !important;
	transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.pg-home-animal .ozs--cards .ozs-card:hover .ozs-card__media,
.pg-home-animal .ozs--cards .ozs__slide:hover .ozs-card__media {
	background: #013a8f !important;
	border-color: #fff !important;
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(0,0,0,.30);
}
/* Ícono blanco directo sobre el azul (sin fondo, son PNG/WEBP transparentes) */
.pg-home-animal .ozs--cards .ozs-card__img {
	width: 74% !important;
	height: 74% !important;
	max-width: 96px;
	margin: auto;
	object-fit: contain !important;
	background: transparent !important;
	border-radius: 0 !important;
	transition: transform .22s ease;
}
.pg-home-animal .ozs--cards .ozs-card:hover .ozs-card__img { transform: scale(1.06); }
/* Título debajo, en blanco */
.pg-home-animal .ozs--cards .ozs-card__body {
	background: transparent !important;
	padding: 12px 4px 0 !important;
	text-align: center;
}
.pg-home-animal .ozs--cards .ozs-card__title {
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	margin: 0 !important;
	text-transform: none !important;
}
/* Flechas del carrusel coherentes con la banda */
/* Las flechas se estilizan globalmente en la sección 7 (rojo 50% + flecha blanca). */

/* Drag-to-scroll (cursor de agarre) para los carruseles OZ-Sliders.
   El JS oz-drag-scroll.js añade .oz-dragging mientras se arrastra. */
.ozs .ozs__track { cursor: grab; }
.ozs .ozs__track.oz-dragging {
	cursor: grabbing;
	scroll-snap-type: none;          /* arrastre fluido sin "imán" mientras se mueve */
	user-select: none;
}
.ozs .ozs__track.oz-dragging a,
.ozs .ozs__track.oz-dragging img { pointer-events: none; }

/* 6. ROOSTERS (#section-6) — spacing lo controla el panel */
.pg-home-roosters__title { margin-bottom: 1.5rem; }

/* 7. BLOG (#section-7) — spacing lo controla el panel */
.pg-home-blog__title { margin-bottom: 1.5rem; }
.pg-home-blog .ozs--blog .ozs__slide { padding: 6px; }

/* RESPONSIVE (replica de los breakpoints originales) */
@media (max-width: 767.98px) {
	.oz-pb-root [class*="__title"] .oz-pb-text h2,
	.pg-home-intro .oz-pb-text h2 {
		font-size: 25px;
		justify-content: center;
		text-align: center;
	}
	.pg-home-about .oz-pb-text h2 { font-size: 30px; text-align: center; }
	.pg-home-about .oz-pb-text p { text-align: center; }
	.pg-home-about .oz-pb-text strong { text-align: center; line-height: 1.3; }
	.pg-home-about__btn { margin: 2rem auto 0; padding: 10px 1.5rem; }
	.pg-home-animal .oz-pb-text p { text-align: center; }
}

/* ==========================================================================
   8 · PANEL "CATEGORIES" (slide menu izquierdo) — contenido más grande
   El panel se abre con el botón "Categories" y muestra el listado de
   categorías/animales (Birds, Cats, ...). Aquí lo ensanchamos y agrandamos
   el tamaño de las filas, el texto y los iconos para que se lea mejor.
   ========================================================================== */

/* Panel más ancho (por defecto 300px). Cerrado = fuera de pantalla.
   El JS abre el panel con la clase .slide-menu-show-left (left:0). */
.slide-menu-left.slide-menu-style-left { width: 380px; }
.slide-menu-left.slide-menu-style-left { left: -380px; }
.slide-menu-left.slide-menu-show-left { left: 0; }

/* El contenido debe ocupar TODO el ancho del panel para que no quede
   un hueco vacío a la derecha (donde se veía la barra de scroll suelta).
   La barra de scroll del panel queda pegada al contenido. */
.slide-menu-left .item-container,
.slide-menu-left #sidebar,
.slide-menu-left #sidebar section,
.slide-menu-left #sidebar ul.product-categories,
.slide-menu-left #sidebar ul.product-categories ul.children {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}
/* Quitamos el padding lateral ancho (era 0 3rem) que dejaba el hueco. */
.slide-menu-left #sidebar ul.product-categories,
.slide-menu-left #sidebar ul.product-categories ul.children {
	padding-left: 0;
	padding-right: 0;
}
/* Barra de scroll DENTRO del panel (overlay): fina y semitransparente,
   dibujada encima del contenido en su borde derecho, sin reservar una
   columna lateral que dejara el hueco al costado. */
.slide-menu-left.slide-menu-style {
	scrollbar-width: thin;                                   /* Firefox */
	scrollbar-color: rgba(255,255,255,.45) transparent;     /* thumb / track */
	overflow-y: overlay;                                     /* Chrome/Edge: no reserva ancho */
	overflow-y: auto;                                        /* fallback navegadores sin overlay */
}
.slide-menu-left.slide-menu-style::-webkit-scrollbar {
	width: 6px;
}
.slide-menu-left.slide-menu-style::-webkit-scrollbar-track {
	background: transparent;
}
.slide-menu-left.slide-menu-style::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,.40);
	border-radius: 999px;
}
.slide-menu-left.slide-menu-style::-webkit-scrollbar-thumb:hover {
	background: rgba(255,255,255,.65);
}

/* Título del widget (ANIMAL HEALTH): FIJO arriba mientras la lista
   se desplaza por debajo. Fondo rojo opaco para tapar lo que scrollea. */
.slide-menu-left #sidebar .widget-title {
	font-size: 1.45rem;
	padding: 16px 1.25rem;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 5;
	margin: 0;
	background: var(--vf-red);
	color: #fff;
	text-align: left;
	border-bottom: 0;
}

/* Filas del listado: más alto y más aire */
.slide-menu-left #sidebar ul.product-categories li,
.slide-menu-left #sidebar ul.children li {
	line-height: 1.4;
}

/* Enlaces de categoría más grandes y con más padding */
.slide-menu-left #sidebar ul.product-categories li a,
.slide-menu-left #sidebar ul.children li a {
	font-size: 1.25rem;
	padding: 16px 1.25rem;
	display: flex;
	align-items: center;
}

/* Iconos (animalitos) de las subcategorías más grandes */
.slide-menu-left #sidebar ul.children li a:before {
	width: 2.4rem;
	height: 2.4rem;
	margin: 0 14px 0 0;
}

@media (max-width: 575.98px) {
	/* En móvil el panel ocupa casi toda la pantalla */
	.slide-menu-left.slide-menu-style-left { width: 88vw; left: -88vw; }
	.slide-menu-left.slide-menu-show-left { left: 0; }
	.slide-menu-left #sidebar ul.product-categories li a,
	.slide-menu-left #sidebar ul.children li a { font-size: 1.15rem; }
}

/* --- Logo del menú lateral derecho ---
   El archivo del logo es la versión BLANCA (texto blanco + ícono rojo),
   pensada para fondos oscuros. El tema le ponía `background:white`, dejando
   el texto blanco invisible sobre blanco. El panel ya tiene fondo azul de
   marca, así que quitamos el recuadro blanco y el logo se ve en sus colores
   originales (igual que en el header). */
.slide-menu-right .custom-logo-link {
	display: block;
	text-align: center;
	margin-bottom: 1rem;
	border-bottom: 4px solid var(--vf-red);
}
.slide-menu-right .custom-logo-link img {
	background: transparent !important;
	padding: 1.75rem 1.5rem !important;
	border-bottom: 0 !important;
	margin-bottom: 0 !important;
	width: auto;
	max-width: 78%;
	height: auto;
}

/* ==========================================================================
   7 · FLECHAS DE NAVEGACIÓN — TODOS los carruseles OZ-Sliders
   Fondo redondo ROJO del tema al 50% de opacidad, flecha BLANCA sólida.
   Se usa !important porque el plugin fija --oz-nav-bg / --oz-nav-icon inline
   por slider (esos valores ganarían sobre el CSS externo). Aplica global.
   ========================================================================== */
.ozs .ozs__nav-btn {
	background: rgba(188, 8, 17, .5) !important;   /* #bc0811 al 50% */
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
	color: #fff !important;
	transition: background .2s ease, transform .2s ease;
}
.ozs .ozs__nav-btn:hover {
	background: rgba(188, 8, 17, .8) !important;   /* un poco más sólido al pasar */
	transform: translateY(-50%) scale(1.06);
}
/* La flecha (chevron) es un pseudo-elemento con bordes: se fuerza a blanco. */
.ozs .ozs__nav-btn::before {
	border-top-color: #fff !important;
	border-right-color: #fff !important;
}

/* ==========================================================================
   8 · PÁGINA ABOUT US (page 313) — secciones pg-about-* (OZ Maquetador)
   --------------------------------------------------------------------------
   Reconstrucción FIEL del About Us original de WPBakery, portado a las
   clases del maquetador (igual que el Home). Replica:
     - Intro: imagen (Animals.jpg) + texto "Vitofarma Corp" con subrayado
       rojo (antes .border-theme-1) y párrafos justificados, fondo gris.
     - Misión / Visión: dos tarjetas.
     - Featured Products: título con subrayado azul (antes .border-theme-2)
       + loop [featured_products].
   El layout vive en post_meta._oz_pb_layout de la página 313.
   ========================================================================== */

/* ---- 8.1 Intro (imagen + texto) ---- */
.pg-about-intro { background: var(--pg-bg-soft); }
.pg-about-intro .oz-pb-grid { align-items: center; }
.pg-about-intro__col-img,
.pg-about-intro__col-text { padding: 2.5rem !important; }
.pg-about-intro__img img,
.pg-about-intro .oz-pb-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: var(--vf-shadow);
}
/* "Vitofarma Corp": título azul con subrayado rojo (= .border-theme-1) */
.pg-about-intro__text .oz-pb-text h2 {
	color: var(--pg-blue);
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 1.25rem;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--pg-red);
	display: inline-block;
}
.pg-about-intro__text .oz-pb-text p {
	color: #000;
	text-align: justify;
	line-height: 1.7;
	margin: 0 0 1rem;
	font-size: 16px;
}

/* ==========================================================================
   8 · CABECERA MÓVIL + BARRA INFERIOR FIJA (solo celular)
   - Fila 1: marquesina de envíos limpia + barra de cuenta ordenada.
   - Fila 2: logo a la izquierda, buscador a la derecha.
   - 4 botones fijos abajo (My Account, Menu, Categories, Cart), fondo rojo.
   - Oculta el botón flotante del carrito (.ozc-sidecart-fab) en celular.
   - El panel del menú principal entra por la IZQUIERDA en celular.
   Todo acotado a <= 767.98px para no tocar escritorio/tablet ancho.
   ========================================================================== */

/* Barra inferior: oculta por defecto (escritorio/tablet ancho); se muestra solo
   dentro del @media de celular más abajo. */
#footer-button-fixed.vf-mobile-bar-wrap { display: none; }

@media (max-width: 767.98px) {

    /* --- 8.1 Fila 1: marquesina de envíos (sin solapes) --- */
    /* La marquesina ocupa su propia línea, a lo ancho. Cada copia mide EXACTO
       100vw (una a la vista, la otra fuera) para que el ícono no se monte con
       el texto de la otra copia. */
    .envios-header .fondo1 { width: 100%; }
    .envios-header .vf-marquee { width: 100vw; max-width: 100%; }
    .envios-header .vf-marquee__item {
        flex: 0 0 100vw;
        min-width: 100vw;
        max-width: 100vw;
        padding: 8px 24px;
        font-size: 13px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .envios-header .vf-marquee__item .vf-ship-msg,
    .envios-header .vf-marquee__item p {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Quita la SEGUNDA FILA "My Account" (barra de cuenta) en celular.
       Esa función ya vive en la barra inferior fija. */
    .envios-header #header-top { display: none !important; }

    /* --- 8.2 Fila 2: bandera IZQUIERDA · logo CENTRO · buscador DERECHA --- */
    /* Reduce el espacio en blanco lateral: el contenedor del header va a ancho casi
       completo y con poco padding. */
    #masthead .container {
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }
    #masthead .container .head-antiguo {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 4px;
        margin-left: 0;      /* anula los márgenes negativos de .row de Bootstrap */
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;    /* nada se sale del header */
    }

    /* Bandera de España a la IZQUIERDA */
    #masthead .head-antiguo .vf-header-flag {
        order: 0;
        flex: 0 0 56px;      /* mismo ancho base que el buscador → logo centrado */
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        line-height: 0;
    }
    #masthead .head-antiguo .vf-header-flag img {
        width: 32px;
        height: auto;
        display: block;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    }

    /* Logo al CENTRO */
    #masthead .head-antiguo .site-branding {
        order: 1;
        flex: 1 1 auto !important;
        min-width: 0;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
        overflow: hidden;
    }
    #masthead .head-antiguo .site-branding a { display: inline-block; max-width: 100%; }
    #masthead .head-antiguo .site-branding img {
        max-height: 44px;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: inline-block;
    }

    /* El botón de búsqueda móvil va a la DERECHA; el resto de botones se ocultan
       (su función vive ahora en la barra inferior fija). */
    #masthead .head-antiguo #btn-mobile-search {
        order: 5;            /* derecha */
        flex: 0 0 56px;      /* mismo ancho base que la bandera → logo centrado */
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        background: transparent;
        border: 0;
        padding: 0;
    }
    /* Solo el ÍCONO: oculta el texto "Buscar" (nodo de texto + <br> dentro del <p>)
       poniendo font-size:0 en el <p> y restituyendo el tamaño en la imagen. */
    #masthead .head-antiguo #btn-mobile-search p {
        margin: 0;
        font-size: 0 !important;
        line-height: 0;
    }
    #masthead .head-antiguo #btn-mobile-search br { display: none; }
    #masthead .head-antiguo #btn-mobile-search img {
        width: 42px !important; height: 42px !important;
        border: 2px solid var(--vf-red) !important;
        border-radius: var(--vf-radius-sm) !important;
        padding: 6px !important;
        display: block;
    }
    /* Botones del header que ya no se usan en celular (van a la barra inferior). */
    #masthead .head-antiguo .button-slide-menu-left,
    #masthead .head-antiguo .button-slide-menu-right,
    #masthead .head-antiguo .btn-menu-contacto,
    #masthead .head-antiguo .btn-menu-filtro,
    #masthead .head-antiguo .content-right,
    #masthead .head-antiguo .paises { display: none !important; }

    #masthead .head-antiguo .site-branding a { display: inline-block; max-width: 100%; }

    /* --- 8.3 BARRA INFERIOR FIJA (4 botones, fondo rojo) --- */
    #footer-button-fixed {
        display: block !important;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1000;
        background: var(--vf-red);
        box-shadow: 0 -2px 12px rgba(0,0,0,.18);
        padding: 0;
    }
    .vf-mobile-bar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: stretch;
    }
    .vf-mobile-bar__btn {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 0;
        margin: 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        color: #fff;
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        min-height: 58px;
        transition: background .18s ease;
    }
    .vf-mobile-bar__btn + .vf-mobile-bar__btn { border-left: 1px solid rgba(255,255,255,.18); }
    .vf-mobile-bar__btn:hover,
    .vf-mobile-bar__btn:active,
    .vf-mobile-bar__btn:focus { background: var(--vf-red-dark); color: #fff; outline: none; }
    .vf-mobile-bar__icon { display: inline-flex; }
    .vf-mobile-bar__icon svg { display: block; width: 24px; height: 24px; }
    .vf-mobile-bar__label { display: block; }

    /* Deja hueco para que la barra fija no tape el contenido/footer. */
    body { padding-bottom: 60px; }

    /* --- 8.4 Oculta el botón flotante del carrito (OZ-Cotizador) en celular --- */
    .ozc-sidecart-fab { display: none !important; }

    /* --- 8.5 El menú principal entra por la IZQUIERDA en celular ---
       La base posiciona el panel derecho con right:-300px / right:0. Aquí lo
       reanclamos a la izquierda (left:-300px oculto, left:0 abierto). */
    .slide-menu-right.slide-menu-style-right {
        right: auto !important;
        left: -300px;
    }
    .slide-menu-right.slide-menu-show-right {
        right: auto !important;
        left: 0;
    }
}

/* ---- 8.2 Misión / Visión (dos tarjetas) ---- */
.pg-about-mv .oz-pb-grid { align-items: stretch; }
.pg-about-mv__col { padding: 0 1rem !important; }
.pg-about-mv__card {
	background: #fff;
	border: 1px solid var(--vf-line);
	border-top: 4px solid var(--pg-blue);
	border-radius: var(--vf-radius);
	box-shadow: var(--vf-shadow-sm);
	padding: 2rem 2rem 2.25rem;
	height: 100%;
	transition: box-shadow var(--vf-trans), transform var(--vf-trans);
}
.pg-about-mv__card:hover { box-shadow: var(--vf-shadow); transform: translateY(-2px); }
.pg-about-mv__col:last-child .pg-about-mv__card { border-top-color: var(--pg-red); }
.pg-about-mv__card h3 {
	color: var(--pg-blue);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 .75rem;
}
.pg-about-mv__col:last-child .pg-about-mv__card h3 { color: var(--pg-red); }
.pg-about-mv__card p {
	color: #000;
	line-height: 1.7;
	margin: 0;
	font-size: 16px;
}

/* ---- 8.3 Featured Products ---- */
.pg-about-products__title .oz-pb-text h2 {
	color: var(--pg-blue);
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 1.75rem;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--pg-blue);
	display: inline-block;
}
.pg-about-products__title .pg-accent { color: var(--pg-red); }

/* ---- 8.4 Responsive ---- */
@media (max-width: 767.98px) {
	.pg-about-intro .oz-pb-grid { grid-template-columns: 1fr !important; }
	.pg-about-intro__col-img,
	.pg-about-intro__col-text { padding: 1.5rem !important; }
	.pg-about-mv .oz-pb-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
	.pg-about-mv__col { padding: 0 !important; margin-bottom: 1.25rem; }
	.pg-about-intro__text .oz-pb-text h2 { font-size: 22px; }
}

/* ==========================================================================
   9 · MI CUENTA (WooCommerce My Account) — rediseño "tarjetas limpias"
   Layout: nav lateral en tarjeta + contenido en tarjeta. Dashboard con
   tarjetas de acceso rápido. Responsive (móvil: nav colapsable). Tokens --vf-*.
   Override de los estilos legacy de woo-custom.css (modern.css carga prio 99).
   ========================================================================== */

.woocommerce-account {
    --acc-radius: 16px;
    --acc-radius-sm: 12px;
    --acc-card: #ffffff;
    --acc-line: #e7ecf4;
    --acc-bg: #f4f6fb;
    --acc-ink: #1a2230;
    --acc-muted: #6b7789;
}

/* Fondo blanco en la zona de contenido de la página de cuenta (sin el gris). */
.woocommerce-account .entry-content,
.woocommerce-account .site-content .bg-white {
    background: #ffffff;
}

/* Título de la página */
.woocommerce-account .entry-title,
.woocommerce-account h1.entry-title {
    text-align: center;
    color: var(--vf-blue);
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 1.6rem 0 .4rem;
}

/* Layout principal: nav + contenido en grid de 2 columnas.
   Selector acotado a .entry-content > .woocommerce para NO afectar el widget
   de categorías (.widget-area .woocommerce) que también existe en la página.
   :has(...-navigation) => la grilla nav+contenido SOLO cuando hay menú de cuenta
   (usuario logueado). En login/registro/recuperar-clave no hay menú, así que el
   contenedor queda en bloque a ancho completo y el formulario no cae en la
   columna angosta de 290px. */
.woocommerce-account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation) {
    max-width: 1180px;
    margin-inline: auto;
    padding: 8px 16px 48px;
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
/* Anula los floats/anchos legacy (woo-custom.css) que rompían el grid y fija
   explícitamente cada elemento a su columna (nav=1, contenido=2). */
.woocommerce-account .entry-content > .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account .entry-content > .woocommerce > .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0;
}
.woocommerce-account .entry-content > .woocommerce > .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 1;
}
.woocommerce-account .entry-content > .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 1;
}
/* La barra de mensajes (notices) ocupa todo el ancho */
.woocommerce-account .entry-content > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* ---------- NAV LATERAL (tarjeta con iconos) ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation.vf-acc-nav {
    background: var(--acc-card);
    border: 1px solid var(--acc-line);
    border-radius: var(--acc-radius);
    box-shadow: 0 8px 24px rgba(20, 33, 61, .06);
    padding: 10px;
    margin: 0;
    position: sticky;
    top: 16px;
    overflow: hidden;
}
.woocommerce-account .vf-acc-nav ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .vf-acc-nav li { margin: 0; }
.woocommerce-account .vf-acc-nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--acc-radius-sm);
    color: var(--acc-ink) !important;   /* gana al legacy color:white de woo-custom.css */
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.woocommerce-account .vf-acc-nav li a .vf-acc-nav__label { color: inherit; }
.vf-acc-nav .vf-acc-nav__ic { flex: 0 0 auto; color: var(--vf-blue); transition: color .18s ease; }
.vf-acc-nav .vf-acc-nav__label { flex: 1 1 auto; }
.vf-acc-nav .vf-acc-nav__chev { flex: 0 0 auto; color: #c4cedd; transition: transform .18s ease, color .18s ease; }
.woocommerce-account .vf-acc-nav li a:hover {
    background: var(--vf-blue-50, #eef3fc);
    color: var(--vf-blue) !important;
}
.woocommerce-account .vf-acc-nav li a:hover .vf-acc-nav__chev { transform: translateX(3px); color: var(--vf-blue); }
/* Item activo */
.woocommerce-account .vf-acc-nav li.is-active > a,
.woocommerce-account .vf-acc-nav li.woocommerce-MyAccount-navigation-link--is-active > a {
    background: var(--vf-blue, #00266f);
    color: #fff !important;
}
.woocommerce-account .vf-acc-nav li.is-active > a .vf-acc-nav__ic,
.woocommerce-account .vf-acc-nav li.is-active > a .vf-acc-nav__chev,
.woocommerce-account .vf-acc-nav li.woocommerce-MyAccount-navigation-link--is-active > a .vf-acc-nav__ic,
.woocommerce-account .vf-acc-nav li.woocommerce-MyAccount-navigation-link--is-active > a .vf-acc-nav__chev { color: #fff; }
/* "Log out" en rojo sutil */
.woocommerce-account .vf-acc-nav li.woocommerce-MyAccount-navigation-link--customer-logout > a { color: var(--vf-red) !important; }
.woocommerce-account .vf-acc-nav li.woocommerce-MyAccount-navigation-link--customer-logout > a .vf-acc-nav__ic { color: var(--vf-red); }
.woocommerce-account .vf-acc-nav li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover { background: #fdecec; }

/* Botón toggle (solo móvil) */
.vf-acc-nav__toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 10px;
    background: var(--vf-blue);
    color: #fff;
    border: 0;
    border-radius: var(--acc-radius-sm);
    padding: 13px 16px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.vf-acc-nav__toggle-ic { display: inline-flex; }

/* ---------- CONTENIDO (tarjeta) ---------- */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--acc-card);
    border: 1px solid var(--acc-line);
    border-radius: var(--acc-radius);
    box-shadow: 0 8px 24px rgba(20, 33, 61, .06);
    padding: 28px 28px 30px;
    margin: 0;
    min-width: 0;            /* permite encoger dentro del grid */
    min-height: 320px;
    color: var(--acc-ink);
    overflow-wrap: anywhere; /* nada de texto se sale de la tarjeta */
}
/* La tabla de pedidos puede ser ancha: scroll interno en vez de desbordar. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content .shop_table { display: table; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-orders,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-downloads { overflow-x: auto; }
.woocommerce-account .woocommerce-MyAccount-content > p { color: var(--acc-muted); line-height: 1.7; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.vf-acc-card):not(.vf-acc-shop-cta) {
    color: var(--vf-blue);
    font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--acc-ink); font-weight: 800; }

/* ---------- DASHBOARD: bienvenida + tarjetas ---------- */
.vf-acc-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--acc-line);
}
.vf-acc-welcome__avatar {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--vf-blue), #0a3fa8);
    color: #fff;
    font-size: 24px; font-weight: 800;
    box-shadow: 0 6px 16px rgba(0, 38, 111, .25);
}
/* El bloque de texto debe poder encoger para que un nombre/email largo NO
   desborde la tarjeta (min-width:0 + corte de palabra). */
.vf-acc-welcome__text { flex: 1 1 auto; min-width: 0; }
.vf-acc-welcome__title {
    margin: 0 0 2px;
    font-size: 22px;
    font-weight: 800;
    color: var(--acc-ink);
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}
.vf-acc-welcome__title span { color: var(--vf-blue); overflow-wrap: anywhere; }
.vf-acc-welcome__sub { margin: 0; color: var(--acc-muted); font-size: 14px; overflow-wrap: anywhere; }
.vf-acc-welcome__sub a { color: var(--vf-red) !important; font-weight: 700; }

.vf-acc-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.vf-acc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--acc-line);
    border-radius: var(--acc-radius-sm);
    background: #fbfcfe;
    text-decoration: none !important;
    color: var(--acc-ink) !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.vf-acc-card:hover {
    border-color: #cfdcf2;
    background: #fff;
    box-shadow: 0 10px 22px rgba(20, 33, 61, .08);
    transform: translateY(-2px);
}
.vf-acc-card__ic {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--vf-blue-50, #eef3fc);
    color: var(--vf-blue);
    transition: background .18s ease, color .18s ease;
}
.vf-acc-card:hover .vf-acc-card__ic { background: var(--vf-blue); color: #fff; }
.vf-acc-card__body { display: flex; flex-direction: column; min-width: 0; }
.vf-acc-card__title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.vf-acc-card__desc { font-size: 12.5px; color: var(--acc-muted); margin-top: 2px; }
.vf-acc-card__chev { margin-left: auto; flex: 0 0 auto; color: #c4cedd; transition: transform .18s ease; }
.vf-acc-card:hover .vf-acc-card__chev { transform: translateX(3px); color: var(--vf-blue); }

.vf-acc-shop-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--vf-red);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 16px rgba(188, 8, 17, .22);
}
.vf-acc-shop-cta:hover { background: var(--vf-red-dark, #970610); transform: translateY(-1px); }

/* ---------- TABLAS (orders, downloads) ---------- */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    border: 1px solid var(--acc-line);
    border-radius: var(--acc-radius-sm);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    background: #f3f6fc;
    color: var(--acc-ink);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 14px 16px;
    border: 0;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    padding: 14px 16px;
    border-top: 1px solid var(--acc-line);
    vertical-align: middle;
    font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td { background: #f9fbff; }

/* Botones Woo dentro de la cuenta */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button {
    background: var(--vf-blue);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 20px;
    font-weight: 700;
    transition: background .18s ease, transform .18s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover { background: #0a3fa8; transform: translateY(-1px); }

/* ---------- FORMULARIOS (account details, addresses) ---------- */
.woocommerce-account .woocommerce-MyAccount-content form .form-row label,
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-address-fields label {
    font-weight: 600;
    color: var(--acc-ink);
    font-size: 13.5px;
    margin-bottom: 6px;
    display: block;
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content .select2-container .select2-selection {
    width: 100%;
    border: 1.5px solid var(--acc-line);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
    outline: 0;
    border-color: var(--vf-blue);
    box-shadow: 0 0 0 3px rgba(0, 38, 111, .12);
}
.woocommerce-account .addresses .title h3 { color: var(--vf-blue); border-bottom: 2px solid var(--acc-line); padding-bottom: 8px; }

/* ---------- DIRECCIONES (edit-address) ---------- */
/* Anula los márgenes negativos de Bootstrap (.row / .u-columns) que pegaban el
   contenido al borde izquierdo de la tarjeta y comían el padding. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.u-columns,
.woocommerce-account .woocommerce-MyAccount-content .u-columns,
.woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-account .woocommerce-MyAccount-content .u-columns > .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-columns > .u-column2 {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}
/* "Edit"/"Add" no pegado al borde derecho */
.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.woocommerce-account .woocommerce-Address-title h3 { float: none !important; margin: 0; }
.woocommerce-account .woocommerce-Address-title .edit { white-space: nowrap; }
.woocommerce-account .woocommerce-Address address { color: var(--acc-ink); line-height: 1.7; font-style: normal; margin-top: 8px; }

/* ---------- LOGIN / REGISTRO (no logueado) ---------- */
/* El wrapper trae la clase Bootstrap `d-flex` (display:flex!important): la
   convertimos en grid de 2 columnas reales (y a 1 col en móvil). */
.woocommerce-account .u-columns.col2-set,
.woocommerce-account .woocommerce > .col2-set {
    max-width: 980px;
    margin: 8px auto 48px;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 16px;
    align-items: start;
}
/* WooCommerce le mete un clearfix (.col2-set::before/::after) que, al ser el
   contenedor una grilla, se vuelven ÍTEMS del grid y ocupan celdas: empujan
   Login y Register en diagonal (fila1-col2 / fila2-col1). Los sacamos del grid. */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after,
.woocommerce-account .woocommerce > .col2-set::before,
.woocommerce-account .woocommerce > .col2-set::after {
    display: none !important;
}
/* Columnas: ancho automático, sin float ni anchos legacy. */
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2,
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    display: block;
    background: var(--acc-card);
    border: 1px solid var(--acc-line);
    border-radius: var(--acc-radius);
    box-shadow: 0 8px 24px rgba(20, 33, 61, .06);
    padding: 28px;
}
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
    text-align: center;
    color: var(--vf-blue);
    font-weight: 800;
    margin-bottom: 6px;
}
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
    width: 100%;
    justify-content: center;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
    /* Una sola columna: nav arriba, contenido debajo. */
    .woocommerce-account .entry-content > .woocommerce {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 8px 12px 40px;
    }
    .woocommerce-account .entry-content > .woocommerce > .woocommerce-MyAccount-navigation {
        grid-column: 1;
        grid-row: 1;
    }
    .woocommerce-account .entry-content > .woocommerce > .woocommerce-MyAccount-content {
        grid-column: 1;     /* baja a la fila 2 de forma natural */
        grid-row: auto;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation.vf-acc-nav { position: static; }
    /* nav colapsable en móvil */
    .vf-acc-nav__toggle { display: flex; }
    .woocommerce-account .vf-acc-nav ul {
        display: none;
        margin-top: 8px;
    }
    .woocommerce-account .vf-acc-nav.is-open ul { display: block; }
    .woocommerce-account .woocommerce-MyAccount-content { padding: 22px 18px 24px; }
    .vf-acc-cards { grid-template-columns: 1fr; }
    /* Login y Registro apilados en una sola columna */
    .woocommerce-account .u-columns.col2-set,
    .woocommerce-account .woocommerce > .col2-set {
        grid-template-columns: 1fr !important;
        gap: 16px;
        margin-bottom: 32px;
    }
    /* Direcciones (Billing/Shipping) apiladas en una columna */
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses.u-columns,
    .woocommerce-account .woocommerce-MyAccount-content .u-columns,
    .woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }
    .woocommerce-account .woocommerce-form-login,
    .woocommerce-account .woocommerce-form-register { padding: 20px 16px; }
    .vf-acc-welcome { flex-direction: row; }
}
@media (max-width: 480px) {
    .vf-acc-welcome__title { font-size: 19px; }
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table thead { display: none; }
}

/* ==========================================================================
   9 · ANIMACIONES
   9.1 Entrada de bloques (reveal on scroll) — fade + subir.
       El estado inicial (oculto) SOLO se aplica cuando el JS marca
       <html class="vf-reveal-ready">. Sin JS, todo se ve normal (sin saltos).
   ========================================================================== */
.vf-reveal-ready .vf-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--vf-reveal-delay, 0ms);
    will-change: opacity, transform;
}
.vf-reveal-ready .vf-reveal.vf-in {
    opacity: 1;
    transform: none;
}

/* Imagen de "Animal Health Line" (perro/gallo/gato): entra de DERECHA a
   IZQUIERDA. Sobrescribe el translateY genérico con un translateX desde la
   derecha. Mayor especificidad para ganar a la regla anterior. */
.vf-reveal-ready .pg-home-animal__col-img .vf-reveal,
.vf-reveal-ready .pg-home-animal__col-img.vf-reveal {
    opacity: 0;
    transform: translateX(80px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--vf-reveal-delay, 0ms);
}
.vf-reveal-ready .pg-home-animal__col-img .vf-reveal.vf-in,
.vf-reveal-ready .pg-home-animal__col-img.vf-reveal.vf-in {
    opacity: 1;
    transform: none;
}

/* Accesibilidad: sin movimiento si el usuario lo prefiere. */
@media (prefers-reduced-motion: reduce) {
    .vf-reveal-ready .vf-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 9.2 Botones — brillo deslizante (shine) al pasar el cursor.
   Aplica a los botones de marca del sitio (maquetador, Woo, cotizador, header). */
.oz-pb-block a.button,
.oz-pb-block .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.checkout-button,
.single_add_to_cart_button,
.ozc-product-card__btn,
.ozc-sidecart__btn,
.ozc-quote-cart__btn,
.vf-account,
.vf-ship__btn,
.agregarcarrito,
.add_to_cart_button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* El reflejo: una banda diagonal de luz que cruza el botón. */
.oz-pb-block a.button::after,
.oz-pb-block .button::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce .button.alt::after,
.checkout-button::after,
.single_add_to_cart_button::after,
.ozc-product-card__btn::after,
.ozc-sidecart__btn::after,
.ozc-quote-cart__btn::after,
.vf-account::after,
.vf-ship__btn::after,
.agregarcarrito::after,
.add_to_cart_button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 75%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    transition: left 0s;
}
.oz-pb-block a.button:hover::after,
.oz-pb-block .button:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce .button.alt:hover::after,
.checkout-button:hover::after,
.single_add_to_cart_button:hover::after,
.ozc-product-card__btn:hover::after,
.ozc-sidecart__btn:hover::after,
.ozc-quote-cart__btn:hover::after,
.vf-account:hover::after,
.vf-ship__btn:hover::after,
.agregarcarrito:hover::after,
.add_to_cart_button:hover::after {
    left: 150%;
    transition: left 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
    .oz-pb-block a.button::after,
    .woocommerce a.button::after,
    .checkout-button::after,
    .ozc-product-card__btn::after,
    .ozc-sidecart__btn::after,
    .vf-account::after,
    .vf-ship__btn::after,
    .agregarcarrito::after { display: none; }
}

/* ==========================================================================
   10 · POPUP QHALY (home) — PC + móvil, border-radius 20px, botón X mejorado
   PC = .popup-academia (img POP-UP-QHALY-ingles.webp, horizontal).
   Móvil (≤768px) = #popup-mobile-qhaly (img vertical); el de PC se oculta.
   Sustituye los estilos legacy (style.css) — modern.css carga prio 99.
   ========================================================================== */

/* --- Overlay PC --- */
.capa-academia {
    position: fixed; inset: 0;
    background: rgba(8, 14, 28, .62);
    backdrop-filter: blur(2px);
    z-index: 100000;
    display: none;
}
.capa-academia.active { display: block; animation: vf-pop-fade .25s ease; }

/* --- Popup PC --- */
.popup-academia {
    position: fixed;
    inset: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    max-width: min(92vw, 880px);
    z-index: 100001;
    display: none;
}
.popup-academia.active { display: block; animation: vf-pop-in .32s cubic-bezier(.16,.84,.44,1); }

.popup-academia .content { display: block; }
.popup-academia .content a { display: block; line-height: 0; }
.popup-academia .content img {
    display: block;
    width: 100%;
    height: auto;
    max-width: min(92vw, 880px);
    max-height: 86vh;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* --- Botón X (PC) — círculo flotante en la esquina --- */
.popup-academia .cerrar {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #14181f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transition: transform .18s ease, background .18s ease, color .18s ease;
    z-index: 2;
}
.popup-academia .cerrar:hover {
    background: var(--vf-red, #bc0811);
    color: #fff;
    transform: rotate(90deg) scale(1.06);
}
.popup-academia .cerrar:focus-visible { outline: 3px solid rgba(188, 8, 17, .35); outline-offset: 2px; }

/* --- Popup móvil — oculto por defecto, visible solo ≤768px --- */
#popup-mobile-qhaly { display: none; }

@media (max-width: 768px) {
    /* En móvil oculta el popup de PC y su capa, muestra el móvil */
    .popup-academia, .capa-academia { display: none !important; }

    #popup-mobile-qhaly {
        display: flex !important;
        position: fixed; inset: 0;
        z-index: 100001;
        align-items: center;
        justify-content: center;
        animation: vf-pop-fade .25s ease;
    }
    #popup-mobile-qhaly .popup-mobile-overlay {
        position: absolute; inset: 0;
        background: rgba(8, 14, 28, .68);
        backdrop-filter: blur(2px);
    }
    #popup-mobile-qhaly .popup-mobile-content {
        position: relative;
        z-index: 2;
        width: 88%;
        max-width: 380px;
        text-align: center;
        animation: vf-pop-in .32s cubic-bezier(.16,.84,.44,1);
    }
    #popup-mobile-qhaly .popup-mobile-content a { display: block; line-height: 0; }
    #popup-mobile-qhaly .popup-mobile-content img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 20px;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
    }
    /* Botón X (móvil) — mismo estilo circular */
    #popup-mobile-qhaly .popup-mobile-close {
        position: absolute;
        top: -14px;
        right: -14px;
        width: 40px;
        height: 40px;
        margin: 0; padding: 0;
        border: none;
        border-radius: 50%;
        background: #fff;
        color: #14181f;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
        transition: transform .18s ease, background .18s ease, color .18s ease;
        z-index: 3;
    }
    #popup-mobile-qhaly .popup-mobile-close:hover {
        background: var(--vf-red, #bc0811);
        color: #fff;
        transform: rotate(90deg) scale(1.06);
    }
}

@keyframes vf-pop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vf-pop-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   Lightbox de la galería de producto (lupa 🔍 + modal)
   ========================================================= */
.oz-gallery-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    cursor: zoom-in;
    z-index: 5;
    display: grid;
    place-items: center;
    transition: transform 0.15s ease;
}
.oz-gallery-zoom:hover { transform: scale(1.06); }
.oz-gallery-zoom::before {
    content: "";
    width: 20px;
    height: 20px;
    background: #111;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15.5%2014h-.79l-.28-.27a6.5%206.5%200%201%200-.7.7l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200A4.5%204.5%200%201%201%2014%209.5%204.49%204.49%200%200%201%209.5%2014z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M15.5%2014h-.79l-.28-.27a6.5%206.5%200%201%200-.7.7l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200A4.5%204.5%200%201%201%2014%209.5%204.49%204.49%200%200%201%209.5%2014z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.oz-lightbox-open { overflow: hidden; }

.oz-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}
.oz-lightbox.is-open { display: flex; }
.oz-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}
.oz-lightbox__img {
    position: relative;
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.oz-lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.oz-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.oz-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.oz-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.oz-lightbox__prev { left: 20px; }
.oz-lightbox__next { right: 20px; }

/* Zoom al pasar el mouse sobre la imagen principal (hover = acerca, clic = lightbox) */
.woocommerce-product-gallery__image.oz-zoomable {
    overflow: hidden;
}
.woocommerce-product-gallery__image.oz-zoomable img {
    transition: transform 0.25s ease;
    cursor: zoom-in;
}
.woocommerce-product-gallery__image.oz-zoomable:hover img {
    transform: scale(2);
}

/* Zoom con clic dentro del lightbox (clic acerca, clic de nuevo aleja) */
.oz-lightbox { overflow: hidden; }
.oz-lightbox__img {
    cursor: zoom-in;
    transition: transform 0.2s ease;
}
.oz-lightbox__img.is-zoomed {
    cursor: zoom-out;
    transform: scale(2.2);
}