/* Fuentes */

@import url("https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800&display=swap");
@import url("https://fonts.cdnfonts.com/css/texta");

/* Importaciones CSS */

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/* -------------------------------------------------------- */

:root {
  /* Colores principales */
  --color-primario: #e74c3c; /* rojo */
  --color-primario2: #00babe;
  --color-secundario: #ff6162; /* Rojo */
  --color-complementario: #ff616205; /* Azul con opacidad */

  /* Colores de texto */
  --color-texto-primario: #000; /* Gris oscuro */
  --color-texto-secundario: #fff; /* Gris medio */
}

* {
  box-sizing: border-box !important;
  user-select: none;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #666666;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  line-height: 1.80857;
  font-weight: normal;
  overflow-x: hidden;
}

a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0;
  font-weight: normal;
  position: relative;
  padding: 0 0 10px 0;
  font-weight: normal;
  line-height: normal;
  color: #111111;
  margin: 0;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 13px;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: #212121;
  text-decoration: none !important;
  opacity: 1;
}

button:focus {
  outline: none;
}

ul,
li,
ol {
  margin: 0px;
  padding: 0px !important;
  list-style: none;
}

p {
  margin: 0px !important;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
}

a {
  color: #222222;
  text-decoration: none;
  outline: none !important;
}

a,
.btn {
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

img {
  max-width: 100%;
  height: auto;
}

:focus {
  outline: 0;
}

.btn-custom {
  margin-top: 20px;
  background-color: transparent !important;
  border: 2px solid #ddd;
  padding: 12px 40px;
  font-size: 16px;
}

.lead {
  font-size: 18px;
  line-height: 30px;
  color: #767676;
  margin: 0;
  padding: 0;
}

.title {
  color: #000 !important;
}

/* BACKDROP MODAL DE BOOTSTRAP */

.modal-backdrop.fade.show{
  display: none !important;
}

/* ==== 1) Contenedor del logo ========================================== */
.logo-link{
  position:relative;
  display:inline-block;
  overflow:hidden;            /* recorta lo que se salga por la derecha */
}

/* ==== 2) Imagen ======================================================== */
.logo-link img{
  display:block;
  transition:transform .4s ease;
}

/* ==== 3) Texto que aparecerá ========================================== */
.logo-text{
  position:absolute;
  top:50%;
  left:100%;                  /* empieza fuera, a la derecha */
  transform:translate(-0%, -50%);   /* centra verticalmente */
  white-space:nowrap;
  font:700 22px/1 "Montserrat", sans-serif;
  letter-spacing:.5px;
  transition:transform .4s ease;
}

/* Colores individuales */
.c-letter{ color:#00babe; }
.m-letter{ color:#ff6162; }
.tech-word{ color:#222; }

/* ==== 4) Efecto al hacer hover ======================================== */
.logo-link:hover img{
  transform:translateX(-110%);       /* la imagen se desliza a la izquierda */
}

.logo-link:hover .logo-text{
  transform:translate(-110%, -50%);  /* el texto entra desde la derecha */
}
.logo-link:hover{
  width:150px;       
}


.form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0) !important;
}

#search:focus + .search_icon {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0) !important;
}

.navbar-form input {
  border: none !important;
}

.profile-dropdown-container {
  height: 35px;
  display: flex;
  align-items: center;
}

.profile-dropdown-menu {
  right: 0;
  left: unset !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.profile-dropdown-item {
  padding: 5px 100px 5px 20px !important;
  display: flex !important;
  align-items: center !important;
}

.profile-dropdown-item:hover {
  background: var(--color-primario) !important;
  color: #fff !important;
}

.profile-dropdown-item:hover > .profile-dropdown-icon {
  color: #fff !important;
}

.profile-dropdown-divider {
  width: 90%;
  margin: 0 !important;
}

.profile-dropdown-icon {
  color: #bbbbbba6;
  position: absolute;
  right: 0;
  margin-right: 20px;
}

.badge {
  font-weight: 500;
}

blockquote {
  margin: 20px 0 20px;
  padding: 30px;
}

button {
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.full {
  float: left;
  width: 100%;
}

.layout_padding {
  padding-top: 90px;
  padding-bottom: 90px;
}

.layout_padding_2 {
  padding-top: 75px;
  padding-bottom: 75px;
}

.light_silver {
  background: #f9f9f9;
}

.theme_bg {
  background: #38c8a8;
}

.margin_top_30 {
  margin-top: 30px !important;
}

.full {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}

/**-- heading section --**/

/*---------------------------- preloader area ----------------------------*/

.loader_bg {
  position: fixed;
  z-index: 9999999;
  background: #fff;
  width: 100%;
  height: 100%;
}

.loader {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader img {
  width: 280px;
}

ul.btn {
  float: right;
}

ul.btn li {
  display: inline-block;
  padding: 0 25px;
}

ul.btn li a {
  color: #fff;
  font-size: 16px;
}

ul.btn li:last-child {
  padding-right: 0;
}

.login_btn {
  padding-left: 50px;
}

.login_btn a {
  background-color: #fff;
  display: inline-block;
  padding: 7px 35px;
  border-radius: 10px;
  color: #292e39 !important;
  font-size: 17px;
}

.login_btn a:hover {
  color: #fff !important;
  background: #0808ff;
}

/*-- header area --*/

/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/

/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/

/*-- navigation--*/

.nav-menu > ul > li > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: #f6b024;
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}

.nav-menu a:hover:before,
.nav-menu li:hover > a:before,
.nav-menu .active > a:before {
  visibility: visible;
  width: 100%;
}

.navigation.navbar {
  float: right;
  padding: 0;
}

.navigation.navbar-dark .navbar-nav .nav-link {
  padding: 0 25px;
  color: #fff;
  font-size: 17px;
  line-height: 20px;
  font-weight: 500;
}

.loginPhone {
  display: none;
}

.navbar-nav {
  align-items: center;
}

.padd_right {
  padding-right: 10px;
}

.sign_btn {
  padding-left: 50px;
}

.sign_btn a {
  display: inline-block;
  padding: 7px 10px;
  color: #fff;
  font-size: 17px;
}

.sign_btn a:hover {
  color: #fff;
}

.header {
  width: 100%;
  padding: 10px 30px;
  background: #000;
  position: absolute;
  z-index: 999;
  height: 100px;
}

.logo a {
  font-size: 40px;
  font-weight: bold;
  text-transform: math-auto;
  color: #fff;
  line-height: 40px;
}

/** banner section **/

/* ——— 1. Contenedor Principal ——— */
.banner_main {
  min-height: 55vh;
  height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; 
  overflow: hidden;
  padding: 80px 0 20px 0;
}

/* ——— 2. NUEVA CLASE: La imagen que simula ser fondo ——— */
.banner-main-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: bottom; 
  z-index: 0;
  pointer-events: none;
}

.text-bg {
  text-align: center;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}

.text-bg h1 {
  color: #fff;
  font-size: 51px;
  line-height: 80px;
  font-weight: bold;
}

.text-bg .text {
  color: #fff;
  font-size: 25px !important;
  line-height: 50px;
  font-weight: normal;
  display: block;
}

.text-bg p {
  line-height: 28px;
  font-weight: 500;
  padding-bottom: 60px;
  display: block;
}

.text-bg figure img {
  width: 100%;
  padding-top: 70px;
}

.text_img {
  margin-right: -130px;
}

.text_img figure {
  margin: 0;
}

.text_img figure img {
  width: 100%;
}

.carousel-caption {
  position: inherit;
}

#banner1 .carousel-inner {
  padding-right: 130px;
}

#banner1 .carousel-indicators {
  left: inherit;
  bottom: 40px;
}

#banner1 .carousel-indicators li {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #48ca95;
  margin-right: 5px;
  margin-left: 5px;
}

#banner1 .carousel-indicators li.active {
  background: #ffffff;
}

#banner1 a.carousel-control-next,
#banner1 a.carousel-control-prev {
  display: none;
}

.text-bg a {
  font-size: 17px;
  background-color: transparent;
  border: #fff solid 2px;
  color: #fff;
  font-weight: 500;
  padding: 22px 0px;
  width: fit-content;
  max-width: 215px;
  text-align: center;
  display: inline-block;
  transition: ease-in all 0.5s;
}

.text-bg a:hover {
  background-color: #48ca95;
  color: #fff;
  transition: ease-in all 0.5s;
}

/** end banner section **/

.titlepage {
  text-align: center;
  padding-bottom: 50px;
}

.titlepage h2 {
  font-size: 40px;
  color: #090807;
  line-height: 55px;
  font-weight: bold;
  padding: 0;
  text-transform: uppercase;
  border-bottom: #00babe solid 1px;
  width: fit-content;
  margin: auto;
}

.titlepage h3 {
  text-transform: uppercase;
  border-bottom: #00babe solid 1px;
  width: fit-content;
  margin: auto;
}

.d_flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.blu {
  color: #0808ff;
}

.read_more {
  font-size: 17px;
  background-color: #48ca95;
  color: #fff !important;
  padding: 13px 0px;
  width: 100%;
  max-width: 190px;
  text-align: center;
  display: inline-block;
  transition: ease-in all 0.3s;
  font-weight: 500;
}

.read_more:hover {
  background: #000;
  color: #fff;
  transition: ease-in all 0.3s;
}

/** three_box section **/

.three_box {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: left;
  padding: 0 100px;
}

@media(max-width: 768px){
  .three_box {
  align-items: center;
  }
}

.three_box h1 {
  font-weight: 600;
  margin-bottom: 30px;
}

.box_text {
  margin: 15px;
  text-align: center;
  padding: 50px 20px 20px 20px;
  border-radius: 15px;
  height: 350px;
  background-size: cover !important;
  display: flex;
  background-position: center !important;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #0f182a;
}

.box_text::before,
.box_text::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 0;
  width: 1px;
  background-color: #0f182a90;
  transition: height 0.6s;
}

.box_text::before {
  left: 0;
}

.box_text::after {
  right: 0;
}

.box_text:hover::before,
.box_text:hover::after {
  height: calc(
    50%
  );
}

.box_text:hover {
  border-bottom: 2px solid #0f182a;
}

.box_text h3 {
  color: #121010;
  font-size: 17px;
  line-height: 22px;
  font-weight: bold;
  padding-bottom: 25px;
}

.box_text p {
  font-size: 15px;
  color: #050505;
  line-height: 30px;
}

.box_text i {
  padding-bottom: 25px;
  display: block;
}

/** end three_box section **/

/** products section **/

.our_products .product_box {
  text-align: center;
  margin-bottom: 30px;
}

.our_products .product_box figure {
  margin: 0;
}

.our_products .product_box h3 {
  width: 200px;
  color: #fff;
  font-size: 20px;
  line-height: 20px;
  background-color: #252525;
  font-weight: 500;
  margin: 0 auto;
  padding: 10px 0;
  margin-top: 40px;
  transition: ease-in all 0.5s;
}

.our_products .product_box h3:hover {
  background: #48ca95;
  transition: ease-in all 0.5s;
}

.margin_bottom1 {
  margin-bottom: 60px;
}

.our_products .read_more {
  margin: 0 auto;
  display: block;
  margin-top: 50px;
  background-color: transparent;
  border: var(--color-primario) solid 2px;
  color: var(--color-primario) !important;
  max-width: 232px;
  border-radius: 10px;
  padding: 15px 0;
}

.our_products .read_more:hover {
  background: var(--color-primario);
  color: #fff !important;
}

/** end products section **/

/** laptop  section **/

.laptop {
  font-family: "Dosis", sans-serif;
  padding: 130px 0;
  background-color: #4f4aa6;
}

.laptop .titlepage {
  text-align: left;
  padding-bottom: 0;
}

.laptop .titlepage p {
  color: #fff;
  display: block;
  font-size: 40px;
  font-weight: normal;
  padding-bottom: 24px;
  line-height: 40px;
}

.laptop .titlepage h2 {
  text-transform: none;
  font-size: 80px;
  color: #fff;
  max-width: inherit;
  border: inherit;
  font-weight: 500;
  line-height: 80px;
}

