/*
    01) Global Section
    02) Title Section
    03) Catalog Section
    04) Bottom Section
    05) Footer Section
    06) WhatsApp Query Section
    07) Down Buttons Section
    08) Main Page Section
*/


/* =====================================================
*   01) Global Section
===================================================== */
/*Hides page title header only — site-footer removido para no ocultar el footer de Elementor*/
.page-header {
    display: none !important;
}

html{
    overflow-x: hidden;
    scrollbar-gutter: stable !important;
}

body{
    background: #fcfcfc !important;
}


/* =====================================================
*   02) Title Section
===================================================== */

#myvica-block .title{
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    align-items: center !important;
}

#myvica-block .title h1,
#myvica-block .title h2,
#myvica-block .title h3,
#myvica-block .title h4,
#myvica-block .title h5,
#myvica-block .title h6
{
    color: #343434 !important;
    text-align: center !important;
}


.site-header{
    background: var(--color-custom-header-bg);
    background: linear-gradient(
        to bottom,
        var(--color-custom-header-bg-2),
        var(--color-custom-header-bg)
    ) !important;
    color: #fff !important;
}



/* =====================================================
*   03) Catalog Section
===================================================== */

/*h2 color*/
ul.products h2 {
    color: #444444;
}


/* Igualar altura de nombres de productos en el grid */
/* Igualar altura de cards */
ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
}
/* Título ocupa el espacio disponible */
/*ul.products li.product .woocommerce-loop-product__title {
    flex-grow: 1 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    min-height: 3.9em !important;
}*/
ul.products li.product .woocommerce-loop-product__title {
    height: 4.2em !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
}
/* Precio y botón se quedan al fondo */
ul.products li.product .price {
    margin-top: auto !important;
}

/*Category Pills*/
.pf-pills .pf-pill {
    background-color: var(--color-custom-primary);
    color: #fff;
}
.pf-pills .pf-pill--active {
    background-color: var(--color-custom-secondary) !important;
    color: #fff;
}
.pf-pill .pf-count{
    color: #fff;
}
.pf-pill--active .pf-count{
    color: #fff !important;
}
/*Brand Dropdown*/
button#pf-dropdown-toggle{
    background-color: var(--color-custom-dropdown);
    color: #333;
}

/*Oculta precios*/
span.woocommerce-Price-amount.amount {
    display: none;
}
/*Oculta ordenar*/
form.woocommerce-ordering {
    display: none;
}
/*Oculta mostrando*/
p.woocommerce-result-count{
    display: none;
}


/* =====================================================
*   04) Bottom Section
===================================================== */

.bottom-section{
    background: #424242;
    color: #fff;
}


.bottom-section .footer-portal a ,
.bottom-section .footer-portal  p{
    color: #fff !important;
    transition: color 0.3s ease;
    font-size: 1.2rem !important;
}


.bottom-section .footer-portal  a:hover {
    color: #a0a0a0 !important;
}


/* FIX: usar px en vez de rem para evitar que WooCommerce altere
   el font-size base del body y agrande los iconos SVG */
.bottom-section .social svg{
    fill: #fff !important;
    transition: fill 0.3s ease;
    height: 28px !important;  /* era 1.8rem — WooCommerce modifica font-size base */
    width: 28px !important;   /* era 1.8rem — causaba iconos gigantes */
    display: block !important;
}

.bottom-section .social svg:hover{
    fill: #a0a0a0 !important;
}

/* FIX: asegurar que el contenedor del icono no herede tamaños de WooCommerce */
.bottom-section .social {
    line-height: 0 !important;
    font-size: 0 !important;
}


/* =====================================================
*   05) Footer Section
===================================================== */

.footer-section{
    background: #2a2a2a !important; 
    color: #fff !important;
}
/* Footer en página de tienda */
.woocommerce #site-footer .bottom-section,
.woocommerce-page #site-footer .bottom-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Footer inyectado - corregir estilos faltantes de Elementor */

/* Títulos en mayúsculas y centrados */
#site-footer h4 {
    text-align: center !important;
    text-transform: uppercase !important;
}
/* Centrar texto "en nuestras redes sociales" */
#site-footer .e-paragraph-base {
    text-align: center !important;
}

/* Iconos sociales en fila */
#site-footer .social {
    flex-direction: row !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

#site-footer .social .elementor-widget-icon {
    margin: 5px 10px !important;
}

/*Footer final line*/
.footer-rights {
    width: 100%;
    text-align: center;
    background-color: #3b3b3b;
    padding: 12px 20px;
    font-size: 1rem;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

.footer-rights p {
    margin: 0;
    color: #fff;
}


/*Evita conflicto con el footer de hello elementor*/
/*#site-footer.site-footer {
    display: none !important;
}*/
.site-footer.dynamic-footer{
    padding-block-end: 0;
}


/* =====================================================
*   06) WhatsApp Query Section
===================================================== */
.cwa-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #25D366 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
    cursor: pointer !important;
}

