body {
   min-width: 300px;
}

.cursor_pointer {
   cursor: pointer;
}

.quitar_texto_decoracion {
   text-decoration: none;
}

.landing-page-hero {
   background-color: #ffffff;
   display: flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
}

.landing-page-hero .div {
   background-color: #ffffff;
   /* width: 1440px; */
   width: 100%;
   /* height: 7755px; */
   position: relative;
}

.landing-page-hero .footer {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   justify-content: center;
   gap: 32px;
   /* padding: 80px 150px 40px; */
   padding-top: 80px;
   /* position: absolute;
   top: 7299px;
   left: 0; */
   background-color: var(--lightsurface-700);
}

.landing-page-hero .cols {
   display: flex;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .logo {
   display: flex;
   flex-direction: column;
   /* width: 364px; */
   width: 100%;
   align-items: flex-start;
   gap: 24px;
   position: relative;
}

.landing-page-hero .MEASISTO-blanco {
   position: relative;
   width: 191.91px;
   height: 32px;
   object-fit: cover;
}

.landing-page-hero .social {
   display: flex;
   height: 24px;
   align-items: center;
   gap: 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
}

.landing-page-hero .icon {
   display: flex;
   width: 24px;
   align-items: center;
   gap: 8px;
   position: relative;
   cursor: pointer;
}

.landing-page-hero .img {
   position: relative;
   width: 24px;
   height: 24px;
}

.landing-page-hero .actions {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .button {
   all: unset;
   box-sizing: border-box;
   display: flex;
   width: 164px;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 24px;
   position: relative;
   flex: 0 0 auto;
   background-color: #ffffff;
   border-radius: 96px;
   overflow: hidden;
}

.landing-page-hero .div-2 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   position: relative;
   flex: 0 0 auto;
   cursor: pointer;
}

.landing-page-hero .div-client-testimony {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   position: relative;
   flex: 0 0 auto;
   cursor: pointer;
}

.landing-page-hero .img-2 {
   position: relative;

   width: 20px;
   height: 20px;
}

.landing-page-hero .text-wrapper {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-medium-font-family);
   font-weight: var(--body-large-16-medium-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--body-large-16-medium-font-size);
   text-align: center;
   letter-spacing: var(--body-large-16-medium-letter-spacing);
   line-height: var(--body-large-16-medium-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-medium-font-style);
}

.landing-page-hero .container-wrapper {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 24px;
   position: relative;
   flex: 0 0 auto;
   background-color: #ffffff;
   border-radius: 96px;
   overflow: hidden;
}

.landing-page-hero .div-3 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   flex: 1;
   flex-grow: 1; /* Ocupa todo el espacio disponible */
}

.landing-page-hero .div-4 {
   display: flex;
   gap: 8px;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
   align-items: center;
   position: relative;
}

.landing-page-hero .text-wrapper-2 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--heading-h5-large-18-bold-font-family);
   font-weight: var(--heading-h5-large-18-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h5-large-18-bold-font-size);
   letter-spacing: var(--heading-h5-large-18-bold-letter-spacing);
   line-height: var(--heading-h5-large-18-bold-line-height);
   font-style: var(--heading-h5-large-18-bold-font-style);
}

.landing-page-hero .div-5 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .text-wrapper-3 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-medium-font-family);
   font-weight: var(--body-large-16-medium-font-weight);
   color: var(--lightfonts-200);
   font-size: var(--body-large-16-medium-font-size);
   letter-spacing: var(--body-large-16-medium-letter-spacing);
   line-height: var(--body-large-16-medium-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-medium-font-style);
}

.landing-page-hero .item {
   position: relative;
   align-self: stretch;
   width: 100%;
   height: 24px;
}

.landing-page-hero .bottom {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   gap: 24px;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .div-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   position: relative;
   flex: 1;
   flex-grow: 1;
}

.landing-page-hero .p {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--body-small-14-regular-font-family);
   font-weight: var(--body-small-14-regular-font-weight);
   color: var(--lightwhitewhite);
   font-size: var(--body-small-14-regular-font-size);
   text-align: center;
   letter-spacing: var(--body-small-14-regular-letter-spacing);
   line-height: var(--body-small-14-regular-line-height);
   font-style: var(--body-small-14-regular-font-style);
}

.landing-page-hero .section {
   height: 477px;
   top: 6822px;
   background-color: #ffffff;
   position: absolute;
   width: 1440px;
   left: 0;
}

.landing-page-hero .CTA {
   position: relative;
   width: 100%;
   height: 333px;
   /* top: 48px;
   left: 150px; */
   background-color: var(--lightsurface-900);
   border-radius: 32px;
   max-width: 1520px;
   overflow: hidden;
}

.landing-page-hero .tamano-banner {
   width: 100%;
   display: flex;
   justify-content: center;
}

.landing-page-hero .overlap-group {
   /* height: 333px;
   background-image: url(https://c.animaapp.com/mcm8f4anrMsY4w/img/mask-group.png);
   background-size: 100% 100%; */

   height: 333px;
   background-image: url("/image/Ellipse_5.png");
   background-repeat: no-repeat; /* Prevents image repetition */
   background-position: center bottom; /* Centers horizontally and aligns to bottom */
}

.landing-page-hero .overlap-group_ellipse_4 {
   height: 333px;
   background-image: url("/image/Ellipse_4.png");
   background-repeat: no-repeat; /* Prevents image repetition */
   background-position: center bottom; /* Centers horizontally and aligns to bottom */
}

.landing-page-hero .overlap-group_ellipse_3 {
   height: 333px;
   background-image: url("/image/Ellipse_3.png");
   background-repeat: no-repeat; /* Prevents image repetition */
   background-position: center bottom; /* Centers horizontally and aligns to bottom */
}

.landing-page-hero .overlap-group_img_celular {
   height: 333px;
   background-image: url("/image/app_solicitud_camino_destino_1.png");
   background-repeat: no-repeat;
   background-position: 100% bottom;
   background-size: contain;
}

.landing-page-hero .overlap-group_img_celular1 {
   height: 333px;
   background-image: url("/image/home_variacion_servicio_activo1.png");
   background-repeat: no-repeat;
   background-position: calc(100% - 150px) bottom;
   background-size: contain;
}

.landing-page-hero .title {
   display: flex;
   flex-direction: column;
   /* width: 533px; */
   width: 100%;
   justify-content: center;
   gap: 25px;
   /* top: 64px;
   left: 24px;
   align-items: center;
   position: relative; */

   padding: 25px;
   padding-top: 60px;
}

.landing-page-hero .listo-para {
   position: relative;
   align-self: stretch;
   margin-top: -1px;
   font-family: var(--heading-h2-large-32-bold-font-family);
   font-weight: var(--heading-h2-large-32-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h2-large-32-bold-font-size);
   letter-spacing: var(--heading-h2-large-32-bold-letter-spacing);
   line-height: var(--heading-h2-large-32-bold-line-height);
   font-style: var(--heading-h2-large-32-bold-font-style);
}

.landing-page-hero .text-wrapper-4 {
   position: relative;
   /* width: 533px; */
   width: 100%;
   font-family: var(--heading-h4-large-20-bold-font-family);
   font-weight: var(--heading-h4-large-20-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h4-large-20-bold-font-size);
   letter-spacing: var(--heading-h4-large-20-bold-letter-spacing);
   line-height: var(--heading-h4-large-20-bold-line-height);
   font-style: var(--heading-h4-large-20-bold-font-style);
}

