.elementor-2030 .elementor-element.elementor-element-3a04c914{--display:flex;--min-height:57px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:2;}.elementor-2030 .elementor-element.elementor-element-1ce688bd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-2030 .elementor-element.elementor-element-14ddbc25{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-1ce688bd *//* =====================================================
   SACRO HEADER
===================================================== */

.saccro-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;

    z-index: 99999;

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(20px);

    border-radius: 5px;

    font-family: "Instrument Sans", sans-serif;
}


/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */

.saccro-header-inner {

    width: 100%;
    height: 60px;

    padding: 0 64px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
}


/* =====================================================
   LOGO
===================================================== */

.saccro-logo-link {

    display: flex;
    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}

.saccro-logo {

    width: 136px;
    height: 22px;

    display: block;

    object-fit: contain;
}


/* =====================================================
   MENU PRINCIPAL
===================================================== */

.saccro-main-nav {

    margin-left: 7px;

    height: 40px;

    display: flex;
    align-items: center;

    padding: 0 8px;

    background: rgba(236, 236, 236, 0.92);

    border-radius: 12px;

    gap: 0;
}


.saccro-nav-link {

    height: 32px;

    padding: 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #121212;

    font-family: "Instrument Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    border-radius: 8px;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.saccro-nav-link:hover {

    color: #121212;

    background: rgba(255, 255, 255, 0.7);
}


.saccro-nav-active {

    background: transparent;
}


/* =====================================================
   ACCIONES DERECHA
===================================================== */

.saccro-header-actions {

    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 40px;

    height: 100%;
}


/* =====================================================
   COUNTRY
===================================================== */

.saccro-country {

    position: relative;

    height: 40px;
}


.saccro-country-button {

    height: 40px;

    min-width: 154px;

    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 0;
    outline: none;

    border-radius: 12px;

    background: rgba(236, 236, 236, 0.92);

    color: #121212;

    cursor: pointer;

    font-family: "Instrument Sans", sans-serif;

    appearance: none;
}


.saccro-country-button:hover {

    background: rgba(230, 230, 230, 0.98);
}


.saccro-country-title {

    font-size: 14px;
    font-weight: 600;

    line-height: 1;
}


.saccro-current-flag {

    width: 18px;
    height: 14px;

    display: block;

    object-fit: cover;
}


.saccro-current-country {

    font-size: 14px;
    font-weight: 500;

    line-height: 1;
}


.saccro-chevron {

    width: 18px;
    height: 18px;

    display: block;

    transition: transform 0.2s ease;
}


/* =====================================================
   DROPDOWN COUNTRY
===================================================== */

.saccro-country-dropdown {

    position: absolute;

    top: 45px;
    right: 0;

    width: 255px;

    padding: 7px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(0, 0, 0, 0.08);

    border-radius: 7px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    box-sizing: border-box;
}


/* Dropdown abierto */

.saccro-country.is-open .saccro-country-dropdown {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.saccro-country.is-open .saccro-chevron {

    transform: rotate(180deg);
}


/* =====================================================
   OPCIONES COUNTRY
===================================================== */

.saccro-country-option {

    width: 100%;

    min-height: 42px;

    padding: 5px 7px;

    display: flex;
    align-items: center;

    gap: 12px;

    box-sizing: border-box;

    text-decoration: none;

    color: #121212;

    border-radius: 5px;

    transition: background-color 0.15s ease;
}


.saccro-country-option:hover {

    background: #f3f3f3;
}


.saccro-country-option img {

    width: 18px;
    height: 14px;

    flex-shrink: 0;

    object-fit: cover;
}


.saccro-country-option-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2px;
}


.saccro-country-option-text strong {

    font-family: "Instrument Sans", sans-serif;

    font-size: 14px;
    font-weight: 600;

    line-height: 16px;

    color: #121212;
}


.saccro-country-option-text small {

    font-family: "Instrument Sans", sans-serif;

    font-size: 12px;
    font-weight: 400;

    line-height: 14px;

    color: #333;
}


