@charset "UTF-8";
/*
Cuando trabajamos dentro del administrador de WordPress y el plugins Happy WP SCSS Compiler
porque este plugin no admite @use  solo @import 
*/
/*
Theme Name:  Gamatel SAC 02
Author: unidadvirtual.com
Author URI: http://www.unidadvirtual.com/
Description: Plantilla desarrollada en Bootstrap paso a paso 
Version: 1.2
License: GNU General Public License v2 or later
Text Domain: unidadvirtual.com
*/
/* -------------------  INICIO _general.scss ------------------*/
:root {
  --solapa-smooch-font: "Smooch Sans", sans-serif;
  --color-base: #F29200;
  --color-primary: #2ab684;
  --color-second-color: #383326;
  --color-third-color: #080d1c;
  --color-fourth-color: #f7f5f5;
  --color-fifth-color: #4d4b57;
  --color-six-color: #03050c;
  --color-seven-color: #fff1e2;
  --color-eight-color: #03060d;
  --color-nine-color: #f8fafe;
  --color-base-hover: #FFBD59;
  /* ------- Cabecera ------- */
  --header__top-bar-background-color:#b88a4d;
  --header__posicion-1-background-color:#232739;
  --header__top-menu-background-color:#232739;
  /* funcionamiento scroll sticky : al hacer scroll en  header___posicion-1
 se grega el stylo  --header__top-menu-sticky-background-color 
 luego al regresar a su posicion se agrega el stylo  --header__top-menu-background-color
 */
  /* Color de fondo al hacer scroll sticky*/
  --header__top-menu-sticky-background-color:#232739;
  /* ------- Inicio Footer ------- */
  --footer__color-enlace:var(--color-base);
  /* ------- Fin Footer ------- */
  /* color del texto - 1 Nivel  */
  --menu__color_texto_1_Nivel:#ffffff;
  /* color del texto Activo - 1 Nivel  */
  --menu__color_texto_activo_1_Nivel:#ffffff;
  /* color del texto - 1 Nivel al pasar mouse Hover  */
  --menu__color_texto_1_Nivel_hover:#E36E2F;
  --submenu__background-color: #ffffff;
  --submenu__color-texto-1-Nivel: #423d2f;
  --submenu__background-color-hover: #C69453;
  --footer-background: #000;
}
:root * {
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px !important;
  color: #291701;
  overflow-x: hidden;
  margin: 0px;
  padding: 0px;
  text-rendering: optimizeLegibility;
}
.bg_portada {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 30px;
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  /*     --data-bg-image: url('/wp-content/uploads/2022/11/bg-fondo-madera-1.webp'); */
  /*     
    background-color: rgba(193,99,0,0.72);
    background-image: url('/wp-content/uploads/2022/11/bg-fondo-madera-1.webp');
    background-repeat: repeat;
    background-position: left top;
    box-shadow: inset 0 0 0 5000px rgb(193 99 0 / 72%);
    -moz-box-shadow: inset 0 0 0 5000px rgba(193,99,0,0.72);
    -webkit-box-shadow: inset 0 0 0 5000px rgb(193 99 0 / 72%); */
  height: auto;
}
h1 {
  font-size: 2rem !important;
  font-family: "Raleway", sans-serif;
  margin: 20px 0px;
  text-align: center;
}
h2 {
  font-size: 1.6rem !important;
  font-family: "Raleway", sans-serif;
}
h3 {
  font-size: 1.125rem !important;
  font-family: "Raleway", sans-serif;
}
a {
  text-decoration: none;
  background: 0 0;
}
a, button {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
a, a:hover, a:focus, a:active {
  color: #B88A4D;
}
#section-main-content {
  position: relative;
  overflow: hidden;
  padding: 15px;
}
.color-black {
  color: #29292e;
}
/*negro */
.color-white {
  color: #ffffff;
}
/*blanco*/
.color-verde__mar {
  color: #4ba541;
}
/*verde*/
.color-plomo {
  color: #969696;
}
/*plomo*/
.color-red {
  color: red;
}
/*rojo*/
.color-celeste {
  color: #3486ae;
}
.color-Azul {
  color: #336699;
}
.color-Azul__1 {
  color: #0073c8;
}
.color-indianred {
  color: #cc6666;
}
.height-250px {
  height: 250px;
}
.container-fluid {
  box-sizing: border-box;
  padding-left: 0;
}
.xoo-wsc-basket {
  bottom: 70px;
  right: 5px;
}
.ctn_gral_contactenos_dere {
  padding-left: 30px;
}
ul.lists {
  padding: 5px 0;
  list-style: none;
  padding-top: 20px;
}
ul.lists li {
  position: relative;
  padding-left: 25px;
  line-height: 25px;
  margin-bottom: 15px;
}
ul.lists li a {
  color: #fe6b38;
}
ul.lists li.mail .icon {
  background-position: -288px 0;
}
ul.lists li .icon {
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  left: 4px;
  top: 5px;
  background-image: url("/wp-content/uploads/2024/05/jf-list.gif");
  background-repeat: no-repeat;
  background-position: 0 0;
}
ul.lists li.iphone .icon {
  background-position: -64px -32px;
}
ul.lists li.location .icon {
  background-position: -79px -32px;
}
ul.lists li.chart .icon {
  background-position: -272px -32px;
}
.milinea1 {
  border-top: 5px solid var(--color-base);
  margin-top: 40px;
  opacity: 100%;
  margin-bottom: 40px;
}
/* -------------------  FIN  _general.scss ------------------*/
/* ------ INICIO  _cabecera.scss Header --------*/
header {
  padding-top: 0px;
}
.header__main {
  height: auto;
  background-color: #232739;
}
.header__top-redes-sociales {
  margin-top: 12px;
  margin-right: 55px;
}
.header__top-redes-sociales a {
  color: #fff;
}
.header__top-redes-sociales a .fa-inverse {
  color: #000000;
}
/* .header__top-01 { } /* lo he acambiado por header__top-bar */
.header__top-bar {
  background-color: var(--header__top-bar-background-color);
  display: none !important;
}
/* .header__top-02 {} /* lo he acambiado por header__top-menu 
 *  header__top-menu lo he cambiado por   header___posicion-1 */
