/* SIGNUP/LOGIN — Tabs compactos y centrados */
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"]{
  background: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 0 10px 0 !important;
  margin: 0 0 10px 0 !important;
  display:none;
}

/* Tamaño */
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a{
  --authTabH: 38px;         /* alto del botón */
  --authTabPadX: 14px;      /* padding horizontal */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 0 0 auto;
  min-height: var(--authTabH);
  padding: 0 var(--authTabPadX) !important;
  font-size: 14px !important;
  font-weight: 600;
  border-radius: 999px !important;
  border: 2px solid #5d17eb !important;
  background: #fff !important;
  color: #5d17eb !important;
  text-decoration: none !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Quita padding heredado de los <span> internos */
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a > span,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a > span > span{
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Activo (sin hover): morado con texto blanco */
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active{
  background: #5d17eb !important;
  color: #fff !important;
}

/* Hover / foco: fondo VERDE y texto MORADO (aplica a activo e inactivo) */
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a:hover,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a:focus-visible,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active:hover,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active:focus-visible{
  background: #d8f8af !important;   /* verde Futura */
  border-color: #5d17eb !important; /* morado */
  color: #5d17eb !important;
}
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a:hover *,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a:focus-visible *,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active:hover *,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active:focus-visible *{
  color: #5d17eb !important;
  -webkit-text-fill-color: #5d17eb !important; /* Safari */
}

/* Foco visible (outline) */
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a:focus-visible{
  outline: 2px solid #d8f8af !important;
  outline-offset: 2px;
}

/* Quita la rayita inferior del tab activo del componente original */
#login-imagebox-fut [class^="TabNavHorizontal_selectedTabContentDarkSkin__"]{
  border-bottom-color: transparent !important;
}

/* más grande en desktop*/
@media (min-width: 1024px){
  #login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a{
    --authTabH: 40px;
    --authTabPadX: 16px;
    font-size: 15px !important;
  }
}

/* Texto BLANCO en el tab activo cuando NO hay hover */
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active *,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active span,
#login-imagebox-fut nav[class^="TabNavHorizontal_root__"] a.NamedLink_active span span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* Safari */
}

/* CTA morado inferior: texto blanco cuando está habilitado */
#login-imagebox-fut button[class*="Button_primaryButton__"]:not([disabled]),
#login-imagebox-fut a[role="button"][class*="Button_primaryButton__"] {
  color: #fff !important;
}

/* =========================
   LOGIN — mover “¿Olvidaste tu contraseña? Restablecer contraseña”
   debajo del botón, SOLO con CSS (sin JS) y sin parpadeo
   ========================= */

/* El form en columna para poder reordenar */
#login-imagebox-fut form {
  display: flex !important;
  flex-direction: column !important;
}

/* El botón de “Iniciar sesión” primero */
#login-imagebox-fut form > button[type="submit"] {
  order: 20 !important;
  margin-top: 8px;
}

/* El bloque que CONTENGA el enlace de reset va después del botón.
   Descendiente arbitrario dentro del hijo directo del form. */
#login-imagebox-fut form > *:has(
  a[href*="reset"],
  a[href*="password"],
  a[href*="recover"],
  a[href*="forgot"]
) {
  order: 30 !important;
  align-self: center !important;
  display: flex !important;
  gap: 10px;
  margin-top: 10px;
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}

/* Estilo del enlace */
#login-imagebox-fut form a[href*="reset"],
#login-imagebox-fut form a[href*="password"],
#login-imagebox-fut form a[href*="recover"],
#login-imagebox-fut form a[href*="forgot"] {
  color: #5d17eb !important;
  text-decoration: underline;
}

/* --- Botón + “¿Olvidaste…?” dentro del MISMO contenedor: forzar columna --- */
#login-imagebox-fut form > *:has(> button[type="submit"]):has(> :is(a, span, div, p):has(> a[href*="reset"], a[href*="password"], a[href*="recover"], a[href*="forgot"])) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px;
}

/* Botón arriba… */
#login-imagebox-fut form > *:has(> button[type="submit"]) > button[type="submit"] {
  order: 10 !important;
}

