/* Importación de fuentes */
/* Se importan varias fuentes de Google Fonts para su uso en el diseño */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&family=Poiret+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Cardo:ital,wght@0,400;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&family=Poiret+One&display=swap");

/* Variables reutilizables */
/* Se definen variables CSS para colores, fuentes y otros estilos que se usarán en todo el documento */
:root {
  --color-principal: #dabd7b; /* Color principal */
  --color-secundario: #2c2c2c; /* Color secundario */
  --color-fondo: #f8f5f0; /* Color de fondo */
  --primary-dark: #1a1a1a; /* Color oscuro primario */
  --secondary-dark: #333333; /* Color oscuro secundario */
  --accent-gold: #c8a97e; /* Color dorado de acento */
  --text-dark: #242424; /* Color de texto oscuro */
  --text-light: #ffffff; /* Color de texto claro */
  --bg-light: #f8f8f8; /* Color de fondo claro */
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición para efectos */
  --color-text: #292828; /* Color de texto */
  --color-bg: #ddd; /* Color de fondo */
  --color-link: #000; /* Color de enlace */
  --color-link-hover: #000; /* Color de enlace al pasar el ratón */
  --page-padding: 1rem; /* Relleno de la página */
  --angle: -15deg; /* Ángulo para transformaciones */
  --trans-content: -30vh; /* Transformación de contenido */
  --font-titles: "Poiret One", serif; /* Fuente para títulos */
  --font-subtitles: "Sweet Sans Pro"; /* Fuente para subtítulos */
  --font-paragraphs: "Cardo", serif; /* Fuente para párrafos */
}

/* Estilos generales */
* {
  font-family: var(--font-paragraphs); /* Se aplica la fuente de párrafos a todos los elementos */
}

/* Estilos específicos para elementos */
p {
  font-family: var(--font-paragraphs); /* Fuente para párrafos */
}

h2 {
  font-family: var(--font-titles); /* Fuente para títulos h2 */
}

span {
  font-family: var(--font-subtitles); /* Fuente para elementos span */
}

/* Estilos para el título de la sección "About" */
.hero-title-about {
  font-family: var(--font-titles);
}

/* Estilos para subtítulos y títulos de tarjetas */
.subtitle,
.card-title {
  font-family: var(--font-subtitles);
}

/* Estilos base para el cuerpo */
body {
  font-family: var(--font-family); /* Fuente general del cuerpo */
  line-height: 1.6; /* Altura de línea */
  color: #333; /* Color de texto */
  background-color: var(--color-fondo); /* Color de fondo */
  margin: 0; /* Margen cero */
  padding: 0; /* Relleno cero */
}

/* Estilos del banner */
.banner-about {
  position: relative; /* Posición relativa para el banner */
  width: 100%; /* Ancho completo */
  height: 50vh !important; /* Altura del banner */
  padding: 0 5%; /* Relleno lateral */
  overflow: hidden; /* Ocultar desbordamiento */
  backface-visibility: hidden; /* Ocultar la parte trasera */
  display: flex; /* Usar flexbox */
  flex-direction: column; /* Dirección de los elementos en columna */
  justify-content: center; /* Centrar verticalmente */
  align-items: center; /* Centrar horizontalmente */
  text-align: center; /* Alinear texto al centro */
  z-index: 1; /* Z-index para superposición */
}

/* Estilos para el fondo del banner */
.banner-about .background-about {
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  position: absolute; /* Posición absoluta */
  left: 0; /* Alinear a la izquierda */
  top: 0; /* Alinear arriba */
  z-index: -1; /* Z-index negativo para estar detrás */
  transform: translate3d(0, 0, 0) scale(1.25); /* Transformación 3D */
  background: black url("PImage/imagen-contactanos.jpg") no-repeat center 55%; /* Fondo de imagen */
  background-size: cover; /* Cubrir el área */
}

/* Estilos para la carga del banner */
.loaded .banner-about .background-about {
  transform: scale(1); /* Escalar a tamaño original */
  transition: 6.5s transform; /* Transición para el efecto de carga */
}