.header___posicion-1 {
  background-color: var(--header__posicion-1-background-color);
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  padding: 10px 10px;
  box-sizing: border-box;
  z-index: 998;
  top: 30px;
  margin-left: 0px !important;
}
.header___nivel1_desktop {
  display: flex;
}
.header___nivel1_mobile {
  display: none;
}
.header___posicion-2 {
  background-color: var(--header__posicion-1-background-color);
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  box-sizing: border-box;
  z-index: 999;
  margin-left: 0px !important;
}
.header___posicion-3 {
  background-color: var(--header__posicion-1-background-color);
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  padding: 15px 0px;
  box-sizing: border-box;
  z-index: 999;
  margin-left: 0px !important;
}
.header___posicion_1_top_menu {
  z-index: 400;
  display: flex;
}
.header___posicion_1_top_celular {
  justify-content: end;
  margin-bottom: 10px;
}
.header___posicion_1_top_busca_produ {
  align-content: center;
  margin-top: 5px;
}
/* ----
 INICIO Sticky Menu baja al hacer  Scroll   dentro de js/general.js 
En general.js se define la clase header__Sticky 
recuerda el ccs de la clase header__Sticky  esta en  _cabecera.scss
-------*/
.header__Sticky {
  position: fixed;
  top: 0;
  /* left: 0; right: 0;  */
  width: 100%;
  z-index: 9999;
  background: var(--header__top-menu-sticky-background-color);
  /* -webkit-transition: all 0.3s;
	transition: all 0.3s; */
  /* transition : padding-top 0.5s ease; */
  /*height: 80px; */
  display: flex;
  align-items: center;
  /* transition: height .2s ease 0s,background-color .3s ease 0s; */
  /* transition: all 0.3s ease; */
}
/* ----------------------- */
.header__contact-phone {
  color: #ffff;
  font-size: 0.875rem;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  letter-spacing: 3px;
  align-content: center;
}
.header__contact-phone span {
  font-weight: 700;
  text-transform: uppercase;
}
.header__contact-phone a {
  color: #fe6b38;
  font-size: 1.2rem;
}
/* para los iconos de redes sociales con bootstrap */
._bootstrapIcons {
  font-size: 2.2em;
  vertical-align: middle;
  color: white;
  text-shadow: 1px 1px 1px #ccc;
  padding: 0.2em 0.2em;
}
/* para los iconos de redes sociales solo SVG  */
.list-inline-item {
  margin: 0 0 0 5px;
  padding: 0;
  display: flex;
}
.header__top-redes-sociales {
  display: flex;
}
.header__top-redes-sociales a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #5089f5;
  font-size: 16px;
  line-height: 35px;
  text-align: center;
  width: 50px;
  height: 50px;
}
.header__top-redes-sociales .facebook, .header__top-redes-sociales .youtube {
  color: #f8f8f8;
  padding: 10px 10px;
  border-radius: 50%;
}
.header__top-redes-sociales .whatsapp:hover, .header__top-redes-sociales .facebook:hover, .header__top-redes-sociales .twitter:hover {
  background-color: #FF5A00;
  color: #FFF;
}
.header__top-redes-sociales .youtube:hover {
  background-color: #FAFFBD;
  color: #FFF;
}
.header__top-ctn_whatsapp {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-right: 20px;
  align-items: center;
}
.header__top-ctn_whatsapp a {
  display: flex;
  color: #e4efe4;
}
.header__top-ctn_whatsapp .whatsapp:hover {
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #FFF;
}
.header__top-texto_whatsapp {
  display: flex;
  text-align: center;
  align-items: center;
  color: #fff;
  margin-left: 10px;
}
/* ------ FIN  _cabecera.scss Header --------*/
/* ------ INICIO _portada.scss ----------*/
.cards-products-home {
  background-color: #FFF;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 95%;
  margin: 0 auto;
  min-height: 100px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  margin-top: 40px;
}
.cards-category {
  width: 100%;
}
.cards-category-header {
  height: 45px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #000000;
  justify-content: space-between;
  align-items: center;
  font-family: Roboto-Medium;
  font-size: 18px;
  border-bottom: 5px solid #FF8100;
}
.category-name {
  padding-left: 30px;
  word-spacing: 0.3rem;
  text-transform: uppercase;
}
.category-button {
  height: 100%;
  padding: 20px;
  background-color: #FF8100;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  padding: 0px 30px;
}
.cards-category-header .category-button a {
  display: inline-flex;
  justify-content: inherit;
  align-items: center;
  height: 45px;
  width: 100px;
  color: #ffffff;
}
.cards-category-header .category-button .icons {
  margin-left: 10px;
}
.cards-category-products {
  padding: 15px;
  text-align: center;
}
.category-button {
  border: none;
  cursor: pointer;
  color: white;
  background: linear-gradient(to right, #ff8100 50%, #ffb366 50%) no-repeat left / 200%;
  transition: background-position 0.3s ease;
}
.category-button:hover {
  background-position: right;
  color: black;
}
/* ------ FIN  _portada.scss ----------*/
/*
    Usaremos el Menu  WP Bootstrap Navwalker  
    https://wp-bootstrap.github.io/wp-bootstrap-navwalker/
    https://github.com/wp-bootstrap/wp-bootstrap-navwalker
*/
/*
Documentacion Hace referencia a los elementos del Menu


-----------------------------1 Nivel- Documentacion --------------------------------

→ nav.navbar                       = Nombre del menu 
→ nav.navbar ul li                 = 1  Nivel - Elemento Li

//Crear una plantilla en WordPress: menús #3 - Diseño y programación Web
//Rafel sanzo
//https://www.youtube.com/watch?v=CnYJ7_WzDD0&list=PLaNBgK4b74m5rKUfdFNPLc43ZuxZeQlC5&index=3

→ menu-item-has-children           = Wordpres pone a los LI que tienen submenu anidado 
                                    la clase (menu-item-has-children) del 1 y 2 Nivel
                                         

-----------------------------2 Nivel- Documentacion --------------------------------

→ nav.navbar ul ul li {}               = 2 Nivel - Elemento Li
→ .dropdown-submenu
→ .dropdown-submenu:hover         

-----------------------------3 Nivel- Documentacion -------------------------------

// La clase dropdown-menu hace referencia al UL del 2 y 3 nivel 
// Pero en este caso se le antepone la clase .dropdown-submenu que se le asignaron a los LI - 2 Nivel 
// Entonces la clase dropdown-menu en este caso hace referencia solo a los UL del 3 Nivel. 

→  .dropdown-submenu .dropdown-menu { top: 0; left: 100%;padding-left: 3px;} = Solo - 3 Nivel UL


-----------------------------2 y 3 Nivel- Documentacion --------------------------------
// La clase dropdown-menu hace referencia al UL del 2 y 3 nivel 
→ .dropdown-menu {}                    = 2 y 3 Nivel - Elemento UL (contenedor de los li) 
→ li.dropdown:hover > .dropdown-menu   = 2 y 3 Nivel - Elemento UL pero cuando se hace hover en el 1 Nivel al LI contenedor (combobox)  , hace referencia al UL del 2 y 3 Nivel


→ nav.navbar ul ul li:first-child  = 2 y 3 Nivel - Primer Elemento Li
→ .dropdown-item                   = 2 y 3 Nivel - Elemento Li - a 
→ .dropdown-item:hover            

*/
.navbar-nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
/* Barra de navegación (Navbar) transparente con Bootstrap y CSS */
/* https://styde.net/barra-de-navegacion-navbar-transparente-con-bootstrap-y-css/ */
nav.navbar {
  background-color: transparent !important;
  justify-content: space-around;
  width: 100%;
  padding-top: 0 !important;
}
/* 1 Nivel - color del texto */
.navbar-light .navbar-nav .nav-link {
  color: var(--menu__color_texto_1_Nivel);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.875rem;
}
/* 1 Nivel - color del texto Activo */
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link {
  color: var(--menu__color_texto_activo_1_Nivel);
}
/* 1 Nivel - color del texto al pasar mouse Hover */
.nav-link:focus, .nav-link:hover {
  color: var(--menu__color_texto_1_Nivel_hover);
}
/*
nav.navbar ul li.menu-item-has-children>a:after {     
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="%23fff" d="M151.5 347.8 3.5 201c-4.7-4.7-4.7-12.3.0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3.0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>');
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -18px;
     border: 0!important; // anula el borde que le pone bootstrap
}
*/
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.6em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu:hover {
  background-color: var(--color-base);
}
nav.navbar ul ul li.menu-item-has-children > a:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="%23000" d="M187.8 264.5 41 412.5c-4.7 4.7-12.3 4.7-17 0L4.2 392.7c-4.7-4.7-4.7-12.3.0-17L122.7 256 4.2 136.3c-4.7-4.7-4.7-12.3.0-17L24 99.5c4.7-4.7 12.3-4.7 17 0l146.8 148c4.7 4.7 4.7 12.3.0 17z"/></svg>');
  margin-right: 20px;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
}
.dropdown-submenu-3-LI:hover {
  background-color: var(--color-base);
}
.dropdown-menu {
  padding-bottom: 0px;
}
.dropdown-item:hover {
  background-color: var(--color-base);
}
nav.navbar ul ul li:hover > a {
  color: #ffffff;
}
nav.navbar ul ul li:first-child {
  -moz-box-shadow: 0 -5px 0 var(--color-base);
  -webkit-box-shadow: 0 -5px 0 var(--color-base);
  -o-box-shadow: 0 -5px 0 var(--color-base);
  box-shadow: 0 -5px 0 var(--color-base);
}
.dropdown-item:hover {
  color: #ffffff;
}
.dropdown-item.active {
  color: #ffffff;
}
li.dropdown:hover > .dropdown-menu {
  display: block;
  width: 200px;
  -webkit-transition: all ease 0.35s;
  -moz-transition: all ease 0.35s;
  transition: all ease 0.35s;
  border-radius: 0 !important;
  padding-top: 5px;
}
.menu-item {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* coloca la palabra MENU a la derecha del menu hamburguesa */
.navbar-toggler:after {
  /*content: 'MENU';*/
  bottom: 10px;
  left: 10%;
  color: #c4c4c4;
  /*position: relative !important*/
}
.navbar-brand {
  display: none;
}
@media (max-width: 768px) {
  /* 1 Nivel - color del texto al pasar mouse Hover */
  .header___cabecera_logo_mobile {
    display: flex;
    justify-content: center;
  }
  .header___posicion_1_top_menu_mobile_toggle {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-right: 10px;
  }
  .navbar {
    position: absolute;
    left: 0;
    width: 60%;
    transition: all 0.3s;
    z-index: 99;
    margin-top: -30px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateY(52px);
    transition: transform 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
  .navbar-toggler {
    display: flex;
    padding-left: 0px;
    margin-bottom: 0px;
    border: none;
  }
  .navbar-brand {
    display: flex;
    color: white;
    font-size: 10px;
    position: relative;
    padding: 0px;
  }
  .navbar-brand:focus, .navbar-brand:hover {
    color: #ffffff;
  }
  .navbar-toggler-icon {
    background-color: white;
  }
  .nav-link:focus, .nav-link:hover {
    color: #ffffff;
  }
  .navbar ul {
    list-style: none;
    font-size: 14px;
    flex-direction: column;
    background: #ed8f00;
    padding-left: 15px;
    padding-top: 1px;
  }
  li.dropdown:hover > .dropdown-menu {
    border: 0px;
    width: 100%;
  }
  .dropdown-submenu {
    border-top: none !important;
  }
  .dropdown-submenu a {
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #ffffff;
  }
  nav.navbar ul li.menu-item-has-children > a:after {
    right: 10px;
    top: 25px;
  }
  .dropdown-toggle::after {
    position: absolute;
  }
  .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-left: 0;
    padding-right: 0px;
    justify-content: left !important;
  }
}
/*

NOTA : 
Alex
en cabecera_menu_wp_bootstrap_navwalker.php en seccion 
  button class se agrego la clase collapsed 
      para que al hacer click en el icono del menu hamburgueza cambie a X
      ver _menu_wp_bootstrap_navwalker.scss linea --- INICIO Menu Icono al hacer click cambia a X
      
original <button class="navbar-toggler"   
Agregado <button class="navbar-toggler collapsed"

*/
.navbar-toggler-icon {
  background-image: none !important;
  background-color: var(--bs-white);
  height: 3px;
  width: 25px;
  margin: 10px 0;
  position: relative;
  transition: all 0.35s ease-out;
  transform-origin: center;
}
.navbar-toggler-icon::before {
  display: block;
  background-color: var(--bs-white);
  height: 3px;
  content: "";
  position: relative;
  top: -7px;
  transition: all 0.15s ease-out;
  /*taken down to hide quicker*/
  transform-origin: center;
}
.navbar-toggler-icon::after {
  display: block;
  background-color: var(--bs-white);
  height: 3px;
  content: "";
  position: relative;
  top: 4px;
  transition: all 0.35s ease-out;
  transform-origin: center;
}
.navbar-dark .navbar-toggler-icon, .navbar-dark .navbar-toggler-icon::before, .navbar-dark .navbar-toggler-icon::after {
  background-color: var(--bs-white);
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  transform: rotate(45deg);
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
  opacity: 0;
}
.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
  transform: rotate(-90deg) translateX(7px);
}
/*------------- INICIO _Carousel.scss --------*/
/* ----> Custom Post Types & Shortcodes #4 - Diseño y programación Web
Rafel Sansó 
https://www.youtube.com/watch?v=5qpwIw20B18&list=PLaNBgK4b74m5rKUfdFNPLc43ZuxZeQlC5&index=7
----> Pagina Oficial Carrusel de Bootstrap
   https://getbootstrap.com/docs/5.0/components/carousel/#crossfade
 -->
 */
