/* ============================================================
   SITW — Auth experience (login / registro)
   Pantalla inmersiva split-screen: marca + formulario.
   Conserva los IDs/JS existentes; solo re-estiliza y re-estructura.
   ============================================================ */

:root{
  --auth-bg:#06060a;
  --auth-cyan:#00f5ff;
  --auth-purple:#7b2fff;
  --auth-violet:#9b30ff;
  --auth-ink:#ffffff;
  --auth-mut:rgba(255,255,255,.55);
  --auth-mut-2:rgba(255,255,255,.32);
  --auth-line:rgba(255,255,255,.08);
}

/* ── Pantalla completa que cubre header/footer del tema ── */
.sitw-auth-screen{
  position:fixed; inset:0; z-index:9990;
  background:var(--auth-bg);
  overflow-y:auto; overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Fondo: gradientes profundos + grilla + orbes + estrellas ── */
.sitw-auth-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.sitw-auth-bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(123,47,255,.30), transparent 60%),
    radial-gradient(55% 50% at 88% 88%, rgba(0,245,255,.16), transparent 60%),
    radial-gradient(40% 40% at 50% 50%, rgba(155,48,255,.08), transparent 70%);
}
.sitw-auth-bg::after{ /* grilla técnica sutil */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
          mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}
.sitw-auth-stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 55% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 72% 45%, rgba(0,245,255,.9), transparent),
    radial-gradient(1px 1px at 84% 72%, #fff, transparent),
    radial-gradient(1px 1px at 46% 86%, rgba(155,48,255,.9), transparent),
    radial-gradient(1px 1px at 92% 28%, #fff, transparent),
    radial-gradient(1px 1px at 22% 48%, rgba(255,255,255,.7), transparent);
  animation:sitw-auth-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes sitw-auth-twinkle{ from{opacity:.45} to{opacity:1} }
.sitw-auth-orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.6; animation:sitw-auth-float 16s ease-in-out infinite;}
.sitw-auth-orb-1{width:320px; height:320px; left:-60px; top:8%;  background:radial-gradient(circle,#7b2fff,transparent 70%);}
.sitw-auth-orb-2{width:380px; height:380px; right:-80px; bottom:-40px; background:radial-gradient(circle,#00f5ff,transparent 70%); opacity:.4; animation-delay:-6s;}
@keyframes sitw-auth-float{ 0%,100%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-26px) translateX(14px)} }

/* ── Grid principal ── */
.sitw-auth-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 1fr;
  min-height:100%;
}

/* ── Panel de marca (izquierda) ── */
.sitw-auth-brand{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px clamp(40px,5vw,80px);
  border-right:1px solid var(--auth-line);
  position:relative;
}
.sitw-auth-logo{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff; font-weight:800; letter-spacing:.14em; font-size:15px;
}
.sitw-auth-logo img{height:26px; width:auto; max-width:230px; object-fit:contain; filter:drop-shadow(0 0 14px rgba(123,47,255,.5));}
.sitw-auth-brand-body{max-width:30ch; margin:auto 0;}
.sitw-auth-sys{
  display:inline-flex; align-items:center; gap:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.28em;
  color:var(--auth-cyan); text-transform:uppercase; margin-bottom:22px;
}
.sitw-auth-sys::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--auth-cyan); box-shadow:0 0 10px var(--auth-cyan); animation:sitw-auth-blink 1.4s steps(1) infinite;}
@keyframes sitw-auth-blink{50%{opacity:.25}}
.sitw-auth-brand-title{
  font-size:clamp(30px,3.4vw,50px); line-height:1.04; font-weight:800; letter-spacing:-.02em;
  color:#fff; margin:0 0 26px;
}
.sitw-auth-brand-title span{
  background:linear-gradient(100deg,#fff 0%,#e7dbff 26%,#9b30ff 50%,#00f5ff 74%,#fff 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:sitw-auth-sheen 7s linear infinite;
}
@keyframes sitw-auth-sheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.sitw-auth-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.sitw-auth-points li{display:flex; align-items:flex-start; gap:12px; color:var(--auth-mut); font-size:14.5px; line-height:1.5;}
.sitw-auth-points li strong{color:#fff; font-weight:600;}
.sitw-auth-check{
  flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(0,245,255,.10); border:1px solid rgba(0,245,255,.35); color:var(--auth-cyan);
}
.sitw-auth-brand-foot{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.12em;
  color:var(--auth-mut-2);
}
.sitw-auth-brand-foot b{color:var(--auth-cyan); font-weight:600;}

/* ── Panel del formulario (derecha) ── */
.sitw-auth-panel{
  display:flex; align-items:center; justify-content:center;
  padding:48px clamp(22px,4vw,64px);
}
.sitw-auth-card{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border:1px solid var(--auth-line);
  border-radius:18px;
  padding:clamp(28px,3vw,40px);
  position:relative;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  animation:sitw-auth-rise .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sitw-auth-rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
/* borde superior con glow degradado */
.sitw-auth-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--auth-purple), var(--auth-cyan), transparent);
  opacity:.8;
}