.landing-page-hero .button-wrapper {
   display: flex;
   align-self: stretch;
   width: 100%;
   align-items: center;
   gap: 16px;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .button-2 {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 24px;
   position: relative;
   flex: 0 0 auto;
   background-color: var(--lightprimaryyellow-500);
   border-radius: 96px;
   overflow: hidden;
   cursor: pointer;
}

.landing-page-hero .section-2 {
   height: 560px;
   top: 6262px;
   background-color: #ffffff;
   position: absolute;
   width: 1440px;
   left: 0;
}

.landing-page-hero .dots {
   display: inline-flex;
   align-items: center;
   gap: 8px;

   justify-content: center;
   width: 100%;
   /* position: absolute;
   top: 440px;
   left: 708px; */
}

.landing-page-hero .dot {
   position: relative;
   width: 8px;
   height: 8px;
   /* background-color: var(--lightprimaryyellow-500); */
   background-color: var(--lightsurface-200);
   border-radius: 4px;
}

.landing-page-hero .dot-active {
   background-color: var(--lightprimaryyellow-500) !important;
}

.landing-page-hero .dot-2 {
   position: relative;
   width: 8px;
   height: 8px;
   background-color: var(--lightsurface-200);
   border-radius: 4px;
}

/* inicio testimonio */
.landing-page-hero .slide {
   /* position: absolute;
   width: 1140px;
   height: 240px;
   top: 184px;
   left: 150px;
   overflow-x: scroll; */
   width: 100%;
   overflow-x: scroll;
   margin-top: 15px;
}

.landing-page-hero .slide::-webkit-scrollbar {
   width: 0;
   display: none;
}

.landing-page-hero .testimonials {
   /* display: inline-flex;
   align-items: flex-start;
   gap: 16px;
   position: relative; */
   display: inline-flex;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   width: 100%;
   justify-content: center;
}

.landing-page-hero .testimonial {
   /* display: inline-flex;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   flex: 0 0 auto; */
   display: inline-flex;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   flex: 0 0 auto;
   width: 450px; /* Base width, will adjust with media queries */
}

.landing-page-hero .img-3 {
   position: relative;
   width: 64px;
   height: 64px;
}

.landing-page-hero .bubble {
   /* position: relative;
   width: 364px;
   height: 216px; */
   position: relative;
   width: 100%;
   max-width: 350px; /* Limit bubble width, adjustable for responsiveness */
}

.landing-page-hero .overlap-group-2 {
   /* position: relative;
   width: 379px;
   height: 216px;
   left: -15px; */
   position: relative;
   width: 100%;
   height: auto; /* Fully responsive height */
   left: -15px;
   background-color: var(--lightsurface-100); /* Gray background */
   border-radius: 20px;
   padding: 16px;
   box-sizing: border-box; /* Ensure padding doesn't add to width */
   position: relative; /* Base for polygon positioning */
}

.landing-page-hero .frame {
   /* display: flex;
   width: 364px;
   align-items: flex-start;
   gap: 8px;
   padding: 16px;
   position: absolute;
   top: 0;
   left: 15px;
   background-color: var(--lightsurface-100);
   border-radius: 20px;
   overflow: hidden; */
   display: flex;
   width: 100%; /* Fully responsive width */
   align-items: flex-start;
   gap: 8px;
   padding: 0; /* Padding handled by overlap-group-2 */
   position: relative;
   top: 0;
   left: 0;
   background-color: transparent;
   border-radius: 0;
   overflow: hidden;
   height: auto; /* Adapt to content height */
}

.landing-page-hero .div-3 {
   display: flex;
   flex-direction: column;
   width: 100%; /* Ensure full width within frame */
   gap: 8px;
}

.landing-page-hero .icons-lucide-quote {
   position: relative;
   width: 32px;
   height: 32px;
}

.landing-page-hero .text-wrapper-5 {
   margin: 0;
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
   overflow-wrap: break-word;
   width: 100%; /* Ensure text takes full available width */
}

.landing-page-hero .text-wrapper-6 {
   margin: 0;
   font-size: 14px;
   font-weight: bold;
   width: 100%; /* Ensure name wraps if needed */
}

.landing-page-hero .polygon {
   position: absolute;
   width: 20px;
   height: 20px;
   bottom: 42%; /* Position from bottom */
   left: -17px; /* Position slightly outside to point left */
   /* transform: rotate(
      270deg
   ); */ /* Rotate to point left (adjust if SVG needs different orientation) */
}

.landing-page-hero .overlap-group-wrapper {
   height: 240px;
   position: relative;
   width: 364px;
   height: auto;
   width: 100%;
}

.landing-page-hero .overlap-group-3 {
   position: relative;
   width: 379px;
   height: 240px;
   left: -15px;
   width: 100%;
   height: auto;
   left: 0;
}

.landing-page-hero .bubble-2 {
   height: 192px;
   position: relative;
   width: 364px;
   height: auto;
   width: 100%;
}

.landing-page-hero .overlap-group-4 {
   position: relative;
   width: 379px;
   height: 192px;
   left: -15px;
   width: 100%;
   height: auto;
   left: 0;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
   .landing-page-hero .testimonial {
      width: 100%; /* Full width on smaller screens */
      max-width: 350px; /* Limit to avoid excessive stretching */
   }

   .landing-page-hero .img-3 {
      width: 48px;
      height: 48px;
   }

   .landing-page-hero .text-wrapper-5 {
      font-size: 14px; /* Smaller font on mobile */
   }

   .landing-page-hero .text-wrapper-6 {
      font-size: 12px; /* Smaller name font on mobile */
   }

   .landing-page-hero .polygon {
      /* width: 15px;
      height: 15px;
      bottom: 8px;
      left: -15px; */
   }
}

@media (max-width: 480px) {
   .landing-page-hero .testimonial {
      width: 100%;
      max-width: 300px; /* Further reduce on very small screens */
   }

   .landing-page-hero .img-3 {
      width: 40px;
      height: 40px;
   }

   .landing-page-hero .text-wrapper-5 {
      font-size: 12px; /* Even smaller font */
   }

   .landing-page-hero .text-wrapper-6 {
      font-size: 10px; /* Smaller name font */
   }

   .landing-page-hero .polygon {
      /*  width: 12px;
      height: 12px;
      bottom: 6px;
      left: -12px; */
   }
}
.landing-page-hero .text-wrapper-5 {
   position: relative;
   align-self: stretch;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.landing-page-hero .text-wrapper-6 {
   position: relative;
   align-self: stretch;
   font-family: var(--body-large-16-semibold-font-family);
   font-weight: var(--body-large-16-semibold-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--body-large-16-semibold-font-size);
   letter-spacing: var(--body-large-16-semibold-letter-spacing);
   line-height: var(--body-large-16-semibold-line-height);
   font-style: var(--body-large-16-semibold-font-style);
}

/* fin testimio */

.landing-page-hero .title-2 {
   /* display: flex;
   width: 1140px;
   align-items: center;
   justify-content: center;
   gap: 8px;
   position: absolute;
   top: 96px;
   left: 150px; */

   display: flex;
   width: 100%;
   justify-content: center;
   gap: 8px;
   flex: 0 0 auto;
   align-items: center;
   position: relative;

   margin-top: 70px;
}

.landing-page-hero .text-wrapper-7 {
   position: relative;
   width: 100%;
   margin-top: -1px;
   font-family: var(--heading-h2-large-32-bold-font-family);
   font-weight: var(--heading-h2-large-32-bold-font-weight);
   color: var(--lightfonts-800);
   font-size: var(--heading-h2-large-32-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h2-large-32-bold-letter-spacing);
   line-height: var(--heading-h2-large-32-bold-line-height);
   font-style: var(--heading-h2-large-32-bold-font-style);
}

.landing-page-hero .frame-2 {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: flex-end;
   gap: 16px;
   margin-bottom: 50px;
   margin-top: 15px;
   /* padding: 0px 150px; */
   /* position: absolute;
   top: 472px;
   left: 0; */
}

.landing-page-hero .icons-lucide-chevron-wrapper {
   display: flex;
   flex-direction: column;
   width: 48px;
   height: 48px;
   align-items: center;
   justify-content: center;
   padding: 8px;
   position: relative;
   background-color: var(--lightsurface-100);
   border-radius: 64px;
}

.landing-page-hero .section-3 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 48px;
   padding: 96px 150px 48px;
   top: 5750px;
   background-color: #ffffff;
   position: absolute;
   width: 1440px;
   left: 0;
}

.landing-page-hero .container {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .title-3 {
   display: flex;
   flex-direction: column;
   /* width: 364px; */
   width: 100%;
   justify-content: center;
   gap: 8px;
   align-items: center;
   position: relative;
}

.landing-page-hero .text-wrapper-8 {
   position: relative;
   align-self: stretch;
   margin-top: -1px;
   font-family: var(--heading-h2-large-32-bold-font-family);
   font-weight: var(--heading-h2-large-32-bold-font-weight);
   color: var(--lightsurface-900);
   font-size: var(--heading-h2-large-32-bold-font-size);
   letter-spacing: var(--heading-h2-large-32-bold-letter-spacing);
   line-height: var(--heading-h2-large-32-bold-line-height);
   font-style: var(--heading-h2-large-32-bold-font-style);
}

.landing-page-hero .information {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 24px;
   position: relative;
   flex: 1;
   flex-grow: 1;
}

.landing-page-hero .FAQ {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .heading {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   padding: 8px 0px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .text-wrapper-9 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--body-large-16-semibold-font-family);
   font-weight: var(--body-large-16-semibold-font-weight);
   color: var(--lightfonts-900);
   font-size: var(--body-large-16-semibold-font-size);
   letter-spacing: var(--body-large-16-semibold-letter-spacing);
   line-height: var(--body-large-16-semibold-line-height);
   font-style: var(--body-large-16-semibold-font-style);
}

.landing-page-hero .card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   padding: 24px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
   background-color: var(--lightsurface-100);
   border-radius: 20px;
}

.landing-page-hero .item-2 {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .text-wrapper-10 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.landing-page-hero .heading-wrapper {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   padding: 8px 0px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .section-4 {
   height: max-content;
   background-color: var(--lightsurface-100);
   /* top: 4926px;
   position: absolute;
   left: 0; */
   width: 100%;
}

.landing-page-hero .control {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: flex-end;
   gap: 16px;
   margin-bottom: 50px;
   margin-top: 15px;
   /* padding: 0px 150px;
   position: absolute;
   top: 680px;
   left: 0; */
}

.landing-page-hero .img-wrapper {
   display: flex;
   flex-direction: column;
   width: 48px;
   height: 48px;
   align-items: center;
   justify-content: center;
   padding: 8px;
   position: relative;
   background-color: #ffffff;
   border-radius: 64px;
}

.landing-page-hero .dots-2 {
   /* position: absolute;
   top: 648px;
   left: 708px; */
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.landing-page-hero .center-dots-2 {
   width: 100%;
   text-align: center;
}

.landing-page-hero .plans-wrapper {
   width: 100%;
   /* top: 288px;
   position: absolute;
   left: 150px; */
   overflow-x: scroll;
   margin-top: 15px;
   align-items: stretch;
   text-align: center;
}

.landing-page-hero .plans-wrapper::-webkit-scrollbar {
   width: 0;
   display: none;
}

.landing-page-hero .plans {
   display: inline-flex;
   /* align-items: flex-start; */
   gap: 16px;
   position: relative;
   top: 8px;
   overflow: scroll;
   align-items: stretch; /* Hace que todos los .plan tengan la misma altura del más alto */
}

.landing-page-hero .plans::-webkit-scrollbar {
   width: 0;
   display: none;
}

.landing-page-hero .plan {
   display: flex;
   width: 382px;
   /* align-items: flex-start; */
   gap: 16px;
   padding: 24px;
   position: relative;
   background-color: #ffffff;
   border-radius: 24px;
   flex: 1; /* Permite que se estire al tamaño del más alto */
}

.landing-page-hero .title-4 {
   display: flex;
   width: 239px;
   gap: 8px;
   align-items: center;
   position: relative;
}

.landing-page-hero .text-wrapper-11 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--heading-h5-large-18-bold-font-family);
   font-weight: var(--heading-h5-large-18-bold-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--heading-h5-large-18-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h5-large-18-bold-letter-spacing);
   line-height: var(--heading-h5-large-18-bold-line-height);
   white-space: nowrap;
   font-style: var(--heading-h5-large-18-bold-font-style);
}

.landing-page-hero .price {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .div-6 {
   display: inline-flex;
   align-items: center;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .text-wrapper-12 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-semibold-font-family);
   font-weight: var(--body-large-16-semibold-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--body-large-16-semibold-font-size);
   letter-spacing: var(--body-large-16-semibold-letter-spacing);
   line-height: var(--body-large-16-semibold-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-semibold-font-style);
}

.landing-page-hero .text-wrapper-13 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-regular-font-style);
}