.cwa-button:hover {
    background-color: #1da851 !important;
    color: #fff !important;
}

.cwa-button svg {
    width: 18px !important;
    height: 18px !important;
    fill: #fff !important;
    flex-shrink: 0 !important;
}

.cwa-button--single {
    padding: 14px 24px !important;
    font-size: 1em !important;
    width: 100% !important;
    justify-content: center !important;
}

.cwa-single-wrap {
    margin-top: 20px !important;
}


/* =====================================================
*   07) Down Buttons Section
===================================================== */

/* Scroll to top arrow */
#scroll-to-top {
    position: fixed;
    bottom: 85px;
    right: 30px;
    width: 64px;
    height: 64px;
    background: var(--color-custom-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

#scroll-to-top:hover {
    background: var(--color-custom-loadmore_hover);
}

#scroll-to-top svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}


/* WhatsApp button */
#whatsapp-btn {
    position: fixed;
    bottom: 85px;
    left: 30px;
    width: 64px;
    height: 64px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    text-decoration: none;
}

#whatsapp-btn.visible {
    opacity: 1;
    visibility: visible;
}

#whatsapp-btn:hover {
    background: #1da851;
}

#whatsapp-btn svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

/* WhatsApp tooltip */
#whatsapp-tooltip {
    position: fixed;
    bottom: 95px;
    left: 68px;
    background: #eafff1;
    color: #072d0f;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    padding: 12px 16px 12px 40px;
    border-radius: 10px;
    z-index: 998; /*behind button*/
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
    text-decoration-line: none;
}

#whatsapp-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

#whatsapp-tooltip:hover {
    background: #bdebce;
}


/*Less than 600 px widht*/
@media (max-width: 600px) {
    /*Hide the WhatsApp message at lower resolutions*/
    #whatsapp-tooltip.visible {
    opacity: 0;
    visibility: hidden;
}
}



/* =====================================================
*   08) Main Page Section
===================================================== */
/*****************************
US-section
Services-Section
Contact-Section
*****************************/
.regular-section{ 
    margin-top: 3rem !important;
    margin-bottom: 2rem !important; 
}

.regular-section.benefits-section div p,
.regular-section.how-section div p
{
    text-align: center !important;
    text-align-last: center !important;
}

.regular-section.cta-section a{
    margin-top: 2rem;
}

.regular-section.cta-section .elementor-button{
    color: #434343 !important;
}

.regular-section.cta-section .elementor-button svg{
    fill: #434343 !important;
}

.regular-section.cta-section .elementor-button:hover{
    color: #1a1a1a !important;
}

.regular-section.cta-section .elementor-button svg{
    fill: #1a1a1a !important;
}




.dark-section{ 
    background-color:#a8e9ff !important;
}

.regular-section svg{ 
    fill:#2a2a2a !important;
}

.regular-section > div > div {
    width: 92% !important;
    justify-items: center !important;
}



.regular-section h1
{
    font-size: 2.4rem;
    margin-bottom: 1.5rem !important;   
    color: #121212;
}

.regular-section h2
{
    font-size: 2rem;
    margin-bottom: 1.5rem !important;   
    color: #121212;
}

.regular-section p{
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.05rem;
    margin-bottom: 0.2rem !important;   
}


/*More than 320 px widht*/
@media (min-width: 320px) {
    .regular-section p
    {
        text-align: justify !important;
        text-align-last: left !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        text-wrap: balance !important;  
    }
}


/*More than 600 px widht*/
@media (min-width: 600px) {
    .regular-section h2
    {
        font-size: 2.2rem;
        margin-bottom: 1rem !important;   
    }

    .regular-section p
    {
        font-size: 1.3rem;
        margin-bottom: 0.2rem !important;  
    }
}

/*More than 800 px widht*/
@media (min-width: 800px) {
    .regular-section h2
    {
        font-size: 2.4rem;
        margin-bottom: 1rem !important;   
    }

    .regular-section p
    {
        font-size: 1.4rem;
        margin-bottom: 0.2rem !important;  
        text-align: justify; 
    }
}

/*More than 1024 px widht*/
@media (min-width: 1024px) {
    .regular-section{
        margin-top: 4rem !important;
        margin-bottom: 2rem !important;   
    }
    
    .regular-section h2
    {
        font-size: 2.6rem;
        margin-bottom: 1rem !important;   
    }

    .regular-section p 
    {    
        font-size: 1.6rem;
        margin-bottom: 0.2rem !important;
        text-align: justify;   
    }

}