/* Estilos principales */
body {
  margin: 0;
  padding: 0; /* Asegúrate de que no haya padding */
  line-height: normal;
  width: 100%; /* Asegura que ocupe todo el ancho de la ventana */
  box-sizing: border-box; /* Asegura que el ancho incluya los bordes y el padding */
}
.desktop-2 {
  width: 100%; /* Ya está configurado para ocupar el 100% */
  box-sizing: border-box; /* Asegura que el padding se incluya dentro del ancho */
  position: relative;
  background-color: var(--light-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs); /* Ajusta esto si es necesario */
  gap: 2em;
  line-height: 1.5;
  letter-spacing: normal;
  font-size: 2rem;
}

.background-content-icon {
  width: 100%;
  height: 100vh; /* Esto asegura que la imagen ocupe todo el alto de la ventana */
  object-fit: cover; /* Esto estira la imagen para cubrir todo el contenedor */
  position: absolute;
  left: 0;
  top: 0;
  transform: none; /* Elimina la escala que podría estar distorsionando la imagen */
}


.wrapper-background-content {
  width: 100%;
  height: 1px;
  position: relative;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-menu {
  width: 42px;
  height: 28px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.logotipo-windows-pros-2 {
  height: 142px;
  width: 142px;
  position: relative;
  object-fit: cover;
}

.logotipo-windows-pros-2-wrapper {
  width: 100%;
  max-width: 484px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.frame-child {
  width: 100%;
  max-width: 583px;
  height: 131px;
  position: relative;
  border-radius: var(--br-21xl);
  background-color: var(--color-midnightblue);
  display: none;
}

.llama-ya {
  font-weight: 800;
}

.span {
  font-weight: 600;
  color: red;
}

.gratis {
  color: var(--color-darkturquoise);
}

.llama-ya-y-container {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.1px;
  line-height: 40px;
  z-index: 3;
  font-family: inherit;
}

.telephonev-1-icon {
  height: 42px;
  width: 42px;
  position: relative;
  object-fit: cover;
  z-index: 3;
}

.placeholder {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  z-index: 3;
}

.placeholder-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  box-sizing: border-box;
  min-width: 186px;
}

.telephonev-1-parent {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
}

.frame-wrapper1 {
  align-self: stretch;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 65px;
  font-size: 40px;
}

.frame-div,
.frame-wrapper1,
.rectangle-parent {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.rectangle-parent {
  flex: 1;
  border-radius: var(--br-21xl);
  background-color: var(--color-midnightblue);
  flex-direction: column;
  justify-content: flex-start;
  padding: 27px 58px;
  gap: var(--gap-xs);
  z-index: 2;
}

.frame-div {
  width: 100%;
  max-width: 629px;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 var(--padding-4xl);
}

.bill-de-electricidad,
.reduce-un-50 {
  margin: 0;
}

.reduce-un-50-container {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 55px;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  max-width: 100%;
}

.h1 {
  align-self: stretch;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  max-width: 100%;
}

.cambiando-las-ventanas {
  margin: 0;
  flex: 1;
  
  position: relative;
  left: -20px; /* Ajusta el valor según sea necesario */
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 40px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}

.h4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 589px;
  height: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xl) var(--padding-7xl) 0;
  box-sizing: border-box;
  max-width: 100%;
}

.try-for-free {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 20px;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: center;
  display: inline-block;
  min-width: 116px;
}

.text-button {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.master-button {
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  overflow: hidden;
  padding: var(--padding-base) var(--padding-41xl);
}

.action-content,
.big-button,
.master-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.action-content {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 54px;
  left: 1px;
  align-items: flex-start;
  z-index: 1;
}
/* Efecto al pasar el mouse por encima */
.action-content:hover .master-button {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade una sombra sutil */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza la transición */
}

.action-content:hover .try-for-free {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Añade una sombra al texto */
}

/* Efecto al hacer clic */
.action-content:active .master-button {
  transform: scale(0.95); /* Disminuye ligeramente el tamaño del botón al hacer clic */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Cambia la sombra para dar un efecto de presionado */
  transition: transform 0.1s ease, box-shadow 0.1s ease; /* Suaviza la transición */
}

.action-content:active .try-for-free {
  text-shadow: none; /* Elimina la sombra del texto al hacer clic */
}

.h4-parent {
  height: 106px;
  flex: 1;
  position: relative;
  max-width: 100%;
}

.hero-content {
  width: 100%;
  max-width: 603px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-smi);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--font-size-9xl);
  color: var(--color-midnightblue);
}

.container,
.padding-bottom {
  width: 100%;
  max-width: 549px;
  height: 92px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.padding-bottom {
  width: 100%;
  max-width: 1437px;
  height: 218px;
}

.desktop-hero-light-3 {
  align-self: stretch;
  overflow: hidden;
  align-items: flex-start;
  padding: 100px 0 var(--padding-4xs) 100px; /* Reduce el valor aquí */
  box-sizing: border-box;
  gap: 7px;
  margin-top: -71px;
  text-align: left;
  font-size: var(--font-size-29xl);
  color: var(--text);
}

.desktop-hero-light-3,
.frame-group,
.frame-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
}
.frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 100%;
}

.frame-group,
.frame-wrapper {
  align-items: flex-start;
}

.frame-group {
  align-self: stretch;
  gap: var(--gap-10xl);
}

.frame-wrapper {
  width: 100%;
  max-width: 775px;
  padding: 43px 0 0;
  box-sizing: border-box;
  min-width: 775px;
}

.navigation-child {
  height: 68px;
  width: 100%;
  max-width: 655px;
  position: relative;
  border-radius: var(--br-71xl);
  background-color: var(--color-gray-200);
  display: none;
}

.inicio {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  min-width: 42px;
  z-index: 2;
}

.menu-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs) 0 0;
}

.beneficios,
.informacin {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  z-index: 2;
}

.beneficios {
  width: 81px;
  min-width: 81px;
}

.informacin {
  min-width: 94px;
}

.menu-items1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-5xs) 0 0;
}

.contacto {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  min-width: 71px;
  z-index: 2;
}

.menu,
.menu-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.menu {
  margin: 0;
  flex-direction: row;
  gap: var(--gap-xl);
  white-space: nowrap;
  text-align: center;
  font-size: var(--font-size-mini);
  color: var(--color-midnightblue);
  font-family: var(--h3);
}

.menu-wrapper {
  flex-direction: column;
  padding: var(--padding-7xs) 0 0;
  box-sizing: border-box;
  max-width: 100%;
}

.button-child {
  height: 41px;
  width: 100%;
  max-width: 186px;
  position: relative;
  border-radius: var(--br-71xl);
  background-color: var(--color-midnightblue);
  display: none;
}

/* Asegura que el texto dentro del botón se mantenga blanco */
.cotiza-ya {
  text-decoration: none;
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 28px;
  font-family: var(--h3);
  color: var(--light-text); /* Mantiene el texto blanco */
  text-align: center;
  display: inline-block;
  min-width: 109px;
  z-index: 3;
  transition: color 0.3s ease;
}

.cotiza-ya:hover,
.cotiza-ya:active {
  color: var(--light-text); /* Asegura que el color del texto se mantenga blanco en ambos estados */
}

.button,
.frame-parent,
.navigation {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* Efectos para los enlaces del menú de navegación */
.menu a {
  transition: color 0.3s ease, transform 0.3s ease;
}

.menu a:hover {
  color: var(--color-lightblue); /* Cambia el color del texto al pasar el mouse */
  transform: scale(1.1); /* Aumenta ligeramente el tamaño del texto */
}

.menu a:active {
  color: var(--color-darkblue); /* Cambia el color del texto al hacer clic */
  transform: scale(0.9); /* Disminuye ligeramente el tamaño del texto al hacer clic */
}

/* Efectos para el botón COTIZA YA */
.button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-7xs) var(--padding-19xl) 7px 39px;
  background-color: var(--color-midnightblue);
  border-radius: var(--br-71xl);
  justify-content: flex-start;
  white-space: nowrap;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color:var(--color-midnightblue); /* Cambia el color de fondo al pasar el mouse */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón */
}

.button:active {
  background-color:var(--color-midnightblue);/* Cambia el color de fondo al hacer clic */
  transform: scale(0.95); /* Disminuye ligeramente el tamaño del botón al hacer clic */
}


.frame-parent,
.navigation {
  max-width: 100%;
}

.navigation {
  border-radius: var(--br-71xl);
  background-color: var(--color-gray-200);
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-11xl) var(--padding-smi) 41px;
  box-sizing: border-box;
  gap: 31px;
  z-index: 1;
}

.frame-parent {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.desktop-header-light-3,
.desktop-header-light-3-inner {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.desktop-header-light-3-inner {
  flex-direction: row;
  padding: 0 var(--padding-15xl) 0 37px;
}

.desktop-header-light-3 {
  background-color: var(--light-text);
  overflow: hidden;
  flex-direction: column;
  padding: 0 0 331px;
  gap: 44px;
}

.background-content {
  align-self: stretch;
  height: 1px;
  position: relative;
  display: none;
}

.background-content1,
.background-content2 {
  width: 100%;
  max-width: 1707.7px;
  height: 0;
  position: relative;
  display: none;
}

.dale-vida-a {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 1; /* Ajusta este valor según la cantidad de espacio que desees entre líneas */
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}


.dale-vida-a-tu-hogar-y-protege-wrapper {
  width: 100%;
  max-width: 1506px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-9xl) var(--padding-mid);
  box-sizing: border-box;
}

.placeholder-image-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: var(--br-21xl);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}

.window-2-1 {
  height: 83px;
  width: 82px;
  position: relative;
  object-fit: cover;
}

.window-image {
  width: 100%;
  max-width: 246px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.ventanas-de-impacto1 {
  line-height: 20px;
}

.ventanas-de-impacto {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.proteja-su-hogar {
  white-space: pre-wrap;
}

.proteja-su-hogar-de-tormentas1 {
  line-height: 20px;
}

.y-vientos-fuertes1 {
  line-height: 15px;
}

.y-vientos-fuertes {
  white-space: pre-wrap;
}

.proteja-su-hogar-de-tormentas {
  margin: 0;
}

.ventanas-de-impacto-container {
  flex: 1;
  position: relative;
}

.image-caption {
  width: 100%;
  max-width: 239px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-2xs);
  box-sizing: border-box;
}

.placeholder-image-parent {
  width: 100%;
  max-width: 281px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-xs);
}

.gallery-placeholders-icon, .icon {
  width: 80%; /* Ajusta la imagen al 80% del contenedor */
  margin-bottom: 15px;
}
.icon {
  max-width: 100%;
  height: 70px; /* Altura fija para todos los íconos */
  object-fit: contain; /* Asegura que el ícono se ajuste sin distorsión */
}

.gallery-images{
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.gallery-images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}


.gallery-images-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px; /* Espacio entre la imagen, ícono y textos */
}
.title {
  font-weight: bold;
  color: var(--color-midnightblue); /* Ajusta según el color que necesites */
  font-size: 1rem;
  display: flex;
  align-items: center;
  margin-bottom: 5px; /* Reduce el espacio debajo del título */
}

.description {
  font-size: 0.875rem;
  color: black;
  display: flex;
  align-items: center;
  margin-top: 0; /* Elimina el margen superior */
}
.windows-1-icon {
  width: 58px;
  height: 60px;
  position: relative;
  object-fit: contain;
}

.window-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-3xl) var(--padding-base) 0;
}

.double-hung-1-icon {
  width: 58px;
  height: 60px;
  position: relative;
  object-fit: contain;
}

.double-hung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-7xs) var(--padding-4xs) 0;
}

.awning-1-icon,
.view-1-icon {
  height: 92px;
  width: 91px;
  position: relative;
  object-fit: cover;
}

.view-1-icon {
  width: 70px;
  height: 73px;
}

.casement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 5px;
}

.gallery-types,
.window-type-parent {
  display: flex;
  flex-direction: row;
  max-width: 100%;
}