.main-slider {
  position: relative;
  display: block;
  z-index: 91;
}
#slider-home {
  margin-bottom: 10px;
}
.carousel-item {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: no-repeat center center scroll;
  background-size: cover;
}
.carousel-item:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(162, 152, 152, 0.3);
}
/* INICIO Modelo a seguir https://codepen.io/alextutor/pen/Vwdoqvr */
/* #carouselExampleFade = es el ide del contenedor del carrusel */
.carousel-inner .carousel-item {
  transition: -webkit-transform 2s ease;
  transition: transform 2s ease;
  transition: transform 2s ease, -webkit-transform 2s ease;
}
/* NOTA: alex recuerda poner a caption , h2 y P la animacion duracion y delay 
sino no se anima */
/* letter-spacing: 2pt;      /* para separar entgre letras 
word-spacing: 5pt;        /* para separacion entre palabras   
line-height: 20pt;        /* para la separacion entre lineas  
text-indent: 30pt;        /* para sangrias  
 */
#carouselExampleFade .carousel-caption h2 {
  animation-delay: 1s;
  animation-duration: 1s;
}
#carouselExampleFade .carousel-caption .carrusel_titulo_1 {
  animation-delay: 1s;
  animation-duration: 1s;
  font-size: 1.875rem !important;
}
#carouselExampleFade .carousel-caption p {
  animation-delay: 1.2s;
  animation-duration: 1s;
}
#carouselExampleFade .carousel-caption a {
  animation-duration: 1s;
  animation-delay: 2.4s;
  margin-top: 20px;
}
/* FIN Modelo a seguir https://codepen.io/alextutor/pen/Vwdoqvr
height: auto; 
*/
.carousel-inner img {
  display: block;
  max-width: 100%;
  height: 400px !important;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
}
.carousel-caption {
  /*   background-color: rgb(174 164 164 / 50%); */
  color: white;
  animation-delay: 1s;
  animation-duration: 1s;
  line-height: 40px;
  font-weight: 400;
  height: auto;
  color: ghostwhite;
  letter-spacing: 2px;
  word-spacing: 10px;
  bottom: 0px;
}
.carousel-caption {
  /*centra caption (top: 50%;transform: translateY(-50%);)
    https://stackoverflow.com/questions/27279865/how-to-vertically-center-a-bootstrap-carousel-caption
    */
  width: 50%;
  top: 40%;
  transform: translateY(-50%);
  padding: 30px 45px;
  margin: 0 auto;
  color: white;
  /*  background-color: rgba(0, 0, 0, 0.5); /*  
 /*    padding: 40px; */
  /* height: 100%; */
  /*  left: 0;
    top: 0; */
  /*     animation-duration: 1s;
    animation-delay: 2s; */
}
/* La clase animation-delay: sirve para hacer que la animación tarde en empezar */
/* .carousel-caption  h2 { animation: backInDown; animation-delay:0s ; animation-duration: 3s;
     font-size: 2.2rem !important; } */
