/* El aspecto de /signup/ (signup-rediseno, founder 2026-10-23: el diseño de ChatGPT aprobado,
   docs/signup-rediseno/referencias/signup-chatgpt.png; docs/SIGNUP-REDISENO-DIAGNOSTICO.md, sección 10).
   SOLO ASPECTO: ninguna regla de aquí cambia cómo se crea la cuenta. Todo va con alcance de body.su-registro, para que
   /forgot-password/ y /reset-password/ (que comparten publica.css) no cambien. (login-rediseno, founder 2026-10-25)
   /login/ también lleva body.su-registro: el mismo panel, la misma letra y los mismos campos; lo suyo, con body.su-login,
   al final de este archivo.
   Nada menor de 12 px (11 px solo en micro-etiquetas; aquí no hay ninguna). Los campos a 16 px en el teléfono (el
   iPhone hace zoom con menos). Inter servida desde BookQly (assets/fuentes), nunca de Google. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fuentes/inter-100-900-latin-v20.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* Los colores del diseño que no son tokens: locales a esta página, con el token de siempre de respaldo donde se usan.
   --su-marino es el azul marino del panel (#071633 del diseño). El azul de los botones NO es el #1688F7 del diseño:
   con letra blanca da 3.6:1 (no pasa AA); --su-azul #0A6FD8 da 4.86:1. --su-tinta-suave sobre blanco: 4.83:1.
   --su-azul-tinta sobre --su-azul-suave: 5.1:1. Medidos con tools/auditar_contraste.py. */
.su-registro{--su-marino:#071633; --su-azul:#0A6FD8; --su-azul-claro:#EEF5FE; --su-azul-suave:#DCEAFC; --su-azul-tinta:#0A5FBF;
  --su-tinta-suave:#5B6B82; --su-panel:390px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--white);}
.su-registro button, .su-registro input, .su-registro select{font-family:inherit;}
/* el logo vive en el panel: la cabecera de las páginas públicas no sale (su marcado se queda, lo miden las baterías) */
.su-registro .pub-cab{display:none;}
/* (founder 2026-10-23) la página llena siempre el alto: nada de blanco debajo del pie cuando el paso es corto */
body.su-registro{display:flex; flex-direction:column; min-height:100vh;}
.su-registro .pub-auth{display:block; flex:1 0 auto; min-height:0; background:var(--white);}

/* ---------- el panel azul marino (los tres anchos): la foto bajo un velo marino, el logo y los textos encima */
/* (el selector nombra aside.pub-auth-lado a propósito: así tools/auditar_contraste.py mide los textos del panel contra el
   marino sin tomar por oscuro el .pub-auth-lado claro de /forgot-password/ y /reset-password/) */
.su-registro .pub-auth-lado{position:relative; display:block; overflow:hidden; padding:0; gap:0; border-right:0;}
body.su-registro aside.pub-auth-lado{background:var(--su-marino, var(--navy)); color:var(--white);}
.su-lado-foto{position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center bottom;}
.su-registro .pub-auth-lado::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--su-marino, var(--navy)) 97%, transparent) 0%,
    color-mix(in srgb, var(--su-marino, var(--navy)) 90%, transparent) 42%,
    color-mix(in srgb, var(--su-marino, var(--navy)) 55%, transparent) 72%,
    color-mix(in srgb, var(--su-marino, var(--navy)) 35%, transparent) 100%);}