.window-type-parent {
  width: 100%;
  max-width: 992px;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.gallery-types {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.custom1 {
  line-height: 24px;
}

.custom {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.la-tradicin-que {
  line-height: 20px;
}

.darle-vida-y {
  line-height: 15px;
}

.la-tradicin-que-necesitas-par {
  margin: 0;
}

.custom-la-tradicin-container {
  align-self: stretch;
  position: relative;
}

.custom-la-tradicin-que-neces-wrapper {
  width: 100%;
  max-width: 235px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs) 0 0;
  box-sizing: border-box;
}

.double-hung2 {
  line-height: 24px;
}

.double-hung1 {
  margin-block-start: 0;
  margin-block-end: 8px;
}

.estilo-clsico-de {
  line-height: 20px;
}

.estilo-clsico-de-doble-colgad {
  margin-block-start: 0;
  margin-block-end: 8px;
}

.funcionalidad-es-muy {
  line-height: 10px;
}

.funcionalidad-es-muy-convenien {
  margin: 0;
}

.double-hung-estilo-clsico-container {
  width: 100%;
  max-width: 252px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.awning1 {
  line-height: 24px;
}

.awning {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.toldo-la-combinacin {
  line-height: 20px;
}

.estilo-simplicidad {
  line-height: 15px;
}

.b {
  line-height: 20px;
  font-family: var(--h3);
}

.toldo-la-combinacin-perfecta {
  margin: 0;
}

.awning-toldo-la-container {
  width: 100%;
  max-width: 251px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.casement1 {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.marco-la-forma {
  margin: 0;
}

.casement-marco-la-container {
  align-self: stretch;
  position: relative;
  line-height: 20px;
}

.casement-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
  min-width: 175px;
}

.awning-description,
.gallery-descriptions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.awning-description {
  width: 100%;
  max-width: 568px;
  gap: var(--gap-28xl);
}

.gallery-descriptions {
  gap: 59px;
}

.frame-parent1 {
  display: flex;
  justify-content: flex-start;
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.frame-parent1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around; /* Distribuye el espacio uniformemente */
  gap: 28px;
  max-width: 100%;
  font-size: var(--font-size-mini);
  color: var(--color-darkslategray-100);
}

.las-ventanas-energticamente,
.qu-son-las {
  margin: 0;
  position: relative;
  letter-spacing: 0.2px;
  font-family: inherit;
}

.qu-son-las {
  width: 100%;
  max-width: 584px;
  font-size: inherit;
  line-height: 55px;
  font-weight: 700;
  display: inline-block;
  max-width: 100%;
}

.las-ventanas-energticamente {
  align-self: stretch;
  font-size: var(--font-size-9xl);
  line-height: 40px;
  font-weight: 400;
  color: var(--second-text);
}

.features-paragraph {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8xl);
  max-width: 100%;
}

.try-for-free1 {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.1px;
  line-height: 28px;
  display: inline-block;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: left;
  min-width: 113px;
}

.text-button1 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.master-button1 {
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  overflow: hidden;
  padding: var(--padding-base) var(--padding-42xl);
}

.big-button1,
.master-button1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.action-content1,
.features-content,
.features-paragraph-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.action-content1 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
}

.features-content,
.features-paragraph-parent {
  max-width: 100%;
}

.features-paragraph-parent {
  align-self: stretch;
  gap: var(--gap-21xl);
}

.features-content {
  flex: 1;
  padding: var(--padding-2xl) 0 0;
  box-sizing: border-box;
  min-width: 457px;
}

.douglas-sheppard-9ryfg8swrvo-u-icon {
  align-self: stretch;
  height: 647px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.screen-content {
  height: 690px;
  width: 100%;
  max-width: 628px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10.8px var(--padding-12xs);
  box-sizing: border-box;
  min-width: 628px;
  max-width: 100%;
}

.features,
.features-content-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.features-content-parent {
  flex: 1;
  justify-content: flex-start;
  gap: var(--gap-22xl);
}

.features {
  width: 100%;
  max-width: 1492px;
  justify-content: flex-end;
  padding: 0 var(--padding-41xl) var(--padding-5xl);
  box-sizing: border-box;
  text-align: left;
  color: var(--color-midnightblue);
}

.beneficios1 {
  margin: 0;
  width: 352px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 55px;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
}

.beneficios-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
}

.estas-son-algunas {
  margin: 0;
  width: 1056px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 40px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 102%;
}

.h41 {
  align-self: stretch;
  overflow: hidden;
  flex-direction: row;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 var(--padding-3xs) var(--padding-3xs);
  box-sizing: border-box;
  font-size: var(--font-size-9xl);
  color: var(--color-darkslategray-100);
}

.benefits-content,
.benefits-header,
.h41 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}

.benefits-header {
  width: 1050px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 17px;
}

.benefits-content {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  font-size: 64px;
  color: var(--color-midnightblue);
}

.bill-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.ahorra-en-la,
.factura-de-energa {
  margin: 0;
}

.ahorra-en-la-container {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.feature-style-2,
.h3 {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.h3 {
  flex-direction: row;
  padding: var(--padding-3xs);
}

.feature-style-2 {
  flex-shrink: 0;
  flex-direction: column;
  padding: 0 80px 522px;
  gap: var(--gap-3xs);
}

.credit-cards-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.e-incentivos-fiscales,
.recibe-crditos {
  margin: 0;
}

.recibe-crditos-e-container {
  flex: 1;
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.h31 {
  width: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
}

.text-paragraphe {
  align-self: stretch;
  flex: 1;
  overflow: hidden;
}

.feature-style-21 {
  height: 664px;
  width: 100%;
  max-width: 510px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-26xl);
  box-sizing: border-box;
  gap: var(--gap-3xs);
}

.house-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.aumenta-el-valor,
.de-tu-vivienda {
  margin: 0;
}

.aumenta-el-valor-container {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.feature-style-22,
.h32 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs);
}

.feature-style-22 {
  width: 405px;
  flex-shrink: 0;
  flex-direction: column;
  padding: 0 var(--padding-xl) 507px;
  box-sizing: border-box;
  gap: var(--gap-3xs);
}

.benefits-list,
.items,
.row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}

.row {
  width: 100%;
  max-width: 1387px;
  flex-direction: row;
  gap: var(--gap-33xl);
}

.benefits-list,
.items {
  box-sizing: border-box;
}

.items {
  height: 215px;
  flex-direction: column;
  padding: 0;
}

.benefits-list {
  flex-direction: row;
  padding: 0 var(--padding-sm);
}

.secure-shield-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.de-tu-hogar,
.mejora-la-seguridad {
  margin: 0;
}

.mejora-la-seguridad-container {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.feature-style-23,
.h33 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs);
}

.feature-style-23 {
  width: 478px;
  flex-shrink: 0;
  flex-direction: column;
  padding: 0 var(--padding-xl) var(--padding-419xl);
  box-sizing: border-box;
  gap: var(--gap-3xs);
}

.power-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.alarga-la-vida,
.tus-electrodomsticos {
  margin: 0;
}

.alarga-la-vida-container {
  flex: 1;
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
  display: inline-block;
  max-width: 100%;
}

.feature-style-24,
.h34 {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.h34 {
  align-self: stretch;
  flex-direction: row;
  padding: var(--padding-3xs);
}

.feature-style-24 {
  width: 433px;
  flex-shrink: 0;
  flex-direction: column;
  padding: 0 var(--padding-10xl) var(--padding-419xl);
  gap: var(--gap-3xs);
}

.low-volume-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.mejora-la-comodidad,
.y-reduce-el {
  margin: 0;
}

.mejora-la-comodidad-container {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.feature-style-25,
.h35,
.items1,
.row1 {
  display: flex;
  justify-content: flex-start;
}

.h35 {
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  padding: var(--padding-3xs);
}

.feature-style-25,
.items1,
.row1 {
  max-width: 100%;
}

.feature-style-25 {
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  padding: 0 73px var(--padding-419xl);
  box-sizing: border-box;
  gap: var(--gap-3xs);
}

.items1,
.row1 {
  align-self: stretch;
  align-items: flex-start;
}

.row1 {
  overflow: hidden;
  flex-direction: row;
  gap: var(--gap-33xl);
  flex-shrink: 0;
}

.items1 {
  height: 269px;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}

.video-screen-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 8px;
  transform: scale(1.192);
}

.video,
.wrapper-video-screen {
  height: 658.3px;
  justify-content: center;
}

.wrapper-video-screen {
  width: 100%;
  max-width: 1177.3px;
  position: relative;
  border-radius: 81.48px;
  max-width: 100%;
  display: flex;
  align-items: center;
}

.video {
  align-self: stretch;
  flex-direction: row;
  padding: 0 var(--padding-2xl) 0 var(--padding-xl);
  box-sizing: border-box;
}

.benefits-content-parent,
.frame-wrapper2,
.video {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}

.benefits-content-parent {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: 80px;
}

.frame-wrapper2 {
  width: 100%;
  max-width: 1467px;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 var(--padding-5xs) 93.7px;
  box-sizing: border-box;
  font-size: var(--h3-size);
  color: var(--text);
}

.a-disfrutar-de,
.haga-el-cambio {
  margin: 0;
}

.estaremos-listos-para,
.haga-el-cambio-container {
  margin: 0;
  position: relative;
  letter-spacing: 0.2px;
  font-family: inherit;
}

.haga-el-cambio-container {
  align-self: stretch;
  font-size: inherit;
  line-height: 55px;
  font-weight: 700;
}

.estaremos-listos-para {
  width: 888.3px;
  font-size: var(--font-size-9xl);
  line-height: 40px;
  font-weight: 400;
  color: var(--second-text);
  display: inline-block;
  max-width: 100%;
}

.testimonial-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 11px;
  max-width: 100%;
}

.next-1-2 {
  width: 75px;
  height: 77px;
  position: relative;
  object-fit: contain;
}

.left-button-icon {
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.divavarta-icon {
  height: 90px;
  width: 90px;
  position: relative;
  border-radius: 45px;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.heading-3 {
  align-self: stretch;
  position: relative;
  line-height: 23px;
  font-weight: 500;
}

.cliente {
  width: 67.3px;
  position: relative;
  font-size: var(--font-size-mini);
  line-height: 28.5px;
  display: flex;
  align-items: center;
}

.author-info,
.author-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.author-name {
  align-self: stretch;
  justify-content: flex-start;
}

.author-info {
  flex: 1;
  justify-content: flex-end;
  padding: 0 0 16.5px;
  box-sizing: border-box;
  min-width: 103px;
}

.testimonial-quote {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-2xl);
}

.testimonial-quote-wrapper {
  width: 269px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 19px 0 0;
  box-sizing: border-box;
}

.svg-icon {
  height: 44px;
  width: 45px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.frame-parent2,
.testimonial-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.frame-parent2 {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.testimonial-content-wrapper {
  align-self: stretch;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-12xs);
  box-sizing: border-box;
}

.super-contento-y {
  width: 435px;
  position: relative;
  font-size: var(--h3-size);
  line-height: 32.3px;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.divtestimonials-item,
.navigation-left-button {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}

.divtestimonials-item {
  flex: 1;
  border-radius: 16px;
  background-color: #f9f9f9;
  flex-direction: column;
  align-items: flex-start;
  padding: 55px var(--padding-5xl) 59px 68px;
  box-sizing: border-box;
  gap: var(--gap-xl);
  min-width: 349px;
}

.navigation-left-button {
  width: 100%;
  max-width: 659px;
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
}

.next-1-1 {
  width: 76px;
  height: 77px;
  position: relative;
  object-fit: cover;
}

.testimonial-navigation-right {
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.testimonial-navigation-left {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}

.testimonial-navigation {
  width: 100%;
  max-width: 818px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-12xs);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--font-size-lgi);
  color: var(--color-gray-100);
  font-family: var(--font-roboto);
}

.testimonial-container,
.testimonial-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.testimonial-wrapper {
  width: 100%;
  max-width: 1190px;
  gap: 43px;
  flex-shrink: 0;
  max-width: 124%;
}

.testimonial-container {
  width: 966px;
  padding: 0 0 var(--padding-28xl);
  box-sizing: border-box;
  min-width: 966px;
  min-height: 761px;
  max-width: 100%;
}

.contctanos {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.contact-title {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--h3-size);
  color: var(--text);
  font-family: var(--h3);
}

.your-name,
.your-email {
  width: 100%;
  border: none;
  background-color: transparent;
  font-family: var(--font-roboto);
  font-size: var(--font-size-mini);
  color: var(--background);
  letter-spacing: 0.1px;
  line-height: 16px;
  outline: none; /* Quita el borde por defecto de los inputs */
}
.input {
  align-self: stretch;
  border-radius: var(--br-20xl);
  background-color: var(--color-whitesmoke-100);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center; /* Cambiado a center para alinear el texto dentro del input */
  padding: var(--padding-mid) var(--padding-xl);
}

.your-email {
  width: 100%;
}

.input1,
.input2 {
  border: 1px solid var(--color-gainsboro-100);
  background-color: var(--color-whitesmoke-100);
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.input1 {
  align-self: stretch;
  border-radius: var(--br-20xl);
  background-color: var(--color-whitesmoke-100);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center; /* Cambiado a center para alinear el texto dentro del input */
  padding: var(--padding-mid) var(--padding-xl);
}

.input2 {
  height: 193px;
  width: auto;
  outline: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: var(--padding-4xl) var(--padding-xl);
  font-family: var(--font-roboto);
  font-size: var(--font-size-mini);
  color: var(--background);
}

.send {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 20px;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: left;
  display: inline-block;
  min-width: 53px;
  transition: color 0.3s ease; /* Transición suave para el color */
}

.master-button2:hover .send {
  color: #ffffff; /* Asegura que el texto se mantenga visible (blanco) al pasar el mouse */
}

.master-button2:active .send {
  color: #e0e0e0; /* Cambia a un tono más claro al hacer clic */
}

.master-button2,
.text-button2 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.master-button2 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) 46px;
  background-color: var(--color-darkturquoise);
  border-radius: var(--br-16xl);
  transition: background-color 0.3s ease, transform 0.3s ease; /* Añadir transición suave */
}

.master-button2:hover {
  background-color: #008b8b; /* Cambia a un tono más oscuro al pasar el mouse */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

.master-button2:active {
  background-color: #006b6b; /* Cambia a un tono aún más oscuro al hacer clic */
  transform: scale(0.95); /* Disminuye ligeramente el tamaño para simular un efecto de clic */
}

.sign-up-form,
.testimonial-container-parent {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}

.sign-up-form {
  width: 444px;
  box-shadow: var(--shadow);
  border-radius: 20px;
  background-color: var(--light-text);
  border: 1px solid #ddd;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-31xl) 49px;
  gap: 45px;
  min-width: 444px;
  z-index: 1;
  font-size: var(--font-size-mini);
  color: var(--background);
  font-family: var(--font-roboto);
  align-items: center;
}

.testimonial-container-parent {
  flex-direction: row;
  align-items: flex-end;
  row-gap: 20px;
}

.testimonials {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 48px;
  box-sizing: border-box;
  text-align: left;
}

.content,
.frame-section,
.testimonials {
  display: flex;
  max-width: 100%;
}

.frame-section {
  width: 100%;
  max-width: 1529px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Cambia de flex-end a center */
  justify-content: center; /* Cambia de flex-start a center para centrar verticalmente */
  gap: 82px;
  text-align: center;
  font-size: var(--font-size-29xl);
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin: 0 auto; /* Esto asegura que la sección esté centrada horizontalmente en la pantalla */
}

.content {
  width: 100%; /* Ocupa el 100% del ancho del contenedor padre */
  max-width: 100%; /* Elimina cualquier límite en el ancho máximo */
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl) 182px;
  box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho */
}


.footer-child {
  height: 223px;
  width: 100%;
  max-width: 1741px;
  position: relative;
  background-color: var(--color-midnightblue);
  display: none;
}

.linea-1-2 {
  width: 110px;
  height: 113px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.top-footer {
  width: 185px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.bxbx-map-icon {
  height: 32px;
  width: 26px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}

.map {
  width: 100%;
  max-width: 456px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.katy-gap-rd,
.united-states {
  margin: 0;
}

.katy-gap-rd-container {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  z-index: 1;
}

.footer-content,
.location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}

.location {
  align-self: stretch;
  gap: var(--gap-mini);
}

.footer-content {
  width: 100%;
  max-width: 467px;
  padding: var(--padding-lg) 0 0;
  box-sizing: border-box;
}

.phone-icon {
  margin: 0;
  align-self: stretch;
  height: 34px;
}

.phone-number {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  display: inline-block;
  min-width: 110px;
  z-index: 1;
}

.contact-info,
.phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.phone {
  width: 110px;
  gap: var(--gap-mini);
  align-items: center;
}

.contact-info {
  width: 100%;
  max-width: 277px;
  padding: var(--padding-base) 0 0;
  box-sizing: border-box;
}

.placeholder1 {
  width: 1px;
  flex: 1;
  position: relative;
  background-color: #d9d9d9;
  z-index: 1;
}

.logo-container {
  height: 121px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-7xl) 0 0;
  box-sizing: border-box;
}

.energy-star-logosvg-1-icon {
  width: 63px;
  height: 66px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.energy-star {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
}

.qrtop500-logo-blue-002-1-icon {
  width: 71px;
  height: 67px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.q-r-scan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-3xl);
}

.kisspng-united-states-logo-mad-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

.logos,
.made-in-u-s-a {
  display: flex;
  box-sizing: border-box;
}

.made-in-u-s-a {
  height: 97px;
  width: 92px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
}

.logos {
  flex: 1;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--padding-12xs) 0 0;
  min-width: 241px;
  max-width: 100%;
  gap: var(--gap-xl);
}

.good-housekeeping-logo-e9018b9-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

.good-housekeeping {
  height: 93px;
  width: 125px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
  box-sizing: border-box;
}

.certification-logos {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: var(--gap-21xl);
  max-width: 100%;
}

.certifications,
.desktop-2,
.footer {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

.certifications {
  width: 100%;
  max-width: 536px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  max-width: 100%;
}

.desktop-2,
.footer {
  text-align: center;
  color: var(--light-text);
  font-family: var(--h3);
}

.footer {
  background-color: var(--color-midnightblue);
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-28xl) var(--padding-42xl) var(--padding-26xl) 62px;
  gap: 51px;
  max-width: 100%;
  font-size: var(--font-size-base);
}

.desktop-2 {
  width: 100%;
  position: relative;
  background-color: var(--light-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs) 0 0;
  gap: 2em;
  line-height: 1.5;
  letter-spacing: normal;
  font-size: 2rem;
}
#text-content {
  max-height: 250px; /* Ajusta este valor según cuánto texto quieras mostrar inicialmente */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

#text-content.expanded {
  max-height: 500px; /* Aumenta este valor para asegurarte de que todo el texto sea visible */
}

#toggle-button {
  cursor: pointer;
}
.frame-section111{
display: none;
}





