@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

html {
  font-family: "Poppins", sans-serif !important;
  background-color: #fff;
  width: 100% !important;
  overflow-x: hidden;
}

body {
  font-family: "Poppins", sans-serif !important;
  width: 100% !important;
  overflow-x: hidden;
}

#spiderweb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: auto; /* Allow clicks to pass through */
}

#spiderweb canvas {
  pointer-events: auto; /* Allow clicks to pass through */
}

#head-renta {
  position: relative;
  overflow: hidden;
}

.morado {
  color: #363352 !important;
}

.lato {
  font-family: "Lato", sans-serif;
}

.raleway {
  font-family: "Raleway", sans-serif;
}

.btn-orange {
  background-color: #e16221;
  color: white;
  width: fit-content;
}

.btn-orange:hover {
  background-color: #e16121ce;
  color: white;
}

.card-service {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 10px 8px 6px #00000029;
  border: 3px solid #008589;
  border-radius: 44px;
  opacity: 1;
}

.cards-sync {
  transition: height 0.3s ease !important;
  overflow: hidden;
}

.img-up {
  margin-top: -70px;
  transition: all 0.5s ease-in-out;
}

.bg-nav2 {
  background-color: #ffffff33 !important;
  border-radius: 100px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: white !important;
  padding: 8px 15px 8px 25px;
  width: 100%;
  transition: background-color 0.5s ease;
  /* suave */
}

.btn-contact {
  background-color: #02aaaf !important;
}

.btn-contact:hover {
  background-color: #249a9e !important;
}

#portada {
  position: relative;
}

.carrusel-home {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  z-index: 15;
  left: auto;
}

.carrusel-home button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  background-color: transparent !important;
  border: 1px solid white !important;
  margin: 5px 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  background-clip: padding-box;
}

.carrusel-home .active {
  background-color: #008589 !important;
  border-color: white;
  opacity: 1;
}
/* Fade imágenes */
.carousel.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

.carousel.carousel-fade .carousel-item.active,
.carousel.carousel-fade .carousel-item-next.carousel-item-start,
.carousel.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

.carousel.carousel-fade .active.carousel-item-start,
.carousel.carousel-fade .active.carousel-item-end {
  opacity: 0;
}

.carousel.carousel-fade .carousel-item {
  transform: none !important;
}

/* Fade textos */
.mueve {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-item.active .mueve {
  opacity: 1;
  transition-delay: 0.05s; /* EL ARREGLO */
}

.card-head {
  background: #ffffff33 0% 0% no-repeat padding-box;
  mix-blend-mode: normal;
  opacity: 1;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex !important;
}

#servicios {
  background-image: url("../img/serv_right.png"), url("../img/serv_right.png"),
    url("../img/serv_right.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left top, right center, left bottom;
  background-size: 33%, 33%, 33%;
}

.aqua {
  color: #008589;
}

#cobertura {
  background-image: url("../img/serv_right.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 38%;
}

.link-blue {
  color: #008589;
  text-decoration: none;
}

.border-rl {
  border-left: 2px solid black;
  border-right: 2px solid black;
  margin: 0 3rem;
  padding-left: 3rem;
}

#foot {
  background-color: #2c8f94;
  color: #ffffff;
  background-image: url("../img/mallas.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 99999;
}

#foot2 {
  background-color: #0b2e42;
  color: #faf8f5;
  background-image: url("../img/mallas.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 99999;
}

.img-renta {
  background-image: url("../img/fondos_ralet.png");
}

.img-about {
  background-image: url("../img/fondos_ralet.png");
}

.img-venta {
  background-image: url("../img/fondos_ralet.png");
}

.img-contact {
  background-image: url("../img/fondos_ralet.png");
}

.img-servTec {
  background-image: url("../img/fondos_ralet.png");
}

#head-renta {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 20vh 0 10vh 0;
  color: #ffffff;
  border: 0;
}

