/*
Theme Name: Asbor
Theme URI: Seoconsultingperu.com
Author: Seo Consulting 
Author URI: 
Description: Plantilla Básica Seo Consulting

*/
:root {
    --footer-bg: #121f2d;
    --text-light: #a3abb7;
    --primary-teal: #2cb4be;
    --dark-navy: #1a2b3c;
    --text-color: #333;
    --white: #ffffff;
    --cyan: #1fc1c3;
    --dark: #1a2333;
    --cyan-light: #1fc1c3;
    --blue-bg: #00a8e1; /* Ajustar al tono exacto de tu imagen */
    --dark-blue: #0d1b2a;
    --light-gray: #e9f1f4;
    --primary-blue: #0056b3;
    --medical-cyan: #00a8cc;
    --text-gray: #555;
    --bg-light: #f8f9fa;
}
*{padding: 0; margin: 0;}
body{--color1: #132338; --color2: #26b5c1; --color3: #807c77; --font1: "Montserrat", sans-serif; --font2: "Urbanist", sans-serif; }
.container{width: 944px; margin: 0 auto; max-width: 98%;}
.row{display: flex; justify-content: space-between;} .direction{flex-direction: row-reverse;}
.padded{padding: 100px 0px;}
.grid_5{display: grid; grid-template-columns: repeat(5, 3fr); grid-column-gap: 0px;}
.grid_4{display: grid; grid-template-columns: repeat(4, 3fr); grid-column-gap: 15px; grid-row-gap: 15px;}
.grid_3{display: grid; grid-template-columns: repeat(3, 3fr); grid-column-gap: 20px; grid-row-gap: 20px;}
.grid_2{display: grid; grid-template-columns: repeat(2, 3fr); grid-column-gap: 20px; grid-row-gap: 20px;}
.row-center{display: flex; align-items: center; justify-content: space-between;}
#icoNav_movil{box-sizing: border-box; margin-left: 20px; display: none;}
.movil{display: none;}
a{text-decoration: none;}a,p,span,li,div{font-family: var(--font2);}
.fixed{position: fixed; width: 100%; padding: 3px 3% 20px;}


.navbar {
    background: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 31px;
}

.whatsapp-containers {
    display: inline-flex;
    align-items: center;
    gap: 15px; /* Espacio entre el icono y el botón */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.customer-service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0fbfc; /* Fondo muy suave para resaltar el icono */
    padding: 10px;
    border-radius: 50%;
    border: 2px solid #2cb4be;
}

.btn-consultar {
    background-color: #2cb4be;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(44, 180, 190, 0.2);
    display: inline-block;
}

.btn-consultar:hover {
    background-color: #249ea7;
    box-shadow: 0 6px 16px rgba(44, 180, 190, 0.4);
    transform: translateY(-1px);
}

/* Animación sutil para el icono */
.customer-service-icon svg {
    animation: pulse-ring 2s infinite;
}



.social-container {
    position: fixed;
    bottom: 150px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333; /* Color minimalista inicial */
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px); /* Efecto cristal */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    font-size: 19px;
}