.landing-page-hero .tag {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 4px 8px;
   position: relative;
   flex: 0 0 auto;
   background-color: var(--lightsecondarypink-500);
   border-radius: 8px;
}

.landing-page-hero .text-wrapper-14 {
   margin-top: -1px;
   font-weight: var(--body-caption-12-medium-font-weight);
   color: var(--lightfonts-100);
   text-align: center;
   position: relative;
   width: fit-content;
   font-family: var(--body-caption-12-medium-font-family);
   font-size: var(--body-caption-12-medium-font-size);
   letter-spacing: var(--body-caption-12-medium-letter-spacing);
   line-height: var(--body-caption-12-medium-line-height);
   white-space: nowrap;
   font-style: var(--body-caption-12-medium-font-style);
}

.landing-page-hero .list {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   position: relative;
   align-self: stretch;
   width: 100%;
   /* flex: 0 0 auto; */
   flex: 1 0 auto; /* Crece según el contenido sin límite */
}

.landing-page-hero .text-wrapper-15 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-400);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.landing-page-hero .item-3 {
   display: inline-flex;
   align-items: flex-start;
   gap: 8px;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .text-wrapper-16 {
   width: 274px;
   position: relative;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-400);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.landing-page-hero .button-3 {
   all: unset;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 24px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
   border-radius: 96px;
   overflow: hidden;
   border: 1px solid;
   border-color: #a7a7a7;
   margin-top: auto;
}

.landing-page-hero .div-7 {
   display: inline-flex;
   gap: 8px;
   flex: 0 0 auto;
   align-items: center;
   position: relative;
}

.landing-page-hero .text-wrapper-17 {
   width: fit-content;
   white-space: nowrap;
   position: relative;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-400);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.btn-inactive-service {
   background-color: #e5e5e5 !important;
   cursor: default !important;
}

.landing-page-hero .tabs {
   display: flex;
   /* width: 400px; */
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 4px 8px;
   /* position: absolute;
   top: 216px;
   left: 521px; */
   background-color: #ffffff;
   border-radius: 64px;
}

.landing-page-hero .center-tabs {
   display: flex;
   width: 100%;
   justify-content: center;
}

.landing-page-hero .container-2 {
   display: inline-flex;
   align-items: center;
   position: relative;
   flex: 0 0 auto;
   margin-left: -4px;
   margin-right: -4px;
}

.landing-page-hero .tab {
   display: flex;
   width: 196px;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 24px;
   position: relative;
   background-color: #ffffff;
   border-radius: 64px;
}

.landing-page-hero .text-wrapper-18 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-medium-font-family);
   font-weight: var(--body-large-16-medium-font-weight);
   color: var(--lightfonts-500);
   font-size: var(--body-large-16-medium-font-size);
   letter-spacing: var(--body-large-16-medium-letter-spacing);
   line-height: var(--body-large-16-medium-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-medium-font-style);
}

.landing-page-hero .tab-2 {
   display: flex;
   width: 196px;
   padding: 12px 24px;
   background-color: var(--lightsurface-900);
   align-items: center;
   justify-content: center;
   gap: 8px;
   position: relative;
   border-radius: 64px;
}

.landing-page-hero .text-wrapper-19 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--body-large-16-medium-font-family);
   font-weight: var(--body-large-16-medium-font-weight);
   color: var(--lightfonts-100);
   font-size: var(--body-large-16-medium-font-size);
   letter-spacing: var(--body-large-16-medium-letter-spacing);
   line-height: var(--body-large-16-medium-line-height);
   white-space: nowrap;
   font-style: var(--body-large-16-medium-font-style);
}

.landing-page-hero .text-wrapper-20 {
   font-weight: var(--body-caption-12-regular-font-weight);
   color: var(--lightprimaryyellow-500);
   position: relative;
   width: fit-content;
   font-family: var(--body-caption-12-regular-font-family);
   font-size: var(--body-caption-12-regular-font-size);
   letter-spacing: var(--body-caption-12-regular-letter-spacing);
   line-height: var(--body-caption-12-regular-line-height);
   white-space: nowrap;
   font-style: var(--body-caption-12-regular-font-style);
}

/* .landing-page-hero .roadblock {
   position: absolute;
   width: 104px;
   height: 128px;
   top: 96px;
   left: 1336px;
} */

.landing-page-hero .roadblock {
   position: absolute;
   width: 104px;
   height: 128px;
   top: -100px;
   left: calc(100vw - 150px);
   display: block;
}

.landing-page-hero .section-5 {
   height: 676px;
   top: 4250px;
   position: absolute;
   width: 1440px;
   left: 0;
}

.landing-page-hero .overlap {
   position: absolute;
   /* width: 1440px; */
   width: 100%;
   height: auto;
   top: 2076px;
   left: 0;
}

.landing-page-hero .seccion-5-video {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;
   /* padding: 96px 150px 128px; */
   /* position: absolute; */
   /* top: 3672px;
   left: 0; */
   background-color: var(--lightprimaryyellow-500);
   width: 100%;
   height: 676px;
}

.landing-page-hero .seccion-prueba {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;
   /* padding: 96px 150px 128px; */
   /* position: absolute; */
   /* top: 3672px;
   left: 0; */
   background-color: var(--lightprimaryyellow-500);
   width: 100%;
   height: 676px;
}

.landing-page-hero .section-6 {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;

   background-color: var(--lightsurface-700);
   width: 100%;
   height: max-content;
}

.landing-page-hero .contenido_section-6 {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;
   padding: 96px 150px 128px;
   position: absolute;
   top: 672px;
   left: 0;
   background-color: var(--lightsurface-700);
   width: 90%;

   justify-content: space-between;
   box-sizing: border-box;
   /*  

   
  
   gap: 16px;
   position: relative;
   margin: 0 auto;
 
   box-sizing: border-box; */
}

.landing-page-hero .seccion-4-tipo-suscripcion {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   background-color: var(--lightsurface-100);

   width: 100%;
   height: max-content;
   overflow: hidden;
}

.landing-page-hero .section-6 {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;

   background-color: var(--lightsurface-700);
   width: 100%;
   height: max-content;
}

.landing-page-hero .section-preguntas-frecuentes {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;

   background-color: white;
   width: 100%;
   height: max-content;
}

.landing-page-hero .section-clientes {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;

   background-color: white;
   width: 100%;
   height: max-content;
}

.landing-page-hero .section-tarjeta {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;

   background-color: white;
   width: 100%;
   height: max-content;

   margin-bottom: 50px;
}

.landing-page-hero .section-footer {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;

   background-color: var(--lightsurface-700);
   width: 100%;
   height: max-content;
}

/* .landing-page-hero .footer {
    display: flex;
    flex-direction: column;
    width: 1440px;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 80px 150px 40px;
    position: absolute;
    top: 7299px;
    left: 0;
    background-color: var(--lightsurface-700);
} */

.landing-page-hero .title-5 {
   display: flex;
   width: 100%;
   justify-content: center;
   gap: 8px;
   flex: 0 0 auto;
   align-items: center;
   position: relative;

   margin-top: 70px;
}

.landing-page-hero .text-wrapper-21 {
   position: relative;
   /* width: 752px; */
   width: 100%;
   margin-top: -1px;
   font-family: var(--heading-h2-large-32-bold-font-family);
   font-weight: var(--heading-h2-large-32-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h2-large-32-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h2-large-32-bold-letter-spacing);
   line-height: var(--heading-h2-large-32-bold-line-height);
   font-style: var(--heading-h2-large-32-bold-font-style);
}

.landing-page-hero .tabs-2 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 4px;
   position: relative;
   flex: 0 0 auto;
   background-color: #ffffff;
   border-radius: 64px;
   cursor: pointer;
}

.landing-page-hero .tab-3 {
   display: inline-flex;
   padding: 8px 24px;
   flex: 0 0 auto;
   background-color: #ffffff;
   align-items: center;
   justify-content: center;
   gap: 8px;
   position: relative;
   border-radius: 64px;
   cursor: pointer;
}

.tab-activo {
   background-color: var(--lightstateswarning-500) !important;
}

.landing-page-hero .tab-4 {
   display: inline-flex;
   padding: 8px 24px;
   flex: 0 0 auto;
   background-color: #ffffff;
   align-items: center;
   justify-content: center;
   gap: 8px;
   position: relative;
   border-radius: 64px;
}

.tab-center {
   width: 100%;
   text-align: center;
}