/*   .carousel_titulo_2{ animation:backInLeft; animation-delay: 2s; animation-duration: 2s; 
    padding: 30px 0px;color: #ffffff; letter-spacing: 4px;  } */
/*   .carousel_animacion_titulo_2{ animation:backInLeft; animation-delay: 3s; animation-duration: 2s; 
    padding: 30px 0px;color: #ffffff; letter-spacing: 4px;  
  }
 */
.carousel-caption a {
  /* animation-duration: 1s; animation-delay: 2.4s; */
}
.carousel-caption img {
  display: block;
  max-width: 99%;
  height: auto;
  margin: 0 auto;
}
/* Button */
.delicious-btn {
  display: inline-block;
  min-width: 160px;
  height: 60px;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 0 30px;
  font-size: 16px;
  line-height: 58px;
  font-weight: 600;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  text-transform: capitalize;
  background-color: #b88a4d;
}
.delicious-btn.active, .delicious-btn:hover, .delicious-btn:focus {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color: #a07843;
}
/*------------- FIN  _Carousel.scss --------*/
/* -----------  INICIO _woocommerce.scss --------- */
/* ---------INICIO PORTADA ------------- */
.woocommerce-loop-category__title, .woocommerce-loop-product__title {
  height: 90px;
}
.woocommerce ul.products li.product a img {
  height: 180px;
  width: 180px;
  margin: 0 auto;
  margin-bottom: 1em;
}
.woocommerce-loop-product__title {
  font-size: 1.125rem !important;
  font-family: "Raleway", sans-serif;
}
.woocommerce-loop-product__title::after {
  /* content: "";   bottom: 51px; position: absolute;   right: 0;    border-style: solid; 
    border-width: 0 0 50px 50px;    border-color: transparent transparent #FFB24E transparent; */
  /* Si activo me muestra en la parte inferior en la esquina un rectangulo*/
}
/*---- cuando mostramos el listado de categorias en portada ----*/
.woocommerce-loop-category__title::after {
  content: "";
  bottom: 0px;
  position: absolute;
  right: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent #FFB24E transparent;
}
.woocommerce ul.products li.product .price {
  font-size: 1rem;
  color: #000000;
}
.cart {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
/* boton leer mas */
.woocommerce ul.products li.product .button {
  display: flex;
  justify-content: center;
  background-color: #FF8100;
  color: white;
  height: 2.7em;
}
/* ---------  FIN PORTADA ------------- */
/* ---------  INICIO PRODUCTOS TIENDA ------------- */
.woocommerce ul.products li.product a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ---------  FIN PRODUCTOS TIENDA ------------- */
/* -------------------  FICHA PRODUCTO  ---------------------*/
/*--- INICIO  cuando mostramos el listado de los productos por categorias  despues de hacer clik en la portada ---- */
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 {
  font-size: 1.125rem !important;
  font-family: "Raleway", sans-serif;
}
/* para portada y para el detalle del producto */
.woocommerce .products ul, .woocommerce ul.products {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
/*--- FIN  cuando mostramos el listado de los productos por categorias
 despues de hacer clik en la portada ---- */
.woocommerce-products-header {
  text-align: center;
  color: #ff6000;
  margin-bottom: 50px;
}
/*-------------- Cuando Mostramos el detalle de las categorias ---------------*/
/* El contador de productos (Mostrando … de … resultados)   lo puedes quitar fácilmente mediante un poco de CSS
 */
p.woocommerce-result-count {
  display: none;
}
/* -----------  FIN _woocommerce.scss --------- */
/* INICIO eliminar el enlace del producto en la página de productos */
/* con este css ya no podremos hacer clic en el producto para ver su detalle 
solo no funciona con el boton leer mas pero se puede ocultar dicho boton */
/* https://wordpress.org/support/topic/how-to-replace-remove-the-products-link-in-products-page/ */
ul.products li.product .woocommerce-LoopProduct-link {
  /* pointer-events: none; */
}
/* FIN eliminar el enlace del producto en la página de productos */
/* https://victoraqui.com/efecto-css-hover-zoom-en-imagenes-divi/ */
.product-category img:hover {
  /*  transform: scale(1.1) !important;   transition:ease-in-out 0.3s; */
  filter: grayscale(80%);
}
.wrapper {
  overflow: hidden !important;
  margin-bottom: 9px !important;
}
/* Inicio Categoria productos descripcion */
.term-description {
  color: #000000;
  font-size: 1.2em;
  margin: 30px 20px;
  text-align: justify;
}
/* Inicio Pagina descripcion */
.page-description {
  color: #000000;
  font-size: 1.2em;
  margin: 30px 20px;
  text-align: justify;
}
/* -----------  FIN  _woocommerce.scss --------- */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .checkout-button {
  background-color: var(--color-base);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .checkout-button:hover {
  background-color: var(--color-base-hover);
}
/* -----------  INICIO _WooCommerce_Checkout.scss --------- */
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
  width: 100%;
}
/*******IZQUIERDA*******/
/*Contenedor*/
.woocommerce-checkout .woocommerce .col2-set, .woocommerce-checkout .woocommerce-page .col2-set {
  background: white;
  border-radius: 1em;
  width: 55%;
  float: left;
}
/*Títulos*/
label, input, button, select, textarea {
  font-size: 0.9rem;
  line-height: 1.7;
  font-weight: 700;
  color: #4a4a4a;
  margin-bottom: 0.5em;
}
/*Cada formulario*/
input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select {
  border: 2px solid #d9d9d9;
  background-color: white;
  height: 3em;
}
.woocommerce-account form .form-row, .woocommerce-checkout form .form-row {
  margin-bottom: 1em;
}
/*Estilos Dropdowns*/
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 5px;
  height: 2.5em;
}
.select2-selection__arrow {
  top: 3px !important;
}
/*Estilo en Modo Enfoque*/
textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, input[type=number]:focus, input[type=email]:focus, input[type=url]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus, .uneditable-input:focus {
  border-color: #F09262;
  /*Change this to a color that best suits your design*/
  box-shadow: none;
  outline: 0;
}
.nota_datos_Pago {
  font-weight: 700;
  margin: 0 0 20px;
  font-size: 0.8rem !important;
  background-color: #000000;
  padding: 15px;
  color: #ffffff;
  word-spacing: 0.1rem;
}
.woocommerce-billing-fields h3 {
  margin-bottom: 20px;
  border-bottom: 1px solid #dddddd;
}
/*****************************************************DERECHA*******/
/*Remover título*/
h3#order_review_heading {
  display: none;
}
.woocommerce-checkout #payment {
  background: #ffffff;
}
.woocommerce-checkout #payment div.payment_box::before {
  border: none !important;
}
.woocommerce-checkout #payment div.payment_box {
  background: #ffffff;
}
/*Estilos*/
div#order_review {
  border-width: 0 2px 2px;
  border-style: solid;
  border-color: #dddddd;
  width: 40%;
  float: right;
}
/*Sacar mensaje*/
div.woocommerce-info {
  display: none;
}
/*Sticky*/
#order_review {
  position: -webkit-sticky;
  position: sticky;
  top: 150px;
  z-index: 99;
}
body {
  overflow-x: visible;
}
/*****¿Tienes un cupón?  Cupón y Alerta*****/
.woocommerce-info, .woocommerce-message {
  background-color: #f7f8fa;
  color: #474747;
  border: none;
}
/*--- Alerta de Error ----*/
.woocommerce-error {
  background-color: #ff7e7e;
  border: none;
  color: #761f1f;
}
form.checkout_coupon.woocommerce-form-coupon {
  padding: 3em;
  background: white;
  border-radius: 1em;
  margin-top: 0em;
  margin-bottom: 2em;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  text-shadow: none;
}
/*******Remover información adicional*******/
.woocommerce-additional-fields {
  display: none;
}
/******Espacio debajo de Términos y condiciones******/
.woocommerce-page.woocommerce-checkout form .form-row:last-child, .woocommerce.woocommerce-checkout form .form-row:last-child {
  margin-bottom: 10px;
}
/******Ancho del borde******/
form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review) {
  border-width: 2px 2px 2px;
}
#place_order {
  background-color: #000000;
}
/* -------------------  INICIO _boton_arriba.scss------------------*/
/* https://unidadvirtual.com/wordpress-boton-scroll-hacia-arriba-sin-plugins
https://www.youtube.com/watch?v=4msCtiQtvvc

general.js  		--> Esta el codigo javascript
_boton_arriba.scss 	--> Esta el codigo css
scripts.php  		--> Esta la funcion que envia el codigo a la parte inferior debajo de footer
 */
