/*
  Hoja de estilos para personalización por usuario (CMS)
  - Se carga después de los estilos del tema y de one-menu-categorias.css
  - Usar para sobreescribir colores, tamaños, márgenes, etc.
  - Evitar !important salvo que sea necesario
*/

/* ====== Variables (opcional, si el tema utiliza CSS vars) ====== */
:root {
  /* Ejemplo de variables a mapear desde CMS */
  /* --one-title-color: #000; */
}

/* ====== Menú Categorías (posición 2) ====== */
/* Color de enlaces destacados (título con hijos) */
.one-title-link {
  /* color: var(--one-title-color, #000); */
  /* font-weight: 600; */
}

/* Separación extra para títulos (ajustable) */
.one-title-link {
  /* padding-top: 6px; */
  /* padding-bottom: 6px; */
}

/* ====== Blog y Post - estilos idénticos para .button (categoría/filtro) ====== */
/* Fuente: post. Mismo color, tamaño y espacio subrayado en ambos */
.pt-filter-nav .button,
.pt-filter-nav a.button,
.pt-post-single .pt-autor a.button {
    position: relative !important;
    color: #333333 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    transition: all 0.2s linear;
}
.pt-filter-nav .button:hover,
.pt-filter-nav a.button:hover,
.pt-post-single .pt-autor a.button:hover {
    color: #48CAB2 !important;
}
/* Blog: separar categorías 3px más del título */
.pt-filter-nav {
    margin-top: -9px !important; /* -12px + 3px más separación */
}
@media (max-width: 575px) {
    .pt-filter-nav {
        margin-top: -4px !important; /* -7px + 3px en móvil */
    }
}
/* Subrayado: blog 5px más arriba que post */
.pt-filter-nav .button:before,
.pt-filter-nav a.button:before {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: "";
    background-color: #333333;
    height: 2px;
    transition: width 0.2s linear;
}
.pt-post-single .pt-autor a.button:before {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: "";
    background-color: #333333;
    height: 2px;
    transition: width 0.2s linear;
}
.pt-filter-nav .button:hover:before,
.pt-filter-nav a.button:hover:before,
.pt-post-single .pt-autor a.button:hover:before {
    width: 100%;
}
/* Activo (blog): solo cambio de color, sin subrayado */
.pt-filter-nav .button.active:before,
.pt-filter-nav a.button.active:before {
    width: 0% !important;
}
.pt-post-single .pt-autor {
    color: #777777;
    font-size: 16px !important;
    line-height: 24px !important;
}
/* Etiquetas en post: 14px !important, alineadas al texto */
.pt-post-single .post-meta .item,
.pt-post-single .post-meta span:not(.item) a {
    font-size: 14px !important;
    line-height: 20px !important;
}
.pt-post-single .post-meta.post-meta-etiquetas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pt-post-single .post-meta.post-meta-etiquetas .pt-tags-row {
    margin: 0 !important;
    margin-top: 6px !important;
    padding-left: 0 !important;
}
.pt-post-single .post-meta.post-meta-etiquetas .pt-tags-row a:first-child {
    margin-left: 0 !important;
}

/* Adjuntos del blog: mismo estilo que categoría (subrayado + color hover) */
.pt-post-single .one-list-dot.pt-tabs-top li a.button {
    position: relative;
    color: #333333 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s linear;
}
.pt-post-single .one-list-dot.pt-tabs-top li a.button:hover {
    color: #48CAB2 !important;
}
.pt-post-single .one-list-dot.pt-tabs-top li a.button:before {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: "";
    background-color: #333333;
    height: 2px;
    transition: width 0.2s linear;
}
.pt-post-single .one-list-dot.pt-tabs-top li a.button:hover:before {
    width: 100%;
}

/* Adjuntos de producto (ficha): mismo estilo que blog (subrayado + color hover) */
#one-producto-acordeon-tabs .one-list-dot.pt-tabs-top li a.button {
    position: relative;
    color: #333333 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s linear;
}
#one-producto-acordeon-tabs .one-list-dot.pt-tabs-top li a.button:hover {
    color: #48CAB2 !important;
}
#one-producto-acordeon-tabs .one-list-dot.pt-tabs-top li a.button:before {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: "";
    background-color: #333333;
    height: 2px;
    transition: width 0.2s linear;
}
#one-producto-acordeon-tabs .one-list-dot.pt-tabs-top li a.button:hover:before {
    width: 100%;
}

