.formulario {
  max-width: 600px;
  margin: 4rem auto;
  padding: 2rem;
  font-family: var(--font-serif);
  background-color: var(--color-fondo-img);
  color: var(--color-blanco);
  border: 1px solid #e8d7d0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.formulario h2 {
  font-family: "Nefelibata Script", sans-serif;
  color: var(--color-verde-oliva-claro);
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--color-celeste);
  padding-bottom: 0.5rem;
}

/* Estilos para etiquetas */
.formulario label {
  display: block;
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Estilos para campos de entrada */
.formulario input[type="text"],
.formulario select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e8d7d0;
  border-radius: 4px;
  font-size: 1rem;
  font-family: "Lato", sans-serif;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  min-height: 44px;
}

.formulario input[type="text"]:focus,
.formulario select:focus {
  outline: none;
  border-color: var(--color-celeste);
  box-shadow: 0 0 0 3px rgba(136, 172, 240, 0.4);
}

/* Estilos para botones */
.formulario button {
  background: linear-gradient(
    135deg,
    var(--color-verde-oliva-claro) 0%,
    var(--color-verde-oliva) 100%
  );
  color: var(--color-white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 50px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 2rem auto;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.formulario button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.formulario button:active {
  transform: translateY(-1px);
}

.btn-small {
  padding: 0.5rem 1rem !important;
  font-size: 0.85rem !important;
  margin: 0.5rem 0 !important;
  min-height: 44px;
}

.btn-add {
  background-color: var(--color-celeste) !important;
}

.btn-add:hover {
  background-color: #88acf0 !important;
}

.btn-submit {
  background: linear-gradient(
    135deg,
    var(--color-verde-oliva-claro) 0%,
    var(--color-verde-oliva) 100%
  );
  color: var(--color-white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 50px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Sección de acompañantes */
.acompanantes {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #e8d7d0;
}

.acompanante {
  background-color: var(--color-verde);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  border-left: 3px solid var(--color-celeste);
}

/* Mensaje informativo */
.info-msg {
  font-size: 0.95rem;
  color: var(--color-blanco);
  text-align: center;
  margin-top: 1.5rem;
  line-height: 1.5;
  font-style: italic;
}

.info-msg-acomp {
  font-size: 0.95rem;
  color: var(--color-blanco);
  text-align: left;
  margin-top: 1.5rem;
  line-height: 1.5;
  font-style: italic;
}

/* Elementos ocultos */
.hidden {
  display: none;
}

/* Responsivo */
@media (max-width: 768px) {
  .formulario {
    padding: 1.5rem;
  }

  .info-msg {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .formulario {
    padding: 1rem;
  }

  .formulario label {
    font-size: 0.9rem;
  }

  .formulario input,
  .formulario select {
    font-size: 0.95rem;
    padding: 0.6rem;
  }

  .formulario button {
    font-size: 0.9rem;
    padding: 0.65rem 1.2rem;
  }

  .info-msg {
    font-size: 0.8rem;
  }
}

.formulario-musica {
  max-width: 600px;
  margin: 4rem auto;
  margin-top: 4rem;
  padding: 2rem;
  font-family: "Lato", sans-serif;
  color: var(--color-blanco);
  background-color: var(--color-fondo-img);
  border: 1px solid #e8d7d0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.formulario-musica h2 {
  font-family: "Nefelibata Script", sans-serif;
  color: var(--color-verde-oliva-claro);
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 500;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--color-celeste);
  padding-bottom: 0.5rem;
}

.formulario-musica label {
  display: block;
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.formulario-musica input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid #e8d7d0;
  border-radius: 4px;
  font-size: 1rem;
  font-family: "Raleway", sans-serif;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  min-height: 44px;
}

.formulario-musica input[type="text"]:focus {
  outline: none;
  border-color: var(--color-celeste);
  box-shadow: 0 0 0 3px rgba(136, 172, 240, 0.4);
}

.formulario-musica .btn-submit {
  background: linear-gradient(
    135deg,
    var(--color-verde-oliva-claro) 0%,
    var(--color-verde-oliva) 100%
  );
  color: var(--color-white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 50px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 2rem auto;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.formulario-musica .btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.formulario-musica .btn-submit:active {
  transform: translateY(-1px);
}

.estado-envio {
  font-size: 0.9rem;
  color: var(--color-blanco);
  text-align: center;
  margin-top: 1rem;
  font-style: italic;
}

/* Responsivo */
@media (max-width: 768px) {
  .formulario-musica {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .formulario-musica {
    padding: 1rem;
  }

  .formulario-musica label {
    font-size: 0.9rem;
  }

  .formulario-musica input {
    font-size: 0.95rem;
    padding: 0.6rem;
  }

  .formulario-musica .btn-submit {
    font-size: 0.9rem;
    padding: 0.65rem 1.2rem;
  }
}