.landing-page-hero .div-8 {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .frame-3 {
   position: relative;
   /* width: 557px; */
   width: 100%;
   height: 678px;
}

.landing-page-hero .overlap-group-5 {
   position: relative;
   /* width: 520px; */
   width: 100%;
   height: 675px;
   left: 30px;
}

.landing-page-hero .home-variacion-de {
   position: absolute;
   /* width: 312px; */
   width: 100%;
   height: 675px;
   top: 0;
   /* left: 92px; */
   object-fit: contain;
   /* object-fit: cover; */
   /*  border-radius: 24px; */
}

.landing-page-hero .img-historial-solicitudes {
   position: absolute;
   /* width: 312px; */
   width: 100%;
   height: 675px;
   top: 0;
   /* left: 92px; */
   object-fit: contain;
   /* object-fit: cover; */
   /*  border-radius: 24px; */
}

.landing-page-hero .img-historial-vehiculos {
   position: absolute;
   /* width: 312px; */
   width: 100%;
   height: 675px;
   top: 0;
   /* left: 92px; */
   object-fit: contain;
   /* object-fit: cover; */
   /*  border-radius: 24px; */
}

.landing-page-hero .img-gestion-vehiculos {
   position: absolute;
   /* width: 312px; */
   width: 100%;
   height: 675px;
   top: 0;
   /* left: 92px; */
   object-fit: contain;
   /* object-fit: cover; */
   /*  border-radius: 24px; */
}

.landing-page-hero .card-2 {
   position: absolute;
   width: 215px;
   height: 110px;
   top: 476px;
   left: 305px;
   object-fit: cover;
}

.landing-page-hero .card-map {
   position: absolute;
   width: 118px;
   height: 126px;
   top: 243px;
   left: 0;
   object-fit: cover;
   border-radius: 24px;
}

.landing-page-hero .frame-5 {
   position: relative;
   width: 100%;
   height: 678px;

   display: none;
}

.landing-page-hero .card-place {
   position: absolute;
   width: 168px;
   height: 67px;
   top: 494px;
   left: 0px;
   object-fit: fill;
}

.landing-page-hero .card-service {
   position: absolute;
   width: 168px;
   height: 48px;
   top: 186px;
   left: 305px;
   object-fit: fill;
}

@media (max-width: 990px) {
   .landing-page-hero .frame-3 {
      display: flex;
      justify-content: center;
   }

   .landing-page-hero .frame-5 {
      position: relative;
      width: 100%;
      height: 678px;
      display: block;
   }

   .landing-page-hero .roadblock {
      display: none;
   }
}

/*  */

.landing-page-hero .information-2 {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
   justify-content: center;
   gap: 32px;
   padding: 32px 0px;
   position: relative;
}

.landing-page-hero .container-3 {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   flex: 0 0 auto;
   width: 100%;
}

.landing-page-hero .container-4 {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
   gap: 8px;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .text-wrapper-22 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--heading-h3-large-24-bold-font-family);
   font-weight: var(--heading-h3-large-24-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h3-large-24-bold-font-size);
   letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
   line-height: var(--heading-h3-large-24-bold-line-height);
   font-style: var(--heading-h3-large-24-bold-font-style);
}

.landing-page-hero .text-wrapper-23 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   color: var(--lightfonts-200);
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.landing-page-hero .button-4 {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 16px 32px;
   position: relative;
   flex: 0 0 auto;
   background-color: var(--lightprimaryyellow-500);
   border-radius: 64px;
   cursor: pointer;
}

.landing-page-hero .container-5 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .container-6 {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: flex-start;
   /* gap: 24px; */
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .text-wrapper-24 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--heading-h3-large-24-bold-font-family);
   font-weight: var(--heading-h3-large-24-bold-font-weight);
   /* color: var(--lightfonts-400); */
   font-size: var(--heading-h3-large-24-bold-font-size);
   letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
   line-height: var(--heading-h3-large-24-bold-line-height);
   font-style: var(--heading-h3-large-24-bold-font-style);
}

.landing-page-hero .steps {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;
   justify-content: center;
   gap: 40px;
   padding: 48px 0px;
   position: relative;
   flex: 0 0 auto;
   background-color: var(--lightsurface-700);
}

.landing-page-hero .text-wrapper-25 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--heading-h2-large-32-bold-font-family);
   font-weight: var(--heading-h2-large-32-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h2-large-32-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h2-large-32-bold-letter-spacing);
   line-height: var(--heading-h2-large-32-bold-line-height);
   font-style: var(--heading-h2-large-32-bold-font-style);
}

.landing-page-hero .container-7 {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 24px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .step {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   flex: 1;
   flex-grow: 1;
}

.landing-page-hero .text-wrapper-26 {
   position: relative;
   align-self: stretch;
   margin-top: -1px;
   font-family: var(--heading-h3-large-24-bold-font-family);
   font-weight: var(--heading-h3-large-24-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h3-large-24-bold-font-size);
   letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
   line-height: var(--heading-h3-large-24-bold-line-height);
   font-style: var(--heading-h3-large-24-bold-font-style);
}

.landing-page-hero .section-map {
   /* display: flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;
   padding: 0px 150px 96px;
   top: 0;
   background-color: var(--lightsurface-100);
   position: absolute;
   width: 100%;
   left: 0; */

   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 48px;
   background-color: var(--lightsurface-100);
   /* top: 0;
   position: absolute;
   left: 0; */
   width: 100%;
}

.landing-page-hero .section-estado {
   position: relative;
   width: 100%;
   height: 488px;
   margin-left: -103px;
   margin-right: -103px;
   background-color: var(--lightsurface-100);
   border-radius: 48px;
   overflow: hidden;
}

.landing-page-hero .overlap-2 {
   position: relative;
   height: 488px;
   background-image: url("/image/snazzy-image-2-1.png");
   background-size: cover;
   background-position: 50% 50%;
}

.landing-page-hero .heading-2 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   /* position: absolute;
   top: 204px;
   left: 208px; */
}

.landing-page-hero .text-wrapper-27 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--heading-h1-large-40-bold-font-family);
   font-weight: var(--heading-h1-large-40-bold-font-weight);
   color: var(--lightfonts-200);
   font-size: var(--heading-h1-large-40-bold-font-size);

   letter-spacing: var(--heading-h1-large-40-bold-letter-spacing);
   line-height: var(--heading-h1-large-40-bold-line-height);
   white-space: normal;
   font-style: var(--heading-h1-large-40-bold-font-style);
}

.landing-page-hero .heading-3 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   margin-top: 25px;
   /* position: absolute;
   top: 292px;
   left: 359px; */
}

.landing-page-hero .location {
   position: relative;
   width: 48px;
   height: 48px;
}

.landing-page-hero .overlap-group-6 {
   position: relative;
   height: 48px;
   border-radius: 100px;
}

.landing-page-hero .button-5 {
   position: absolute;
   width: 32px;
   height: 32px;
   top: 8px;
   left: 8px;
   background-color: var(--lightprimaryyellow-500);
   border-radius: 100px;
   opacity: 0.4;
}

.landing-page-hero .button-6 {
   position: absolute;
   width: 48px;
   height: 48px;
   top: 0;
   left: 0;
   background-color: var(--lightprimaryyellow-500);
   border-radius: 100px;
   opacity: 0.2;
}

.landing-page-hero .button-7 {
   position: absolute;
   width: 20px;
   height: 20px;
   top: 14px;
   left: 14px;
   background-color: var(--lightprimaryyellow-500);
   border-radius: 100px;
}

.landing-page-hero .vector {
   position: relative;
   width: 107.94px;
   height: 29.14px;
}

.landing-page-hero .point {
   position: relative;
   width: 16px;
   height: 16px;
   background-color: var(--lightstateswarning-500);
   border-radius: 8px;
   border: 2px solid;
   border-color: #ffffff;
}

.landing-page-hero .heading-4 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   margin-top: 90px;
   /* position: absolute; */
   /* top: 108px; */
   /* left: 198px; */
}

.landing-page-hero .text-wrapper-28 {
   position: relative;
   width: fit-content;
   font-family: var(--heading-h1-large-40-bold-font-family);
   font-weight: var(--heading-h1-large-40-bold-font-weight);
   color: var(--lightfonts-800);
   font-size: var(--heading-h1-large-40-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h1-large-40-bold-letter-spacing);
   line-height: var(--heading-h1-large-40-bold-line-height);
   white-space: nowrap;
   font-style: var(--heading-h1-large-40-bold-font-style);
}

.landing-page-hero .image {
   display: flex;
   width: 96px;
   height: 96px;
   align-items: center;
   gap: 8px;
   padding: 0px 16px;
   position: relative;
   background-color: #ffffff;
   border-radius: 32px;
}

.landing-page-hero .honduras {
   position: relative;
   width: 64px;
   height: 64px;
   object-fit: cover;
}

.landing-page-hero .marquee {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   gap: 40px;
   position: relative;
   flex: 0 0 auto;
   margin-left: -150px;
   margin-right: -150px;
   background-color: var(--lightprimaryyellow-500);
}

.landing-page-hero .frame-4 {
   display: flex;
   align-items: center;
   gap: 40px;
   padding: 32px 0px;
   position: relative;
   flex: 1;
   flex-grow: 1;
   animation: marquee 15s linear infinite;
}

.landing-page-hero .container-8 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .text-wrapper-29 {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: var(--heading-h2-large-32-bold-font-family);
   font-weight: var(--heading-h2-large-32-bold-font-weight);
   color: var(--lightfonts-800);
   font-size: var(--heading-h2-large-32-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h2-large-32-bold-letter-spacing);
   line-height: var(--heading-h2-large-32-bold-line-height);
   white-space: nowrap;
   font-style: var(--heading-h2-large-32-bold-font-style);
}

.landing-page-hero .dot-3 {
   position: relative;
   width: 8px;
   height: 8px;
   background-color: var(--lightfonts-800);
   border-radius: 4px;
}

.landing-page-hero .dot-4 {
   position: relative;
   width: 8px;
   height: 8px;
   margin-right: -2px;
   background-color: var(--lightfonts-800);
   border-radius: 4px;
}

.landing-page-hero .section-7 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 48px;
   padding: 96px 0px 128px;
   top: 1024px;
   background-color: #ffffff;
   position: absolute;
   /* width: 1440px; */
   left: 0;

   width: 100%;

   overflow: auto;
}

.landing-page-hero .section-8 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 48px;
   padding: 96px 0px 128px;
   top: 2076px;
   background-color: #ffffff;
   position: absolute;
   /* width: 1440px; */
   left: 0;

   width: 100%;
}

.landing-page-hero .title-6 {
   display: flex;
   justify-content: center;
   gap: 8px;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
   align-items: center;
   position: relative;
}

.landing-page-hero .container-9 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 48px;
   padding: 0px 150px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 0 0 auto;
}

.landing-page-hero .carrousel {
   position: relative;
   align-self: stretch;
   width: 100%;
   height: 548px;
}

.landing-page-hero .overlap-3 {
   position: relative;
   width: 1044px;
   height: 548px;
   left: 48px;
}

.landing-page-hero .card-3 {
   position: absolute;
   width: 364px;
   height: 468px;
   top: 40px;
   left: 680px;
   background-color: var(--lightprimaryyellow-100);
   border-radius: 32px;
   overflow: hidden;
}

