body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  justify-content: flex-start; /* Asegura que el contenido comience desde arriba */
}

.top-bar {
  position: fixed;
  top: 0;
  left: 50%; /* Mueve el top-bar al centro horizontal */
  transform: translateX(-50%); /* Ajusta el desplazamiento para centrarlo */
  width: 100%; /* Asegura que ocupe el 100% del ancho de la pantalla */
  max-width: 1200px; /* Limita el ancho máximo */
  background-color: #36312c;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  padding: 1em 0;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px; /* Limita el ancho máximo */
  margin: 0 auto;    /* Centra el contenedor */
  padding: 0.8em 3em;
  width: 100%; /* Asegura que ocupe el 100% de su contenedor padre */
}

.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 */
}

.menu-item1, .menu-item2, .menu-item3, .menu-item4 {
  margin-top: 2em;
  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 */
}

/* 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;
}

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

.logo {
  width: 30em;
  height: auto;
}

/* SECCIÓN CONTACTO CON FONDO DE PARED */
.contacto {
  position: relative;
  width: 100%; /* Asegura que ocupe el 100% del ancho disponible */
  max-width: 1200px; /* Limita el ancho máximo */
  margin: 0 auto; /* Centra el contenedor */
  padding: 4em 1em;
  text-align: center;
  color: white; /* Texto en blanco */
  overflow: hidden; /* Previene que el contenido se desborde */
  box-sizing: border-box; /* Asegura que el padding no incremente el ancho */
}

/* Fondo de la sección */
.contacto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/images/pared.jpg);
  background-size: cover; /* Asegura que la imagen cubra la sección sin salirse */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5; /* Ajusta la opacidad si es necesario */
  z-index: 1;
}

/* Todo el contenido encima del fondo */
.contacto > * {
  position: relative;
  z-index: 2;
}

.contacto img {
  max-width: 80%; /* Limita el tamaño máximo de la imagen */
  height: auto;
  margin-bottom: 1em;
  border-radius: 10px;
}

.contacto iframe {
  width: 100%;
  max-width: 600px;
  height: 450px;
  border: none;
  border-radius: 10px;
}

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 */
}

.cuerpo {
  font-family: Arial, Helvetica, sans-serif;
  color: #222; /* Color oscuro para mejor lectura */
  font-size: 1.2em; /* Tamaño de fuente más grande */
  max-width: 80%;
  margin: 2em auto; /* Centrado con margen superior e inferior */
  text-align: center; /* Alineación centrada */
  background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente para mayor contraste */
  padding: 2em; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave para resaltar */
}

.cuerpo h3 {
  color: red;
  font-size: 2em;
  margin-bottom: 0.5em;
}

.cuerpo p {
  line-height: 1.6; /* Mejora la legibilidad */
  margin-bottom: 1em;
}

.cuerpo img.logo {
  max-width: 50%;
  height: auto;
  margin: 1em 0;
  border-radius: 10px;
}

.cuerpo iframe {
  width: 100%;
  max-width: 600px;
  height: 400px;
  border: none;
  border-radius: 10px;
}

.contact-form {
  width: 80%; /* Hace que el formulario ocupe el 80% del ancho */
  max-width: 800px; /* Máximo ancho para pantallas grandes */
  margin: 2em auto; /* Centrado horizontal */
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.form-row {
  display: flex;
  justify-content: space-between;
  width: 103%;
  gap: 1em;
}

.form-row input {
  width: 32%; /* Cada campo ocupa el 32% del ancho, sumando 96% con los gaps */
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 0.8em;
}

.contact-form .asunto {
  width: 100%;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 0.8em;
}

.contact-form textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 0.8em;
  resize: none;
}

.contact-form button {
  background-color: red;
  color: white;
  border: none;
  padding: 8px 16px; /* Reduce el tamaño del botón */
  font-size: 0.8em; /* Tamaño de fuente más pequeño */
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
  width: auto; /* Para que el botón solo ocupe el espacio del texto */
  align-self: center; /* Centrar el botón si es necesario */
}

.contact-form button:hover {
  background-color: darkred;
}