.laptop_box {
  margin-right: -50px;
}

.laptop_box figure {
  margin: 0;
}

.margin_bottom {
  margin-bottom: 30px;
}

.laptop .read_more {
  display: block;
  margin-top: 60px;
}

/** end laptop  section **/

/** customer section **/

.customer {
  padding: 90px 0px 140px 0px;
  background: #fff;
}

.customer .titlepage h2 {
  max-width: 385px;
}

.customer_Carousel .carousel-caption {
  position: inherit;
  padding: 0;
}

.customer_box {
  text-align: center;
}

.test_box {
  text-align: left;
}

.customer_Carousel .test_box h4 {
  font-size: 30px;
  color: #030305;
  line-height: 28px;
  display: block;
  font-weight: 600;
  padding: 30px 0px 30px 0px;
  text-align: left;
}

.customer_Carousel .test_box p {
  font-size: 17px;
  line-height: 28px;
  color: #0b0b0c;
  text-align: left;
}

.customer_Carousel .carousel-indicators {
  bottom: -50px;
  right: inherit;
  margin-left: 4px;
}

.customer_Carousel .carousel-indicators li {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #48ca95;
}

.customer_Carousel .carousel-indicators li.active {
  background: #4f4aa6;
}

#myCarousel .carousel-control-next-icon,
#myCarousel .carousel-control-prev-icon {
  display: none;
}

/** end customer section **/

/** contact index section **/
/*.icontact-container{
     background-color: transparent;
    background-image: linear-gradient(180deg, #fff 52%, #000 0%);
    opacity: 1;
}*/

.icontact-text {
  text-align: center;
  padding: 0px 100px 150px 100px;
  margin: auto;
  background: #dadce0;
  box-shadow: 0px 20px 30px -25px rgba(0, 0, 0, 0.95);
}

.icontact-button {
  padding: 15px 40px;
  background: var(--color-secundario);
  color: white;
  border-radius: 50px;
}

.icontact-button span {
  font-size: 18px;
  font-weight: 500;
}

.icontact-button:hover {
  background: var(--color-primario);
  color: #fff;
}

/** end contact section **/

/** inner page css **/

.inner_posituong .header {
  position: inherit;
  background: #4843a3;
}

.computer_page .laptop {
  margin-top: 90px;
}

.contact_page .contact {
  margin-top: 90px;
}

/** about **/

.about {
  background-color: #fff;
  padding: 90px 0;
}

.about .titlepage {
  text-align: left;
}

.about .titlepage h2 {
  max-width: inherit;
  border: inherit;
}

.about .titlepage p {
  padding: 30px 0;
}

.about_img figure {
  margin: 0;
}

.about_img figure img {
  width: 100%;
}

/** end about **/

/** laptop **/

.laptop1 {
  background-color: #f6f6f6;
  padding: 90px 0;
}

.laptop1 .titlepage {
  text-align: right;
}

.laptop1 .titlepage h2 {
  max-width: inherit;
  border: inherit;
  color: #000;
}

.laptop1 .titlepage p {
  padding: 30px 0;
  color: #000;
}

.laptop1_img figure {
  margin: 0;
}

.laptop1_img figure img {
  width: 100%;
}

/** end laptop **/

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* remove the gap so it doesn't close */
}

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

.category-icon {
  max-width: 50% !important;
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .category-container {
    max-width: 820px !important;
  }
}

.category-box {
  padding: 0 !important;
}
body {
  min-height: 100vh;
}
.slider {
  height: 90px;
  position: relative;
  width: 100%;
  margin: 25px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.slider::before,
.slider::after {
  position: absolute;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
  height: 100%;
  width: 25%;
  z-index: 2;
  pointer-events: none;
}
.slider::before {
  left: 0;
  top: 0;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider img {
  max-height: 60px;
}

/*  IMPORTANT CODE BELOW */

.slide-track1 {
  width: calc(150px * 48);
  display: flex;
  animation: scroll1 24s linear infinite;
  justify-content: space-between;
}

.slide-track2 {
  width: calc(150px * 48);
  display: flex;
  animation: scroll2 24s linear infinite;
  justify-content: space-between;
}

@keyframes scroll1 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-152px * 16));
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-153px * 16));
  }
}
.slide {
  width: 150px;
  height: 60px;
  margin: 0 10px;
  display: grid;
  place-items: center;
  transition: 0.5s;
  /* cursor: pointer; */
  /*  opacity: 0.5;*/
}

.slide img {
  transition: transform 0.3s ease-in-out;
}

.slide:hover img {
  transform: scale(1.4);
}

.slide:hover {
  opacity: 1;
}

/*------- About us--*/
.why-us {
  background: #c8c8c81a;
  padding: 0;
}

.why-us .content {
  padding: 56px 100px 0 40px;
}

.why-us .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.why-us .content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
}

.why-us .content p {
  font-size: 15px;
  color: #696969;
}

.why-us .video-box {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 400px;
  position: relative;
}

.why-us .accordion-list {
  padding: 0px 100px 0 40px;
}

.why-us .accordion-list ul {
  padding: 0;
  list-style: none;
}

.why-us .accordion-list li + li {
  margin-top: 15px;
}

.why-us .accordion-list li {
  padding: 17px !important    ;
  background: #fff;
  border-radius: 6px;
  /* margin-top: 10px; */
}

.why-us .accordion-list a {
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-secundario);
  font-weight: 500;
  padding-right: 30px;
  outline: none;
}

.why-us .accordion-list span {
  font-weight: 600;
  font-size: 18px;
  padding-right: 10px;
}

.why-us .accordion-list i {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}

.why-us .accordion-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}

.why-us .accordion-list .icon-show {
  display: none;
}

.why-us .accordion-list a.collapsed {
  color: #343a40;
}

.why-us .accordion-list a.collapsed:hover {
  color: var(--color-primario);
}

.why-us .accordion-list a.collapsed .icon-show {
  display: inline-block;
}

.why-us .accordion-list a.collapsed .icon-close {
  display: none;
}

.why-us .play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(#0880e8 50%, rgba(8, 128, 232, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.why-us .play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.why-us .play-btn::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate-btn 2s;
  animation: pulsate-btn 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(8, 128, 232, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.why-us .play-btn:hover::after {
  border-left: 15px solid #0880e8;
  transform: scale(20);
}

.why-us .play-btn:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  -webkit-animation: none;
  animation: none;
  border-radius: 0;
}

@media (max-width: 1024px) {
  .why-us .content,
  .why-us .accordion-list {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 992px) {
  .why-us .content {
    padding-top: 30px;
  }
}
/*  .why-us .accordion-list {
    padding-bottom: 0;
  }
}
*/
@-webkit-keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*---- CRM --*/
.crm-container {
  background: #0f182a;
  text-align: center;
  padding: 20px 0 10px 0;
  color: #ffffff;
  margin-bottom: 50px;
}

/*--- Chat Bot --*/
.chatbot-container {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.chatbot-container img {
  width: 28%;
  margin: 0 10px 20px 10px;
}

/*- Categorias php -*/
.owl-item {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 10px !important;
}

.owl-stage {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.owl-dot {
  margin-top: 30px !important;
}

.owl-dot:focus {
  outline: none !important;
}
.secondary_category {
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  margin: 0;
  text-align: center;
  padding: 0;
}

.go-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: var(--color-primario2);
  border-radius: 0 4px 0 32px;
}

.go-arrow {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
}

.card1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 262px;
  background-color: #000000c2;
  border: 1px solid var(--color-primario2);
  border-radius: 10px;
  padding: 32px 24px;
  width: 100%;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: var(--color-primario2);
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.4s ease-out;
  }

  &:hover:before {
    transform: scale(21);
  }
}

.card1:hover {
  cursor: pointer;
  p {
    transition: all 0.3s ease-out;
    color: var(--color-primario);
  }
  h3 {
    transition: all 0.3s ease-out;
    color: var(--color-texto-secundario) !important;
  }
}

.category-title {
  font-weight: 600;
  font-size: 28px;
  padding: 0;
  margin: 50px;
  color: var(--color-texto-primario);
}
/*-----------Products list  --------------------*/

/*Hover animation en el titulo*/
.product_name_container {
  position: relative;
  height: 100%;
  background: #00babe6b;
  z-index: 0;
  overflow: hidden;
  border-top: 1px solid #00000066;
  border-radius: 0 0 8px 8px;
  &:hover h5 {
    color: #fff;
    transition: all 0.3s ease-out;
  }

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: #00babe;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.4s ease-out;
  }

  &:hover:before {
    transform: scale(30);
  }
}

/* .product_name_container:hover {
} */

.go-corner-product {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: #00babe;
  border-radius: 0 0 0 32px;
}

.go-arrow-product {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
}
/*End hover animation en el titulo*/

/* Overlay negro sobre la imagen  */
.card_img_container {
  position: relative;
  display: flex;
  justify-content: center;
}
.card_overlay {
  position: absolute;
  border-radius: 8px 8px 0 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: 0.3s ease-out;
}

.card_img_container:hover .card_overlay {
  bottom: 0;
  height: 100%;
}

.card_overlay_content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.icon_cart {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 100%;
  height: 100%;
  background: #ff6162cf;
  border-radius: 5px;
}

.icon_cart:hover {
  background: #ff6162;
  cursor: pointer;
}
/* End overlay negro sobre la imagen */

.product_img {
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px 8px 0 0;
  padding: 0 !important;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.card:not(.product) {
  width: 100%;
  height: 100%;
  border-radius: 8px !important;
  border: 1px solid #00000066;
  max-width: 300px;
}

.card-title {
  margin: 0 !important;
  color: var(--color-texto-primario);
  padding: 20px 20px 25px 20px;
  font-size: 15px;
}

.card-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

@media (max-width: 575.98px) {
  .product_img {
    object-fit: contain !important;
  }
  .add-to-cart-icon {
    width: 10% !important;
    height: 14% !important;
  }
  .product_name_container {
    &:before {
      transform-origin: 100% !important;
    }
  }
}

.pagination_ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 0;
  margin-bottom: 55px;
}

.page-item .page-link {
  border-radius: 10px !important;
  color: var(--color-primario);
  margin: 0 20px;
  border-color: #00000036 !important;
}

.page-item .page-link:hover {
  color: #fff !important;
  background: var(--color-primario) !important;
}

.page-item.active .page-link {
  background: var(--color-primario) !important;
  color: #fff;
}
/*-- End products --*/

/*-- Start Product Details --*/

.details_imgs_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100vh;
  margin-bottom: 50px;
}

.detail_img_active {
  height: 75vh;
}

.detail_img {
  height: 20vh;
}

.owl-nav {
  height: 5vh;
}

.product_brand {
  color: black;
  font-weight: 400;
  padding: 0;
  margin: 0;
}

.product_title {
  color: #000;
  font-weight: 600;
}

.product_title2 {
  color: #000;
  font-weight: 600;
}

.details_long_title {
  margin: 0;
}

.details_long_p {
  margin: 0;
  font-weight: 400;
}

.features_dl {
  display: flex;
  flex-direction: column;
}

.features_dt {
  background: var(--color-primario);
  border-top: 0;
  color: white;
}

.features_dd {
  margin: 0;
  border-top: 0;
}

.only_features dl {
  align-items: center;
}

.only_features dt,
.only_features dd {
  width: 50%;
}

.description_text {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 250px;
}