.su-lado-fijo{position:relative; z-index:2; display:flex; flex-direction:column; height:100%;}
.su-panel-logo{display:inline-flex; align-self:flex-start;}
.su-panel-logo img{display:block; height:34px; width:auto;}
.su-panel-logo:focus-visible{outline:2px solid var(--su-azul, var(--blue-tinta, var(--blue))); outline-offset:4px; border-radius:6px;}
.su-lado-textos{display:flex; flex-direction:column; gap:14px;}
.su-registro aside.pub-auth-lado .su-frase{font-weight:800; line-height:1.08; letter-spacing:-.03em; color:var(--white); max-width:none; margin:0;}
.su-registro aside.pub-auth-lado .su-frase span{color:var(--marca-azul-claro-oscuro, var(--g2));}
.su-registro aside.pub-auth-lado .su-lado-sub{line-height:1.45; color:color-mix(in srgb, var(--white) 88%, transparent); margin:0;}
/* la línea de la prueba (sale de planes.js) con su reloj de línea */
.su-registro aside.pub-auth-lado .su-lado-sub.su-prueba{display:flex; align-items:flex-start; gap:12px; color:var(--white); margin-top:8px;}
.su-registro aside.pub-auth-lado .su-lado-sub.su-prueba[hidden]{display:none;}
.su-prueba::before{content:''; flex:0 0 auto; width:28px; height:28px; margin-top:-3px; background:currentColor;
  -webkit-mask:var(--su-ico-reloj) center / contain no-repeat; mask:var(--su-ico-reloj) center / contain no-repeat;
  --su-ico-reloj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke-dasharray='2.2 2.2'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}

/* ---------- el lado del formulario */
.su-registro .pub-auth-cuerpo{display:block; padding:0;}
.su-registro .auth-form{max-width:none;}
.su-registro .caja-alta{border:0; border-radius:0; padding:0; margin:0; min-width:0;}
/* el indicador de pasos: 1 Tipo de cuenta / 2 Información, según qué paso está a la vista (sin tocar mostrarPaso) */
.su-pasos{display:flex; align-items:center; gap:10px; list-style:none; margin:0 0 26px; padding:0;}
.su-paso{display:flex; align-items:center; gap:8px; flex:0 0 auto; font-size:13px; font-weight:600; color:var(--su-tinta-suave, var(--muted));}
.su-paso-n{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:12px; font-weight:700;
  border:1.5px solid var(--border); color:var(--su-tinta-suave, var(--muted)); background:var(--white);}