/* ── Tipografía del formulario ── */
.sitw-auth-card .sitw-sys-label{
  display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px; letter-spacing:.26em; color:var(--auth-cyan); text-transform:uppercase; margin-bottom:14px;
}
.sitw-auth-card .sitw-auth-title{
  font-size:clamp(24px,2.4vw,30px); line-height:1.12; font-weight:800; letter-spacing:-.01em;
  color:#fff; margin:0 0 8px; font-family:inherit;
}
.sitw-auth-card .sitw-highlight{
  background:linear-gradient(100deg,#fff,#c9b3ff 40%,#00f5ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.sitw-auth-card .sitw-auth-sub{color:var(--auth-mut); font-size:14px; line-height:1.55; margin:0 0 24px;}

/* ── Campos ── */
.sitw-auth-card .sitw-field-group{margin-bottom:18px;}
.sitw-auth-card .sitw-label{
  display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px; letter-spacing:.18em; color:var(--auth-mut); margin-bottom:8px; text-transform:uppercase;
}
.sitw-auth-card .sitw-input{
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.04);
  border:1px solid var(--auth-line); border-radius:12px;
  padding:14px 16px; color:#fff; font-size:15px; line-height:1.3;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.sitw-auth-card .sitw-input::placeholder{color:rgba(255,255,255,.28); font-size:14px;}
.sitw-auth-card .sitw-input:focus{
  outline:none; background:rgba(255,255,255,.06);
  border-color:rgba(0,245,255,.55);
  box-shadow:0 0 0 4px rgba(0,245,255,.12), 0 0 24px -6px rgba(0,245,255,.4);
}
.sitw-auth-card .sitw-input.is-error{border-color:var(--auth-violet); box-shadow:0 0 0 4px rgba(155,48,255,.15);}
.sitw-auth-card .sitw-select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300f5ff' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;}
.sitw-auth-card .sitw-select option{background:#0d0d14; color:#fff;}
.sitw-auth-card .sitw-input-wrap{position:relative;}
.sitw-auth-card .sitw-toggle-pass{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--auth-mut); cursor:pointer; padding:6px; display:grid; place-items:center;
  transition:color .2s;
}
.sitw-auth-card .sitw-toggle-pass:hover{color:var(--auth-cyan);}

/* ── Botones ── */
.sitw-auth-card .sitw-btn-primary{
  position:relative; overflow:hidden; width:100%; cursor:pointer;
  border:none; border-radius:12px; padding:15px 20px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:linear-gradient(100deg,#7b2fff,#9b30ff 45%,#c04bff);
  box-shadow:0 12px 30px -10px rgba(123,47,255,.7);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.sitw-auth-card .sitw-btn-primary::after{ /* shimmer */
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-18deg); transition:left .6s;
}
.sitw-auth-card .sitw-btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(0,200,255,.6); filter:saturate(1.15);}
.sitw-auth-card .sitw-btn-primary:hover::after{left:130%;}
.sitw-auth-card .sitw-btn-primary:disabled,.sitw-auth-card .sitw-btn-primary.is-loading{opacity:.7; cursor:wait; transform:none;}
.sitw-auth-card .sitw-btn-secondary{
  width:100%; cursor:pointer; border-radius:12px; padding:14px 18px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.05); border:1px solid var(--auth-line); transition:background .2s, border-color .2s;
}
.sitw-auth-card .sitw-btn-secondary:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2);}

