/* ==========================================================================
   Formulario de presupuesto
   ==========================================================================
   Son los campos del formulario que había en el WordPress. Al enviar se abre
   WhatsApp con el mensaje montado, así que no hay estado de "enviando" ni
   pantalla de gracias: el usuario salta a una conversación.
   ========================================================================== */

.bloque-formulario {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--fondo-alt);
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* Resplandor rojo + una foto real casi negra detrás. La tarjeta del
   formulario ya lleva blur, así que la foto le da profundidad sin robarle
   lectura. En escritorio la foto va fija al viewport (parallax). */
.bloque-formulario::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 65% 90% at 50% 0%, rgba(227, 6, 19, .22), transparent 70%),
    linear-gradient(rgba(8, 7, 10, .84), rgba(8, 7, 10, .92)),
    url('/recursos/fiestas/light-6.webp') center 35% / cover no-repeat;
}

@media (min-width: 900px) and (hover: hover) {
  .bloque-formulario::before {
    background-attachment: scroll, fixed, fixed;
    background-position: center, center, center;
    background-size: auto, auto, cover;
  }
}

.formulario {
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgba(18, 16, 24, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--sombra-card);
}

.formulario__cabecera {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.formulario__cabecera h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin-bottom: .6rem;
}

.formulario__cabecera p {
  color: var(--texto-medio);
  max-width: 46ch;
  margin-inline: auto;
}

.formulario__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}

.campo {
  display: grid;
  gap: .4rem;
  margin: 0;
}

/* El "cuéntanos más" ocupa la fila entera: si comparte fila queda ridículo */
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.campo label span { color: var(--rojo-vivo); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  color: var(--texto);
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  /* En iOS, cualquier campo por debajo de 16px hace que el navegador
     dé un zoom al enfocarlo y la página salte de sitio. */
  font-size: max(1rem, 16px);
}

.campo textarea { resize: vertical; min-height: 5.5rem; font-family: inherit; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-tenue); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--rojo-vivo);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, .18);
}

/* La flecha del desplegable, dibujada aquí: la nativa en fondo oscuro se ve
   negra sobre negro en varios navegadores */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6b2c4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

.campo select option { background: var(--superficie); color: var(--texto); }

.formulario__pie {
  display: grid;
  justify-items: center;
  gap: .75rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.formulario__pie .btn { min-width: min(100%, 20rem); }

.formulario__pie small {
  color: var(--texto-tenue);
  font-size: .82rem;
  text-align: center;
  max-width: 40ch;
}

.formulario__error {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(227, 6, 19, .45);
  border-radius: var(--radio-s);
  background: rgba(227, 6, 19, .12);
  color: var(--rojo-suave);
  font-size: .9rem;
  text-align: center;
}

.formulario__error[hidden] { display: none; }