#rentaM {
  background-image: url("../img/serv_right.png"), url("../img/serv_right.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right center;
  background-size: 33%, 33%;
}

#rentaM2 {
  background-image: url("../img/serv_right.png"), url("../img/serv_right.png"),
    url("../img/serv_right.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right top, left center, right bottom;
  background-size: 33%, 33%, 33%;
}

.ulrazones {
  list-style: none;
  padding-left: 20px;
}

.ulrazones li {
  position: relative;
}

.ulrazones li::before {
  content: "•";
  position: absolute;
  left: -15px;
  top: -15px;
  /* <-- mueve el marcador a gusto */
  color: #e16221;
  font-size: 35px;
}

.carrusel-rentas {
  position: absolute;
  bottom: -5%;
  right: 50%;
  /* transform: translateY(-50%); */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  z-index: 15;
  left: auto;
}

.carrusel-rentas button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  background-color: transparent !important;
  border: 1px solid #008589 !important;
  margin: 5px 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  background-clip: padding-box;
}

.carrusel-rentas .active {
  background-color: #008589 !important;
  border-color: #008589;
  opacity: 1;
}

.inpblue {
  border: 2px solid #008589;
}

.inpblue2::placeholder {
  color: #faf8f5;
}

/* === Igualar la altura SOLO de las cards dentro de equal-cards === */
.equal-cards .col-md-4 {
  display: flex;
}

.equal-cards .card-value {
  height: 100% !important;
}

.card-value {
  text-align: center;
  padding: 16% 0;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.card-value img {
  width: 60px;
  margin-bottom: 1rem;
}

.card-value > p {
  display: none;
}

.card-value:hover {
  text-align: start;
  padding: 1rem;
  background-color: #02aaaf;
}

.card-value:hover > div {
  display: flex;
  align-items: center;
  color: white;
}

.card-value:hover img {
  width: 40px;
  margin-right: 1rem;
  margin-bottom: 0;
}

.card-value:hover > p {
  display: block;
  color: white;
  padding-top: 1rem;
  margin-bottom: 0;
}

/* se dejará el JS manejar alturas dinámicas */
.cards-sync {
  overflow: hidden;
}

.btn-aqua {
  background-color: #008589;
  color: white;
}

.btn-aqua:hover,
.btn-hover:active {
  background-color: #008489de;
  color: white;
}

#listos {
  background-image: url("../img/serv_right.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 33%;
}

/* Hacemos que la fila sea flex para alinear columnas */
.rowlisto {
  display: flex !important;
  align-items: flex-start !important;
  /* se alinea por la parte superior */
}

/* La columna del form-wrapper define la altura hasta textarea */
.form-wrapper {
  display: block !important;
}

.cards-sync {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* centra verticalmente */
  height: 100%;
  /* asegúrate que ocupe toda la altura que le asigna JS */
}

.cards-sync > div,
.cards-sync > p {
  margin: 0 auto;
  /* opcional: centra horizontalmente también */
}

.cards-sync:hover {
  text-align: start;
  display: block;
  transition: height 0.3s ease !important;
  /* ajusta duración y tipo de easing */
}

.card-serv {
  background: #008589 0% 0% no-repeat padding-box;
  box-shadow: 10px 8px 6px #00000029;
  border: 3px solid #008589;
  border-radius: 44px;
  color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
  /* centra verticalmente */
  height: 100%;
  text-align: center;
  /* opcional si quieres centrar todo horizontal */
}

.card-serv .imgServC {
  display: block;
  margin-bottom: 1rem;
}

.card-serv .imgServC2 {
  display: none;
}

.card-serv p {
  display: none;
}

.card-serv:hover {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 10px 8px 6px #00000029;
  border: 3px solid #008589;
  border-radius: 44px;
  color: black;
}

.card-serv:hover .imgServC {
  display: none;
}

.card-serv:hover .imgServC2 {
  display: block;
  margin-bottom: 1rem;
  width: 70%;
  margin-left: 15%;
}

.card-serv:hover p {
  display: block;
}

/* --- POSICIONAR PREV Y NEXT A LOS LADOS DE LOS PUNTOS --- */
.carousel-control-prev {
  left: calc(50% - 140px) !important; /* IZQUIERDA DE LOS PUNTOS */
  top: auto !important;
  bottom: -8%; /* mismo nivel que tus puntos */
  transform: translateY(50%); /* centrado vertical respecto a los puntos */
}

.carousel-control-next {
  right: calc(50% - 80px) !important; /* DERECHA DE LOS PUNTOS */
  top: auto !important;
  bottom: -8%;
  transform: translateY(50%);
}

.carousel-control-prev,
.carousel-control-next {
  width: 30px;
  height: 30px;
  background: rgba(0, 255, 251, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%); /* posición estable */
  transform-origin: center; /* evita movimientos raros */
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
    scale 0.3s ease-in-out; /* escalado separado */
}

/* Hover sin mover la posición */
.carousel-control-prev:hover,
.carousel-control-next:hover {
  background: rgba(0, 255, 200, 0.45);
  scale: 1.1; /* solo escalar, sin tocar el translate */
}

/* Iconos blancos */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}