@media screen and (max-width: 1500px) {
  
  .frame-wrapper {
    flex: 1;
  }
 
  .items1 {
    height: auto;
  }
  .sign-up-form,
  .testimonial-container {
    flex: 1;
  }
  .footer,
  .testimonial-container-parent {
    flex-wrap: wrap;
  }
  .desktop-2 {
    font-size: 1.5rem;
    padding: 0 var(--padding-9xs);
    gap: 1.5em;
  }
.desktop-2 {
  width: 100%; /* Ya está configurado para ocupar el 100% */
  box-sizing: border-box; /* Asegura que el padding se incluya dentro del ancho */
  position: relative;
  background-color: var(--light-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs); /* Ajusta esto si es necesario */
  gap: 2em;
  line-height: 1.5;
  letter-spacing: normal;
  font-size: 2rem;
}

.background-content-icon {
  width: 100%;
  height: 100vh; /* Esto asegura que la imagen ocupe todo el alto de la ventana */
  object-fit: cover; /* Esto estira la imagen para cubrir todo el contenedor */
  position: absolute;
  left: 0;
  top: 0;
  transform: none; /* Elimina la escala que podría estar distorsionando la imagen */
}


.wrapper-background-content {
  width: 100%;
  height: 1px;
  position: relative;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-menu {
  width: 42px;
  height: 28px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.logotipo-windows-pros-2 {
  height: 142px;
  width: 142px;
  position: relative;
  object-fit: cover;
}

.logotipo-windows-pros-2-wrapper {
  width: 100%;
  max-width: 484px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.frame-child {
  width: 100%;
  max-width: 583px;
  height: 131px;
  position: relative;
  border-radius: var(--br-21xl);
  background-color: var(--color-midnightblue);
  display: none;
}

.llama-ya {
  font-weight: 800;
}

.span {
  font-weight: 600;
  color: red;
}

.gratis {
  color: var(--color-darkturquoise);
}

.llama-ya-y-container {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.1px;
  line-height: 40px;
  z-index: 3;
  font-family: inherit;
}

.telephonev-1-icon {
  height: 42px;
  width: 42px;
  position: relative;
  object-fit: cover;
  z-index: 3;
}

.placeholder {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  z-index: 3;
}

.placeholder-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  box-sizing: border-box;
  min-width: 186px;
}

.telephonev-1-parent {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
}

.frame-wrapper1 {
  align-self: stretch;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 65px;
  font-size: 40px;
}

.frame-div,
.frame-wrapper1,
.rectangle-parent {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.rectangle-parent {
  flex: 1;
  border-radius: var(--br-21xl);
  background-color: var(--color-midnightblue);
  flex-direction: column;
  justify-content: flex-start;
  padding: 27px 58px;
  gap: var(--gap-xs);
  z-index: 2;
}

.frame-div {
  width: 100%;
  max-width: 629px;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 var(--padding-4xl);
}

.bill-de-electricidad,
.reduce-un-50 {
  margin: 0;
}

.reduce-un-50-container {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 55px;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  max-width: 100%;
}

.h1 {
  align-self: stretch;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  max-width: 100%;
}

.cambiando-las-ventanas {
  margin: 0;
  flex: 1;
  
  position: relative;
  left: -20px; /* Ajusta el valor según sea necesario */
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 40px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}

.h4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 589px;
  height: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xl) var(--padding-7xl) 0;
  box-sizing: border-box;
  max-width: 100%;
}

.try-for-free {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 20px;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: center;
  display: inline-block;
  min-width: 116px;
}

.text-button {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.master-button {
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  overflow: hidden;
  padding: var(--padding-base) var(--padding-41xl);
}

.action-content,
.big-button,
.master-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.action-content {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 54px;
  left: 1px;
  align-items: flex-start;
  z-index: 1;
}
/* Efecto al pasar el mouse por encima */
.action-content:hover .master-button {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade una sombra sutil */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza la transición */
}

.action-content:hover .try-for-free {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Añade una sombra al texto */
}

/* Efecto al hacer clic */
.action-content:active .master-button {
  transform: scale(0.95); /* Disminuye ligeramente el tamaño del botón al hacer clic */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Cambia la sombra para dar un efecto de presionado */
  transition: transform 0.1s ease, box-shadow 0.1s ease; /* Suaviza la transición */
}

.action-content:active .try-for-free {
  text-shadow: none; /* Elimina la sombra del texto al hacer clic */
}

.h4-parent {
  height: 106px;
  flex: 1;
  position: relative;
  max-width: 100%;
}

.hero-content {
  width: 100%;
  max-width: 603px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-smi);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--font-size-9xl);
  color: var(--color-midnightblue);
}

.container,
.padding-bottom {
  width: 100%;
  max-width: 549px;
  height: 92px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.padding-bottom {
  width: 100%;
  max-width: 1437px;
  height: 218px;
}

.desktop-hero-light-3 {
  align-self: stretch;
  overflow: hidden;
  align-items: flex-start;
  padding: 100px 0 var(--padding-4xs) 100px; /* Reduce el valor aquí */
  box-sizing: border-box;
  gap: 7px;
  margin-top: -71px;
  text-align: left;
  font-size: var(--font-size-29xl);
  color: var(--text);
}

.desktop-hero-light-3,
.frame-group,
.frame-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
}

.frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 100%;
}

.frame-group,
.frame-wrapper {
  align-items: flex-start;
}

.frame-group {
  align-self: stretch;
  gap: var(--gap-10xl);
}

.frame-wrapper {
  width: 100%;
  max-width: 775px;
  padding: 43px 0 0;
  box-sizing: border-box;
  min-width: 775px;
}

.navigation-child {
  height: 68px;
  width: 100%;
  max-width: 655px;
  position: relative;
  border-radius: var(--br-71xl);
  background-color: var(--color-gray-200);
  display: none;
}

.inicio {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  min-width: 42px;
  z-index: 2;
}

.menu-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs) 0 0;
}

.beneficios,
.informacin {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  z-index: 2;
}

.beneficios {
  width: 81px;
  min-width: 81px;
}

.informacin {
  min-width: 94px;
}

.menu-items1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-5xs) 0 0;
}

.contacto {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  min-width: 71px;
  z-index: 2;
}

.menu,
.menu-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.menu {
  margin: 0;
  flex-direction: row;
  gap: var(--gap-xl);
  white-space: nowrap;
  text-align: center;
  font-size: var(--font-size-mini);
  color: var(--color-midnightblue);
  font-family: var(--h3);
}

.menu-wrapper {
  flex-direction: column;
  padding: var(--padding-7xs) 0 0;
  box-sizing: border-box;
  max-width: 100%;
}

.button-child {
  height: 41px;
  width: 100%;
  max-width: 186px;
  position: relative;
  border-radius: var(--br-71xl);
  background-color: var(--color-midnightblue);
  display: none;
}

/* Asegura que el texto dentro del botón se mantenga blanco */
.cotiza-ya {
  text-decoration: none;
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 28px;
  font-family: var(--h3);
  color: var(--light-text); /* Mantiene el texto blanco */
  text-align: center;
  display: inline-block;
  min-width: 109px;
  z-index: 3;
  transition: color 0.3s ease;
}

.cotiza-ya:hover,
.cotiza-ya:active {
  color: var(--light-text); /* Asegura que el color del texto se mantenga blanco en ambos estados */
}

.button,
.frame-parent,
.navigation {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* Efectos para los enlaces del menú de navegación */
.menu a {
  transition: color 0.3s ease, transform 0.3s ease;
}

.menu a:hover {
  color: var(--color-lightblue); /* Cambia el color del texto al pasar el mouse */
  transform: scale(1.1); /* Aumenta ligeramente el tamaño del texto */
}

.menu a:active {
  color: var(--color-darkblue); /* Cambia el color del texto al hacer clic */
  transform: scale(0.9); /* Disminuye ligeramente el tamaño del texto al hacer clic */
}

/* Efectos para el botón COTIZA YA */
.button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-7xs) var(--padding-19xl) 7px 39px;
  background-color: var(--color-midnightblue);
  border-radius: var(--br-71xl);
  justify-content: flex-start;
  white-space: nowrap;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color:var(--color-midnightblue); /* Cambia el color de fondo al pasar el mouse */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón */
}

.button:active {
  background-color:var(--color-midnightblue); /* Cambia el color de fondo al hacer clic */
  transform: scale(0.95); /* Disminuye ligeramente el tamaño del botón al hacer clic */
}


.frame-parent,
.navigation {
  max-width: 50%;
}


.navigation {
  border-radius: var(--br-71xl);
  background-color: var(--color-gray-200);
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-11xl) var(--padding-smi) 41px;
  box-sizing: border-box;
  gap: 31px;
  z-index: 1;
}

.frame-parent {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.desktop-header-light-3,
.desktop-header-light-3-inner {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.desktop-header-light-3-inner {
  flex-direction: row;
  padding: 0 var(--padding-15xl) 0 37px;
}

.desktop-header-light-3 {
  background-color: var(--light-text);
  overflow: hidden;
  flex-direction: column;
  padding: 0 0 331px;
  gap: 44px;
}

.background-content {
  align-self: stretch;
  height: 1px;
  position: relative;
  display: none;
}

.background-content1,
.background-content2 {
  width: 100%;
  max-width: 1707.7px;
  height: 0;
  position: relative;
  display: none;
}

.dale-vida-a {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 1; /* Ajusta este valor según la cantidad de espacio que desees entre líneas */
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}


.dale-vida-a-tu-hogar-y-protege-wrapper {
  width: 100%;
  max-width: 1506px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-9xl) var(--padding-mid);
  box-sizing: border-box;
}

.placeholder-image-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: var(--br-21xl);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}

.window-2-1 {
  height: 83px;
  width: 82px;
  position: relative;
  object-fit: cover;
}

.window-image {
  width: 100%;
  max-width: 246px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.ventanas-de-impacto1 {
  line-height: 20px;
}

.ventanas-de-impacto {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.proteja-su-hogar {
  white-space: pre-wrap;
}

.proteja-su-hogar-de-tormentas1 {
  line-height: 20px;
}

.y-vientos-fuertes1 {
  line-height: 15px;
}

.y-vientos-fuertes {
  white-space: pre-wrap;
}

.proteja-su-hogar-de-tormentas {
  margin: 0;
}

.ventanas-de-impacto-container {
  flex: 1;
  position: relative;
}

.image-caption {
  width: 100%;
  max-width: 239px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-2xs);
  box-sizing: border-box;
}

.placeholder-image-parent {
  width: 100%;
  max-width: 281px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-xs);
}

.gallery-placeholders-icon,
.gallery-placeholders-icon1,
.gallery-placeholders-icon2,
.gallery-placeholders-icon3,
.icon  {
  max-width: 100%;
  border-radius: var(--br-21xl);
}
.icon {
  max-width: 100%;
  height: 70px; /* Altura fija para todos los íconos */
  object-fit: contain; /* Asegura que el ícono se ajuste sin distorsión */
}
.gallery-images{
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.gallery-images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px; /* Espacio entre la imagen, ícono y textos */
}

.gallery-images-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.windows-1-icon {
  width: 58px;
  height: 60px;
  position: relative;
  object-fit: contain;
}

.window-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-3xl) var(--padding-base) 0;
}

.double-hung-1-icon {
  width: 58px;
  height: 60px;
  position: relative;
  object-fit: contain;
}

.double-hung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-7xs) var(--padding-4xs) 0;
}

.awning-1-icon,
.view-1-icon {
  height: 92px;
  width: 91px;
  position: relative;
  object-fit: cover;
}

.view-1-icon {
  width: 70px;
  height: 73px;
}

.casement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 5px;
}

.gallery-types,
.window-type-parent {
  display: flex;
  flex-direction: row;
  max-width: 100%;
}

.window-type-parent {
  width: 85%;
  max-width: 992px;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.gallery-types {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.custom1 {
  line-height: 24px;
}

.custom {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.la-tradicin-que {
  line-height: 20px;
}

.darle-vida-y {
  line-height: 15px;
}

.la-tradicin-que-necesitas-par {
  margin: 0;
}

.custom-la-tradicin-container {
  align-self: stretch;
  position: relative;
}

.custom-la-tradicin-que-neces-wrapper {
  width: 100%;
  max-width: 235px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs) 0 0;
  box-sizing: border-box;
}

.double-hung2 {
  line-height: 24px;
}

.double-hung1 {
  margin-block-start: 0;
  margin-block-end: 8px;
}

.estilo-clsico-de {
  line-height: 20px;
}

.estilo-clsico-de-doble-colgad {
  margin-block-start: 0;
  margin-block-end: 8px;
}

.funcionalidad-es-muy {
  line-height: 10px;
}

.funcionalidad-es-muy-convenien {
  margin: 0;
}

.double-hung-estilo-clsico-container {
  width: 100%;
  max-width: 252px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.awning1 {
  line-height: 24px;
}

.awning {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.toldo-la-combinacin {
  line-height: 20px;
}

.estilo-simplicidad {
  line-height: 15px;
}

.b {
  line-height: 20px;
  font-family: var(--h3);
}

.toldo-la-combinacin-perfecta {
  margin: 0;
}

.awning-toldo-la-container {
  width: 100%;
  max-width: 251px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.casement1 {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.marco-la-forma {
  margin: 0;
}

.casement-marco-la-container {
  align-self: stretch;
  position: relative;
  line-height: 20px;
}

.casement-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
  min-width: 175px;
}

.awning-description,
.gallery-descriptions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.awning-description {
  width: 100%;
  max-width: 568px;
  gap: var(--gap-28xl);
}

.gallery-descriptions {
  gap: 59px;
}

.frame-parent1{
  display: flex;
  justify-content: flex-start;
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.title {
  font-weight: bold;
  color: var(--color-midnightblue); /* Ajusta según el color que necesites */
  font-size: 1rem;
  display: flex;
  align-items: center;
  margin-bottom: 5px; /* Reduce el espacio debajo del título */
}

.description {
  font-size: 0.875rem;
  color: black;
  display: flex;
  align-items: center;
  margin-top: 0; /* Elimina el margen superior */
}
.frame-parent1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around; /* Distribuye el espacio uniformemente */
  gap: 28px;
  max-width: 100%;
  font-size: var(--font-size-mini);
  color: var(--color-darkslategray-100);
}

.las-ventanas-energticamente,
.qu-son-las {
  margin: 0;
  position: relative;
  letter-spacing: 0.2px;
  font-family: inherit;
}

.qu-son-las {
  width: 100%;
  max-width: 584px;
  font-size: inherit;
  line-height: 55px;
  font-weight: 700;
  display: inline-block;
  max-width: 100%;
}

.las-ventanas-energticamente {
  align-self: stretch;
  font-size: var(--font-size-9xl);
  line-height: 40px;
  font-weight: 400;
  color: var(--second-text);
}

.features-paragraph {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8xl);
  max-width: 100%;
}

.try-for-free1 {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.1px;
  line-height: 28px;
  display: inline-block;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: left;
  min-width: 113px;
}

.text-button1 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.master-button1 {
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  overflow: hidden;
  padding: var(--padding-base) var(--padding-42xl);
}

.big-button1,
.master-button1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.action-content1,
.features-content,
.features-paragraph-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.action-content1 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
}

.features-content,
.features-paragraph-parent {
  max-width: 100%;
}

.features-paragraph-parent {
  align-self: stretch;
  gap: var(--gap-21xl);
}

.features-content {
  flex: 1;
  padding: var(--padding-2xl) 0 0;
  box-sizing: border-box;
  min-width: 457px;
}

.douglas-sheppard-9ryfg8swrvo-u-icon {
  align-self: center;
  height: 647px;
  position: relative;
  max-width: 60%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.screen-content {
  height: 690px;
  width: 100%;
  max-width: 628px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10.8px var(--padding-12xs);
  box-sizing: border-box;
  min-width: 628px;
  max-width: 100%;
}

.features,
.features-content-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.features-content-parent {
  flex: 1;
  justify-content: flex-start;
  gap: var(--gap-22xl);
}

.features {
  width: 100%;
  max-width: 1492px;
  justify-content: flex-end;
  padding: 0 var(--padding-41xl) var(--padding-5xl);
  box-sizing: border-box;
  text-align: left;
  color: var(--color-midnightblue);
}

.beneficios1 {
  margin: 0;
  width: 352px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 55px;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
}

.beneficios-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
}

.estas-son-algunas {
  margin: 0;
  width: 1056px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 40px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 102%;
}

.h41 {
  align-self: stretch;
  overflow: hidden;
  flex-direction: row;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 var(--padding-3xs) var(--padding-3xs);
  box-sizing: border-box;
  font-size: var(--font-size-9xl);
  color: var(--color-darkslategray-100);
}

.benefits-content,
.benefits-header,
.h41 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}

.benefits-header {
  width: 1050px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 17px;
}

.benefits-content {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  font-size: 64px;
  color: var(--color-midnightblue);
}

.bill-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.ahorra-en-la,
.factura-de-energa {
  margin: 0;
}

.ahorra-en-la-container {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.feature-style-2,
.h3 {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.h3 {
  flex-direction: row;
  padding: var(--padding-3xs);
}

.row, .row1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  height: 300px; /* Limitar la altura de la fila */
  overflow: hidden; /* Esconder cualquier contenido que se extienda fuera de esta altura */
}


.feature-style-2,
.feature-style-21,
.feature-style-22,
.feature-style-23,
.feature-style-24,
.feature-style-25 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.items,
.items1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: auto; /* Ajusta automáticamente la altura de cada contenedor */
}

.credit-cards-1-icon,
.house-1-icon,
.secure-shield-1-icon,
.power-1-icon,
.low-volume-1-icon {
  width: 106px;
  height: 106px;
  object-fit: contain;
}

.h31,
.h32,
.h33,
.h34,
.h35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0; /* Ajusta el padding según sea necesario */
  text-align: center;
}

.recibe-crditos-e-container,
.aumenta-el-valor-container,
.mejora-la-seguridad-container,
.alarga-la-vida-container,
.mejora-la-comodidad-container {
  flex: 1;
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 28px;
  margin-top: 5px; /* Reduce el espacio entre el título y la descripción */
}


.video-screen-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 8px;
  transform: scale(0.8); /* Reduce el tamaño del video */
}