/* ====== Espacio reservado para otros módulos ====== */
/* Botonera posición 1 (cuando se implemente) */
/* .one-pos1-title-link { } */

/* Modales (si se desea ajustar solo colores, no z-index) */
/* .modal-backdrop { background: rgba(0,0,0,.6); } */

/* ====== Módulo Comentarios/Reviews - Padding en container-fluid ====== */
/* Aplicar padding-left y padding-right de 25px SOLO cuando es container-fluid */
/* Este padding se suma al padding vertical que viene desde la BD */
#pt-pageContent .modulo-comentarios .container-fluid,
#pt-pageContent .modulo-reviews .container-fluid,
#pt-pageContent .modulo-comentarios .container-fluid-custom-mobile-padding,
#pt-pageContent .modulo-reviews .container-fluid-custom-mobile-padding {
    padding-left: 25px !important;
    padding-right: 25px !important;
    /* El padding-top y padding-bottom vienen desde la BD (no sobrescribir) */
}

/* ====== Módulo Comentarios/Reviews - Limitar altura máxima ====== */
/* Limitar altura máxima solo del contenido visible del carrusel (slick-list) a 500px */
/* Los dots quedan fuera del área limitada para que sean siempre visibles */
.modulo-home.modulo-comentarios .pt-reviewsbox-listing .slick-list,
.modulo-home.modulo-reviews .pt-reviewsbox-listing .slick-list {
    max-height: 500px !important;
    overflow: hidden !important;
}

/* ====== FIX: Espacio para .pt-reviewsbox-author (foto + nombre) ====== */
/* Solución: overflow visible + clip horizontal para ocultar slides laterales */
.modulo-home.modulo-comentarios .pt-reviewsbox-listing .slick-list,
.modulo-home.modulo-reviews .pt-reviewsbox-listing .slick-list {
    max-height: none !important;
    overflow: visible !important;
    clip-path: inset(0 0 -150px 0) !important;
}

/* Contenedor principal con overflow hidden horizontal */
.modulo-home.modulo-comentarios .pt-reviewsbox-listing,
.modulo-home.modulo-reviews .pt-reviewsbox-listing {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Padding inferior al módulo para separarlo del siguiente */
.modulo-home.modulo-comentarios,
.modulo-home.modulo-reviews {
    padding-bottom: 80px !important;
}

/* Asegurar que el contenedor del carrusel no tenga overflow que oculte los dots */
.modulo-home.modulo-comentarios .pt-reviewsbox-listing,
.modulo-home.modulo-reviews .pt-reviewsbox-listing {
    overflow: visible !important;
}

/* Asegurar que los dots sean visibles - subir 220px */
.modulo-home.modulo-comentarios .pt-reviewsbox-listing .slick-dots,
.modulo-home.modulo-reviews .pt-reviewsbox-listing .slick-dots {
    position: relative !important;
    margin-top: -210px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
}

/* Asegurar que las flechas sean visibles con posicionamiento absoluto - 200px más arriba */
.modulo-home.modulo-comentarios .pt-reviewsbox-listing .slick-arrow,
.modulo-home.modulo-reviews .pt-reviewsbox-listing .slick-arrow {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
    display: block !important;
    position: absolute !important;
    top: calc(50% - 200px) !important;
}

/* ====== Módulo Comentarios/Reviews - Aplicar color dinámico al triángulo ====== */
/* El triángulo (::before) debe tener el mismo color de fondo que pt-reviewsbox-description */
.modulo-home.modulo-comentarios .pt-reviewsbox[style*="--comentarios-bg-color"] .pt-reviewsbox-author:before,
.modulo-home.modulo-reviews .pt-reviewsbox[style*="--comentarios-bg-color"] .pt-reviewsbox-author:before {
    border-top-color: var(--comentarios-bg-color) !important;
}

/* ====== Módulo Productos - Mostrar descripciones ====== */
/* Forzar visualización de pt-content cuando tiene la clase pt-content-visible */
.pt-product .pt-description .pt-content.pt-content-visible,
.pt-product .pt-description .pt-col .pt-content.pt-content-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    position: relative !important;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 25px !important;
    margin-top: 14px !important;
}