/* =====================================================
   CARRITO
===================================================== */

.saccro-cart {

    display: flex;
    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: #121212;

    height: 32px;
}


.saccro-cart-icon {

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.saccro-cart-icon img {

    width: 28px;
    height: 28px;

    display: block;
}


.saccro-cart-count {

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #121212;

    color: #fff;

    border-radius: 50%;

    font-family: "Instrument Sans", sans-serif;

    font-size: 12px;
    font-weight: 600;

    line-height: 1;
}


/* =====================================================
   BUY NOW
===================================================== */

.saccro-buy-button {

    min-width: 96px;
    height: 42px;

    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    background: #000;

    color: #fff;

    border-radius: 22px;

    font-family: "Instrument Sans", sans-serif;

    font-size: 14px;
    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.saccro-buy-button:hover {

    background: #222;

    color: #fff;

    transform: translateY(-1px);
}


/* =====================================================
   EVITAR QUE EL HEADER TAPE EL CONTENIDO
===================================================== */

body {

    padding-top: 60px;
}


/* =====================================================
   RESPONSIVE - 1200 PX
===================================================== */

@media (max-width: 1200px) {

    .saccro-header-inner {

        padding-left: 32px;
        padding-right: 32px;
    }

    .saccro-header-actions {

        gap: 24px;
    }

    .saccro-nav-link {

        padding-left: 30px;
        padding-right: 30px;
    }

}


/* =====================================================
   1200 PX - AJUSTE FINO
===================================================== */

@media (max-width: 1100px) {

    .saccro-header-inner {

        padding-left: 24px;
        padding-right: 24px;
    }

    .saccro-header-actions {

        gap: 18px;
    }

    .saccro-nav-link {

        padding-left: 22px;
        padding-right: 22px;
    }

}


/* =====================================================
   1000 PX
===================================================== */

@media (max-width: 1000px) {

    .saccro-header-inner {

        padding-left: 20px;
        padding-right: 20px;
    }

    .saccro-main-nav {

        margin-left: 5px;
    }

    .saccro-nav-link {

        padding-left: 16px;
        padding-right: 16px;
    }

    .saccro-header-actions {

        gap: 14px;
    }

    .saccro-country-button {

        min-width: 145px;
    }

}


/* =====================================================
   MENOR A 900 PX
===================================================== */

@media (max-width: 900px) {

    .saccro-header-inner {

        padding-left: 16px;
        padding-right: 16px;
    }

    .saccro-header-actions {

        gap: 10px;
    }

    .saccro-nav-link {

        padding-left: 12px;
        padding-right: 12px;
    }

}



/* =====================================================
   COUNTRY BUTTON - CORREGIR COLORES
===================================================== */

.saccro-country-button,
.saccro-country-button:hover,
.saccro-country-button:focus,
.saccro-country-button:active {
    color: #0E0D12 !important;
}


/* Texto "Country" */
.saccro-country-button .saccro-country-title {
    color: #0E0D12 !important;
}


/* Texto "USA" */
.saccro-country-button .saccro-current-country {
    color: #0E0D12 !important;
}


/* El botón NO debe ponerse rojo/rosado al pasar el mouse */
.saccro-country-button:hover,
.saccro-country-button:focus,
.saccro-country-button:active {
    background: rgba(236, 236, 236, 0.92) !important;
}


/* Quitar posibles estilos de Elementor */
.saccro-country-button * {
    color: #0E0D12 !important;
}



/* =====================================================
   SACCRO MARQUEE
   BARRA SUPERIOR FIJA
   NO MODIFICA EL HEADER SACCRO
===================================================== */



/* =====================================================
   SACCRO MARQUEE
===================================================== */

.saccro-marquee {

    --marquee-padding: 6px;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 32px;

    display: block;

    overflow: hidden;

    background: #2A2A2A;
    color: #F5F8FF;

    font-family: "Instrument Sans", sans-serif;
    
    font-size: 16px;
    
    font-weight: 800;

    line-height: 1.25;

    white-space: nowrap;

    text-decoration: none;

    box-sizing: border-box;

    cursor: pointer;

    z-index: 100000;
}


/* =====================================================
   TRACK
===================================================== */

.saccro-marquee-track {

    display: flex;

    width: max-content;

    height: 32px;

    padding: var(--marquee-padding) 0;

    box-sizing: border-box;

    will-change: transform;

    animation: saccro-marquee-scroll 24s linear infinite;
}


/* =====================================================
   CADA GRUPO
===================================================== */

.saccro-marquee-group {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    height: 100%
  padding-right: 200px;
}


/* =====================================================
   TEXTO
===================================================== */

.saccro-marquee-group span {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    color: #F5F8FF;
}


/* =====================================================
   SEPARADORES
===================================================== */

.saccro-marquee-dot {

    margin: 0 28px;

    font-size: 16px;

    line-height: 1;
}


/* =====================================================
   ANIMACIÓN CONTINUA
===================================================== */

@keyframes saccro-marquee-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =====================================================
   HOVER
===================================================== */

.saccro-marquee:hover .saccro-marquee-track {

    animation-play-state: paused;
}

.saccro-marquee:hover {

    color: #F5F8FF;
}


/* =====================================================
   INTEGRACIÓN CON HEADER
   NO CAMBIA EL CSS ORIGINAL DEL HEADER
===================================================== */

/*
   El header original sigue teniendo:

   position: fixed;
   height: 60px;
   z-index: 99999;

   Solamente lo desplazamos 32px hacia abajo
   para dejar espacio al marquee.
*/

.saccro-header {

    top: 32px !important;
}


/*
   El contenido de la página ahora necesita
   reservar MARQUEE + HEADER:

   32px + 60px = 92px
*/

body {

    padding-top: 92px !important;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {

    .saccro-marquee {

        --marquee-padding: 6px;

        height: 30px;

        font-size: 14px;

        line-height: 1.25;
    }

    .saccro-marquee-track {

        height: 30px;
    }

    .saccro-marquee-dot {

        margin: 0 22px;

        font-size: 14px;
    }

    .saccro-header {

        top: 30px !important;
    }

    body {

        padding-top: 90px !important;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 767px) {

    .saccro-marquee {

        --marquee-padding: 6px;

        height: 30px;

        font-size: 14px;

        line-height: 1.25;
    }

    .saccro-marquee-track {

        height: 30px;
    }

    .saccro-marquee-dot {

        margin: 0 18px;

        font-size: 14px;
    }

    .saccro-header {

        top: 30px !important;
    }

    body {

        padding-top: 90px !important;
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3fcf2b8d *//* =====================================================
   SACCCRO MOBILE / TABLET HEADER
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

.saccro-mobile-header {

    --saccro-black: #0E0D12;

    --saccro-white: #FFFFFF;

    --saccro-menu-bg: #F1F1F1;

    --saccro-soft-bg: #F4F5F8;

    --saccro-border: #DCDCDC;

    --saccro-header-height: 64px;

}


/* =====================================================
   HEADER
===================================================== */

.saccro-mobile-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: var(--saccro-header-height);

    z-index: 99999;

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(20px);

    border-radius: 5px;

    font-family: "Instrument Sans", sans-serif;

}


/* =====================================================
   CONTENEDOR
===================================================== */

.saccro-mobile-header__inner {

    width: 100%;

    height: 64px;

    padding: 0 24px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =====================================================
   LOGO
===================================================== */

.saccro-mobile-header__logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;

}


.saccro-mobile-header__logo img {

    display: block;

    width: 112px;

    height: auto;

    max-height: 30px;

    object-fit: contain;

}


/* =====================================================
   ACCIONES
===================================================== */

.saccro-mobile-header__actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


/* =====================================================
   MENU
===================================================== */

.saccro-mobile-menu {

    position: relative;

    margin: 0;

    padding: 0;

}


/* Quitar marcador nativo de DETAILS */

.saccro-mobile-menu summary {

    list-style: none;

}


.saccro-mobile-menu summary::-webkit-details-marker {

    display: none;

}


/* =====================================================
   BOTÓN MENU
===================================================== */

.saccro-mobile-menu__toggle {

    width: 26px;

    height: 26px;

    padding: 0;

    margin: 0;

    border-radius: 7px;

    background: #EAF1F4;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-sizing: border-box;

}


/* =====================================================
   ICONO HAMBURGUESA
===================================================== */

.saccro-menu-icon {

    width: 15px;

    height: 15px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* Líneas */

.saccro-menu-icon--hamburger {

    flex-direction: column;

    gap: 2px;

}


.saccro-menu-icon--hamburger span {

    display: block;

    width: 12px;

    height: 1.5px;

    background: var(--saccro-black);

    border-radius: 2px;

}


/* =====================================================
   ICONO X
===================================================== */

.saccro-menu-icon--close {

    display: none;

}


.saccro-menu-icon--close span {

    position: absolute;

    width: 14px;

    height: 1.5px;

    background: #FFFFFF;

    border-radius: 2px;

}


.saccro-menu-icon--close span:first-child {

    transform: rotate(45deg);

}


.saccro-menu-icon--close span:last-child {

    transform: rotate(-45deg);

}


/* =====================================================
   ESTADO ABIERTO
===================================================== */

.saccro-mobile-menu[open]
.saccro-mobile-menu__toggle {

    background: #000000;

}


.saccro-mobile-menu[open]
.saccro-menu-icon--hamburger {

    display: none;

}


.saccro-mobile-menu[open]
.saccro-menu-icon--close {

    display: flex;

}


/* =====================================================
   PANEL DEL MENU
===================================================== */

.saccro-mobile-menu__panel {

    position: absolute;

    top: 39px;

    right: -1px;

    width: 220px;

    padding: 14px 10px 12px;

    box-sizing: border-box;

    background: #FFFFFF;

    border-radius: 16px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);

}


/* =====================================================
   SECCIÓN
===================================================== */

.saccro-mobile-menu__section {

    width: 100%;

}


.saccro-mobile-menu__label {

    display: block;

    margin: 0 0 9px 3px;

    font-size: 12px;

    line-height: 1;

    font-weight: 600;

    color: var(--saccro-black);

}


/* =====================================================
   LINKS PRINCIPALES
===================================================== */

.saccro-mobile-menu__link {

    width: 100%;

    min-height: 38px;

    padding: 5px 7px;

    margin-bottom: 5px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 7px;

    border-radius: 6px;

    text-decoration: none;

    color: var(--saccro-black);

    font-size: 18px;

    font-weight: 500;

    line-height: 1;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;

}


/* Icono */

.saccro-mobile-menu__link-icon {

    width: 28px;

    height: 28px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    background: #F0F0F0;

    font-size: 16px;

}


/* =====================================================
   HOME ACTIVO
===================================================== */

.saccro-mobile-menu__link--active {

    background: #000000;

    color: #FFFFFF;

}


.saccro-mobile-menu__link--active
.saccro-mobile-menu__link-icon {

    background: #F0F0F0;

}


/* =====================================================
   HOVER
===================================================== */

.saccro-mobile-menu__link:hover {

    background: #F1F1F1;

    color: var(--saccro-black);

}


.saccro-mobile-menu__link--active:hover {

    background: #000000;

    color: #FFFFFF;

}


/* =====================================================
   DIVISOR
===================================================== */

.saccro-mobile-menu__divider {

    width: calc(100% - 6px);

    height: 1px;

    margin: 10px 3px;

    background: #6B6B6B;

}


/* =====================================================
   COUNTRY
===================================================== */

.saccro-mobile-country {

    width: 100%;

    min-height: 39px;

    padding: 4px 7px;

    margin-bottom: 4px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 5px;

    text-decoration: none;

    background: #F5F3F3;

    color: var(--saccro-black);

}


.saccro-mobile-country:hover {

    background: #F0EEEE;

    color: var(--saccro-black);

}


.saccro-mobile-country img {

    width: 18px;

    height: 14px;

    object-fit: cover;

    flex-shrink: 0;

}


/* =====================================================
   TEXTO COUNTRY
===================================================== */

.saccro-mobile-country__text {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.saccro-mobile-country__text strong {

    display: block;

    font-size: 11px;

    line-height: 13px;

    font-weight: 600;

    color: var(--saccro-black);

}


.saccro-mobile-country__text small {

    display: block;

    font-size: 9px;

    line-height: 11px;

    font-weight: 400;

    color: var(--saccro-black);

}


/* =====================================================
   CARRITO
===================================================== */

.saccro-mobile-cart {

    position: relative;

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

}


/* Icono */

.saccro-mobile-cart__icon {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.saccro-mobile-cart__icon img {

    width: 25px;

    height: 25px;

    display: block;

    object-fit: contain;

}


/* =====================================================
   CONTADOR
===================================================== */

.saccro-mobile-cart__count {

    position: absolute;

    top: -5px;

    right: -7px;

    min-width: 15px;

    height: 15px;

    padding: 0 3px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #000000;

    color: #FFFFFF;

    border-radius: 50%;

    font-family: "Instrument Sans", sans-serif;

    font-size: 8px;

    line-height: 1;

    font-weight: 600;

}


/* =====================================================
   TABLET
   1200px → 769px
===================================================== */

@media (max-width: 1200px) {

    .saccro-mobile-header__inner {

        padding-left: 24px;

        padding-right: 24px;

    }

}


/* =====================================================
   TABLET MÁS PEQUEÑA
===================================================== */

@media (max-width: 900px) {

    .saccro-mobile-header__inner {

        padding-left: 20px;

        padding-right: 20px;

    }

}


/* =====================================================
   TELÉFONO
   768px hacia abajo
===================================================== */

@media (max-width: 768px) {

    .saccro-mobile-header__inner {

        height: 64px;

        padding-left: 16px;

        padding-right: 16px;

    }


    .saccro-mobile-header__logo img {

        width: 106px;

    }


    .saccro-mobile-menu__panel {

        width: 218px;

    }

}


/* =====================================================
   TELÉFONOS PEQUEÑOS
===================================================== */

@media (max-width: 480px) {

    .saccro-mobile-header__inner {

        padding-left: 14px;

        padding-right: 14px;

    }


    .saccro-mobile-menu__panel {

        right: 0;

        width: 215px;

    }

}


/* =====================================================
   ORDEN DE ACCIONES - MOBILE HEADER
   CARRITO → MENÚ
===================================================== */

.saccro-mobile-header__actions {
    display: flex;
    align-items: center;
}

/* Carrito primero */
.saccro-mobile-cart {
    order: 1;
}

/* Menú hamburguesa al extremo derecho */
.saccro-mobile-menu {
    order: 2;
}





/* =====================================================
   SACCRO MARQUEE
===================================================== */

.saccro-marquee {

    --marquee-padding: 6px;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 32px;

    display: block;

    overflow: hidden;

    background: #2A2A2A;
    color: #F5F8FF;

    font-family: "Instrument Sans", sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.25;

    white-space: nowrap;

    text-decoration: none;

    box-sizing: border-box;

    cursor: pointer;

    z-index: 100000;
}


/* =====================================================
   TRACK
===================================================== */

.saccro-marquee-track {

    display: flex;

    width: max-content;

    height: 32px;

    padding: var(--marquee-padding) 0;

    box-sizing: border-box;

    will-change: transform;

    animation: saccro-marquee-scroll 24s linear infinite;
}


/* =====================================================
   CADA GRUPO
===================================================== */

.saccro-marquee-group {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    height: 100%;
  padding-right: 200px;
}


/* =====================================================
   TEXTO
===================================================== */

.saccro-marquee-group span {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    color: #F5F8FF;
}


/* =====================================================
   SEPARADORES
===================================================== */

.saccro-marquee-dot {

    margin: 0 28px;

    font-size: 16px;

    line-height: 1;
}


/* =====================================================
   ANIMACIÓN CONTINUA
===================================================== */

@keyframes saccro-marquee-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =====================================================
   HOVER
===================================================== */

.saccro-marquee:hover .saccro-marquee-track {

    animation-play-state: paused;
}

.saccro-marquee:hover {

    color: #F5F8FF;
}





/* =====================================================
   MARQUEE MOBILE / TABLET
   NO MODIFICA EL HEADER ORIGINAL
===================================================== */

.saccro-mobile-marquee {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 32px;

    display: block;

    overflow: hidden;

    background: #0E0D12;
    color: #F5F8FF;

    font-family: "Instrument Sans", sans-serif;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.25;

    white-space: nowrap;

    text-decoration: none;

    box-sizing: border-box;

    cursor: pointer;

    z-index: 100001;
}


/* =====================================================
   TRACK
===================================================== */

.saccro-mobile-marquee-track {

    display: flex;

    width: max-content;
    height: 32px;

    padding: 6px 0;

    box-sizing: border-box;

    will-change: transform;

    animation: saccro-mobile-marquee-scroll 24s linear infinite;
}


/* =====================================================
   GRUPOS
===================================================== */

.saccro-mobile-marquee-group {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    height: 100%;
}


/* =====================================================
   TEXTO
===================================================== */

.saccro-mobile-marquee-group span {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    color: #F5F8FF;
}


/* =====================================================
   SEPARADORES
===================================================== */

.saccro-mobile-marquee-dot {

    margin: 0 18px;

    font-size: 14px;

    line-height: 1;
}


/* =====================================================
   ANIMACIÓN CONTINUA
===================================================== */

@keyframes saccro-mobile-marquee-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =====================================================
   PAUSAR AL PASAR EL CURSOR
===================================================== */

.saccro-mobile-marquee:hover
.saccro-mobile-marquee-track {

    animation-play-state: paused;
}


/* =====================================================
   HACER QUE EL HEADER QUEDE DEBAJO
   DEL MARQUEE
===================================================== */

.saccro-mobile-header {

    top: 32px !important;
}


/* =====================================================
   ESPACIO PARA MARQUEE + HEADER
===================================================== */

body {

    padding-top: 96px;
}



/* saccro: clearfix fuera de la rejilla de productos */
/* Al pasar `ul.products` a rejilla, el clearfix del tema (::before/::after
   con content:"") deja de ser invisible y ocupa una CELDA: la primera
   tarjeta aparecia corrida un puesto y la fila quedaba coja. Va aqui y no en
   el fragmento de WPCode porque WPCode publica con un guardado de retraso. */
ul.products::before, ul.products::after,
.woocommerce ul.products::before, .woocommerce ul.products::after{
  display:none !important; content:none !important;
}

/* saccro:correcciones-0909:inicio */

/* 1. Banda superior: el gris del fondo de las fotos de estudio, no negro.
      rgb(109,120,120) muestreado de la toma. Contraste 4,56:1 con blanco. */
.saccro-marquee{background:#6D7878 !important}
/* La cabecera movil tiene su propia banda, con otra clase: la de escritorio
   esta en display:none por debajo de 768 px. */
.saccro-mobile-marquee{background:#6D7878 !important}

/* 2. Fórmulas sagradas: el cuadro es overflow:hidden con radius 16px y el
      rótulo empezaba en x=0, así que el arco se comía la primera letra
      («TRES…») y la última («…03»). */
.sacred-gallery__card-header{
  padding:16px 22px !important;box-sizing:border-box !important;gap:14px !important}
.sacred-gallery__card-header span{white-space:nowrap}

/* 3. La ficha: sin marco. En us.saccro.com y en noon la tarjeta no es una
      caja blanca alrededor de la foto, es el tono en el que muere el
      degradado de la foto. #E9E9E7 = píxel del borde inferior de la toma,
      así el empalme entre foto y pie es invisible. */
ul.products li.product,
.woocommerce ul.products li.product{
  --tj-papel:#E9E9E7 !important;
  background:#E9E9E7 !important;
  border:0 !important;box-shadow:none !important;
  border-radius:20px !important;overflow:hidden !important;
  padding:0 0 22px !important}
ul.products li.product:hover,
.woocommerce ul.products li.product:hover{
  box-shadow:0 22px 44px -32px rgba(23,23,26,.45) !important}
ul.products li.product .saccro-gal,
ul.products li.product .woocommerce-loop-product__link{
  background:transparent !important;border-radius:0 !important}

/* El texto recupera por dentro el margen que perdió la tarjeta. */
ul.products li.product .saccro-tj__cab,
ul.products li.product .saccro-tj__fila,
ul.products li.product .saccro-tj__packs,
ul.products li.product a.added_to_cart{
  margin-left:18px !important;margin-right:18px !important}
/* El subtitulo vive DENTRO de la fila, que ya lleva ese margen: si lo hereda
   tambien, arranca 18 px mas a la derecha que el titulo y el pie. */
ul.products li.product .saccro-tj__sub{
  margin-left:0 !important;margin-right:0 !important}

/* Precios alineados abajo aunque el doypack no tenga línea de packs. */
ul.products li.product .saccro-tj__fila{margin-top:auto !important}

/* Dos «IVA incluido» seguidos (uno del precio tachado) se leían montados. */
/* En la rejilla se muestra UN SOLO precio, el que se cobra. Con el tachado
   delante, unas fichas salian con dos cifras y otras con una y la fila se veia
   desigual —Maitake sin oferta al lado de dos con oferta—. El descuento sigue
   contandose donde importa: en la ficha y en el .elementor-2030 .elementor-element.elementor-element-3fcf2b8d de cajas. */
ul.products li.product .price del{display:none !important}
ul.products li.product .price ins{text-decoration:none !important}

/* 4. Cuatro por fila en escritorio. */
@media (min-width:1200px){
  ul.products,.woocommerce ul.products{
    display:grid !important;grid-template-columns:repeat(4,1fr) !important;
    gap:22px !important;--e-woocommerce-products-columns:4}
  ul.products li.product,.woocommerce ul.products li.product{
    width:100% !important;max-width:100% !important;margin:0 !important;
    flex:none !important;clear:none !important}
}
/* El clearfix del tema se volvía una celda de la rejilla y corría la
   primera tarjeta un hueco a la derecha. */
ul.products::before,ul.products::after,
.woocommerce ul.products::before,.woocommerce ul.products::after{
  display:none !important;content:none !important}

/* 5. El «+». La clase `button` de WooCommerce SE QUEDA: quitarla escapaba
      del fondo negro del tema pero ROMPIA el anadir al carrito —sin ella el
      clic navega a `?add-to-cart=` y recarga la pagina entera en vez de hacer
      el ajax—. Comprobado en vivo, y por eso el boton «no hacia nada».
      El fondo negro no se pelea, se TAPA: un pseudo-elemento a `inset:0` cubre
      el boton entero. Es lo unico que gana a una regla que no cede ni ante un
      `style=""` con !important. El aspa va en el segundo pseudo-elemento,
      dibujada con dos gradientes cruzados. */
ul.products li.product a.button.saccro-tj__mas{
  position:absolute !important;top:22px;right:22px;z-index:3;
  width:32px;height:32px;padding:0;margin:0;border:0;box-shadow:none;
  display:block;overflow:hidden;text-indent:-999em;border-radius:999px;
  opacity:0;transition:opacity .22s ease}
ul.products li.product a.button.saccro-tj__mas::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:rgba(255,255,255,.94);border:1px solid rgba(23,23,26,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
ul.products li.product a.button.saccro-tj__mas::after{
  content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;
  transform:translate(-50%,-50%);
  background:linear-gradient(#17171A,#17171A) center/11px 1px no-repeat,
             linear-gradient(#17171A,#17171A) center/1px 11px no-repeat}
ul.products li.product:hover a.button.saccro-tj__mas,
ul.products li.product a.button.saccro-tj__mas:focus-visible,
ul.products li.product a.button.saccro-tj__mas.loading,
ul.products li.product a.button.saccro-tj__mas.added{opacity:1}
@media (max-width:767px){
  ul.products li.product a.button.saccro-tj__mas{opacity:.85}
}

/* 6. Palabras huérfanas. */
h1,h2,h3,h4,h5,.elementor-heading-title{text-wrap:balance}
p,li,figcaption,.elementor-widget-text-editor{text-wrap:pretty}

/* 7. Botones flotantes: tres discos de 50px pisaban el contenido y el de
      TikTok, negro sólido, era el que cantaba. */
.saccro-fab__circle{width:44px !important;height:44px !important}
.saccro-fab__circle--tiktok{
  background:#FFFFFF !important;border:1px solid rgba(23,23,26,.12) !important}
.saccro-fab__circle--tiktok svg{fill:#17171A !important;color:#17171A !important}

/* --- 8. La galeria de la ficha, al ancho de la tarjeta -------------------
   Cada foto tomaba su ancho natural en vez del de la tarjeta: la pista se
   desbordaba y salian tres fotos de 384 px y una de 249 dentro de tarjetas
   iguales de 317, con los pies de ficha a distinta altura. */
ul.products li.product .woocommerce-loop-product__link,
ul.products li.product .saccro-gal{
  display:block !important;width:100% !important}
ul.products li.product .saccro-gal{overflow:hidden !important}
ul.products li.product .saccro-gal__pista{
  width:100% !important;min-width:0 !important;max-width:100% !important}
ul.products li.product .saccro-gal__pista > *{min-width:0 !important;max-width:100% !important}

/* --- 9. El precio rebajado ------------------------------------------------
   El <del> salia a 48 px contra los 17 del precio vigente: en la ficha de
   Melena de Leon el precio tachado se comia la tarjeta. */
ul.products li.product .price{font-size:17px !important;line-height:1.3 !important}
ul.products li.product .price del,
ul.products li.product .price del .amount,
ul.products li.product .price del bdi{
  font-size:14px !important;line-height:1.3 !important;font-weight:400 !important}
ul.products li.product .price ins{text-decoration:none !important}

/* --- 10. El desplazamiento fantasma del final en el telefono -------------
   Sintoma: al llegar al pie, la pagina seguia bajando en blanco.

   Causa: hay contenido que desborda a lo ancho hasta 2.626 px —la galeria de
   Fórmulas sagradas y las bandas en bucle— y `html` y `body` lo tapaban con
   `overflow-x:hidden`. Y ahi esta la trampa: `hidden` no solo recorta, CREA UN
   CONTENEDOR DE DESPLAZAMIENTO. Ademas, poner `overflow-x:hidden` junto a un
   `overflow-y:visible` obliga al navegador a convertir ese `visible` en
   `auto` —lo dice la especificacion—, de modo que el `body` quedaba como un
   segundo contenedor de scroll anidado dentro del de la pagina. Ese es el
   sobrante por el que se seguia bajando.

   `clip` recorta igual pero NO crea contenedor, y deja que el `visible` de al
   lado siga siendo visible. Medido despues del cambio: el `body` deja de ser
   scroller, no se abre desplazamiento horizontal (390 = 390) y el tope del
   scroll cuadra al pixel.

   Los navegadores anteriores a `clip` (Safari < 16) ignoran la declaracion y
   se quedan con el `hidden` de antes: se degrada al comportamiento actual. */
.sac-at, .sac-at__pista, .sacred-gallery, .sacred-hero,
.saccro-marquee, .saccro-mobile-marquee{overflow-x:clip}
html{overflow-x:clip;overflow-y:visible;overscroll-behavior-y:none}
body{overflow-x:clip;overflow-y:visible}

/* saccro:correcciones-0909:fin *//* End custom CSS */