/* ==========================================================================
   YPF RUTA — Rediseño 2026 · Formulario "Quiero inscribirme"

   Figma:
     mobile  267:27899  (375)
     tablet  274:35913  (768)
     desktop 267:27470  (1440)

   IMPORTANTE: acá NO se toca ni el markup ni la lógica del formulario.
   Los campos los renderiza el componente Vue `credito.umd.min.js`
   (<form-contact>), así que todo esto es puramente CSS pisando las clases
   que ese componente ya emite:

     .contact__form · .form__field · .form__field--textarea · .form__field--select
     .field__input  · .form__switch-container · .form__submit-container
     .form__submit-button

   La grilla de 2 columnas y el orden de los campos ya venían bien de
   common.css y coinciden con el Figma; acá se ajusta la estética.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sección y fondo

   .section::before (main.css) es la capa full-bleed de 100vw que ya usa el
   sitio para los fondos de sección. Se reutiliza tal cual, sólo se le cambian
   las imágenes y se le saca la barra azul inferior que traía.
   -------------------------------------------------------------------------- */

.section--contact {
  padding: 80px var(--nd-gutter);
}

.section--contact::before {
  background-color: var(--nd-black);
  background-image: url("../../assets/newdesign/home/bkg-form-mobile.svg");
  background-position: top center;
  background-repeat: no-repeat;
  /* 100% 100% y no cover: los SVG llevan preserveAspectRatio="none", así que
     el dibujo se mapea exacto sobre la caja de la sección a cualquier ancho.
     Con cover, arriba de 1440 el SVG se agrandaba y recortaba el 25% de abajo,
     y los trazos dejaban de encontrarse entre sección y sección: se veía un
     corte horizontal duro en cada juntura. */
  background-size: 100% 100%;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Textos
   -------------------------------------------------------------------------- */

/* 300px hace que el título corte en dos líneas ("Quiero / inscribirme") y la
   bajada también en dos, como en el Figma de mobile y tablet. */
.contact__texts {
  max-width: 300px;
}

.section--contact .contact__title {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 36px;
  font-weight: var(--nd-w-bold);
  letter-spacing: 0.72px;
  line-height: 42px;
  margin: 0 0 24px;
}

.section--contact .contact__text {
  color: var(--nd-white);
  font-family: var(--nd-font-display);
  font-size: 14px;
  font-weight: var(--nd-w-regular);
  letter-spacing: 0.28px;
  line-height: 20px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Campos

   En mobile el Figma los muestra en una sola columna.
   -------------------------------------------------------------------------- */

.contact__form {
  gap: 17px 23px;
}

.section--contact .field__input {
  border-radius: var(--nd-radius);
  font-family: var(--nd-font-display);
  font-size: 14px;
  font-weight: var(--nd-w-regular);
  height: 42px;
  letter-spacing: 0.28px;
  padding: 0 16px;
}

.section--contact .form__field ::placeholder,
.section--contact .form__field select {
  color: #8f8f8f;
  font-family: var(--nd-font-display);
  font-size: 14px;
}

.section--contact .form__field--textarea .field__input {
  height: 144px;
  max-height: none;
  min-height: 144px;
  padding: 14px 16px;
}

/* Flecha del desplegable.
   common.css la dibuja sobre .form__field--select, pero el componente Vue
   nunca le pone esa clase al campo —por eso el select venía sin flecha, ya
   desde antes del rediseño—. Se resuelve pintándola de fondo sobre el propio
   <select>, que ya tiene appearance:none, sin tocar el componente. */
.section--contact select.field__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23252525' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding-right: 42px;
}

/* --------------------------------------------------------------------------
   Switch "¿Tiene YPF RUTA?" y botón de envío
   -------------------------------------------------------------------------- */

.section--contact .form__switch-title {
  font-family: var(--nd-font-display);
  font-size: 16px;
  font-weight: var(--nd-w-bold);
}

.section--contact .form__submit-button {
  align-items: center;
  border-radius: var(--nd-radius);
  display: flex;
  /* common.css le mete `flex: 1` dentro de un contenedor en columna (en su
     media query de max-width 800). Eso hace que el alto lo decida el flex
     —flex-basis: 0— y el botón quede finito. Con `flex: none` manda el
     height de 45px, que es el del Figma. */
  flex: none;
  font-family: var(--nd-font-display);
  font-size: 16px;
  font-weight: var(--nd-w-medium);
  height: 45px;
  justify-content: center;
  letter-spacing: 0.32px;
  max-width: 186px;
  min-height: 45px;
  padding: 0 10px;
  width: 186px;
}

/* --------------------------------------------------------------------------
   Mobile — una sola columna (Figma 267:27899)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .contact__form {
    grid-template-columns: 1fr;
  }

  .contact__form > .form__field,
  .contact__form > .form__field--textarea,
  .contact__form > .form__switch-container,
  .contact__form > .form__submit-container {
    grid-column: 1;
  }

  /* En mobile el botón va a todo el ancho; el alto de 45px ya viene de la
     regla base. */
  .section--contact .form__submit-button {
    max-width: 100%;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Tablet — Figma 274:35913
   Los textos van arriba a lo ancho y el formulario abajo en dos columnas.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .section--contact {
    padding: 120px var(--nd-gutter);
  }

  .section--contact::before {
    background-image: url("../../assets/newdesign/home/bkg-form-tablet.svg");
  }

  .contact__texts {
    grid-column: 1 / 11;
    margin-bottom: 40px;
  }

  .contact__form {
    grid-column: 1 / 11;
    margin-top: 0;
  }

  /* common.css, en su media query de max-width 800, tira el bloque de envío
     abajo a la izquierda. En el Figma de tablet el switch va a la izquierda y
     el captcha con el botón a la derecha, igual que en desktop. */
  .contact__form > .form__switch-container {
    grid-column: 1 / 2;
  }

  .contact__form > .form__submit-container {
    grid-column: 2 / 3;
    justify-self: flex-end;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Desktop — Figma 267:27470
   Vuelve a dos columnas: textos a la izquierda (346px), formulario a la
   derecha (639px), con 94px entre medio.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
  .section--contact {
    padding: 180px var(--nd-gutter);
  }

  .section--contact::before {
    background-image: url("../../assets/newdesign/home/bkg-form.svg");
  }

  .section--contact .contact__title {
    font-size: 48px;
    letter-spacing: 0.48px;
    line-height: 54px;
  }

  .contact__texts {
    grid-column: 1 / 5;
    margin-bottom: 0;
    max-width: 346px;
  }

  .contact__form {
    grid-column: 5 / 11;
  }
}