.only_description {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.only_description .description_text {
  max-width: 75%;
  padding-right: 30px;
}

@media (max-width: 767.98px) {
  .features {
    display: flex;
    flex-direction: column;
    order: 1;
  }
  .details_long {
    margin: 50px 0;
  }
  .details_long h1,
  .features h1 {
    text-align: start !important;
  }
}

/*---------------------------------------------------*/
.search_icon {
  position: absolute;
  right: 0;
  color: black !important;
  padding: 0 5px 0 0 !important;
  background: #fff;
  height: 85%;
  display: flex !important;
  border: 1px solid #ced4da;
  border-radius: 0px 0.25rem 0.25rem 0px !important;
  align-items: center;
  border-left: 0 !important;
}

.autocomplete-results {
  position: absolute;
  border-top: none;
  z-index: 99;
  border-radius: 0.25rem;
  top: 92%;
  width: 90%;
  background-color: #fff;
}

.autocomplete-item {
  padding: 8px 12px;
  border-bottom: 1px solid #d4d4d4;
  cursor: pointer;
}

.autocomplete-item a {
  text-decoration: none !important;
  color: #000 !important;
}
.autocomplete-item:last-of-type {
  border-radius: 0.25rem;
}
.autocomplete-item:hover {
  background: #f4f4f4;
}
input:-webkit-autofill {
  background-color: #fff !important;
}

#search-results {
  display: none;
}

.all-container {
  position: relative;
  max-height: 0;
}

.navbar-style {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.banner-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner-logo-container span {
  color: #fff;
}

.banner-logo {
  max-height: 60px;
  min-height: 60px;
  transform-style: preserve-3d; /* Habilita el efecto 3D */
}

@keyframes rotateAndScale {
  0% {
    transform: scale(1) rotateY(0deg);
  }
  50% {
    transform: scale(1.2) rotateY(180deg);
  }
  100% {
    transform: scale(1) rotateY(360deg);
  }
}

.navbar-cart-quantity {
  position: absolute;
  right: 0;
  top: 0;
  background: #ff6162;
  border-radius: 50%;
  font-size: 10px;
  width: 15px;
  line-height: 15px;
  text-align: center;
  margin-right: 8px !important;
  margin-top: 2px !important;
}

.dropdown-item:hover .navbar-cart-quantity {
  background: #00babe;
}

.index_banner{
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 97%, rgba(0, 0, 0, 0) 100%); /*ale*/
}

.index_banner .text-bg .slogan.top:hover {
  color: #00babe !important;
  cursor: pointer;
  font-size: 40px !important;
}

.index_banner .text-bg .slogan.mid:hover {
  color: #ff6162 !important;
  cursor: pointer;
  font-size: 40px !important;
}

#loginModal {
  width: 850px;
  height: 50vh;
}

#processCart .modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  z-index: 1050;
}

.modal-close {
  text-shadow: none;
  transition: all 0.5s ease !important;
  top: 0;
}
.modal-close:hover {
  color: red;
  opacity: 1;
}

.toggle-section {
  display: inline-flex;
  flex-direction: row;
  gap: 1.9rem;
  margin: 0 auto;
  margin-top: 2.6rem;
  margin-bottom: 50px;
  align-items: center;
}

.toggle-area {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: 3.8rem;
  height: 2.3rem;
  border-radius: 25px;
  transition: background-color 0.5s ease; /* Transición para el fondo */
  background: #0f182a;
}

.toggle-btn {
  cursor: pointer;
  position: absolute; /* Cambiado a absolute para movimiento más fluido */
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.5s ease; /* Transición para el movimiento */
}

.toggle-area.monthly .toggle-btn {
  transform: translateX(100%); /* Mueve el botón al final para "monthly" */
}

.toggle-area.anually .toggle-btn {
  transform: translateX(5px); /* Mueve el botón al inicio para "anually" */
}

.toggle-section p {
  z-index: 1;
  color: #0f182a;
}

/* Pricing Section */

.pricing-container {
  display: grid;
  width: 72%;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  margin-top: 2.5rem;
}

.pricing {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  border-radius: 10px;
  padding: 2.1rem 0.8rem;
}

.container-2 {
  background: #0f182a;
  color: #fff;
  margin-top: -1.6rem;
  position: relative;
  margin-bottom: -1.6rem;
}
.container-1,
.container-3 {
  background-color: #fff;
  gap: 1.3rem;
}

.pricing h2 {
  font-size: 1.23rem;
  font-weight: 700;
}
.container-2 h2 {
  padding-top: 12px;
}

.container-1 h2,
.container-1 li,
.container-3 h2,
.container-3 li {
  color: #0f182a;
}
.pricing p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0 auto;
  font-size: 4.6rem;
  font-weight: 700;
}

.dollar-sign {
  font-size: 2.6rem;
}

.container-1 p,
.container-3 p {
  color: #0f182a;
}

.container-2 p {
  margin-top: -11px;
}

hr {
  width: 100%;
  border-width: 0.5px;
  margin: 0 auto;
  border-color: transparent;
  border-color: #0f182a;
  border-style: solid;
  opacity: 0.5;
}
.pricing ul {
  list-style: none;
  margin-top: 30px;
}

.pricing ul li {
  padding: 1.06rem;
}

.container-2 ul li {
  padding: 1.1rem;
}

.pricing button {
  cursor: pointer;
  width: 90%;
  margin: 0 auto;
  margin-top: 1rem;
  border-radius: 10px;
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  padding: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  word-spacing: 3px;
  font-weight: 700;
  text-align: center;
}

.container-2 button {
  color: #0f182a;
  background-color: #fff;
}
.container-1 button,
.container-3 button {
  color: var(--white);
  background: #0f182a;
  background-repeat: no-repeat;
}

@media (hover: hover) {
  .container-1 button:hover,
  .container-3 button:hover {
    background: transparent;
    border-color: #0f182a;
    color: #0f182a;
    border-width: 1px;
  }
  .container-2 button:hover {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
    border-width: 1px;
  }
}

@media screen and (max-width: 1025px) {
  .pricing-container {
    width: 50%;
    grid-template-columns: 1fr;
    margin-top: 5.8rem;
    gap: 5rem;
  }

  .container-2 {
    margin-top: initial;
    margin-bottom: initial;
  }
  .container-2 ul li {
    padding: 1.06rem;
  }

  .container-2 h2 {
    padding-top: initial;
  }
  .container-2 p {
    margin-top: initial;
  }
}

@media screen and (max-width: 800px) {
  body {
    background-size: 80%, 26.5%;
    background-position: top 0 right -10rem, bottom -4.7rem left -1.9rem;
  }
  .pricing-container {
    width: 60%;
  }
}

@media screen and (max-width: 600px) {
  .pricing-container {
    width: 90%;
  }
}

.pricing-section {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 5rem;
  color: grey;
  background: #efeff5;
  padding-bottom: 250px;
  padding-top: 70px;
}

.popular-container {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff6162;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 99999px;
  transform: translate(-1.5rem, -1rem);
}

.pricing-container hr {
  border-top: 1px solid #9f9f9f;
}

/* Cloud Computing Explanation Section */
.cloud-computing-explanation {
  padding: 50px 0;
  background-color: #f8f9fa;
}

.cloud-computing-explanation .container {
  max-width: 1200px;
  margin: 0 auto;
}

.cloud-computing-explanation .row {
  display: flex;
  align-items: center;
  position: relative;
}

.cloud-computing-explanation .col-md-6 {
  flex: 1;
  padding: 20px;
}

.cloud-computing-explanation img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.cloud-computing-explanation h2 {
  color: #2c2c2c;
  font-size: 28px;
  margin-bottom: 20px;
}

.cloud-computing-explanation p {
  color: #555;
  font-size: 16px;
  line-height: 1.6;
}

/* Cloud Computing Explanation Section */
.cloud-computing-explanation {
  padding: 50px 0;
  background-color: #f6f6f6;
}

.cloud-computing-explanation .container {
  max-width: 1200px;
  margin: 0 auto;
}

.cloud-computing-explanation .row {
  display: flex;
  align-items: center;
  position: relative;
  gap: 100px;
}

.cloud-computing-explanation .col-md-6 {
  flex: 1;
  padding: 0;
}

.cloud-computing-explanation img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

#server-img {
  height: 400px;
}

.cloud-computing-explanation h2 {
  color: #ffffff;
  font-size: 28px;
  margin-bottom: 0;
  padding: 20px;
  width: 100%;
  text-align: center;
  background: #0f182a;
  border-radius: 30px 30px 0 0;
}

.cloud-computing-explanation p {
  color: #555;
  font-size: 16px;
  line-height: 1.6;
  padding: 20px;
  padding-top: 10px;
  text-align: center;
}

.cloud-text-container {
  border-radius: 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Line connecting notebook to cloud */
.connecting-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
}

.second-line-1::before,
.second-line-1::after,
.second-line-2::before,
.second-line-2::after,
.line-1::before,
.line-1::after,
.line-2::before,
.line-2::after {
  content: "";
  position: absolute;
}

.second-line-1-light::before,
.second-line-2-light::before,
.second-line-1-light::after,
.second-line-2-light::after,
.line-1-light::before,
.line-1-light::after,
.line-2-light::before,
.line-2-light::after {
  content: "";
  position: absolute;
  background-color: #fff;
}

/* Line 1 animation */
.line-1::before {
  width: 4px;
  height: 0;
  top: 0;
  left: 23%;
  background-color: #00babe;
  animation: growHeight 1.5s forwards;
}

.line-1::after {
  width: 0;
  height: 4px;
  top: 200px;
  left: 25%;
  background-color: #00babe;
  animation: growWidth 4s forwards;
}

/*-------------------------Luz---------------------------- */
.line-1-light::before {
  width: 4px;
  height: 0;
  top: 0;
  left: 23%;
  animation: var(--blueLine1-animation);
}

.line-1-light::after {
  width: 0;
  height: 4px;
  top: 200px;
  left: 45%;
  animation: var(--blueLine2-animation);
}
/*-------------------------Luz Fin------------------------ */

/* Line 2 animation */
.line-2::before {
  width: 4px;
  height: 0;
  top: 0;
  background-color: #ff6162;
  left: 24%;
  animation: growHeight2 1.5s forwards;
}

.line-2::after {
  width: 0;
  background-color: #ff6162;
  height: 4px;
  top: 190px;
  left: 26.1%;
  animation: growWidth2 4s forwards 0.2s;
}

/*-------------------------Luz---------------------------- */

.line-2-light::before {
  width: 4px;
  height: 0;
  bottom: -63px;
  left: 24%;
  animation: var(--redLine4-animation);
}

.line-2-light::after {
  width: 20%;
  height: 4px;
  top: 190px;
  left: 36%;
  position: absolute;
  transform-origin: right;
  transform: scaleX(0);
  animation: var(--redLine3-animation);
}

/*-------------------------Luz Fin------------------------ */

.second-line-1::before {
  width: 4px;
  height: 0;
  top: -5px;
  left: 77%;
  background-color: #00babe;
  animation: growHeight3 1.5s forwards 2.1s;
}

.second-line-1::after {
  width: 22%;
  height: 4px;
  top: 250px;
  left: 35%;
  background-color: #00babe;
  position: absolute;
  transform-origin: right;
  transform: scaleX(0);
  animation: growWidth3 2s forwards 3.1s;
}

/*-------------------------Luz---------------------------- */
.second-line-1-light::before {
  width: 4px;
  height: 0;
  top: -5px;
  left: 77%;
  animation: var(--blueLine3-animation);
}

.second-line-1-light::after {
  width: 25%;
  height: 4px;
  top: 250px;
  left: 30%;
  position: absolute;
  transform-origin: right;
  transform: scaleX(0);
  animation: var(--blueLine4-animation);
}
/*-------------------------Luz Fin------------------------ */

.second-line-2::before {
  width: 4px;
  height: 0;
  top: -5px;
  left: 78%;
  background-color: #ff6162;
  animation: growHeight3 1.5s forwards 2.2s;
}

.second-line-2::after {
  width: 22%;
  height: 4px;
  top: 260px;
  left: 35%;
  background-color: #ff6162;
  border-radius: 0 10px;
  position: absolute;
  transform-origin: right;
  transform: scaleX(0);
  animation: growWidth3 2s forwards 3.2s;
}

/*-------------------------Luz---------------------------- */
.second-line-2-light::before {
  width: 4px;
  height: 0;
  bottom: -150px;
  left: 78%;
  animation: var(--redLine2-animation);
}