/* Estilos para la superposición del banner */
.banner-about .overlay-about {
  position: absolute; /* Posición absoluta */
  top: 0; /* Alinear arriba */
  left: 0; /* Alinear a la izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  background: rgba(0, 0, 0, 0.5); /* Fondo negro con opacidad */
  z-index: 1; /* Z-index para estar encima */
}

/* Estilos para el título del banner */
.banner-about h1 {
  color: #eee; /* Color del texto */
  margin: 0; /* Margen cero */
  line-height: 1.2; /* Altura de línea */
  text-transform: capitalize; /* Capitalizar texto */
  text-shadow: 0 0 0.3rem black; /* Sombra de texto */
  font-size: 2.5rem; /* Tamaño de fuente */
  text-align: center; /* Alinear texto al centro */
  position: relative; /* Posición relativa */
  z-index: 2; /* Z-index para estar encima */
  margin-top: 4rem; /* Margen superior */
}

/* Estilos para la miga de pan */
.breadcrumb-about {
  white-space: nowrap; /* No permitir salto de línea */
  text-overflow: ellipsis; /* Mostrar puntos suspensivos si hay desbordamiento */
  background-color: transparent; /* Fondo transparente */
  color: white; /* Color del texto */
  padding: 10px 0; /* Relleno vertical */
  font-size: 16px; /* Tamaño de fuente */
  font-weight: bold; /* Negrita */
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
}

/* Estilos para enlaces en la miga de pan */
.breadcrumb-about a {
  color: var(--color-principal); /* Color del enlace */
  text-decoration: none; /* Sin subrayado */
  margin-right: 5px; /* Margen a la derecha */
  font-weight: bold; /* Negrita */
}

/* Estilos para elementos span en la miga de pan */
.breadcrumb-about span {
  font-weight: bold; /* Negrita */
}

/* Estilos para la sección "About" */
.about-section {
  padding: 80px 0; /* Relleno vertical */
  background: var(--color-fondo); /* Color de fondo */
}

/* Contenedor de la sección "About" */
.container-about {
  max-width: 1200px; /* Ancho máximo */
  margin: 0 auto; /* Centrar horizontalmente */
  padding: 0 20px; /* Relleno lateral */
}

/* Estilos para el contenido de la sección "About" */
.about-content {
  display: flex; /* Usar flexbox */
  justify-content: space-between; /* Espacio entre elementos */
  align-items: center; /* Alinear verticalmente */
  gap: 60px; /* Espacio entre elementos */
}

/* Estilos para el texto de la sección "About" */
.about-text {
  flex: 1; /* Permitir que el texto ocupe espacio */
}

/* Estilos para subtítulos */
.subtitle {
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
  font-size: 18px; /* Tamaño de fuente */
  color: var(--color-principal); /* Color del subtítulo */
  display: block; /* Mostrar como bloque */
  margin-bottom: 20px; /* Margen inferior */
  position: relative; /* Posición relativa */
  width: auto; /* Ancho automático */
}

/* Estilos para la línea debajo del subtítulo */
.subtitle::after {
  content: ""; /* Contenido vacío */
  display: block; /* Mostrar como bloque */
  width: 200px; /* Ancho de la línea */
  height: 2px; /* Altura de la línea */
  background-color: #c4a484; /* Color de la línea */
  margin-top: 10px; /* Margen superior */
}

/* Estilos para títulos h2 dentro de la sección "About" */
.about-text h2 {
  font-family: var(--font-titles); /* Fuente para títulos */
  font-size: 48px; /* Tamaño de fuente */
  color: var(--color-secundario); /* Color del título */
  margin-bottom: 30px; /* Margen inferior */
}

/* Estilos para párrafos dentro de la sección "About" */
.about-text p {
  margin-bottom: 20px; /* Margen inferior */
  font-size: 16px; /* Tamaño de fuente */
  color: #555; /* Color del texto */
}

/* Estilos de la lista de características */
.features-list {
  list-style-type: none; /* Sin viñetas */
  padding: 0; /* Sin relleno */
  margin-bottom: 30px; /* Margen inferior */
  display: flex; /* Usar flexbox */
  justify-content: space-around; /* Espacio entre elementos */
}

/* Estilos para las divisiones de la lista de características */
.div-features-list-one,
.div-features-list-two {
  display: flex; /* Usar flexbox */
  flex-direction: column; /* Dirección de los elementos en columna */
}

