/* General */
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  font-size: 1rem;
}

.language-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* Espacio entre los botones */
  justify-items: center; /* Centra los botones horizontalmente */
  align-items: center; /* Centra los botones verticalmente */
}


/* Topbar */
.topbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #007BFF;
  color: white;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  z-index: 10;
}

.topbar h1 {
  margin: 0 auto;
  font-size: 1.5rem;
}

#menu-btn {
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
}

/* Sidenav */ 
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

  .sidenav a:hover {
    color: #f1f1f1;
  }
  .sidenav {
    height: calc(100% - 20px); /* Ajusta la altura para que no quede cortado */
  }
  .submenu {
    display: none;
    padding-left: 20px;
  }

  /* Estilos para los iconos */
  .icon {
    margin-right: 10px;
    font-style: normal;
  }

/* Main content */
#main {
  margin-top: 4rem; /* Espacio para la topbar */
  padding: 1rem;
}

/* Secciones */
section {
  padding: 2rem 1rem;
  border-bottom: 1px solid #ddd;
}

section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Responsividad */
@media (max-width: 768px) {
  .topbar h1 {
    font-size: 1.2rem;
  }

  #menu-btn {
    font-size: 1.25rem;
  }

  .sidenav a {
    font-size: 1rem;
  }
}
/* Estilos para las subsecciones */
.submenu {
  display: none; /* Oculta las subsecciones por defecto */
  margin-left: 2rem; /* Añade espacio a la izquierda */
}

/* Estilo para subsecciones abiertas */
.submenu.open {
  display: block; /* Muestra las subsecciones cuando están abiertas */
}

/* Estilo para subsubsecciones */
.subsubsection {
  margin-left: 1rem; /* Reduce el margen para no estar tan tabulado */
}

/* Estilo para las subsecciones que tienen una jerarquía */
.subsection {
  font-weight: bold;
  cursor: pointer;
}

img {
  width: 100%;  /* La imagen ocupará el 100% del ancho del contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 8px;  /* Bordes redondeados para la imagen */
  margin-top: 20px;
}

p {
  background-color: #e0e0e0;  /* Gris claro de fondo */
  padding: 10px;
  border-radius: 8px;  /* Bordes redondeados */
  margin-top: 10px;
  font-size: 1.1em;
  line-height: 1.5;
}

/* Estilo para la imagen redonda con borde azul */
.profile-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.profile-image {
  width: 120px;  /* Tamaño de la imagen */
  height: 120px;  /* Mantiene la forma cuadrada */
  border-radius: 50%;  /* Imagen redonda */
  border: 4px solid #007bff;  /* Borde azul */
  object-fit: cover;  /* Ajusta la imagen dentro del contenedor */
}

/* Estilos Generales de los Botones */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Ocupa todo el ancho disponible */
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold; /* Hace las letras más gruesas */
  text-align: center;
  margin: 10px 0;
  box-sizing: border-box;
  text-transform: uppercase; /* Letras en mayúsculas */
  text-decoration: none; /* Elimina el subrayado */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  transition: all 0.3s ease; /* Transición suave para el hover */
  position: relative;
  overflow: hidden;
}

/* Estilo para el icono dentro del botón */
button .icon {
  margin-right: 10px;
  font-size: 1.3em; /* Asegura que el icono tenga un buen tamaño */
}

/* Botón de color azul (principal) */
button.blue {
  background-color: #007bff;
  color: white;
  text-decoration: none;
}

button.blue:hover {
  background-color: #0056b3;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra más fuerte al pasar el ratón */
  transform: translateY(-4px); /* Efecto de levantar el botón al pasar el ratón */
}

button.blue:active {
  background-color: #003d82;
  transform: translateY(2px); /* Efecto de que el botón se "empuja" al hacer clic */
}

/* Botón de color verde (éxito o positivo) */
button.green {
  background-color: #28a745;
  color: white;
  text-decoration: none;
}