.second-line-2-light::after {
  width: 23%;
  height: 4px;
  top: 260px;
  left: 37%;
  position: absolute;
  transform-origin: left;
  transform: scaleX(0);
  animation: var(--redLine1-animation);
}
/*-------------------------Luz Fin------------------------ */

/* Animations */
@keyframes growHeight {
  from {
    height: 0;
  }
  to {
    height: 103px;
  }
}

@keyframes growVerticalLight {
  from {
    height: 0;
    opacity: 1;
    box-shadow: 0px 0px 20px 20px white;
  }
  to {
    height: 103px;
    box-shadow: 0px 0px 20px 20px white;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes growVerticalLight2 {
  from {
    height: 0;
    opacity: 1;
    box-shadow: 0px 0px 20px 20px white;
  }
  to {
    height: 200px;
    box-shadow: 0px 0px 20px 20px white;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes growVerticalLight3 {
  from {
    height: 0;
    opacity: 1;
    box-shadow: 0px 0px 20px 0px white;
    transform-origin: bottom;
  }
  to {
    height: 200px;
    box-shadow: 0px 0px 20px 0px white;
    transform-origin: bottom;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@keyframes growVerticalLight4 {
  from {
    height: 0;
    opacity: 1;
    box-shadow: 0px 0px 20px 0px white;
    transform-origin: bottom;
  }
  to {
    height: 103px;
    box-shadow: 0px 0px 20px 0px white;
    transform-origin: bottom;
  }
  90%,
  100% {
    opacity: 0;
  }
}

@keyframes growHorizontalLight {
  from {
    width: 0;
    opacity: 1;
    box-shadow: inset 0px 0px 20px 20px #fff;
  }
  to {
    width: 20%;
    opacity: 0;
    box-shadow: inset 0px 0px 20px 20px #fff;
  }
}

@keyframes growWidth {
  from {
    width: 0;
  }
  to {
    width: 45%;
  }
}

@keyframes growHeight2 {
  from {
    height: 0;
  }
  to {
    height: 90px;
  }
}

@keyframes growWidth2 {
  from {
    width: 0;
  }
  to {
    width: 45%;
  }
}

@keyframes growHeight3 {
  from {
    height: 0;
  }
  to {
    height: 150px;
  }
}

@keyframes growWidth3 {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  100% {
    transform-origin: right;
    transform: scaleX(1);
  }
}

@keyframes growHorizontalLight2 {
  from {
    transform-origin: right;
    transform: scaleX(0);
    opacity: 1;
    box-shadow: inset 0px 0px 20px 20px #fff;
  }
  to {
    transform-origin: right;
    transform: scaleX(1);
    opacity: 0;
    box-shadow: inset 0px 0px 20px 20px #fff;
  }
}

@keyframes growHorizontalLight3 {
  from {
    transform-origin: left;
    transform: scaleX(0);
    opacity: 1;
    box-shadow: inset 0px 0px 20px 20px #fff;
  }
  to {
    transform-origin: left;
    transform: scaleX(1);
    opacity: 0;
    box-shadow: inset 0px 0px 20px 20px #fff;
  }
}

#notebook-img {
  position: relative;
  z-index: 1;
}

#cloud-img {
  position: relative;
  z-index: 1;
}

.custom-slider {
  width: 80%;
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
  transition: opacity 0.15s ease-in-out;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #0f182a;
  cursor: pointer;
  border-radius: 50%;
}
.custom-plan-label {
  color: #0f182a;
}

@media (max-height: 777px) {
  .modal_container {
    height: 70vh !important;
  }
  #loginModal {
    height: 70vh !important;
  }
  .modal-body {
    transform: translate(-50%, 30%) !important;
  }
  .text-bg h1 {
    font-size: 41px !important;
    margin: 0;
    padding: 0;
  }
}

@media (max-height: 585px) {
  .modal_container {
    height: 85vh !important;
  }
  #loginModal {
    height: 85vh !important;
  }
  .modal-body {
    transform: translate(-50%, 10%) !important;
  }
  .banner_main {
    min-height: 70vh;
    max-height: 70vh;
  }
}

@media (max-width: 450px) {
  .box_text {
    height: 280px;
  }
}

.carousel-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel {
  position: relative;
  width: 100%;
}

.carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
  overflow: unset !important;
}

.carousel-item {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin: 0 !important;
  float: unset !important;
}

.carousel-item img {
  width: auto;
  height: auto;
  object-fit: cover;
  transition: transform 10s ease;
}

.carousel-item img.animate-zoom {
  transform: scale(1.2);
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: #000;
  cursor: pointer;
  user-select: none;
  z-index: 1;
}

.carousel-control.prev {
  left: 20px;
}

.carousel-control.next {
  right: 20px;
}

/*ESTILOS SECCION PRODUCTOS*/

.content img,
.content video {
  width: 60%;
  height: auto;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.wave-container2 {
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.wave-container2 img {
  position: block;
  bottom: 11%;
  height: auto;
}

#section-chatbot {
  height: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 20px 0;
}

#content-chatbot {
  display: flex;
  width: 35%;
  align-items: center;
  gap: 40px;
}

#content-chatbot #texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px
}

#texto p {
  font-size: 1.2rem;
  text-align: center;
}

#image-container {
  position: relative;
  width: 40%;
  height: 96vh;
  max-height: 600px; 
  display: flex;
}

#image-container img {
  height: 100%;
  position: absolute;
  right: 0;
  object-fit: contain;
  opacity: 0;
  border-radius: 0px;
  transition: opacity 0.9s ease-in-out;
}

#image-container img.active {
  opacity: 1;
}

@media(max-width:585px){
  .txt-produ {
    max-width: 40%;
    padding-left: 0px !important;
  }
}

@media (max-width: 585px) {
  .txt-produ2 {
    padding-right: 0px !important;
  }
}


.img-container-2 {
  display: none;
}

.img-container-2 img {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

#container-riway {
  position: relative;
  width: 100%;
  height: 40vh;
  display: none;
}

#container-riway img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  object-fit: contain;
  opacity: 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  transition: opacity 0.6s ease-in-out;
}

#container-riway img.active {
  opacity: 1;
}

.img-why {
  justify-content: end;
}

#visita {
  font-size: 20px;
}

#crm-img {
  width: 80%;
}

#clip-crm {
  width: 60%;
}

@media (max-width: 760px) {
  #texto h2 {
    text-align: center;
  }

  #content-chatbot {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    gap: 20px;
    padding: 10px;
  }

  #image-container {
    position: relative;
    width: 100%;
    height: 96vh;
    max-height: 600px;
    display: flex;
  }

  #image-container img {
    height: 100%;
    left: 0;
    border-radius: 14px;

  }

  .products {
    flex-direction: column-reverse;
    /* padding: 0 !important; */
  }

  .txt-produ {
    max-width: 100%;
  }

  #video-container {
    display: none;
  }

  .img-container-2 {
    display: inline;
  }

  #container-riway {
    display: flex;
  }

  #riway-dar-vuelta {
    flex-direction: column;
  }

  .img-why {
    justify-content: center;
  }

  #visita {
    font-size: 22px;
  }

  #crm-img {
    width: 96%;
  }

  .why-us .content p {
    font-size: 18px;
    text-align: center;
  }

  .why-us .accordion-list p {
    font-size: 17px;
  }

  #clip-crm {
    width: 97%;
  }
}


.section-separator {
  width: 60%; /* Ajusta el ancho según sea necesario */
  height: 1px;
  background-color: #ddd; /* Color gris claro */
  margin: 60px auto; /* Centrar horizontalmente y agregar espacio arriba y abajo */
  position: relative;
  left: 30%;
  transform: translateX(-50%);
}

#iphone-frame{
  position:relative;
  width:300px;
  height:600px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;          /* recorta la pantalla */
}

/* la silueta del iPhone encima de todo */
#iphone-frame::after{
  content:'';
  position:absolute;
  inset:0;                  /* ocupa todo el frame */
  background:url('../images/iphone.png') center/contain no-repeat;
  z-index:10;               /* mayor que cualquier hijo */
  pointer-events:none;      /* no intercepta el clic */
}



#chatbot-image {
width: 84%;
    height: 89.3%;
    top: 5.1%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 38px;
    position: absolute;
    z-index: 1;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color:  #00babe !important;
}

/*════════════  BOTÓN CTA PARA MODALES  ════════════*/
.cta-btn{
  display:inline-block;
  margin-top:2rem;
  padding:.9rem 2.4rem;
  font:700 1.05rem/1 "Montserrat",sans-serif;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#fff;
  background:linear-gradient(135deg,#00babe 0%,#00d7ff 50%,#00babe 100%);
  border:none;border-radius:50px;
  cursor:pointer;text-decoration:none;
  box-shadow:0 4px 15px rgba(0,186,190,.4);
  transition:transform .35s cubic-bezier(.22,.68,.27,1.55),
             box-shadow .35s;
  animation:pulse 2.5s infinite;
}
.cta-btn:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 6px 20px rgba(0,186,190,.5);
}

@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,186,190,.5);}
  50%   {box-shadow:0 0 0 12px rgba(0,186,190,0);}
}
  