/* Estilos para los elementos de la lista de características */
.features-list li {
  padding-left: 30px; /* Relleno a la izquierda */
  position: relative; /* Posición relativa */
  margin-bottom: 10px; /* Margen inferior */
  font-family: var(--font-paragraphs); /* Fuente para párrafos */
}

/* Estilos para el símbolo de verificación en la lista */
.features-list li::before {
  content: "✓"; /* Símbolo de verificación */
  position: absolute; /* Posición absoluta */
  left: 0; /* Alinear a la izquierda */
  color: var(--color-principal); /* Color del símbolo */
  font-weight: bold; /* Negrita */
}

/* Estilos de los botones de llamada a la acción */
.cta-buttons {
  display: flex; /* Usar flexbox */
  gap: 20px; /* Espacio entre botones */
  justify-content: center; /* Centrar horizontalmente */
}

/* Estilos para los botones */
.btn {
  padding: 12px 30px; /* Relleno */
  font-size: 16px; /* Tamaño de fuente */
  text-decoration: none; /* Sin subrayado */
  font-weight: bold; /* Negrita */
  transition: all 0.3s ease; /* Transición para efectos */
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
}

/* Estilos para el botón primario */
.btn-primary {
  background-color: var(--color-principal); /* Color de fondo */
  color: white; /* Color del texto */
}

/* Estilos para el botón secundario */
.btn-secondary {
  background-color: transparent; /* Fondo transparente */
  color: var(--color-principal); /* Color del texto */
  border: 2px solid #c4a484; /* Borde */
}