/* …y el bloque del enlace abajo y centrado */
#login-imagebox-fut form > *:has(> button[type="submit"]) > :is(a, span, div, p):has(> a[href*="reset"], a[href*="password"], a[href*="recover"], a[href*="forgot"]) {
  order: 20 !important;
  align-self: center !important;
  display: flex !important;
  gap: 10px;
  margin-top: 0 !important; /* el gap ya da aire */
  text-align: center;
}

/* (opcional) que el botón ocupe el ancho del contenedor si lo necesitas */
#login-imagebox-fut form > *:has(> button[type="submit"]) > button[type="submit"] {
  width: 100%;
  max-width: 620px;        /* ajusta a gusto o elimina esta línea */
  align-self: center;      /* centrado si limitas el ancho */
}

/* === Botón + "¿Olvidaste...?" en el MISMO contenedor: forzar a que el enlace baje === */

/* 1) El contenedor que tiene el botón de submit (y el bloque de enlace) debe poder hacer wrap */
#login-imagebox-fut form *:has(> button[type="submit"]) {
  display: flex !important;
  flex-wrap: wrap !important;              /* << permite que el siguiente baje */
  align-items: center;
  gap: 12px;
}

/* 2) El botón primero (arriba) */
#login-imagebox-fut form *:has(> button[type="submit"]) > button[type="submit"] {
  order: 10 !important;
}

/* 3) El bloque de "¿Olvidaste…? / Restablecer…" ocupa toda la línea debajo del botón */
#login-imagebox-fut form *:has(> button[type="submit"])
  > :is(a, span, div, p):has(> a[href*="reset"], a[href*="password"], a[href*="recover"], a[href*="forgot"]) {
  order: 20 !important;
  flex: 0 0 100% !important;               /* << rompe la línea: 100% de ancho */
  display: inline-flex !important;
  justify-content: center !important;      /* centrado */
  gap: 10px !important;
  margin-top: 28px !important;
  text-align: center !important;
}

/* (opcional) Botón ancho controlado y centrado */
#login-imagebox-fut form *:has(> button[type="submit"]) > button[type="submit"] {
  width: 100%;
  max-width: 620px;                         /* ajusta o quita esta línea si no la quieres */
  align-self: center;
}

/* un poco más en desktop */
@media (min-width: 1024px){
  #login-imagebox-fut form > button[type="submit"],
  #login-imagebox-fut form *:has(> button[type="submit"]) > button[type="submit"]{
    margin-top: 52px !important;
  }
}

/* #section-1 [class^="SectionBuilder_sectionDetails__"]{ justify-items:start !important; text-align:left !important; }
#section-1 [class^="SectionBuilder_title__"],
#section-1 [class^="SectionBuilder_description__"]{ text-align:left !important; }
#section-1 [class^="SectionBuilder_ctaButton__"]{ justify-self:start !important; align-self:start !important; margin-left:0 !important; }
 */

 /* Landing hero: alinear TODO a la izquierda sólo en la sección 1 */
#section-1 [class^="SectionBuilder_sectionDetails__"]{
  justify-items: start !important;   /* grid children a la izquierda */
  text-align: left !important;
}

/* Título: algunos builds añaden un align center en el item del grid */
#section-1 [class^="SectionBuilder_title__"],
#section-1 [class*="SectionBuilder_align__"],      /* p.ej. SectionBuilder_align__9b6cT */
#section-1 [class^="Heading_h1__"] {               /* por si el h1 usa Heading_h1__… */
  place-self: start !important;                    /* = align-self + justify-self */
  justify-self: start !important;                  /* redundante pero seguro */
  text-align: left !important;
  margin-left: 0 !important;
}

/* Descripción */
#section-1 [class^="SectionBuilder_description__"]{
  place-self: start !important;
  text-align: left !important;
}

/* Botón CTA */
#section-1 [class^="SectionBuilder_ctaButton__"]{
  place-self: start !important;
  margin-left: 0 !important;
  text-align: center !important;
}