.neon{
  font:700 2rem "Montserrat",sans-serif;
  color:#fff;text-align:center;
  text-shadow:
    0 0 6px #00babe,
    0 0 12px #00babe,
    0 0 18px #00babe;
  animation:neonPulse 2.5s ease-in-out infinite alternate;
}
@keyframes neonPulse{
  from{text-shadow:0 0 4px #00babe;}
  to  {text-shadow:0 0 18px #00babe;}
}

@media(max-width:768px){
  .neon{
    font:700 1.5rem "Montserrat",sans-serif;
  }
}


/* si ya lo tienes, deja esta línea tal cual */
.txt-produ{
  position:relative;      /* referencia para el pseudo-elemento */
  z-index:1;
  padding:2rem;
  border-radius:14px;     /* opcional, para bordes redondeados */
}

.txt-produ::before{
  content:'';
  position:absolute;
  inset:0;                               /* ocupa todo el bloque   */
  background:radial-gradient(
    ellipse at center,
    rgba(0,0,0,.80) 0%,        /* centro oscuro (50 % op.) */
    rgba(0,0,0,0)   70%        /* se desvanece al 70 %   */
  );
  border-radius:inherit;                 /* sigue el mismo radius  */
  z-index:-1;                            /* se queda detrás del texto */
}




/*NUEVOS ESTILOS AGREGADOS PARA CONTI*/

/*FOOTER*/

/* ========== FOOTER SEGÚN ESPECIFICACIONES ========== */

.site-footer{
   background:rgba(247,247,247,.6);
   min-height:100px;
   font-family:'Texta', sans-serif;
   position:relative;
   overflow:hidden;
   padding-top:40px;                  
}

/* ---------- Contenedor general ---------- */
.footer-inner{
   max-width:1400px;
   margin:0 auto;
   padding:0 40px 40px;
}

/* ---------- WRAPPER de columnas ---------- */
.footer-columns{
   display:flex !important;         
   flex-wrap:wrap;
   justify-content:space-between;
   gap:40px;
}

/* ---------- Cada columna ---------- */
.footer-col{
   flex:1 1 220px;
   min-width:200px;
}

/* ---------- Cabeceras de sección ---------- */
.footer-col h4{
   font-size:26px;                    
   font-weight:700;                    
   color:#000;                         
   margin:0 0 20px;
}

/* ---------- Lista y enlaces ---------- */
.footer-col ul{
   list-style:none;
   margin:0;
   padding:0;
}
.footer-col ul li{
   margin:0 0 12px;
}
.footer-col ul li a{
  font-size: 22px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  transition: opacity .2s;
  white-space: nowrap;
}
.footer-col ul li a:hover{ opacity:.8; }

/* ---------- Íconos sociales ---------- */
.social-wrapper{ margin:40px 0 30px; text-align:center; }
.social-icons{
   display:inline-flex;
   gap:18px;
   font-size:30px;                     
   padding:0;
   margin:0;
   list-style:none;
}
.social-icons a{
   color:#000;
   transition:color .2s;
}
.social-icons a:hover{ color:#999; } 

/* ---------- Línea divisoria ---------- */
.site-footer hr{
   border:0;
   border-top:1px solid rgba(255,255,255,.4);
   margin:0 0 25px;
}

/* ---------- Copyright ---------- */
.copy{
   color:#000;
   font-size:14px;
   text-align:center;
   margin:0;
}

/* ---------- Botón flotante WhatsApp ---------- */
.whatsapp-float{
   position:fixed;
   right:20px;
   bottom:20px;
   width:90px;
   height:90px;
   background:url("images/whatsapp.svg") center/contain no-repeat;
   z-index:999;
}

/* ---------- RESPONSIVE (≤ 767 px) ---------- */
@media (max-width:767px){
   .footer-columns{
      flex-direction:column;
      align-items:center;
      text-align:left;
   }
   .footer-col{ 
      margin-bottom:35px;
    }

   .social-icons{ 
      justify-content:center;
    }
}

.section-title1{
  font-size:72px;               
  /*margin: 75px 50px 75px 130px;*/
  text-align: left !important;
  font-family: 'Texta', 'Montserrat', sans-serif;
}

@media(max-width:1065px){
  .section-title1{
    font-size: 50px;  
  }
}

/*@media(max-width:768px){
  .section-title1{
    margin: 75px 50px 75px 35px;
  }
}*/

.section-title2{
  font-size:72px;               
  margin: 150px 1012px 50px 0px;
  font-family: 'Texta', 'Montserrat', sans-serif;
}

@media(max-width:1495px){
  .section-title2{
    margin: 150px 615px 50px 0px;
  }
}

@media(max-width:1065px){
  .section-title2{
    margin: 150px 0px 50px 0px;
    font-size: 50px;  
  }
}

.section-title3{
  font-size:72px;               
  margin: 150px 1002px 50px 0px;
  font-family: 'Texta', 'Montserrat', sans-serif;
}

@media(max-width:1495px){
  .section-title3{
    margin: 150px 570px 50px 0px;
  }
}

@media(max-width:1065px){
  .section-title3{
    margin: 150px 0px 50px 0px;
    font-size: 50px;  
  }
}

@media(max-width:768px){
  .section-title{
    font-size:40px !important;               
    margin:150px 100px 50px 100px  !important;
  }

  .cat-nav {
    display: flex !important;
    align-items: center !important;
    max-width: 1280px !important;
  }

  .banner-solucion h2 { 
    font-size: 40px !important;
  }

}

/*@media(max-width:1500px){
  .cat-nav {
   justify-content: center !important; 
  }*/
}

/* â–‘GRID DE PRODUCTOS â–‘ */
.products-grid{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  margin:0 100px
}
/* === CARD ====================================================== */
.product-card{
  width:416px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* === CONTENEDOR CON BORDE (solo imagen) ======================== */
.product-card .thumb{
  width:100%;
  height:516px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0.75px solid #B3B3B3;
  box-sizing:border-box;
  padding:27px;   
  margin-top: 10px;
}

/* La imagen se escala sin deformarse */
.product-card .thumb img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

@media(max-width:768px){
 .product-card {
    width: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* === TEXTOS BAJO EL BORDE ===================================== */
.product-info{
  margin-top:27px
}

.product-info .name{
  font-size:20px;
  margin-bottom:9px; 
  font-weight: 300;
  line-height: 1.2;
}

.product-info .price{
  font-size:22px;
  font-weight:700; 
  margin: 8px 0px 8px 0px !important;
}

.product-info .old-price{
  font-size:16px;
  font-weight:600
}

/*BANNER IMG GIGANTE*/
/* ---------------------------------------------------------------------
   SLOT DEL BANNER INFERIOR - proporcion por breakpoint (2026-08-25)
   ---------------------------------------------------------------------
   Antes: `height: 500px` FIJO en todos los tamanos. En una pantalla de
   2560 eso daba 5,12:1 y en un celular de 375 daba 0,75:1 -o sea vertical-,
   y una sola imagen no puede cubrir las dos: en el telefono se veia una
   franja central angosta.

   Ahora hay dos proporciones, cada una la del archivo que le toca:
     >768px   banner_inferior.jpg         2400x1029  (2,332)
     <=768px  banner_inferior_mobile.jpg  1080x1350  (0,800)
   El `<picture>` de index.php corta en el mismo 768px.

   OJO con la proporcion de desktop: la ficha de §13 pedia 2560x720 (3,56:1)
   y lo que llego mide 3024x1296 (2,33:1). Se respeta lo que llego en vez de
   recortarlo porque LA IMAGEN TRAE TEXTO INCRUSTADO -"DESDE LA ESTRUCTURA A
   LA TERMINACION"- que llega hasta el borde inferior: cualquier recorte de
   alto lo mutila. Si algun dia se cambia esa foto por una sin texto, se
   puede volver a una banda mas baja.
   --------------------------------------------------------------------- */
.banner-solucion {
  width: 100%;
  aspect-ratio: 2400 / 1029;
  height: auto;
  max-height: 72vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .banner-solucion { aspect-ratio: 1080 / 1350; max-height: none; }
}

@supports not (aspect-ratio: 1 / 1) {
  .banner-solucion { height: 500px; }
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.banner-solucion h2 {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: -10px;
  text-align: right;
  font-family: 'Texta', 'Montserrat', sans-serif;
  font-size: 54px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -.5px;
}

.banner-solucion h2 strong {
  font-weight: 700;
}

.banner-solucion h2 span {
  font-weight: 400;
}

@media(max-width:1800px) {
  .banner-solucion {
    width: 100%;
  }
}

.spacer-150{
  height:150px;   
  width:100%;       
}

.spacer-50{
  height:50px;   
  width:100%;       
}

/* enlace — tipografía y subrayado */
.cat-link{
  font-size:26px;
  font-family:'Texta','Montserrat',sans-serif;
  font-weight:400;    /* “Regular” */
  color:#000;
  text-decoration:none;
  position:relative;
  padding-bottom:4px; /* espacio para la línea */
}

.cat-link:hover{
  color: #999 !important;
}

/* línea fina bajo todo el texto */
.cat-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:#000;
}

/* resaltar la palabra central, opcional */
.cat-link span{font-weight:700;letter-spacing:.3px}

/*CARDS DE PRODUCTOS*/

/* =====================================================================
   GRILLA DE CATEGORÍAS — la cantidad de columnas NO se escribe acá
   =====================================================================
   `index.php` calcula cuántas columnas corresponden a partir de las
   tarjetas que efectivamente va a dibujar, y las pasa en dos custom
   properties sobre el `<section class="cats-grid">`:

     --cats-desktop → el divisor más grande de N entre 4, 3 y 2, para que
                      la última fila quede SIEMPRE completa.
     --cats-chico   → 2 en pantallas medianas y en mobile (o 1 si hay una
                      sola tarjeta).

   🔴 POR QUÉ. La cantidad de destacados cambió cuatro veces (6 → 7 → 6 → 4)
   y cada vez rompió el maquetado en otro lado: con 7 apareció un
   `repeat(6, …)` hardcodeado en el carril mobile, y con 4 volvió la fila
   huérfana de 3+1 en desktop (pendiente 21). Con esto el CSS ya no depende
   del número: cambiar `HOME_RUBROS_DESTACADOS` alcanza.

   ⚠️ `repeat(var(--x), 1fr)` es válido: las custom properties se sustituyen
   ANTES de parsear el valor. Lo que NO se puede es `repeat(min(var(--x),4), …)`
   —`repeat()` exige un entero literal, no una función matemática—, y por eso
   el cálculo se hace en PHP y no acá.

   El valor de reserva (3 y 2) es el que había, por si el marcado se emite
   sin las variables.
   ===================================================================== */
.cats-grid{
  display:grid;
  grid-template-columns:repeat(var(--cats-desktop, 3), 1fr);
  gap:7.5px;
  max-width:calc(100% - 40px);
  margin:0 auto;
}

/* Pantallas medianas y tablets. Acá vivían DOS breakpoints, los dos pensados
   para SEIS tarjetas en tres columnas, y con cuatro los dos molestaban:

   · 1065px → UNA columna. **Eliminado.** Con `aspect-ratio: 4/5` a ancho
     completo cada tarjeta pasaba de 1280px de alto: cuatro apiladas daban más
     de 5000px de scroll.
   · 1495px → dos columnas. **Bajado a 1023px.** Cortaba demasiado pronto: a
     1496px la tarjeta medía 464px de ancho y a 1495px saltaba a 724px, o sea
     que achicar la ventana la agrandaba. Con el corte en 1023 las cuatro
     columnas cubren todo el rango de notebook y desktop (1024–1920) y recién
     en tablet se pasa a 2×2.

   ⚠️ El valor 1023 sale de que abajo de eso una tarjeta en 4 columnas queda
   por debajo de ~235px de ancho, donde el rótulo empieza a partirse. */
@media(max-width:1023px){
  .cats-grid{
    grid-template-columns:repeat(var(--cats-chico, 2), 1fr);
  }
}

/* ——— CAJA ——— */
.cat-box{
  position:relative;
  width:100%;           /* se reparte 1fr de la columna */
  aspect-ratio:4/5;     /* mantiene proporción vertical sin medir px */
  overflow:hidden;
  /*  height: 50dvh; OCUPA EL 50% DE LA PANTALLA*/
}

.cat-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ——— TEXTO ——— */
.cat-title{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Texta','Montserrat',sans-serif;
  /* El rótulo se mide contra el ANCHO DE LA TARJETA, no contra la ventana.
     Antes era `clamp(20px, 4vw, 64px)`: con SEIS tarjetas en 3 columnas cada
     una ocupaba ~1/3 del ancho y 4vw quedaba bien, pero con CUATRO en 4
     columnas la tarjeta se angosta —240px a 1024px de ventana— y el rótulo
     seguía pidiendo 41px, que no entra.
     `12vw / columnas` mantiene la proporción: con 3 columnas da los 4vw de
     siempre y con 4 da 3vw. `--cats-desktop` se hereda de `.cats-grid`. */
  font-size:clamp(18px, calc(12vw / var(--cats-desktop, 3)), 64px);
  font-weight:700; color:#fff; text-align:center;
  pointer-events:none;
}

/* ——— SI LA PANTALLA ES DEMASIADO ESTRECHA (< 768 px) ——— */

/* ⚠️ ESTE BLOQUE ESTABA MUERTO Y SE ELIMINÓ (2026-08-25).
   Definía un CARRIL HORIZONTAL para mobile (`grid-auto-flow:column`,
   `overflow-x:auto`, `grid-auto-columns:66.666%`, `.cat-box{min-width:66.666vw}`),
   pero el segundo `@media(max-width:768px)` que viene justo abajo lo pisa
   entero con `grid-auto-flow:row` y `overflow-x:hidden` — y gana, porque a
   igual especificidad manda el que está declarado después.
   O sea que **el carril nunca se dibujó**: en mobile siempre fueron dos
   columnas. Se saca para que no queden dos bloques del mismo breakpoint
   diciendo cosas opuestas; el que vale es el de abajo.
   🔑 Se conserva la lección que dejó, porque sigue valiendo: aquel carril
   usaba `grid-auto-columns` y no `repeat(6, …)` justamente para no depender
   de la cantidad de destacados. Es la misma razón por la que ahora las
   columnas salen de `--cats-desktop` / `--cats-chico`. */

/*ULTIMOS AGG PARA ACOMODAR LAS CARDS DE LAS TIPOGRAFIAS 2x3*/

/* ——— SI LA PANTALLA ES DEMASIADO ESTRECHA (< 768 px) ——— */
@media(max-width:768px){
  .cats-grid {
    display: grid;
    /* UNA sola columna en mobile, no dos.
       Antes eran 2x2 y PEGADAS: en un celular de 375px cada tarjeta quedaba
       de ~187px de ancho por 234 de alto, con el rotulo de 25px encima. A una
       por fila la tarjeta usa el ancho completo y la foto de obra se ve.

       El 1 va escrito y NO sale de `--cats-chico` a proposito: esa variable
       existe para que la ULTIMA FILA quede completa cuando hay VARIAS
       columnas. Con una sola columna no hay fila huerfana posible, sea cual
       sea la cantidad de destacados, asi que no hay nada que calcular.
       `--cats-chico` sigue gobernando el tramo de tablet (769-1023px). */
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    overflow-x: hidden;

    /* Apiladas hace falta separacion: pegadas se leen como UNA imagen larga
       y no como cuatro accesos distintos. */
    gap: 10px !important;

    /* 3. OCUPAR TODO EL ANCHO (SIN MÁRGENES) */
    width: 100% !important;
    max-width: 100% !important; /* Sobrescribe el calc(100% - 40px) */
    margin: 0 !important;       /* Quita el centrado/margen */
    /* Aire a los costados: a sangre contra el borde del telefono la tarjeta
       no se lee como una tarjeta. */
    padding: 0 14px !important;
    box-sizing: border-box;
  }

  .cat-box {
    /* Aseguramos que la caja ocupe su celda completa */
    width: 100%;
    min-width: unset;
    margin: 0 !important;
    
    /* 16/9 en vez de 4/5. Con la tarjeta a ancho completo el 4/5 daria 469px
       de alto en un celular de 375: las CUATRO sumarian ~1875px de scroll
       solo de categorias. Con 16/9 son ~211px cada una, ~880px en total. */
    aspect-ratio: 16 / 9;
  }

  /* Ajuste de texto para que no moleste en los bordes */
  .cat-title {
      /* Ya no compite con una tarjeta angosta: hay todo el ancho de la
         pantalla. Sigue atado al ancho y no a un valor fijo, que era lo que
         hacia que "Aislaciones" quedara apretado. */
      font-size: clamp(26px, 8vw, 44px);
      width: 100%;
  }
}

/*BTN WSP*/

.whatsapp-float{
  position:fixed;
  right:28px;            /* separación del borde  */
  bottom:28px;           /* separación del borde  */
  width:60px;            /* diámetro del círculo  */
  height:60px;
  border-radius:50%;
  background:#25d366;    /* color oficial WA      */
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;        /* tamaño del ícono      */
  z-index:50;           /* por encima de todo    */
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;  /* quita subrayado       */
}
.whatsapp-float:hover{
  transform:scale(1.12);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  color:#fff !important;
}

/* opcional: achica un poco en pantallas chicas */
@media(max-width:480px){
  .whatsapp-float{
    width:52px;
    height:52px;
    font-size:28px;
    right:18px;
    bottom:18px;
  }
}


.navigation.navbar-dark .navbar-nav .nav-link.active{
  color:#fff !important;
}

/*CSS  BREADCRUMB*/

.breadcrumb{
  font-size:14px;
  background-color: transparent !important;
}

.breadcrumb a {
  color:inherit; 
  text-decoration:none;
}

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

.breadcrumb .sep {
  color:#777;
  margin:0 4px;
}

/* =====================================================================
   STOCK — badges y estados (depósito MARCOS JUAREZ)
   Ver econti.md §1.2 / includes/stock.php
   ===================================================================== */

.stock-line {
  margin: 6px 0 0;
  min-height: 20px;
  line-height: 1;
}

.stock-line--detail {
  margin: 14px 0;
}

.stock-badge {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 4px;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Disponible (con stock holgado) */
.stock-badge--ok {
  background: #e6f5ec;
  color: #1b7e44;
  border: 1px solid #bfe3cd;
}

/* Pocas unidades */
.stock-badge--low {
  background: #fff3e0;
  color: #b25a00;
  border: 1px solid #ffd9a8;
}

/* Sin stock */
.stock-badge--out {
  background: #fdeaea;
  color: #c0392b;
  border: 1px solid #f3c0bb;
}

/* Excede el stock disponible (en el carrito) */
.stock-badge--warn {
  background: #fdeaea;
  color: #c0392b;
  border: 1px solid #f3c0bb;
}

/* Tarjeta de producto sin stock: atenuada pero visible */
.product-card--out,
.fav-card--out {
  opacity: .62;
  filter: grayscale(.35);
}
.product-card--out:hover,
.fav-card--out:hover {
  opacity: .8;
}

/* Línea de carrito sin stock / que excede */
.cart-item--out,
.cart-item--warn {
  background: #fdf3f2;
}
.cart-item--out .cart-item__img {
  filter: grayscale(.5);
  opacity: .7;
}

/* Botón "Agregar al carrito" deshabilitado por falta de stock */
.btn-cart--disabled,
.btn-cart:disabled {
  background: #bdbdbd !important;
  border-color: #bdbdbd !important;
  color: #fff !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}

/* Botón +/- del carrito deshabilitado al tope de stock */
.cart-item__btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* === NUEVOS ESTILOS AGREGADOS PARA CONTI === */
/* Sin barras de scroll visibles en NINGUN lado (pedido del usuario, sobre todo
   mobile). El contenido sigue scrolleando normal (touch/rueda/teclado);
   solo se oculta la barra. Regla global para no tener que ir elemento por
   elemento. Ver econti.md §10. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* ===========================================================
   CARRUSEL DE BANNERS (home) — reemplaza al viejo .banner_main
   Imágenes banner_1, banner_2, ... servidas por visor.php.
   Slides apilados con fade; flechas + puntos; autoplay vía JS.
   =========================================================== */
/* ---------------------------------------------------------------------
   SLOT DEL BANNER PRINCIPAL - proporcion por breakpoint (2026-08-25)
   ---------------------------------------------------------------------
   Antes: `min-height:55vh; height:72vh`. El alto salia de la VENTANA, no
   de la imagen, asi que la proporcion del slot cambiaba con cada pantalla:
   2,96:1 en un notebook, 2,73:1 en 2K y 1,04:1 -casi cuadrado- en un iPad
   vertical. Ninguna imagen puede cubrir ese rango, y por eso en tablet se
   veia el ~37% central de una foto apaisada.

   Ahora cada breakpoint tiene la proporcion EXACTA del archivo que le
   toca, asi que la foto entra entera y `cover` no recorta nada:
     >=1025px  banner_1.jpg          2400x1000  (2,400)
     769-1024  banner_1_tablet.jpg   1600x1200  (1,333)
     <=768px   banner_1_mobile.jpg   1080x1920  (0,562)
   Los tres `<source>` viven en el `<picture>` de index.php y sus `media`
   TIENEN QUE COINCIDIR con estos cortes. Si se cambia uno, cambiar el otro.
   --------------------------------------------------------------------- */
.banner_carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 2400 / 1000;
  height: auto;
  /* Tope para monitores muy anchos: sin esto, a 2560px la portada mediria
     1067px de alto y se comeria la pantalla entera. */
  max-height: 78vh;
  overflow: hidden;
  background: #f4f4f4;
}

@media (max-width: 1024px) {
  .banner_carousel { aspect-ratio: 1600 / 1200; max-height: none; }
}

@media (max-width: 768px) {
  .banner_carousel { aspect-ratio: 1080 / 1920; max-height: 88vh; }
}

/* Sin soporte de aspect-ratio se vuelve al comportamiento viejo, que no era
   ideal pero dibujaba algo. */
@supports not (aspect-ratio: 1 / 1) {
  .banner_carousel { height: 72vh; min-height: 55vh; }
}

.banner-track {
  width: 100%;
  height: 100%;
}

.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out;
  z-index: 0;
}

.banner-slide.active {
  opacity: 1;
  z-index: 1;
}

.banner-slide picture,
.banner-slide .banner-link {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-slide .banner-link {
  position: relative;   /* ancla para el CTA de hover */
}

.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* CTA que aparece al pasar el mouse sobre el banner → lleva a las ofertas.
   En desktop: oculto, fade-in al hover. (En mobile no hay hover; el tap igual
   navega al link.) */
.banner-cta {
  position: absolute;
  left: 50%;
  bottom: 64px;                       /* arriba de los puntos del carrusel */
  transform: translate(-50%, 10px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;               /* el click lo maneja el <a> */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(20, 20, 22, .62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .3px;
  white-space: nowrap;
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: opacity .35s ease, transform .35s ease;
}
.banner-cta i {
  color: var(--color-primario, #e74c3c);
  font-size: 16px;
}
.banner-slide:hover .banner-cta {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Flechas prev / next — solo el chevron, sin círculo; aparecen suave al hover */
.banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .4s ease, transform .3s ease;
}

.banner_carousel:hover .banner-nav { opacity: .8; }

.banner-nav:hover {
  opacity: 1;
}

.banner-nav.prev { left: 22px; }
.banner-nav.next { right: 22px; }
.banner-nav.prev:hover { transform: translateY(-50%) translateX(-3px); }
.banner-nav.next:hover { transform: translateY(-50%) translateX(3px); }

/* Puntos de navegación — finos; el activo se estira en una barrita */
.banner-dots {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.banner-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: width .45s ease, background .45s ease;
}

.banner-dot:hover { background: rgba(255, 255, 255, .8); }

.banner-dot.active {
  width: 28px;
  background: #fff;
}

@media (max-width: 767px) {
  /* La imagen mobile es vertical 900x1600 (9:16). El contenedor toma esa misma
     relación de aspecto (alto = ancho * 16/9) para que entre completa, sin que
     object-fit: cover recorte arriba/abajo. */
  .banner_carousel { height: auto; min-height: 0; max-height: none; aspect-ratio: 9 / 16; }
  /* En mobile las flechas quedan siempre visibles (no hay hover) y más chicas */
  .banner-nav { width: 36px; height: 36px; font-size: 24px; opacity: .85; }
  .banner_carousel:hover .banner-nav { opacity: .85; }
  .banner-nav.prev { left: 8px; }
  .banner-nav.next { right: 8px; }

  /* Sin hover en mobile -> el CTA de ofertas se muestra SIEMPRE, con un leve
     latido para que se note que el banner es clickeable. */
  .banner-cta {
    opacity: 1;
    transform: translate(-50%, 0);
    bottom: 80px;                     /* arriba de los puntos */
    font-size: 13px;
    padding: 10px 18px;
    gap: 7px;
    animation: bannerCtaPulse 2.2s ease-in-out infinite;
  }
  .banner-cta i { font-size: 14px; }
  .banner-slide:hover .banner-cta { transform: translate(-50%, 0); }
}

@keyframes bannerCtaPulse {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-50%, 0) scale(1.06); }
}

/* ===========================================================
   DESCUENTO POR PRODUCTO — badge "30% Descuento" + precio tachado
   Global: aparece en home, catálogo, detalle, favoritos y carrito.
   El % y la vigencia (vigente / valido_desde / valido_hasta) los
   resuelve includes/descuentos.php; el front solo pinta lo que llega.
   Render uniforme vía descuento_badge_html(). Ver econti.md §1.2 / §3.
   =========================================================== */
/* Badge "ContiMundial" — estilo bandera argentina (GLOBAL, 2026-06-17):
   franjas celeste/blanco/celeste + Sol de Mayo, numero rojo, "Descuento" azul
   marino en negrita. Aplica en TODAS las pantallas (home, catalogo, detalle,
   favoritos, modal del carrito) via descuento_badge_html() / la clase base. */
.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;                       /* por encima de img-hover (z-index:2) */
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  /* tres franjas horizontales: celeste / blanco / celeste */
  background: linear-gradient(180deg,
    #74acdf 0%, #74acdf 33%,
    #ffffff 33%, #ffffff 66%,
    #74acdf 66%, #74acdf 100%);
  color: #0b3d6b;                   /* "Descuento" en azul marino (lee sobre el blanco) */
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 700;                 /* "Descuento" en negrita */
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;             /* pill */
  border: 1px solid rgba(255,255,255,.8);
  letter-spacing: .2px;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(255,255,255,.55);
  box-shadow: 0 3px 10px rgba(116,172,223,.5);
  pointer-events: none;             /* no corta el hover de la imagen */
}
.discount-badge::before {
  content: "\2600";                 /* Sol de Mayo */
  color: #f4b400;
  font-size: 14px;
  line-height: 1;
  margin-right: 1px;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.discount-badge strong {
  color: #ff0000;                   /* el % en rojo bien fuerte */
  font-weight: 800;
  font-size: 15px;
}

/* Variante en flujo (no flotante sobre la imagen): la usa el detalle del
   producto al lado del precio. */
.discount-badge--inline {
  position: static;
  box-shadow: none;
  vertical-align: middle;
}

/* Precio anterior tachado, antes del precio con descuento. */
.price-strike {
  display: inline-block;
  margin-right: 6px;
  color: #999;
  font-weight: 400;
  text-decoration: line-through;
}

/* El badge (position:absolute) se ancla al contenedor de la imagen. Estos
   contenedores deben ser el "containing block". (No mueve nada: relative sin
   offsets solo crea el ancla.) */
.product-card .thumb,
.similar-product-thumb,
.fav-card__image { position: relative; }

/* =====================================================================
   MODAL DE CHECKOUT — campos y secciones (2026-07-21)
   ---------------------------------------------------------------------
   El modal de checkout vive DUPLICADO en includes/navbar.php y en
   includes/navbarProduct.php, y estaba 100% inline-styled: el mismo
   style="" de input se repetía 16 veces por archivo (72 repeticiones
   contando labels y secciones entre los dos). Cambiar un color obligaba
   a tocar 72 lugares, y era imposible agregar estados (focus, error) sin
   duplicarlos también.
   Estas clases viven acá —en el CSS global— justamente para que los dos
   navbars compartan UNA sola definición.
   ===================================================================== */

/* ---------------------------------------------------------------------
   2026-08-12 — Alineado con el formulario de pago (`.pw-*`, inyectado
   desde js/payway_checkout.js).
   ---------------------------------------------------------------------
   Los dos formularios son PASOS CONSECUTIVOS del mismo checkout: el
   cliente completa "1. Datos de Envío" y pasa a la tarjeta. Que tuvieran
   radios, paddings y tamaños distintos hacía que el segundo paso pareciera
   de otro sitio. Ahora comparten la misma escala visual.

   🔑 El CSS vive ACÁ y NO en el JS, a propósito: este formulario se dibuja
   ANTES de que `payway_checkout.js` se cargue. Si dependiera del CSS que
   inyecta ese archivo, el paso 1 se vería sin estilo hasta que arranque el
   pago — y además ataría style.css al .js como grupo atómico de deploy,
   que es justo la trampa que el proyecto viene evitando.

   ⚠️ NO se tocó el `gap:10px` del <form> ni el padding del contenedor
   (inline en los dos navbars). Los 28 anchos de columna están calculados
   como `calc(50% - 5px)`, o sea gap/2: mover el gap obliga a recalcular los
   28 a mano. Riesgo alto, ganancia visual mínima.

   Hay chequeos en `sql/verificar_form_payway.js` que afirman que estos
   valores siguen coincidiendo con los del form de pago.
   --------------------------------------------------------------------- */

.chk-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    letter-spacing: .01em;   /* igual que .pw-label */
    margin-bottom: 4px;
}

.chk-input {
    width: 100%;
    padding: 11px 12px;      /* .pw-input */
    border: 1px solid #ddd;  /* .pw-input */
    border-radius: 8px;      /* .pw-input */
    font-size: 15px;         /* .pw-input */
    font-family: inherit;
    color: #1f1f1f;          /* .pw-input */
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    /* Sin box-sizing, el padding se suma al 100% y los campos desbordan
       la grilla del form en mobile. */
    box-sizing: border-box;
    max-width: 100%;
}

/* Antes NO había estado de foco: en un form de 15 campos en mobile, el
   usuario no tenía forma de ver en cuál estaba parado. */
.chk-input:focus {
    outline: none;
    border-color: var(--color-primario, #e74c3c);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, .14);
}

.chk-input::placeholder { color: #bbb; }   /* .pw-input::placeholder */

.chk-input:disabled,
.chk-input[readonly] { background: #f4f4f4; color: #777; cursor: not-allowed; }

/* Estado de error: marca el campo Y deja lugar para el motivo debajo, en
   vez del alert genérico que se usaba antes. */
.chk-input--error {
    border-color: #c0392b;
    background: #fdf6f5;
}
.chk-input--error:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .16);
}
.chk-field-error {
    display: block;
    color: #c0392b;
    font-size: 11.5px;
    line-height: 1.35;
    margin-top: 4px;
}

/* Título de bloque ("Datos personales", "Domicilio", "Facturación"). */
.chk-seccion {
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    padding: 6px 0;
    margin-top: 4px;
}
.chk-seccion--sep {
    border-top: 1px solid #e6e6e6;
    margin-top: 12px;
    padding-top: 12px;
}

/* En mobile, los campos que en desktop van al 50% pasan a ancho completo:
   un input de ~170px con una dirección adentro es incómodo de leer y de
   corregir. Breakpoint del sitio (767px). */
@media (max-width: 767px) {
    .chk-col-2,
    .chk-col-35,
    .chk-col-65 { width: 100% !important; }
}

/* 🔴 2026-08-12 — 16px en mobile, igual que `.pw-input`. NO es estético:
   iOS hace ZOOM automático al enfocar un input de menos de 16px, y después
   no vuelve solo. En un formulario de 16 campos el cliente terminaba
   arrastrando la pantalla de costado en cada uno. El form de pago ya lo
   tenía resuelto desde el 2026-08-05; el paso 1 no, y es el que MÁS campos
   tiene de los dos. */
@media (max-width: 479px) {
    .chk-input { font-size: 16px; }
}

/* =====================================================================
   CONTI SECO — PIE DEL CARRITO / DERIVACIÓN A VENDEDOR (modo catálogo)
   =====================================================================
   El carrito de este sitio no cobra: cierra con "Pedir cotización por
   WhatsApp" (includes/pedir_cotizacion.php + js/cotizacion_wa.js).

   🔴 POR QUÉ HAY UN MODIFICADOR `--catalogo` Y NO SE TOCA EL FOOTER BASE
   `.cart-modal__footer` (definido en los dos navbars) es
       display:flex; justify-content:space-between; align-items:center;
   es decir, una FILA de dos columnas: [totales] ←→ [CTA]. Eso funciona con
   "Finalizar compra", que son dos palabras.

   Con "Pedir cotización por WhatsApp" no: el botón mide más del doble,
   lleva icono, y necesita una nota debajo. Metiendo esos elementos como
   hermanos, `space-between` los repartía en UNA línea de 560px y quedaba
   todo aplastado — que es exactamente como se veía.

   La solución NO es cambiar el footer base (rompería el modo con checkout,
   que sigue siendo una fila): es un modificador que sólo se aplica cuando
   `MODO_CATALOGO` está activo, y que lo convierte en columna.

   El botón va VERDE WHATSAPP y no con `--color-primario` a propósito: ocupa
   el lugar donde en Contigiani vive "Finalizar compra", pero hace otra cosa
   —te saca del sitio y te lleva a un chat—. Que se vea distinto es la señal
   de que no estás comprando.
   ===================================================================== */

/* ---- El pie, en columna ---- */
.cart-modal__footer--catalogo {
    display: flex;
    flex-direction: column;
    align-items: stretch;         /* pisa el `align-items:center` del base, que
                                     encogía los hijos a su ancho de contenido */
    justify-content: flex-start;  /* el `space-between` de la fila no aplica */
    gap: 12px;
    padding: 14px 16px 16px;
}

/* ---- Bloque de totales ---- */
.cart-modal__footer--catalogo .cart-modal__totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-modal__conteo {
    font-size: 12.5px;
    color: #888;
    letter-spacing: .01em;
}

/* El total en su propia fila, etiqueta a la izquierda y valor a la derecha:
   es el número que el usuario está buscando y antes iba pegado al conteo,
   en la misma línea y con el mismo peso. */
.cart-modal__total-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.cart-modal__total-label {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.cart-modal__total-valor {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    line-height: 1.1;
    white-space: nowrap;          /* "$ 1.234.567,89" no se parte en dos */
}

/* ---- Botón + nota ---- */
.cart-modal__acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 🔴 2026-08-26 — LA DOBLE CLASE NO ES ADORNO, ES LO QUE HACE QUE ESTO APLIQUE.
   `.cart-modal__cta--wa` sola vale (0,1,0), lo mismo que `.cart-modal__cta`, que
   los DOS navbars emiten en un <style> del cuerpo — o sea despues de este
   archivo. A igual especificidad gana el ultimo, asi que el verde, el padding y
   el color de texto de aca los pisaba el `background:#111; color:#fff` generico
   y el boton se dibujaba NEGRO. Con `.cart-modal__cta.cart-modal__cta--wa` son
   (0,2,0) y el modificador gana, que es lo que un modificador tiene que hacer.
   ⚠️ Vale para las tres reglas que compiten: base, :hover y :active. */
.cart-modal__cta.cart-modal__cta--wa {
    position: relative;
    overflow: hidden;             /* recorta el brillo del hover al borde */
    display: flex;                /* ancho completo: es la acción principal del
                                     panel, no un botón entre varios */
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    background: #25D366;          /* verde oficial de WhatsApp */
    border: 1px solid #000;       /* 2026-08-26: mismo borde que los botones de auth */
    border-radius: 8px;
    color: #0b3d20 !important;    /* `.cart-modal__cta` fija `color:#fff
                                     !important`, y el blanco sobre este verde
                                     no llega a 4.5:1 de contraste */
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(11, 61, 32, .10);
    /* 🔴 Anula el `transform: scale(1.1)` del hover de `.cart-modal__cta`:
       agrandar un 10% un botón que ya ocupa todo el ancho lo hace desbordar el
       panel y tapar el borde. El `!important` es necesario porque el <style>
       de los navbars se emite DESPUÉS de este archivo y, a igual especificidad,
       ganaría el suyo. */
    transform: none !important;
    transition: background-color .18s ease,
                border-color .18s ease,
                box-shadow .18s ease,
                transform .18s ease;
}

/* El hover: en vez del simple "verde un poco más oscuro", el botón se ELEVA.
   Un desplazamiento de 1px más una sombra difusa del propio verde da la
   sensación de que el botón se despega del panel — mucho más legible como
   "esto es clickeable" que un cambio de tono que casi no se percibe. Y es
   1px, no un `scale`: no puede desbordar ni tapar nada. */
.cart-modal__cta.cart-modal__cta--wa:hover,
.cart-modal__cta.cart-modal__cta--wa:focus-visible {
    background: #1d1d1b;
    border-color: #000;
    color: #25D366 !important;    /* se invierte: el verde pasa a ser el texto */
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    /* 🔴 El transform SIGUE con !important aunque ya no desplace nada: sin el,
       el `scale(1.1)` de `.cart-modal__cta:hover` que emiten los navbars gana
       por orden de documento y el boton desborda el panel. Es el mismo motivo
       que explica el `transform` de la regla base. */
    transform: none !important;
}

/* Al presionar vuelve al ras y la sombra se hunde: el botón "responde" al
   clic. Sin esto, entre el hover y el clic no pasa nada visible. */
.cart-modal__cta.cart-modal__cta--wa:active {
    background: #000;
    border-color: #000;
    transform: none !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45);
    transition-duration: .06s;    /* el feedback del clic tiene que ser inmediato */
}

/* Brillo que cruza el botón al pasar el mouse. Es un pseudo-elemento, así que
   no agrega markup, y va detrás del texto (`z-index:0` contra el contenido en
   posición estática). Puramente decorativo. */
.cart-modal__cta--wa::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, .38) 50%,
                rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
    transition: none;
}

.cart-modal__cta--wa:hover::after {
    animation: waBrillo .65s ease-out;
}

@keyframes waBrillo {
    0%   { left: -60%; opacity: 0; }
    18%  { opacity: 1; }
    100% { left: 115%; opacity: 0; }
}

.cart-modal__cta--wa:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .45);
    outline-offset: 2px;
}

/* El icono y el texto van por encima del brillo. */
.cart-modal__cta--wa i,
.cart-modal__cta--wa span {
    position: relative;
    z-index: 1;
}

/* Mientras el endpoint arma el pedido (js/cotizacion_wa.js pone aria-busy),
   el botón deja de invitar al clic: sin brillo, sin elevación. */
.cart-modal__cta--wa[aria-busy="true"] {
    opacity: .75;
    cursor: progress;
    transform: none !important;
    box-shadow: none;
}
.cart-modal__cta--wa[aria-busy="true"]::after { animation: none; opacity: 0; }

/* Quien pidió menos movimiento, no recibe movimiento. El cambio de color y la
   sombra se conservan: son la información; la animación es el adorno. */
@media (prefers-reduced-motion: reduce) {
    .cart-modal__cta--wa,
    .cart-modal__cta--wa:hover,
    .cart-modal__cta--wa:active { transform: none !important; }
    .cart-modal__cta--wa:hover::after { animation: none; }
}

.cart-modal__cta--wa i {
    font-size: 1.2em;
    flex: 0 0 auto;
}

/* El texto en un <span> para que el icono no se separe de la primera línea
   si el botón tiene que envolver en pantallas angostas. */
.cart-modal__cta--wa span { flex: 0 1 auto; }

/* Aviso bajo el botón: "los precios son orientativos". No es decorativo —
   es lo que evita el reclamo de "en la web decía otro precio" cuando el
   vendedor pasa la cotización real.
   Es un <p>, y `p { margin: 0 !important }` es GLOBAL en este CSS, así que
   el espaciado NO puede salir de un margin: lo da el `gap` del contenedor. */
.cart-modal__nota {
    font-size: 11.5px;
    line-height: 1.45;
    color: #888;
    text-align: center;
}

/* =====================================================================
   SCROLL DEL FONDO BLOQUEADO CON EL CARRITO ABIERTO (2026-08-24)
   =====================================================================
   El panel del carrito es `position:fixed; inset:0`, pero la página de
   atrás seguía scrolleando: la rueda del mouse sobre el backdrop movía el
   catálogo, y en mobile el gesto se iba al fondo apenas la lista del
   carrito llegaba a su tope. Lo agregan y lo sacan `openModal()` /
   `closeModal()` de los DOS navbars.

   `overflow-y` y no `overflow`: `body` ya trae `overflow-x:hidden`
   (style.css:52) y no hay que pelear con eso.

   El padding compensa el ANCHO DE LA BARRA DE SCROLL, que al ocultarse
   deja libres ~15px y hace saltar toda la página hacia la derecha justo
   al abrir el modal. El JS mide ese ancho y lo escribe en la variable;
   si no hay barra (mobile, overlay scrollbars) el fallback es 0px y no
   pasa nada. `body` no define `padding-right` en ningún otro lado, así
   que acá no se pisa nada. */
body.has-cart-open {
    overflow-y: hidden;
    padding-right: var(--cart-scrollbar-gap, 0px);
}

/* =====================================================================
   AVISO DE ERROR DEL BOTÓN DE COTIZACIÓN — bloque de alerta (2026-08-24)
   =====================================================================
   Antes era una línea de 11.5px en rojo, heredando el `.cart-modal__nota`
   (que es letra chica gris para notas al pie). Con el gate de datos de
   entrega pasó a ser un aviso ACCIONABLE —"te falta la localidad, andá a
   completarla"— y a ese tamaño no se veía: el cliente clickeaba, no pasaba
   nada aparente y volvía a clickear.
   Ahora es una caja con fondo, icono y el enlace como botón sólido.

   ⚠️ Pisa tres cosas del `.cart-modal__nota` base: el `font-size:11.5px`,
   el `color:#888` y el `text-align:center`. Va DESPUÉS de él en el archivo
   y con especificidad (0,1,0) igual, así que el orden es lo que decide:
   NO mover este bloque más arriba. */
.cart-modal__nota--error,
.pedido-nota--error {
    display: none;                /* lo muestra js/cotizacion_wa.js con .is-visible */
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #f1b0aa;
    border-left: 4px solid #c0392b;   /* la barra lateral es lo que lo lee como "alerta" */
    border-radius: 10px;
    background: #fdecea;
    /* Más oscuro que el #c0392b del borde: sobre el fondo rosado, el rojo
       puro queda por debajo del contraste mínimo para texto. */
    color: #8c2c22;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 600;
    text-align: left;
}

.cart-modal__nota--error.is-visible,
.pedido-nota--error.is-visible {
    display: flex;
}

.cotizacion-error__icono {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.35;            /* alinea el icono con la PRIMERA línea del texto */
    color: #c0392b;
}

/* `flex: 1 1 170px` y no `1 1 auto`: por debajo de ~170px el texto se va solo
   a su propia fila en vez de exprimirse en una columna de tres palabras. */
.cotizacion-error__texto {
    flex: 1 1 170px;
    min-width: 0;
}

/* El enlace ocupa toda la fila y se ve como BOTÓN. Subrayado no alcanzaba:
   es la acción que resuelve el aviso, y tiene que competir con el botón verde
   de WhatsApp que está justo arriba. */
.cotizacion-error__link {
    flex: 1 1 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    background: #c0392b;
    color: #fff !important;       /* el CSS heredado pinta `a` con la primaria */
    font-weight: 700;
    font-size: 13px;
    text-decoration: none !important;
    transition: background .15s ease;
}

.cotizacion-error__link:hover,
.cotizacion-error__link:focus-visible {
    background: #a33025;
    color: #fff !important;
}

/* En pantallas bajas el panel del carrito ya pelea por alto con la lista de
   productos: se recorta el aire del pie y se achica el total. */
@media (max-height: 640px) {
    .cart-modal__footer--catalogo { gap: 8px; padding: 10px 14px 12px; }
    .cart-modal__total-valor { font-size: 18px; }
    /* `:not(--error)`: la nota al pie se puede achicar, el AVISO no. Es el
       único texto de este pie que el cliente tiene que leer sí o sí, y en una
       pantalla baja es justamente donde más fácil se pasa por alto. */
    .cart-modal__nota:not(.cart-modal__nota--error) { font-size: 11px; }
    .cart-modal__nota--error { padding: 11px 13px; gap: 8px; }
}


/* =====================================================================
   CONTI SECO — FONDO DEL MODAL DEL CARRITO (desenfoque + clic para cerrar)
   =====================================================================
   🔴 EL BACKDROP NO EXISTÍA EN EL HTML.
   `.cart-modal__backdrop` estaba definido en el `<style>` de los dos navbars
   desde siempre, pero el `<div>` nunca se puso: el panel del carrito se abría
   sobre la página tal cual, sin oscurecerla, y no había ninguna superficie
   para clickear y cerrarlo. Se agregó en los dos navbars con el atributo
   `data-cart-close`, que es el que ya escucha el JS del modal.

   Los selectores llevan `.cart-modal.is-open` adelante para ganarle por
   ESPECIFICIDAD (0,3,0 contra 0,1,0) a la regla base de los navbars, cuyo
   `<style>` se emite después de este archivo. Sin ese prefijo habría que
   recurrir a `!important`.
   ===================================================================== */

.cart-modal.is-open .cart-modal__backdrop {
    /* Menos negro que el .5 original: con el desenfoque encima, medio negro
       tapa la página en vez de sugerirla. La idea es que se vea que el sitio
       sigue ahí, fuera de foco. */
    background: rgba(17, 17, 17, .38);

    -webkit-backdrop-filter: blur(7px) saturate(112%);
    backdrop-filter: blur(7px) saturate(112%);

    /* Aparece con el modal en vez de aparecer de golpe. */
    animation: cartBackdropIn .22s ease-out both;
    cursor: pointer;              /* señal de que clickear acá cierra */
}

/* Fallback: si el navegador no soporta `backdrop-filter`, no hay desenfoque y
   un velo del 38% deja el fondo demasiado presente. Se vuelve al velo denso.
   `@supports not` está soportado donde importa; los que no lo entienden
   tampoco entienden la regla, y les queda el .38 — legible igual. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cart-modal.is-open .cart-modal__backdrop {
        background: rgba(17, 17, 17, .58);
    }
}

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

/* El panel entra deslizándose desde la derecha, que es de donde "viene".
   Antes aparecía de golpe porque `.cart-modal` alterna `display:none/block` y
   eso no admite transición — una `animation`, en cambio, sí corre al aparecer. */
.cart-modal.is-open .cart-modal__dialog {
    animation: cartDialogIn .26s cubic-bezier(.22, .8, .28, 1) both;
}

@keyframes cartDialogIn {
    from { transform: translateX(24px); opacity: .4; }
    to   { transform: translateX(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-modal.is-open .cart-modal__backdrop,
    .cart-modal.is-open .cart-modal__dialog { animation: none; }
}

/* =====================================================================
   CONFIRMACIÓN DE COTIZACIÓN — "tu solicitud fue enviada"  (2026-08-25)
   =====================================================================
   Desde esta fecha pedir una cotización CIERRA el carrito: las filas de
   `cart_ecommerce` pasan a 'Cotizado' en la misma transacción que registra
   la solicitud (`includes/cotizacion_wa.php`). Sin un acuse, el cliente
   vuelve de WhatsApp, ve el carrito vacío y no sabe si su pedido salió o
   si lo perdió — el carrito vacío tiene que LEERSE COMO ÉXITO.

   Y es lo que reemplaza al re-clic: las seis solicitudes idénticas del
   2026-08-24 se registraron porque el botón no daba ninguna señal de haber
   funcionado, así que se lo volvía a apretar.

   El marcado lo arma `js/cotizacion_wa.js` con createElement y lo cuelga de
   `<body>`: el botón vive en TRES lugares (los dos navbars y cart.php) y
   tres copias del mismo bloque se desincronizan.

   ⚠️ `z-index: 10000` — un punto por encima del `.cart-modal` de los
   navbars (9999, `navbar.php:940`). Esta confirmación aparece JUSTO cuando
   ese modal está abierto, así que quedar debajo la haría invisible.
   ⚠️ El espaciado sale del `gap` del flex y nunca de márgenes:
   `p { margin: 0 !important }` es global en este archivo (§9.2).
   ===================================================================== */

.cotiz-ok {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 17, 17, .55);
    -webkit-backdrop-filter: blur(6px) saturate(110%);
    backdrop-filter: blur(6px) saturate(110%);
    animation: cotizOkFondoIn .2s ease-out both;
}

.cotiz-ok__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 380px;
    padding: 30px 26px 26px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    text-align: center;
    animation: cotizOkPanelIn .26s cubic-bezier(.22, .8, .28, 1) both;
}

/* Verde de WhatsApp y no el rojo de la marca, por lo mismo que el botón que
   dispara todo esto: es la señal de que el circuito terminó bien. */
.cotiz-ok__icono {
    font-size: 46px;
    line-height: 1;
    color: #25d366;
}

.cotiz-ok__titulo {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

.cotiz-ok__texto {
    font-size: 14px;
    line-height: 1.45;
    color: #555;
}

/* La segunda línea explica el carrito vacío, que es la parte que el cliente
   NO espera. Va más chica: es contexto, no el mensaje principal. */
.cotiz-ok__nota {
    font-size: 12.5px;
    line-height: 1.45;
    color: #777;
}

.cotiz-ok__link {
    color: var(--color-primario);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.cotiz-ok__cta {
    width: 100%;
    margin-top: 4px;
    padding: 13px 18px;
    border: 0;
    border-radius: 9px;
    background: #25d366;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.cotiz-ok__cta:hover {
    background: #1fb855;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
}

.cotiz-ok__cta:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .2);
    transition-duration: .06s;
}

.cotiz-ok__cta:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .45);
    outline-offset: 2px;
}

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

@keyframes cotizOkPanelIn {
    from { transform: translateY(14px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);      opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cotiz-ok,
    .cotiz-ok__panel { animation: none; }
    .cotiz-ok__cta:hover { transform: none; }
}