.titulo {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--marron-titulos);
  text-align: center;
  margin-top: 5vh;
  font-size: 6vh; /* Ajuste para pantallas grandes */
  animation: fadeInUp 1s ease-out;
}

.principio {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: bold;
  color: var(--marron-titulos);
  text-align: center;
  margin: 0 20%; /* Margen horizontal para pantallas grandes */
  line-height: 1.5;
  animation: fadeInUp 1s ease-out;
}

.formulario {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60vw; /* Ancho del formulario ajustado al 60% de la vista del ancho */
  margin: 0 auto; /* Centra el formulario horizontalmente */
  padding: 5vh; /* Padding ajustado */
  border: 1px solid #ddd;
  border-radius: 2vh; /* Bordes redondeados del formulario */
  box-shadow: 0 4vh 8vh rgba(255, 0, 0, 0.2); /* Sombra aumentada */
  background-color: #c77c8a;
  margin-top: 3.8vh;
  flex: 1;
  margin-bottom: 20vh; /* Ajusta el valor según sea necesario */
}

.formulario input,
.formulario textarea,
.formulario button {
  width: 60vw; /* Ancho del 60% de la vista del ancho */
  max-width: 80vw; /* Ancho máximo del 80% de la vista del ancho */
  padding: 2vh; /* Padding ajustado */
  margin: 2vh 0; /* Margen ajustado */
  border: 1px solid #ccc;
  border-radius: 2vh; /* Bordes redondeados para los campos de entrada y botón */
  box-sizing: border-box; /* Incluye el padding y border en el ancho total */
  font-family: sans-serif; /* Define la fuente para los campos de entrada y área de texto */
  overflow: hidden; /* Evita el desbordamiento del contenido */
}

.formulario input,
.formulario button {
  height: 6vh; /* Altura ajustada para los campos de entrada y botón */
}

.formulario textarea {
  width: 100%; /* Ajusta el ancho al 100% del contenedor */
  max-width: 500px; /* Tamaño máximo en píxeles para el textarea */
  height: 6vh; /* Altura fija */
  resize: none; /* Deshabilita el redimensionamiento del textarea */
  border: 1px solid #ccc;
  border-radius: 2vh;
  padding: 1vh;
  font-family: sans-serif;
}

.formulario button {
  background-color: #3a1e1a;
  color: #fff;
  border: none;
  cursor: pointer;
  animation: pulseButton 1s ease-in-out infinite; /* Aplica la animación de pulsación */
}

.formulario button:hover {
  background-color: #1d0606;
  animation: none; /* Detiene la animación al pasar el mouse */
}

.formulario input::placeholder,
.formulario textarea::placeholder {
  color: #aaa; /* Color del texto del placeholder */
}

.formulario label {
  margin: 2vh 0; /* Margen ajustado */
  display: block;
  text-align: left; /* Alinea las etiquetas a la izquierda dentro del contenedor del formulario */
  width: 100%; /* Asegura que las etiquetas ocupen el ancho completo del contenedor */
}

/* Estilos responsivos para el footer */
/* Estilos responsivos para el footer y el cuerpo */
.formulario {
  animation: bounce 2s infinite; /* Animación de rebote para el formulario */
}

.formulario button {
  animation: pulse 1.5s infinite; /* Animación de pulso para el botón */
}

footer {
  background-color: var(--marron-titulos);
  color: white;
  text-align: center;
  padding: 20px 0;
  margin: 0;
  position: relative;
  bottom: 0;
  flex-shrink: 0; /* Asegura que el footer no se encoge */
}

.footer-content {
  max-width: 1200px; /* Máximo ancho del contenido */
  margin: 0 auto; /* Centra el contenido */
  padding: 0 20px; /* Espaciado lateral */
}

.social-icons {
  margin-top: 10px;
}