.btn-arriba {
  background-color: rgba(68, 113, 136, 0.8);
}
.btn-arriba {
  height: 40px;
  width: 40px;
  border-radius: 5px;
  position: fixed;
  bottom: 15px;
  right: 10px;
  text-indent: 100%;
  background: rgba(66, 137, 178, 0.8) url("/wp-content/uploads/2024/04/to-top.png") no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-arriba.top-is-visible {
  visibility: visible;
  opacity: 1;
}
.btn-arriba.top-fade-out {
  opacity: 0.8;
}
/* -------------------  FIN  _boton_arriba.scss------------------*/
/*----------INICIO Animacion de los productos de la portada ------------*/
/* Las Animaciones estan en   https://animate.style/ */
/* Nota el script esta en general.js   const observer = new IntersectionObserver(callback, options)
 */
/*  , fadeInUp , 
animate__fadeInLeft = fadeInLeft
animate__fadeInUp = fadeInUp
animate__fadeInRight  = fadeInRight
*/
.caja_animation_one {
  animation-name: fadeInLeft;
}
.caja_animation_two {
  animation-name: fadeInRight;
}
/* ------------------------------- */
.caja_animation_one, .caja_animation_two, .caja_animation_three, .caja_animation_four {
  animation-delay: 0ms !important;
  animation-duration: 1500ms !important;
}
/*----------FIN  Animacion de los productos de la portada ------------*/
/* ------------ Inicio  _footer.scss para menu del pie de pagina  ---------------- */
.footer {
  background: var(--footer-background);
  color: white;
  height: auto;
  padding-bottom: 40px;
  padding-top: 30px;
}
.footer .titupie {
  font-weight: bold;
  flex-direction: column;
}
.footer .info_contacto {
  margin-bottom: 20px;
}
.footer .info_contacto_item {
  margin-left: 15px;
}
.footer .info_contacto_item a {
  color: #dbdbdb;
}
.footer .info_contacto_item p {
  color: #dbdbdb;
}
#menu-footer-menu {
  line-height: 26px;
}
#menu-footer-menu a {
  color: var(--menu__color_texto_1_Nivel);
  font-size: 1rem;
  line-height: 2.1rem;
}
#menu-footer-menu a:focus, #menu-footer-menu a:hover {
  color: var(--footer__color-enlace) !important;
}
/* .ctn_pie_categoria_servicios{font-size: 1rem;text-transform: uppercase;}
.ctn_pie_categoria_servicios p {margin-left: 30px;} B88A4D*/
.footer h3 {
  font-size: 1.125rem;
  line-height: 24px;
  margin-bottom: 32px;
  padding-left: 20px;
  border-left: 3px solid #fff;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  letter-spacing: 1.26px;
  color: var(--footer__color-enlace);
}
.footer h5 {
  font-size: 1.125rem;
  line-height: 24px;
  margin-bottom: 32px;
  padding-left: 20px;
  border-left: 3px solid #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  letter-spacing: 1.26px;
  color: var(--footer__color-enlace);
}
#pie_seccion_1 {
  align-items: center;
  justify-content: space-evenly;
}
#pie_seccion_3 {
  align-items: center;
}
.footer_medios_de_pagos {
  border-radius: 5px;
  opacity: 0.6;
  transition: opacity 0.3s;
  width: 311px;
  height: 172px;
  background-image: url("/wp-content/uploads/2024/05/tarjetas-medios-de-pago.png");
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.footer_medios_de_pagos:hover {
  opacity: 1;
}
/* ------------ FIN  _footer.scss para menu del pie de pagina ------------ */
/* ------ INICIO  _garantia.scss  --------*/
.card {
  text-align: center !important;
  padding: 15px;
}
.card svg {
  margin-top: 15px !important;
  margin: 0 auto;
  color: #d75615;
}
.card-title {
  padding: 10px;
  font-weight: bold;
  color: #d75615;
  font-size: 1.25rem;
}
/* ------ FIN  _garantia.scss  --------*/
/* --- INICIO ARCHIVO _media_queries.css --- */
/* ===== Móvil S ====*/
/* ===== Móvil M ====*/
/* ===== Móvil L ====*/
/* ===== Tablet ====*/
@media (max-width: 768px) {
  /* --- Inicio Carrusel Configuracion --- */
  /* --- Fin Carrusel Configuracion --- */
  /* --- INICIO Contactenos --- */
  /* --- FIN Contactenos --- */
  /* --- INICIO prefooter --- */
  /* --- FIN prefooter --- */
  .header__top-bar {
    display: none !important;
  }
  .header___posicion-1 {
    margin-bottom: 1px;
  }
  .header___nivel1_desktop {
    display: none;
  }
  .header___nivel1_mobile {
    display: flex;
  }
  .header___posicion_1_top_celular {
    /* background-color: var(--header__top-bar-background-color);
		  padding: 10px; */
    display: none !important;
  }
  .header__contact-phone {
    color: #FFFFFF !important;
  }
  .header__contact-phone a {
    color: #FFFFFF !important;
  }
  .header___cabecera_logo {
    display: flex;
    justify-content: center;
  }
  .header___posicion_1_top_menu {
    display: flex;
  }
  .main-slider {
    height: 180px;
  }
  #carouselExampleFade {
    height: 200px;
  }
  .carousel-inner {
    height: 200px;
  }
  .carousel-item {
    height: 180px;
    min-height: 180px;
  }
  .carousel-inner img {
    height: 100% !important;
  }
  .carousel-caption {
    top: 0;
    transform: none;
    padding: 0px;
    padding-top: 10px;
  }
  .carousel-caption p {
    display: none;
  }
  .carousel-caption h2 {
    font-size: 1.2rem !important;
  }
  .carousel-indicators {
    display: none;
  }
  .carousel-control-next, .carousel-control-prev {
    height: 130px;
  }
  .woocommerce ul.products li.product a img {
    height: auto !important;
  }
  #pie_seccion_1 {
    flex-direction: row;
  }
  #pie_seccion_3 {
    display: none !important;
  }
  #pie_seccion_2 {
    padding-left: 50px;
  }
  .footer .titupie {
    margin-bottom: 30px;
  }
  .prefooter {
    display: none;
  }
}
/* ===== Portatil====*/
/* ===== Portatil====*/
/* --- FIN  ARCHIVO _media_queries.css --- */
:root {
  --link-1: #D65472;
  --link-2: #37C5F0;
  --link-3: gold;
  --text: #18272F;
  --counter: #30B67D;
}
/* -----------  INICIO _contactenos_piotnetforms.scss --------- */
.piotnetforms-field-container input, .piotnetforms-field-container select, .piotnetforms-field-container textarea {
  border: 0 !important;
}
/*
.line {  		
	display: block;
  position: relative;
    height: 1px;
    width: 100%;
  
    background-color: #b3a39b ;
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 1;
    margin-top: -1px;
	
	&:before {
    content: "";
    display: block;
    width: 0;
	// position: absolute;
      //left: 0;
      //top: 0;
		-webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
	}		
}
*/
.piotnetforms-field-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.piotnetforms-field-container .line {
  display: block;
  height: 1px;
  width: 100%;
  position: relative;
  background-color: rgba(39, 22, 13, 0.2);
  transition: all 0.4s ease;
  z-index: 1;
  margin-top: -1px;
}
.piotnetforms-field-container .line:before {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #27160D;
  transition: all 0.4s ease;
}
.piotnetforms-field-container input[type="text"]:focus + .line:before, .piotnetforms-field-container input[type="text"]:active + .line:before, .piotnetforms-field-container input[type="number"]:focus + .line:before, .piotnetforms-field-container input[type="number"]:active + .line:before, .piotnetforms-field-container input[type="email"]:focus + .line:before, .piotnetforms-field-container input[type="email"]:active + .line:before, .piotnetforms-field-container input[type="url"]:focus + .line:before, .piotnetforms-field-container input[type="url"]:active + .line:before, .piotnetforms-field-container input[type="tel"]:focus + .line:before, .piotnetforms-field-container input[type="tel"]:active + .line:before, .piotnetforms-field-container input[type="password"]:focus + .line:before, .piotnetforms-field-container input[type="password"]:active + .line:before, .piotnetforms-field-container input[type="search"]:focus + .line:before, .piotnetforms-field-container input[type="search"]:active + .line:before, .piotnetforms-field-container select:focus + .line:before, .piotnetforms-field-container select:active + .line:before, .piotnetforms-field-container textarea:focus + .line:before, .piotnetforms-field-container textarea:active + .line:before, .piotnetforms-field-container textarea.wp-editor-area:focus + .line:before, .piotnetforms-field-container textarea.wp-editor-area:active + .line:before {
  width: 100%;
}
.piotnetforms-field-container:hover .line:before {
  width: 100%;
}
.piotnetforms-field-container .wpcf7-not-valid ~ .line {
  opacity: 0;
}
/*
 * Implementando icono a las cajas
https://icons.getbootstrap.com/#usage
https://unidadvirtual.com/insertar-icono-gratis-en-nuestra-web-con-bootstrap
*/
.piotnetforms-field-container .bi {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
.piotnetforms-size- {
  border: none;
  margin-left: 30px;
  width: 95%;
}
/*
#piotnetforms {display: flex; flex-wrap: wrap;}
//.piotnetforms-fields-wrapper  {width:40%}
.p74077620 {width:40%}
.p97169191 {width:40%}
.p00109696 {width:40%}
.p47378471 {width:40%}
.p66780818 {width:100%}
*/
#titulo_contactenos, .elementor-heading-title {
  color: var(--wp--preset--color--luminous-vivid-orange) !important;
  font-weight: normal !important;
}
/* Button */
.piotnetforms-button {
  display: inline-block;
  min-width: 120px;
  height: 50px;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 0 20px;
  font-size: 16px;
  line-height: 50px;
  font-weight: 600;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  text-transform: capitalize;
  background-color: #b88a4d;
}
.piotnetforms-button.active, .piotnetforms-button:hover, .piotnetforms-button:focus {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color: #a07843;
}
/* -----------  FIN _contactenos_piotnetforms.scss --------- */
/* -----------  INICIO _formulario_contactenos.scss --------- */
.ctn_gral_contactenos {
  margin-top: 80px;
  margin-bottom: 80px;
  background-color: #ffedd6;
  padding: 20px;
}
.miformulario1_field {
  margin-top: 20px;
  position: relative;
}
.button_whatsapp_orden_button {
  padding: 12px 20px;
  color: #ffffff;
  background: #21bd5b;
  box-shadow: 0 8px 25px -5px rgba(45, 62, 79, 0.3) !important;
  border-style: solid;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
}
.button_whatsapp_orden_button:hover {
  background: #6AD46F;
}
.button_whatsapp_orden_button::before {
  content: url("/wp-content/uploads/2024/05/whatsapp-svg.svg");
  color: #fff;
  font-size: inherit;
  font-weight: inherit !important;
  display: inline-block;
  vertical-align: middle;
  align-items: center;
  margin-bottom: -9px;
  margin-top: -5px;
  width: 1.7em;
  height: auto;
  margin-right: 10px;
}
.miclasetexto1 {
  background-color: #fff;
  border: 1px solid #46515d;
  width: 100%;
  height: 42px;
  padding: 10px;
  border-radius: 3px;
  font-size: 14px;
  color: #000;
  padding: 1.8em;
}
.miclasetexto1:hover {
  border-color: #2c6de8;
  -webkit-box-shadow: 0px 1px 5px #2c6de8;
  box-shadow: 0px 1px 5px #2c6de8;
}
.miclasetextarea1 {
  background-color: #fff;
  border: 1px solid #46515d;
  width: 100%;
  padding: 10px;
  border-radius: 3px;
  font-size: 14px;
  color: #000;
  padding: 1.8em;
}
.miclasetextarea1:hover {
  border-color: #2c6de8;
  -webkit-box-shadow: 0px 1px 5px #2c6de8;
  box-shadow: 0px 1px 5px #2c6de8;
}
.miclase_boton_enviar1 {
  width: 100%;
  background-color: var(--color-base) !important;
  border-color: var(--color-base);
  color: white;
  font-size: 16px !important;
  cursor: pointer;
  padding: 10px 20px;
  border-style: solid;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
  margin-top: 10px;
}
.miclase_boton_enviar1:active, .miclase_boton_enviar1:hover {
  background-color: var(--color-base-hover) !important;
}
.ctn_gral_gracias_por_su_consulta {
  margin-top: 40px;
  margin-bottom: 40px;
}
.ctn_gral_gracias_por_su_consulta h2 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}
.ctn_gral_gracias_por_su_consulta .email {
  color: red;
  margin-left: 10px;
  font-weight: bold;
}
/* -----------     FIN _formulario_contactenos.scss --------- */
.wc_payment_method label {
  display: inline;
}
.wc_payment_method label img {
  float: right;
}
/*-------- Inicio Pasarela de pago para yape-----------*/
.ctn_yape {
  background: #742284 !important;
  color: #fff !important;
  padding: 4% !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}
