/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body */
body {
  font-family: 'Ubuntu', sans-serif;
  background-color: #2A2E35;
  color: #333;
  overflow-x: hidden;  /*Evitar desplazamiento horizontal */
  scroll-behavior: smooth; /* Activar desplazamiento suave */
}

h1 {
  text-align: center;
  font-family: "Montserrat";
  font-size: 5vw;
  font-style: italic;
  font-weight: 100;
}

h2 {
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  font-size: 5vh;
  font-weight: 100;
}

h3 {
  text-align: left;
  font-family: 'Ubuntu', sans-serif;
  font-size: 10px;
  font-weight: 100;
}

h4 {
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 100;
}

p {
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 20px;
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------Barra de navegación -------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

header {
  background-color: #2A2E35;
  padding: 25px 100px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  height: 80px;
}

.navbar ul {
  display: flex;
  margin: 0;
  gap: 80px;
}

.navbar ul li {
  margin: 0;
}

.navbar ul li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: 100;
  transition: color 0.3s;
}

.boton-contacto-navbar {
  background-color: #ED8E6A;
  color: #2A2E35;
  padding: 10px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 300;
  transition: background-color 0.3s, transform 0.3s;
}

#text-button {
  color: #2A2E35;
  font-weight: 400;
}

/*-------------------------------------------responsive menu------------------------------------------------------------*/

@media (max-width: 768px) {
  /* Navbar en pantallas pequeñas */
  .navbar {
    flex-direction: row; /* Cambia la dirección a columna */
    align-items: flex-start; /* Alinea los items a la izquierda */
    justify-content: center;
    padding: 20px; /* Ajusta el padding */
    gap: 100px;
  }

  .navbar ul {
    flex-direction: column; /* Los elementos se apilan verticalmente */
    gap: 80px; /* Reduce el espacio entre los enlaces */
    align-items: flex-start; /* Alinea los enlaces a la izquierda */
    margin-top: 10px; /* Ajusta el margen superior */
  }

  .navbar ul li {
    text-align: left; /* Asegura que los items estén alineados a la izquierda */
  }

  .boton-contacto-navbar {
    width: 100%; /* Hace que el botón ocupe todo el ancho disponible */
    margin-top: 10px; /* Ajusta el margen superior del botón */
    text-align: center; /* Centra el texto dentro del botón */
  }

  /* Ajuste del logo */
  .logo {
    height: 60px; /* Reduce el tamaño del logo en pantallas pequeñas */
  }
}

/* Responsividad para pantallas menores a 480px */
@media (max-width: 480px) {
  .navbar ul {
    gap: 15px; /* Reduce aún más el espacio entre los elementos */
  }

  .boton-contacto-navbar {
    padding: 10px 20px; /* Reduce el padding para pantallas más pequeñas */
  }
}


/*---------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------- Contenedor principal ---------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------*/

/* Estilo para la sección contenedora de las imágenes */
.container-hero {
  position: relative;
  display: flex;
  flex-direction: row-reverse; /* Video a la izquierda, contenido a la derecha (cambia a 'row' si prefieres lo contrario) */
  justify-content: center;
  align-items: center;
  gap: 20px; /* Espacio entre el video y el contenido */
  padding: 20px;
  width: 100%; /* Asegura que la sección ocupe todo el ancho disponible */
  box-sizing: border-box;
}