button.green:hover {
  background-color: #218838;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

button.green:active {
  background-color: #1e7e34;
  transform: translateY(2px);
}

/* Botón de color rojo (advertencia o peligro) */
button.red {
  background-color: #dc3545;
  color: white;
  text-decoration: none;
}

button.red:hover {
  background-color: #c82333;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

button.red:active {
  background-color: #bd2130;
  transform: translateY(2px);
}

/* Botón de color amarillo (alerta o atención) */
button.yellow {
  background-color: #ffc107;
  color: white;
  text-decoration: none;
}

button.yellow:hover {
  background-color: #e0a800;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

button.yellow:active {
  background-color: #d39e00;
  transform: translateY(2px);
}

/* Botón gris (neutro o secundario) */
button.gray {
  background-color: #6c757d;
  color: white;
  text-decoration: none;
}

button.gray:hover {
  background-color: #5a6268;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

button.gray:active {
  background-color: #4e555b;
  transform: translateY(2px);
}

/* Botón transparente (para acciones secundarias) */
button.transparent {
  background-color: transparent;
  color: #007bff;
  border: 2px solid #007bff;
  text-decoration: none;
}

button.transparent:hover {
  background-color: #007bff;
  color: white;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

button.transparent:active {
  background-color: #0069d9;
  color: white;
  transform: translateY(2px);
}

button, a {
  text-decoration: none; /* Elimina cualquier subrayado o línea */
}

hr {
  border: none;
  border-top: 3px solid #3498db; /* Azul suave */
  margin: 30px 0; /* Espaciado arriba y abajo */
}
/* Estilo para las secciones principales */
section {
  background-color: #f9f9f9; /* Gris muy claro */
  border: 1px solid #e0e0e0; /* Borde gris suave */
  border-radius: 8px; /* Esquinas redondeadas */
  padding: 20px; /* Espaciado interno */
  margin-bottom: 20px; /* Separación entre secciones */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}


/* Estilo para el header siempre visible */
header.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Asegura que quede encima del contenido */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
  padding: 10px 20px; /* Espaciado interno */
}

/* Ajuste global del scroll para evitar que el header tape las secciones */
html {
  scroll-padding-top: 60px; /* Ajusta este valor según la altura del header */
}

/* Asegura que el contenido no se superponga al header */
body {
  margin-top: 60px; /* Coincide con la altura del header */
}

/* Pisos */

/* Apartment Guides Visual Section */
#apartment-guides-visual {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 10px 0;
}

.apartment-guide-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  margin: 10px;
  width: 45%;
  max-width: 150px;
  text-align: center;
}

.apartment-guide-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #007bff;
  transition: transform 0.3s ease;
}

.apartment-guide-card:hover .apartment-guide-image {
  transform: scale(1.05);
}

.apartment-guide-title {
  margin-top: 10px;
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  background-color: transparent; /* Anula el fondo gris del p */
  padding: 0; /* Anula el padding del p */
  border-radius: 0; /* Anula el border-radius del p */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .apartment-guide-card {
    width: 80%;
    max-width: 180px;
  }
}

/* Carrousel */ 

/* Apartment Guides Visual Section */
#apartment-guides-visual {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 10px 0;
}

.apartment-guide-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  margin: 10px;
  width: 45%;
  max-width: 150px;
  text-align: center;
}

.apartment-guide-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #007bff;
  transition: transform 0.3s ease;
}

.apartment-guide-card:hover .apartment-guide-image {
  transform: scale(1.05);
}

.apartment-guide-title {
  margin-top: 10px;
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  background-color: transparent; /* Anula el fondo gris del p */
  padding: 0; /* Anula el padding del p */
  border-radius: 0; /* Anula el border-radius del p */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .apartment-guide-card {
    width: 80%;
    max-width: 180px;
  }
}

/* Carrousel */ 

/* --- Estilos para la Galería Horizontal de Fotos (Carrusel) --- */
.carousel-container {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden; /* Oculta el scrollbar pero permite el contenido más ancho */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0; /* Fondo sutil para el contenedor del carrusel */
}

.slides-wrapper {
  display: flex;
  overflow-x: scroll; /* Habilita el scroll horizontal */
  scroll-snap-type: x mandatory; /* Fuerza el "snap" a cada slide */
  -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
  scroll-behavior: smooth; /* Transición suave al hacer scroll */
  scrollbar-width: none; /* Oculta el scrollbar para Firefox */
  -ms-overflow-style: none;  /* Oculta el scrollbar para IE y Edge */
}

/* Oculta el scrollbar para Chrome, Safari, Opera */
.slides-wrapper::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 100%; /* Cada slide ocupa el 100% del ancho del contenedor visible */
  scroll-snap-align: start; /* Alinea el punto de "snap" al inicio del slide */
  text-align: center;
}

.slide img {
  width: 100%; /* La imagen ocupa todo el ancho del slide */
  aspect-ratio: 4 / 3; /* Proporción 4:3 para mantener la relación de aspecto */
  height: auto; /* La altura se ajusta automáticamente */
  object-fit: cover; /* Asegura que la imagen cubra el área sin distorsión */
  border-radius: 0; /* Anula cualquier borde redondeado previo en img */
}