.su-paso-t{white-space:nowrap;}
.su-paso-linea{flex:1 1 auto; height:1.5px; background:var(--border); min-width:24px;}
.su-registro .su-paso.su-paso-1 .su-paso-n{background:var(--su-azul, var(--blue-tinta, var(--blue))); border-color:var(--su-azul, var(--blue-tinta, var(--blue))); color:var(--white);}
.su-registro .su-paso.su-paso-1{color:var(--su-azul-tinta, var(--blue-deep));}
.su-registro .pub-auth-cuerpo:has(#paso2:not([hidden])) .su-paso-2 .su-paso-n{background:var(--su-azul, var(--blue-tinta, var(--blue))); border-color:var(--su-azul, var(--blue-tinta, var(--blue))); color:var(--white);}
.su-registro .pub-auth-cuerpo:has(#paso2:not([hidden])) .su-paso.su-paso-2{color:var(--su-azul-tinta, var(--blue-deep));}
/* el paso 1 hecho: su número se cambia por una palomita */
/* (el número se queda, transparente, para que no haya letra de 0 px; la palomita va encima, en blanco) */
.su-registro .pub-auth-cuerpo:has(#paso2:not([hidden])) .su-paso-1 .su-paso-n{position:relative; color:transparent;}
.su-registro .pub-auth-cuerpo:has(#paso2:not([hidden])) .su-paso-1 .su-paso-n::before{content:''; position:absolute; inset:0; margin:auto; width:13px; height:13px; background:var(--white);
  -webkit-mask:var(--su-ico-listo) center / contain no-repeat; mask:var(--su-ico-listo) center / contain no-repeat;
  --su-ico-listo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");}
/* cuando el formulario se cambia por "Revisa tu correo", el indicador ya no dice nada */
.su-registro .pub-auth-cuerpo:not(:has(#paso1)) .su-pasos{display:none;}

.su-registro .pub-auth-cabeza{max-width:none; margin:0 0 2px;}
.su-registro .pub-auth-tit{font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--navy);}
/* el subtítulo y la línea de la prueba no se repiten debajo del título: ya los dice el panel. Vuelve el subtítulo
   cuando el formulario se cambia por "Revisa tu correo" */
.su-registro .pub-auth-cuerpo:has(#paso1) .pub-auth-sub{display:none;}
/* (la frase de antes del subtítulo; sale con él en "Revisa tu correo") */
.su-tarda{display:inline;}
.su-registro .paso-titulo{font-size:14px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--su-tinta-suave, var(--muted)); margin:4px 0 24px;}

/* paso 1: la pregunta, las dos tarjetas, Términos, Google y el correo */
.su-registro .eleccion-tipo-plana{margin:0 0 18px;}
.su-registro .eleccion-tipo-plana .eleccion-titulo{font-size:17px; font-weight:700; color:var(--navy); margin:0 0 4px;}
.su-registro .eleccion-tipo-plana .eleccion-ayuda{font-size:14px; line-height:1.55; color:var(--su-tinta-suave, var(--muted)); margin:0 0 16px;}
/* la tarjeta de cada tipo: el icono en su caja, el texto y el círculo a la derecha. Nace SIN ninguna marcada (la regla
   de siempre); la marcada se pinta de azul. */
.su-registro .eleccion-tipo-plana label{position:relative; display:flex; align-items:center; gap:18px; padding:18px 56px 18px 18px;
  margin:0 0 12px; border:1.5px solid var(--border); border-radius:12px; background:var(--white); cursor:pointer;
  font-size:14px; line-height:1.5; color:var(--su-tinta-suave, var(--muted)); box-shadow:none;}
.su-registro .eleccion-tipo-plana label:hover{border-color:var(--su-azul, var(--blue-tinta, var(--blue)));}
.su-registro .eleccion-tipo-plana label:has(input:checked){border-color:var(--su-azul, var(--blue-tinta, var(--blue))); background:var(--su-azul-claro, var(--bg2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--su-azul, var(--blue-tinta, var(--blue))) 14%, transparent);}
.su-registro .eleccion-tipo-plana label:has(input:focus-visible){outline:3px solid var(--su-azul, var(--blue-tinta, var(--blue))); outline-offset:2px;}
.su-registro .eleccion-tipo-plana label input[type="radio"]{position:absolute; top:50%; right:18px; width:20px; height:20px; margin:-10px 0 0;
  accent-color:var(--su-azul, var(--blue-tinta, var(--blue))); cursor:pointer;}
.su-registro .eleccion-tipo-plana label strong{display:inline-block; font-size:15px; font-weight:700; color:var(--navy); margin-bottom:3px;}
.su-tipo-ico{flex:0 0 52px; width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  background:var(--bg2); color:var(--su-tinta-suave, var(--muted));}
/* los dos iconos, como máscara del color del texto: la tienda (BQ_ICONOS no tiene una) y i-usuarios de assets/app.js */
.su-tipo-ico::before{content:''; width:30px; height:30px; background:currentColor;
  -webkit-mask:var(--su-ico) center / contain no-repeat; mask:var(--su-ico) center / contain no-repeat;}
.su-ico-tienda{--su-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 5.2 4.5h13.6L20 9.5'/%3E%3Cpath d='M4 9.5a2.67 2.67 0 0 0 5.33 0 2.67 2.67 0 0 0 5.34 0 2.67 2.67 0 0 0 5.33 0'/%3E%3Cpath d='M5.5 11.8V20h13v-8.2'/%3E%3Cpath d='M10 20v-4.5h4V20'/%3E%3C/svg%3E");}
.su-ico-firma{--su-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.6a6.4 6.4 0 0 1 3.5 5.4'/%3E%3C/svg%3E");}
.su-registro .eleccion-tipo-plana label:has(input:checked) .su-tipo-ico{background:var(--su-azul-suave, var(--bg2)); color:var(--su-azul-tinta, var(--blue-deep));}
/* la casilla de Términos: la misma, sin marcar */
.su-registro .consentimiento{gap:12px; margin:6px 0 20px; font-size:14px; line-height:1.55; color:var(--su-tinta-suave, var(--muted));}
.su-registro .consentimiento input[type="checkbox"]{width:20px; height:20px; margin:1px 0 0; accent-color:var(--su-azul, var(--blue-tinta, var(--blue)));}
.su-registro .consentimiento a{color:var(--su-azul, var(--blue-tinta, var(--blue))); text-decoration:underline; text-underline-offset:2px;}
/* (carga-estable) "cierra la sesión" del aviso de sesion abierta: un boton que se lee como el enlace de al lado */
.su-enlace{background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.su-enlace:disabled{cursor:progress; opacity:.7;}
/* los dos caminos: Google en blanco y el correo en azul, con su flecha */
.su-registro .btn-google{min-height:48px; border-radius:10px; font-size:15px; font-weight:700; color:var(--navy); gap:12px;}
.su-registro .btn-google svg{width:20px; height:20px;}
.su-registro .su-correo{width:100%; min-height:48px; margin-top:12px; border-radius:10px; font-size:15px; gap:10px;
  background:var(--su-azul, var(--blue-tinta, var(--blue))); border-color:var(--su-azul, var(--blue-tinta, var(--blue))); box-shadow:none;}
.su-flecha{width:18px; height:18px; background:currentColor;
  -webkit-mask:var(--su-ico-flecha) center / contain no-repeat; mask:var(--su-ico-flecha) center / contain no-repeat;
  --su-ico-flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");}
.su-registro .auth-footer{font-size:14px; margin-top:22px; text-align:center; color:var(--su-tinta-suave, var(--muted));}
.su-registro .auth-footer a{color:var(--su-azul, var(--blue-tinta, var(--blue))); font-weight:600;}

/* paso 2: cada grupo en su tarjeta */
.su-paso2{display:flex; flex-direction:column; gap:14px;}
.su-tarjeta{border:1px solid var(--border); border-radius:12px; background:var(--white); padding:16px 18px 2px; min-width:0;}
.su-registro .su-tarjeta .pub-grupo{font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--navy);
  margin:0 0 10px; padding:0; border:0;}
/* País y Código postal, uno al lado del otro */
.su-t-dir{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:12px;}
.su-t-dir > *{grid-column:1 / -1;}
.su-t-dir > .field:has(#country), .su-t-dir > .field:has(#zip){grid-column:auto;}
.su-registro .field{margin-bottom:14px;}
.su-registro .field label{font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:5px;}
.su-registro .field input, .su-registro .field select{font-size:14px; padding:9px 12px; border-radius:8px; min-height:40px;}
.su-registro .field input:focus, .su-registro .field select:focus{border-color:var(--su-azul, var(--blue-tinta, var(--blue)));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--su-azul, var(--blue-tinta, var(--blue))) 18%, transparent);}
.su-registro .field-hint{font-size:12px;}
.su-registro .requisitos-clave{font-size:12.5px;}
/* la cola: la nota de impuestos, Turnstile y los botones */
.su-cola{display:flex; flex-direction:column; gap:14px; min-width:0;}
.su-registro .su-nota-imp{display:flex; gap:12px; margin:0; padding:14px 16px; border-radius:12px; font-size:13px; line-height:1.55;
  background:var(--su-azul-claro, var(--bg2)); color:var(--su-azul-tinta, var(--blue-deep));}
.su-nota-imp::before{content:''; flex:0 0 auto; width:20px; height:20px; background:currentColor;
  -webkit-mask:var(--su-ico-info) center / contain no-repeat; mask:var(--su-ico-info) center / contain no-repeat;
  --su-ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E");}
/* Turnstile: el widget REAL (Managed + interaction-only), en su sitio entre la nota y los botones; .bq-captcha de
   styles.css lo centra. Solo se ve si Cloudflare pide pulsar la casilla; vacío no ocupa nada. */
.su-registro #captchaSignup:empty{display:none;}
.su-registro #captchaSignup{max-width:100%; overflow:visible;}
.su-botones{display:flex; gap:12px;}
.su-registro #paso2 .su-botones .btn{min-height:48px; border-radius:10px; font-size:15px;}
.su-registro #btnVolver{flex:0 0 auto; padding-left:20px; padding-right:20px;}
.su-registro #btnSubmit{flex:1 1 auto; background:var(--su-azul, var(--blue-tinta, var(--blue))); border-color:var(--su-azul, var(--blue-tinta, var(--blue))); box-shadow:none;}

/* ---------- computadora y tableta (más de 600 px): el panel FIJO a la izquierda, de alto completo */
@media (min-width:601px){
  .su-registro{padding-left:var(--su-panel);}
  .su-registro .pub-auth-lado{position:fixed; top:0; bottom:0; left:0; z-index:5; width:var(--su-panel); height:100vh; height:100dvh;}
  .su-lado-fijo{padding:40px 40px 32px;}
  .su-lado-textos{margin-top:56px;}
  .su-registro aside.pub-auth-lado .su-frase{font-size:36px;}
  .su-registro aside.pub-auth-lado .su-lado-sub{font-size:18px;}
  .su-registro aside.pub-auth-lado .su-lado-sub.su-prueba{font-size:15px;}
  .su-registro .pub-auth-cuerpo{padding:36px 56px 48px;}
  .su-registro .pub-auth-cuerpo > *{max-width:640px;}
  .su-registro .pub-auth-cuerpo:has(#paso2:not([hidden])) > *{max-width:920px;}
}

/* ---------- computadora: el paso 2 en dos columnas, sin huecos entre tarjetas
   (izquierda: Tú, Tu negocio y Acceso; derecha: Dirección, y la nota, Turnstile y los botones). Las tarjetas se estiran
   con su fila, así que se tocan siempre a la misma distancia; la nota crece para que la cola llegue al fondo. */
@media (min-width:901px){
  .su-paso2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"tu dir" "neg dir" "acc cola"; gap:14px 16px;}
  .su-t-tu{grid-area:tu;} .su-t-negocio{grid-area:neg;} .su-t-dir{grid-area:dir; align-content:start;}
  .su-t-acceso{grid-area:acc;} .su-cola{grid-area:cola;}
  /* (founder 2026-10-23) la nota mide solo su contenido: Turnstile y los botones van justo debajo, sin un bloque azul vacío */
  .su-registro .su-nota-imp{flex:none;}
}

/* ---------- tableta (601 a 900 px): el panel de 265 px, el formulario en una columna */
@media (min-width:601px) and (max-width:900px){
  .su-registro{--su-panel:265px;}
  .su-lado-fijo{padding:32px 26px 28px;}
  .su-lado-textos{margin-top:44px; gap:12px;}
  .su-panel-logo img{height:28px;}
  .su-registro aside.pub-auth-lado .su-frase{font-size:27px;}
  .su-registro aside.pub-auth-lado .su-lado-sub{font-size:15px;}
  .su-registro aside.pub-auth-lado .su-lado-sub.su-prueba{font-size:13px; gap:10px;}
  .su-prueba::before{width:24px; height:24px;}
  .su-registro .pub-auth-cuerpo{padding:28px 28px 40px;}
}

/* ---------- teléfono (hasta 600 px): el panel es una franja arriba (sin menú), el formulario a lo ancho */
@media (max-width:600px){
  .su-registro .pub-auth-lado{min-height:228px;}
  .su-lado-fijo{padding:20px 16px 22px;}
  .su-lado-textos{margin-top:22px; gap:8px;}
  .su-panel-logo img{height:26px;}
  .su-registro aside.pub-auth-lado .su-frase{font-size:22px; line-height:1.15;}
  .su-registro aside.pub-auth-lado .su-frase br{display:none;}
  .su-registro aside.pub-auth-lado .su-lado-sub{font-size:14px;}
  .su-registro aside.pub-auth-lado .su-lado-sub.su-prueba{font-size:13px; gap:8px; margin-top:4px; align-items:center;}
  .su-prueba::before{width:20px; height:20px; margin-top:0;}
  .su-registro .pub-auth-cuerpo{padding:22px 16px 32px;}
  .su-pasos{margin-bottom:20px;}
  .su-registro .pub-auth-tit{font-size:24px;}
  .su-registro .paso-titulo{font-size:13px; margin-bottom:18px;}
  .su-registro .eleccion-tipo-plana .eleccion-titulo{font-size:16px;}
  .su-registro .eleccion-tipo-plana .eleccion-ayuda{font-size:13.5px;}
  .su-registro .eleccion-tipo-plana label{padding:14px 46px 14px 14px; gap:14px; font-size:13.5px;}
  .su-registro .eleccion-tipo-plana label input[type="radio"]{right:14px;}
  .su-tipo-ico{flex-basis:46px; width:46px; height:46px;}
  .su-tipo-ico::before{width:26px; height:26px;}
  .su-registro .consentimiento{font-size:13.5px;}
  .su-tarjeta{padding:14px 14px 2px;}
  /* País y Código postal, uno debajo del otro: a 16 px "Estados Unidos" no cabe en media fila junto a la flecha */
  .su-t-dir > .field:has(#country), .su-t-dir > .field:has(#zip){grid-column:1 / -1;}
  /* los campos a 16 px: con menos, el iPhone acerca la página al enfocarlos */
  .su-registro .field label{font-size:13px;}
  .su-registro .field input, .su-registro .field select{font-size:16px; padding:11px 12px; min-height:46px;}
  .su-registro #paso2 .su-botones .btn{min-height:50px;}
}

/* ---------- /login/ (login-rediseno, founder 2026-10-25): lo mismo de arriba y, solo aquí, lo de un formulario corto.
   El formulario de siempre (Google, "o con tu correo", correo, contraseña, "¿Olvidaste tu contraseña?", el aviso, las dos
   cajas, Turnstile, "Iniciar sesión" y "¿No tienes cuenta?"); el del código de dos pasos, si está, usa las mismas clases. */
.su-login .divider{font-size:13px; color:var(--su-tinta-suave, var(--muted)); margin:18px 0;}
/* "Iniciar sesión" (y "Verificar" del código de dos pasos) en el azul del botón del correo de /signup/ */
.su-login .auth-form .btn-primary{min-height:48px; border-radius:10px; font-size:15px;
  background:var(--su-azul, var(--blue-tinta, var(--blue))); border-color:var(--su-azul, var(--blue-tinta, var(--blue))); box-shadow:none;}
.su-login .pub-auth-sub{font-size:14px; color:var(--su-tinta-suave, var(--muted)); margin:6px 0 24px;}
.su-login #captchaLogin:empty{display:none;}
/* (founder 2026-10-25) el aviso ("Correo o contraseña incorrectos.") con aire encima del botón, sin pegarse a él */
.su-login #authMsg{margin:10px 0 20px;}
.su-login #captchaLogin{max-width:100%; overflow:visible;}
@media (min-width:601px){
  /* el formulario, en el centro del alto que queda junto al panel */
  .su-login .pub-auth{display:flex; flex-direction:column; justify-content:center;}
  .su-login .pub-auth-cuerpo > *{max-width:440px;}
  .su-login .pub-auth-cuerpo{padding-top:48px; padding-bottom:48px;}
}
@media (max-width:600px){
  .su-login .pub-auth-sub{font-size:13.5px; margin-bottom:20px;}
}