.ctn_yape p {
  line-height: 25px;
}
.estilo_yape {
  display: flex;
  justify-content: space-around;
  padding: 25px 0 !important;
}
.qr_yape {
  width: 50% !important;
  text-align: center !important;
}
.descrip_yape {
  width: 40% !important;
  text-align: center !important;
}
.logo_yape {
  width: 100% !important;
  height: 100px !important;
  background-image: url(https://unidadvirtual.com/recursos-wordpress/woocommerce/pasarela-de-pagos/yape/logo-yape.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-bottom: 10px;
}
.boton_contacto_yape {
  display: flex;
  justify-content: center;
  background: #F39314 !important;
  color: #fff !important;
  border-radius: 8px !important;
  line-height: 1.1 !important;
  padding: 8px 1% !important;
  text-decoration: none !important;
  text-transform: initial !important;
  font-weight: bold !important;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  transition: all 0.3s ease-in-out !important;
  text-align: center !important;
  margin-top: 20px !important;
}
.titular_yape {
  display: block !important;
  width: 100% !important;
  color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
/*-------- Fin Pasarela de pago para yape-----------*/
/*-------- Inicio Pasarela de pago para plin-----------*/
.ctn_plin {
  background: #08D4D8 !important;
  color: #fff !important;
  padding: 4% !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}
.ctn_plin p {
  line-height: 25px;
}
.estilo_plin {
  display: flex;
  justify-content: space-around;
  padding: 25px 0 !important;
}
.qr_plin {
  width: 50% !important;
  text-align: center !important;
}
.descrip_plin {
  width: 40% !important;
  text-align: center !important;
}
.logo_plin {
  width: 100% !important;
  height: 100px !important;
  background-image: url(https://unidadvirtual.com/recursos-wordpress/woocommerce/pasarela-de-pagos/plin/logo-plin.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-bottom: 10px;
}
.boton_contacto_plin {
  display: flex;
  justify-content: center;
  background: #F39314 !important;
  color: #fff !important;
  border-radius: 8px !important;
  line-height: 1.1 !important;
  padding: 8px 1% !important;
  text-decoration: none !important;
  text-transform: initial !important;
  font-weight: bold !important;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  transition: all 0.3s ease-in-out !important;
  text-align: center !important;
  margin-top: 20px !important;
}
.titular_plin {
  display: block !important;
  width: 100% !important;
  color: #ffffff !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
/*-------- Fin Pasarela de pago para plin -----------*/
/*-------- Inicio Pasarela de pago para Banco BCP Soles-----------*/
.ctn_bcp {
  background: #003F97 !important;
  color: #fff !important;
  padding: 4% !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}
.desc_banco_bcp {
  line-height: 25px;
}
.estilo_bcp {
  display: flex;
  justify-content: space-around;
  padding: 5px 0 !important;
  margin-top: 10px;
}
.logo_bcp {
  width: 30%;
  margin-right: 15px;
}
.logo_bcp img {
  width: 130px;
}
.ctn_ctas_bcp {
  width: 65%;
}
.tipo_cta_bcp_1 {
  width: 100%;
  margin-bottom: 3px;
}
.nro_cta_bcp_1 {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
.tipo_cta_bcp_2 {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 3px;
}
.nro_cta_bcp_2 {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
.ctn_titular_bcp {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
}
.logo_titular_bcp {
  margin-bottom: 15px;
}
.datos_titular_bcp p {
  line-height: 8px;
}
/*-------- Fin Pasarela de pago para Banco BCP Soles -----------*/
/*-------- Inicio Pasarela de pago para Banco INTERBANK Soles-----------*/
.ctn_interbank {
  background: #009D40 !important;
  color: #fff !important;
  padding: 4% !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}
.desc_banco_interbank {
  line-height: 25px;
}
.estilo_interbank {
  display: flex;
  justify-content: space-around;
  padding: 5px 0 !important;
  margin-top: 10px;
}
.logo_interbank {
  width: 30%;
  margin-right: 15px;
}
.logo_interbank img {
  width: 130px;
}
.ctn_ctas_interbank {
  width: 65%;
}
.tipo_cta_interbank_1 {
  width: 100%;
  margin-bottom: 3px;
}
.nro_cta_interbank_1 {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
.tipo_cta_interbank_2 {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 3px;
}
.nro_cta_interbank_2 {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
.ctn_titular_interbank {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
}
.logo_titular_interbank {
  margin-bottom: 15px;
}
.datos_titular_interbank p {
  line-height: 8px;
}
/*-------- Fin Pasarela de pago para Banco INTERBANK Soles -----------*/
/*-------- Inicio Pasarela de pago para Banco SCOTIABANK Soles-----------*/
.ctn_scotiabank {
  background: #EC111A !important;
  color: #fff !important;
  padding: 4% !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: column;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}
.desc_banco_scotiabank {
  line-height: 25px;
}
.estilo_scotiabank {
  display: flex;
  justify-content: space-around;
  padding: 5px 0 !important;
  margin-top: 10px;
}
.logo_scotiabank {
  width: 30%;
  margin-right: 15px;
}
.logo_scotiabank img {
  width: 130px;
}
.ctn_ctas_scotiabank {
  width: 65%;
}
.tipo_cta_scotiabank_1 {
  width: 100%;
  margin-bottom: 3px;
}
.nro_cta_scotiabank_1 {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
.tipo_cta_scotiabank_2 {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 3px;
}
.nro_cta_scotiabank_2 {
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
.ctn_titular_scotiabank {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
}
.logo_titular_scotiabank {
  margin-bottom: 15px;
}
.datos_titular_scotiabank p {
  line-height: 8px;
}
/*-------- Fin Pasarela de pago para Banco SCOTIABANK Soles -----------*/
body::-webkit-scrollbar {
  width: 14px;
  /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: orange;
  /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;
  /* color of the scroll thumb */
  border-radius: 20px;
  /* roundness of the scroll thumb */
  border: 3px solid orange;
  /* creates padding around scroll thumb */
}
/*
Cuando trabajamos en visual studio code y su extensiosn live sass
@use '_general.scss';
@use '_cabecera.scss';
//@use '_menu.scss';
@use '_menu_bootstrap_5.scss';
@use '_Carousel.scss';
@use '_woocommerce.scss';
@use '_boton_arriba.scss';

@use '_animaciones_web.scss';
@use '_footer.scss';

@use '_garantia.scss';
*/





/*-----------------------INICIO IA GEMINI---estilo "Soft-UI Glass".---------------------- */


/* Vamos a probar con un estilo "Soft-UI Glass". Es mucho más limpio, usa fondos casi blancos y sombras muy suaves. Se siente moderno sin ser exagerado. */

/* Contenedor limpio y amplio */
.cards-products-home {
    background-color: #fcfcfc; /* Un blanco casi puro, muy limpio */
    padding: 30px 15px;
    border-radius: 0px; /* Quitamos redondez al contenedor para que sea más sobrio */
}

/* Tarjeta estilo Cristal Sofisticado */
.woocommerce ul.products li.product {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important; /* Borde muy fino y claro */
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important; /* Sombra casi invisible */
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el mouse: Elevación limpia */
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    background: #ffffff !important;
    border-color: #ff8c00 !important; /* El borde cambia al naranja de tu marca */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important; /* Sombra elegante */
}

/* Ajuste de la imagen del producto */
.woocommerce ul.products li.product img {
    margin-bottom: 15px !important;
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.05); /* La imagen crece un poquito al pasar el mouse */
}

/*  Un pequeño toque para los botones: 
Si quieres que el botón también reaccione de forma elegante, puedes añadir esto:*/
.woocommerce ul.products li.product .button {
    background-color: #ff8c00 !important;
    border-radius: 6px !important;
    transition: background 0.3s ease !important;
}

.woocommerce ul.products li.product:hover .button {
    background-color: #333333 !important; /* Cambia a gris oscuro/negro al pasar el mouse */
}
/*-----------------------FIN IA GEMINI---estilo "Soft-UI Glass".---------------------- */