/* Efecto hover para los botones */
.btn:hover {
  transform: translateY(-3px); /* Mover hacia arriba */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Estilos para la imagen de la sección "About" */
.about-image {
  flex: 1; /* Permitir que la imagen ocupe espacio */
  position: relative; /* Posición relativa */
}

/* Estilos para la imagen dentro de la sección "About" */
.about-image img {
  width: 100%; /* Ancho completo */
  height: auto; /* Altura automática */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Estilos para la superposición de la imagen */
.image-overlay {
  position: absolute; /* Posición absoluta */
  bottom: -30px; /* Alinear abajo */
  left: -30px; /* Alinear a la izquierda */
  background-color: white; /* Color de fondo */
  padding: 20px; /* Relleno */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra */
  display: flex; /* Usar flexbox */
  flex-direction: column; /* Dirección de los elementos en columna */
  justify-content: center; /* Centrar verticalmente */
}

/* Estilos para los números de estadísticas */
.stat-number {
  font-family: var(--font-titles); /* Fuente para títulos */
  font-size: 36px; /* Tamaño de fuente */
  color: var(--color-principal); /* Color del número */
  display: block; /* Mostrar como bloque */
  width: auto; /* Ancho automático */
  height: auto; /* Altura automática */
  font-weight: bold; /* Negrita */
}

/* Media queries para ajustar el tamaño de fuente en pantallas más grandes */
@media (min-width: 620px) {
  .stat-number {
    font-size: 30px; /* Tamaño de fuente ajustado */
  }

  .stat-text {
    font-size: 20px; /* Tamaño de fuente ajustado */
  }
}

/* Estilos para el texto de estadísticas */
.stat-text {
  font-size: 20px; /* Tamaño de fuente */
  color: #555; /* Color del texto */
  font-family: var(--font-paragraphs); /* Fuente para párrafos */
  display: contents; /* Mostrar contenido */
}

/* Estilos del scrollbar */
::-webkit-scrollbar {
  width: 10px; /* Ancho del scrollbar */
  height: 10px; /* Altura del scrollbar */
}

/* Estilos para la pista del scrollbar */
::-webkit-scrollbar-track {
  background: rgba(218, 189, 123, 0.1); /* Color de fondo */
  border-radius: 10px; /* Bordes redondeados */
}

/* Estilos para el pulgar del scrollbar */
::-webkit-scrollbar-thumb {
  background: var(--accent-gold); /* Color del pulgar */
  border-radius: 10px; /* Bordes redondeados */
  border: 2px solid var(--bg-light); /* Borde */
  transition: var(--transition); /* Transición para efectos */
}

/* Efecto hover para el pulgar del scrollbar */
::-webkit-scrollbar-thumb:hover {
  background: #b69660; /* Color al pasar el ratón */
}

/* Para Firefox */
::-webkit-scrollbar {
  scrollbar-width: thin; /* Ancho del scrollbar */
  scrollbar-color: var(--accent-gold) rgba(218, 189, 123, 0.1); /* Color del pulgar y pista */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 999px) {
  .image-overlay {
    width: 60%; /* Ancho ajustado */
    height: 40%; /* Altura ajustada */
    position: absolute; /* Posición absoluta */
    bottom: -40px; /* Alinear abajo */
    left: 50%; /* Alinear al centro */
    transform: translateX(-50%); /* Centrar horizontalmente */
    text-align: center; /* Alinear texto al centro */
    padding: 15px; /* Relleno */
  }
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 820px) {
  .image-overlay {
    width: 60%; /* Ancho ajustado */
    height: 40%; /* Altura ajustada */
    position: absolute; /* Posición absoluta */
    bottom: -40px; /* Alinear abajo */
    left: 50%; /* Alinear al centro */
    transform: translateX(-50%); /* Centrar horizontalmente */
    text-align: center; /* Alinear texto al centro */
    padding: 15px; /* Relleno */
  }
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .image-overlay {
    width: 60%; /* Ancho ajustado */
    height: 40%; /* Altura ajustada */
    position: absolute; /* Posición absoluta */
    bottom: -40px; /* Alinear abajo */
    left: 50%; /* Alinear al centro */
    transform: translateX(-50%); /* Centrar horizontalmente */
    text-align: center; /* Alinear texto al centro */
    padding: 15px; /* Relleno */
  }
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 480px) {
  .image-overlay {
    width: auto; /* Ancho automático */
    height: auto; /* Altura automática */
    position: absolute; /* Posición absoluta */
    bottom: -75px; /* Alinear abajo */
    left: 50%; /* Alinear al centro */
    transform: translateX(-50%); /* Centrar horizontalmente */
    text-align: center; /* Alinear texto al centro */
    padding: 15px; /* Relleno */
  }
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 619px) {
  .image-overlay {
    width: 80%; /* Ancho ajustado */
    height: auto; /* Altura automática */
    position: absolute; /* Posición absoluta */
    bottom: -70px; /* Alinear abajo */
    left: 50%; /* Alinear al centro */
    transform: translateX(-50%); /* Centrar horizontalmente */
    text-align: center; /* Alinear texto al centro */
  }

  .stat-number {
    font-size: 20px; /* Tamaño de fuente ajustado */
  }

  .stat-text {
    font-size: 15px; /* Tamaño de fuente ajustado */
  }
}

/* Media queries para pantallas medianas */
@media (min-width: 480px) and (max-width: 620px) {
  .stat-number {
    font-size: 30px; /* Tamaño de fuente ajustado */
  }

  .stat-text {
    font-size: 20px; /* Tamaño de fuente ajustado */
  }
}

/* Estilos de las comodidades */
.amenities {
  margin-top: 80px; /* Margen superior */
  text-align: center; /* Alinear texto al centro */
  margin-bottom: 60px; /* Margen inferior */
}

/* Estilos para el título de comodidades */
.amenities h2 {
  font-family: var(--font-family); /* Fuente para títulos */
  font-size: 48px; /* Tamaño de fuente */
  color: var(--color-secundario); /* Color del título */
  text-align: center; /* Alinear texto al centro */
  margin-bottom: 40px; /* Margen inferior */
}

/* Estilos para la cuadrícula de "About" */
.about-grid {
  display: grid; /* Usar grid */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas */
  gap: 30px; /* Espacio entre elementos */
}

/* Estilos para las tarjetas de "About" */
.about-card {
  background-color: white; /* Color de fondo */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra */
  padding: 30px; /* Relleno */
  text-align: center; /* Alinear texto al centro */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición para efectos */
}

/* Efecto hover para las tarjetas */
.about-card:hover {
  transform: translateY(-10px); /* Mover hacia arriba */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Sombra */
}

/* Estilos para los íconos en las tarjetas */
.icon {
  margin-bottom: 20px; /* Margen inferior */
}

/* Estilos para los íconos de ion */
.icon ion-icon {
  width: 48px; /* Ancho del ícono */
  height: 48px; /* Altura del ícono */
  color: var(--color-principal); /* Color del ícono */
}

/* Estilos para el título de la tarjeta */
.card-title {
  font-family: var(--font-family); /* Fuente para títulos */
  font-size: 24px; /* Tamaño de fuente */
  color: var(--color-secundario); /* Color del título */
  margin-bottom: 15px; /* Margen inferior */
}

/* Estilos para la descripción de la tarjeta */
.card-description {
  font-size: 16px; /* Tamaño de fuente */
  color: #666; /* Color del texto */
}

/* Estilos de la sección de información adicional */
.information-about {
  text-align: center; /* Alinear texto al centro */
  margin-bottom: 40px; /* Margen inferior */
}

/* Estilos para el título de la sección de información */
.information-about h2 {
  font-family: var(--font-titles); /* Fuente para títulos */
  font-size: 48px; /* Tamaño de fuente */
  margin: 80px 10px 0; /* Margen */
}

/* Estilos para la sección de información */
.section-information {
  display: flex; /* Usar flexbox */
  margin-bottom: 40px; /* Margen inferior */
  align-items: center; /* Alinear verticalmente */
}

/* Estilos para la sección de información en orden inverso */
.section-information:nth-child(even) {
  flex-direction: row-reverse; /* Invertir dirección */
}

/* Estilos para el contenedor de imágenes en la sección de información */
.image-container-information {
  flex: 1; /* Permitir que el contenedor ocupe espacio */
  position: relative; /* Posición relativa */
  overflow: hidden; /* Ocultar desbordamiento */
}

/* Estilos para las imágenes en la sección de información */
.image-container-information img {
  width: 100%; /* Ancho completo */
  height: auto; /* Altura automática */
  display: block; /* Mostrar como bloque */
  border-radius: 8px; /* Bordes redondeados */
}

/* Estilos para la reflexión en la imagen */
.reflection {
  position: absolute; /* Posición absoluta */
  top: -100%; /* Alinear arriba */
  left: 0; /* Alinear a la izquierda */
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5)); /* Gradiente */
  transform: skewY(-45deg); /* Inclinación */
  transition: transform 0.5s ease; /* Transición para efectos */
  pointer-events: none; /* No permitir eventos del puntero */
}