/* ====== Wishlist - Estado activo sin cambios en hover ====== */
/* Cuando el botón está activo (producto en deseos), mantener estado sin cambios en hover */

/* Sobrescribir hover para botones activos - mantener color activo #48CAB2 */
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-wishlist.active,
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-wishlist.active:hover {
    color: #48CAB2 !important;
}

.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-wishlist.active,
.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-wishlist.active:hover {
    color: #48CAB2 !important;
}

/* Asegurar que el SVG activo se mantenga visible siempre (incluso en hover) */
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-wishlist.active svg:first-child,
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-wishlist.active:hover svg:first-child {
    display: none !important;
}

.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-wishlist.active svg:last-child,
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-wishlist.active:hover svg:last-child {
    display: inline-block !important;
}

.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-wishlist.active svg:first-child,
.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-wishlist.active:hover svg:first-child {
    display: none !important;
}

.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-wishlist.active svg:last-child,
.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-wishlist.active:hover svg:last-child {
    display: inline-block !important;
}

/* ====== Comparar - Estado activo sin cambios en hover ====== */
/* Cuando el botón está activo (producto en comparar), mantener estado sin cambios en hover */

/* Sobrescribir hover para botones activos - mantener color activo #48CAB2 */
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-compare.active,
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-compare.active:hover {
    color: #48CAB2 !important;
}

.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-compare.active,
.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-compare.active:hover {
    color: #48CAB2 !important;
}

/* Asegurar que el SVG activo se mantenga visible siempre (incluso en hover) */
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-compare.active svg:first-child,
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-compare.active:hover svg:first-child {
    display: none !important;
}

.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-compare.active svg:last-child,
.pt-product .pt-image-box .pt-app-btn [class^=pt-btn].pt-btn-compare.active:hover svg:last-child {
    display: inline-block !important;
}

.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-compare.active svg:first-child,
.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-compare.active:hover svg:first-child {
    display: none !important;
}

.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-compare.active svg:last-child,
.pt-product .pt-description .pt-row-hover .pt-wrapper-btn [class^=pt-btn].pt-btn-compare.active:hover svg:last-child {
    display: inline-block !important;
}

/* ====== Selector de Moneda - Ancho fijo 250px y z-index ====== */
header .pt-currency .pt-dropdown-menu,
.pt-currency .pt-dropdown-menu,
.pt-desctop-parent-currency .pt-currency .pt-dropdown-menu {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    z-index: 9999 !important;
}
.pt-currency,
.pt-desctop-parent-currency {
    position: relative !important;
    z-index: 9999 !important;
}
.pt-currency.pt-dropdown-obj02 {
    z-index: 9999 !important;
}

/* ====== MIX: Normalización de Alturas de Tarjetas de Productos ====== */
/* 
 * Aplica una combinación de técnicas para que todas las tarjetas tengan la misma altura:
 * 1. El contenedor .row debe estirar todas las columnas
 * 2. Cada columna debe ocupar 100% de altura
 * 3. Cada tarjeta .pt-product debe ocupar 100% de altura y usar flexbox
 * 4. La descripción debe crecer para ocupar el espacio disponible
 * 5. El precio se empuja al final con margin-top: auto
 */