/* Botones de navegación (Anterior/Siguiente) */
.prev-button,
.next-button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px; /* Centra verticalmente */
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  border: none;
  z-index: 2; /* Asegura que los botones estén por encima de las fotos */
  border-radius: 3px; /* Pequeños bordes redondeados */
}
.next-button {
  right: 0;
  border-radius: 3px 0 0 3px; /* Solo redondeado a la izquierda */
}

.prev-button {
  left: 0;
  border-radius: 0 3px 3px 0; /* Solo redondeado a la derecha */
}

.prev-button:hover,
.next-button:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Oscurece al pasar el ratón */
}

/* Contenedor de los puntos de navegación */
.dots-container {
  text-align: center;
  padding: 10px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7); /* Fondo semi-transparente para los puntos */
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Estilo de cada punto */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background-color: #bbb; /* Color gris claro por defecto */
  border-radius: 50%; /* Hace el punto circular */
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Estilo del punto activo y al pasar el ratón */
.dot.active,
.dot:hover {
  background-color: #717171; /* Color más oscuro para el punto activo/hover */
}

/* FAQ */

/* Preguntas Frecuentes (FAQ) */
.faq-container {
  margin-top: 25px; /* Mayor margen superior para separar de la sección anterior */
}

.faq-item {
  background-color: #f8f8f8; /* Fondo ligeramente gris claro para cada pregunta */
  border: 1px solid #e0e0e0; /* Borde suave */
  border-radius: 12px; /* Bordes más redondeados para un diseño moderno */
  margin-bottom: 20px; /* Mayor separación entre elementos FAQ */
  overflow: hidden; /* Asegura que el contenido desplegable no se desborde */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil para efecto de elevación */
  transition: all 0.3s ease; /* Transición suave para efectos de hover */
}

.faq-item:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada al pasar el ratón */
  transform: translateY(-2px); /* Pequeño levantamiento visual al pasar el ratón */
}

.faq-question {
  display: flex; /* Usa flexbox para alinear el emoticono, texto y flecha */
  align-items: center; /* Centra verticalmente los elementos */
  padding: 18px 20px; /* Mayor padding para un área de pulsación más cómoda en móvil */
  cursor: pointer; /* Cambia el cursor para indicar que es clicable */
  font-weight: bold;
  font-size: 1.15em; /* Fuente ligeramente más grande */
  background-color: #f2f2f2; /* Color de fondo para la pregunta */
  border-bottom: 1px solid #e9e9e9; /* Separador sutil */
  position: relative;
  transition: background-color 0.3s ease;
  color: #333; /* Color de texto principal para la pregunta */
}

.faq-question:hover {
  background-color: #e5e5e5; /* Fondo más claro al pasar el ratón */
}

/* Emoticonos y flecha para indicar desplegable */
.faq-question::before {
  content: '❔'; /* Emoticono de pregunta cerrada */
  margin-right: 12px; /* Espacio entre el emoticono y el texto */
  font-size: 1.2em; /* Tamaño del emoticono */
  transition: transform 0.3s ease; /* Transición para el emoticono */
}

.faq-question::after {
  content: '▼'; /* Flecha hacia abajo */
  font-size: 0.8em; /* Tamaño de la flecha */
  margin-left: auto; /* Empuja la flecha hacia la derecha */
  transition: transform 0.3s ease, content 0.3s ease;
}

/* Estilos cuando la pregunta está abierta */
.faq-item[open] .faq-question {
  background-color: #e0e0e0; /* Fondo más oscuro cuando está abierto */
  color: #0056b3; /* Color de texto azul para indicar estado activo */
}

.faq-item[open] .faq-question::before {
  content: '💡'; /* Emoticono de bombilla cuando está abierto */
}

.faq-item[open] .faq-question::after {
  content: '▲'; /* Flecha hacia arriba cuando está abierto */
  transform: translateY(-50%) rotate(0deg); /* Asegura que la flecha apunte hacia arriba */
}

.faq-answer {
  /* Se ha ajustado el padding para que el texto tenga más margen lateral */
  padding: 15px 25px; /* Aumentado el padding horizontal a 25px */
  background-color: #ffffff; /* Fondo blanco para la respuesta */
  border-top: 1px solid #f0f0f0; /* Separador entre pregunta y respuesta */
  font-size: 1em; /* Tamaño de fuente para la respuesta */
  line-height: 1.6;
  color: #555; /* Color de texto para la respuesta */
}