.landing-page-hero .overlap-group-7 {
   position: relative;
   height: 468px;
   background-image: url(https://c.animaapp.com/mcm8f4anrMsY4w/img/imagen-cambio-de-llanta-2-1.png);
   background-size: cover;
   background-position: 50% 50%;
}

.landing-page-hero .overlay {
   position: absolute;
   width: 364px;
   height: 468px;
   top: 0;
   left: 0;
   background-color: #0000004c;
   border-radius: 32px;
}

.landing-page-hero .container-10 {
   display: flex;
   flex-direction: column;
   width: 364px;
   align-items: flex-start;
   gap: 8px;
   padding: 0px 24px;
   position: absolute;
   top: 388px;
   left: 0;
}

.landing-page-hero .text-wrapper-30 {
   position: relative;
   flex: 1;
   margin-top: -1px;
   font-family: var(--heading-h3-large-24-bold-font-family);
   font-weight: var(--heading-h3-large-24-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h3-large-24-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
   line-height: var(--heading-h3-large-24-bold-line-height);
   font-style: var(--heading-h3-large-24-bold-font-style);
}

.landing-page-hero .overlap-wrapper {
   position: absolute;
   width: 364px;
   height: 468px;
   top: 40px;
   left: 0;
   background-color: var(--lightprimaryyellow-100);
   border-radius: 32px;
   overflow: hidden;
}

.landing-page-hero .overlap-4 {
   position: relative;
   height: 468px;
   background-image: url(https://c.animaapp.com/mcm8f4anrMsY4w/img/imagen-bateria-1.png);
   background-size: cover;
   background-position: 50% 50%;
}

.landing-page-hero .card-4 {
   position: absolute;
   width: 364px;
   height: 548px;
   top: 0;
   left: 340px;
   background-color: var(--lightprimaryyellow-100);
   border-radius: 32px;
   overflow: hidden;
}

.landing-page-hero .overlap-5 {
   position: relative;
   height: 548px;
   background-image: url(https://c.animaapp.com/mcm8f4anrMsY4w/img/imagen-grua-1.png);
   background-size: cover;
   background-position: 50% 50%;
}

.landing-page-hero .overlay-2 {
   position: absolute;
   width: 364px;
   height: 548px;
   top: 0;
   left: 0;
   background-color: #0000004c;
   border-radius: 32px;
}

.landing-page-hero .container-11 {
   display: flex;
   flex-direction: column;
   width: 364px;
   align-items: flex-start;
   gap: 8px;
   padding: 0px 24px;
   position: absolute;
   top: 452px;
   left: 0;
}

.landing-page-hero .control-2 {
   display: flex;
   /* width: 1440px; */
   width: 100%;
   align-items: center;
   justify-content: flex-end;
   gap: 16px;
   /*  padding: 0px 150px; */
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .menu-wrapper {
   /* position: absolute; */
   /* width: 1440px; */
   width: 100%;
   height: 1024px;
   top: 0;
   left: 0;
   background-image: url("/image/ld_seccion1.png");
   /*  background-size: 100% 100%; */

   background-size: cover; /* o 'contain' dependiendo de tus necesidades */
   background-position: center; /* Centra la imagen */
   background-repeat: no-repeat; /* Evita que la imagen se repita */
}

/* .landing-page-hero .menu {
   display: flex;
   width: 1140px;
   height: 56px;
   align-items: center;
   justify-content: center;
   gap: 24px;
   padding: 0px 8px;
   position: relative;
   top: 8px;
   left: 150px;
   background-color: #ffffff;
   border-radius: 96px;
   box-shadow: 0px 1px 4px #b6bfc533;
}

.landing-page-hero .MEASISTO-negro {
   position: relative;
   width: 192px;
   height: 32px;
   object-fit: cover;
}

.landing-page-hero .container-12 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   position: relative;
   flex: 1;
   flex-grow: 1;
}

.landing-page-hero .container-13 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 8px;
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .button-8 {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 8px 24px;
   position: relative;
   flex: 0 0 auto;
   background-color: var(--lightprimaryyellow-500);
   border-radius: 96px;
   overflow: hidden;
}
 */

.landing-page-hero .contenido {
   display: flex;

   width: 90%;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   position: relative;
   margin: 0 auto;
   /* background-color: #ffffff; */
   box-sizing: border-box;
}

.top_contenido_seccion1 {
   top: 50%;
}

.width_100_percentaje {
   width: 100% !important;
}

.height_100_percentaje {
   height: 100% !important;
}

.color_text_white {
   color: white;
}

.text-align-start {
   text-align: start !important;
}

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

.height_56 {
   height: 56px !important;
}

.Heading_Display_Large_Bold {
   font-family: var(--heading-display-large-bold-font-family);
   font-weight: var(--heading-display-large-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-display-large-bold-font-size);
   letter-spacing: var(--heading-display-large-bold-letter-spacing);
   line-height: var(--heading-display-large-bold-line-height);
   font-style: var(--heading-display-large-bold-font-style);
}

.Body_Large_16_Regular {
   font-family: var(--body-large-16-regular-font-family);
   font-weight: var(--body-large-16-regular-font-weight);
   /* color: var(--lightfonts-200); */
   font-size: var(--body-large-16-regular-font-size);
   letter-spacing: var(--body-large-16-regular-letter-spacing);
   line-height: var(--body-large-16-regular-line-height);
   font-style: var(--body-large-16-regular-font-style);
}

.Body_Large_16_SemiBold {
   font-family: var(--body-large-16-semibold-font-family);
   font-weight: var(--body-large-16-semibold-font-weight);
   font-size: var(--body-large-16-semibold-font-size);
   letter-spacing: var(--body-large-16-semibold-letter-spacing);
   line-height: var(--body-large-16-semibold-line-height);
   font-style: var(--body-large-16-semibold-font-style);

   /*    --body-large-16-semibold-font-family: "Kanit", Helvetica;
   --body-large-16-semibold-font-weight: 600;
   --body-large-16-semibold-font-size: 16px;
   --body-large-16-semibold-letter-spacing: 0px;
   --body-large-16-semibold-line-height: 24px;
   --body-large-16-semibold-font-style: normal; */
}

.Heading_H1_Large_40_Bold {
   position: relative;
   width: fit-content;
   font-family: var(--heading-h1-large-40-bold-font-family);
   font-weight: var(--heading-h1-large-40-bold-font-weight);
   color: var(--lightfonts-800);
   font-size: var(--heading-h1-large-40-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h1-large-40-bold-letter-spacing);
   line-height: var(--heading-h1-large-40-bold-line-height);
   white-space: normal;
   font-style: var(--heading-h1-large-40-bold-font-style);
}

.Heading_H2_Large_32_Bold {
   position: relative;
   width: fit-content;
   font-family: var(--heading-h2-large-32-bold-font-family);
   font-weight: var(--heading-h2-large-32-bold-font-weight);
   font-size: var(--heading-h2-large-32-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h2-large-32-bold-letter-spacing);
   line-height: var(--heading-h2-large-32-bold-line-height);
   white-space: normal;
   font-style: var(--heading-h2-large-32-bold-font-style);
}

.Heading_H2_Mobile_24_Bold {
   position: relative;
   width: fit-content;
   font-family: var(--heading-h3-large-24-bold-font-family);
   font-weight: var(--heading-h3-large-24-bold-font-weight);
   color: var(--lightfonts-800);
   font-size: var(--heading-h3-large-24-bold-font-size);
   text-align: center;
   letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
   line-height: var(--heading-h3-large-24-bold-line-height);
   white-space: normal;
   font-style: var(--heading-h3-large-24-bold-font-style);

   /*  --heading-h3-large-24-bold-font-family: "Kanit", Helvetica;
  --heading-h3-large-24-bold-font-weight: 700;
  --heading-h3-large-24-bold-font-size: 24px;
  --heading-h3-large-24-bold-letter-spacing: -0.30000001192092896px;
  --heading-h3-large-24-bold-line-height: 32px;
  --heading-h3-large-24-bold-font-style: normal; */
}

.Heading_H3_Mobile_20_Bold {
   font-family: var(--heading-h3-mobile-20-bold-font-family);
   font-weight: var(--heading-h3-mobile-20-bold-font-weight);
   color: #ffffff;
   font-size: var(--heading-h3-mobile-20-bold-font-size);
   letter-spacing: var(--heading-h3-mobile-20-bold-letter-spacing);
   line-height: var(--heading-h3-mobile-20-bold-line-height);
   font-style: var(--heading-h3-mobile-20-bold-font-style);

   /*  --heading-h3-mobile-20-bold-font-family: "Kanit", Helvetica;
   --heading-h3-mobile-20-bold-font-weight: 700;
   --heading-h3-mobile-20-bold-font-size: 20px;
   --heading-h3-mobile-20-bold-letter-spacing: -0.30000001192092896px;
   --heading-h3-mobile-20-bold-line-height: 28px;
   --heading-h3-mobile-20-bold-font-style: normal;
 */
}

.color_texto_lightsurface_200 {
   color: var(--lightsurface-200);
}

.color_texto_lightsurface_800 {
   color: var(--lightsurface-800);
}

.color_texto_lightsurface_500 {
   color: var(--lightsurface-500);
}

.Body_Small_14_Regular {
   position: relative;
   width: fit-content;
   font-family: var(--body-small-14-regular-font-family);
   font-weight: var(--body-small-14-regular-font-weight);
   font-size: var(--body-small-14-regular-font-size);
   letter-spacing: var(--body-small-14-regular-letter-spacing);
   white-space: normal;
   font-style: var(--body-small-14-regular-font-style);

   /* --body-small-14-regular-font-family: "Kanit", Helvetica;
  --body-small-14-regular-font-weight: 400;
  --body-small-14-regular-font-size: 14px;
  --body-small-14-regular-letter-spacing: 0px;
  --body-small-14-regular-line-height: 24px;
  --body-small-14-regular-font-style: normal; */
}

.color_texto_negro {
   color: var(--lightfonts-800);
}
.color_texto_gris {
   color: var(--lightfonts-200);
}

.landing-page-hero .menu-wrapper {
   width: 100%;
   height: 1024px;
   top: 0;
   left: 0;
   background-image: url("/image/ld_seccion1.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.landing-page-hero .menu {
   display: flex;
   /*  max-width: 1140px;  */ /* Ancho máximo por defecto */
   width: 90%; /* Se adapta al contenedor */
   height: 56px;
   align-items: center;
   justify-content: space-between; /* Logo a la izquierda, botón a la derecha */
   gap: 16px; /* Reducir gap para evitar desbordamiento */
   padding: 0 16px; /* Padding interno */
   position: relative;
   top: 8px;
   margin: 0 auto; /* Centra horizontalmente */
   background-color: #ffffff;
   border-radius: 96px;
   box-shadow: 0px 1px 4px #b6bfc533;
   box-sizing: border-box;
   /*  overflow: hidden;  */ /* Evita desbordamiento del contenido */
   z-index: 100000000000000;
}

.landing-page-hero .MEASISTO-negro {
   position: relative;
   width: 192px;
   height: 28px;
   object-fit: cover;
   flex-shrink: 0; /* Evita que el logo se encoja */
   /*  cursor: pointer; */
}

/* Imagen por defecto para anchos > 380px */
.landing-page-hero .MEASISTO-negro {
   src: url("https://c.animaapp.com/mcm8f4anrMsY4w/img/measisto-v2-negro-1.png");
}

/* Media query para anchos ≤ 380px */
@media (max-width: 455px) {
   .landing-page-hero .MEASISTO-negro {
      content: url("/image/logo.png");
      width: auto;
      height: auto;
   }
   .landing-page-hero .seccion-5-video {
      height: 400px !important;
   }

   .landing-page-hero .video-player {
      border-radius: 30px !important;
   }
}

/* Media query para anchos de 0 a 320px */
@media (max-width: 320px) {
   .landing-page-hero .menu {
      width: 100%; /* Ancho fijo de 200px */
   }

   .landing-page-hero .testimonials {
      overflow: auto;
   }
}

.landing-page-hero .container-12 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px; /* Reducir gap para pantallas pequeñas */
   position: relative;
   flex: 1;
}

.landing-page-hero .menu-dropdown {
   list-style: none;
   flex-direction: column;
   background-color: #ffffff;
   display: flex;
   max-width: 1140px;
   width: 90%;
   justify-content: space-between;
   gap: 0px;
   right: 0;
   padding: 16px 16px;
   position: relative;
   top: 16px;
   z-index: 444444444;
   margin: 0 auto;
   background-color: #ffffff;
   border-radius: 24px;
   box-shadow: 0px 1px 4px #b6bfc533;
   box-sizing: border-box;
   overflow: hidden;
}

.landing-page-hero .menu-dropdown.active {
   display: flex; /* Muestra el menú al activar */
}

.landing-page-hero .subscribe-dropdown {
   display: none; /* Oculto por defecto */
   list-style: none;
   flex-direction: column;
   background-color: #ffffff;
   max-width: 340px; /* Ancho ajustado para las dos opciones */
   width: 100%;
   justify-content: space-between;
   gap: 0px;
   padding: 8px 16px;
   position: absolute;
   top: 100%; /* Aparece justo debajo del botón */
   right: 0; /* Alinea a la derecha del contenedor .menu */
   z-index: 444444445; /* Mayor z-index para superponerse si necesario */
   border-radius: 24px;
   box-shadow: 0px 1px 4px #b6bfc533;
   box-sizing: border-box;
   overflow: hidden;
}

.landing-page-hero .subscribe-dropdown.active {
   display: flex; /* Muestra el menú al activar */
}

/* Ajuste para posicionar subscribe-dropdown relativo al .menu */
.landing-page-hero .menu {
   position: relative;
}

/* Elimina la dependencia de menu-dropdown en el top */
.landing-page-hero .subscribe-dropdown {
   left: auto; /* Elimina centrado previo */
   transform: none; /* Elimina centrado previo */
   top: calc(
      100% + 8px
   ); /* Ajusta para que quede justo debajo del .button-8 con margen mínimo */
}

/* Ajuste para manejar texto largo con salto de línea */
.landing-page-hero .subscribe-dropdown .container-14 {
   width: 100%; /* Asegura que ocupe el ancho completo del contenedor */
   overflow-wrap: break-word; /* Permite que las palabras largas se dividan */
   word-break: break-word; /* Asegura el salto de línea en palabras largas */
}

.landing-page-hero .subscribe-dropdown .text-wrapper-18 {
   white-space: normal; /* Permite el salto de línea natural */
   max-width: 100%; /* Limita el ancho al contenedor padre */
   overflow-wrap: break-word; /* Maneja el desbordamiento con saltos */
   word-break: break-all; /* Opcional: fuerza el salto en cualquier carácter si es necesario */
}

.landing-page-hero .dropdown-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
}

.landing-page-hero .logo {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.landing-page-hero .dropdown-title {
   font-size: 18px;
   font-weight: bold;
   color: #000;
}

.landing-page-hero .close-btn {
   all: unset;
   font-size: 24px;
   font-weight: bold;
   cursor: pointer;
   padding: 4px;
   background: none;
   border: none;
}

.landing-page-hero .dropdown-subscribe {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 8px 24px;
   margin-bottom: 16px;
   background-color: #ffc107; /* Amarillo como en la imagen */
   border-radius: 96px;
   overflow: hidden;
   flex-shrink: 0;
   color: #000;
   font-weight: bold;
}

.landing-page-hero .menu-dropdown li {
   padding: 12px 16px;
   font-size: 16px;
   color: #000;
}

.landing-page-hero .subscribe-dropdown li {
   /* padding: 8px 16px; */
   font-size: 14px;
   color: #000;
}

.landing-page-hero .container-13 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 6px; /* Reducir padding para ahorrar espacio */
   position: relative;
   flex: 0 0 auto;
   cursor: pointer;
}

.landing-page-hero .container-14 {
   display: inline-flex;
   align-items: center;
   justify-content: start;
   gap: 8px;
   padding: 6px; /* Reducir padding para ahorrar espacio */
   position: relative;
   flex: 0 0 auto;
}

.landing-page-hero .button-8 {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 8px 24px;
   position: relative;
   flex: 0 0 auto;
   background-color: var(--lightprimaryyellow-500);
   border-radius: 96px;
   overflow: hidden;
   flex-shrink: 0; /* Evita que el botón se encoja */
   cursor: pointer;
}

.landing-page-hero .menu-toggle {
   all: unset;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0px;
   position: relative;
   flex: 0 0 auto;
   background-color: transparent; /* Sin fondo por defecto */
   border: none;
   cursor: pointer;
}

.landing-page-hero .menu-toggle img {
   width: 35px; /* Ajusta según el tamaño de tu ícono */
   height: 35px; /* Ajusta según el tamaño de tu ícono */
   object-fit: contain;
}

.landing-page-hero .container-14:hover {
   background-color: var(--lightprimaryyellow-500);
   border-radius: 96px;
   padding: 9px;
   cursor: pointer;
}

/* Media query para pantallas de 0 a 1000px */
@media (max-width: 1044px) {
   .landing-page-hero .container-12 > .container-13 {
      display: none; /* Ocultar enlaces originales */
   }
   .landing-page-hero .menu-dropdown {
      display: none; /* Asegurar que el menú esté oculto inicialmente */
   }
   .landing-page-hero .menu-toggle {
      display: inline-flex; /* Mostrar botón de menú */
   }
}

/* Media query para pantallas > 1000px */
@media (min-width: 1045px) {
   .landing-page-hero .container-12 > .container-13 {
      display: inline-flex; /* Mostrar enlaces originales */
   }
   .landing-page-hero .menu-dropdown {
      display: none !important; /* Asegurar que el menú desplegable esté oculto */
   }
   .landing-page-hero .menu-toggle {
      display: none; /* Ocultar botón de menú */
   }
}

/* Media query para pantallas muy pequeñas (≤ 600px) */
@media (max-width: 600px) {
   .landing-page-hero .menu {
      width: 95%; /* Aumentar el ancho relativo */
      padding: 0 8px; /* Reducir padding */
      gap: 8px; /* Reducir gap */
   }
   .landing-page-hero .MEASISTO-negro {
      /* width: 120px; 
    height: 20px; */
   }
   .landing-page-hero .div-8 {
      font-size: 12px; /* Reducir tamaño del botón */
      padding: 6px 16px; /* Reducir padding del botón */
   }
   /* .landing-page-hero .subscribe-dropdown {
    max-width: 200px;  
  } */
}

.landing-page-hero .step {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   position: relative;
   flex: 1;
   flex-grow: 1;
   min-height: 250px; /* Altura mínima reducida a 250px */
}

.landing-page-hero .step-content {
   display: flex;
   flex-direction: column;
   flex-grow: 1; /* Ocupa todo el espacio disponible */
   justify-content: space-between; /* Asegura distribución vertical */
}

.landing-page-hero .div-5 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
   position: relative;
   align-self: stretch;
   width: 100%;
   flex: 1 0 auto; /* Permite que crezca pero no se encoja */
}

/* Empujar el <p> al final de .div-5 */
.landing-page-hero .div-5 .Body_Small_14_Regular {
   margin-top: auto;
}

/* Estilos opcionales para visualización */
.landing-page-hero .img-3 {
   width: 48px;
   height: auto;
}

.slider-left {
   cursor: pointer;
}

.slider-right {
   cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 767px) {
   /* Bootstrap sm breakpoint */
   .landing-page-hero .step {
      min-height: auto; /* Reset para pantallas pequeñas */
   }
   .landing-page-hero .step-content {
      justify-content: flex-start; /* Restaurar alineación natural */
   }
   .landing-page-hero .div-5 .Body_Small_14_Regular {
      margin-top: 16px; /* Espaciado fijo en móviles */
   }
}

@media (max-width: 1060px) {
   .landing-page-hero .heading-4 p {
      position: relative;
      width: fit-content;
      font-family: var(--heading-h3-large-24-bold-font-family);
      font-weight: var(--heading-h3-large-24-bold-font-weight);

      font-size: var(--heading-h3-large-24-bold-font-size);
      text-align: center;
      letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
      line-height: var(--heading-h3-large-24-bold-line-height);
      white-space: normal;
      font-style: var(--heading-h3-large-24-bold-font-style);
   }

   .landing-page-hero .image {
      width: 64px !important;
      height: 64px !important;
      padding: 0px 12px !important;
      border-radius: 16px !important;
   }
   .landing-page-hero .honduras {
      width: 40px !important;
      height: 40px !important;
   }

   .landing-page-hero .heading-2 p {
      position: relative;
      width: fit-content;
      font-family: var(--heading-h3-large-24-bold-font-family);
      font-weight: var(--heading-h3-large-24-bold-font-weight);

      font-size: var(--heading-h3-large-24-bold-font-size);
      text-align: center;
      letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
      line-height: var(--heading-h3-large-24-bold-line-height);
      white-space: normal;
      font-style: var(--heading-h3-large-24-bold-font-style);
   }

   .landing-page-hero .heading-3 .mb_responsive_heading {
      position: relative;
      width: 100%;

      font-family: var(--heading-h3-large-24-bold-font-family);
      font-weight: var(--heading-h3-large-24-bold-font-weight);

      font-size: var(--heading-h3-large-24-bold-font-size);
      text-align: center;
      letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
      line-height: var(--heading-h3-large-24-bold-line-height);
      white-space: normal;
      font-style: var(--heading-h3-large-24-bold-font-style);
   }

   .landing-page-hero .text-wrapper-21 {
      position: relative;
      width: 100%;
      margin-top: -1px;
      font-family: var(--heading-h2-mobile-24-bold-font-family);
      font-weight: var(--heading-h2-mobile-24-bold-font-weight);
      color: #ffffff;
      font-size: var(--heading-h2-mobile-24-bold-font-size);
      text-align: center;
      letter-spacing: var(--heading-h2-mobile-24-bold-letter-spacing);
      line-height: var(--heading-h2-mobile-24-bold-line-);
      font-style: var(--heading-h2-mobile-24-bold-font-style);
   }

   .landing-page-hero .text-wrapper-22 {
      font-family: var(--heading-h3-mobile-20-bold-font-family);
      font-weight: var(--heading-h3-mobile-20-bold-font-weight);
      color: #ffffff;
      font-size: var(--heading-h3-mobile-20-bold-font-size);
      letter-spacing: var(--heading-h3-mobile-20-bold-letter-spacing);
      line-height: var(--heading-h3-mobile-20-bold-line-height);
      font-style: var(--heading-h3-mobile-20-bold-font-style);
   }

   .landing-page-hero .text-wrapper-22 {
      font-family: var(--heading-h3-mobile-20-bold-font-family);
      font-weight: var(--heading-h3-mobile-20-bold-font-weight);
      color: #ffffff;
      font-size: var(--heading-h3-mobile-20-bold-font-size);
      letter-spacing: var(--heading-h3-mobile-20-bold-letter-spacing);
      line-height: var(--heading-h3-mobile-20-bold-line-height);
      font-style: var(--heading-h3-mobile-20-bold-font-style);
   }

   .landing-page-hero .text-wrapper-24 {
      font-family: var(--heading-h3-mobile-20-bold-font-family);
      font-weight: var(--heading-h3-mobile-20-bold-font-weight);
      color: #ffffff;
      font-size: var(--heading-h3-mobile-20-bold-font-size);
      letter-spacing: var(--heading-h3-mobile-20-bold-letter-spacing);
      line-height: var(--heading-h3-mobile-20-bold-line-height);
      font-style: var(--heading-h3-mobile-20-bold-font-style);
   }

   .landing-page-hero .text-wrapper-26 {
      font-family: var(--heading-h3-mobile-20-bold-font-family);
      font-weight: var(--heading-h3-mobile-20-bold-font-weight);
      color: #ffffff;
      font-size: var(--heading-h3-mobile-20-bold-font-size);
      letter-spacing: var(--heading-h3-mobile-20-bold-letter-spacing);
      line-height: var(--heading-h3-mobile-20-bold-line-height);
      font-style: var(--heading-h3-mobile-20-bold-font-style);
   }

   .landing-page-hero .text-wrapper-25 {
      font-family: var(--heading-h2-mobile-24-bold-font-family);
      font-weight: var(--heading-h2-mobile-24-bold-font-weight);
      color: #ffffff;
      font-size: var(--heading-h2-mobile-24-bold-font-size);
      text-align: center;
      letter-spacing: var(--heading-h2-mobile-24-bold-letter-spacing);
      line-height: var(--heading-h2-mobile-24-bold-line-);
      font-style: var(--heading-h2-mobile-24-bold-font-style);
   }

   .landing-page-hero .text-wrapper-18 {
      font-family: var(--body-small-14-medium-font-family);
      font-weight: var(--body-small-14-medium-font-weight);
      color: #ffffff;
      font-size: var(--body-small-14-medium-font-size);
      text-align: center;
      letter-spacing: var(--body-small-14-medium-letter-spacing);
      line-height: var(--body-small-14-medium-line-height);
      font-style: var(--body-small-14-medium-font-style);
      color: var(--lightfonts-500);
   }

   .landing-page-hero .heading-title-video-measisto {
      position: relative;
      width: fit-content;
      font-family: var(--heading-h3-large-24-bold-font-family);
      font-weight: var(--heading-h3-large-24-bold-font-weight);
      font-size: var(--heading-h3-large-24-bold-font-size);
      letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
      line-height: var(--heading-h3-large-24-bold-line-height);
      font-style: var(--heading-h3-large-24-bold-font-style);
   }

   .landing-page-hero .title-heading-type-suscription {
      position: relative;
      width: fit-content;
      font-family: var(--heading-h3-large-24-bold-font-family);
      font-weight: var(--heading-h3-large-24-bold-font-weight);
      font-size: var(--heading-h3-large-24-bold-font-size);
      letter-spacing: var(--heading-h3-large-24-bold-letter-spacing);
      line-height: var(--heading-h3-large-24-bold-line-height);
      font-style: var(--heading-h3-large-24-bold-font-style);
   }

   .landing-page-hero .tab-membresia-inactivo {
      font-family: var(--body-small-14-medium-font-family);
      font-weight: var(--body-small-14-medium-font-weight);
      font-size: var(--body-small-14-medium-font-size);
      letter-spacing: var(--body-small-14-medium-letter-spacing);
      line-height: var(--body-small-14-medium-line-height);
      font-style: var(--body-small-14-medium-font-style);
   }

   .landing-page-hero .tab-membresia-activo-bold {
      font-family: var(--body-small-14-medium-font-family);
      font-weight: bold;
      font-size: var(--body-small-14-medium-font-size);
      letter-spacing: var(--body-small-14-medium-letter-spacing);
      line-height: var(--body-small-14-medium-line-height);
      font-style: var(--body-small-14-medium-font-style);
   }

   .tab-membresia-inactivo .landing-page-hero .frame-4 {
      height: 80px !important;
   }

   .landing-page-hero .change-text-customer-testimony {
      font-family: var(--heading-h2-mobile-24-bold-font-family);
      font-weight: var(--heading-h2-mobile-24-bold-font-weight);
      font-size: var(--heading-h2-mobile-24-bold-font-size);
      text-align: center;
      letter-spacing: var(--heading-h2-mobile-24-bold-letter-spacing);
      line-height: var(--heading-h2-mobile-24-bold-line-height);
      font-style: var(--heading-h2-mobile-24-bold-font-style);

      /* 
      --heading-h2-mobile-24-bold-font-family: "Kanit", Helvetica;
   --heading-h2-mobile-24-bold-font-weight: 700;
   --heading-h2-mobile-24-bold-font-size: 24px;
   --heading-h2-mobile-24-bold-letter-spacing: -0.30000001192092896px;
   --heading-h2-mobile-24-bold-line-height: 32px;
   --heading-h2-mobile-24-bold-font-style: normal;
      */
   }
}

@media (max-width: 630px) {
   .landing-page-hero .heading-3 .mb_responsive_heading {
      display: inline-flex;
      align-items: center !important;
      justify-content: start !important;
   }

   .landing-page-hero .heading-3 .mb_responsive_heading {
      display: inline-flex;
      align-items: center !important;
      justify-content: start !important;
   }
}

.landing-page-hero .video-step {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   position: relative;
   min-height: 250px; /* Consistente con tu ajuste anterior */
   width: 100%;
}

.landing-page-hero .video-player {
   width: 754px;
   height: auto;
   max-width: 100%;
   object-fit: contain; /* Preserva la relación de aspecto */
   border-radius: 39px; /* Opcional, para estilo */
   cursor: pointer;
}

.landing-page-hero .play-icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 78px;
   height: 78px;
   background: var(--lightsurface-900); /* Fondo semitransparente */
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.landing-page-hero .play-svg {
   width: 32px;
   height: 32px;
}

.landing-page-hero .play-icon:hover {
   background: rgba(0, 0, 0, 0.7); /* Efecto hover */
}

/* Responsive adjustments */
@media (max-width: 990px) {
   .landing-page-hero .seccion-5-video {
      height: 500px;
   }
}

@media (max-width: 460px) {
   .landing-page-hero .control {
      justify-content: center;
   }

   .landing-page-hero .frame-2 {
      justify-content: center;
   }
}

/* .landing-page-hero .tabs {
    display: flex;
    width: 100%;
    max-width: 400px;  
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
    
    background-color: #ffffff;
    border-radius: 64px;
}

.landing-page-hero .center-tabs {
    display: flex;
    width: 100%;
    justify-content: center;
}

.landing-page-hero .container-2 {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
    margin-left: -4px;
    margin-right: -4px;
}

.landing-page-hero .tab {
    display: flex;
    width: 196px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    position: relative;
    background-color: #ffffff;
    border-radius: 64px;
}

.landing-page-hero .text-wrapper-18 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: var(--body-large-16-medium-font-family);
    font-weight: var(--body-large-16-medium-font-weight);
    color: var(--lightfonts-500);
    font-size: var(--body-large-16-medium-font-size);
    letter-spacing: var(--body-large-16-medium-letter-spacing);
    line-height: var(--body-large-16-medium-line-height);
    white-space: nowrap;
    font-style: var(--body-large-16-medium-font-style);
}

.landing-page-hero .tab-2 {
    display: flex;
    width: 196px;
    padding: 12px 24px;
    background-color: var(--lightsurface-900);
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    border-radius: 64px;
}

.landing-page-hero .text-wrapper-19 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: var(--body-large-16-medium-font-family);
    font-weight: var(--body-large-16-medium-font-weight);
    color: var(--lightfonts-100);
    font-size: var(--body-large-16-medium-font-size);
    letter-spacing: var(--body-large-16-medium-letter-spacing);
    line-height: var(--body-large-16-medium-line-height);
    white-space: nowrap;
    font-style: var(--body-large-16-medium-font-style);
}

.landing-page-hero .text-wrapper-20 {
    font-weight: var(--body-caption-12-regular-font-weight);
    color: var(--lightprimaryyellow-500);
    position: relative;
    width: fit-content;
    font-family: var(--body-caption-12-regular-font-family);
    font-size: var(--body-caption-12-regular-font-size);
    letter-spacing: var(--body-caption-12-regular-letter-spacing);
    line-height: var(--body-caption-12-regular-line-height);
    white-space: nowrap;
    font-style: var(--body-caption-12-regular-font-style);
}
 */
/* Media query para anchos de 0 a 420px */
@media (max-width: 420px) {
   .landing-page-hero .tab {
      width: 100%;
      padding: 8px 16px; /* Ajuste de padding para mejor ajuste */
   }
   .landing-page-hero .tab-2 {
      width: 100%;
      padding: 8px 16px; /* Ajuste de padding para mejor ajuste */
   }
   .landing-page-hero .tabs {
      flex-direction: column; /* Apila los tabs verticalmente */
      gap: 4px; /* Reduce el gap entre tabs */
      padding: 4px;
   }
   .landing-page-hero .container-2 {
      flex-direction: column; /* Alinea los tabs en columna */
      width: 100%;
   }

   .landing-page-hero .tabs {
      border-radius: 15px;
   }

   .landing-page-hero .div-6 {
      display: block;
   }

   .landing-page-hero .tabs-2 {
      flex-direction: column; /* Apila los tabs verticalmente */
      gap: 4px; /* Reduce el gap entre tabs */
      padding: 4px;
      border-radius: 15px;
   }

   .landing-page-hero .tab-3 {
      width: 100%; /* Ocupa el ancho completo */
      padding: 8px 16px; /* Ajuste de padding para mejor ajuste */
   }
   .landing-page-hero .tab-4 {
      width: 100%; /* Ocupa el ancho completo */
      padding: 8px 16px; /* Ajuste de padding para mejor ajuste */
   }
}

.move-suscription-left,
.move-suscription-right,
.move-testimonio-left,
.move-testimonio-right {
   cursor: pointer;
}

.margin-top-70 {
   margin-top: 70px;
}

#accordionExample-RANDOMID {
   --bs-accordion-active-color: var(--bs-body-color);
   --bs-accordion-border-width: 0;
   --bs-accordion-btn-focus-border-color: transparent;
   --bs-accordion-btn-focus-box-shadow: none;
   --bs-accordion-border-color: transparent; /* Remove border lines */
   background-color: #ffffff; /* Set plain white background */
}

.accordion-item {
   border: none;
}

.accordion-collapse {
   overflow: hidden; /* Prevents content from showing during transition */
   transition: all 0.3s ease-in-out; /* Smooth transition for height and opacity */
}

.accordion-collapse.collapsing {
   height: 0; /* Ensures proper collapse animation */
   transition: height 0.3s ease-in-out; /* Specific height transition for collapsing state */
}

.accordion-collapse.show {
   opacity: 1; /* Full opacity when expanded */
}

.accordion-collapse {
   opacity: 0; /* Hidden by default until shown */
}

.service-info {
   background-color: var(--lightsurface-100);
   padding: 24px;
   border-radius: 20px;
   width: 100%; /* Approximate width from the image */
}

@media (max-width: 1250px) {
   .landing-page-hero .overlap-group {
      height: 533px;
      background-image: url("/image/Ellipse_5.png");
      background-repeat: no-repeat;
      background-position: center bottom;
   }

   .landing-page-hero .overlap-group_ellipse_4 {
      height: 533px;
      background-image: url("/image/Ellipse_4.png");
      background-repeat: no-repeat;
      background-position: center bottom;
   }

   .landing-page-hero .overlap-group_ellipse_3 {
      height: 533px;
      background-image: url("/image/Ellipse_3.png");
      background-repeat: no-repeat;
      background-position: center bottom;
   }

   .landing-page-hero .overlap-group_img_celular {
      height: 533px;
      background-image: url("/image/app_solicitud_camino_destino_1.png");
      background-repeat: no-repeat;
      background-position: 107% bottom;
      background-size: auto;
   }

   .landing-page-hero .overlap-group_img_celular1 {
      height: 533px;
      background-image: url("/image/home_variacion_servicio_activo1.png");
      background-repeat: no-repeat;
      background-position: calc(107% - 150px) bottom;
      background-size: auto;
   }

   .landing-page-hero .CTA {
      position: relative;
      width: 100%;
      height: 533px;
      background-color: var(--lightsurface-900);
      border-radius: 32px;
   }

   .landing-page-hero .listo-para {
      position: relative;
      align-self: stretch;
      margin-top: -1px;
      font-family: var(--heading-h2-mobile-24-bold-font-family);
      font-weight: var(--heading-h2-mobile-24-bold-font-weight);
      color: #ffffff;
      font-size: var(--heading-h2-mobile-24-bold-font-size);
      letter-spacing: var(--heading-h2-mobile-24-bold-letter-spacing);
      line-height: var(--heading-h2-mobile-24-bold-line-height);
      font-style: var(--heading-h2-mobile-24-bold-font-style);
   }

   .landing-page-hero .text-wrapper-4 {
      position: relative;
      /* width: 533px; */
      width: 100%;
      font-family: var(--heading-h4-mobile-18-18-font-family);
      font-weight: var(--heading-h4-mobile-18-18-font-weight);
      color: #ffffff;
      font-size: var(--heading-h4-mobile-18-18-font-size);
      letter-spacing: var(--heading-h4-mobile-18-18-letter-spacing);
      line-height: var(--heading-h4-mobile-18-18-line-height);
      font-style: var(--heading-h4-mobile-18-18-font-style);
   }
}

@media (max-width: 890px) {
   .landing-page-hero .overlap-group {
      height: 533px;
      background-image: url("/image/Ellipse_5.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_ellipse_4 {
      height: 533px;
      background-image: url("/image/Ellipse_4.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_ellipse_3 {
      height: 533px;
      background-image: url("/image/Ellipse_3.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_img_celular {
      height: 533px;
      background-image: url("/image/app_solicitud_camino_destino_1.png");
      background-repeat: no-repeat;
      background-position: 100% bottom;
      background-size: auto;
   }

   .landing-page-hero .overlap-group_img_celular1 {
      height: 533px;
      background-image: url("/image/home_variacion_servicio_activo1.png");
      background-repeat: no-repeat;
      background-position: calc(100% - 150px) bottom;
      background-size: auto;
   }

   .landing-page-hero .CTA {
      position: relative;
      width: 100%;
      height: 533px;
      background-color: var(--lightsurface-900);
      border-radius: 32px;
   }
}

@media (max-width: 890px) {
   .landing-page-hero .overlap-group_img_celular {
      height: 533px;
      background-image: url("/image/app_solicitud_camino_destino_1.png");
      background-repeat: no-repeat;
      background-position: 100% bottom;
      background-size: auto;
   }

   .landing-page-hero .overlap-group_img_celular1 {
      height: 533px;
      background-image: url("/image/home_variacion_servicio_activo1.png");
      background-repeat: no-repeat;
      background-position: calc(100% - 150px) bottom;
      background-size: auto;
   }

   .landing-page-hero .CTA {
      position: relative;
      width: 100%;
      height: 533px;
      background-color: var(--lightsurface-900);
      border-radius: 32px;
   }
}

@media (max-width: 683px) {
   .landing-page-hero .overlap-group {
      height: 645px;
      background-image: url("/image/Ellipse_5.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_ellipse_4 {
      height: 645px;
      background-image: url("/image/Ellipse_4.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_ellipse_3 {
      height: 645px;
      background-image: url("/image/Ellipse_3.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_img_celular1 {
      height: 645px;
      background-image: url("/image/home_variacion_servicio_activo_2.png");
      background-repeat: no-repeat;
      background-position: calc(100% - 0px) bottom;
      background-size: auto;
   }

   .landing-page-hero .overlap-group_img_celular {
      height: 645px;
      background-image: url("/image/app_solicitud_camino_destino_2.png");
      background-repeat: no-repeat;
      background-position: calc(100%) bottom;
      background-size: auto;
   }

   .landing-page-hero .CTA {
      position: relative;
      width: 100%;
      height: 646px;
      background-color: var(--lightsurface-900);
      border-radius: 32px;
   }
}

@media (max-width: 600px) {
   .landing-page-hero .overlap-group {
      height: 747px;
      background-image: url("/image/Ellipse_5.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_ellipse_4 {
      height: 747px;
      background-image: url("/image/Ellipse_4.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_ellipse_3 {
      height: 747px;
      background-image: url("/image/Ellipse_3.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      border-radius: 32px;
   }

   .landing-page-hero .overlap-group_img_celular1 {
      height: 747px;
      background-image: url("/image/home_variacion_servicio_activo_2.png");
      background-repeat: no-repeat;
      background-position: calc(100% - 0px) bottom;
      background-size: auto;
   }

   .landing-page-hero .overlap-group_img_celular {
      height: 747px;
      background-image: url("/image/app_solicitud_camino_destino_2.png");
      background-repeat: no-repeat;
      background-position: calc(100%) bottom;
      background-size: auto;
   }

   .landing-page-hero .CTA {
      position: relative;
      width: 100%;
      height: 750px;
      background-color: var(--lightsurface-900);
      border-radius: 32px;
   }
}

.aplicar-margen-top {
   margin-top: 0px;
}

@media (max-width: 766px) {
   .aplicar-margen-top {
      margin-top: 30px !important;
   }
}