.video,
.wrapper-video-screen {
  height: 400px; /* Ajusta la altura del contenedor del video */
  justify-content: center;
}

.wrapper-video-screen {
  width: 100%;
  max-width: 800px; /* Ajusta el ancho máximo del contenedor del video */
  position: relative;
  border-radius: 20px; /* Ajusta el radio de los bordes */
  display: flex;
  align-items: center;
}

.video {
  align-self: stretch;
  flex-direction: row;
  padding: 0 var(--padding-2xl) 0 var(--padding-xl);
  box-sizing: border-box;
}

.benefits-content-parent,
.frame-wrapper2,
.video {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}


.benefits-content-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  gap: 1px;
}

.benefits-list, .items, .items1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.frame-wrapper2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.a-disfrutar-de,
.haga-el-cambio {
  margin: 0;
}

.estaremos-listos-para,
.haga-el-cambio-container {
  margin: 0;
  position: relative;
  letter-spacing: 0.2px;
  font-family: inherit;
}

.haga-el-cambio-container {
  align-self: stretch;
  font-size: inherit;
  line-height: 55px;
  font-weight: 700;
}

.estaremos-listos-para {
  width: 888.3px;
  font-size: var(--font-size-9xl);
  line-height: 40px;
  font-weight: 400;
  color: var(--second-text);
  display: inline-block;
  max-width: 100%;
}

.testimonial-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 11px;
  max-width: 100%;
}

.next-1-2 {
  width: 75px;
  height: 77px;
  position: relative;
  object-fit: contain;
}

.left-button-icon {
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.divavarta-icon {
  height: 90px;
  width: 90px;
  position: relative;
  border-radius: 45px;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.heading-3 {
  align-self: stretch;
  position: relative;
  line-height: 23px;
  font-weight: 500;
}

.cliente {
  width: 67.3px;
  position: relative;
  font-size: var(--font-size-mini);
  line-height: 28.5px;
  display: flex;
  align-items: center;
}

.author-info,
.author-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.author-name {
  align-self: stretch;
  justify-content: flex-start;
}

.author-info {
  flex: 1;
  justify-content: flex-end;
  padding: 0 0 16.5px;
  box-sizing: border-box;
  min-width: 103px;
}

.testimonial-quote {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-2xl);
}

.testimonial-quote-wrapper {
  width: 269px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 19px 0 0;
  box-sizing: border-box;
}

.svg-icon {
  height: 44px;
  width: 45px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.frame-parent2,
.testimonial-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.frame-parent2 {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.testimonial-content-wrapper {
  align-self: stretch;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-12xs);
  box-sizing: border-box;
}

.super-contento-y {
  width: 435px;
  position: relative;
  font-size: var(--h3-size);
  line-height: 32.3px;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.divtestimonials-item,
.navigation-left-button {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}

.divtestimonials-item {
  flex: 1;
  border-radius: 16px;
  background-color: #f9f9f9;
  flex-direction: column;
  align-items: flex-start;
  padding: 55px var(--padding-5xl) 59px 68px;
  box-sizing: border-box;
  gap: var(--gap-xl);
  min-width: 349px;
}

.navigation-left-button {
  width: 100%;
  max-width: 659px;
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
}

.next-1-1 {
  width: 76px;
  height: 77px;
  position: relative;
  object-fit: cover;
}

.testimonial-navigation-right {
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.testimonial-navigation-left {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}

.testimonial-navigation {
  width: 100%;
  max-width: 818px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
  margin-bottom: 70px;
  padding: 0 var(--padding-12xs);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--font-size-lgi);
  color: var(--color-gray-100);
  font-family: var(--font-roboto);
}

.testimonial-container,
.testimonial-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.testimonial-wrapper {
  width: 100%;
  max-width: 1190px;
  gap: 43px;
  flex-shrink: 0;
  max-width: 124%;
}

.testimonial-container {
  width: 966px;
  padding: 0 0 var(--padding-28xl);
  box-sizing: border-box;
  min-width: 966px;
  min-height: 761px;
  max-width: 100%;
}

.contctanos {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.contact-title {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--h3-size);
  color: var(--text);
  font-family: var(--h3);
}

.your-name,
.your-email {
  width: 100%;
  border: none;
  background-color: transparent;
  font-family: var(--font-roboto);
  font-size: var(--font-size-mini);
  color: var(--background);
  letter-spacing: 0.1px;
  line-height: 16px;
  outline: none; /* Quita el borde por defecto de los inputs */
}
.input {
  align-self: stretch;
  border-radius: var(--br-20xl);
  background-color: var(--color-whitesmoke-100);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center; /* Cambiado a center para alinear el texto dentro del input */
  padding: var(--padding-mid) var(--padding-xl);
}

.your-email {
  width: 100%;
}

.input1,
.input2 {
  border: 1px solid var(--color-gainsboro-100);
  background-color: var(--color-whitesmoke-100);
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.input1 {
  align-self: stretch;
  border-radius: var(--br-20xl);
  background-color: var(--color-whitesmoke-100);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center; /* Cambiado a center para alinear el texto dentro del input */
  padding: var(--padding-mid) var(--padding-xl);
}

.input2 {
  height: 193px;
  width: auto;
  outline: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: var(--padding-4xl) var(--padding-xl);
  font-family: var(--font-roboto);
  font-size: var(--font-size-mini);
  color: var(--background);
}

.send {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 20px;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: left;
  display: inline-block;
  min-width: 53px;
  transition: color 0.3s ease; /* Transición suave para el color */
}

.master-button2:hover .send {
  color: #ffffff; /* Asegura que el texto se mantenga visible (blanco) al pasar el mouse */
}

.master-button2:active .send {
  color: #e0e0e0; /* Cambia a un tono más claro al hacer clic */
}

.master-button2,
.text-button2 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.master-button2 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) 46px;
  background-color: var(--color-darkturquoise);
  border-radius: var(--br-16xl);
  transition: background-color 0.3s ease, transform 0.3s ease; /* Añadir transición suave */
}

.master-button2:hover {
  background-color: #008b8b; /* Cambia a un tono más oscuro al pasar el mouse */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

.master-button2:active {
  background-color: #006b6b; /* Cambia a un tono aún más oscuro al hacer clic */
  transform: scale(0.95); /* Disminuye ligeramente el tamaño para simular un efecto de clic */
}



.testimonial-container-parent {
  display: flex;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  flex-direction: row;
  row-gap: 20px;
  width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
  min-height: 100vh; /* Asegura que ocupe al menos toda la altura de la ventana */
  padding-bottom: 100px; /* Añade espacio adicional para evitar superposición con el footer */
}

/* Ajusta el formulario para que no sea demasiado ancho */
.sign-up-form {
  width: 20%; /* Ajusta el ancho del formulario según sea necesario */
  max-width: 300px; /* Ajusta el ancho máximo según sea necesario */
  box-shadow: var(--shadow);
  border-radius: 20px;
  background-color: var(--light-text);
  border: 1px solid #ddd;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-31xl) 30px;
  gap: 20px;
  z-index: 1;
  font-size: var(--font-size-mini);
  color: var(--background);
  font-family: var(--font-roboto);
}


.testimonials {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 48px;
  box-sizing: border-box;
  text-align: left;
}

.content,
.frame-section,
.testimonials {
  display: flex;
  max-width: 100%;
}

.frame-section {
  width: 100%;
  max-width: 1529px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Cambia de flex-end a center */
  justify-content: center; /* Cambia de flex-start a center para centrar verticalmente */
  gap: 82px;
  text-align: center;
  font-size: var(--font-size-29xl);
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin: 0 auto; /* Esto asegura que la sección esté centrada horizontalmente en la pantalla */
}

.content {
  margin-top: 70px;
  width: 100%; /* Ocupa el 100% del ancho del contenedor padre */
  max-width: 100%; /* Elimina cualquier límite en el ancho máximo */
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl) 30px;
  box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho */
}


.footer-child {
  height: 223px;
  width: 100%;
  max-width: 1741px;
  position: relative;
  background-color: var(--color-midnightblue);
  display: none;
}

.linea-1-2 {
  width: 110px;
  height: 113px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.top-footer {
  width: 185px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.bxbx-map-icon {
  height: 32px;
  width: 26px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}

.map {
  width: 100%;
  max-width: 456px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.katy-gap-rd,
.united-states {
  margin: 0;
}

.katy-gap-rd-container {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  z-index: 1;
}

.footer-content,
.location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}

.location {
  align-self: stretch;
  gap: var(--gap-mini);
}

.footer-content {
  width: 100%;
  max-width: 467px;
  padding: var(--padding-lg) 0 0;
  box-sizing: border-box;
}

.phone-icon {
  margin: 0;
  align-self: stretch;
  height: 34px;
}

.phone-number {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  display: inline-block;
  min-width: 110px;
  z-index: 1;
}

.contact-info,
.phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.phone {
  width: 110px;
  gap: var(--gap-mini);
  align-items: center;
}

.contact-info {
  width: 100%;
  max-width: 277px;
  padding: var(--padding-base) 0 0;
  box-sizing: border-box;
}

.placeholder1 {
  width: 1px;
  flex: 1;
  position: relative;
  background-color: #d9d9d9;
  z-index: 1;
}

.logo-container {
display: none;
}

.energy-star-logosvg-1-icon {
  width: 63px;
  height: 66px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.energy-star {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
}

.qrtop500-logo-blue-002-1-icon {
  width: 71px;
  height: 67px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.q-r-scan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-3xl);
}

.kisspng-united-states-logo-mad-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

.logos,
.made-in-u-s-a {
  display: flex;
  box-sizing: border-box;
}

.made-in-u-s-a {
  height: 97px;
  width: 92px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
}

.logos {
  flex: 1;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--padding-12xs) 0 0;
  min-width: 241px;
  max-width: 100%;
  gap: var(--gap-xl);
}

.good-housekeeping-logo-e9018b9-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

.good-housekeeping {
  height: 93px;
  width: 125px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
  box-sizing: border-box;
}

.certification-logos {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: var(--gap-21xl);
  max-width: 100%;
}

.certifications,
.desktop-2,
.footer {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

.certifications {
  width: 100%;
  max-width: 536px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  max-width: 100%;
}

.desktop-2,
.footer {
  text-align: center;
  color: var(--light-text);
  font-family: var(--h3);
}

.footer {
  background-color: var(--color-midnightblue);
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-28xl) var(--padding-42xl) var(--padding-26xl) 62px;
  gap: 51px;
  max-width: 100%;
  font-size: var(--font-size-base);
}

.desktop-2 {
  width: 100%;
  position: relative;
  background-color: var(--light-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs) 0 0;
  gap: 2em;
  line-height: 1.5;
  letter-spacing: normal;
  font-size: 2rem;
}
#text-content {
  max-height: 250px; /* Ajusta este valor según cuánto texto quieras mostrar inicialmente */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

#text-content.expanded {
  max-height: 500px; /* Aumenta este valor para asegurarte de que todo el texto sea visible */
}

#toggle-button {
  cursor: pointer;
}
.bill-1-icon,
.credit-cards-1-icon,
.house-1-icon,
.secure-shield-1-icon,
.power-1-icon,
.low-volume-1-icon {
  width: 106px;
  height: 106px;
  object-fit: contain;
}

.h3, .h31, .h32, .h33, .h34, .h35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  gap: 5px;
}

.ahorra-en-la-container,
.recibe-crditos-e-container,
.aumenta-el-valor-container,
.mejora-la-seguridad-container,
.alarga-la-vida-container,
.mejora-la-comodidad-container {
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

.wrapper-video-screen {
  width: 100%;
  max-width: 1000px;

  position: relative;
  border-radius: 20px;
}

.video-screen-icon {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}
.frame-section111{
  width: 100%;
  max-width: 1529px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 82px;
  text-align: center;
  font-size: var(--font-size-29xl);
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin: 0 auto;
}

.frame-section111 h2 {
  font-size: var(--font-size-29xl);
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin-bottom: 20px; /* Ajusta según el espacio que necesites debajo del título */
}
.button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-7xs) var(--padding-19xl) 7px 39px;
  background-color: var(--color-midnightblue);
  border-radius: var(--br-71xl);
  justify-content: flex-start;
  white-space: nowrap;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: none;

} 
.contact-info {
width: 10%;
max-width: 277px;
padding: var(--padding-base) 0 0;
box-sizing: border-box;
}
}