/* 1. Contenedor .row: asegurar que todas las columnas tengan la misma altura */
/* Mayor especificidad para asegurar que se aplique correctamente */
.row.pt-layout-product-item,
.pt-layout-product-item.row,
.pt-product-listing.row,
.modulo-home.modulo-productos .row,
.modulo-productos .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}
/* Blog: stretch - misma altura por fila, Comentarios alineados abajo */
.pt-product-listing.pt-blog-listing.row,
.pt-listing-post.one-modulo-textos-categoria .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* 2. Cada columna: ocupar 100% de altura y usar flexbox */
/* Especificidad aumentada para todas las posibles combinaciones */
.row.pt-layout-product-item [class*="col-"],
.pt-layout-product-item.row [class*="col-"],
.pt-layout-product-item [class*="col-"],
.row.pt-layout-product-item [class*="col-"],
.pt-layout-product-item.row [class*="col-"],
.pt-layout-product-item [class*="col-"],
.pt-product-listing [class*="col-"],
.modulo-home.modulo-productos [class*="col-"],
.modulo-productos [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}
/* Blog: columnas con flex para altura igual */
.pt-product-listing.pt-blog-listing [class*="col-"],
.pt-product-listing.pt-blog-listing .blog-col-5,
.pt-listing-post.one-modulo-textos-categoria .row [class*="col-"],
.pt-listing-post.one-modulo-textos-categoria .row .blog-col-5 {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    align-items: stretch !important;
}

/* 3. Cada tarjeta .pt-product o .pt-post: ocupar 100% de altura de la columna y usar flexbox */
/* Especificidad máxima para asegurar que se aplique */
.row.pt-layout-product-item .pt-product,
.pt-layout-product-item.row .pt-product,
.pt-layout-product-item .pt-product,
.pt-product-listing .pt-product,
.modulo-home.modulo-productos .pt-product,
.modulo-productos .pt-product {
    height: 100% !important;
    min-height: 600px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}
/* Blog: altura 100% para estirar, Comentarios abajo (como productos) */
.pt-product-listing .pt-post,
.pt-product-listing.pt-blog-listing .pt-post,
.pt-listing-post.one-modulo-textos-categoria .pt-post {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* 4. Flexbox en descripción para distribución uniforme */
/* IMPORTANTE: .pt-description tiene DOS .pt-col: primera (contenido) y segunda (hover con precio/botón) */
/* .pt-post-content (blog) = equivalente a .pt-description */
/* Especificidad aumentada */
.pt-layout-product-item .pt-product .pt-description,
.pt-product-listing .pt-product .pt-description,
.modulo-productos .pt-product .pt-description,
.pt-product .pt-description {
    display: flex !important;
    flex-direction: column !important; /* Las dos .pt-col están una debajo de la otra */
    flex-grow: 1 !important;
    justify-content: flex-start !important;
    min-height: 300px !important;
}
/* Blog pt-post-content: sin min-height (solo productos) */
.pt-product-listing .pt-post .pt-post-content,
.pt-product-listing.pt-blog-listing .pt-post .pt-post-content,
.pt-listing-post.one-modulo-textos-categoria .pt-post .pt-post-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
}

