:root {
  /*paleta básica*/
  --color-rojo: #e8332f;
  --color-celeste: #44c2dd;
  --color-amarillo: #d9c93b;
  --color-verde-agua: #1d8e7a;
  --color-verde: #7ab24e;

  --color-azul-suave: #56a4af;
  --color-azul-oscuro: #403786;
  --color-gris-claro: #dadada;
  --color-verde-oscuro: #4c5f41;
  --color-negro: #111110;

  /*verdes*/
  --color--verde-claro: #9fdc7a;
  --color--verde-medio: #6fae5c;
  --color--verde-bosque: #2f5d34;
  --color--verde-musgo: #597a4a;
  --color--verde-menta: #90d8c2;
  --color--verde-lima: #c7e86a;

  /*azules*/
  --color--azul-cielo: #7dd5ef;
  --color--azul-profundo: #2b2f5b;
  --color--azul-turquesa: #2fb8b0;
  --color--azul-gris: #8aa9b1;

  /*amarillos*/
  --color--amarillo-suave: #f3e57c;
  --color--amarillo-ocre: #d3a724;
  --color--naranja-suave: #e8a16a;

  /*cafés*/
  --color--cafe-madera: #6a4a2b;
  --color--cafe-claro: #d7b89c;
  --color--cafe-arena: #c9a27d;
  --color--cafe-tierra: #8b5e34;

  /*grises*/
  --color--gris-medio: #a0a0a0;
  --color--gris-oscuro: #5a5a5a;
  --color--blanco-hueso: #f4f4f1;

  --color--verde-hoover: #4fe721;
  --color--cafe-hoover: #4e342e;
  --color--gris-borde: #c5c5c5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: url("https://images.unsplash.com/photo-1643215328534-8b0c1ce83f88?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-color: var(--color--verde-bosque);
  color: var(--color--cafe-madera);
  min-height: 100vh;
  margin: 0;
}

main {
  margin: 6vh auto;
  padding: 2vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1.main-title {
  text-align: center;
  font-size: 5vh;
  margin-bottom: 1vh;
  color: var(--color--blanco-hueso);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
  font-family: "DynaPuff", cursive;
}

h6.sub-title {
  text-align: center;
  font-size: 2.5vh;
  margin-bottom: 5vh;
  color: var(--color--amarillo-suave);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  font-family: "Nunito", sans-serif;
  font-weight: bold;
}

.formulario-container {
  max-width: 450px;
  width: 90%;
  padding: 35px 40px;
  background-color: var(--color--blanco-hueso);
  background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 15px 30px rgba(0, 0, 0, 0.25);

  position: relative;
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
}

.formulario-container:hover {
  transform: rotate(0deg) scale(1.01);
}

.tape-deco {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(3deg);
  width: 110px;
  height: 40px;
  background-color: rgba(244, 244, 241, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  z-index: 10;
  opacity: 0.8;
  border-left: 2px dotted rgba(0, 0, 0, 0.1);
  border-right: 2px dotted rgba(0, 0, 0, 0.1);
}

#formularioContacto {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#formularioContacto label {
  font-size: 1.6vh;
  font-weight: 800;
  color: var(--color--cafe-tierra);
  font-family: "Nunito", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.textFrom {
  width: 100%;
  padding: 8px 5px;
  border: none;
  border-bottom: 2px dashed var(--color--gris-medio);
  background: transparent;
  font-size: 1.8vh;
  color: var(--color-negro);
  font-family: "Indie Flower", "Comic Sans MS", cursive;
  transition: 0.3s ease;
}

.textFrom:focus {
  outline: none;
  border-bottom: 2px solid var(--color--verde-bosque);
  background-color: rgba(122, 178, 78, 0.05);
}

.area-mensaje {
  resize: vertical;
  background-image: linear-gradient(
    transparent,
    transparent 28px,
    var(--color-gris-claro) 29px
  );
  background-size: 100% 29px;
  line-height: 29px;
  height: 120px;
}

.action-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.btn-enviar {
  background-color: var(--color--verde-bosque);
  color: var(--color--blanco-hueso);
  border: none;
  padding: 10px 25px;
  font-size: 1.8vh;
  border-radius: 4px;
  cursor: pointer;
  font-family: "DynaPuff", cursive;
  box-shadow: 2px 2px 0 var(--color-negro);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-enviar:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--color-negro);
  background-color: var(--color-verde);
}

.btn-enviar:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.stamp-deco {
  width: 60px;
  height: 70px;
  border: 3px double var(--color-rojo);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-rojo);
  font-size: 26px;
  border-radius: 4px;
  transform: rotate(-12deg);
  opacity: 0.7;
  mix-blend-mode: multiply;
}

@keyframes paperSlide {
  from {
    opacity: 0;
    transform: translateY(30px) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-2deg);
  }
}

.formulario-container {
  animation: paperSlide 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (max-width: 600px) {
  main {
    margin: 4vh auto;
  }
  .formulario-container {
    padding: 25px;
  }
  .stamp-deco {
    display: none;
  }
  .btn-enviar {
    width: 100%;
    justify-content: center;
  }
}