@media (max-width: 3060px) {
}

@media (max-width: 1280px) {
}

/* LG */
@media (max-width: 1199px) {
}

/* MD */
@media (max-width: 991px) {
}

/* SM */
@media (max-width: 767px) {
  .showPhone {
    display: block !important;
  }

  .hiddenPhone {
    display: none !important;
  }

  .form-wrapper {
    height: auto !important;
    max-height: 800px !important;
  }

  .img-hom {
    height: 100vh !important;
  }

  .bg-nav2 {
    border-radius: 20px !important;
    padding-left: 1rem !important;
    margin: 0 1rem;
  }

  .csTop {
    margin-top: 5rem !important;
  }

  .csTop:first-child {
    margin-top: 0 !important;
  }

  .img100w {
    width: 100% !important;
  }

  .border-rl {
    margin: 0 !important;
    border: none !important;
    padding-left: 0 !important;
  }

  .centerPhone {
    text-align: center !important;
  }

  .logo_foot {
    width: 250px !important;
    margin-bottom: 1rem;
  }

  .img-renta,
  .img-servTec,
  .img-about {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .reImg {
    width: 180px !important;
    margin-right: 1rem !important;
  }

  .ml-0P {
    margin-left: 0.8rem !important;
  }

  .carrusel-rentas2 {
    right: 40% !important;
  }

  .carrusel-rentas {
    right: 45%;
  }

  /* --- POSICIONAR PREV Y NEXT A LOS LADOS DE LOS PUNTOS --- */
  .carousel-control-prev {
    left: calc(50% - 140px) !important; /* IZQUIERDA DE LOS PUNTOS */
    top: auto !important;
    bottom: -4%; /* mismo nivel que tus puntos */
    transform: translateY(50%); /* centrado vertical respecto a los puntos */
  }

  .carousel-control-next {
    right: calc(50% - 120px) !important; /* DERECHA DE LOS PUNTOS */
    top: auto !important;
    bottom: -4%;
    transform: translateY(50%);
  }

  .leftC {
    left: calc(50% + 120px) !important;
  }
}

/* XS */
@media (max-width: 575px) {
}

/* XS */
@media (max-width: 330px) {
}

.navbar-nav .dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

.dropdown-menu {
  background-color: #d7631a;
  /* Orange background */
  border: none;
}

.dropdown-item {
  color: white !important;
}

.dropdown-item:hover {
  background-color: #d37941;
  /* Lighter orange on hover */
}

.navbar-nav .nav-link.active {
  border-bottom: 4px solid #ff8c00;
  /* Thick orange line */
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: #ffa500 !important;
  /* Lighter orange for active */
  color: white !important;
}