/* ===================================================================
   Estilos del login — proyecto separado (HTML / CSS / JS)
   Colores y diseño originales conservados.
   =================================================================== */

  :root{
    --bg:#f3f4f6;
    --card:#f9f9f9;
    --ink:#0a0a0a;
    --ink-soft:#6b7280;
    --field:#f3f4f6;
    --field-focus:#ffffff;
    --border:#e5e7eb;
    --border-focus:#0a0a0a;
    --accent:#0a0a0a;
    --danger:#ef4444;
    --radius:16px;
  }

  *{box-sizing:border-box;margin:0;padding:0}

  body{
    font-family:'Geist',sans-serif;
    background:#f9f9f9;
    min-height:100vh;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  /* Bloquea el scroll del fondo cuando el BottomSheet está abierto */
  body.sheet-open{overflow:hidden}

  /* Barra superior fija */
  .toolbar{
    position:sticky;
    top:0;
    z-index:50;
    width:100%;
    background:#f9f9f9;
    display:flex;
    align-items:center;
    gap:6px;
    padding:14px 16px;
    height:56px;
  }
  .toolbar button{
    display:flex;
    align-items:center;
    gap:10px;
    background:transparent;
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    padding:8px 10px;
    border-radius:10px;
    transition:background .2s;
  }
  .toolbar button:hover{background:rgba(0,0,0,.05)}
  .toolbar button:active{background:rgba(0,0,0,.08)}
  .toolbar svg{width:24px;height:24px}

  /* Zona de contenido */
  .page{
    min-height:calc(100vh - 56px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }

  .card{
    width:100%;
    background:var(--card);
    min-height:calc(100vh - 56px);
    padding:32px 24px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    animation:rise .5s cubic-bezier(.16,1,.3,1) both;
  }
  /* Contenido legible y centrado dentro de la pantalla completa */
  .card > h1,
  .card > .subtitle,
  .card > form,
  .card > .switch{
    width:100%;
    max-width:400px;
    margin-left:auto;
    margin-right:auto;
  }

  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  .logo{
    width:48px;height:48px;
    background:var(--accent);
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
    color:#fff;
  }
  .logo svg{width:24px;height:24px}

  h1{
    text-align:center;
    font-size:24px;
    font-weight:700;
    letter-spacing:-.02em;
  }
  .subtitle{
    text-align:center;
    color:var(--ink-soft);
    font-size:14px;
    margin-top:6px;
    margin-bottom:28px;
  }

  .field{margin-bottom:18px;animation:none}
  .field.collapsible{
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.16,1,.3,1),
               opacity .3s ease,
               margin-bottom .35s ease;
    max-height:90px;
    opacity:1;
  }
  .field.collapsible.hidden{
    max-height:0;
    opacity:0;
    margin-bottom:0;
    pointer-events:none;
  }
  .field.foldable{
    overflow:hidden;
    transition:max-height .4s cubic-bezier(.16,1,.3,1),
               opacity .3s ease,
               margin-bottom .4s ease;
    max-height:320px;
    opacity:1;
  }
  .field.foldable.hidden{
    max-height:0;
    opacity:0;
    margin-bottom:0;
    pointer-events:none;
  }

  label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:8px;
  }
  label .req{color:var(--danger);margin-left:2px}

  .input-wrap{position:relative;display:flex;align-items:center}

  input{
    width:100%;
    height:48px;
    background:var(--field);
    border:1.5px solid transparent;
    border-radius:12px;
    padding:0 16px;
    font-family:inherit;
    font-size:14.5px;
    color:var(--ink);
    transition:border-color .2s,background .2s,box-shadow .2s;
  }
  input.has-icon{padding-right:48px}
  input::placeholder{color:#9ca3af}
  input:focus{
    outline:none;
    background:var(--field-focus);
    border-color:var(--border-focus);
    box-shadow:0 0 0 4px rgba(10,10,10,.06);
  }

  /* Disparador del selector de país (estilo de campo) */
  .select-trigger{
    box-sizing:border-box;
    width:100%;height:48px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--field);
    border:1.5px solid transparent;
    border-radius:12px;
    padding:0 14px 0 16px;
    font-family:inherit;font-size:14.5px;font-weight:500;
    color:var(--ink);
    cursor:pointer;text-align:left;
    transition:border-color .2s,background .2s,box-shadow .2s;
  }
  .select-trigger:hover{background:#eceef1}
  .select-trigger:focus-visible{
    outline:none;background:var(--field-focus);
    border-color:var(--border-focus);box-shadow:0 0 0 4px rgba(10,10,10,.06);
  }
  .select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .select-value.placeholder{color:#9ca3af;font-weight:400}
  .select-arrow{width:20px;height:20px;flex-shrink:0;color:var(--ink-soft)}
  .select-trigger.error{
    border-color:var(--danger);background:#fef2f2;
    box-shadow:0 0 0 4px rgba(239,68,68,.08);
  }

  /* ===== BottomSheet de país ===== */
  .sheet-overlay{
    position:fixed;inset:0;z-index:250;
    display:flex;align-items:flex-end;justify-content:center;
    background:rgba(10,10,10,.4);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  .sheet-overlay.show{opacity:1;pointer-events:auto}
  .sheet{
    width:100%;max-width:520px;
    max-height:78vh;
    background:#fff;
    border-radius:22px 22px 0 0;
    padding:10px 0 calc(14px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
    box-shadow:0 -10px 40px rgba(0,0,0,.18);
  }
  .sheet-overlay.show .sheet{transform:translateY(0)}
  .sheet-handle{
    width:42px;height:5px;border-radius:99px;
    background:#d1d5db;margin:6px auto 12px;
    flex-shrink:0;
  }
  .sheet-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 18px 12px;
    flex-shrink:0;
  }
  .sheet-head h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
  .sheet-close{
    width:34px;height:34px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border:none;background:var(--field);border-radius:50%;
    color:var(--ink);cursor:pointer;transition:background .2s;
  }
  .sheet-close:hover{background:#e5e7eb}
  .sheet-close svg{width:18px;height:18px}
  .sheet-search{
    position:relative;display:flex;align-items:center;
    margin:0 18px 8px;
    flex-shrink:0;
  }
  .sheet-search svg{position:absolute;left:14px;width:18px;height:18px;color:var(--ink-soft)}
  .sheet-search input{
    width:100%;height:46px;
    background:var(--field);border:1.5px solid transparent;border-radius:12px;
    padding:0 16px 0 42px;font-family:inherit;font-size:14.5px;color:var(--ink);
  }
  .sheet-search input:focus{outline:none;background:#fff;border-color:var(--border-focus)}
  .sheet-list{
    list-style:none;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:4px 10px 4px;margin:0;
    -webkit-overflow-scrolling:touch;
  }
  .sheet-list li{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 14px;border-radius:12px;
    font-size:15px;font-weight:500;color:var(--ink);
    cursor:pointer;transition:background .15s;
  }
  .sheet-list li:hover{background:var(--field)}
  .sheet-list li.selected{font-weight:700}
  .sheet-list li .check{width:20px;height:20px;color:#16a34a;opacity:0}
  .sheet-list li.selected .check{opacity:1}
  .sheet-empty{text-align:center;color:var(--ink-soft);font-size:14px;padding:24px 18px}

  .toggle-eye{
    position:absolute;
    right:8px;
    width:34px;height:34px;
    border:none;background:transparent;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    color:var(--ink-soft);
    border-radius:8px;
    transition:color .2s,background .2s;
  }
  .toggle-eye:hover{color:var(--ink);background:rgba(0,0,0,.05)}
  .toggle-eye svg{width:19px;height:19px}
  .toggle-eye .eye-off{display:none}
  .toggle-eye.show .eye-on{display:none}
  .toggle-eye.show .eye-off{display:block}

  .btn{
    width:100%;
    height:50px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:12px;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    gap:8px;
    margin-top:8px;
    transition:transform .15s,box-shadow .2s,opacity .2s;
  }
  .btn:hover{box-shadow:0 8px 24px rgba(0,0,0,.18)}
  .btn:active{transform:scale(.985)}
  .btn svg{width:18px;height:18px}

  /* Separador */
  .divider{
    display:flex;align-items:center;
    gap:12px;
    margin:22px 0 18px;
    color:var(--ink-soft);
    font-size:12.5px;
    font-weight:500;
  }
  .divider::before,.divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--border);
  }

  /* Botones secundarios (Google / GitHub) */
  .btn-alt{
    width:100%;
    height:48px;
    background:#fff;
    border:1.5px solid #e5e7eb;
    border-radius:12px;
    font-family:inherit;
    font-size:14.5px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    gap:10px;
    margin-bottom:10px;
    transition:border-color .2s,background .2s,transform .15s;
  }
  .btn-alt:hover{border-color:#d1d5db;background:#fafafa}
  .btn-alt:active{transform:scale(.985)}

  /* Continuar como invitado */
  .btn-ghost{
    width:100%;
    height:48px;
    background:#fff;
    border:1.5px solid #e5e7eb;
    border-radius:12px;
    font-family:inherit;
    font-size:14.5px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    gap:10px;
    margin-top:2px;
    transition:border-color .2s,background .2s,transform .15s;
  }
  .btn-ghost:hover{border-color:#d1d5db;background:#fafafa}
  .btn-ghost:active{transform:scale(.985)}

  .switch{
    text-align:center;
    font-size:14px;
    color:var(--ink-soft);
    margin-top:24px;
  }
  .switch a{
    color:var(--ink);
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    border-bottom:1.5px solid transparent;
    transition:border-color .2s;
  }

  /* Lista de requisitos de contraseña */
  .reqs{
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 14px;
    margin-top:0;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .3s ease,margin-top .35s ease;
  }
  .reqs.show{max-height:120px;opacity:1;margin-top:12px}
  .reqs li{
    display:flex;align-items:center;gap:7px;
    font-size:12.5px;
    font-weight:500;
    color:var(--ink-soft);
    transition:color .2s;
  }
  .reqs .dot{
    width:16px;height:16px;
    border-radius:50%;
    background:#e5e7eb;
    flex-shrink:0;
    position:relative;
    transition:background .2s;
  }
  .reqs .dot::after{
    content:'';
    position:absolute;
    left:5px;top:2.5px;
    width:4px;height:8px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg) scale(0);
    transition:transform .2s ease;
  }
  .reqs li.ok{color:#16a34a}
  .reqs li.ok .dot{background:#16a34a}
  .reqs li.ok .dot::after{transform:rotate(45deg) scale(1)}

  /* Mensaje de coincidencia de contraseñas */
  .match-msg{
    font-size:12.5px;
    font-weight:600;
    margin-top:8px;
    display:flex;align-items:center;gap:6px;
    min-height:0;
    opacity:0;
    transition:opacity .2s;
  }
  .match-msg.show{opacity:1}
  .match-msg.ok{color:#16a34a}
  .match-msg.bad{color:var(--danger)}
  .match-msg svg{width:15px;height:15px;flex-shrink:0}

  /* Input con error de coincidencia */
  input.error{
    border-color:var(--danger)!important;
    background:#fef2f2!important;
    box-shadow:0 0 0 4px rgba(239,68,68,.08)!important;
  }
  .switch a:hover{border-color:var(--ink)}

  /* ===== Aceptar términos y privacidad ===== */
  .terms{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin:-2px 0 18px;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .3s ease,margin .35s ease;
  }
  .terms.show{max-height:90px;opacity:1;margin:-2px 0 20px}
  .terms input{
    appearance:none;-webkit-appearance:none;
    box-sizing:border-box;
    width:20px;min-width:20px;height:20px;
    flex:0 0 20px;
    padding:0;margin:1px 0 0;
    border:1.5px solid #cbd0d6;
    border-radius:6px;
    background:#fff;
    cursor:pointer;
    position:relative;
    transition:background .2s,border-color .2s;
  }
  .terms input:checked{background:var(--accent);border-color:var(--accent)}
  .terms input:checked::after{
    content:'';position:absolute;
    left:6px;top:2px;width:5px;height:10px;
    border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  .terms input.error{border-color:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.08)}
  .terms label{
    font-size:13px;font-weight:500;line-height:1.45;
    color:var(--ink-soft);cursor:pointer;
  }
  .terms label a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}

  /* ===== Progreso de creación de cuenta (en línea) ===== */
  .creation-block{
    max-width:400px;
    margin:0 auto;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .35s ease,margin .35s ease;
  }
  .creation-block.show{max-height:420px;opacity:1;margin:14px auto 4px}
  .creation-head{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:13.5px;font-weight:700;
    margin-bottom:10px;
  }
  .creation-head .creation-pct{font-size:16px;font-weight:800}
  .creation-bar{
    height:7px;border-radius:99px;
    overflow:hidden;margin-bottom:24px;
  }
  .creation-fill{
    height:100%;width:0%;
    border-radius:99px;
    transition:width .55s cubic-bezier(.16,1,.3,1),background .3s;
  }
  .creation-steps{list-style:none;display:flex;flex-direction:column;gap:15px}
  .creation-steps li{
    display:flex;align-items:center;gap:13px;
    opacity:.4;transition:opacity .3s;
  }
  .creation-steps li.active,
  .creation-steps li.done{opacity:1}
  .cs-dot{
    width:26px;height:26px;flex-shrink:0;
    border-radius:50%;
    border:2px solid;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    transition:background .3s,border-color .3s;
  }
  .cs-spin{
    width:14px;height:14px;
    border:2px solid transparent;
    border-radius:50%;
    opacity:0;
    animation:spin .8s linear infinite;
    transition:opacity .2s;
  }
  .creation-steps li.active .cs-spin{opacity:1}
  .cs-dot::after{
    content:'';position:absolute;
    left:7px;top:4px;width:6px;height:11px;
    border-style:solid;border-width:0 2.5px 2.5px 0;
    transform:rotate(45deg) scale(0);
    transition:transform .25s ease;
  }
  .creation-steps li.done .cs-dot::after{transform:rotate(45deg) scale(1)}
  .creation-steps li.done .cs-spin{opacity:0}
  .cs-label{font-size:14.5px;font-weight:600}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Variante clara (tarjeta / móvil) */
  .creation-light .creation-head{color:var(--ink)}
  .creation-light .creation-bar{background:var(--field)}
  .creation-light .creation-fill{background:var(--ink)}
  .creation-light.done .creation-fill,
  .creation-light.done .creation-pct{ }
  .creation-light.done .creation-fill{background:#16a34a}
  .creation-light.done .creation-pct{color:#16a34a}
  .creation-light .cs-dot{border-color:#d1d5db}
  .creation-light .cs-spin{border-color:rgba(0,0,0,.18);border-top-color:var(--ink)}
  .creation-light .cs-dot::after{border-color:#fff}
  .creation-light .creation-steps li.done .cs-dot{background:#16a34a;border-color:#16a34a}
  .creation-light .cs-label{color:var(--ink)}

  /* Variante oscura (panel) */
  .creation-dark .creation-head{color:rgba(255,255,255,.85)}
  .creation-dark .creation-head .creation-pct{color:#fff}
  .creation-dark .creation-bar{background:rgba(255,255,255,.14)}
  .creation-dark .creation-fill{background:#fff}
  .creation-dark.done .creation-fill{background:#22c55e}
  .creation-dark.done .creation-pct{color:#22c55e}
  .creation-dark .cs-dot{border-color:rgba(255,255,255,.3)}
  .creation-dark .cs-spin{border-color:rgba(255,255,255,.25);border-top-color:#fff}
  .creation-dark .cs-dot::after{border-color:#0a0a0a}
  .creation-dark .creation-steps li.done .cs-dot{background:#22c55e;border-color:#22c55e}
  .creation-dark .creation-steps li.done .cs-dot::after{border-color:#0a0a0a}
  .creation-dark .cs-label{color:#fff}

  /* Botón desactivado durante la creación */
  .btn:disabled,.btn-alt:disabled,.btn-ghost:disabled{
    opacity:1;cursor:not-allowed;
  }
  .btn:disabled{background:#9ca3af;box-shadow:none}
  .btn-alt:disabled,.btn-ghost:disabled{color:#9ca3af;background:#f3f4f6}
  input:disabled{opacity:.7;cursor:not-allowed}
  .toggle-eye:disabled{opacity:.5;cursor:not-allowed}

  /* ===== Toast personalizado ===== */
  .toast{
    position:fixed;
    left:50%;
    bottom:max(20px, env(safe-area-inset-bottom));
    transform:translate(-50%,150%);
    z-index:200;
    display:flex;
    align-items:center;
    gap:12px;
    width:max-content;
    max-width:min(calc(100vw - 28px), 400px);
    background:rgba(10,10,10,.96);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    padding:13px 18px 13px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 10px 36px rgba(0,0,0,.32);
    font-size:14px;
    font-weight:600;
    opacity:0;
    pointer-events:none;
    transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  }
  .toast.show{transform:translate(-50%,0);opacity:1}
  .toast-icon{
    width:24px;height:24px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
  }
  .toast-icon svg{width:15px;height:15px}
  .toast.success .toast-icon{background:#16a34a;color:#fff}
  .toast.error   .toast-icon{background:var(--danger);color:#fff}
  .toast.info    .toast-icon{background:rgba(255,255,255,.18);color:#fff}
  .toast-text{line-height:1.4;letter-spacing:-.005em}

  /* ===== Panel de marca (oculto en móvil, aparece en escritorio) ===== */
  .brand-panel{display:none}

  /* ===================================================================
     Diseño dividido para pantallas grandes · panel claro premium
     Solo afecta a ≥900px. El diseño móvil queda intacto.
     =================================================================== */
  @media (min-width:900px){

    /* En escritorio el "atrás" vive en el pie del panel → se oculta la barra */
    .toolbar{display:none}

    /* El progreso de creación se muestra dentro del panel claro */
    #creation{display:none}
    #creationPanel{display:block}

    /* Toast anclado abajo a la derecha */
    .toast{
      left:auto; right:28px; bottom:28px;
      transform:translate(0,150%);
      max-width:380px; font-size:15px;
      padding:15px 20px 15px 16px;
    }
    .toast.show{transform:translate(0,0)}

    /* Lienzo a dos columnas, a sangre completa */
    .page{
      min-height:100vh;
      padding:0;
      flex-direction:row;
      align-items:stretch;
    }

    /* ---------- Columna de marca (izquierda · clara) ---------- */
    .brand-panel{
      display:flex;
      flex-direction:column;
      width:46%;
      max-width:600px;
      padding:46px 52px;
      position:relative;
      overflow:hidden;
      color:var(--ink);
      background:linear-gradient(157deg,#f7f9fc 0%,#eef2f7 55%,#e9eef5 100%);
      border-right:1px solid #e6eaf0;
    }

    /* Firma: nube volumétrica muy tenue al fondo */
    .brand-cloud{
      position:absolute;
      right:-72px; bottom:-64px;
      width:min(80%,480px); height:auto;
      color:#dde5f0;
      opacity:.6;
      pointer-events:none;
      z-index:0;
    }
    .brand-cloud svg{width:100%;height:auto;display:block}

    /* Zona superior: logo + wordmark (anclado arriba) */
    .brand-top{
      position:relative; z-index:1;
      flex:0 0 auto;
      display:flex; align-items:center; gap:12px;
      margin:0;
    }
    .brand-logo{
      width:44px; height:44px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:var(--accent);
      border-radius:13px;
      color:#fff;
      box-shadow:0 8px 20px rgba(10,10,10,.20);
    }
    .brand-logo svg{width:26px;height:26px}
    .brand-wordmark{
      font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
    }

    /* Zona media: encabezado + recorrido (crece y se centra) */
    .brand-mid{
      position:relative; z-index:1;
      flex:1 1 auto; min-height:0;
      display:flex; flex-direction:column; justify-content:center;
      padding:38px 0;
    }
    .brand-kicker{
      display:inline-block;
      font-size:12px; font-weight:700;
      letter-spacing:.18em; text-transform:uppercase;
      color:var(--ink-soft);
      margin-bottom:16px;
    }
    .brand-mid h2{
      font-size:34px; font-weight:800; line-height:1.12;
      letter-spacing:-.03em; color:var(--ink);
      margin:0 0 12px;
    }
    .brand-mid p{
      font-size:15px; line-height:1.6;
      color:var(--ink-soft);
      max-width:380px; margin:0;
    }

    /* Recorrido / propuestas de valor (estructura tipo stepper) */
    .brand-steps{
      list-style:none;
      display:flex; flex-direction:column; gap:18px;
      margin-top:34px;
    }
    .brand-step{ display:flex; align-items:flex-start; gap:14px }
    .brand-step-ico{
      width:40px; height:40px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:#fff;
      border:1px solid #e4e9f0;
      border-radius:11px;
      color:var(--ink);
      box-shadow:0 2px 6px rgba(20,30,50,.05);
    }
    .brand-step-ico svg{width:20px;height:20px}
    .brand-step:first-child .brand-step-ico{
      background:var(--accent); border-color:var(--accent); color:#fff;
      box-shadow:0 6px 16px rgba(10,10,10,.18);
    }
    .brand-step-tx b{
      display:block; font-size:14.5px; font-weight:700;
      color:var(--ink); letter-spacing:-.01em; margin-bottom:2px;
    }
    .brand-step-tx span{ font-size:13px; line-height:1.5; color:var(--ink-soft) }

    /* Progreso de creación, cuando aparece, va bajo el recorrido */
    .brand-mid .creation-block{ margin-top:26px }
    .brand-panel .creation-light .creation-bar{ background:#e3e8ef }

    /* Zona inferior: pie del panel */
    .brand-footer{
      position:relative; z-index:1;
      flex:0 0 auto;
      display:flex; align-items:center; justify-content:space-between;
      font-size:13px;
    }
    .brand-footer a{
      display:inline-flex; align-items:center; gap:7px;
      color:var(--ink); font-weight:600; text-decoration:none;
      padding:8px 12px 8px 10px; margin-left:-10px;
      border-radius:9px;
      transition:background .2s;
    }
    .brand-footer a:hover{ background:rgba(20,30,50,.05) }
    .brand-footer a svg{ width:17px; height:17px }
    .brand-footer .brand-copy{ color:var(--ink-soft); font-weight:500 }

    /* ---------- Columna de formulario (derecha · blanca) ---------- */
    .page > .card{
      flex:1;
      max-width:none;
      min-height:100vh;
      border-radius:0;
      box-shadow:none;
      background:#fff;
      display:flex; flex-direction:column; justify-content:center;
      padding:48px 7%;
      animation:none;
    }
    .page > .card > .logo{ margin-bottom:20px }
    .page > .card > h1{ font-size:29px }
    .page > .card > .subtitle{ font-size:14.5px; margin-bottom:30px }
    .page > .card form,
    .page > .card > h1,
    .page > .card > .subtitle,
    .page > .card > .switch{
      width:100%; max-width:392px;
      margin-left:auto; margin-right:auto;
    }
  }

/* Garantiza que el atributo `hidden` oculte elementos aunque otra clase
   defina `display` (login social / invitado, pendientes de implementar). */
[hidden]{display:none !important;}