/* ── Footer / links ── */
.sitw-auth-card .sitw-auth-footer{text-align:center; font-size:13px; color:var(--auth-mut); margin:22px 0 0;}
.sitw-auth-card .sitw-link{color:var(--auth-cyan); text-decoration:none; font-weight:700; letter-spacing:.04em;}
.sitw-auth-card .sitw-link:hover{text-decoration:none;color:#e9d9ff;}

/* ── Mensajes ── */
.sitw-auth-card .sitw-form-msg{border-radius:10px; padding:12px 14px; font-size:13px; margin-bottom:18px; line-height:1.45;}
.sitw-auth-card .sitw-msg-error{background:rgba(155,48,255,.12); border:1px solid rgba(155,48,255,.4); color:#e9d9ff;}
.sitw-auth-card .sitw-msg-success{background:rgba(0,255,136,.10); border:1px solid rgba(0,255,136,.4); color:#c8ffe6;}

/* ── Responsive ── */
@media (max-width:920px){
  .sitw-auth-grid{grid-template-columns:1fr;}
  .sitw-auth-brand{
    border-right:none; border-bottom:1px solid var(--auth-line);
    padding:28px 28px 22px; flex-direction:row; align-items:center; justify-content:space-between; gap:16px;
  }
  .sitw-auth-brand-body{display:none;}
  .sitw-auth-brand-foot{display:none;}
  .sitw-auth-panel{padding:32px 20px 56px; align-items:flex-start;}
  .sitw-auth-card{margin:0 auto;}
}
@media (max-width:420px){
  .sitw-auth-logo span{font-size:13px;}
  .sitw-auth-card{padding:24px 20px;}
}

/* ── Accesibilidad: menos movimiento ── */
@media (prefers-reduced-motion: reduce){
  .sitw-auth-stars,.sitw-auth-orb,.sitw-auth-brand-title span,.sitw-auth-card,.sitw-auth-sys::before{animation:none !important;}
}

/* ══════════════════════════════════════════════════════════════════════════
   SOBRIEDAD — login y registro, 2026-08-07
   ══════════════════════════════════════════════════════════════════════════
   Mismo criterio que el área de cuenta: Inter, mayúscula inicial, sin
   letter-spacing de consola. La estructura —marca a la izquierda, formulario a
   la derecha— se mantiene: funciona y da contexto mientras la persona escribe.

   Lo que se fue del HTML: las etiquetas `SYS://ACCESO_SEGURO` y `SYS:AUTH ·
   LOGIN`, y la línea `STATUS: ONLINE · conexión cifrada`. Esa última no
   informaba nada real, y utilería de seguridad falsa en la pantalla donde se
   piden credenciales resta confianza en vez de sumarla.
   ══════════════════════════════════════════════════════════════════════════ */

.sitw-auth-screen {
    --auth-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-family: var(--auth-font);
}

/* ── Panel de marca ── */
.sitw-auth-logo { font-weight: 600; letter-spacing: .02em; }
.sitw-auth-brand-body { max-width: 34ch; }
.sitw-auth-brand-title {
    font-family: var(--auth-font);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.12;
    margin-bottom: 30px;
}
/* El degradado del título de marca se queda: es el único momento de color de
   la pantalla y ahí sí construye identidad. */

.sitw-auth-points li { font-size: 14px; line-height: 1.6; }

/* ── Formulario ── */
.sitw-auth-card .sitw-auth-title {
    font-family: var(--auth-font);
    font-size: clamp(23px, 2.2vw, 28px);
    font-weight: 600;
    letter-spacing: -.02em;
    text-transform: none;
    margin-bottom: 10px;
}
/* Antes el fragmento resaltado del título llevaba un degradado de tres colores
   con background-clip. Un color plano dice lo mismo sin gritar. */
.sitw-auth-card .sitw-highlight {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--auth-cyan);
}
.sitw-auth-card .sitw-auth-sub {
    font-family: var(--auth-font);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0;
}

.sitw-auth-card .sitw-label {
    font-family: var(--auth-font);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255,255,255,.62);
    margin-bottom: 7px;
}
.sitw-auth-card .sitw-input {
    font-family: var(--auth-font);
    border-radius: 10px;
}
.sitw-auth-card .sitw-input::placeholder { font-size: 14px; }

.sitw-auth-step {
    font-family: var(--auth-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255,255,255,.42);
}

/* ── Botones: sin mayúsculas forzadas, sin brillo que barre la superficie ── */
.sitw-auth-card .sitw-btn-primary {
    font-family: var(--auth-font);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 999px;
    padding: 14px 20px;
    background: linear-gradient(100deg, #7b2fff, #9b30ff);
    box-shadow: 0 10px 26px -12px rgba(123,47,255,.6);
}
.sitw-auth-card .sitw-btn-primary::after { display: none; }   /* el shimmer */
.sitw-auth-card .sitw-btn-primary:hover {
    transform: none;
    filter: brightness(1.08);
    box-shadow: 0 12px 30px -12px rgba(123,47,255,.7);
}
.sitw-auth-card .sitw-btn-secondary {
    font-family: var(--auth-font);
    font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
    border-radius: 999px; padding: 13px 18px;
}

/* ── Pie del formulario ── */
.sitw-auth-card .sitw-auth-footer { font-family: var(--auth-font); font-size: 13.5px; }
.sitw-auth-card .sitw-link { font-weight: 500; letter-spacing: 0; }

/* "¿Olvidaste tu contraseña?" estaba a 10px con 45% de opacidad: era el enlace
   más difícil de ver de la pantalla, y es justo la salida de quien no puede
   entrar. Ahora se lee, sin competir con el botón principal. */
.sitw-auth-card .sitw-auth-forgot {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,.5);
}
.sitw-auth-card .sitw-auth-forgot:hover { color: var(--auth-cyan); }
.sitw-auth-card .sitw-auth-pct { color: var(--auth-cyan); font-weight: 500; }

/* Astra inyecta `height:40px` inline en inputs y selects. Con el padding de
   14px el texto del select quedaba cortado por abajo: se leía "Elegí tu rubro"
   con la mitad inferior comida. Ya pasó antes en los formularios de /unirse/. */
.sitw-auth-card .sitw-input,
.sitw-auth-card .sitw-select,
.sitw-auth-card select.sitw-input { height: auto; min-height: 50px; }
.sitw-auth-card .sitw-select { line-height: 1.4; }

/* El "(opcional)" del label */
.sitw-auth-card .sitw-optional {
    font-weight: 400; font-size: 12px; color: rgba(255,255,255,.35); letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEGUNDA PASADA — fondo, logo y escala
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fondo ──────────────────────────────────────────────────────────────
   Tenía cuatro capas de decoración a la vez: dos orbes saturados de 320 y
   380px con blur, ocho estrellas titilando en bucle, una grilla técnica y
   tres gradientes radiales. Mucho ruido para una pantalla donde la única
   tarea es escribir dos campos.

   Queda un solo gradiente frío, muy bajo, que da profundidad sin competir. */

.sitw-auth-bg::before {
    background:
        radial-gradient(70% 60% at 15% 0%,  rgba(123,47,255,.13), transparent 62%),
        radial-gradient(60% 55% at 95% 100%, rgba(0,120,180,.10), transparent 62%);
}
.sitw-auth-bg::after  { display: none; }   /* la grilla técnica */
.sitw-auth-stars      { display: none; }   /* las estrellas titilando */
.sitw-auth-orb        { display: none; }   /* los dos orbes */

.sitw-auth-screen { background: #08080d; }

/* La línea que separa marca de formulario: era casi invisible. */
.sitw-auth-brand { border-right-color: rgba(255,255,255,.06); }

/* ── Logo ───────────────────────────────────────────────────────────────
   Estaba a 26px con un resplandor violeta de 14px encima. El PNG es de
   2006x183 —casi 11:1— así que a 26px de alto el texto queda diminuto, y el
   glow lo emborronaba todavía más. Más grande y sin brillo. */
.sitw-auth-logo img {
    height: 40px;
    max-width: 300px;
    filter: none;
    opacity: .95;
}

/* ── Escala del panel de marca ──────────────────────────────────────────
   El título estaba en el mismo cuerpo que el del formulario, así que los dos
   lados competían. La izquierda es el mensaje; la derecha, la tarea. */
/* El límite angosto va SÓLO en el título. Ponerlo en el contenedor apretaba
   también los puntos de abajo y partía las palabras a la mitad. */
.sitw-auth-brand-body { max-width: 44ch; margin: auto 0; }
.sitw-auth-brand-title {
    font-size: clamp(38px, 4.6vw, 62px);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.06;
    margin-bottom: 34px;
    max-width: 12ch;
    overflow-wrap: normal;
    hyphens: none;
}
.sitw-auth-points { max-width: 40ch; }
.sitw-auth-points li { font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.sitw-auth-points li:last-child { margin-bottom: 0; }

/* ── Pie de la izquierda ────────────────────────────────────────────────
   Al sacar el "STATUS: ONLINE" quedó un hueco: el panel usa
   justify-content:space-between y sin tercer bloque el espacio se repartía
   entre logo y texto. Un enlace de salida es lo que hacía falta ahí —mucha
   gente llega a login sin querer y necesita volver. */
.sitw-auth-back {
    display: inline-flex; align-items: center; gap: 9px;
    text-decoration: none;
    font-size: 13.5px; font-weight: 400;
    color: rgba(255,255,255,.42);
    transition: color .2s;
}
.sitw-auth-back:hover { color: rgba(255,255,255,.8); }
.sitw-auth-back svg { opacity: .7; }

/* ── Tarjeta del formulario ─────────────────────────────────────────────
   Un poco más de aire y un borde menos marcado, para que el peso visual
   quede en el contenido y no en la caja. */
.sitw-auth-card {
    padding: clamp(28px, 3vw, 40px);
    border-color: rgba(255,255,255,.07);
    background: rgba(255,255,255,.022);
}

@media (max-width: 900px) {
    /* En mobile el panel de marca se reduce al logo: el título grande y los
       puntos empujarían el formulario abajo del pliegue. */
    .sitw-auth-brand-title, .sitw-auth-points { display: none; }
    .sitw-auth-back { font-size: 13px; }
    .sitw-auth-logo img { height: 32px; }
}

/* El enlace de vuelta salía subrayado —Astra subraya todo <a> del contenido con
   (0,2,1)— y quedaba justo encima del botón flotante del asesor, abajo a la
   izquierda. Tres clases para ganarle, y espacio para no chocar. */
.sitw-auth-screen .sitw-auth-brand .sitw-auth-back,
.sitw-auth-screen .sitw-auth-brand .sitw-auth-back:hover { text-decoration: none; }
.sitw-auth-brand { padding-bottom: 40px; }
.sitw-auth-back { margin-left: 62px; }

/* El degradado del título de marca iba de blanco a lavanda a violeta saturado.
   Un solo acento, más bajo, dice lo mismo sin gritar. */
.sitw-auth-brand-title span {
    background: linear-gradient(100deg, #cbb6ff, #9b7bff 60%, #7b5cff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

@media (max-width: 900px) { .sitw-auth-back { margin-left: 0; } }

/* Los enlaces de la tarjeta seguían subrayados por la misma regla de Astra. */
.sitw-auth-screen .sitw-auth-card .sitw-link,
.sitw-auth-screen .sitw-auth-card .sitw-link:hover,
.sitw-auth-screen .sitw-auth-card .sitw-auth-forgot,
.sitw-auth-screen .sitw-auth-card .sitw-auth-forgot:hover { text-decoration: none; }

/* ── Mobile: por qué se desbordaba ──────────────────────────────────────
   Medido: el grid resolvía UNA columna de 433px dentro de un viewport de 375.
   Una columna `1fr` es en realidad `minmax(auto, 1fr)`, y ese `auto` nunca baja
   del min-content de su contenido. El min-content acá lo fijaba el logo: el PNG
   es 11:1, así que a 40px de alto mide 438px de ancho natural, y con el enlace
   "Volver al sitio" al lado en la misma fila, la columna no podía achicarse.

   `min-width: 0` en los hijos del grid es lo que rompe ese piso. Sin eso,
   cualquier elemento ancho adentro empuja la página entera. */
@media (max-width: 900px) {
    .sitw-auth-grid > * { min-width: 0; }

    .sitw-auth-brand {
        flex-direction: row; align-items: center; justify-content: space-between;
        gap: 14px; flex-wrap: wrap;
        padding: 18px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .sitw-auth-logo img { height: 26px; max-width: 190px; }
    .sitw-auth-back { font-size: 12.5px; white-space: nowrap; margin-left: 0; }

    .sitw-auth-panel { padding: 0 16px 40px; }
    .sitw-auth-card  { padding: 26px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IMÁGENES DE FONDO DE LOS DOS PANELES
   ══════════════════════════════════════════════════════════════════════════
   Archivos: assets/images/auth-izquierda.webp y auth-derecha.webp

   Si los archivos no existen todavía, no pasa nada: el background simplemente
   no carga y las pantallas quedan como están. No hace falta ningún guard.

   Van en un ::before y no en el `background` del panel porque necesitan su
   propio opacity y su propio z-index, por debajo del contenido. */

.sitw-auth-brand,
.sitw-auth-panel { position: relative; isolation: isolate; }

.sitw-auth-brand::before,
.sitw-auth-panel::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    /* Las dos piezas tienen el nodo del tejido arriba: anclando el fondo
       arriba, ese punto no se pierde cuando la ventana es baja. */
    background-position: center top;
}

.sitw-auth-brand::before { background-image: url('../images/auth-izquierda.webp'); }
.sitw-auth-panel::before { background-image: url('../images/auth-derecha.webp'); }

/* ── Velo sobre la izquierda ────────────────────────────────────────────
   Las dos piezas están compuestas para que las telarañas converjan en el
   divisor central: la de la izquierda tiene su nodo al 79% del ancho y la de
   la derecha al 18%. Medido sobre los PNG buscando el píxel más brillante.

   Eso resuelve solo el problema que me preocupaba: el texto vive en el tercio
   izquierdo, que en esa imagen es zona vacía. No hace falta taparlo. Alcanza
   un velo parejo y bajo para que las hebras no compitan con la lectura. */
.sitw-auth-brand::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg,
        rgba(8,8,13,.72) 0%,
        rgba(8,8,13,.52) 42%,
        rgba(8,8,13,.42) 100%);
    pointer-events: none;
}

/* Sobre la derecha alcanza con un velo parejo y más suave: la tarjeta ya
   tiene fondo propio y sólo hay que bajarle el ruido a lo que la rodea. */
.sitw-auth-panel::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: rgba(8,8,13,.5);
    pointer-events: none;
}

/* La tarjeta pasa a opaca: sobre una imagen, un fondo al 2% deja ver el
   tejido a través de los campos y molesta al leer. */
.sitw-auth-card {
    background: rgba(13,13,20,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
    /* En mobile el panel de marca es una barra de 140-250px: una imagen ahí
       se ve como una franja que no dice nada. Queda sólo la de la derecha. */
    .sitw-auth-brand::before,
    .sitw-auth-brand::after { display: none; }
    .sitw-auth-panel::after { background: rgba(8,8,13,.68); }
}

/* Con las imágenes montadas, el borde del divisor marca una costura vertical
   justo donde las dos telarañas se encuentran: se ve el corte. Las imágenes ya
   separan los dos lados solas. */
.sitw-auth-brand { border-right: none; }

/* Un poco más de velo en la mitad derecha del panel izquierdo, que es donde
   está el nodo, para que no compita con la tarjeta que tiene al lado. */
.sitw-auth-brand::after {
    background: linear-gradient(100deg,
        rgba(8,8,13,.74) 0%,
        rgba(8,8,13,.54) 40%,
        rgba(8,8,13,.5) 100%);
}

/* En mobile el panel es mucho más angosto que la imagen (0,54:1 contra 0,89:1),
   así que `cover` recorta a los costados y deja ver sólo la franja central —
   que es justo la zona vacía. Se veía como si la imagen no hubiera cargado.
   Anclando a la izquierda entra el nodo, que está al 18% del ancho. */
@media (max-width: 900px) {
    .sitw-auth-panel::before { background-position: left top; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EL ENCUENTRO DE LAS DOS REDES
   ══════════════════════════════════════════════════════════════════════════
   Los dos nodos convergen en el divisor y las hebras chocan de golpe: se nota
   que son dos piezas distintas pegadas.

   El degradado va en el velo que cada panel YA tiene, no en una capa nueva
   sobre el grid. Cada `::after` vive con z-index:-1 dentro de su panel, que
   tiene `isolation:isolate`, así que queda debajo del contenido sin pelear con
   nada. Una capa a nivel del grid habría tapado también el texto y la tarjeta.

   Oscureciendo el borde interior de cada lado, las dos redes se apagan al
   acercarse y el corte deja de leerse. */

.sitw-auth-brand::after {
    background: linear-gradient(100deg,
        rgba(8,8,13,.74) 0%,
        rgba(8,8,13,.50) 38%,
        rgba(8,8,13,.56) 72%,
        rgba(8,8,13,.88) 94%,
        rgba(8,8,13,.94) 100%);
}

.sitw-auth-panel::after {
    background: linear-gradient(90deg,
        rgba(8,8,13,.94) 0%,
        rgba(8,8,13,.88) 6%,
        rgba(8,8,13,.58) 26%,
        rgba(8,8,13,.50) 100%);
}

@media (max-width: 900px) {
    /* Apilado no hay divisor que suavizar. */
    .sitw-auth-panel::after { background: rgba(8,8,13,.68); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE: el logo al centro y a todo lo ancho
   ══════════════════════════════════════════════════════════════════════════
   Estaba chico y pegado a la izquierda, compartiendo fila con "Volver al
   sitio": quedaba como un resto del layout de escritorio en vez de como el
   encabezado de la pantalla.

   Ahora la barra de marca es una columna centrada. El logo usa todo el ancho
   disponible: como el PNG es 11:1, `width:100%` con `height:auto` lo deja en
   ~30px de alto sin deformarlo — que es lo que hay que hacer con un apaisado
   así, dejar que el ancho mande y que el alto salga solo. */
@media (max-width: 900px) {
    .sitw-auth-brand {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 26px 20px 22px;
        text-align: center;
    }
    .sitw-auth-logo {
        display: block;
        width: 100%;
        max-width: 340px;
    }
    .sitw-auth-logo img {
        width: 100%;
        max-width: none;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .sitw-auth-back { margin: 0 auto; }
}

/* La barra de marca medía 255px para un contenido de 115: el grid reparte el
   alto sobrante entre las dos filas. Con `auto 1fr` la marca se queda con lo
   que necesita y el formulario se lleva el resto. */
@media (max-width: 900px) {
    .sitw-auth-grid { grid-template-rows: auto 1fr; }
    .sitw-auth-brand { padding: 22px 20px 18px; gap: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE: una sola imagen a pantalla completa, con el logo encima
   ══════════════════════════════════════════════════════════════════════════
   Antes eran dos bloques separados: una barra de marca con su propio fondo y
   su borde inferior, y debajo el panel del formulario con la imagen. El logo
   quedaba en una caja aparte, no sobre la imagen.

   Ahora la imagen va en el grid entero y los dos paneles quedan transparentes:
   el logo flota sobre el fondo y la pantalla se lee como una sola pieza.

   La tarjeta estaba pegada arriba porque la hoja original pone
   `align-items:flex-start` en el panel a partir de 920px (línea 230). Se
   revierte a centrado. */

@media (max-width: 920px) {
    .sitw-auth-grid {
        position: relative;
        isolation: isolate;
        grid-template-rows: auto 1fr;
    }
    .sitw-auth-grid::before {
        content: "";
        position: absolute; inset: 0; z-index: -2;
        background: url('../images/auth-derecha.webp') left top / cover no-repeat;
    }
    .sitw-auth-grid::after {
        content: "";
        position: absolute; inset: 0; z-index: -1;
        background: rgba(8,8,13,.7);
        pointer-events: none;
    }

    /* Los paneles dejan de tener fondo propio: la imagen ya está detrás. */
    .sitw-auth-brand {
        background: transparent;
        border-bottom: none;
        padding: 26px 20px 6px;
    }
    .sitw-auth-panel::before,
    .sitw-auth-panel::after { display: none; }

    /* La tarjeta, al medio del espacio que queda. El padding va parejo: con
       48px abajo y 20 arriba, `align-items:center` centra dentro de la caja de
       contenido y la tarjeta terminaba 28px más arriba de lo que parecía. */
    .sitw-auth-panel {
        align-items: center;
        padding: 24px 20px;
    }
}

/* El logo pasa a flotar sobre la imagen en vez de ocupar una fila del grid.
   Mientras fuera una fila, la tarjeta se centraba en el espacio que quedaba
   DEBAJO del logo, y por eso se veía corrida hacia abajo. Ahora el panel toma
   la pantalla entera y la tarjeta se centra en el viewport, con el logo
   encima. */
@media (max-width: 920px) {
    .sitw-auth-grid { grid-template-rows: 1fr; }
    .sitw-auth-brand {
        position: absolute; top: 0; left: 0; right: 0; z-index: 3;
        padding: 24px 20px 0;
    }
    /* Padding parejo: con 96 arriba y 32 abajo, `align-items:center` centraba
       dentro de esa caja y la tarjeta quedaba 32px más abajo del medio real.
       El logo termina en ~55px y la tarjeta más alta (registro, 592) deja 110
       libres arriba, así que no se pisan. */
    .sitw-auth-panel { min-height: 100vh; min-height: 100dvh; padding: 32px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RECUPERACIÓN DE CONTRASEÑA — /recuperar/
   Reutiliza la tarjeta y los estilos de auth. Enlace disfrazado de botón
   principal para los estados "enviado" y "enlace vencido".
   ══════════════════════════════════════════════════════════════════════════ */

.sitw-auth-card .sitw-btn-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}
.sitw-auth-card .sitw-btn-link:hover { text-decoration: none; }