/* =========================================================
   IMAGEN TÍTULO ("titulo-mayoristas.png")
   Centrada, sin estirar/distorsionar. Sin medida exacta dada,
   así que no se le fuerza un ancho: usa su tamaño natural.
   Margin-bottom: 2vw, mismo valor que separa bloques en Home
   (ej. .titles-section) — supuesto, avisame si es otro valor.
   ========================================================= */

.mayoristas-hero {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2vw;
}

.mayoristas-hero-img {
  height: auto;
  max-width: 40%; 
}

@media (max-width: 768px) {

    .mayoristas-hero {
        margin: 5vh 0;
    }

    .mayoristas-hero-img {
    max-width: 70%; 
}
}

/* =========================================================
   AVISO IMPORTANTE
   Referencia: pantalla de 17cm de ancho.
   - Margen izq/der: 2.5cm → 14.7059% → contenedor: 70.5882%
   - Texto centrado, Helvetica (var(--font-helvetica)), blanco.
   - "web minorista": negrita + subrayado + link + hover.
   ========================================================= */

.mayoristas-notice-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2vw; /* mismo margin antes del formulario */
}

.mayoristas-notice {
  width: 40%;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-helvetica);
  font-size: 1.5vw; /* "grande" sin medida exacta — ajustable */
  line-height: 1.4;
  margin: 0;
}

.mayoristas-notice-line {
  display: block;
  margin-top: 1.2vw; /* más espacio entre líneas */
}

.mayoristas-notice strong {
  font-weight: 700;
}

.mayoristas-notice-link {
  color: var(--color-white);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.mayoristas-notice-link:hover {
  color: var(--color-amarillo); /* mismo acento dorado de marca en el hover */
}

@media (max-width: 768px) {
    .mayoristas-notice-title {
    font-size: 1.2em;
    margin-bottom: 3vh;
    }
    .mayoristas-notice-line {
        font-size: 0.9em;
    }
  .mayoristas-notice {
    width: 70%; 
    font-size: 4.2vw;
  }
}

.mayoristas-intro-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2vw;
}

.mayoristas-intro {
  font-family: var(--font-helvetica);
  max-width: 50%;
  font-weight: 400;
  font-size: 4rem;
  text-align: center;
  margin: 10vh 0;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mayoristas-form-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 3vw;
}

.mayoristas-form {
  width: 45%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.6vw;
}

.mayoristas-field {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.mayoristas-field label {
  color: #FFFFFF;
  font-family: var(--font-helvetica);
  font-size: 1.3vw;
  font-weight: 700;
  margin-bottom: 0.5vw;
}

.mayoristas-field-note {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.8vw;
  margin-top: 0.4vw;
}

@media (max-width: 768px) {
  .mayoristas-field-note {
    font-size: 3vw;
  }
}

.mayoristas-field input,
.mayoristas-field select {
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 0.8vw;
  padding: 0.9vw 1.1vw;
  color: var(--color-white);
  font-family: var(--font-helvetica);
  font-size: 1vw;
  background-image: linear-gradient(var(--color-bg-start), var(--color-bg-start)), var(--gradient-text);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.mayoristas-field input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.mayoristas-field input:focus,
.mayoristas-field select:focus {
  outline: none;
}

.mayoristas-field input:-webkit-autofill,
.mayoristas-field input:-webkit-autofill:hover,
.mayoristas-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-white);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-start) inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--color-white);
  background-image: linear-gradient(var(--color-bg-start), var(--color-bg-start)), var(--gradient-text) !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.mayoristas-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(var(--color-bg-start), var(--color-bg-start)),
    var(--gradient-text),
    linear-gradient(45deg, transparent 50%, var(--color-amarillo) 50%),
    linear-gradient(135deg, var(--color-amarillo) 50%, transparent 50%);
  background-position: 0 0, 0 0, calc(100% - 1.3vw) 50%, calc(100% - 0.9vw) 50%;
  background-size: auto, auto, 0.4vw 0.4vw, 0.4vw 0.4vw;
  background-repeat: no-repeat;
}

.mayoristas-field select option {
  background-color: var(--color-bg-start);
  color: var(--color-white);
}

.mayoristas-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mayoristas-submit-error {
  display: none;
  color: #ff8080;
  font-size: 0.9vw;
  margin: 0.5vw 0 0 0;
}

.mayoristas-submit-error.is-visible {
  display: block;
}

.mayoristas-submit {
  align-self: flex-start;
  margin-top: 1vw;
  padding: 1vw 3vw;
  border-radius: 0.8vw;
  border: 1.5px solid var(--color-amarillo);
  background: var(--color-amarillo);
  color: var(--color-bg-start);
  font-family: var(--font-helvetica);
  font-weight: 700;
  font-size: 1.1vw;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-bottom: 5vh;
}

.mayoristas-submit:hover {
  background: transparent;
  color: var(--color-amarillo);
}

.mayoristas-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.mayoristas-thankyou {
  text-align: center;
}

.mayoristas-thankyou-title {
  color: var(--color-white);
  font-family: var(--font-helvetica);
  font-weight: 700;
  font-size: 1.8vw;
  margin: 0 0 0.8vw 0;
}

.mayoristas-thankyou-text {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-helvetica);
  font-size: 1.1vw;
  margin: 0;
}

@media (max-width: 768px) {
  .mayoristas-form {
    width: 90%;
    padding-left: 5%;
  }

  .mayoristas-field label {
    font-size: 3.6vw;
  }

  .mayoristas-intro {
    max-width: 85%;
    font-size: 2rem;
  }

  .mayoristas-field input,
  .mayoristas-field select {
    font-size: 3.4vw;
    padding: 3vw 3.5vw;
    border-radius: 2.5vw;
  }

  .mayoristas-submit {
    align-self: stretch;
    text-align: center;
    font-size: 3.6vw;
    padding: 3.5vw;
    border-radius: 2.5vw;
  }

  .mayoristas-thankyou-title {
    font-size: 5vw;
  }

  .mayoristas-thankyou-text {
    font-size: 3.6vw;
  }
}