: mismo problema que el font-family de antes. faf.css/estilos.css centran h3/p directo sobre el elemento (probable "h3, p { text-align: center }" legacy), y eso le gana a cualquier alineación heredada del ancestro. Se fuerza acá con !important. */ .value-prop__title { margin: 0 0 6px; font-weight: 700; font-size: 18px; line-height: 22px; text-align: left !important; } .value-prop__text { margin: 0; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: left !important; } @media (max-width: 767.98px) { .hero__title { font-size: 34px; letter-spacing: -0.34px; } .value-prop__title { font-size: 20px; line-height: 24px; } .value-prop__text { font-size: 16px; } } /* ============================================================ FORM ============================================================ */ .registro__form { display: flex; flex-direction: column; padding: 80px 24px; background: var(--white); } .form__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 342px; margin: 0 auto; } /* Logo mobile/tablet, arriba de "¡Empezá gratis hoy!". Reemplaza al logo blanco del hero (oculto en esos anchos, ver .hero__logo). Se oculta en desktop, donde el logo vuelve a la card del hero. */ .form__logo { display: block; width: 100px; height: auto; } .form__heading { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; width: 100%; } /* .form__title es
: mismo bug de legacy centrando
directo el elemento. Se fuerza acá para que siga el mismo alineado que
.form__heading (center en mobile, left desde 1024px). */
.form__title {
margin: 0;
font-weight: 500;
font-size: 32px;
line-height: 1.08;
letter-spacing: -0.32px;
text-align: center !important;
}
.form__subtitle {
margin: 0;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: var(--midnight);
text-align: center !important;
}
.form__error-wrap { width: 100%; }
.form__error-wrap .error {
display: block;
color: #d0304a;
font-size: 14px;
text-align: center;
}
.form__error-wrap .error:empty { display: none; }
.form__fields {
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}
.form__group {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
/* ---------- campos ---------- */
.field { position: relative; width: 100%; }
.field__input,
.field__select {
width: 100%;
height: 54px;
padding: 16px 24px;
background: var(--grey-100);
border: none;
border-radius: 12px;
font-family: inherit;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
color: var(--midnight);
}
.field__input::placeholder { color: var(--grey-500); }
.field__input:focus-visible,
.field__select:focus-visible {
outline: 2px solid var(--midnight);
outline-offset: 2px;
}
.field__select {
appearance: none;
-webkit-appearance: none;
color: var(--grey-500);
cursor: pointer;
padding-right: 56px;
background-image: var(--chevron);
background-repeat: no-repeat;
background-position: right 24px center;
}
.field-row { display: flex; gap: 8px; width: 100%; }
/* Contenedor prefijo (solo código, autocompletado por JS de país) */
.phone-container .prefix {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 54px;
padding: 0 16px;
background: var(--grey-100);
border-radius: 12px;
}
/* updatePhonePrefix() (createAccount.js) hace flagIcon.src = ... y
flagIcon.alt = ... en cada cambio de país, sin chequear null: si se borra el
, esa función tira excepción. Se mantiene en el DOM (igual que
#HeaderImagen) y se oculta acá — solo queda el número. */
.phone-container .flag-icon {
display: none;
}
.phone-container #phonePrefix {
/* updatePhonePrefix() (createAccount.js) setea "+549" (AR), " +57" (CO) o
" +52" (MX): hasta 4 caracteres. 34px quedaba corto y cortaba el "9". */
width: 48px;
text-align: center;
font-family: inherit;
font-size: 16px;
font-weight: 500;
color: var(--midnight);
white-space: nowrap;
}
.field--phone { flex: 1 1 auto; min-width: 0; }
/* ---------- términos (checkbox real, texto compacto tipo disclaimer) ---------- */
/* El wrapper NO controla visibilidad: createAccount.js (setOptionsTipoDeCuenta /
setVisibilityMuchasCosas / el script de país en el