/* =============================================================
   ESTILOS-MAYORISTAS.CSS
   Hero, formulario y pantalla de gracias de mayoristas.html.
   ============================================================= */

/* ---------- Hero ---------- */

/* El header se superpone al hero, como en Figma (hero de 700px desde el tope) */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-hero);
  margin-top: calc(var(--alto-header) * -1);
  padding-top: var(--espacio-s);
  background: var(--color-negro) url('../images/fondo-negro.webp') center / cover no-repeat;
  color: var(--color-blanco);
}

.hero-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-s);
  max-width: var(--ancho-texto-hero);
  text-align: center;
}

.hero-titulo-img {
  width: var(--ancho-titulo-hero);
  height: auto;
}

.hero-texto {
  font-size: var(--fs-cuerpo-grande);
  line-height: var(--lh-cuerpo-grande);
}

.hero-texto p {
  margin: 0;
}

.hero-texto p + p {
  margin-top: var(--espacio-parrafo);
}

/* ---------- Formulario ---------- */

.formulario {
  position: relative;
  padding-block: calc(var(--espacio-xl) + var(--espacio-l));
  background-color: var(--color-fondo-formulario);
}

/* Textura de fondo al 60%, oscurecida 20% igual que la base */
.formulario::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/fondo-blanco.webp') center / cover no-repeat;
  opacity: var(--opacidad-textura);
  filter: var(--brillo-fondo-formulario);
  pointer-events: none;
}

.formulario-contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-l);
}

.formulario-subtitulo {
  margin: 0;
  font-size: var(--fs-subtitulo-formulario);
  font-weight: var(--peso-bold);
  line-height: var(--lh-subtitulo);
  text-align: center;
}

.mayoristas-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-l);
  width: 100%;
}

.formulario-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-s);
  width: 100%;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-xs);
  padding: var(--padding-campo);
}

.campo-label {
  font-size: var(--fs-cuerpo-grande);
  font-weight: var(--peso-bold);
  line-height: var(--lh-cuerpo-grande);
}

.campo-input {
  width: 100%;
  padding: var(--padding-input);
  border: var(--borde-fino);
  border-radius: var(--radio-input);
  background-color: var(--color-blanco);
  color: var(--color-negro);
  font-family: var(--fuente-base);
  font-size: var(--fs-cuerpo-grande);
  font-weight: var(--peso-bold);
  line-height: var(--lh-cuerpo-grande);
  appearance: none;
}

.campo-input::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

/* Select con la opción vacía elegida: se ve como placeholder */
select.campo-input:invalid {
  color: var(--color-placeholder);
}

select.campo-input option {
  color: var(--color-negro);
}

.campo-input:focus-visible {
  outline: var(--foco);
  outline-offset: 2px;
}

/* Honeypot: fuera de pantalla (no display:none, para que los bots lo completen) */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mayoristas-submit {
  text-transform: uppercase;
}

.mayoristas-submit:focus-visible {
  outline: var(--foco);
}

.mayoristas-submit:disabled {
  opacity: var(--opacidad-deshabilitado);
  cursor: wait;
}

/* Mensaje de error del envío (lo muestra el JS con .is-visible) */
.form-error {
  display: none;
  margin: 0;
  color: var(--color-error);
  font-size: var(--fs-cuerpo-grande);
  font-weight: var(--peso-bold);
  line-height: var(--lh-cuerpo-grande);
  text-align: center;
}

.form-error.is-visible {
  display: block;
}

/* ---------- Gracias ---------- */

.gracias {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--alto-hero) - var(--alto-header));
  padding-block: var(--espacio-xl);
  background: var(--color-negro) url('../images/fondo-negro.webp') center / cover no-repeat;
  color: var(--color-blanco);
}

.gracias--oculto {
  display: none;
}

.gracias-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-s);
  max-width: var(--ancho-texto);
  text-align: center;
}

.gracias-titulo-img {
  width: var(--ancho-titulo-gracias);
  height: auto;
}

.gracias-subtitulo {
  margin: 0;
  font-size: var(--fs-subtitulo);
  font-weight: var(--peso-bold);
  line-height: var(--lh-subtitulo);
}

.gracias-texto {
  margin: 0;
  font-size: var(--fs-cuerpo-grande);
  line-height: var(--lh-cuerpo-grande);
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--alto-header) + var(--espacio-xl));
    padding-bottom: var(--espacio-xl);
  }

  .salto-desktop {
    display: none;
  }

  .formulario {
    padding-block: var(--espacio-xl);
  }

  .gracias {
    min-height: 0;
    padding-block: calc(var(--espacio-xl) * 2);
  }
}