/*!
Theme Name: Avileo
Theme URI: http://underscores.me/
Author: Daniel García
Author URI: https://dgarcia.mx
Description: Sitio web para Avileo
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: avileo
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Avileo is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {

    --bs-warning: #DC8620;}
    
    .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

.btn-warning{color: var(--bs-light); }
.main-title {font-size: 20px;}
.main-subtitle{font-size: 32px;font-weight: 600;}

.navbar-nav.nav-icons .nav-item .nav-link {font-size: 19px;}
.navbar-nav.nav-icons .nav-item .nav-link .badge {padding: 0.30em 0.65em;font-size: 0.55em;font-weight: 300;}

#main-menu .menu-item .nav-link {font-size: 18px;}

.nav-icons .nav-item .nav-link {color: white;font-size: 18px;}

.navbar-brand img{max-width: 200px;}
.navbar-brand-mobile img{max-width: 150px;}
header#masthead {position: absolute;min-height: 12vh;z-index: 99;}
/*.sliders .swiper-slide {background-size: cover;background-repeat: no-repeat;}
.slide-content {display: flex;min-height: 800px;align-items: center;}

.sliders .slide-content h2 {font-size: 42px;color: white;}
.sliders .slide-content p {color: white;} */

.sliders .swiper-pagination-bullet {width: 12px; height: 12px;}
.sliders .swiper-pagination-bullet-active{background: var(--bs-warning);}
.sliders .swiper-button-next, .sliders .swiper-button-prev{color: var(--bs-light);}

#page-header{padding-top: 120px;padding-bottom: 60px;background-image: url('./assets/images/pattern.jpg');}

/*#beneficios{padding-top: 120px; padding-bottom: 120px;background-image: url('./assets/images/bg-beneficios.jpg'); background-repeat: no-repeat;
background-size: cover;}*/

#testimonios .imagen img {border-radius: 50%;width: 260px;height: 260px;display: block; margin: 0 auto;}

.categories {position: absolute;bottom: 10px;}
.articulos .card img {width: 100%;}

#productos{padding-top: 40px; padding-bottom: 40px;}
.producto h2{}

.icon {display: flex; /* Activa Flexbox */gap: 15px; /* Espacio entre el ícono y el texto */}
.icon img {width: 60px; /* Ancho del ícono */height: 60px; /* Alto del ícono */flex-shrink: 0; /* Evita que el ícono se reduzca */}
.text-icon {display: flex;flex-direction: column; /* Coloca el texto en columna */justify-content: center; /* Centra verticalmente el texto */}
.icon-title {font-weight: bold; /* Texto en negrita */margin: 0; /* Elimina el margen predeterminado del párrafo */}
.text-icon span {font-size: 14px; /* Tamaño del texto secundario */ /* Color del texto secundario */}
.icon ul {padding-left: 1rem;color: white;font-size:14px ;}

/* Desactiva el efecto de zoom al pasar el mouse */
.woocommerce-product-gallery .zoomImg {
    display: none !important;
}
.woocommerce-product-gallery__image a {
    cursor: default !important;
}

/*** Blog **/
.entry-title{}

/*** woocomerce **/
span.onsale.descuento {position: absolute;background: #FF4F0F;top: 10px;left: 0;z-index: 1;color: white;padding: 5px 15px;font-size: 12px;}
span.new-product {position: absolute;background: #FF4F0F;top: 10px;left: 0;z-index: 1;color: white;padding: 5px 15px;font-size: 12px;}

.btn-add-to-cart .btn-title{display: block;}
.btn-add-to-cart .loading-spinner{display: none; }

.btn-add-to-cart.loading .btn-title{display: none;}
.btn-add-to-cart.loading .loading-spinner{display: block;}


form.cart {
    display: flex;
}

.cart button {
    background-color: var(--bs-warning);
    color: white;
    border-color: var(--bs-warning);
}
/**** PRODUCTO *****/
.btn-tallas {font-size: 13px;font-weight: 500;border-bottom: 2px solid var(--bs-warning);padding-bottom: 5px;cursor: pointer;}
.btn-add-to-cart{color: white; font-size: 13px; text-transform: uppercase;}
.btn-add-to-cart:hover{color: white;}

.btn:focus, 
.btn:active, 
.input-group .form-control:focus {box-shadow: none !important;outline: none !important;}
.btn-warning:focus, .btn-warning:disabled, .btn-warning.disabled {color: white;}
.offcanvas.show {visibility: visible;}

.precio del {opacity: 0.5;}
.precio ins {text-decoration: none;}

.contenido h2, .contenido h3{color: var(--bs-success);}

.image-container {position: relative;}
.image2 {opacity: 0;transition: opacity 0.3s ease-in-out;}
.image-container:hover .image1 img {opacity: 0;}
.image-container:hover .image2 {opacity: 1;}

/* Contenedor de video responsive */
.swiper-slide.video-slide {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
}

.product-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    color: white;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
    z-index: 2;
}

/* Asegura que los thumbnails de video sean identificables */
.thumbnail-slider .swiper-slide-thumb-active.video-thumb::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') no-repeat;
    background-size: contain;
}

/* Estilo para identificar thumbs de video */
.video-thumb {
    position: relative;
}

.video-thumb-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Thumb activo */
.thumbnail-slider .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #000;
}

.thumbnail-slider .swiper-slide {
    opacity: 0.6;
    transition: opacity 0.3s;
    cursor: pointer;
}

.slick-slide img {
    display: block;
    width: 100% !important;
}

/*** FOOTER ****/
.site-footer {background: var(--bs-success);color: var(--bs-light);}
.site-footer, .site-footer .social a {color: var(--bs-light);}
.site-footer .social a{font-size: 24px;}

h4.widget-title {text-transform: uppercase;font-weight: 600;font-size: 16px;color: var(--bs-warning);}
.widget-footer .menu {padding-left: 0;list-style: none;}
.widget-footer .menu li a{color: var(--bs-light);font-weight: 300;font-size: 14px;}
.widget-footer .textwidget p{font-size: 14px;font-weight: 300;}
.widget-footer .textwidget p a{color: var(--bs-warning);}

@media only screen and (min-width: 1025px) {
    .header-nav {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /*#section-categorias {margin-top: -100px;position: relative;z-index: 2;} */
}

@media only screen and (max-width:  992px){
    .nav-icons-mobile .badge {font-size: 12px;}
    header#masthead {min-height: 8vh;}


    .header-nav-mobile .navbar-brand img{max-width: 150px;}

    .main-title {font-size: 16px;}
    .main-subtitle{font-size: 32px;}
    
    #productos{padding-top: 40px; padding-bottom: 40px;}
}

@media only screen and (max-width:  480px){
    .nav-icons-mobile .badge {font-size: 10px;}
    .navbar-brand-mobile img{max-width: 120px;}
    
    #beneficios .icon-title {
        font-size: 12px;
    }
    
    #beneficios .icon img {
        width: 42px;
        height: 42px;
    }
}

@media only screen and (max-width:  410px){
    .nav-icons-mobile .nav-link {padding: 0.5rem 0.7rem;}

    .main-title {font-size: 14px;}
    .main-subtitle{font-size: 24px;}
}

@media only screen and (max-width:  360px){
    
    .icon {gap: 5px;}
    #beneficios .icon img {
        width: 32px;
        height: 32px;
    }
    
    #beneficios .icon-title {
        font-size: 10px;
    }
}