/* 4a. Primera columna (.pt-col:first-child): contenido principal */
.pt-layout-product-item .pt-product .pt-description > .pt-col:first-child,
.pt-product-listing .pt-product .pt-description > .pt-col:first-child,
.modulo-productos .pt-product .pt-description > .pt-col:first-child,
.pt-product .pt-description > .pt-col:first-child {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* 4b. Segunda columna (.pt-col:last-child): hover con precio y botón - empuja al final */
/* .pt-meta (blog Comentarios) = equivalente - empuja al final */
.pt-layout-product-item .pt-product .pt-description > .pt-col:last-child,
.pt-product-listing .pt-product .pt-description > .pt-col:last-child,
.pt-product-listing .pt-post .pt-post-content .pt-meta,
.pt-product-listing.pt-blog-listing .pt-post .pt-post-content .pt-meta,
.pt-listing-post.one-modulo-textos-categoria .pt-post .pt-post-content .pt-meta,
.modulo-productos .pt-product .pt-description > .pt-col:last-child,
.pt-product .pt-description > .pt-col:last-child {
    margin-top: auto !important; /* Empuja esta columna al final */
    flex-shrink: 0 !important;
}

/* 5. Alturas mínimas en secciones opcionales para mantener consistencia (solo cuando no tienen contenido) */

/* Zona de atributos (listado_19 - opciones de atributos familia) */
.pt-product .pt-description .pt-options-swatch,
.pt-product .pt-description ul.pt-options-swatch {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Zona de texto listado_30 (descripción corta) */
/* NOTA: El truncamiento se hace en PHP usando el campo 'valor' de listado_30 */
/* No usar -webkit-line-clamp aquí porque es un valor fijo, debe venir desde la BD */
.pt-product .pt-description .pt-texto-listado-30 {
    min-height: 0 !important;
}

.pt-product .pt-description .pt-texto-listado-30 a {
    display: block !important;
}

/* Zona de atributos listado_29 (valores de atributos) */
.pt-product .pt-description .pt-atributos-listado-29 {
    min-height: 0 !important;
}

/* Zona de listados varios (listado_24, listado_12, listado_1, listado_2, listado_18, listado_16, listado_27, listado_26) */
.pt-product .pt-description .pt-texto-listado-24,
.pt-product .pt-description .pt-texto-listado-12,
.pt-product .pt-description .pt-texto-listado-1,
.pt-product .pt-description .pt-stock-alerta,
.pt-product .pt-description .pt-texto-listado-18,
.pt-product .pt-description .pt-texto-listado-16,
.pt-product .pt-description .pt-texto-listado-27,
.pt-product .pt-description .pt-texto-listado-26 {
    min-height: 0 !important;
}

/* Zona de nombre variedad (listado_28) */
.pt-product .pt-description .pt-nombre-variedad-listado-28 {
    min-height: 0 !important;
}

/* 6. Asegurar que el título no se expanda demasiado */
.pt-product .pt-description .pt-title {
    max-height: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.4 !important;
}

/* 7. Asegurar que el contenedor hover mantenga el botón y precio juntos */
.pt-product .pt-description .pt-row-hover {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* 8. Asegurar que el precio y botón estén correctamente alineados */
.pt-product .pt-description .pt-price {
    /* El precio ya está dentro de .pt-row-hover en la segunda columna */
}

/* 9. Espaciado mínimo para elementos adicionales */
.pt-product .pt-description .pt-add-info {
    min-height: 0 !important;
}

/* 10. Compatibilidad con carruseles (Slick) - asegurar altura consistente */
.pt-layout-product-item.js-init-carousel.slick-slider .slick-slide .pt-product {
    height: 100% !important;
    min-height: 550px !important;
}

.pt-layout-product-item.js-init-carousel.slick-slider .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

.pt-layout-product-item.js-init-carousel.slick-slider .slick-slide {
    display: flex !important;
    height: auto !important;
}

.pt-layout-product-item.js-init-carousel.slick-slider .slick-slide [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 11. Altura consistente para imágenes de productos (usar aspect-ratio) */
/* .pt-post-img (blog) = equivalente a .pt-image-box */
.pt-product .pt-image-box,
.pt-post .pt-post-img {
    flex-shrink: 0 !important;
}

.pt-product .pt-image-box img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* 12. Ajustes responsivos para móviles */
@media (max-width: 575px) {
    .pt-layout-product-item .pt-product,
    .pt-product-listing .pt-product,
    .modulo-productos .pt-product {
        min-height: 500px !important;
    }
    
    .pt-product .pt-description {
        min-height: 220px !important;
    }
    /* Blog: sin min-height en móvil */
    .pt-product-listing.pt-blog-listing .pt-post,
    .pt-listing-post.one-modulo-textos-categoria .pt-post {
        min-height: 0 !important;
    }
}

/* ====== Loader en botones de formularios ====== */
/* Animación de rotación para el spinner del botón de envío */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Spinner alternativo si no hay Bootstrap */
button[type="submit"] span[style*="animation: spin"] {
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    font-size: 1em;
    vertical-align: middle;
}

/* ====== Z-INDEX: Header Sticky siempre por encima ====== */
/* Ahora los productos del catálogo usan pt-layout-product-item igual que en la home */
/* Por lo tanto, no necesitan reglas especiales de z-index */
/* Solo asegurar que el header sticky tenga z-index alto */

.pt-stuck-nav,
.pt-stuck-nav.stuck,
header .pt-stuck-nav {
    z-index: 9999 !important; /* Z-index MUY ALTO - por encima de todo */
    position: fixed !important;
}