.logo-mapa-container {
  display: flex;
  align-items: center; /* Alinear verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  gap: 20px; /* Espaciado entre la imagen y el mapa */
  max-width: 80%;
  margin: 0 auto; /* Centrar en la página */
  flex-wrap: nowrap; /* 🔹 Evita que los elementos se coloquen en una nueva línea */
}

.logo-mapa-container .logo {
  max-width: 30%; /* Ajusta el tamaño del logo */
  height: auto;
  flex-shrink: 0; /* 🔹 Evita que el logo se encoja demasiado */
}

.logo-mapa-container iframe {
  max-width: 65%;
  height: 450px; /* Mantiene el alto fijo */
  flex-shrink: 0; /* 🔹 Evita que el mapa se encoja */
}

footer h3 {
  font-size: 1em;
}

@media only screen and (max-width: 768px) {
  /* Ajustar el contenedor principal */
  .container {
    padding: 0 1em; /* Reduce el espaciado lateral */
    flex-direction: column; /* Apilar elementos */
    align-items: center;
  }

  /* Barra superior */
  .top-bar {
    font-size: 0.85em; /* Reducir el tamaño de texto */
    padding: 0.5em 0;
    max-width: 100%; /* Asegurar que ocupe todo el ancho */
  }

  .top-bar .container {
    flex-direction: column; /* Apila los elementos */
    text-align: center; /* Centrar texto */
    padding: 0.5em;
  }

  .right-content {
    margin: 0; /* Eliminar margen derecho */
  }

  .right-content .request-quote {
    display: block;
    width: 90%;
    text-align: center;
    margin: 0.5em auto;
  }

  /* Menú de navegación */
  .slider-menu {
    display: flex !important;  /* Nos aseguramos de que se muestre */
    flex-direction: row;  /* Mantiene los botones en horizontal */
    justify-content: center;  /* Centra los botones */
    align-items: center;
    flex-wrap: wrap; /* Permite que se ajusten en filas */
    gap: -50px;  /* Espaciado entre botones */
    padding: 10px;
    width: 100%; /* Que ocupe todo el ancho */
    margin-left: -1em;
  }

  .slider-menu button {
    font-size: 1em; /* Tamaño adecuado para móviles */
    padding: 0px 5px; /* Espaciado interno */
    background: none; /* Fondo transparente */
    color: rgb(3, 3, 3); /* Texto blanco */
    border: none;
    cursor: pointer;
    text-shadow: 0 0 5px rgba(255, 255, 255, 1);
    transition: all 0.3s ease;
  }

  .slider-menu button:hover {
    font-size: 1.4em;
    color: red;
    text-shadow: 0 0 25px rgba(255, 255, 255, 1);
  }

  /* Sección de contacto */
  .contacto {
    padding: 2em 0.5em;
    margin-top: 5em;
  }

  .contacto p {
    font-size: 1em; /* Reduce el tamaño del texto */
  }

  /* Formulario de contacto */
  .contact-form {
    width: 100%; /* Ocupar todo el ancho */
    max-width: 100%; /* Evitar que tenga un ancho máximo grande */
  }

  .form-row {
    flex-direction: column; /* Poner los inputs en una sola columna */
    width: 100%;
  }

  .form-row input {
    width: 100%; /* Ocupar todo el ancho */
    text-align: left;
  }

  .contact-form textarea {
    height: 120px; /* Reducir la altura */
  }

  .contact-form button {
    width: 100%; /* Botón ancho completo */
    font-size: 1em;
    padding: 10px;
  }

  .contact-form .asunto,
  .contact-form textarea {
    width: 100%; /* Ocupar todo el ancho */
  }

  /* Ajustar el logo y el mapa */
  .logo-mapa-container {
    flex-direction: column; /* Apilar elementos */
    gap: 10px; /* Espaciado menor */
  }

  .logo-mapa-container .logo {
    width: 100% !important; /* Que ocupe todo el ancho disponible */
    max-width: 400px !important; /* Límite más grande */
    height: auto;
    display: block;
    margin: 0 auto; /* Centrar */
  }

  .logo-mapa-container iframe {
    max-width: 100%;
    height: 350px; /* Reducir la altura del mapa */
  }

  /* 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;
  }
  
  .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;
  }

}