@font-face { font-family: 'Proxima Nova A'; font-weight: 700; font-display: swap;
  src: url(https://http2.mlstatic.com/ui/webfonts/v5.0.0/proxima-nova/proxima-nova-700.woff2) format('woff2'),
       url(https://http2.mlstatic.com/ui/webfonts/v5.0.0/proxima-nova/proxima-nova-700.ttf) format('truetype'); }
@font-face { font-family: 'Proxima Nova A'; font-weight: 800; font-display: swap;
  src: url(https://http2.mlstatic.com/ui/webfonts/v5.0.0/proxima-nova/proxima-nova-800.woff2) format('woff2'),
       url(https://http2.mlstatic.com/ui/webfonts/v5.0.0/proxima-nova/proxima-nova-800.ttf) format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap;
  src: url(https://http2.mlstatic.com/frontend-assets/fuji-fintech-ui-web/fonts/Inter-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap;
  src: url(https://http2.mlstatic.com/frontend-assets/fuji-fintech-ui-web/fonts/Inter-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap;
  src: url(https://http2.mlstatic.com/frontend-assets/fuji-fintech-ui-web/fonts/Inter-Bold.woff2) format('woff2'); }




/* ===== Andes X emulation v9 - acquiHeroFormSection (landing Conta MLB) - draft 28607 ===== */

/* 1) Tipografia -> Inter en el texto del modulo (labels, descripciones, inputs, CTA).
      Se aplica DIRECTO sobre las hojas (0,2,0) porque cada texto lleva .andes-landings-typography. */
.acqui-ui-hero-form-section .andes-landings-typography,
.acqui-ui-hero-form-section .andes-form-control__field,
.acqui-ui-hero-form-section .andes-form-control__control,
.acqui-ui-hero-form-section .andes-button {
  font-family: 'Inter', -apple-system, 'Roboto', Arial, sans-serif;
}

/* 2) Titulo display: Proxima Nova + "a" redonda (ss01). Escala LP: desktop 88, mobile 40.
      0,4,0 se mantiene por encima de la regla 1. */
.acqui-ui-hero-form-section .acqui-ui-hero-form-section__hero-title.andes-landings-typography.andes-landings-typography--type-hero {
  font-family: 'Proxima Nova A', 'Proxima Nova', sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings: 'ss01';
}
.acqui-ui-hero-form-section.acqui-ui-hero-form-section--desktop .acqui-ui-hero-form-section__hero-title.andes-landings-typography.andes-landings-typography--type-hero {
  font-size: 88px;   /* token Andes X X-Large. Si desborda la caja de 526px, bajar a 72 */
}
.acqui-ui-hero-form-section.acqui-ui-hero-form-section--mobile .acqui-ui-hero-form-section__hero-title.andes-landings-typography.andes-landings-typography--type-hero {
  font-size: 40px;   /* token Andes X LP/Small */
  letter-spacing: -1.6px;
}

/* 3) Colores de texto -> tokens Andes X. 0,3,0 vence a la regla de color (0,2,0);
      se fija color directo (la var inline no aplica sobre la propiedad color). */
.acqui-ui-hero-form-section .acqui-ui-step-form__label.andes-landings-typography--color {
  color: #282834;
}
.acqui-ui-hero-form-section .acqui-ui-step-form__title.andes-landings-typography--color {
  color: #282834;
}
.acqui-ui-hero-form-section .acqui-ui-step-form__description.andes-landings-typography--color {
  color: #646587;
}
.acqui-ui-hero-form-section .acqui-ui-structured-form__hyperlink {
  color: #434ce4;
}

/* 4) Radio de card SOLO desktop (en mobile la card es sheet: conserva las esquinas superiores del componente).
      !important para vencer el orden de carga (el GS se inyecta antes que el CSS del componente). */
.acqui-ui-hero-form-section--desktop .acqui-ui-hero-form-section__card {
  border-radius: 20px !important;
}
/* Radio de inputs Andes X (desktop + mobile). */
.acqui-ui-hero-form-section .andes-form-control__control,
.acqui-ui-hero-form-section .andes-form-control--textfield .andes-form-control__field {
  border-radius: 12px !important;
}

/* 5) CTA loud -> tokens Andes X (fill accent + radio de accion). */
.acqui-ui-hero-form-section .andes-button--loud {
  background-color: #434ce4 !important;
}
.acqui-ui-hero-form-section .andes-button {
  border-radius: 12px !important;
}

/* 6) Placeholder de carga del hero: tono oscuro que matchea la imagen, en vez del amarillo de marca.
      La imagen del hero es lazy; mientras carga se veia la capa base del Background en #ffe600.
      El componente andes-landings-background expone --al-background-custom-color como override. */
.acqui-ui-hero-form-section .andes-landings-background {
  --al-background-custom-color: #2b2a3a;
}

/* 7) Desktop: alinear el contenido del hero (titulo + card) con el logo de la nav.
      48px hasta ~1936px de ancho, y luego sigue el centrado del container (max-width 1840, padding 48).
      (920 = (1840 + 48 + 48) / 2 - 48). */
.acqui-ui-hero-form-section.acqui-ui-hero-form-section--desktop .acqui-ui-hero-form-section__hero-content {
  left: max(48px, calc(50% - 920px)) !important;
}

/* 8) Mobile: padding lateral de card = 24px (Andes X; el componente usa 20, fuera de escala). */
.acqui-ui-hero-form-section--mobile .acqui-ui-hero-form-section__card {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 9) Mobile: titulo abajo-izquierda. bottom es fluido: sigue el mismo escalado que la imagen de
      fondo (ancho/0.43) para mantener ~24px de gap real contra el texto "Conta/Cofrinhos" grabado
      en la imagen, en vez de un valor fijo que solo era correcto a un ancho puntual. */
.acqui-ui-hero-form-section--mobile .acqui-ui-hero-form-section__hero-title {
  top: auto !important;
  left: 24px !important;
  right: 24px !important;
  width: auto !important;
  bottom: 340px !important;
  transform: none !important;
  text-align: left !important;
}

/* 10) Links del form (incluye la "Declaracion de Privacidade", un <a> crudo dentro del label
       del checkbox) -> accent Andes X. Aplica desktop + mobile. */
.acqui-ui-hero-form-section .acqui-ui-step-form a,
.acqui-ui-hero-form-section .acqui-ui-structured-form a {
  color: #434ce4 !important;
}

/* 11) Desktop: el bloque titulo+form (.hero-content) centra verticalmente por defecto
       (justify-content: center); el prototipo lo ancla cerca del borde inferior del hero.
       gap y padding-bottom medidos del frame real de Figma (node-id=1103-38259): gap
       titulo->form 56px, form a 40px del borde inferior. Verificado en vivo: paso de
       187.9px de hueco bajo el form a los 40px del diseno. */
.acqui-ui-hero-form-section.acqui-ui-hero-form-section--desktop .acqui-ui-hero-form-section__hero-content {
  justify-content: flex-end !important;
  gap: 56px !important;
  padding-bottom: 40px !important;
}

/* 12) Mobile: tasas como capa propia, ancladas al titulo. Tamano 308x52 = asset 588x99
       a la escala del frame Figma de 360 (360/688). Gap 24px medido en Figma. */
.acqui-ui-hero-form-section--mobile .acqui-ui-hero-form-section__hero-title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 24px;
  width: 308px;
  height: 59px;
  background-image: url(https://http2.mlstatic.com/storage/pog-cm-admin/calm-assets/Taxes-Mobile--9d4da245.webp);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* 13) Desktop: tasas alineadas al borde inferior del formulario (40px, igual que el
       padding-bottom de la regla 11) y espejando el margen lateral de la regla 7.
       Tamano 491x57 = asset 719x83 a la escala del frame Figma de 1366 (1366/2001). */
.acqui-ui-hero-form-section.acqui-ui-hero-form-section--desktop::after {
  content: '';
  position: absolute;
  right: max(-2px, calc(50% - 920px));
  bottom: 30px;
  width: min(537px, calc(100% - 100px));
  height: 71px;
  background-image: url(https://http2.mlstatic.com/storage/pog-cm-admin/calm-assets/Taxes-Desktop--4317675f.webp);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* 14) Mobile: escala tipografica del form segun Figma (node 1103:36177,
       token heading/medium/narrow): 16px / 600 / lh 20px. */
.acqui-ui-hero-form-section--mobile .acqui-ui-step-form__label.andes-landings-typography {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

/* 15) Texto del checkbox: lh 16px y color #646587 (token body/small/default).
       El elemento trae un --al-typography-color inline, por eso va color directo. */
.acqui-ui-hero-form-section .acqui-ui-structured-form__checkbox__label {
  line-height: 16px !important;
  color: #646587 !important;
}

/* 16) "Declaracao de Privacidade": es un span sin clase (no un enlace), por eso
       la regla 10 no lo alcanzaba. Se le da el tratamiento de link de Figma. */
.acqui-ui-hero-form-section .acqui-ui-structured-form__checkbox__label span {
  font-weight: 600 !important;
  color: #434ce4 !important;
  text-decoration: underline !important;
}

.acqui-ui-hero-form-section.acqui-ui-hero-form-section--mobile {
  min-height: 900px !important;
}

.acqui-ui-hero-form-section--mobile .acqui-ui-hero-form-section__hero-title {
  bottom: 400px !important;
}