@media screen and (max-width: 1100px) {

  .douglas-sheppard-9ryfg8swrvo-u-icon {
    align-self: baseline;
    height: 647px;
    position: relative;
    max-width: 50%;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
}
}
@media screen and (min-width: 769px) and (max-width: 1210px) {
  
  .frame-wrapper {
    flex: 1;
  }
 
  .items1 {
    height: auto;
  }
  .sign-up-form,
  .testimonial-container {
    flex: 1;
  }
  .footer,
  .testimonial-container-parent {
    flex-wrap: wrap;
  }
  .desktop-2 {
    font-size: 1.5rem;
    padding: 0 var(--padding-9xs);
    gap: 1.5em;
  }
.desktop-2 {
  width: 100%; /* Ya está configurado para ocupar el 100% */
  box-sizing: border-box; /* Asegura que el padding se incluya dentro del ancho */
  position: relative;
  background-color: var(--light-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs); /* Ajusta esto si es necesario */
  gap: 2em;
  line-height: 1.5;
  letter-spacing: normal;
  font-size: 2rem;
}

.background-content-icon {
  width: 100%;
  height: 100vh; /* Esto asegura que la imagen ocupe todo el alto de la ventana */
  object-fit: cover; /* Esto estira la imagen para cubrir todo el contenedor */
  position: absolute;
  left: 0;
  top: 0;
  transform: none; /* Elimina la escala que podría estar distorsionando la imagen */
}


.wrapper-background-content {
  width: 100%;
  height: 1px;
  position: relative;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-menu {
  width: 42px;
  height: 28px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.logotipo-windows-pros-2 {
  height: 142px;
  width: 142px;
  position: relative;
  object-fit: cover;
}

.logotipo-windows-pros-2-wrapper {
  width: 100%;
  max-width: 484px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.frame-child {
  width: 100%;
  max-width: 583px;
  height: 131px;
  position: relative;
  border-radius: var(--br-21xl);
  background-color: var(--color-midnightblue);
  display: none;
}

.llama-ya {
  font-weight: 800;
}

.span {
  font-weight: 600;
  color: red;
}

.gratis {
  color: var(--color-darkturquoise);
}

.llama-ya-y-container {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.1px;
  line-height: 40px;
  z-index: 3;
  font-family: inherit;
}

.telephonev-1-icon {
  height: 42px;
  width: 42px;
  position: relative;
  object-fit: cover;
  z-index: 3;
}

.placeholder {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  z-index: 3;
}

.placeholder-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  box-sizing: border-box;
  min-width: 186px;
}

.telephonev-1-parent {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
}

.frame-wrapper1 {
  align-self: stretch;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 65px;
  font-size: 40px;
}

.frame-div,
.frame-wrapper1,
.rectangle-parent {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.rectangle-parent {
  flex: 1;
  border-radius: var(--br-21xl);
  background-color: var(--color-midnightblue);
  flex-direction: column;
  justify-content: flex-start;
  padding: 27px 58px;
  gap: var(--gap-xs);
  z-index: 2;
}

.frame-div {
  width: 100%;
  max-width: 629px;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 var(--padding-4xl);
}

.bill-de-electricidad,
.reduce-un-50 {
  margin: 0;
}

.reduce-un-50-container {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 55px;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  max-width: 100%;
}

.h1 {
  align-self: stretch;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  max-width: 100%;
}

.cambiando-las-ventanas {
  margin: 0;
  flex: 1;
  
  position: relative;
  left: -20px; /* Ajusta el valor según sea necesario */
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 40px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}

.h4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 589px;
  height: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xl) var(--padding-7xl) 0;
  box-sizing: border-box;
  max-width: 100%;
}

.try-for-free {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 20px;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: center;
  display: inline-block;
  min-width: 116px;
}

.text-button {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.master-button {
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  overflow: hidden;
  padding: var(--padding-base) var(--padding-41xl);
}

.action-content,
.big-button,
.master-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.action-content {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 54px;
  left: 1px;
  align-items: flex-start;
  z-index: 1;
}
/* Efecto al pasar el mouse por encima */
.action-content:hover .master-button {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade una sombra sutil */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza la transición */
}

.action-content:hover .try-for-free {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Añade una sombra al texto */
}

/* Efecto al hacer clic */
.action-content:active .master-button {
  transform: scale(0.95); /* Disminuye ligeramente el tamaño del botón al hacer clic */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Cambia la sombra para dar un efecto de presionado */
  transition: transform 0.1s ease, box-shadow 0.1s ease; /* Suaviza la transición */
}

.action-content:active .try-for-free {
  text-shadow: none; /* Elimina la sombra del texto al hacer clic */
}

.h4-parent {
  height: 106px;
  flex: 1;
  position: relative;
  max-width: 100%;
}

.hero-content {
  width: 100%;
  max-width: 603px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-smi);
  box-sizing: border-box;
  text-align: center;
  font-size: var(--font-size-9xl);
  color: var(--color-midnightblue);
}

.container,
.padding-bottom {
  width: 100%;
  max-width: 549px;
  height: 92px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.padding-bottom {
  width: 100%;
  max-width: 1437px;
  height: 218px;
}

.desktop-hero-light-3 {
  align-self: stretch;
  overflow: hidden;
  align-items: flex-start;
  padding: 100px 0 var(--padding-4xs) 100px; /* Reduce el valor aquí */
  box-sizing: border-box;
  gap: 7px;
  margin-top: -71px;
  text-align: left;
  font-size: var(--font-size-29xl);
  color: var(--text);
}

.desktop-hero-light-3,
.frame-group,
.frame-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
}

.frame-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 100%;
}

.frame-group,
.frame-wrapper {
  align-items: flex-start;
}

.frame-group {
  align-self: stretch;
  gap: var(--gap-10xl);
}

.frame-wrapper {
  width: 100%;
  max-width: 775px;
  padding: 43px 0 0;
  box-sizing: border-box;
  min-width: 775px;
}

.navigation-child {
  height: 68px;
  width: 100%;
  max-width: 655px;
  position: relative;
  border-radius: var(--br-71xl);
  background-color: var(--color-gray-200);
  display: none;
}

.inicio {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  min-width: 42px;
  z-index: 2;
}

.menu-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs) 0 0;
}

.beneficios,
.informacin {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  z-index: 2;
}

.beneficios {
  width: 81px;
  min-width: 81px;
}

.informacin {
  min-width: 94px;
}

.menu-items1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-5xs) 0 0;
}

.contacto {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  min-width: 71px;
  z-index: 2;
}

.menu,
.menu-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.menu {
  margin: 0;
  flex-direction: row;
  gap: var(--gap-xl);
  white-space: nowrap;
  text-align: center;
  font-size: var(--font-size-mini);
  color: var(--color-midnightblue);
  font-family: var(--h3);
}

.menu-wrapper {
  flex-direction: column;
  padding: var(--padding-7xs) 0 0;
  box-sizing: border-box;
  max-width: 100%;
}

.button-child {
  height: 41px;
  width: 100%;
  max-width: 186px;
  position: relative;
  border-radius: var(--br-71xl);
  background-color: var(--color-midnightblue);
  display: none;
}

/* Asegura que el texto dentro del botón se mantenga blanco */
.cotiza-ya {
  text-decoration: none;
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 28px;
  font-family: var(--h3);
  color: var(--light-text); /* Mantiene el texto blanco */
  text-align: center;
  display: inline-block;
  min-width: 109px;
  z-index: 3;
  transition: color 0.3s ease;
}

.cotiza-ya:hover,
.cotiza-ya:active {
  color: var(--light-text); /* Asegura que el color del texto se mantenga blanco en ambos estados */
}

.button,
.frame-parent,
.navigation {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* Efectos para los enlaces del menú de navegación */
.menu a {
  transition: color 0.3s ease, transform 0.3s ease;
}

.menu a:hover {
  color: var(--color-lightblue); /* Cambia el color del texto al pasar el mouse */
  transform: scale(1.1); /* Aumenta ligeramente el tamaño del texto */
}

.menu a:active {
  color: var(--color-darkblue); /* Cambia el color del texto al hacer clic */
  transform: scale(0.9); /* Disminuye ligeramente el tamaño del texto al hacer clic */
}

/* Efectos para el botón COTIZA YA */
.button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-7xs) var(--padding-19xl) 7px 39px;
  background-color: var(--color-midnightblue);
  border-radius: var(--br-71xl);
  justify-content: flex-start;
  white-space: nowrap;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color:var(--color-midnightblue); /* Cambia el color de fondo al pasar el mouse */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón */
}

.button:active {
  background-color:var(--color-midnightblue); /* Cambia el color de fondo al hacer clic */
  transform: scale(0.95); /* Disminuye ligeramente el tamaño del botón al hacer clic */
}


.frame-parent,
.navigation {
  max-width: 50%;
}


.navigation {
  border-radius: var(--br-71xl);
  background-color: var(--color-gray-200);
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-11xl) var(--padding-smi) 41px;
  box-sizing: border-box;
  gap: 31px;
  z-index: 1;
}

.frame-parent {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.desktop-header-light-3,
.desktop-header-light-3-inner {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.desktop-header-light-3-inner {
  flex-direction: row;
  padding: 0 var(--padding-15xl) 0 37px;
}

.desktop-header-light-3 {
  background-color: var(--light-text);
  overflow: hidden;
  flex-direction: column;
  padding: 0 0 331px;
  gap: 44px;
}

.background-content {
  align-self: stretch;
  height: 1px;
  position: relative;
  display: none;
}

.background-content1,
.background-content2 {
  width: 100%;
  max-width: 1707.7px;
  height: 0;
  position: relative;
  display: none;
}

.dale-vida-a {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 1; /* Ajusta este valor según la cantidad de espacio que desees entre líneas */
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}


.dale-vida-a-tu-hogar-y-protege-wrapper {
  width: 100%;
  max-width: 1506px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-9xl) var(--padding-mid);
  box-sizing: border-box;
}

.placeholder-image-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: var(--br-21xl);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}

.window-2-1 {
  height: 83px;
  width: 82px;
  position: relative;
  object-fit: cover;
}

.window-image {
  width: 100%;
  max-width: 246px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.ventanas-de-impacto1 {
  line-height: 20px;
}

.ventanas-de-impacto {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.proteja-su-hogar {
  white-space: pre-wrap;
}

.proteja-su-hogar-de-tormentas1 {
  line-height: 20px;
}

.y-vientos-fuertes1 {
  line-height: 15px;
}

.y-vientos-fuertes {
  white-space: pre-wrap;
}

.proteja-su-hogar-de-tormentas {
  margin: 0;
}

.ventanas-de-impacto-container {
  flex: 1;
  position: relative;
}

.image-caption {
  width: 100%;
  max-width: 239px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-2xs);
  box-sizing: border-box;
}

.placeholder-image-parent {
  width: 100%;
  max-width: 281px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-xs);
}

.gallery-placeholders-icon,
.gallery-placeholders-icon1,
.gallery-placeholders-icon2,
.gallery-placeholders-icon3,
.icon  {
  max-width: 100%;
  border-radius: var(--br-21xl);
}
.icon {
  max-width: 100%;
  height: 70px; /* Altura fija para todos los íconos */
  object-fit: contain; /* Asegura que el ícono se ajuste sin distorsión */
}
.gallery-images{
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.gallery-images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px; /* Espacio entre la imagen, ícono y textos */
}

.gallery-images-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.windows-1-icon {
  width: 58px;
  height: 60px;
  position: relative;
  object-fit: contain;
}

.window-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-3xl) var(--padding-base) 0;
}

.double-hung-1-icon {
  width: 58px;
  height: 60px;
  position: relative;
  object-fit: contain;
}

.double-hung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-7xs) var(--padding-4xs) 0;
}

.awning-1-icon,
.view-1-icon {
  height: 92px;
  width: 91px;
  position: relative;
  object-fit: cover;
}

.view-1-icon {
  width: 70px;
  height: 73px;
}

.casement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 5px;
}

.gallery-types,
.window-type-parent {
  display: flex;
  flex-direction: row;
  max-width: 100%;
}

.window-type-parent {
  width: 85%;
  max-width: 992px;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.gallery-types {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.custom1 {
  line-height: 24px;
}

.custom {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.la-tradicin-que {
  line-height: 20px;
}

.darle-vida-y {
  line-height: 15px;
}

.la-tradicin-que-necesitas-par {
  margin: 0;
}

.custom-la-tradicin-container {
  align-self: stretch;
  position: relative;
}

.custom-la-tradicin-que-neces-wrapper {
  width: 100%;
  max-width: 235px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs) 0 0;
  box-sizing: border-box;
}

.double-hung2 {
  line-height: 24px;
}

.double-hung1 {
  margin-block-start: 0;
  margin-block-end: 8px;
}

.estilo-clsico-de {
  line-height: 20px;
}

.estilo-clsico-de-doble-colgad {
  margin-block-start: 0;
  margin-block-end: 8px;
}

.funcionalidad-es-muy {
  line-height: 10px;
}

.funcionalidad-es-muy-convenien {
  margin: 0;
}

.double-hung-estilo-clsico-container {
  width: 100%;
  max-width: 252px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.awning1 {
  line-height: 24px;
}

.awning {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.toldo-la-combinacin {
  line-height: 20px;
}

.estilo-simplicidad {
  line-height: 15px;
}

.b {
  line-height: 20px;
  font-family: var(--h3);
}

.toldo-la-combinacin-perfecta {
  margin: 0;
}

.awning-toldo-la-container {
  width: 100%;
  max-width: 251px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.casement1 {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.marco-la-forma {
  margin: 0;
}

.casement-marco-la-container {
  align-self: stretch;
  position: relative;
  line-height: 20px;
}

.casement-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
  min-width: 175px;
}

.awning-description,
.gallery-descriptions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.awning-description {
  width: 100%;
  max-width: 568px;
  gap: var(--gap-28xl);
}

.gallery-descriptions {
  gap: 59px;
}

.frame-parent1{
  display: flex;
  justify-content: flex-start;
}

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.title {
  font-weight: bold;
  color: var(--color-midnightblue); /* Ajusta según el color que necesites */
  font-size: 1rem;
  display: flex;
  align-items: center;
  margin-bottom: 5px; /* Reduce el espacio debajo del título */
}

.description {
  font-size: 0.875rem;
  color: black;
  display: flex;
  align-items: center;
  margin-top: 0; /* Elimina el margen superior */
}
.frame-parent1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around; /* Distribuye el espacio uniformemente */
  gap: 28px;
  max-width: 100%;
  font-size: var(--font-size-mini);
  color: var(--color-darkslategray-100);
}

.las-ventanas-energticamente,
.qu-son-las {
  margin: 0;
  position: relative;
  letter-spacing: 0.2px;
  font-family: inherit;
}

.qu-son-las {
  width: 100%;
  max-width: 584px;
  font-size: inherit;
  line-height: 55px;
  font-weight: 700;
  display: inline-block;
  max-width: 100%;
}

.las-ventanas-energticamente {
  align-self: stretch;
  font-size: var(--font-size-9xl);
  line-height: 40px;
  font-weight: 400;
  color: var(--second-text);
}

.features-paragraph {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8xl);
  max-width: 100%;
}

.try-for-free1 {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.1px;
  line-height: 28px;
  display: inline-block;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: left;
  min-width: 113px;
}

.text-button1 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.master-button1 {
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  overflow: hidden;
  padding: var(--padding-base) var(--padding-42xl);
}

.big-button1,
.master-button1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.action-content1,
.features-content,
.features-paragraph-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.action-content1 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
}

.features-content,
.features-paragraph-parent {
  max-width: 100%;
}

.features-paragraph-parent {
  align-self: stretch;
  gap: var(--gap-21xl);
}

.features-content {
  flex: 1;
  padding: var(--padding-2xl) 0 0;
  box-sizing: border-box;
  min-width: 457px;
}

.douglas-sheppard-9ryfg8swrvo-u-icon {
  align-self: center;
  height: 647px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.screen-content {
  height: 690px;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10.8px var(--padding-12xs);
  box-sizing: border-box;
  min-width: 0;  /* o auto, dependiendo de lo que necesites */
  max-width: 100%; /* Puedes ajustar a 100% o auto */
}


.features,
.features-content-parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.features-content-parent {
  flex: 1;
  justify-content: flex-start;
  gap: var(--gap-22xl);
}

.features {
  width: 100%;
  max-width: 1492px;
  justify-content: flex-end;
  padding: 0 var(--padding-41xl) var(--padding-5xl);
  box-sizing: border-box;
  text-align: left;
  color: var(--color-midnightblue);
}

.beneficios1 {
  margin: 0;
  width: 352px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 55px;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
}

.beneficios-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
}

.estas-son-algunas {
  margin: 0;
  width: 1056px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.2px;
  line-height: 40px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 102%;
}

.h41 {
  align-self: stretch;
  overflow: hidden;
  flex-direction: row;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 var(--padding-3xs) var(--padding-3xs);
  box-sizing: border-box;
  font-size: var(--font-size-9xl);
  color: var(--color-darkslategray-100);
}

.benefits-content,
.benefits-header,
.h41 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}

.benefits-header {
  width: 1050px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 17px;
}

.benefits-content {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  font-size: 64px;
  color: var(--color-midnightblue);
}

.bill-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.ahorra-en-la,
.factura-de-energa {
  margin: 0;
}

.ahorra-en-la-container {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.feature-style-2,
.h3 {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.h3 {
  flex-direction: row;
  padding: var(--padding-3xs);
}

.row, .row1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  height: 300px; /* Limitar la altura de la fila */
  overflow: hidden; /* Esconder cualquier contenido que se extienda fuera de esta altura */
}


.feature-style-2,
.feature-style-21,
.feature-style-22,
.feature-style-23,
.feature-style-24,
.feature-style-25 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.items,
.items1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: auto; /* Ajusta automáticamente la altura de cada contenedor */
}

.credit-cards-1-icon,
.house-1-icon,
.secure-shield-1-icon,
.power-1-icon,
.low-volume-1-icon {
  width: 106px;
  height: 106px;
  object-fit: contain;
}

.h31,
.h32,
.h33,
.h34,
.h35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0; /* Ajusta el padding según sea necesario */
  text-align: center;
}

