/* Contenedor principal del slider */
.slider {
  position: relative;
  width: 1200px;
  /* Ancho fijo de 1200px */
  margin: 0 auto;
  overflow: hidden;
}

/* Logo Tovalca en la parte superior izquierda */
.logo {
  position: absolute;
  top: 5em;
  /* Distancia desde la parte superior */
  left: 3em;
  /* Distancia desde la parte izquierda */
  width: 45%;
  /* Reducir al 45% del ancho del contenedor */
  max-width: 30em;
  /* Limitar el tamaño máximo del logo (opcional) */
  height: auto;
  /* Mantener la proporción del logo */
  z-index: 5;
  /* Asegura que el logo esté encima de las imágenes */
}

/* Estilos para el track del slider */
.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Estilo de las imágenes dentro del slider */
.slider img {
  width: 100%;
  height: auto;
  display: block;
}

/* Botones de navegación del slider */
.slider-button {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  color: white;
  /* Color de las flechas */
  font-size: 90px;
  /* Aumenta el tamaño al triple del tamaño original */
  border: none;
  background: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  /* Asegura que las flechas estén encima de las imágenes */
  transition: color 0.3s ease;
  /* Efecto de transición suave para el color */
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

/* Menú en la parte superior derecha */
.slider-menu {
  position: absolute;
  top: 5.8em;
  /* Alineado a la parte superior */
  right: 3em;
  /* Alineado a la parte derecha */
  display: flex;
  gap: 20px;
  z-index: 5;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

/* Estilos para los elementos del menú */
.menu-item1,
.menu-item2,
.menu-item3,
.menu-item4 {
  background: none;
  color: black;
  font-size: 1.4em;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  /* Suaviza el cambio al pasar el ratón */
  text-shadow: 0 0 5px rgba(255, 255, 255, 1);
  /* Sombra blanca suave */
}

.menu-item1:hover,
.menu-item2:hover,
.menu-item3:hover,
.menu-item4:hover {
  font-size: 2em;
  color: red;
  text-shadow: 0 0 25px rgba(255, 255, 255, 1);
  /* Sombra blanca más intensa en hover */
}

.menu-item4 {
  text-decoration: none !important; /* Elimina el subrayado */
  color: black !important; /* Fuerza el color negro */
}

.menu-item4:visited {
  color: black !important; /* Evita el color morado en enlaces visitados */
}

.menu-item4:hover {
  color: red !important; /* Cambia a rojo al pasar el mouse */
}

/* Efectos de animación */

/* Efecto de desvanecimiento */
.fade {
  animation: fade 2s ease-in-out;
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Efecto de zoom */
.zoom {
  animation: zoom 2s ease-in-out;
}

@keyframes zoom {
  from {
    transform: scale(2);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Efecto de giro */
.rotate {
  animation: rotate 2.5s ease-in-out;
}

@keyframes rotate {
  from {
    transform: rotateY(360deg);
    opacity: 0;
  }

  to {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/* Efecto de componer la imagen por pedazos */
.slice-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  z-index: 2;
}

.slice {
  width: 16.66%;
  /* Cada pieza ocupa 1/6 del ancho */
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  animation: sliceAnimation 2.4s ease-in-out forwards;
}

@keyframes sliceAnimation {
  from {
    transform: translateY(150%);
  }

  to {
    transform: translateY(0);
  }
}

/* Efecto de desvanecimiento con gránulos */
.sand-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  animation: sandAnimation 3s ease-out forwards;
  z-index: 2;
}

@keyframes sandAnimation {
  from {
    clip-path: circle(150%);
    opacity: 1;
  }

  to {
    clip-path: circle(0%);
    opacity: 0;
  }
}

/* Estructura general del section */
section {
  display: flex;
  /* Divide en dos columnas: texto e imagen */
  flex-wrap: wrap;
  /* Permite que las columnas se ajusten en pantallas pequeñas */
  justify-content: space-between;
  /* Espacio entre las columnas */
  align-items: flex-start;
  /* Alineación superior */
  max-width: 1200px;
  /* Ancho máximo del contenedor */
  margin: 30px auto;
  /* Centramos horizontalmente */
  padding: 20px;
  /* Espaciado interno */
  gap: 20px;
  /* Espaciado entre bloques */
}

/* Estilos para el bloque de texto */
.text-block {
  flex: 1;
  /* Ocupa un ancho proporcional */
  min-width: 300px;
  /* Tamaño mínimo para pantallas pequeñas */
  text-align: center;
  /* Alinea el texto a la izquierda */
  margin-top: -1em;
  margin-left: 1em;
}

.text-block h2 {
  color: red;
  /* Título en rojo */
  font-size: 2em;
  /* Tamaño del título */
  margin-bottom: 15px;
  /* Espaciado inferior */
  font-family: Arial, sans-serif;
  /* Fuente Arial */
}

.text-block p {
  color: #333;
  /* Texto gris oscuro */
  font-size: 1.2em;
  /* Tamaño del texto */
  line-height: 1.5;
  /* Espaciado entre líneas */
  margin-bottom: 15px;
  /* Espaciado inferior */
  font-family: Arial, sans-serif;
  /* Fuente Arial */
}

.text-block h3 {
  color: gray;
  /* Subtítulo en gris */
  font-size: 1.5em;
  /* Tamaño del subtítulo */
  margin-bottom: 0;
  /* Sin margen inferior */
  font-family: Arial, sans-serif;
  /* Fuente Arial */
}

/* Estilos para el bloque de la imagen */
.image-block {
  flex: 1;
  /* Ocupa un ancho proporcional */
  min-width: 300px;
  /* Tamaño mínimo para pantallas pequeñas */
  display: flex;
  /* Para centrar la imagen */
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
}

.image-block img {
  width: 100%;
  /* Imagen ocupa todo el ancho del bloque */
  max-width: 400px;
  /* Limita el tamaño máximo */
  height: auto;
  /* Mantiene proporciones */
  border-radius: 8px;
  /* Bordes redondeados */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* Sombra estética */
}

/* Barra fija en la parte superior */
.top-bar {
  position: fixed;
  /* Fija la barra en la parte superior */
  top: 0;
  left: 50%;
  /* Posición inicial en el centro horizontal */
  transform: translateX(-50%);
  /* Ajusta el contenido para centrarlo */
  width: 1200px;
  /* Ancho máximo fijo */
  background-color: #36312c;
  /* Color de fondo negro */
  color: #fff;
  /* Texto blanco */
  font-family: Arial, sans-serif;
  /* Fuente Arial */
  font-size: 14px;
  /* Tamaño del texto */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* Sombra para efecto de elevación */
  z-index: 1000;
  /* Asegura que esté encima del resto del contenido */
  padding: 10px 0;
  /* Espaciado interno vertical */
}

/* Contenedor centralizado dentro de la barra */
.top-bar .container {
  display: flex;
  /* Flexbox para organizar contenido */
  justify-content: space-between;
  /* Espacio entre los bloques izquierdo y derecho */
  align-items: center;
  /* Centrado vertical */
  width: 100%;
  /* El contenedor ocupa el 100% del ancho de la barra */
  padding: 0.8em 3em;
  /* Espaciado interno lateral */
}

/* Contenido de la parte izquierda */
.left-content {
  display: flex;
  /* Para manejar contenido horizontal */
  align-items: center;
  /* Centrado vertical */
}

/* Espaciado para el texto de contacto */
.left-content span {
  margin-right: 20px;
  /* Espacio entre cada bloque de texto */
}

.right-content {
  margin-right: 8em;
}

/* Botón de presupuesto */
.right-content .request-quote {
  background-color: #007BFF;
  /* Color azul */
  color: #fff;
  /* Texto blanco */
  text-decoration: none;
  /* Sin subrayado */
  padding: 8px 15px;
  /* Espaciado interno del botón */
  border-radius: 4px;
  /* Bordes redondeados */
  font-size: 14px;
  /* Tamaño de texto */
  font-weight: bold;
  /* Texto en negrita */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Sombra para el botón */
  transition: background-color 0.3s ease;
  /* Animación suave al pasar el cursor */
}

/* Efecto hover para el botón */
.right-content .request-quote:hover {
  background-color: #0056b3;
  /* Azul más oscuro al pasar el cursor */
}

/* Estilo para la sección de oficios */
.oficios {
  display: flex;
  /* Organiza los elementos horizontalmente */
  justify-content: space-between;
  /* Espacio entre elementos */
  align-items: flex-start;
  /* Alinea elementos al inicio vertical */
  max-width: 1200px;
  /* Ancho máximo igual al resto de la web */
  margin: 0 auto;
  /* Centra horizontalmente */
  padding: 2em 5em;
  /* Espaciado vertical */
  text-align: center;
  /* Centra el texto bajo las imágenes */
}

/* Cada imagen y texto se agrupan en un contenedor */
.oficios div {
  flex: 1;
  /* Todos los bloques ocupan el mismo espacio */
  margin: 0 10px;
  /* Espacio entre los elementos */
}

/* Estilo para las imágenes */
.oficios img {
  max-width: 40%;
  /* Asegura que las imágenes se escalen correctamente */
  height: auto;
  /* Mantiene las proporciones */
  margin-bottom: 0em;
  /* Espaciado entre imagen y texto */
}

/* Estilo para el texto */
.oficios p {
  font-family: Arial, sans-serif;
  /* Fuente Arial */
  font-size: 14px;
  /* Tamaño del texto */
  color: #333;
  /* Color del texto */
  margin: 0;
  /* Elimina el margen extra del párrafo */
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5 em;
  color: red;
}

/* Estilo para la sección reformas */
.reformas {
  position: relative;
  /* Permite posicionar elementos dentro del contenedor */
  max-width: 1200px;
  /* Ancho máximo de la sección */
  margin: 0 auto;
  /* Centra horizontalmente la sección */
}

.reformas img {
  width: 100%;
  /* La imagen ocupa todo el ancho del contenedor */
  height: auto;
  /* Mantiene la proporción de la imagen */
}

.reformas h1,
.reformas p {
  position: absolute;
  /* Posiciona el texto dentro de la imagen */
  bottom: 1em;
  /* Alinea al fondo con 20px de margen */
  right: 20px;
  /* Alinea al lado derecho con 20px de margen */
  color: white;
  /* Color del texto blanco para contraste */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  /* Sombra para mejor visibilidad */
  font-family: Arial, sans-serif;
  /* Fuente para el texto */
  margin: 0;
  /* Elimina márgenes adicionales */
  max-width: 40%;
}

.reformas h1 {
  font-size: 32px;
  /* Tamaño más grande para el título */
  margin-bottom: 10px;
  /* Espaciado entre el título y el párrafo */
  color: red;
  bottom: 4em;
  max-width: 40%;
}

.reformas p {
  font-size: 16px;
  /* Tamaño del texto del párrafo */
  line-height: 1.5;
  /* Espaciado entre líneas */
}

/* Estilos para la sección .obras */
.obras {
  display: flex;
  /* Hace que los elementos se dispongan horizontalmente */
  justify-content: space-between;
  /* Espacio uniforme entre imágenes */
  align-items: center;
  /* Centra las imágenes verticalmente */
  max-width: 1000px;
  /* Ancho máximo de la sección */
  margin: 0 auto;
  /* Centra la sección horizontalmente */
  gap: 20px;
  /* Espaciado entre imágenes */
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}

.obras img {
  width: 300px;
  /* Ancho de cada imagen */
  height: auto;
  /* Mantiene la proporción de la imagen */
  border-radius: 8px;
  /* Bordes redondeados */
  position: relative;
  transition: transform 0.3s ease-in-out;
  /* Efecto de zoom */
  cursor: pointer;
  /* Cambia el cursor al pasar el ratón */
}

.obras img:hover {
  transform: scale(1.05);
  /* Zoom al pasar el ratón */
}

.obras div {
  position: relative;
  width: 300px;
  /* Ajusta al ancho de la imagen */
}

.obras div p {
  position: absolute;
  bottom: -0.8em;
  left: 0;
  width: 100%;
  height: 51%;
  background-color: rgba(255, 0, 0, 0.6);
  color: white;
  font-size: 1.5em;
  text-align: center;
  padding: 3em 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  /* Cambia el cursor para indicar que es clicable */
}

.obras div:hover p {
  opacity: 1;
}

/* Ajuste para la lupa */
.obras div:before {
  content: "🔍";
  /* Icono de lupa */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.obras div:hover:before {
  opacity: 1;
}

/* Hacer que el <p> funcione como un enlace */
.obras div p::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* Asegura que cubre todo el <p> */
}

.obras div p {
  pointer-events: none;
  /* Desactiva los eventos del <p> */
}

.obras div a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Asegura el correcto orden de elementos */
  text-decoration: none;
  /* Quita decoración de enlaces */
}

footer {
  background-color: rgb(43, 43, 43);
  color: #ccc;
  padding: 30px 0;
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  /* Centra horizontalmente la sección */
}

.container-footer {
  max-width: 85%;
  gap: 1em;
  display: flex;
  justify-content: center;
  text-align: left;
  padding: 0 5em;
}

.footer-column {
  flex: 1;
  /* Hace que las columnas tengan el mismo ancho */
  min-width: 250px;
  /* Evita que se vuelvan muy estrechas */
}

.footer-column p {
  margin: 0, 7em 0;
}

.footer-column i {
  margin-right: 1em;
  color: #ccc;
}

.footer-column a {
  color: #ccc;
  text-decoration: none;
  position: relative;
  padding-left: 1em;
  /* Espacio para la flecha */
  display: inline-block;
}

.footer-column a:hover {
  color: white;
  text-decoration: underline;
}

.footer-column h3 {
  color: red;
  /* Cambiado de blanco a rojo */
  margin-bottom: 15px;
}

.footer-btn {
  display: inline-block;
  background-color: #333;
  color: #ccc;
  padding: 8px 12px;
  margin: 5px 0;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
}

.footer-btn:hover {
  background-color: #555;
  color: white;
}

.footer-column a::before {
  content: "➜";
  /* Flecha */
  position: absolute;
  left: 0;
  color: red;
  /* Color de la flecha */
  font-size: 14px;
  transition: transform 0.2s;
}

.footer-column a:hover {
  color: white;
  text-decoration: underline;
}

.footer-column a:hover::before {
  transform: translateX(5px);
  /* Efecto de movimiento al pasar el mouse */
}

.footer-column:nth-child(2) {
  margin-left: 5em;
  /* Ajusta el valor según necesites */
}

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

  /* Ajuste del slider */
  .slider {
    width: 100%;
    /* Que ocupe todo el ancho disponible */
    margin-top: 8em;
  }

  .slider img {
    width: 100%;
    height: auto;
  }

  /* Ajuste del logo */
  .logo {
    top: 1em;
    /* Ajustamos la posición */
    left: 1em;
    width: 80% !important;
    /* Ajustamos el tamaño */
    max-width: 400px !important;
  }

  /* Ocultar los botones del slider si son muy grandes en móviles */
  .slider-button {
    font-size: 50px;
    /* Reducimos el tamaño de las flechas */
  }

  /* Ajuste del menú */
  .slider-menu {
    top: 18em;
    right: 1em;
    gap: 10px;
    font-size: 0.8em;
  }

  /* Ajuste de la barra superior */
  .top-bar {
    width: 100%;
    padding: 10px;
  }

  .top-bar .container {
    flex-direction: column;
    text-align: center;
    margin-left: -4em;
  }

  .left-content span {
    display: block;
    /* Hace que los elementos estén en líneas separadas */
    margin-bottom: 1em;
  }

  .right-content {
    margin-right: 0;
  }

  /* Ajuste de la sección principal */
  section {
    flex-direction: column;
    /* Cambia a una sola columna */
    align-items: center;
    padding: 10px;
  }

  .text-block,
  .image-block {
    text-align: center;
    width: 100%;
  }

  /* Ajuste de la sección de reformas */
  .reformas h1,
  .reformas p {
    bottom: 0.5em;
    right: 10px;
    font-size: 14px;
    max-width: 80%;
  }

  /* Ajuste de la sección obras */
  .obras {
    flex-direction: column;
    gap: 10px;
  }

  .obras img {
    width: 90%;
    /* Ajustamos el ancho para que no sean demasiado grandes */
  }

  /* Ajuste de la sección oficios */
  .oficios {
    flex-direction: column;
    text-align: center;
    padding: 1em;
  }

  .oficios img {
    max-width: 60%;
  }

  /* Ajuste del footer */
  .container-footer {
    flex-direction: column;
    text-align: center;
    padding: 0 2em;
  }

  .footer-column {
    min-width: 100%;
    margin-bottom: 20px;
  }

  /* Ajuste de fuentes */
  h3 {
    font-size: 1.2em;
  }

  p {
    font-size: 1em;
  }

  .reformas {
    display: flex;
    flex-direction: column;
    /* Apila los elementos verticalmente */
    align-items: center;
    /* Centra los elementos */
    text-align: center;
    /* Asegura que el texto esté centrado */
  }

  .reformas img {
    width: 100%;
    /* Asegura que la imagen ocupe el ancho disponible */
    height: auto;
    /* Mantiene la proporción */
  }

  .pie {
    color: black;
    /* Cambia el color del texto a negro */
    margin-top: -0.5em;
    /* Agrega espacio entre la imagen y el texto */
    font-size: 1em;
    /* Ajusta el tamaño si es necesario */
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
  }

  .footer-column:nth-child(2) {
    margin-left: 3em;
    /* Ajusta el valor según necesites */
  }

  .container-footer {
    max-width: 100%;
    gap: 1em;
    display: flex;
    justify-content: center;
    text-align: left;
    padding: 0 1.5em;
  }

}