/* Contenedor de Paginación */
.woocommerce-pagination {
    text-align: center;
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

/* Lista de números */
.woocommerce-pagination ul.page-numbers {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px; /* Espacio entre botones */
    align-items: center;
}

/* Estilo base de los botones (enlaces y span) */
.woocommerce-pagination ul.page-numbers li .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    text-decoration: none;
    color: #555;
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Estado Hover (al pasar el mouse) */
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
    background-color: var(--cyan, #00ced1); /* Usa tu variable cyan o un color sólido */
    color: #fff;
    border-color: var(--cyan, #00ced1);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Estado Activo (Página actual) */
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
    background-color: var(--cyan, #00ced1);
    color: #fff;
    border-color: var(--cyan, #00ced1);
    cursor: default;
}

/* Botones Siguiente/Anterior (Flechas) */
.woocommerce-pagination ul.page-numbers li .page-numbers.next,
.woocommerce-pagination ul.page-numbers li .page-numbers.prev {
    font-size: 18px;
    background-color: #fff;
}

/* Ajuste para dispositivos móviles */
@media (max-width: 480px) {
    .woocommerce-pagination ul.page-numbers {
        gap: 5px;
    }
    .woocommerce-pagination ul.page-numbers li .page-numbers {
        min-width: 35px;
        height: 35px;
        font-size: 13px;
    }
}

/* Efectos Hover */
.social-btn:hover {
    transform: translateY(-5px);
    color: #fff;
}

.facebook:hover { background-color: #1877F2; }
.youtube:hover { background-color: #FF0000; }
.whatsapp:hover { background-color: #25D366; }

.category-filter-buttons {
    text-align: center;
}

.category-filter-buttons .d-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Espacio entre botones */
}

.cat-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    border-radius: 30px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.cat-btn:hover {
    background-color: var(--cyan, #00cccc);
    color: #fff;
    border-color: var(--cyan, #00cccc);
    text-decoration: none;
}

.cat-btn.active {
    background-color: var(--cyan, #00cccc);
    color: #white;
    border-color: var(--cyan, #00cccc);
    font-weight: bold;
}

@keyframes pulse-ring {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.ls{width: 496px; margin: 0 auto; margin-top: 30px;}.ls .btn-contact.dark{background: var(--text-color); margin-bottom: 0px;}
.ls .row-center{align-items: center;}

ul.menu {display: flex; align-items: center;}
ul.menu li{list-style: none;}
ul.menu li a{color: var(--color1); font: 17px var(--font1);  padding: 20px 25px; display: inline-block;} 
ul.menu li.current-menu-item a::after{content: ""; width: 100%; display: block; background: var(--color2); height: 2px; transform: translateY(6px); border-radius: 10px;}

.btn-contact1 {
    background-color: var(--primary-teal);
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    border: none;
}

/* Mobile Toggle */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--dark-navy);
    transition: 0.3s;
}

/* Mobile Menu Overlay */
.mobile-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px); /* Efecto borroso */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s ease-in-out;
    z-index: 1050;
}

.mobile-overlay.active {
    right: 0;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.mobile-nav a {
    font-size: 24px;
    text-decoration: none;
    color: var(--dark-navy);
    font-weight: 600;
}

.btn-contact-mobile {
    background: var(--primary-teal);
    color: white !important;
    padding: 12px 40px;
    border-radius: 30px;
}

.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons i {
    font-size: 24px;
    color: var(--primary-teal);
}

.tech-content-box {
    max-width: 499px;
    width: 100%;

}


.disl{padding: 15px 6px; background: var(--color1); color: #fff; text-align: center; border-radius: 20px 20px 0px 0px; text-transform: uppercase; font: 700 12px var(--font1); margin-bottom: 10px; margin-top: 30px;}
.woocommerce-product-gallery .flex-control-nav{width: 16%}
.flex-control-thumbs img{margin-bottom: 1px; width: 100%; height: auto;}
.flex-viewport{width: 81%;}

.slider .slc{padding: 120px 0px;}
.slider{position: relative; background: url(img/slider1.jpg); background-size: cover; background-position: center;}
.thumb-slider{position: absolute; right: 0px; top: 5%;}
.headline {
    font: 49px var(--font2); 
    color: #1a2333; 
    line-height: 1.2;
    margin: 0 0 10px 0;
}

.headline span.highlight {
    color: var(--color2); 
    font-weight: 500; 
}


.description {
    font: 14px var(--font1);
    color: #666e7b;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 30px 0; 
}

/* Botones y Enlaces */
.action-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-primary {
    display: inline-block;
    background-color: #1fc1c3; /* Color cian */
    color: #ffffff;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #199e9f; /* Color cian más oscuro para el hover */
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    color: #1a2333; /* Color oscuro */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.btn-secondary svg {
    margin-right: 8px; /* Espacio antes del texto */
    color: #1fc1c3; /* El icono de flecha es cian */
}

.about-us-box {
    width: 725px; margin: 0 auto;
    background: url(img/banner.webp); background-size: cover; background-repeat: no-repeat;
    border-radius: 12px; /* Esquinas redondeadas */
    padding: 40px 60px; /* Relleno interno para los textos */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Sombra suave para dar profundidad */
    text-align: center; /* Centrado de todo el texto */
    overflow: hidden; /* Para que las formas orgánicas no se salgan */
    position: relative; /* Para las formas orgánicas de fondo */
}

/* Formas Orgánicas de Fondo (Implementadas con pseudo-elementos) */
.about-us-box::before,
.about-us-box::after {
    content: '';
    position: absolute;
    background-color: rgba(31, 193, 195, 0.1);
    border-radius: 50%;
    z-index: 0; /* Asegura que estén detrás del texto */
}

/* Forma superior izquierda */
.about-us-box::before {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -50px;
}

/* Forma inferior derecha */
.about-us-box::after {
    width: 250px;
    height: 250px;
    bottom: -80px;
    right: -30px;
}

/* Título Principal */
.about-us-box h2 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff; /* Texto blanco */
    text-transform: uppercase; /* Todo en mayúsculas */
    letter-spacing: 2px; /* Un poco de espaciado entre letras */
    margin: 0 0 20px 0; /* Espacio antes del párrafo */
    position: relative; /* Asegura que esté sobre el fondo */
    z-index: 1;
}

/* Párrafo de Descripción */
.about-us-box p {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85); /* Blanco ligeramente transparente para suavidad */
    line-height: 1.6;
    margin: 0;
    position: relative; /* Asegura que esté sobre el fondo */
    z-index: 1;
}


/* Cabecera de la sección */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section-header h2 span {
    color: var(--cyan);
}

.section-header .star {
    color: var(--cyan);
    font-size: 24px;
}

.section-header p {
    font-size: 14px;
    color: #444;
    margin-top: 10px;
}

.section-header p strong {
    color: var(--dark);
}


.productos{padding: 60px 0px; background: url(img/fondoprod.jpg); background-size: cover; background-position: top; padding-bottom: 150px;}
/* Estilos de las Cards */
.card-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 336px;
    background-size: cover !important;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding: 10px 15px; /* Espacio para que la sombra no se corte */
}

/* Overlay oscuro para legibilidad del texto */
.card-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.card-content h3 {
    color: #fff;
    font-size: 24px;
    margin: 0 0 15px 0;
    line-height: 1.1;
    font-weight: 600;
}

.promo-tag {
    background-color: var(--cyan);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 50px;
    display: inline-block;
    text-transform: uppercase;
}

.owl-product .owl-stage{padding: 20px 0px;}

/* Ajustes de Owl Carousel */
.owl-dots {
    margin-top: 30px !important;
}
.owl-theme .owl-dots .owl-dot.active span {
    background: var(--cyan) !important;
}

.clients-section {
    background: url(img/clientes.webp);background-position: center; background-size: cover; background-repeat: no-repeat;
    padding:90px 0;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden; margin-top: -90px;
}
/* Título e Icono */
.clients-header h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.clients-header p {
    font-size: 14px;
    max-width: 600px;
    margin: 20px auto 20px;
    line-height: 1.5;
    opacity: 0.9;
}

/* La cápsula blanca de los logos */
.logos-wrapper {
    background-color: #ffffff;
    border-radius: 100px; /* Forma de píldora */
    padding: 20px 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);    transform: translateY(31px);
}

/* Ajustes para los logos dentro del carousel */
.client-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px; /* Altura fija para alinear logos */
    padding: 0 20px;
}

.client-logo-item img {
    max-width: 180px !important; /* Evitar que el logo sea gigante */
    max-height: 60px;
    width: auto !important; /* Mantener proporción */
    filter: grayscale(0%); /* Puedes ponerlo al 100% y que cambie al hacer hover */
    transition: transform 0.3s ease;
}

.client-logo-item img:hover {
    transform: scale(1.05);
}

/* Título */
.gallery-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 40px; text-align: center;
}

.gallery-title span {
    color: var(--cyan);
    font-weight: 400;
}

/* Estilo de los Items (Botones de Categoría) */
.gallery-item {
    position: relative;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    background-color: var(--dark-blue);
}

.gallery-item:hover {
    transform: translateY(-5px);
}

/* Fondo de imagen sutil para el botón */
.gallery-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://images.unsplash.com/photo-1516549655169-df83a0774514?auto=format&fit=crop&q=80&w=300'); /* Ejemplo */
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 1;
}

.gallery-item span {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
}

/* Barra de Progreso Personalizada */
.custom-progress-container {
    width: 200px;
    height: 10px;
    background: #1a2333;
    border-radius: 10px;
    margin: 40px auto 0;
    overflow: hidden;
    position: relative;
}

.custom-progress-bar {
    width: 50%; /* Este ancho se controlará con JS */
    height: 100%;
    background: var(--cyan);
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* Ocultar navegación default de Owl */
.owl-nav, .owl-dots { display: none; }

/* Layout Principal */
.new-arrivals-grid {
    display: flex; justify-content: space-between; align-items: center;
}

/* Card Destacada (Izquierda) */
.featured-card {
    position: relative;
    height: 400px; width: 20%;
    border-radius: 20px;
    overflow: hidden;
    background: url('img/img2.jpg') center/cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    color: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.featured-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
}

.badge-delivery {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    color: #333;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.badge-delivery span { color: var(--cyan); }

.featured-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.featured-content h3 {
    font-size: 42px;
    margin: 0;
    line-height: 1;
}

.discount-tag {
    background: var(--dark-blue);
    display: inline-block;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 15px;
}

/* Carousel de Productos (Derecha) */
.product-card {
    border-radius: 10px;
    padding: 20px 10px;
    text-align: center;
    transition: transform 0.3s;
    margin: 10px; box-shadow: 0px 0px 11px 0px #0d1b2a45;
    background: linear-gradient(140deg,rgba(212, 228, 237, 1) 0%, rgba(253, 253, 254, 1) 100%);
}
.page-prod{    border-top: 5px solid var(--wc-highligh-text);
    border-radius: 20px;}

.product-card:hover { transform: translateY(-5px); }

.product-card h4 {
    color: var(--dark-blue);
    margin: 0 0 20px;
    display: flex; height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-card img {
    max-width: 100%;
    height: 160px;
    object-fit: contain;
    margin-bottom: 20px;
}

.product-card p, .product-card span a{
    font-size: 13px;
    color: #555;
    margin-bottom: 25px; font-weight: 700;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ver-producto {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-blue);
    text-decoration: none;
}

.btn-ver-mas {
    background: var(--cyan);
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
}
.pader{padding: 60px 0px;}
.productos01{width: 71%;}

/* Personalización Dots */
.owl-dots { margin-top: 30px !important; }
.owl-theme .owl-dots .owl-dot span { background: #ccc !important; width: 12px; height: 12px; }
.owl-theme .owl-dots .owl-dot.active span { background: var(--cyan) !important; }

/* Sección con fondo degradado */
.faq-section {
    background: url(img/fond2.webp); background-position: top; background-repeat: no-repeat;
    padding: 125px 20px 15px;
    text-align: center;
    color: #ffffff;
    min-height: 100vh; margin-top: -84px;
}
.p1{background: #fff;}
.faq-section .section-header h2{color: #fff;}
.faq-section .section-header p{color: #fff;} .faq-section .section-header strong, .faq-section .section-header span{color: #fff;}
/* Estilo del Acordeón */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shop-toolbar{margin-bottom: 20px;}

details {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-align: left;
}

summary {
    padding: 20px 25px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    color: var(--dark-blue);
    font-size: 15px;
}

/* Icono + / - personalizable */
summary::after {
    content: '+';
    font-size: 24px;
    color: var(--cyan);
    font-weight: 400;
    transition: transform 0.3s;
}

details[open] summary::after {
    content: '−';
    transform: rotate(180deg);
}

/* Quitar la flecha default de Chrome/Safari */
summary::-webkit-details-marker {
    display: none;
}

.faq-content {
    padding: 0 25px 25px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    background-color: #e9f1f4; /* Color grisáceo del fondo abierto */
}

/* Botón inferior */
.btn-more-questions {
    display: inline-block;
    margin-top: 40px;
    background-color: var(--cyan);
    color: #ffffff;
    text-decoration: none;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    transition: background 0.3s;
}

.btn-more-questions:hover {
    background-color: #199e9f;
}

/* Ocultar productos filtrados */
.card1.hide {
    display: none;
}

/* Efecto visual para el tab seleccionado */
.gallery-item.active {
    border-bottom: 2px solid var(--cyan); /* O tu color preferido */
    font-weight: bold;
    cursor: pointer;
}

.gallery-item {
    cursor: pointer;
}
.tab-content {
    display: none; /* Oculto por defecto */
}

.tab-content.active {
    display: grid; /* Se muestra cuando tiene la clase active */
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.whatsapp-container {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}


.whatsapp-label {
    position: absolute;
    right: 100%;
    margin-right: 24px;
    background-color: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #f3f4f6;
    opacity: 0;
    transform: translateX(16px);
    transition: all 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    font-family: sans-serif;
    color: #111827;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

.support-text {
    font-size: 12px;
    color: #9ca3af;
    font-weight: normal;
}



.whatsapp-buttons {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    z-index: 2;
}

.whatsapp-buttons svg {
    transition: transform 0.3s ease;
}




.whatsapp-container:hover .whatsapp-label {
    opacity: 1;
    transform: translateX(0);
}

.whatsapp-container:hover .whatsapp-button {
    transform: scale(1.1);
    box-shadow: 0 20px 45px rgba(37, 211, 102, 0.6);
}

.whatsapp-container:hover .whatsapp-button svg {
    transform: rotate(6deg);
}

.whatsapp-button:active {
    transform: scale(0.9);
}

.pulse-effect {
    position: absolute;
    inset: 0;
    background-color: #25D366;
    border-radius: 50%;
    z-index: 1;
    opacity: 0.25;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.whatsapp-container:hover .pulse-effect {
    display: none; 
}


.visit-us{padding: 50px 0px;}
.visit-us .row-center{padding-left: 10%;}
/* Columna de Texto */
.info-column {
    flex: 1;
    max-width: 450px;
}

.info-column h2 {
    font-size: 48px;
    color: var(--dark-blue);
    line-height: 1.1;
    margin: 0;
}

.info-column h2 span {
    color: var(--cyan);
    font-weight: 400;
}

.info-column .promo-text {
    font-size: 18px;
    color: var(--text-gray);
    margin: 25px 0;
}

.info-column .promo-text strong {
    color: var(--dark-blue);
    display: block;
    margin-top: 5px;
}

.map-instructions {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.5;
}

.map-instructions .arrow {
    color: var(--cyan);
    font-weight: bold;
    font-size: 18px;
    margin-top: -3px;
}

/* Columna del Mapa */
.map-column {
    flex: 1.5;
    position: relative;
}

.map-wrapper {
    border: 8px solid var(--cyan);
    border-right: inherit;
    border-radius: 30px 0px 0px 30px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    height: 350px;
    background: #f0f0f0;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.main-footer {
    background-color: var(--footer-bg);
    color: #ffffff;
    padding: 60px 0 30px;
}



/* Columna del Logo */
.footer-logo { flex: 1; min-width: 200px; }
.footer-logo img { max-width: 150px; }

/* Estilo de Columnas con divisor vertical */
.footer-col {
    flex: 1;
    padding: 0 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 200px;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Enlaces de Navegación */
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 15px; }
.footer-links a {
    text-decoration: none;
    color: var(--text-light);
    font-size: 15px;
    transition: color 0.3s;
}
.footer-links a:hover { color: var(--cyan); }

/* Información de Contacto */
.contact-info p {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 15px;
}
.contact-info i { color: var(--text-light); font-size: 18px; }

/* Columna de Redes y Botón */
.footer-right {
    flex: 1.2;
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    text-align: right;
    min-width: 250px;
}

.social-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-bottom: 25px;
}

.social-link {
    width: 35px;
    height: 35px;
    background-color: #2a3b4d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s;
}
.social-link:hover { background-color: var(--cyan); }

.btn-contact {
    background-color: var(--cyan);
    color: #ffffff;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 30px;
}

.copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 20px;
}


/* 1. EL CONTENEDOR PRINCIPAL DEL FONDO */
.animated-gradient-container {
position:fixed;
left: 0;
width: 100%;
height: 300px;
z-index: -2;
top: 40%;
}

/* 2. LA CAPA DE DEGRADADOS (CIRCULOS) */
.gradients {
position: absolute;
width: 100%;
height: 100%;

/* DEFINICIÓN DE DEGRADADOS: Usamos opacidades más bajas (0.6 - 0.7) */
background-image: 
radial-gradient(circle at 10% 10%, rgb(44 180 190 / 21%) 0%, #00000000 40%), /* Cian */ radial-gradient(circle at 90% 90%, rgb(44 180 190 / 7%) 0%, transparent 40%), /* Púrpura */ radial-gradient(circle at 50% 50%, rgb(44 180 190 / 11%) 0%, transparent 50%), /* Azul suave */ radial-gradient(circle at 30% 80%, rgb(44 180 190 / 12%) 0%, transparent 40%);
/* ANIMACIÓN DE MOVIMIENTO Y EXPANSIÓN */
animation: flowAndBreathe 5s ease-in-out infinite alternate;

/* EL TRUCO DEL DESENFOQUE: Lo aumentamos significativamente */
filter: blur(40px); /* Esto rompe los bordes y las bandas */
}

/* 3. LA CAPA DE RUIDO (TEXTURA DE GRANO) - Súper Importante */
/* Esta capa suaviza las transiciones de color */
.loc{
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
/* DEFINICIÓN DE LA ANIMACIÓN */
  @keyframes flowAndBreathe {
    0% {
      /* Posición y tamaño inicial */
      background-position: 10% 10%, 90% 90%, 50% 50%, 30% 80%;
      background-size: 80% 80%, 80% 80%, 80% 80%, 80% 80%;
    }
    50% {
      /* Se mueven y se expanden (la "bola" se amplía) */
      background-position: 90% 20%, 20% 80%, 70% 30%, 60% 70%;
      background-size: 100% 100%, 100% 100%, 90% 90%, 110% 110%;
    }
    100% {
      /* Posición y tamaño final (igual a 0% para el alternate) */
      background-position: 10% 10%, 90% 90%, 50% 50%, 30% 80%;
      background-size: 80% 80%, 80% 80%, 80% 80%, 80% 80%;
    }

  }

/******* WOCOOMMMERCE *********/

.whatsapp-button{padding: 10px 15px; background: var(--color2); color: #fff; border-radius: 20px; width: 100%; text-align: center; display: inline-block; margin: 10px 0px 15px; box-sizing: border-box;}
.whatsapp-disclaimer{    padding: 5px;
    font-size: 11px;
    background: #fff;
    border-radius: 7px;
    width: 100%;
    text-align: center;
    display: inline-block; border-left: 2px solid var(--color1);}
.product_meta{padding: 20px 0px;}
.posted_in a, .tagged_as a{display: inline-block; padding: 3px 5px; border-radius: 3px; background: #0d1b2acc; color: #fff; font-size: 12px;}
.tagged_as{padding-top: 10px; display: inline-block;}
.tagged_as a{background: #2cb4be; font-size: 10px;}

center .indicadores-salud{padding: 30px 0px; background: #fff;}
center .container-stats{justify-content: center;}

.indicadores-salud {
    background-color: var(--bg-light);
font-family: var(--font1);
}

.container-stats {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    text-align: center;
}

.stat-card {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.stat-card:hover {
    transform: translateY(-10px);
}

.stat-card i {
    font-size: 19px;
    color: var(--medical-cyan);
    margin-bottom: 5px;
}

.stat-number {
    font-size: 17px;
    color: var(--primary-blue);
    margin: 5px 0;
    font-weight: 700;
}
.woocommerce-product-details__short-description{font:500 13px var(--font1); color: var(--dark-navy); line-height: 20px; padding: 20px 0px}
.woocommerce-product-details__short-description p{ padding: 3px 0px 5px;}
.woocommerce-product-details__short-description li{ margin-left: 30px;}


.stat-text {
    font-size: 10px;
    color: var(--text-gray);
    font-weight: 500;
    line-height: 1.4;cursor: pointer;
}


.nosotros-section {
    padding: 80px 0;
    background-color: #fff;
}

.nosotros-header {
    text-align: center;
    margin-bottom: 60px;
}

.nosotros-header h2 {
    font-size: 2.5rem;
    color: var(--dark-gray);
    margin-bottom: 15px;
}

.nosotros-header h2 span {
    color: var(--primary-cyan);
}

.nosotros-header p {
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Flexbox Layout */
.nosotros-content {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.nosotros-image {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.nosotros-image img {
    width: 100%;
    border-radius: 30px; /* Estilo de las cards en la imagen */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.badge-experience {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--color1);
    color: white;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(41, 182, 189, 0.3);
}

.nosotros-text {
    flex: 1;
    min-width: 300px;
}

.nosotros-text h3 {
    font-size: 1.8rem;
    color: var(--dark-gray);
    margin-bottom: 20px;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.features-list li {
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--dark-gray);
}

.features-list .icon {
    color: var(--primary-cyan);
    margin-right: 10px;
}

/* Botones con estilo Asbor */
.cta-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn {
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: 0.3s;
}

.btn-primary {
    background-color: var(--color2);
    color: white;
}

.btn-secondarys {
    background-color: var(--color3);
    color: white;
}

.btn:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .nosotros-content {
        flex-direction: column;
    }
    .badge-experience {
        right: 10px;
        bottom: 10px;
    }
}























/* Responsivo para móviles */
@media (max-width: 768px) {
    .stat-card {
        padding: 30px 15px;
    }
}



/*woocomerce-detalle*/
#container-module-details 
{
	width: 100%;
    display: flex;
    flex-flow: row wrap;
	justify-content: space-between;
   
    padding: 6rem 0px;
}
.row-detail-woocommerce 
{
	width:100%;
}
.column-right 
{
    width: 100%;
}
.row-detail-woocommerce 
{
    width: 100%;
}
#product-102 {
    width: 100%;
    justify-content: space-between;
    display: flex;
}
.woocommerce-product-gallery
{
	width: 49%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.flex-viewport img
{
    width: 100%;
	height: auto;
}

.summary.entry-summary 
{
    width: 45%;
}
.woocommerce-tabs.wc-tabs-wrapper 
{
   display:none;
}
.woocommerce-notices-wrapper 
{
    display: none;
}
.woocommerce-product-gallery__wrapper div a img 
{
    width: 100%;
    object-fit: cover;
}

/* Título del producto */
.product_title.entry-title{font: 800 25px var(--font2); color: var(--color1); display: block; padding-bottom: 10px; text-transform: uppercase; border-left: 2px solid var(--color2); border-radius: 5px; padding: 15px 15px;}
.full-description-wrapper h3{font: 800 17px var(--font1); color: var(--color3); text-transform: uppercase; padding-bottom: 10px;}
.full-description-wrapper p{font: 400 15px var(--font1); color: var(--color4); line-height: 19px;}


.price del{font:500 17px var(--font2); color: #666;}
.price ins{font: 700 25px var(--font2); color: var(--color2); text-decoration: none; margin-right: 10px;}
.summary .price{    display: flex;
    flex-flow: row-reverse;
    justify-content: flex-end;
    align-items: end; padding: 20px 0px;}
.sku_wrapper{display: block;}
.flex-control-thumbs img{border-radius: 10px; box-shadow:0px 0px 15px 0px #f2f2f2;cursor: pointer; transition: all 0.4s linear;border: 1px solid #fff;}
.flex-control-thumbs img:hover{box-shadow:0px 0px 0px 0px #f2f2f2; border: 1px solid #f2f2f2;}
.flex-active{border-top: 4px solid var(--color2) !important;}


a.woocommerce-product-gallery__trigger,
section.related.products, form.cart
{
    display: none;
}
#container-module-details .product 
{
	width: 100%;
	display: flex !important;
	justify-content: space-between;
	flex-flow: row wrap;
}

.product-category-general{border: 1px solid var(--color3); border-radius: 20px; overflow: hidden;}
.woocommerce-product-gallery__image img{border-radius: 20px; overflow: hidden;     width: 100% !important;
    max-height: 441px !important;}
.flex-viewport{box-shadow: 0px 0px 15px 0px #f2f2f2; border-radius: 20px;}
.flex-control-nav li{list-style: none;}
.onsale{position: absolute; top: 0px; left: 0px;}


/* CONTENEDOR DEL BANNER */
.banner {
    width: 100%;
    max-width: 1600px;
    height: 200px;
    margin: auto;
    position: relative;
    overflow: hidden;text-align: center; border-radius: 0px 0px 40px 40px;
}

/* IMAGEN DE FONDO */
.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OVERLAY CON BLUR Y COLOR */
.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(19, 35, 56, 0.75); /* #132338 con transparencia */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* CONTENIDO */
.banner-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
    color: white;
    z-index: 2; text-align: center;
}

/* TÍTULO */
.banner-content h1 {
    font: 700 33px var(--font1);
    margin: 0 0 15px;
   
}

/* MIGAS DE PAN */
.breadcrumb {
    font-size: 13px;
    opacity: 0.9;
}

.breadcrumb span {
    margin: 0 5px;
    opacity: 0.7;
}

.breadcrumb a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .active {
    font-weight: bold;
    opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .banner-content {
        left: 30px;
        right: 30px;
    }

    .banner-content h1 {
        font-size: 22px;
    }
}





/* ==========================================================================
   DIRECTIVAS RESPONSIVE - ASBOR THEME
   ========================================================================== */

@media (max-width: 992px) {
    /* Ajuste Universal de Contenedores */
    .container {
        width: 100% !important;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .info-column {
        max-width: 100%;
    }
    .map-instructions {
        justify-content: center;
    }
    .map-column {
        width: 100%;
    }.new-arrivals-grid { grid-template-columns: 1fr; }
    .featured-card { height: 400px; }
    /* Slider Principal */
    .slider .slc {
        padding: 60px 5%;
        flex-direction: column-reverse; /* Imagen arriba, texto abajo */
        text-align: center;
    }

    .thumb-slider {
        position: relative;
        right: auto;
        top: auto;
        margin-bottom: 30px;
    }

    .thumb-slider img {
        max-width: 90%;
        height: auto;
    }

    .tech-content-box {
        max-width: 100%;
    }

    .headline {
        font-size: 32px;
    }

    .action-links {
        justify-content: center;
    }

    /* Sección Quienes Somos (About Us) */
    .about-us-box {
        width: 100%;
        padding: 40px 20px;
        margin-top: 0;
    }

    .about-us-box h2 {
        font-size: 22px;
    }

    /* Grid de Nuevos Ingresos */
    .new-arrivals-grid {
        flex-direction: column;
        gap: 30px;
    }

    .featured-card {
        width: 100%;
        height: 300px;
        box-sizing: border-box;
    }

    .productos01 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Navbar & Menú */
    .navbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center; padding: 20px 0px;
    }
    .about-us-box{background-size: cover;}
    .section-header h2{display: block;font-size: 25px;}
    .contact-info p{justify-content: center;}
    .footer-right .row-center{justify-content: center;}
    
    ul.menu, .btn-contact {
        display: none; /* Ocultamos el menú de escritorio */
    }
    .nav-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }
    
    /* Animación hamburguesa a X */
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
     .footer-col, .footer-right {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 30px 0;
        text-align: center;
    }

    .social-icons { justify-content: center; }
    .footer-logo { margin-bottom: 30px; }
    .hamburger {
        display: flex !important;
    }

    /* Ajustes de Secciones */
    .padded {
        padding: 50px 0;
    }

    /* Sección Clientes */
    .logos-wrapper {
        border-radius: 20px;
        padding: 20px;
        transform: translateY(20px);
    }

    /* Sección Visítanos / Mapa */
    .visit-us .row-center {
        padding-left: 0;
        flex-direction: column;
    }

    .info-column {
        text-align: center;
        padding: 0 20px 30px;
    }

    .info-column h2 {
        font-size: 32px;
    }

    .map-column {
        width: 100%;
    }

    .map-wrapper {
        border-radius: 0;
        border-right: none;
        border-left: none;
    }

    /* Footer */
    .main-footer .container {
        flex-direction: column;
        gap: 30px;
    }

    .footer-col, .footer-right {
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px 0;
        text-align: center;
        width: 100%;
    }
    .grid_4{    grid-template-columns: repeat(2, 3fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;}
    .product-card{margin: 0px; padding: 20px 10px;}
    .ls .row-center, .ls{display: block; width: 100%;}
    .ls{padding: 0px 6%; box-sizing: border-box;}
    .ls .btn-contact{display: block; margin-top: 20px;}

    .social-icons {
        justify-content: center;
    }
        .woocommerce.single-prod div.product {
        flex-direction: column;
        gap: 40px;
    }
    #container-module-details .product{display: block !important;}
    .summary.entry-summary, .woocommerce-product-gallery{width: 100% !important;}
    .whatsapp-button{box-sizing: border-box;}
}

@media (max-width: 480px) {
    .headline {
        font-size: 28px;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center; box-sizing: border-box;
    }

    .action-links {
        flex-direction: column;
        gap: 15px;
    }
    .flex-control-nav.flex-control-thumbs li{width: 22%;}
    .flex-control-nav.flex-control-thumbs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100% !important;
        position: relative;
    }
        .flex-viewport {
        width: 100% !important;
        margin-bottom: 10px;
    }.woocommerce-product-gallery{display: block;}
    
    .card-footer {
        flex-direction: column;
        gap: 10px;
    }
}