.recibe-crditos-e-container,
.aumenta-el-valor-container,
.mejora-la-seguridad-container,
.alarga-la-vida-container,
.mejora-la-comodidad-container {
  flex: 1;
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 28px;
  margin-top: 5px; /* Reduce el espacio entre el título y la descripción */
}


.video-screen-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 8px;
  transform: scale(0.8); /* Reduce el tamaño del video */
}

.video,
.wrapper-video-screen {
  height: 400px; /* Ajusta la altura del contenedor del video */
  justify-content: center;
}

.wrapper-video-screen {
  width: 100%;
  max-width: 800px; /* Ajusta el ancho máximo del contenedor del video */
  position: relative;
  border-radius: 20px; /* Ajusta el radio de los bordes */
  display: flex;
  align-items: center;
}

.video {
  align-self: stretch;
  flex-direction: row;
  padding: 0 var(--padding-2xl) 0 var(--padding-xl);
  box-sizing: border-box;
}

.benefits-content-parent,
.frame-wrapper2,
.video {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}


.benefits-content-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  gap: 1px;
}

.benefits-list, .items, .items1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.frame-wrapper2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.a-disfrutar-de,
.haga-el-cambio {
  margin: 0;
}

.estaremos-listos-para,
.haga-el-cambio-container {
  margin: 0;
  position: relative;
  letter-spacing: 0.2px;
  font-family: inherit;
}

.haga-el-cambio-container {
  align-self: stretch;
  font-size: inherit;
  line-height: 55px;
  font-weight: 700;
}

.estaremos-listos-para {
  width: 888.3px;
  font-size: var(--font-size-9xl);
  line-height: 40px;
  font-weight: 400;
  color: var(--second-text);
  display: inline-block;
  max-width: 100%;
}

.testimonial-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 11px;
  max-width: 100%;
}

.next-1-2 {
display: none;
}

.left-button-icon {
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.divavarta-icon {
  height: 90px;
  width: 90px;
  position: relative;
  border-radius: 45px;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.heading-3 {
  align-self: stretch;
  position: relative;
  line-height: 23px;
  font-weight: 500;
}

.cliente {
  width: 67.3px;
  position: relative;
  font-size: var(--font-size-mini);
  line-height: 28.5px;
  display: flex;
  align-items: center;
}

.author-info,
.author-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.author-name {
  align-self: stretch;
  justify-content: flex-start;
}

.author-info {
  flex: 1;
  justify-content: flex-end;
  padding: 0 0 16.5px;
  box-sizing: border-box;
  min-width: 103px;
}

.testimonial-quote {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-2xl);
}

.testimonial-quote-wrapper {
  width: 269px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 19px 0 0;
  box-sizing: border-box;
}

.svg-icon {
  height: 44px;
  width: 45px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.frame-parent2,
.testimonial-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.frame-parent2 {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.testimonial-content-wrapper {
  align-self: stretch;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-12xs);
  box-sizing: border-box;
}

.super-contento-y {
  width: 435px;
  position: relative;
  font-size: var(--h3-size);
  line-height: 32.3px;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.divtestimonials-item,
.navigation-left-button {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}

.divtestimonials-item {
  flex: 1;
  border-radius: 16px;
  background-color: #f9f9f9;
  flex-direction: column;
  align-items: flex-start;
  padding: 55px var(--padding-5xl) 59px 68px;
  box-sizing: border-box;
  gap: var(--gap-xl);
  min-width: 349px;
}

.navigation-left-button {
  width: 100%;
  max-width: 659px;
  flex-direction: row;
  align-items: flex-end;
  gap: 20px;
}

.next-1-1 {
display: none;
}

.testimonial-navigation-right {
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.testimonial-navigation-left {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}

.testimonial-navigation {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
  margin-bottom: 70px;
  padding: 0 var(--padding-12xs);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--font-size-lgi);
  color: var(--color-gray-100);
  font-family: var(--font-roboto);
}

.testimonial-container,
.testimonial-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.testimonial-wrapper {
  width: 100%;
  max-width: 1190px;
  gap: 43px;
  flex-shrink: 0;
  max-width: 124%;
}

.testimonial-container {
  width: 100%;
  padding: 0 0 var(--padding-28xl);
  box-sizing: border-box;
  min-width: 100%;
  min-height: 761px;
  max-width: 100%;
}

.contctanos {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.contact-title {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--h3-size);
  color: var(--text);
  font-family: var(--h3);
}

.your-name,
.your-email {
  width: 100%;
  border: none;
  background-color: transparent;
  font-family: var(--font-roboto);
  font-size: var(--font-size-mini);
  color: var(--background);
  letter-spacing: 0.1px;
  line-height: 16px;
  outline: none; /* Quita el borde por defecto de los inputs */
}
.input {
  align-self: stretch;
  border-radius: var(--br-20xl);
  background-color: var(--color-whitesmoke-100);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center; /* Cambiado a center para alinear el texto dentro del input */
  padding: var(--padding-mid) var(--padding-xl);
}

.your-email {
  width: 100%;
}

.input1,
.input2 {
  border: 1px solid var(--color-gainsboro-100);
  background-color: var(--color-whitesmoke-100);
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.input1 {
  align-self: stretch;
  border-radius: var(--br-20xl);
  background-color: var(--color-whitesmoke-100);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center; /* Cambiado a center para alinear el texto dentro del input */
  padding: var(--padding-mid) var(--padding-xl);
}

.input2 {
  height: 193px;
  width: auto;
  outline: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: var(--padding-4xl) var(--padding-xl);
  font-family: var(--font-roboto);
  font-size: var(--font-size-mini);
  color: var(--background);
}

.send {
  position: relative;
  font-size: var(--h3-size);
  letter-spacing: 0.2px;
  line-height: 20px;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: left;
  display: inline-block;
  min-width: 53px;
  transition: color 0.3s ease; /* Transición suave para el color */
}

.master-button2:hover .send {
  color: #ffffff; /* Asegura que el texto se mantenga visible (blanco) al pasar el mouse */
}

.master-button2:active .send {
  color: #e0e0e0; /* Cambia a un tono más claro al hacer clic */
}

.master-button2,
.text-button2 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.master-button2 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) 46px;
  background-color: var(--color-darkturquoise);
  border-radius: var(--br-16xl);
  transition: background-color 0.3s ease, transform 0.3s ease; /* Añadir transición suave */
}

.master-button2:hover {
  background-color: #008b8b; /* Cambia a un tono más oscuro al pasar el mouse */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

.master-button2:active {
  background-color: #006b6b; /* Cambia a un tono aún más oscuro al hacer clic */
  transform: scale(0.95); /* Disminuye ligeramente el tamaño para simular un efecto de clic */
}



.testimonial-container-parent {
  display: flex;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  flex-direction: row;
  row-gap: 20px;
  width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
  min-height: 100vh; /* Asegura que ocupe al menos toda la altura de la ventana */
  padding-bottom: 100px; /* Añade espacio adicional para evitar superposición con el footer */
}

/* Ajusta el formulario para que no sea demasiado ancho */
.sign-up-form {
  width: 20%; /* Ajusta el ancho del formulario según sea necesario */
  max-width: 300px; /* Ajusta el ancho máximo según sea necesario */
  box-shadow: var(--shadow);
  border-radius: 20px;
  background-color: var(--light-text);
  border: 1px solid #ddd;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-31xl) 30px;
  gap: 20px;
  z-index: 1;
  font-size: var(--font-size-mini);
  color: var(--background);
  font-family: var(--font-roboto);
}


.testimonials {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 48px;
  box-sizing: border-box;
  text-align: left;
}

.content,
.frame-section,
.testimonials {
  display: flex;
  max-width: 100%;
}

.frame-section {
  width: 100%;
  max-width: 1529px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Cambia de flex-end a center */
  justify-content: center; /* Cambia de flex-start a center para centrar verticalmente */
  gap: 82px;
  text-align: center;
  font-size: var(--font-size-29xl);
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin: 0 auto; /* Esto asegura que la sección esté centrada horizontalmente en la pantalla */
}

.content {
  margin-top: 70px;
  width: 100%; /* Ocupa el 100% del ancho del contenedor padre */
  max-width: 100%; /* Elimina cualquier límite en el ancho máximo */
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl) 30px;
  box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho */
}


.footer-child {
  height: 223px;
  width: 100%;
  max-width: 1741px;
  position: relative;
  background-color: var(--color-midnightblue);
  display: none;
}

.linea-1-2 {
  width: 110px;
  height: 113px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.top-footer {
  width: 185px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.bxbx-map-icon {
  height: 32px;
  width: 26px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}

.map {
  width: 100%;
  max-width: 456px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.katy-gap-rd,
.united-states {
  margin: 0;
}

.katy-gap-rd-container {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  z-index: 1;
}

.footer-content,
.location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}

.location {
  align-self: stretch;
  gap: var(--gap-mini);
}

.footer-content {
  width: 100%;
  max-width: 467px;
  padding: var(--padding-lg) 0 0;
  box-sizing: border-box;
}

.phone-icon {
  margin: 0;
  align-self: stretch;
  height: 34px;
}

.phone-number {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  display: inline-block;
  min-width: 110px;
  z-index: 1;
}

.contact-info,
.phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.phone {
  width: 110px;
  gap: var(--gap-mini);
  align-items: center;
}

.contact-info {
  width: 100%;
  max-width: 277px;
  padding: var(--padding-base) 0 0;
  box-sizing: border-box;
}

.placeholder1 {
  width: 1px;
  flex: 1;
  position: relative;
  background-color: #d9d9d9;
  z-index: 1;
}

.logo-container {
display: none;
}

.energy-star-logosvg-1-icon {
  width: 63px;
  height: 66px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.energy-star {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
}

.qrtop500-logo-blue-002-1-icon {
  width: 71px;
  height: 67px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.q-r-scan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-3xl);
}

.kisspng-united-states-logo-mad-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

.logos,
.made-in-u-s-a {
  display: flex;
  box-sizing: border-box;
}

.made-in-u-s-a {
  height: 97px;
  width: 92px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
}

.logos {
  flex: 1;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--padding-12xs) 0 0;
  min-width: 241px;
  max-width: 100%;
  gap: var(--gap-xl);
}

.good-housekeeping-logo-e9018b9-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

.good-housekeeping {
  height: 93px;
  width: 125px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
  box-sizing: border-box;
}

.certification-logos {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: var(--gap-21xl);
  max-width: 100%;
}

.certifications,
.desktop-2,
.footer {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

.certifications {
  width: 100%;
  max-width: 536px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  max-width: 100%;
}

.desktop-2,
.footer {
  text-align: center;
  color: var(--light-text);
  font-family: var(--h3);
}

.footer {
  background-color: var(--color-midnightblue);
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-28xl) var(--padding-42xl) var(--padding-26xl) 62px;
  gap: 51px;
  max-width: 100%;
  font-size: var(--font-size-base);
}

.desktop-2 {
  width: 100%;
  position: relative;
  background-color: var(--light-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs) 0 0;
  gap: 2em;
  line-height: 1.5;
  letter-spacing: normal;
  font-size: 2rem;
}
#text-content {
  max-height: 250px; /* Ajusta este valor según cuánto texto quieras mostrar inicialmente */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

#text-content.expanded {
  max-height: 500px; /* Aumenta este valor para asegurarte de que todo el texto sea visible */
}

#toggle-button {
  cursor: pointer;
}
.bill-1-icon,
.credit-cards-1-icon,
.house-1-icon,
.secure-shield-1-icon,
.power-1-icon,
.low-volume-1-icon {
  width: 106px;
  height: 106px;
  object-fit: contain;
}

.h3, .h31, .h32, .h33, .h34, .h35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  gap: 5px;
}

.ahorra-en-la-container,
.recibe-crditos-e-container,
.aumenta-el-valor-container,
.mejora-la-seguridad-container,
.alarga-la-vida-container,
.mejora-la-comodidad-container {
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

.wrapper-video-screen {
  width: 100%;
  max-width: 1000px;

  position: relative;
  border-radius: 20px;
}

.video-screen-icon {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}
.frame-section111{
  width: 100%;
  max-width: 1529px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 82px;
  text-align: center;
  font-size: var(--font-size-29xl);
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin: 0 auto;
}

.frame-section111 h2 {
  font-size: var(--font-size-29xl);
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin-bottom: 20px; /* Ajusta según el espacio que necesites debajo del título */
}
.button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-7xs) var(--padding-19xl) 7px 39px;
  background-color: var(--color-midnightblue);
  border-radius: var(--br-71xl);
  justify-content: flex-start;
  white-space: nowrap;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: none;

} 
.contact-info {
width: 10%;
max-width: 277px;
padding: var(--padding-base) 0 0;
box-sizing: border-box;
}
}

