:root{
      --brand:#e14a26; --brand-600:#cc3e1e; --accent:#f59e0b;
      --bg:#ececf3; --text:#1f2937; --muted:#6b7280;
      --surface:#ffffff; --border:#e5e7eb;
      --radius-xl:1rem; --shadow-1:0 10px 30px rgba(0,0,0,.08);
    }
    *,*::before,*::after{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;color:var(--text);background:var(--bg)}

    /* ===== BANNER en rombo ===== */
    .hero-wrap{position:relative; overflow:visible;}
    .hero-bg{
      position:relative; z-index:1;
      height:380px;
      background:
        linear-gradient(0deg, rgba(225,74,38,.85), rgba(225,74,38,.85)),
        url("../images/auth-one-bg.jpg") center/cover no-repeat;
      filter:saturate(110%);
      clip-path:polygon(0 0,100% 0,100% 72%,50% 92%,0 72%);
    }

    /* Logo */
    .logo-top{position:absolute; top:90px; left:50%; transform:translateX(-50%); z-index:3;}
    .logo-top .badge{background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px 14px; box-shadow:var(--shadow-1);}
    .logo-top img{width:230px; height:auto; display:block;}

    /* ===== NIEVE (cubre todo el banner) ===== */
    .snow{
      position:absolute; top:0; left:0; width:100%; height:380px;
      pointer-events:none; overflow:hidden; z-index:2;
    }
    /* Capa exterior: solo CAÍDA vertical animando 'top' */
    .flake{
      position:absolute;
      left:var(--left);       /* 0%..100% o px si sale de los lados */
      top:-12px;              /* arranca fuera del banner */
      animation: fallY var(--dur) linear var(--delay) forwards;
      will-change: top, opacity;
    }
    /* Capa intermedia: desplazamiento constante en X */
    .flake .drift{
      transform: translateX(var(--dx));  /* px positivos/negativos */
      will-change: transform;
    }
    /* Capa interior: el círculo y el vaivén lateral */
    .flake .drift .i{
      position:absolute; left:0; top:0;
      width:var(--size); height:var(--size);
      border-radius:50%; background:#fff; opacity:.9;
      filter:drop-shadow(0 1px 2px rgba(0,0,0,.12));
      animation: sway var(--swaydur) ease-in-out var(--delay) infinite;
      will-change: transform;
    }

    @keyframes fallY{
      0%   { top:-12px; opacity:0; }
      5%   { opacity:1; }
      100% { top:110%; opacity:0; }
    }
    @keyframes sway{
      0%,100%{ transform: translateX(0); }
      50%    { transform: translateX(calc(var(--amp) * 1px)); }
    }

    /* ===== LOGIN flotante ===== */
    .login-section{display:grid; place-items:center; position:relative; z-index:2; margin-top:-150px; padding:0 16px 64px;}
    @media (max-width:768px){ .login-section{ margin-top:-100px; } }

    .card{
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-xl); box-shadow:0 20px 50px rgba(0,0,0,.15);
      width:100%; max-width:420px; padding:28px;
    }
    .card h2{text-align:center;font-size:1.1rem;font-weight:800;color:#374151;margin:0 0 .25rem;}
    .card p.meta{text-align:center;color:var(--muted);font-size:.9rem;margin:.25rem 0 1.25rem;}

    label{display:block;font-size:.9rem;font-weight:600;color:#374151;margin:.25rem 0;}
    .input{width:100%;border:1px solid var(--border);border-radius:.625rem;padding:.75rem .9rem;background:#fff;color:#111827;outline:none;}
    .input:focus{border-color:#cbd5e1;box-shadow:0 0 0 4px rgba(59,130,246,.08);}
    .row{display:grid;gap:.5rem;margin-bottom:1rem;}

    .btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:.85rem 1rem;border-radius:.6rem;border:1px solid transparent;font-weight:700;color:#fff;cursor:pointer;transition:.15s ease;}
    .btn.primary{background:var(--brand);} .btn.primary:hover{background:var(--brand-600);}

    .btn.secondary{background:var(--accent);} .btn.secondary:hover{filter:brightness(.95);}

    .divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;color:var(--muted);font-size:.9rem;margin:.75rem 0;}
    .divider::before,.divider::after{content:"";height:1px;background:var(--border);}
    .footer-bar{background:var(--brand);color:#fff;text-align:center;padding:.75rem 1rem;font-weight:700;letter-spacing:.3px;}