/* Efecto hover para la reflexión */
.image-container-information:hover .reflection {
  transform: skewY(-45deg) translateY(200%); /* Mover la reflexión */
}

/* Estilos para el contenido de la sección de información */
.content-information {
  flex: 1; /* Permitir que el contenido ocupe espacio */
  padding: 0 40px; /* Relleno lateral */
}

/* Estilos para el título del contenido de la sección de información */
.content-information h2 {
  font-size: 24px; /* Tamaño de fuente */
  margin-bottom: 20px; /* Margen inferior */
  font-family: var(--font-titles); /* Fuente para títulos */
}

/* Estilos para el título con acento en la sección de información */
.content-information h2 span {
  font-family: var(--font-titles); /* Fuente para títulos */
  color: var(--color-principal); /* Color del título */
}

/* Estilos para los párrafos en la sección de información */
.content-information p {
  margin-bottom: 20px; /* Margen inferior */
}

/* Estilos para el botón de información */
.btn-information {
  display: inline-block; /* Mostrar como bloque en línea */
  padding: 10px 20px; /* Relleno */
  border: 2px solid var(--color-principal); /* Borde */
  color: var(--color-principal); /* Color del texto */
  text-decoration: none; /* Sin subrayado */
  font-weight: bold; /* Negrita */
  transition: background-color 0.3s, color 0.3s; /* Transición para efectos */
  font-family: var(--font-subtitles); /* Fuente para subtítulos */
}

/* Efecto hover para el botón de información */
.btn-information:hover {
  background-color: var(--color-principal); /* Color de fondo al pasar el ratón */
  color: white; /* Color del texto al pasar el ratón */
}

/* Estilos de la galería */
.gallery-about {
  text-align: center; /* Alinear texto al centro */
  margin-bottom: 40px; /* Margen inferior */
}