@media screen and (max-width: 768px) {
  /* Estilos principales */
  body {
    margin: 0;
    padding: 0;
    line-height: normal;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .desktop-2 {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: var(--light-text);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 var(--padding-11xs);
    gap: 1.5em; /* Reducido para adaptarse mejor a pantallas pequeñas */
    line-height: 1.4; /* Ajustado para mejor legibilidad */
    letter-spacing: normal;
    font-size: 1.2rem; /* Disminuido para pantallas pequeñas */
    overflow-x: hidden;
  }

.background-content-icon {
  width: 100%;
  height: 100vh; /* Esto asegura que la imagen ocupe todo el alto de la ventana */
  object-fit: cover; /* Esto estira la imagen para cubrir todo el contenedor */
  position: absolute;
  left: 0;
  top: 0;
  transform: none; /* Elimina la escala que podría estar distorsionando la imagen */
}


.wrapper-background-content {
  width: 100%;
  height: 1px;
  position: relative;
  max-width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.desktop-menu {
  width: 42px;
  height: 28px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.logotipo-windows-pros-2 {
  height: 142px;
  width: 142px;
  position: relative;
  object-fit: cover;
  display: none;
}

.logotipo-windows-pros-2-wrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.frame-child {
  width: 100%;
  max-width: 100%;
  height: 131px;
  position: relative;
  border-radius: var(--br-21xl);
  background-color: var(--color-midnightblue);
  display: none;
}

.llama-ya {
  font-weight: 800;
}

.span {
  font-weight: 600;
  color: red;
}

.gratis {
  color: var(--color-darkturquoise);
}

.llama-ya-y-container {
  margin: 0;
  position: relative;
  font-size: 1.2rem;
  letter-spacing: 0.1px;
  line-height: 40px;
  z-index: 3;
  font-family: inherit;
}

.telephonev-1-icon {
  height: 20px;
  width: 21px;
  margin-top: 10px;
  position: relative;
  object-fit: inherit;
  z-index: 3;
}

.placeholder {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  z-index: 3;
  font-size: 1.2rem;
}

.placeholder-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  box-sizing: border-box;
  min-width: 186px;
}

.telephonev-1-parent {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  margin-left: 17px;
}

.frame-wrapper1 {
  align-self: center;
  flex-direction: row;
  justify-content: center;
  padding: 0 65px;
  font-size: 1.2rem;
}

.frame-div,
.frame-wrapper1,
.rectangle-parent {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}

.rectangle-parent {
  flex: 1;
  border-radius: var(--br-21xl);
  background-color: var(--color-midnightblue);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 27px 58px;
  gap: var(--gap-xs);
  z-index: 2;
}

.frame-div {
  width: 100%;
  max-width: 100%;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 var(--padding-4xl);
}

.reduce-un-50, .bill-de-electricidad {
  margin: 0;
  padding: 0;
}

.reduce-un-50-container {
  margin: 0 auto;
  position: relative;
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  line-height: 1.2;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  max-width: 100%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con 80% de opacidad */
  padding: 10px; /* Añadido para dar un poco de espacio alrededor del texto */
  border-radius: 8px; /* Opcional: añade bordes redondeados para un efecto más suave */
}



.h1 {
  align-self: stretch;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  max-width: 100%;
}

.cambiando-las-ventanas {
  margin: 0;
  flex: 1;
  
  position: relative;
  left: -20px; /* Ajusta el valor según sea necesario */
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  line-height: 40px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;
}

.h4 {
  width: 100%;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;
}

.try-for-free {
  font-size: 1.2rem;
  line-height: 20px;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: center;
}

.text-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.master-button {
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  overflow: hidden;
  padding: var(--padding-base) var(--padding-41xl);
}

.action-content,
.big-button,
.master-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.action-content {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: relative; /* Cambiado a relative */
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-top: 20px; /* Añadido para separar el botón del texto */
  display: flex;
  flex-direction: column;
}
/* Efecto al pasar el mouse por encima */
.action-content:hover .master-button {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade una sombra sutil */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza la transición */
}

.action-content:hover .try-for-free {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Añade una sombra al texto */
}

/* Efecto al hacer clic */
.action-content:active .master-button {
  transform: scale(0.95); /* Disminuye ligeramente el tamaño del botón al hacer clic */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Cambia la sombra para dar un efecto de presionado */
  transition: transform 0.1s ease, box-shadow 0.1s ease; /* Suaviza la transición */
}

.action-content:active .try-for-free {
  text-shadow: none; /* Elimina la sombra del texto al hacer clic */
}

 /* Asegura que los contenedores ocupen todo el espacio necesario verticalmente */
 .h4-parent, .action-content {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.action-content {
  position: relative;
  margin-top: 100px; /* Ajusta según sea necesario */
  width: 100%; /* Asegura que ocupe todo el ancho disponible */
  display: flex;
  justify-content: center; /* Centra el botón */
  margin-bottom: 45px;
}


.hero-content {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-smi);
  box-sizing: border-box;
  text-align: center;
  font-size: 1.2rem;
  color: var(--color-midnightblue);
}

.container,
.padding-bottom {
  width: 100%;
  max-width: 100%;
  height: 92px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.padding-bottom {
  width: 100%;
  max-width: 100%;
  height: 218px;
}

.desktop-hero-light-3 {
  align-self: center;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  gap: 7px;
  margin-top: 10px;
  font-size: 1.2rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.frame-group, .frame-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%; /* Asegura que el contenedor ocupe todo el ancho */
  max-width: 100%; /* Permite que crezca con el contenido */
  text-align: center;
}

.frame-container {
  padding: 0;
  overflow: hidden; /* Oculta el contenido que se sale del contenedor */
}

.frame-group,
.frame-wrapper {
  align-items: center;
}

.frame-group {
  align-self: center;
  gap: var(--gap-10xl);
}

.frame-wrapper {
  width: 100%;
  max-width: 100%; /* Permite que el contenedor crezca según el contenido */
  padding: 43px 0 0;
  box-sizing: border-box;
  min-width: 100%; /* Permite que el contenedor ocupe todo el ancho disponible */
}

.navigation-child {
  height: 68px;
  width: 100%;
  max-width: 100%;
  position: relative;
  border-radius: var(--br-71xl);
  background-color: var(--color-gray-200);
  display: none;
}

.inicio {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  min-width: 42px;
  z-index: 2;
}

.menu-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs) 0 0;
}

.beneficios,
.informacin {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  z-index: 2;
}

.beneficios {
  width: 81px;
  min-width: 81px;
}

.informacin {
  min-width: 94px;
}

.menu-items1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-5xs) 0 0;
}

.contacto {
  text-decoration: none;
  position: relative;
  letter-spacing: 0.2px;
  line-height: 28px;
  color: inherit;
  display: inline-block;
  min-width: 71px;
  z-index: 2;
}

.menu,
.menu-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.menu {
  margin: 0;
  flex-direction: row;
  gap: var(--gap-xl);
  white-space: nowrap;
  text-align: center;
  font-size: 1.2rem;
  color: var(--color-midnightblue);
  font-family: var(--h3);
}

.menu-wrapper {
  flex-direction: column;
  padding: var(--padding-7xs) 0 0;
  box-sizing: border-box;
  max-width: 100%;
}

.button-child {
  height: 41px;
  width: 100%;
  max-width: 100%;
  position: relative;
  border-radius: var(--br-71xl);
  background-color: var(--color-midnightblue);
  display: none;
}

/* Asegura que el texto dentro del botón se mantenga blanco */
.cotiza-ya {
  text-decoration: none;
  position: relative;
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  line-height: 28px;
  font-family: var(--h3);
  color: var(--light-text); /* Mantiene el texto blanco */
  text-align: center;
  display: inline-block;
  min-width:100%;
  z-index: 3;
  transition: color 0.3s ease;
}

.cotiza-ya:hover,
.cotiza-ya:active {
  color: var(--light-text); /* Asegura que el color del texto se mantenga blanco en ambos estados */
}

.button, .frame-parent {
  display: flex;
  flex-direction: row; /* Podría estar limitando el crecimiento vertical */
  align-items: flex-start;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan si es necesario */
}
.navigation {
  display: none;
}

/* Efectos para los enlaces del menú de navegación */
.menu a {
  transition: color 0.3s ease, transform 0.3s ease;
}

.menu a:hover {
  color: var(--color-lightblue); /* Cambia el color del texto al pasar el mouse */
  transform: scale(1.1); /* Aumenta ligeramente el tamaño del texto */
}

.menu a:active {
  color: var(--color-darkblue); /* Cambia el color del texto al hacer clic */
  transform: scale(0.9); /* Disminuye ligeramente el tamaño del texto al hacer clic */
}

/* Efectos para el botón COTIZA YA */
.button {
  cursor: pointer;
  border: 0;
  padding: var(--padding-7xs) var(--padding-19xl) 7px 39px;
  background-color: var(--color-midnightblue);
  border-radius: var(--br-71xl);
  justify-content: flex-start;
  white-space: nowrap;
  z-index: 2;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background-color:var(--color-midnightblue); /* Cambia el color de fondo al pasar el mouse */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del botón */
}

.button:active {
  background-color:var(--color-midnightblue); /* Cambia el color de fondo al hacer clic */
  transform: scale(0.95); /* Disminuye ligeramente el tamaño del botón al hacer clic */
}


.frame-parent,
.navigation {
  max-width: 100%;
}


.navigation {
  border-radius: var(--br-71xl);
  background-color: var(--color-gray-200);
  justify-content: flex-start;
  padding: var(--padding-sm) var(--padding-11xl) var(--padding-smi) 41px;
  box-sizing: border-box;
  gap: 31px;
  z-index: 1;
}

.frame-parent {
  flex: 1;
  justify-content: center;
  gap: var(--gap-xl);
}

.desktop-header-light-3, .desktop-header-light-3-inner {
  align-self: stretch;
  display: flex;
  align-items: flex-start; /* Cambia a 'center' si necesitas centrar los elementos */
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%; /* Asegura que ocupe todo el ancho disponible */
}

.desktop-header-light-3-inner {
  flex-direction: row;
  padding: 0 var(--padding-15xl) 0 37px;
}

.desktop-header-light-3 {
  background-color: var(--light-text);
  overflow: hidden;
  flex-direction: column;
  padding: 0 0 100px;
  gap: 10px;
}

.background-content {
  align-self: stretch;
  height: 1px;
  position: relative;
  display: none;
}

.background-content1,
.background-content2 {
  width: 100%;
  max-width: 100%;
  height: 0;
  position: relative;
  display: none;
}

.dale-vida-a {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  max-width: 100%;

}


.dale-vida-a-tu-hogar-y-protege-wrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px; /* Espacio interno */
  box-sizing: border-box;
  margin-top: 50px;
  background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco transparente */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar un efecto flotante */
}

.placeholder-image-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: var(--br-21xl);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}

.window-2-1 {
  height: 83px;
  width: 82px;
  position: relative;
  object-fit: cover;
}

.window-image {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.ventanas-de-impacto1 {
  line-height: 20px;
}

.ventanas-de-impacto {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.proteja-su-hogar {
  white-space: pre-wrap;
}

.proteja-su-hogar-de-tormentas1 {
  line-height: 20px;
}

.y-vientos-fuertes1 {
  line-height: 15px;
}

.y-vientos-fuertes {
  white-space: pre-wrap;
}

.proteja-su-hogar-de-tormentas {
  margin: 0;
}

.ventanas-de-impacto-container {
  flex: 1;
  position: relative;
}

.image-caption {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-2xs);
  box-sizing: border-box;
}

.placeholder-image-parent {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-xs);
}

.gallery-placeholders-icon,
.gallery-placeholders-icon1,
.gallery-placeholders-icon2,
.gallery-placeholders-icon3,
.icon  {
  width: 80%; /* Ajusta la imagen al 80% del contenedor */
  margin-bottom: 15px;
}
.icon {
  max-width: 100%;
  height: 70px; /* Altura fija para todos los íconos */
  object-fit: contain; /* Asegura que el ícono se ajuste sin distorsión */
}
.gallery-images{
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.gallery-images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.gallery-item {
  flex: 0 0 100%; /* Asegura que cada item ocupa el 100% del ancho del contenedor */
  scroll-snap-align: start; /* Alinea cada item al inicio cuando se detiene el scroll */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
}

.gallery-images-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.windows-1-icon {
  width: 58px;
  height: 60px;
  position: relative;
  object-fit: contain;
}

.window-type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-3xl) var(--padding-base) 0;
}

.double-hung-1-icon {
  width: 58px;
  height: 60px;
  position: relative;
  object-fit: contain;
}

.double-hung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-7xs) var(--padding-4xs) 0;
}

.awning-1-icon,
.view-1-icon {
  height: 92px;
  width: 91px;
  position: relative;
  object-fit: cover;
}

.view-1-icon {
  width: 70px;
  height: 73px;
}

.casement {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 5px;
}

.gallery-types,
.window-type-parent {
  display: flex;
  flex-direction: row;
  max-width: 100%;
}

.window-type-parent {
  width: 85%;
  max-width: 100%;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.gallery-types {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.custom1 {
  line-height: 24px;
}

.custom {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.la-tradicin-que {
  line-height: 20px;
}

.darle-vida-y {
  line-height: 15px;
}

.la-tradicin-que-necesitas-par {
  margin: 0;
}

.custom-la-tradicin-container {
  align-self: stretch;
  position: relative;
}

.custom-la-tradicin-que-neces-wrapper {
  width: 100%;
  max-width: 235px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs) 0 0;
  box-sizing: border-box;
}

.double-hung2 {
  line-height: 24px;
}

.double-hung1 {
  margin-block-start: 0;
  margin-block-end: 8px;
}

.estilo-clsico-de {
  line-height: 20px;
}

.estilo-clsico-de-doble-colgad {
  margin-block-start: 0;
  margin-block-end: 8px;
}

.funcionalidad-es-muy {
  line-height: 10px;
}

.funcionalidad-es-muy-convenien {
  margin: 0;
}

.double-hung-estilo-clsico-container {
  width: 100%;
  max-width: 252px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.awning1 {
  line-height: 24px;
}

.awning {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.toldo-la-combinacin {
  line-height: 20px;
}

.estilo-simplicidad {
  line-height: 15px;
}

.b {
  line-height: 20px;
  font-family: var(--h3);
}

.toldo-la-combinacin-perfecta {
  margin: 0;
}

.awning-toldo-la-container {
  width: 100%;
  max-width: 251px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.casement1 {
  margin-block-start: 0;
  margin-block-end: 2px;
}

.marco-la-forma {
  margin: 0;
}

.casement-marco-la-container {
  align-self: stretch;
  position: relative;
  line-height: 20px;
}

.casement-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xs) 0 0;
  box-sizing: border-box;
  min-width: 175px;
}

.awning-description,
.gallery-descriptions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.awning-description {
  width: 100%;
  max-width: 568px;
  gap: var(--gap-28xl);
}

.gallery-descriptions {
  gap: 59px;
}

.frame-parent1{
  display: flex;
  justify-content: flex-start;
}

.gallery {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll; /* Permite el desplazamiento horizontal en ambas direcciones */
  scroll-snap-type: x mandatory; /* Activa el desplazamiento a intervalos específicos */
  scroll-behavior: smooth; /* Desplazamiento suave */
  -webkit-overflow-scrolling: touch; /* Mejora la experiencia de scroll en dispositivos táctiles */
}
.title, .description {
  padding: 0 15px; /* Asegura que el texto esté bien espaciado dentro del contenedor */
  font-size: 1.2rem;
}
.frame-parent1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around; /* Distribuye el espacio uniformemente */
  gap: 28px;
  max-width: 100%;
  font-size: 1.2rem;
  color: var(--color-darkslategray-100);
}

.las-ventanas-energticamente,
.qu-son-las {
  margin: 0;
  position: relative;
  letter-spacing: none;
  font-family: inherit;
}

.qu-son-las {
  width: 85%;
  max-width: 100px;
  font-size: 1.5rem;
  line-height: 35px;
  font-weight: 700;
  display: inline-block;
  max-width: 100%;
}

.las-ventanas-energticamente {
  align-self: center;
  font-size: 1.2rem;
  line-height: 25px;
  font-weight: 400;
  color: var(--second-text);
}

.features-paragraph {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-8xl);
  max-width: 100%;
}

.try-for-free1 {
  position: relative;
  font-size: 1.2rem;
  letter-spacing: 0.1px;
  line-height: 28px;
  display: inline-block;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: left;
  min-width: 113px;
}

.text-button1 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.master-button1 {
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  overflow: hidden;
  padding: var(--padding-base) var(--padding-42xl);
}

.big-button, .master-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--br-16xl);
  background-color: var(--color-midnightblue);
  padding: 10 '';
}

.action-content1,
.features-content,
.features-paragraph-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.action-content1 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
}

.features-content,
.features-paragraph-parent {
  max-width: 100%;
}

.features-paragraph-parent {
  align-self: center;
  gap: var(--gap-21xl);
  align-items: center;
}

.features-content {
  flex: 1;
  padding: var(--padding-2xl) 0 0;
  box-sizing: border-box;
  min-width: 100%;
  margin-top: 50px;
}