.social-icons img {
  width: 30px;
  margin: 0 10px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.social-icons img:hover {
  transform: scale(1.1);
}

.phone-group {
  display: flex;
  width: 100%; /* Ocupa todo el ancho del contenedor del formulario */
  gap: 1vh; /* Espacio entre el select y el input */
  align-items: center; /* Alinea verticalmente el select y el input */
}

.phone-group select {
  height: 6vh; /* Altura fija para hacer el select cuadrado */
  width: 20%; /* Ocupa el 20% del ancho del contenedor */
  border: 1px solid #ccc;
  border-radius: 2vh;
  padding: 1vh; /* Padding ajustado */
  font-family: sans-serif;
  text-align: left; /* Alinea el contenido a la izquierda */
}

.phone-group input {
  flex: 1; /* Asegura que el campo de teléfono se ajuste al tamaño disponible */
  height: 6vh; /* Altura igual que los otros cuadros */
  border: 1px solid #ccc;
  border-radius: 2vh;
  padding: 1.5vh;
  font-family: sans-serif;
}

.textarea-group {
  display: flex;
  width: 97.7%; /* Ocupa todo el ancho disponible */
  gap: 1vh; /* Espacio entre el select y el textarea */
  align-items: center; /* Alinea verticalmente los elementos */
}

.textarea-group select {
  width: 12%; /* Ocupa el 12% del ancho del contenedor */
  height: 6vh; /* Mantén la altura fija */
  border: 1px solid #ccc;
  border-radius: 2vh;
  padding: 1vh;
  font-family: sans-serif;
  text-align: left; /* Alinea el contenido a la izquierda */
}

.textarea-group textarea {
  width: 80%; /* Ocupa el 80% del ancho del contenedor */
  height: 6vh; /* Mantén la altura */
  resize: none; /* Deshabilita el redimensionamiento */
  border: 1px solid #ccc;
  border-radius: 2vh;
  padding: 1vh;
  font-family: sans-serif;
}

/* Media Queries */
@media (max-width: 768px) {
  .titulo {
    font-size: 8vw; /* Ajuste para pantallas más pequeñas */
    text-align: left; /* Alinea el texto a la izquierda */
    margin: 5vh 5% 2vh; /* Margen superior de 5vh, horizontal de 5% y margen inferior de 2vh */
  }

  .principio {
    margin: 3vh 5%; /* Margen superior de 3vh y margen horizontal de 5% */
    text-align: justify; /* Justifica el texto en el modo responsive */
  }

  .formulario {
    width: 90vw; /* Ancho ajustado para pantallas más pequeñas */
    padding: 4vw; /* Padding ajustado para pantallas más pequeñas */
    margin: 4vh auto 0; /* Margen superior reducido a 4vh, centrado horizontalmente */
  }

  .formulario input,
  .formulario textarea,
  .formulario button {
    width: 100%; /* Ajuste del ancho para pantallas más pequeñas */
    max-width: 100%; /* Ajuste del ancho máximo para pantallas más pequeñas */
  }

  .formulario textarea {
    max-width: 100%; /* Mantén el ancho máximo del textarea constante */
    width: 100%; /* Ajuste del ancho para pantallas más pequeñas */
    height: 6vh; /* Mantén la altura constante */
    margin-top: 1vh; /* Espacio entre select y textarea */
  }

  .phone-group {
    display: flex;
    flex-direction: column; /* Ajusta la dirección de los elementos para pantallas más pequeñas */
  }

  .phone-group select {
    width: 20%; /* Ajuste del ancho del select */
  }

  .phone-group input {
    width: 75%; /* Ajuste del ancho del input */
    margin-top: 1vh; /* Espacio entre select y input */
  }

  .textarea-group select,
  .textarea-group textarea {
    width: 100%; /* Ajuste del ancho para pantallas más pequeñas */
  }
}

@media (max-width: 480px) {
  .titulo {
    font-size: 10vw; /* Ajuste para pantallas aún más pequeñas */
    text-align: left; /* Alinea el texto a la izquierda */
    margin: 6vh 4% 2vh; /* Margen superior de 6vh, horizontal de 4% y margen inferior de 2vh */
  }

  .principio {
    margin: 5vh 4%; /* Margen superior de 5vh y margen horizontal de 4% */
    text-align: justify; /* Justifica el texto en el modo responsive */
  }

  .formulario {
    width: 90vw; /* Ancho ajustado para pantallas más pequeñas */
    padding: 3vw; /* Padding ajustado para pantallas más pequeñas */
    margin: 6vh auto 0; /* Margen superior reducido a 6vh, centrado horizontalmente */
  }

  .formulario input,
  .formulario textarea,
  .formulario button {
    padding: 1.5vw; /* Padding ajustado para pantallas más pequeñas */
    margin: 1vw 0; /* Margen ajustado para pantallas más pequeñas */
  }

  .formulario textarea {
    max-width: 100%; /* Mantén el ancho máximo del textarea constante */
    width: 100%; /* Ajuste del ancho para pantallas más pequeñas */
    height: 6vh; /* Mantén la altura constante */
  }

  .phone-group select {
    width: 20%; /* Ajuste del ancho del select */
  }

  .phone-group input {
    width: 75%; /* Ajuste del ancho del input */
  }

  .textarea-group select,
  .textarea-group textarea {
    width: 100%; /* Ajuste del ancho para pantallas más pequeñas */
  }
}

@media (max-width: 768px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el body ocupe al menos toda la altura de la ventana */
    margin: 0; /* Elimina márgenes en el body */
  }

  .content {
    flex: 1; /* Permite que el contenido ocupe el espacio disponible */
    padding-bottom: 20px; /* Añade un espacio en la parte inferior para mayor separación */
  }

  footer {
    background-color: var(--marron-titulos);
    color: white;
    text-align: center;
    padding: 15px 0; /* Reduce el padding */
    margin-top: 18vh;
    position: relative; /* Cambiado a relativo para asegurar que el footer no se desplace */
    bottom: 0; /* Asegura que esté al fondo */
  }

  .footer-content p {
    font-size: 1em; /* Ajusta el tamaño de la fuente para móviles */
    margin: 0; /* Elimina márgenes en móviles */
  }

  .social-icons {
    margin-top: 5px; /* Reduce el margen superior */
  }

  .social-icons img {
    width: 25px; /* Ajusta el tamaño de los íconos */
    margin: 0 5px; /* Espaciado más pequeño entre íconos */
  }
}

/* Animaciones */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}