/* Estilos para el texto de la galería */
.gallery-about span {
  font-size: 14px; /* Tamaño de fuente */
  letter-spacing: 2px; /* Espaciado entre letras */
  margin-bottom: 10px; /* Margen inferior */
  display: block; /* Mostrar como bloque */
}

/* Estilos para el título de la galería */
.gallery-about h2 {
  font-family: var(--font-family); /* Fuente para títulos */
  font-size: 48px; /* Tamaño de fuente */
  margin: 80px 10px 0; /* Margen */
  font-family: var(--font-titles); /* Fuente para títulos */
}

/* Media queries para ajustar el tamaño de fuente en pantallas más pequeñas */
@media (max-width: 768px) {
  .gallery-about h2 {
    font-size: 36px; /* Tamaño de fuente ajustado */
    margin: 60px 10px 0; /* Margen ajustado */
  }
}

/* Media queries para ajustar el tamaño de fuente en pantallas más pequeñas */
@media (max-width: 480px) {
  .gallery-about h2 {
    font-size: 28px; /* Tamaño de fuente ajustado */
    margin: 40px 10px 0; /* Margen ajustado */
  }
}

/* Estilos para el slider de la galería */
.gallery-slider {
  position: relative; /* Posición relativa */
  width: 100%; /* Ancho completo */
  height: 600px; /* Altura del slider */
  overflow: hidden; /* Ocultar desbordamiento */
}

/* Contenedor de las diapositivas */
.slides-container {
  display: flex; /* Usar flexbox */
  transition: transform 0.5s ease; /* Transición para efectos */
  height: 100%; /* Altura completa */
}

/* Estilos para cada diapositiva */
.slide {
  min-width: 100%; /* Ancho mínimo */
  position: relative; /* Posición relativa */
  overflow: hidden; /* Ocultar desbordamiento */
}

/* Estilos para las imágenes en las diapositivas */
.slide img {
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  object-fit: cover; /* Ajustar imagen */
}

/* Estilos para el contenido de cada diapositiva */
.slide-content {
  position: absolute; /* Posición absoluta */
  bottom: 40px; /* Alinear abajo */
  left: 40px; /* Alinear a la izquierda */
  z-index: 2; /* Z-index para estar encima */
}

/* Estilos para el título en el contenido de la diapositiva */
.slide-content h3 {
  font-family: var(--font-family); /* Fuente para títulos */
  font-size: 36px; /* Tamaño de fuente */
  margin: 0 0 10px 0; /* Margen */
  color: #ffff; /* Color del texto */
}

/* Estilos para el precio en el contenido de la diapositiva */
.price {
  font-size: 18px; /* Tamaño de fuente */
  margin-bottom: 20px; /* Margen inferior */
  color: #ffff; /* Color del texto */
}

/* Estilos para el botón de detalles en la diapositiva */
.details-btn {
  background-color: transparent; /* Fondo transparente */
  border: 2px solid white; /* Borde */
  color: white; /* Color del texto */
  padding: 10px 20px; /* Relleno */
  font-size: 14px; /* Tamaño de fuente */
  cursor: pointer; /* Cursor de puntero */
  transition: all 0.3s ease; /* Transición para efectos */
}

/* Efecto hover para el botón de detalles */
.details-btn:hover {
  background-color: white; /* Color de fondo al pasar el ratón */
  color: black; /* Color del texto al pasar el ratón */
}

/* Estilos para los botones de navegación en el slider */
.nav-button {
  position: absolute; /* Posición absoluta */
  top: 50%; /* Alinear verticalmente */
  transform: translateY(-50%); /* Centrar verticalmente */
  background-color: rgba(255, 255, 255, 0.3); /* Fondo semitransparente */
  border: none; /* Sin borde */
  color: white; /* Color del texto */
  padding: 15px; /* Relleno */
  cursor: pointer; /* Cursor de puntero */
  font-size: 18px; /* Tamaño de fuente */
  z-index: 3; /* Z-index para estar encima */
  transition: background-color 0.3s ease; /* Transición para efectos */
}

/* Efecto hover para los botones de navegación */
.nav-button:hover {
  background-color: rgba(255, 255, 255, 0.5); /* Color de fondo al pasar el ratón */
}

/* Estilos para el botón de navegación anterior */
.prev {
  left: 20px; /* Alinear a la izquierda */
}