.douglas-sheppard-9ryfg8swrvo-u-icon {
  align-self: center;
  height: 500px;
  position: relative;
  max-width: 90%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.screen-content {
  height: auto;
  width: 100%;
  max-width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10.8px var(--padding-12xs);
  box-sizing: border-box;
  min-width: 20%;
  max-width: 100%;
}

.features,
.features-content-parent {
  display: flex;
  flex-direction: column; /* Cambiado de 'row' a 'column' para apilar los elementos verticalmente */
  align-items: center; /* Mantiene los elementos centrados horizontalmente */
  max-width: 100%;
}


.features-content-parent {
  flex: 1;
  justify-content: flex-start;
  gap: var(--gap-22xl);
  
}

.features {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  padding: 1px;
  box-sizing: border-box;
  text-align: center;
  color: var(--color-midnightblue);
}

.beneficios1 {
  margin: 0;
  width: 352px;
  position: relative;
  font-size: 1.8rem;
  letter-spacing: 0.2px;
  line-height: 55px;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
  margin-top: 30px;
}

.beneficios-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
}

.estas-son-algunas {
  margin: 0;
  width: 1056px;
  position: relative;
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  line-height: 40px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  max-width: 102%;
}

.h41 {
  align-self: stretch;
  overflow: hidden;
  flex-direction: row;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 var(--padding-3xs) var(--padding-3xs);
  box-sizing: border-box;
  font-size: 1.2rem;
  color: var(--color-darkslategray-100);
}

.benefits-content,
.benefits-header,
.h41 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}

.benefits-header {
  width: 1050px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 17px;
}

.benefits-content {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  font-size: 1.2rem;
  color: var(--color-midnightblue);
}

.bill-1-icon {
  width: 106px;
  height: 106px;
  position: relative;
  object-fit: contain;
}

.ahorra-en-la,
.factura-de-energa {
  margin: 0;
}

.ahorra-en-la-container {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 28px;
}

.feature-style-2,
.h3 {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.h3 {
  flex-direction: row;
  padding: var(--padding-3xs);
}

.row, .row1 {
  flex-direction: column; /* Cambia la dirección a columna para apilar los elementos verticalmente */
  align-items: center; /* Centra los elementos horizontalmente */
  gap: 20px; /* Mantén el espacio entre los elementos */
  width: 100%; /* Asegura que ocupen todo el ancho disponible */
  height: auto; /* Permite que la altura se ajuste automáticamente al contenido */
}


.feature-style-2, .feature-style-21, .feature-style-22, 
.feature-style-23, .feature-style-24, .feature-style-25 {
    width: 100%; /* Asegura que cada item ocupe todo el ancho disponible */
    max-width: 100%; /* Elimina cualquier restricción de ancho máximo */
    text-align: center; /* Centra el contenido textualmente */
    height: auto;
}

.items,
.items1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: auto; /* Ajusta automáticamente la altura de cada contenedor */
}

.credit-cards-1-icon,
.house-1-icon,
.secure-shield-1-icon,
.power-1-icon,
.low-volume-1-icon {
  width: 106px;
  height: 106px;
  object-fit: contain;
}

.h3, .h31, .h32, .h33, .h34, .h35 {
  text-align: center; /* Asegura que el texto esté centrado */
  padding: 10px 0;
  gap: 5px;
}
.text-paragraphe {
 display:none;
}

.recibe-crditos-e-container,
.aumenta-el-valor-container,
.mejora-la-seguridad-container,
.alarga-la-vida-container,
.mejora-la-comodidad-container {
  flex: 1;
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 28px;
  margin-top: 5px; /* Reduce el espacio entre el título y la descripción */
}


.video-screen-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 8px;
  transform: scale(0.8); /* Reduce el tamaño del video */
}

.video,
.wrapper-video-screen {
  height: 400px; /* Ajusta la altura del contenedor del video */
  justify-content: center;
}

.wrapper-video-screen {
  width: 100%;
  max-width: 800px; /* Ajusta el ancho máximo del contenedor del video */
  position: relative;
  border-radius: 20px; /* Ajusta el radio de los bordes */
  display: flex;
  align-items: center;
}

.video {
  align-self: stretch;
  flex-direction: row;
  padding: 0 var(--padding-2xl) 0 var(--padding-xl);
  box-sizing: border-box;
}

.benefits-content-parent,
.frame-wrapper2,
.video {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}


.benefits-content-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  gap: 1px;
}

.benefits-list, .items, .items1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.frame-wrapper2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 1px;
}

.a-disfrutar-de,
.haga-el-cambio {
  margin: 0;
}

.estaremos-listos-para,
.haga-el-cambio-container {
  margin: 0;
  position: relative;
  letter-spacing: 0.2px;
  font-family: inherit;
}

.haga-el-cambio-container {
  align-self: center;
  font-size: 1.5rem;
  line-height: 30px;
  font-weight: 700;
}

.estaremos-listos-para {
  width: 888.3px;
  font-size: 1.2rem;
  line-height: 40px;
  font-weight: 400;
  color: var(--second-text);
  display: inline-block;
  max-width: 100%;
}

.testimonial-content {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  max-width: 80%;
}

.next-1-2 {
display: none;
}

.left-button-icon {
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.divavarta-icon {
  height: 90px;
  width: 90px;
  position: relative;
  border-radius: 45px;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}

.heading-3 {
  align-self: stretch;
  position: relative;
  line-height: 23px;
  font-weight: 500;
}

.cliente {
  width: 67.3px;
  position: relative;
  font-size: 1.2rem;
  line-height: 28.5px;
  display: flex;
  align-items: center;
}

.author-info,
.author-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.author-name {
  align-self: stretch;
  justify-content: flex-start;
}

.author-info {
  flex: 1;
  justify-content: flex-end;
  padding: 0 0 16.5px;
  box-sizing: border-box;
  min-width: 103px;
}

.testimonial-quote {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-2xl);
}

.testimonial-quote-wrapper {
  width: 269px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 19px 0 0;
  box-sizing: border-box;
}

.svg-icon {
  height: 44px;
  width: 45px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.frame-parent2,
.testimonial-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

.frame-parent2 {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-xl);
}

.testimonial-content-wrapper {
  align-self: stretch;
  justify-content: flex-start;
  padding: 0 0 0 var(--padding-12xs);
  box-sizing: border-box;
}

.super-contento-y {
  width: 435px;
  position: relative;
  font-size: 1.2rem;
  line-height: 32.3px;
  display: flex;
  align-items: center;
  max-width: 100%;
}

.divtestimonials-item,
.navigation-left-button {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.divtestimonials-item {
  flex: 1;
  border-radius: 16px;
  background-color: #f9f9f9;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  box-sizing: border-box;
  gap: var(--gap-xl);
  min-width: 349px;
}

.navigation-left-button {
  width: 100%;
  max-width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 1px;
}

.next-1-1 {
 display: none;
}

.testimonial-navigation-right {
  height: 266px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.testimonial-navigation-left {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--gap-xl);
}

.testimonial-navigation {
  width: 100%;
  max-width: 818px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 70px;
  margin-bottom: 70px;
  padding: 0 var(--padding-12xs);
  box-sizing: border-box;
  max-width: 100%;
  font-size: 1.2rem;
  color: var(--color-gray-100);
  font-family: var(--font-roboto);
}

.testimonial-container,
.testimonial-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.testimonial-wrapper {
  width: 100%;
  max-width: 1190px;
  gap: 1px;
  flex-shrink: 0;
  max-width: 124%;
}

.testimonial-container {
  width: 100%;
  padding: 1px;
  box-sizing: border-box;
  min-width: 120%;
  min-height: 761px;
  max-width: 100%;
}

.contctanos {
 display: none;
}

.contact-title {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text);
  font-family: var(--h3);
}

.your-name,
.your-email {
  width: 100%;
  border: none;
  background-color: transparent;
  font-family: var(--font-roboto);
  font-size: 1.2rem;
  color: var(--background);
  letter-spacing: 0.1px;
  line-height: 16px;
  outline: none; /* Quita el borde por defecto de los inputs */
}
.input {
  align-self: stretch;
  border-radius: var(--br-20xl);
  background-color: var(--color-whitesmoke-100);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center; /* Cambiado a center para alinear el texto dentro del input */
  padding: var(--padding-mid) var(--padding-xl);
}

.your-email {
  width: 100%;
}

.input1,
.input2 {
  border: 1px solid var(--color-gainsboro-100);
  background-color: var(--color-whitesmoke-100);
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.input1 {
  align-self: stretch;
  border-radius: var(--br-20xl);
  background-color: var(--color-whitesmoke-100);
  border: 1px solid var(--color-gainsboro-100);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center; /* Cambiado a center para alinear el texto dentro del input */
  padding: var(--padding-mid) var(--padding-xl);
}

.input2 {
  height: 193px;
  width: auto;
  outline: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: var(--padding-4xl) var(--padding-xl);
  font-family: var(--font-roboto);
  font-size: 1.2rem;
  color: var(--background);
}

.send {
  position: relative;
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  line-height: 20px;
  font-family: var(--h3);
  color: var(--light-text);
  text-align: left;
  display: inline-block;
  min-width: 53px;
  transition: color 0.3s ease; /* Transición suave para el color */
}

.master-button2:hover .send {
  color: #ffffff; /* Asegura que el texto se mantenga visible (blanco) al pasar el mouse */
}

.master-button2:active .send {
  color: #e0e0e0; /* Cambia a un tono más claro al hacer clic */
}

.master-button2,
.text-button2 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.master-button2 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-lg) 46px;
  background-color: var(--color-darkturquoise);
  border-radius: var(--br-16xl);
  transition: background-color 0.3s ease, transform 0.3s ease; /* Añadir transición suave */
}

.master-button2:hover {
  background-color: #008b8b; /* Cambia a un tono más oscuro al pasar el mouse */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
}

.master-button2:active {
  background-color: #006b6b; /* Cambia a un tono aún más oscuro al hacer clic */
  transform: scale(0.95); /* Disminuye ligeramente el tamaño para simular un efecto de clic */
}



.testimonial-container-parent {
  display: flex;
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  flex-direction: row;
  row-gap: 1px;
  width: 100%; /* Asegura que ocupe todo el ancho del contenedor */
  min-height: 100vh; /* Asegura que ocupe al menos toda la altura de la ventana */
  padding-bottom: 1px; /* Añade espacio adicional para evitar superposición con el footer */
}

/* Ajusta el formulario para que no sea demasiado ancho */
.sign-up-form {
  width: 100%; /* Ajusta el ancho del formulario según sea necesario */
  max-width: 100%; /* Ajusta el ancho máximo según sea necesario */
  box-shadow: var(--shadow);
  min-width: 360px;
  border-radius: 20px;
  background-color: var(--light-text);
  border: 1px solid #ddd;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-31xl) 30px;
  gap: 20px;
  z-index: 1;
  font-size: 1.2rem;
  color: var(--background);
  font-family: var(--font-roboto);
}


.testimonials {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  box-sizing: border-box;
  text-align: left;
}

.content,
.frame-section,
.testimonials {
  display: flex;
  max-width: 100%;
}

.frame-section {
  width: 100%;
  max-width: 1529px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Cambia de flex-end a center */
  justify-content: center; /* Cambia de flex-start a center para centrar verticalmente */
  gap: 1px;
  text-align: center;
  font-size: 1.2rem;
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin: 0 auto; /* Esto asegura que la sección esté centrada horizontalmente en la pantalla */
}

.content {
  margin-top: 1px;
  width: 100%; /* Ocupa el 100% del ancho del contenedor padre */
  max-width: 100%; /* Elimina cualquier límite en el ancho máximo */
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl) 30px;
  box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho */
}


.footer-child {
  height: 223px;
  width: 100%;
  max-width: 1741px;
  position: relative;
  background-color: var(--color-midnightblue);
  display: none;
}

.linea-1-2 {
  width: 110px;
  height: 113px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.top-footer {
  width: 185px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bxbx-map-icon {
  height: 32px;
  width: 26px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}

.map {
  width: 100%;
  max-width: 456px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
}

.katy-gap-rd,
.united-states {
  margin: 0;
}

.katy-gap-rd-container {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  z-index: 1;
}

.footer-content,
.location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}

.location {
  align-self: stretch;
  gap: var(--gap-mini);
}

.footer-content {
  width: 100%;
  max-width: 467px;
  padding: var(--padding-lg) 0 0;
  box-sizing: border-box;
}

.phone-icon {
  margin: 0;
  align-self: stretch;
  height: 34px;
}

.phone-number {
  position: relative;
  letter-spacing: 0.1px;
  line-height: 23px;
  display: inline-block;
  min-width: 110px;
  z-index: 1;
}

.contact-info,
.phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.phone {
  width: 110px;
  gap: var(--gap-mini);
  align-items: center;
}

.contact-info {
  width: 100%;
  max-width: 277px;
  padding: var(--padding-base) 0 0;
  box-sizing: border-box;
  align-items: center;
}

.placeholder1 {
  width: 1px;
  flex: 1;
  position: relative;
  background-color: #d9d9d9;
  z-index: 1;
}

.logo-container {
display: none;
}

.energy-star-logosvg-1-icon {
  width: 63px;
  height: 66px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.energy-star {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
}

.qrtop500-logo-blue-002-1-icon {
  width: 71px;
  height: 67px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}

.q-r-scan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-3xl);
}

.kisspng-united-states-logo-mad-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}

.logos,
.made-in-u-s-a {
  display: flex;
  box-sizing: border-box;
}

.made-in-u-s-a {
  height: 97px;
  width: 92px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
}

.logos {
  flex: 1;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1px;
  min-width: 241px;
  max-width: 100%;
  gap: 1px;
}

.good-housekeeping-logo-e9018b9-icon {
  align-self: center;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 50%;
  object-fit: cover;
  z-index: 1;
  top: -18px;
}

.good-housekeeping {
  height: 93px;
  width: 125px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0 var(--padding-2xl);
  box-sizing: border-box;
}

.certification-logos {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  max-width: 100%;
}

.certifications,
.desktop-2,
.footer {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

.certifications {
  width: 90%;
  max-width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0 0;
  max-width: 100%;
}

.desktop-2,
.footer {
  text-align: center;
  color: var(--light-text);
  font-family: var(--h3);
}

.footer {
  background-color: var(--color-midnightblue);
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-28xl) var(--padding-42xl) var(--padding-26xl) 62px;
  gap: 51px;
  max-width: 100%;
  font-size: 1.2rem;
}

.desktop-2 {
  width: 100%;
  position: relative;
  background-color: var(--light-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--padding-11xs) 0 0;
  gap: 2em;
  line-height: 1.5;
  letter-spacing: normal;
  font-size: 1.2rem;
}
#text-content {
  max-height: 100px; /* Ajusta este valor según cuánto texto quieras mostrar inicialmente */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  max-width: 80%;
  font-size: 1.2rem;
}

#text-content.expanded {
  max-height: 500px; /* Aumenta este valor para asegurarte de que todo el texto sea visible */
}

#toggle-button {
  cursor: pointer;
}
.bill-1-icon,
.credit-cards-1-icon,
.house-1-icon,
.secure-shield-1-icon,
.power-1-icon,
.low-volume-1-icon {
  width: 106px;
  height: 106px;
  object-fit: contain;
}

.h3, .h31, .h32, .h33, .h34, .h35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  gap: 5px;
}

.ahorra-en-la-container,
.recibe-crditos-e-container,
.aumenta-el-valor-container,
.mejora-la-seguridad-container,
.alarga-la-vida-container,
.mejora-la-comodidad-container {
  text-align: center;
  margin: 0;
  line-height: 1.5;
  font-size: 1.2rem;
}

.video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

.wrapper-video-screen {
  width: 100%;
  max-width: 100%;

  position: relative;
  border-radius: 20px;
}

.video-screen-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.frame-section111{
  width: 100%;
  max-width: 1529px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 82px;
  text-align: center;
  font-size: 1.2rem;
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin: 0 auto;
}

.frame-section111 h2 {
  font-size: 1.8rem;
  color: var(--color-darkturquoise);
  font-family: var(--h3);
  margin-bottom: 20px; /* Ajusta según el espacio que necesites debajo del título */
}
}