/* Estilo para el contenedor del iframe */
.video-iframe-wrapper {
  width: 50%; /* El contenedor del video ocupa el 50% del ancho */
  max-width: 50%; /* Asegura que no se desborde */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Estilo del iframe */
.video-iframe {
  width: 100%;
  height: autovh;
  border-radius: 30px;
}

/* Estilo para la imagen de carga */
.video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* Imagen de carga */
.placeholder-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Cuando el video ha cargado, oculta la imagen de carga */
.video-iframe-wrapper.loaded .video-placeholder {
  display: none;
}

/* Contenedor del contenido (texto y botón) */
.hero-content {
  width: 50%; /* El contenido ocupa el 50% del ancho */
  max-width: 50%; /* Asegura que no se desborde */
  text-align: center;
  color: #333;
  flex: 1;
  padding: 20px;
}

/* Títulos y texto */
.hero-heading {
  font-size: 40px;
  color: #FADE9F;
  margin-bottom: 10px;
}

.sub-hero-heading {
  font-size: 24px;
  font-weight: 300;
  color: #555;
  margin-bottom: 15px;
}

.hero-paragraph {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 30px;
  color: #FADE9F;
  font-style: 100;
}

.city-title {
  font-size: 20px;
  font-weight: normal;
  color: #FADE9F;
  margin-top: 100px;
}

/* Estilo del botón */
.cta-button {
  display: flex;
  background-color: #ED8E6A;
  color: #2A2E35;
  justify-self: center;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 400;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
  background-color: #ADC4E6;
  transform: scale(1.05);
}

/* Estilos Responsive */

/* Para pantallas de 768px o menos */
@media (max-width: 768px) {
  .container-hero {
    flex-direction: column; /* Apilar el video y el contenido en pantallas pequeñas */
    text-align: center;
  }

  .video-iframe-wrapper,
  .hero-content {
    width: 100%; /* Ambos elementos ocuparán el 100% del ancho disponible */
    max-width: 100%;
  }

  .hero-heading {
    font-size: 28px; /* Reducir el tamaño de la fuente para pantallas más pequeñas */
  }

  .cta-button {
    display: flex;
    background-color: #ED8E6A;
    color: #2A2E35;
    justify-self: center;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 400;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .city-title {
    font-size: 18px; /* Ajustar el tamaño de la ciudad */
    margin-top: 50px;
  }
}

/* Para pantallas de 480px o menos */
@media (max-width: 480px) {
  .hero-heading {
    font-size: 24px; /* Ajustar aún más el tamaño de la fuente */
  }

  .hero-paragraph {
    font-size: 14px; /* Reducir el tamaño del texto */
  }

  .cta-button {
    font-size: 14px; /* Ajustar el tamaño del botón */
    padding: 0.8rem 1.5rem; /* Reducir el padding del botón */
    justify-content: center;
  }

  .city-title {
    font-size: 16px; /* Reducir el tamaño de la ciudad */
  }
}


/*--------------------------------------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------contenedor 2 -----------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

.container-2 {
  position: relative;
  display: flex;
  justify-content: space-between; /* Distribuye los elementos de forma equitativa */
  align-items: center;            /* Centra verticalmente los elementos */
  padding: 50px 20px;
  background-color: #FADE9F; /* Fondo para la sección */
  position: relative;
  flex-wrap: wrap;  /* Permite que los elementos se ajusten cuando hay poco espacio */
}

/* Contenedor de la imagen */
.image-wrapper-2 {
  flex: 1 1 50%;             /* La imagen ocupará hasta el 50% del ancho */
  max-width: 100%;           /* Asegura que la imagen no se salga del contenedor */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagen dentro del contenedor */
.container-hero-2 {
  width: 80%;              /* La imagen ocupa el 100% de su contenedor */
  height: auto;             /* Mantiene la relación de aspecto */
  border-radius: 0px;
}

/* Contenedor del contenido (texto y botón) */
.hero-content-2 {
  flex: 1 1 40%;             /* El texto ocupa hasta el 50% del ancho */
  max-width: 100%;           /* Asegura que el texto no se desborde */
  text-align: center;
  color: #333;
  padding-right: 100px;
}

/* Títulos y texto */
.hero-heading-2 {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.sub-hero-heading-2 {
  font-size: 30px;
  font-weight: 300;
  color: #333;
  margin-bottom: 15px;
}

.hero-paragraph-2 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 30px;
}

/* Estilo del botón */
.cta-button-2 {
  display: flex;
  background-color: #ED8E6A;
  color: #2A2E35;
  justify-self: center;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 400;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button-2:hover {
  background-color:#ADC4E6;
  transform: scale(1.05);
}

/* Para pantallas de 768px o menos */
@media (max-width: 768px) {
  .container-hero-2 {
    display: flex;
    flex-direction: column; /* Disponer los elementos en una columna */
    align-items: center;    /* Centrar elementos horizontalmente */
    text-align: center;     /* Centrar el texto */
    padding: 20px;          /* Añadir padding para una mejor estética */
    margin: 0 auto;
  }

  .hero-content-2 {
    flex: 1 1 auto;         /* Permitir que el contenido se ajuste automáticamente */
    max-width: 100%;        /* Prevenir desbordamiento */
    text-align: center;     /* Centrar el texto */
    padding-right: 0;       /* Eliminar espacio a la derecha para pantallas pequeñas */
    padding: 0 10px;        /* Padding igual a ambos lados */
    box-sizing: border-box; /* Asegurarse que padding se considere en el tamaño */
  }

  .hero-heading-2 {
    font-size: 28px;        /* Reducir tamaño de la fuente para móviles */
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .sub-hero-heading-2 {
    font-size: 22px;        /* Ajustar tamaño de subtítulos */
    font-weight: 300;
    color: #333;
    margin-bottom: 15px;
  }

  .hero-paragraph-2 {
    font-size: 20px;        /* Reducir el tamaño del texto */
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .cta-button-2 {
    display: inline-flex;   /* Cambiar a inline-flex para centrado preciso */
    justify-content: center;
    align-items: center;
    background-color: #ED8E6A;
    color: #2A2E35;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 400;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 10px;       /* Espaciado adicional desde el contenido */
  }

  .cta-button-2:hover {
    background-color: #ADC4E6;
    transform: scale(1.05);
  }
}

/* Para pantallas aún más pequeñas */
@media (max-width: 480px) {
  .hero-heading-2 {
    font-size: 24px;        /* Reducir aún más el tamaño de la fuente */
  }

  .sub-hero-heading-2 {
    font-size: 20px;        /* Ajustar subtítulo */
  }

  .hero-paragraph-2 {
    font-size: 20px;        /* Reducir el texto */
  }

  .cta-button-2 {
    font-size: 14px;
    padding: 10px 20px;
  }
}


/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------Submenu tipologias ----------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

.navbar-tipo {              /* Utiliza Flexbox para alinear los elementos */
  align-items: left;        /* Centra verticalmente los elementos */
}

/* Estilo para el título de la barra de navegación */
.navbar-tipo-title {
  background-color: #ED8E6A;
  color: #2A2E35;
  font-size: 30px;
  font-weight: 600;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;              /* Habilitar Flexbox en el título */
  align-items: center;        /* Centra el contenido verticalmente */
  justify-content: center;    /* Centra el texto horizontalmente */
  text-align: center;      
}

.navbar-tipo ul {
  display: flex;
  margin: 0;
  gap: 80px; 
}

.navbar-tipo ul li {
  margin: 0;
}

.navbar-tipo ul li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: 100;
  transition: color 0.3s;
}

/* Elimina los puntos de la lista */
.habitaciones {
  list-style: none;                
  padding: 0;
  margin: 0;
  display: flex;                    /* Usamos flexbox para mostrar los elementos horizontalmente */
  gap: 20px;                        /* Espaciado entre los elementos */
}

/* Estilo para los enlaces de las habitaciones */
.habitaciones li a {
  font-size: 18px;
  font-weight: 600;
  color: #2A2E35;                  /* Color de texto */
  text-decoration: none;           /* Elimina el subrayado por defecto de los enlaces */
  padding-bottom: 5px;             /* Añade un poco de espacio debajo para el subrayado */
  transition: all 0.3s ease;       /* Transición suave para el subrayado */
  cursor: pointer;                /* Cambia el cursor para indicar que es un enlace clickeable */
}

/* Subrayado de color naranja al pasar el ratón */
.habitaciones li a:hover {
  border-bottom: 3px solid #ED8E6A; /* Subrayado de color naranja */
  padding-bottom: 2px;              /* Ajuste de padding para que el subrayado quede justo debajo del texto */
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------Seccion Tipologias---------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

.tipologias {
  display: flex; /* Hace que el contenedor principal sea flexbox */
  justify-content: space-between; /* Espaciado entre la imagen y el menú */
  align-items: center; /* Centra verticalmente el contenido */
  gap: 20px; /* Espacio entre los elementos */
  padding-top: 20px;
  padding-bottom: 20px;
  flex-direction: column;
}

.tipologias-section {
  flex: 1; /* La imagen ocupa un 50% del contenedor */
}

.header-image {
  width: 100%;
  height: auto;
  border-radius: 30px;
  align-items: center;
  justify-content: center;
}

.navbar-tipo {
  display: flex;
  flex-direction: row; /* Si se quieren apilar los botones verticalmente */
  justify-content: center; /* Alineación superior */
  gap: 40px; /* Espacio entre los botones */
  z-index: 3;
  margin-top: -50px;
}

.menu-tipologias {
  display: flex;
  justify-content: center; /* Asegura que los botones estén centrados */
  gap: 15px;
  flex-wrap: wrap; /* Permite que los botones se acomoden en pantallas más pequeñas */
  width: 100%; /* Asegura que el contenedor tenga todo el ancho disponible */
  align-items: center; /* Centra los botones verticalmente */
  justify-content: center; /* Asegura que los botones estén centrados */
}

.menu-tipologias button {
  background-color: #ADC4E6;
  color: #2A2E35;
  font-size: 18px;
  padding: 10px 20px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-family: 'Ubuntu', sans-serif;  
}

.menu-tipologias button:hover {
  background-color: #ADC4E6;
  transform: scale(1.05);
}

/*--------------Responsibe tipologias-------------------------*/

@media (max-width: 768px) {
  .tipologias {
    padding: 15px;
  }

  .header-image {
    max-width: 100%; /* Asegura que la imagen no se estire demasiado */
  }

  .menu-tipologias {
    justify-content: center;
    flex-direction: column; /* Coloca los botones en una columna */
    gap: 20px;
  }

  .menu-tipologias button {
    font-size: 16px; /* Reducir el tamaño de la fuente para pantallas más pequeñas */
    padding: 12px 25px;
    justify-content: center;
    margin: auto;
  }
}

/* Media Queries para móviles (hasta 480px) */

/* Pantallas de móviles */
@media (max-width: 480px) {
  .tipologias {
    padding: 10px;
  }

  .header-image {
    max-width: 90%; /* La imagen será un poco más pequeña */
  }

  .menu-tipologias {
    flex-direction: row; /* Los botones estarán en una columna */
    gap: 8px;
    justify-content: center; /* Centra los botones */
    align-items: center; /* Centra los botones verticalmente */
  }

  .menu-tipologias button {
    flex-direction: row;
    font-size: 14px; /* Reducir aún más el tamaño de la fuente */
    padding: 10px 20px;
    width: 80%; /* Hace que los botones ocupen el 80% del ancho para evitar que queden demasiado pequeños */
  }
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------Estilos para el listado de apartamentos-------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

.apartamento {
  display: none; /* Ocultar todos los apartamentos inicialmente */
}

.apartamento.visible {
  display: block; /* Mostrar los apartamentos visibles cuando se selecciona una tipología */
}

.apartamentos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
  background-color: #ADC4E6;
}

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

.details {
  display: none; /* Ocultar los detalles por defecto */
  padding: 5px;
  background-color: #9797975b;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin-top: 10px;
  text-align: left;
  width: 100%; /* Asegurar que ocupe el 100% del contenedor */
  max-width: 450px; /* Limitar el ancho máximo para que no se expanda demasiado */
  margin-left: auto;
  margin-right: auto; /* Centrado horizontal */
  display: flex;              /* Habilitar Flexbox en el título */
  align-items: center;        /* Centra el contenido verticalmente */
  justify-content: center;    /* Centra el texto horizontalmente */
  text-align: center;         /* Asegura que el texto se centre dentro del contenedor */
  margin-bottom: 50px;
}

.details p {
  font-size: 12px;
  color: #000000;

  padding: 10px;
}

.details i {
  color: #3498db;
  padding: 20px;
}

.hidden {
  display: none; /* Ocultar el apartamento */
}

.modal {
  display: none; /* Ocultar el modal inicialmente */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  z-index: 1000;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Evitar barras de desplazamiento */
  transition: transform 2s ease-in-out; /* Suavizar animación del contenido */
}

.modal-content {
  background: rgba(255, 255, 255, 0.38);
  border-radius: 10px;
  padding: 10px;
  width: 100%; /* Asegurarse de que el modal no ocupe más del 90% del ancho */
  max-width: 1000px;
  max-height: 100%; /* Ajustar a un máximo del 90% de la pantalla */
  overflow: auto; /* Para que el contenido desborde dentro del modal */
  text-align: center; /* Centrar el contenido en el modal */
  display: flex; /* Usar flex para centrar mejor los elementos internos */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: scale(1); /* Para evitar desplazamientos de tamaño */
  transition: transform 2s ease-in-out; /* Suavizar animación del contenido */
}

.modal-content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* Separación entre imagen y otros contenidos */
  align-self: center; /* Asegurar que esté centrado en el eje secundario */
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1; /* Colocar el botón encima del resto del contenido */
}

/*----------------------Responsive apartamentos y modales-------------------*/

/* Para pantallas pequeñas (tabletas y móviles) */
@media (max-width: 768px) {
  .apartamentos {
    grid-template-columns: 1fr; /* En pantallas pequeñas, mostrar una sola columna */
  }

  .details {
    max-width: 90%; /* Asegura que el contenedor de detalles ocupe más espacio */
    padding: 15px;
  }

  .details p {
    font-size: 14px; /* Aumentar el tamaño del texto en pantallas pequeñas */
  }

  .modal-content {
    max-width: 90%; /* Asegura que el modal ocupe solo un 90% del ancho en pantallas pequeñas */
  }
}

@media (max-width: 480px) {
  .details {
    max-width: 95%; /* En pantallas muy pequeñas, aseguramos que los detalles se ajusten */
  }

  .modal-content {
    max-width: 95%; /* El modal también ajustará su tamaño en pantallas móviles */
  }
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------Sección del carrusel ------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/

/* Contenedor del carrusel */
.video-texto-carousel {
  background-color: #FADE9F;
  width: 450px;
  height: 450px;
  border-radius: 30px;
  padding-top: 20px;
  padding-left: 20px;
  z-index: 2;
}

.video-texto-carousel h2 {
  font-weight: 600;
  font-size: 40px;
  padding-right: 20px;
  text-align: left;
}

.video-texto-carousel p {
  padding-top: 10px;
  font-size: 24px;
  line-height: 30px;
  padding-right: 20px;
  text-align: left;
}

.apartamento-carousel {
  display: flex;
  position: relative;
  width: 100%;
  max-width: fit-content;
  margin: 0 auto;
}

.carousel-container {
  width: 75%;
  overflow: hidden;  /* Para ocultar imágenes fuera del contenedor */
  align-items: left;

}

.carousel-slide {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  border-radius: 30px;
  object-fit: cover; 
}
/* Controles del carrusel (flechas) */
.carousel-controls {
  position: absolute; /* Coloca las flechas sobre el carrusel */
  top: 50%; /* Centra las flechas verticalmente en el contenedor */
  left: 0px;
  gap: 200px;
  display: flex;
  justify-content: space-between; /* Coloca las flechas en los extremos izquierdo y derecho */
  transform: translateY(-10%); /* Ajuste fino del centrado vertical */
  z-index: 5; /* Asegura que los botones estén sobre las imágenes */
}

.carousel-controls button {
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
  color: white; /* Color de las flechas */
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 20px;
  border-radius: 50%; /* Botones redondeados */
  transition: background-color 0.3s ease;
  margin-left: 50px;
  margin-right: 500px;
  z-index: 5;
}

.carousel-controls button:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Color más oscuro al pasar el cursor */
}


.carousel-container {
  position: relative;
  width: 100%;
  max-width: 900px; /* You can adjust this based on your design */
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.carousel-indicators {
  position: absolute;
  bottom: -160px;
  left: 25%;
  display: flex;
  gap: 10px;
}

.indicator {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  top: 40px;
}
.indicator:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.indicator.active {
  background-color: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}



/*------------------------------Responsive Carrusel-------------------------*/

@media (max-width: 768px) {
  .apartamento-carousel {
    display: flex;
    flex-direction: column; /* Asegura que el contenido se apile verticalmente */
    justify-content: center;
    align-items: center;
  }

  .video-texto-carousel {
    order: 1; /* Mueve los textos al primer lugar */
    width: 90%;
    height: auto;
    margin: 0 40px;
    text-align: center;
  }

  .carousel-container {
    order: 2; /* Mueve el carrusel al segundo lugar */
    flex-direction: column-reverse;
    width: 100%;
    padding: 0 10px;
  }

  .video-texto-carousel {
    margin: 10px 40px;
  }

  .video-texto-carousel h2,
  .video-texto-carousel p {
    margin: 10px 40px;
  }

  .video-texto-carousel h2 {
    font-size: 32px;
  }

  .video-texto-carousel p {
    font-size: 18px;
    line-height: 24px;
  }

  .carousel-controls {
    position: absolute;
    top: 50%; /* Centra verticalmente las flechas */
    left: 5%; /* Ajusta horizontalmente las flechas */
    right: 5%;
    display: flex;
    justify-content: space-between; /* Distribuye las flechas a los lados del carrusel */
    transform: translateY(-50%);
    z-index: 2;
  }

  .carousel-controls button {
    margin: 0; /* Elimina márgenes adicionales */
    padding: 8px 12px;
    font-size: 18px;
  }

  .carousel-indicators {
    position: absolute;
    bottom: -130px;
    left: 20%;
    display: flex;
    gap: 10px;
  }

  .carousel-slide {
    display: flex;
    margin: 10px;
    align-items: center; /* Asegura que las imágenes y los botones estén alineados */
  }

  .carousel-slide img {
    object-fit: cover;
    width: 100%;
    height: auto;
    border-radius: 30px;  
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .video-texto-carousel {
    padding: 5px;
  }

  .video-texto-carousel h2 {
    font-size: 28px;
  }

  .video-texto-carousel p {
    font-size: 16px;
    line-height: 20px;
  }

  .carousel-controls {
    top: 50%;
    left: 5%;
    right: 5%;
  }

  .carousel-controls button {
    padding: 6px 10px;
    font-size: 16px;
  }

  .carousel-indicators {
    position: absolute;
    bottom: -40px;
    left: 10%;
    display: flex;
    gap: 10px;
  }
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------Container FARO --------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Contenedor principal */
.container-faro {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  gap: 20px;
  background-color: #FADE9F;
}

/* Estilo para image-wrapper */
.image-wrapper {
  flex: 1;
  max-width: 70%;
  height: auto;
  box-sizing: border-box;
}

/* Imagen dentro del image-wrapper */
.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 30px;
}

/* Estilo para video-texto */
.faro-texto {
  flex: 1;
  max-width: 30%;
  text-align: left;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ED8E6A;
}

.faro-texto {
  width: 600px;
  height: 450px;
  border-radius: 30px;
  padding-top: 25px;
  padding-left: 50px;
  justify-content: end;
}

.faro-texto h2 {
  font-weight: 600;
  font-size: 40px;
  padding-right: 20px;
  text-align: right;
}

.faro-texto p {
  padding-top: 10px;
  font-size: 24px;
  line-height: 30px;
  padding-right: 20px;
  text-align: right;
}

/* Media Queries para Responsividad */

/* Pantallas hasta 1280px */

@media (max-width: 1280px) {
  .container-faro {
    flex-direction: column;  /* Mantener en fila */
    justify-content: space-between;  /* Mantener separación uniforme */
    gap: 30px; /* Aumentar el espaciado entre los elementos */
  }

  .image-wrapper {
    max-width: 60%;  /* Reducir el ancho máximo de la imagen */
    margin-right: 30px;  /* Añadir margen a la derecha */
  }

  .faro-texto {
    max-width: 35%; /* Reducir el ancho máximo del texto */
    padding: 25px; /* Aumentar el padding */
  }

  .faro-texto h2 {
    font-size: 32px; /* Ajustar tamaño del título */
  }

  .faro-texto p {
    font-size: 18px; /* Ajustar tamaño del texto */
    line-height: 28px; /* Ajustar altura de línea */
  }
  
  .container-texto-under {
    width: 50%; /* Reducir ancho de la sección de texto */
    max-width: 80%; /* Limitar el ancho máximo */
  }

  .container-texto-under p {
    font-size: 18px; /* Ajustar el tamaño del texto */
  }

  .container-texto-under .cta-button {
    padding: 10px 30px; /* Reducir el tamaño del botón */
    font-size: 18px; /* Reducir el tamaño de la fuente del botón */
  }
}


/* Pantallas hasta 768px */
@media (max-width: 768px) {
  .container-faro {
    flex-direction: column; /* Apilar elementos verticalmente */
    justify-content: center; /* Centrar contenido verticalmente */
    padding: 20px; /* Agregar espaciado */
  }

  .image-wrapper {
    max-width: 100%; /* Ocupa el 100% en pantallas más pequeñas */
    margin-bottom: 20px; /* Espaciado debajo de la imagen */
  }

  .faro-texto {
    max-width: 100%; /* Ocupa el 100% en pantallas más pequeñas */
    text-align: center; /* Centrar texto */
    padding-left: 20px;
    padding-right: 20px;
  }

  .faro-texto h2 {
    font-size: 24px; /* Reducir tamaño de fuente */
  }

  .faro-texto p {
    font-size: 16px; /* Reducir tamaño de fuente */
    line-height: 24px; /* Ajustar el alto de la línea */
  }
}

/* Pantallas hasta 480px (móviles) */
@media (max-width: 480px) {
  .container-faro {
    flex-direction: column; /* Apilar los elementos */
    justify-content: center; /* Centrar el contenido verticalmente */
    padding: 10px; /* Reducir espaciado */
  }

  .image-wrapper {
    max-width: 100%; /* Ocupa todo el ancho */
    margin-bottom: 10px; /* Reducir margen */
  }

  .faro-texto {
    max-width: 100%; /* Ocupa todo el ancho */
    text-align: center; /* Centrar el texto */
    padding: 15px; /* Reducir padding */
  }

  .faro-texto h2 {
    font-size: 20px; /* Reducir el tamaño del título */
  }

  .faro-texto p {
    font-size: 20px; /* Reducir el tamaño del texto */
    line-height: 20px; /* Ajustar el alto de la línea */
  }
}

/* Ajustes generales para todo el contenedor */
.container-hero-1 {
  display: flex;
  width: 80%;
  height: auto;
  border-radius: 60px;
  justify-content: start;
}

.container-texto-under {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: justify;
  width: 100%;
  max-width: 90%;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
}

.container-texto-under p {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.5;
  background-color: #FADE9F;
}

.container-texto-under .cta-button {
  display: inline-block;
  background-color: #ED8E6A;
  color: #2A2E35;
  text-decoration: none;
  padding: 12px 40px;
  font-size: 20px;
  border-radius: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.container-texto-under .cta-button:hover {
  background-color: #ADC4E6;
  transform: scale(1.05);
}

.container-texto-under-wrapper {
  width: auto;
  background-color: #FADE9F;
  display: flex;
  justify-content: center;
}

/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------formulario suscripcion------------------------------------------------ */
/*--------------------------------------------------------------------------------------------------------------------------------------*/

/* Contenedor principal */
.container-suscription {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ED8E6A;
}

/* Formulario */
.form-suscription {
  background-color: #2A2E35;
  z-index: 8;
  border-radius: 30px;
  padding-left: 50px;
  padding-right: 50px;
  margin-right: 30px;
}



/* Título */
.form-suscription h2 {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
}

/* Párrafo */
.form-suscription p {
  color: white;
  font-size: 14px;
  font-weight: 200;
  margin-top: 20px;
}

/* Campos de entrada */
.form-suscription input {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 10px;
  font-size: 1rem;
  border: none;
  border-bottom: 2px solid #FADE9F;
  background-color: transparent;
  color: white;
  outline: none;
}

.form-suscription input:focus {
  border-bottom: 2px solid #3498db;
}

/* Botón */
.form-suscription button {
  display: block;
  width: 80%;
  margin: 20px auto;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: 'Ubuntu', sans-serif;
}

.form-suscription button:hover {
  background-color: #267db6;
}

.image-suscription {
  background-color: #2A2E35;
  z-index: 8;
  border-radius: 30px;
  padding-left: 50px;
  padding-right: 50px;
  margin-right: 30px;
}

/* Imagen */
.imagen-familia {
  width: 90%;
  height: auto;
  border-radius: 30px;
  border: 11.247px solid #FADE9F;
  margin-left: 120px;
  z-index: 0;
}


/*----------------------------Responsive Suscripcion----------------------------------------*/

/* Media Query para pantallas hasta 1280px */
@media (max-width: 1280px) {
  .container-suscription {
    display: flex;
    flex-direction: column-reverse; /* Cambiar a columna para pantallas más pequeñas */
    justify-content: center;       /* Centra verticalmente */
    align-items: center;          /* Centra horizontalmente */
    padding: 2rem 4%;              /* Añadir padding para separación interna */
  }

  .form-suscription {
    width: 80%;                    /* Controla el tamaño del formulario */
    padding: 2.5rem;               /* Ajusta el padding */
    margin-right: 0;               /* Elimina margen derecho */
    text-align: center;            /* Centra el texto dentro del formulario */
  }

  .imagen-familia {
    width: 80%;                    /* Reduce el tamaño de la imagen */
    margin-top: 2rem;              /* Espacio entre la imagen y el formulario */
    display: block;                /* Asegura que la imagen se vea como bloque */
    margin-left: auto;
    margin-right: auto;            /* Centra la imagen */
  }
}

/* Media Query para pantallas hasta 768px */
@media (max-width: 768px) {
  .container-suscription {
    display: flex;
    flex-direction: column-reverse; /* Cambia a columna para pantallas más pequeñas */
    justify-content: center;        /* Centra verticalmente */
    align-items: center;           /* Centra horizontalmente */
    padding: 2rem 4%;               /* Añadir padding para separar del borde */
  }

  .form-suscription {
    width: 90%;                     /* Reduce el ancho del formulario */
    padding-left: 2rem;
    padding-right: 2rem;
    margin-right: 0;
    margin-bottom: 2rem;            /* Espacio entre formulario e imagen */
    text-align: center;             /* Centra el texto dentro del formulario */
  }

  .form-suscription h2 {
    font-size: 2rem;                /* Ajusta el tamaño de fuente del título */
  }

  .form-suscription p {
    font-size: 1rem;                /* Ajusta el tamaño de fuente del párrafo */
  }

  .form-suscription input,
  .form-suscription button {
    width: 100%;                    /* Asegura que los campos ocupen todo el ancho disponible */
    padding: 1rem;                  /* Ajusta el padding */
    font-size: 1rem;                /* Ajusta el tamaño de la fuente */
  }

  .imagen-familia {
    display: block;
    align-self: center;
    width: 80%;                     /* Reduce el tamaño de la imagen */
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;             /* Centra la imagen */
  }
}

/* Media Query para pantallas de hasta 480px */
@media (max-width: 480px) {
  .container-suscription {
    display: flex;
    flex-direction: column-reverse; /* Cambia a columna para pantallas aún más pequeñas */
    justify-content: center;        /* Centra verticalmente */
    align-items: center;           /* Centra horizontalmente */
    padding: 1.5rem 3%;             /* Ajuste del padding */
    height: auto;
  }

  .form-suscription {
    width: 100%;                    /* El formulario ocupa el 100% del ancho */
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: 0;
    text-align: center;             /* Centra el texto dentro del formulario */
  }

  .form-suscription h2 {
    font-size: 1.75rem;             /* Ajusta el tamaño del título */
  }

  .form-suscription p {
    font-size: 1rem;                /* Ajusta el tamaño del párrafo */
  }

  .form-suscription input,
  .form-suscription button {
    width: 100%;                    /* Asegura que los campos ocupen todo el ancho disponible */
    padding: 1rem;                  /* Ajusta el padding */
    font-size: 1rem;                /* Ajusta el tamaño de la fuente */
  }

  .imagen-familia {
    display: block;
    align-self: center;
    width: 100%;                    /* Ajusta el tamaño de la imagen */
    margin-top: 1.5rem;
    border-width: 0.5rem;           /* Ajuste con rem para el borde */
    margin-left: auto;
    margin-right: auto;             /* Centra la imagen */
  }
}


/*-------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------- formulario de contacto ----------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------*/

/* Contenedor principal */
.contact-container {
  display: flex;
  max-width: 80%;               /* Controla el ancho máximo */
  flex-direction: row;          /* Los elementos se alinean en fila */
  justify-content: center;      /* Centra el contenido horizontalmente */
  align-items: center;          /* Centra el contenido verticalmente */
  border-radius: 30px;
  background-color: #ED8E6A;    /* Color de fondo */
  padding: 20px;
  position: relative;
  margin: 0 auto;               /* Centra el contenedor en la página */
  font-family: 'Ubuntu', sans-serif;
}

/* Sección del formulario */
.form-section {
  background-color: #2A2E35;
  padding: 40px;
  height: auto;
  border-radius: 30px;
  color: #fff;
  width: 600px;
}

/* Título del formulario */
.contact-container h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #ffffff;
  text-align: center;
  font-weight: 600;
  font-style: normal;
}



.contact-container a {
  font-size: 12px;
  font-weight: 200;
  margin-bottom: 20px;
  color: #3498db;
  text-align: center;
}

/* Campos del formulario */
form input {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 10px;
  font-size: 1rem;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #FADE9F;
  color: #fff;
  outline: none;
  font-family: 'Ubuntu', sans-serif;
}

form input:focus {
  border-bottom: 2px solid #3498db;
  transition: border-bottom 0.3s ease;
}

/* Botón de envío */
form button {
  display: block;
  width: 80%;
  margin: 20px auto;
  padding: 10px;
  font-size: 1rem;
  border: none;
  border-radius: 30px;
  background-color: #3498db;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: 'Ubuntu', sans-serif;
}

form button:hover {
  background-color: #267db6;
}

/* Información adicional del contacto */
.contact-info {
  margin-top: 20px;
  font-size: 0.9rem;
  text-align: center;
  color: #FADE9F;
}

/* Checkbox del formulario */
.checkbox {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Alinea el contenido hacia la izquierda */
  width: 80%; /* Hace que siga el ancho del resto de los campos */
  margin: 10px auto; /* Mantiene consistencia con otros elementos */
  gap: 10px; /* Espaciado entre el checkbox y la etiqueta */
}

.checkbox input {
  width: 16px; /* Ajusta el tamaño del checkbox */
  height: 16px;
  margin: 0; /* Remueve márgenes innecesarios */
}

.checkbox label {
  font-size: 12px;
  color: #FADE9F;
  margin: 0; /* Remueve márgenes adicionales */
}

/* Sección del mapa */
.map-section {
  flex: 1;
  background-color: #ADC4E6;
  border-radius: 30px;
  height: 500px;
  overflow: hidden;
}

.map-section iframe {
  width: 100%;
  height: 100%;
  border: none;
}


.map-section iframe {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}
/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------Responsive Formulario Contacto-----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------*/


/* Para pantallas pequeñas (480px y menores) */
@media (max-width: 480px) {
  .contact-container {
    flex-direction: column; /* Cambiar a columna para dispositivos más pequeños */
    max-width: 100%; /* El contenedor ocupa todo el ancho disponible */
    padding: 10px; /* Menos padding en pantallas pequeñas */
  }

  .form-section {
    width: 100%; /* El formulario ocupa todo el ancho disponible */
    padding: 20px; /* Menos padding en pantallas pequeñas */
  }

  .contact-container h1 {
    font-size: 1.5rem; /* Título más pequeño */
  }

  form input {
    width: 90%; /* Más ancho para los campos del formulario */
  }

  form button {
    width: 90%; /* Botón más ancho */
  }

  .map-section {
    height: 300px; /* Mapa más pequeño en pantallas pequeñas */
  }
}

/* Para pantallas medianas (768px y menores, tabletas en orientación vertical y móviles grandes) */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column; /* Cambiar a columna */
    max-width: 100%; /* El contenedor ocupa todo el ancho disponible */
    padding: 15px;
  }

  .form-section {
    width: 100%; /* El formulario ocupa todo el ancho disponible */
    padding: 30px;
  }

  .contact-container h1 {
    font-size: 1.75rem; /* Tamaño del título ajustado */
  }

  form input {
    width: 85%; /* Campos de formulario más pequeños */
  }

  form button {
    width: 85%; /* Botón más pequeño */
  }

  .map-section {
    height: 400px; /* Ajuste de la altura del mapa */
  }
}

/* Para pantallas grandes (1280px y mayores, pantallas de escritorio) */
@media (min-width: 820px) {
  .contact-container {
    flex-direction: row; /* Mantener el diseño en fila */
    max-width: 1200px; /* Limitar el ancho máximo del contenedor */
    padding: 20px; /* Más padding en pantallas grandes */
  }

  .form-section {
    width: 50%; /* El formulario ocupa el 50% del contenedor */
    padding: 10px;
  }

  .contact-container h1 {
    font-size: 2.5rem; /* Título más grande */
  }

  form input {
    width: 70%; /* Campos de formulario más pequeños para pantallas grandes */
  }

  form button {
    width: 70%; /* Botón ajustado */
  }

  .map-section {
    width: 100px;
    height: 400px; /* Mapa a tamaño completo */
  }
}

/*---------------------------Responsive contacto-----------------------*/

/* Estilos para pantallas de hasta 768px */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column; /* Alinea los elementos en columna */
    padding: 10px;
    max-width: 90%; /* Reduce el ancho máximo */
  }

  .form-section {
    width: 100%; /* Hacer que ambas secciones ocupen todo el ancho */
    margin-bottom: 20px; /* Añadir un margen inferior para separar las secciones */
  }

  .form-section {
    padding: 20px;
  }

  .map-section iframe {
    max-width: 200%;

  }
}

/* Estilos para pantallas de hasta 480px */
@media (max-width: 480px) {
  .contact-container h1 {
    font-size: 1.5rem; /* Ajusta el tamaño de la fuente del título */
  }

  .contact-container p {
    font-size: 0.9rem; /* Ajusta el tamaño de la fuente del párrafo */
  }

  form input, form button {
    width: 100%; /* Asegura que los campos y el botón ocupen todo el ancho disponible */
  }

  .checkbox {
    width: 100%;
  }

  .map-section iframe {
    max-width: 100%;
  }
}

@media (max-width: 1280px) {
  .footer-section {
    padding: 1.5rem; /* Usa rem para el padding */
    display: flex;
    flex-direction: column; /* Asegura que todo el contenido se disponga en columna */
    align-items: center; /* Centra los elementos */
    justify-content: center; /* Asegura que los elementos se centren verticalmente */
  }

  .footer-section-direction {
    display: flex; /* Usa flexbox */
    flex-direction: column; /* Organiza los elementos en columna */
    align-items: center; /* Centra los elementos */
    gap: 2rem; /* Espacio entre los elementos */
    text-align: center; /* Alinea el texto al centro */
    width: 90%; /* Ocupa todo el ancho disponible */
  }

  .direcciones-ventas, .direcciones-oficina, .direcciones-telefono {
    width: 100%; /* Asegura que los contenedores ocupen todo el ancho */
    text-align: center; /* Alinea el texto al centro */
  }

  .logo-footer {
    width: 16vw; /* 18% del ancho de la ventana para el logo */
    max-width: 150px; /* Asegura que el logo no sea demasiado grande */
    margin: 0 auto; /* Centra el logo */
  }

  .direcciones-title {
    font-size: 1.375rem; /* Ajusta el tamaño de los títulos */
    font-weight: 400;
    text-align: center; /* Alinea el título al centro */
  }

  .telefono {
    font-size: 1rem; /* Ajusta el tamaño del teléfono */
    text-align: center; /* Alinea el teléfono al centro */
  }
}

/*------ Footer Section -------------------------------------------------------------------------------------*/


.footer-section {
  display: flex;
  flex-direction: column;       /* Alinea el contenido de forma vertical */
  border-top: 1px solid #ADC4E6;
  margin-top: 100px;
  margin: 0 auto;               /* Centra la sección en la pantalla */
  justify-content: center;      /* Centra el contenido verticalmente */
  align-items: center;          /* Centra el contenido horizontalmente */
  text-align: center;           /* Alinea el texto de los elementos dentro del footer */
  width: 100%;                  /* Ajusta el ancho según el tamaño de la ventana */
}

.logo-footer {
  width: 200px;  /* Asegúrate de que este tamaño sea lo que necesitas */
  height: auto;
}

.footer-section p {
  margin-top: 20px;             /* Reduce el margen superior */
  color: #ADC4E6;
  margin-bottom: 20px;          /* Reduce el margen inferior */
}

.footer-section-direction {
  display: flex;
  flex-direction: row;
  margin: 50px;
  gap: 100px;
  justify-items: center;
}

.direcciones-ventas
.direcciones-oficina
.direcciones-telefono {
  flex-direction: column;          /* Alinea el texto de manera vertical */
  justify-content: center;         /* Centra el contenido verticalmente */
  text-align: center;
}

.direcciones-title{
  color: #ADC4E6;
  font-size: 20px;
  font-weight: 400;
  }


.telefono {
  margin-top: 5px;
  color: #ED8E6A;
  font-size: 40px;
  font-weight: 600;
}

/*---------------------------Responsive Footer-------------------------*/

/* Estilos para pantallas de hasta 768px */
@media (max-width: 768px) {
  .footer-section {
    padding: 1.25rem; /* 20px → 1.25rem (asumiendo 16px por defecto) */
  }

  .footer-section-direction {
    flex-direction: column; /* Cambia la dirección a columna */
    align-items: center; /* Asegura que los elementos se centren */
    gap: 1.25rem; /* 20px → 1.25rem */
    text-align: center; /* Alinea los textos al centro */
  }

  .direcciones-ventas, .direcciones-oficina, .direcciones-telefono {
    width: 100%; /* Ocupa todo el ancho disponible */
    text-align: center; /* Asegura que los textos estén centrados */
  }

  .logo-footer {
    width: 9.375rem; /* 150px → 9.375rem */
    margin: 0 auto; /* Centra el logo */
  }

  .direcciones-title {
    font-size: 1.125rem; /* 18px → 1.125rem */
    font-weight: 400;
    text-align: center; /* Asegura que el título esté centrado */
  }

  .telefono {
    font-size: 2rem; /* 32px → 2rem */
    text-align: center; /* Alinea el teléfono al centro */
  }
}

/* Estilos para pantallas de hasta 480px */
@media (max-width: 480px) {
  .footer-section {
    padding: 0.625rem; /* 10px → 0.625rem */
  }

  .footer-section p {
    font-size: 0.9rem; /* Reduce el tamaño del texto */
    text-align: center; /* Alinea el texto al centro */
  }

  .footer-section-direction {
    gap: 0.625rem; /* 10px → 0.625rem */
    text-align: center; /* Asegura que todo el contenido dentro de esta sección esté centrado */
  }

  .telefono {
    font-size: 1.75rem; /* 28px → 1.75rem */
  }
}




/*---------------------------------- Estilos para el popup----------------------------------------- */
.popup-container {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Asegurarse de que el popup esté por encima de todo */
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.popup-content h2 {
  margin-bottom: 10px;
}

.popup-content .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  cursor: pointer;
}

/* Hacer que el logo se ajuste */
.popup-content img {
  width: 150px;
  margin-bottom: 20px;
}

.publicidad-header-img {
  width: 80%;
  height: auto;
  border-radius: 30px;
  border: 0.5rem solid #FADE9F;
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  z-index: 0;
  margin: 0 auto; /* Asegura que el contenedor esté centrado en su contenedor principal */
}

.publicidad-header {
  display: flex;
  flex-direction: column; /* Alinea los elementos en columna */
  justify-content: center; /* Centra verticalmente */
  align-items: center; /* Centra horizontalmente */
  padding: 20px; /* Añade un poco de espacio alrededor del contenido */
  background-color: #ED8E6A; /* Color de fondo */
  margin: 0 auto; /* Centra el contenedor en la página */
}

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
}

.whatsapp-float img {
  width: 60%;
  margin-top: 10px;
}