/* Estilos para el botón de navegación siguiente */
.next {
  right: 20px; /* Alinear a la derecha */
}

/* Estilos del botón para volver al inicio */
.scroll-top {
  position: fixed; /* Posición fija */
  bottom: 20px; /* Alinear abajo */
  right: 20px; /* Alinear a la derecha */
  background-color: rgba(188, 170, 144, 0.8); /* Fondo semitransparente */
  color: white; /* Color del texto */
  border: none; /* Sin borde */
  width: 40px; /* Ancho */
  height: 40px; /* Altura */
  border-radius: 4px; /* Bordes redondeados */
  cursor: pointer; /* Cursor de puntero */
  font-size: 20px; /* Tamaño de fuente */
  transition: background-color 0.3s ease; /* Transición para efectos */
}

/* Efecto hover para el botón de volver al inicio */
.scroll-top:hover {
  background-color: rgba(188, 170, 144, 1); /* Color de fondo al pasar el ratón */
}

/* Media Queries adicionales para diseño responsivo */
@media (max-width: 1000px) {
  .about-content {
    flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
  }

  .about-image {
    margin-top: 40px; /* Margen superior */
  }

  .about-grid {
    grid-template-columns: 1fr; /* Una sola columna */
  }

  .section-information {
    flex-direction: column; /* Cambiar a columna */
    justify-content: space-between; /* Espacio entre elementos */
    align-items: center; /* Alinear al centro */
  }

  .section-information:nth-child(even) {
    flex-direction: column; /* Cambiar a columna en orden inverso */
  }

  .image-container {
    width: 100%; /* Ancho completo */
    max-width: 600px; /* Ancho máximo */
    margin-bottom: 20px; /* Margen inferior */
  }

  .content-information {
    width: 100%; /* Ancho completo */
    padding: 0 20px; /* Relleno lateral */
    margin-top: 20px; /* Margen superior */
  }

  .content-information h2 {
    text-align: center; /* Alinear texto al centro */
    margin-top: 10px; /* Margen superior */
    margin-bottom: 20px; /* Margen inferior */
  }

  .content-information p {
    text-align: justify; /* Justificar texto */
  }

  .btn-information {
    margin: 0 auto; /* Centrar horizontalmente */
    display: block; /* Mostrar como bloque */
    text-align: center; /* Alinear texto al centro */
    max-width: 200px; /* Ancho máximo */
  }

  .gallery-header h1 {
    font-size: 36px; /* Tamaño de fuente ajustado */
  }

  .slide-content {
    left: 20px; /* Alinear a la izquierda */
    bottom: 20px; /* Alinear abajo */
  }

  .slide-content h2 {
    font-size: 28px; /* Tamaño de fuente ajustado */
  }
}

/* Clases base para el contenido, inicialmente oculto */
.seccion {
  opacity: 0; /* Ocultar inicialmente */
  transform: translateY(30px); /* Mover hacia abajo */
  transition: opacity 1.5s ease, transform 1.5s ease; /* Transición para efectos */
  will-change: opacity, transform; /* Optimización de rendimiento */
}

/* Animaciones para las secciones */
.seccion1.visible {
  animation: fadeInUp 2s forwards; /* Animación de entrada */
}

.seccion2.visible {
  animation: fadeInLeft 2s forwards; /* Animación de entrada */
}

.seccion3.visible {
  animation: fadeInRight 2s forwards; /* Animación de entrada */
}

/* Definición de las animaciones */
@keyframes fadeInUp {
  0% {
    opacity: 0; /* Comienza oculto */
    transform: translateY(30px); /* Mover hacia abajo */
  }
  100% {
    opacity: 1; /* Totalmente visible */
    transform: translateY(0); /* Regresar a la posición original */
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0; /* Comienza oculto */
    transform: translateX(-30px); /* Mover hacia la izquierda */
  }
  100% {
    opacity: 1; /* Totalmente visible */
    transform: translateX(0); /* Regresar a la posición original */
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0; /* Comienza oculto */
    transform: translateX(30px); /* Mover hacia la derecha */
  }
  100% {
    opacity: 1; /* Totalmente visible */
    transform: translateX(0); /* Regresar a la posición original */
  }
}