:root{
  --bg:#030811;
  --panel:#07111f;
  --card:#0b1627;
  --card-2:#0d1a2e;
  --line:rgba(122,166,255,.18);
  --line-strong:rgba(44,126,255,.62);
  --text:#f6f8fc;
  --muted:#8f9aae;
  --blue:#1684ff;
  --blue-2:#165dff;
  --blue-3:#00a7ff;
  --success:#11d8b0;
  --danger:#ff5d73;
  --radius:26px;
  --shadow:0 30px 90px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{min-height:100vh;overflow-x:hidden;background:
radial-gradient(circle at 18% 20%,rgba(0,110,255,.12),transparent 28%),
radial-gradient(circle at 85% 12%,rgba(0,128,255,.11),transparent 24%),
linear-gradient(135deg,#02060d 0%,#06101d 52%,#02060c 100%)}
button,input{font:inherit}
button{border:0}
a{color:inherit}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.ambient{position:fixed;pointer-events:none;filter:blur(90px);opacity:.22;border-radius:50%}
.ambient-a{width:420px;height:420px;background:#006bff;top:-180px;right:8%}
.ambient-b{width:380px;height:380px;background:#0047ff;bottom:-180px;left:20%}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}

.auth-shell{width:min(1480px,calc(100% - 36px));min-height:calc(100vh - 36px);margin:18px auto;display:grid;grid-template-columns:minmax(420px,.95fr) minmax(520px,1.05fr);border:1px solid rgba(114,154,220,.17);border-radius:32px;overflow:hidden;background:rgba(2,8,17,.78);box-shadow:var(--shadow);backdrop-filter:blur(18px)}

.brand-panel{position:relative;overflow:hidden;padding:54px 58px 40px;border-right:1px solid rgba(118,154,220,.14);min-height:760px;background:
linear-gradient(145deg,rgba(8,21,39,.92),rgba(3,10,19,.98)),
radial-gradient(circle at 22% 24%,rgba(0,100,255,.14),transparent 34%)}
.brand-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 0 61%,rgba(36,125,255,.05) 61% 62%,transparent 62% 68%,rgba(44,122,255,.04) 68% 69%,transparent 69%);pointer-events:none}
.brand-top,.brand-content,.brand-bottom{position:relative;z-index:3}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:76px;height:60px;color:#1488ff;filter:drop-shadow(0 0 22px rgba(0,112,255,.38))}
.brand-mark svg{width:100%;height:100%;stroke:none}
.brand-copy{display:flex;flex-direction:column;line-height:.86;letter-spacing:.03em}
.brand-copy strong{font-size:27px;font-weight:800}
.brand-copy small{font-size:17px;letter-spacing:.31em;color:#168cff;margin-top:9px}

.brand-content{margin-top:100px;max-width:410px}
.eyebrow{display:block;color:#37a0ff;font-size:12px;font-weight:700;letter-spacing:.28em;margin-bottom:15px}
.brand-content h1{font-size:62px;line-height:.93;margin:0 0 26px;letter-spacing:-.05em}
.brand-content h1 span{font-style:normal}
.brand-content h1 em{font-style:normal;color:#1a78ff}
.brand-content>p{font-size:16px;line-height:1.75;color:#bec7d6;margin:0 0 34px;max-width:380px}
.benefits{display:grid;gap:18px}
.benefit{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center}
.benefit-icon{width:54px;height:54px;border:1px solid rgba(38,120,255,.46);border-radius:16px;display:grid;place-items:center;color:#2688ff;background:linear-gradient(145deg,rgba(17,54,101,.5),rgba(3,15,31,.5));box-shadow:inset 0 0 24px rgba(0,106,255,.08)}
.benefit-icon svg{width:24px;height:24px}
.benefit strong{display:block;font-size:14px;margin-bottom:5px}
.benefit small{color:#9aa6b7;font-size:12px;line-height:1.5}
.brand-bottom{position:absolute;left:58px;bottom:42px;display:flex;flex-direction:column;gap:5px}
.brand-bottom span{font-size:13px;font-weight:700}
.brand-bottom small{font-size:11px;color:#7f8b9e}

.brand-visual{position:absolute;z-index:1;right:-55px;bottom:85px;width:390px;height:380px;opacity:.68}
.glow-disc{position:absolute;bottom:14px;left:45px;width:270px;height:88px;border:1px solid #167cff;border-radius:50%;box-shadow:0 0 35px rgba(0,105,255,.35),inset 0 0 25px rgba(0,105,255,.14);transform:perspective(400px) rotateX(68deg)}
.cube{position:absolute;bottom:92px;left:115px;width:155px;height:155px;border:1px solid rgba(60,140,255,.45);background:linear-gradient(145deg,rgba(16,62,126,.38),rgba(4,13,28,.35));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;box-shadow:0 0 60px rgba(0,89,255,.34)}
.cube-w{font-weight:800;font-size:58px;color:#42a5ff;text-shadow:0 0 26px #0b6cff}
.beam{position:absolute;width:420px;height:2px;background:linear-gradient(90deg,transparent,#0b7cff,transparent);filter:drop-shadow(0 0 8px #1681ff);transform:rotate(-42deg)}
.beam-1{top:95px;left:-40px}.beam-2{top:170px;left:-10px;opacity:.55}

.form-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:50px 44px 28px;min-width:0}
.mobile-brand{display:none}
.auth-card{width:min(100%,560px);min-height:620px;border:1px solid rgba(105,150,218,.22);background:linear-gradient(160deg,rgba(14,29,50,.96),rgba(6,15,28,.96));border-radius:28px;box-shadow:0 24px 80px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.025);padding:38px 46px;position:relative}
.auth-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 0,rgba(30,111,255,.09),transparent 36%);pointer-events:none}
.step-indicator{position:absolute;top:18px;right:22px;display:flex;gap:5px;opacity:.7}
.step-indicator span{width:5px;height:5px;background:#30425d;border-radius:20px;transition:.25s}
.step-indicator .active{width:16px;background:#1d7cff}

.auth-view{display:none;position:relative;z-index:1;animation:viewIn .32s ease}
.auth-view.active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.auth-header{text-align:center;margin:5px 0 30px}
.auth-header.compact{margin-bottom:20px}
.header-icon{width:70px;height:70px;margin:0 auto 20px;border-radius:24px;display:grid;place-items:center;color:#3f8fff;border:1px solid rgba(45,124,255,.45);background:radial-gradient(circle at 50% 35%,rgba(31,95,204,.26),rgba(5,18,39,.58));box-shadow:inset 0 0 30px rgba(0,99,255,.08)}
.header-icon svg{width:31px;height:31px}
.auth-header h2{margin:0 0 9px;font-size:30px;letter-spacing:-.035em}
.auth-header p{margin:0;color:#a6b0c0;font-size:14px}
.auth-header>small{display:block;color:#7f8a9c;margin-top:10px;line-height:1.55}
.otp-email{display:block;font-size:15px;margin-top:7px}

.auth-form{display:grid;gap:18px}
.auth-form.dense{gap:13px}
.field{display:grid;gap:8px}
.field>span{font-size:12px;font-weight:700;color:#dfe4ed}
.field>span small{font-weight:500;color:#7f8b9d}
.input-wrap{height:54px;border:1px solid rgba(126,151,188,.23);border-radius:12px;background:rgba(3,10,20,.42);display:flex;align-items:center;padding:0 14px;transition:.2s}
.input-wrap:focus-within{border-color:#2c84ff;box-shadow:0 0 0 3px rgba(35,120,255,.09),0 0 26px rgba(0,95,255,.08)}
.input-wrap>svg{width:19px;height:19px;color:#8d98aa;flex:0 0 auto}
.input-wrap input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#fff;padding:0 13px;font-size:14px}
.input-wrap input::placeholder{color:#6f7b8c}
.icon-btn{background:transparent;color:#aab4c5;padding:8px;cursor:pointer;display:grid;place-items:center}
.icon-btn svg{width:19px;height:19px}
.field-hint{font-size:10px;color:#7c899c}
.strength{height:3px;border-radius:99px;background:#1a2739;overflow:hidden}
.strength span{display:block;height:100%;width:0;background:#ff5d73;transition:.25s}
.form-link-row{text-align:right;margin-top:-4px}
.link-btn,.switch-copy button,.otp-resend button{background:transparent;color:#168cff;cursor:pointer;padding:0}
.link-btn{font-size:12px}
.primary-btn,.google-btn{height:54px;border-radius:11px;cursor:pointer;font-weight:700;transition:.2s}
.primary-btn{position:relative;color:#fff;background:linear-gradient(100deg,#145cf2,#1589ff);box-shadow:0 10px 28px rgba(0,102,255,.2);display:flex;align-items:center;justify-content:center;gap:12px}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 14px 34px rgba(0,102,255,.28)}
.primary-btn svg{width:18px;height:18px;position:absolute;right:18px}
.google-btn{background:#f7f7f8;color:#0f1622;display:flex;align-items:center;justify-content:center;gap:12px}
.google-btn:hover{background:#fff}
.google-g{font-weight:900;font-size:20px;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 45%,#fbbc05 0 68%,#ea4335 0 82%,#4285f4 0);-webkit-background-clip:text;color:transparent}
.divider{display:flex;align-items:center;gap:14px;color:#7d8899;font-size:11px}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:rgba(133,154,184,.16)}
.switch-copy{text-align:center;color:#9aa4b4;font-size:12px;margin:0}
.switch-copy button{font-weight:600}
.check-row{display:flex;gap:9px;align-items:flex-start;font-size:10px;color:#9ca7b8;line-height:1.45}
.check-row input{margin-top:1px;accent-color:#1682ff}
.check-row a{color:#168cff;text-decoration:none}

.otp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:12px 0 6px}
.otp-grid input{width:100%;aspect-ratio:1/1;min-width:0;border-radius:11px;border:1px solid rgba(117,150,199,.25);background:rgba(3,10,21,.52);color:#fff;text-align:center;font-size:24px;outline:0}
.otp-grid input:focus{border-color:#2488ff;box-shadow:0 0 0 3px rgba(33,126,255,.08)}
.otp-resend{text-align:center;display:grid;gap:7px;color:#8f9aab;font-size:11px}
.otp-resend button{font-size:11px}
.otp-resend button:disabled{color:#667184;cursor:not-allowed}

.success-wrap{text-align:center;min-height:535px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}
.success-ring{width:90px;height:90px;border:2px solid #12c8d0;border-radius:50%;display:grid;place-items:center;color:#13deb2;box-shadow:0 0 36px rgba(0,211,212,.12)}
.success-ring svg{width:43px;height:43px;stroke-width:2}
.success-wrap h2{font-size:28px;margin:5px 0 0}
.success-wrap p{max-width:390px;color:#9ba6b6;font-size:13px;line-height:1.7;margin:0 0 10px}
.success-wrap .primary-btn{width:100%}

.auth-footer{width:min(100%,760px);margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#667184;font-size:10px}
.auth-footer div{display:flex;gap:22px}
.auth-footer a{text-decoration:none;color:#188cff}

.toast{position:fixed;right:22px;bottom:22px;z-index:99;padding:13px 17px;border-radius:12px;background:#102038;color:white;border:1px solid rgba(60,130,255,.35);box-shadow:0 18px 50px rgba(0,0,0,.4);font-size:12px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:none}

@media (max-width:1050px){
  .auth-shell{grid-template-columns:390px 1fr}
  .brand-panel{padding-left:38px;padding-right:38px}
  .brand-content h1{font-size:50px}
  .brand-visual{right:-145px;opacity:.45}
}
@media (max-width:820px){
  body{background:linear-gradient(180deg,#02070f 0%,#07111f 55%,#02070f 100%)}
  .auth-shell{display:block;width:100%;min-height:100vh;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  .brand-panel{display:none}
  .form-panel{min-height:100vh;justify-content:flex-start;padding:28px 18px 22px}
  .mobile-brand{display:flex;justify-content:center;margin:6px 0 24px}
  .mobile-brand .brand-mark{width:58px;height:46px}
  .mobile-brand .brand-copy strong{font-size:20px}
  .mobile-brand .brand-copy small{font-size:12px;margin-top:7px}
  .auth-card{width:100%;max-width:520px;min-height:0;padding:28px 22px;border-radius:24px}
  .auth-header{margin-bottom:24px}
  .header-icon{width:58px;height:58px;border-radius:18px;margin-bottom:16px}
  .header-icon svg{width:27px;height:27px}
  .auth-header h2{font-size:25px}
  .auth-footer{max-width:520px;flex-direction:column;text-align:center;margin-top:20px}
}
@media (max-width:480px){
  .form-panel{padding:18px 14px 20px}
  .mobile-brand{margin-bottom:16px}
  .auth-card{padding:24px 16px 22px;border-radius:20px}
  .auth-header h2{font-size:23px}
  .auth-header p{font-size:12px}
  .input-wrap,.primary-btn,.google-btn{height:50px}
  .field>span{font-size:11px}
  .auth-form{gap:15px}
  .auth-form.dense{gap:11px}
  .otp-grid{gap:7px}
  .otp-grid input{font-size:21px;border-radius:9px}
  .auth-footer div{gap:14px;flex-wrap:wrap;justify-content:center}
}
@media (max-height:760px) and (min-width:821px){
  .auth-shell{min-height:720px}
  .brand-content{margin-top:58px}
  .auth-card{min-height:570px;padding-top:30px;padding-bottom:30px}
  .brand-panel{min-height:720px}
}


/* =========================================================
   DESKTOP V2 — FULL SCREEN / SIN "CAJA DENTRO DE CAJA"
   ========================================================= */
@media (min-width:821px){
  html,body{
    width:100%;
    min-height:100%;
  }

  body{
    min-height:100vh;
    overflow:hidden;
    background:
      radial-gradient(circle at 14% 22%,rgba(0,107,255,.16),transparent 32%),
      radial-gradient(circle at 86% 15%,rgba(0,111,255,.11),transparent 28%),
      linear-gradient(120deg,#02070f 0%,#061120 50%,#020711 100%);
  }

  .auth-shell{
    width:100%;
    height:100vh;
    min-height:100vh;
    margin:0;
    display:grid;
    grid-template-columns:minmax(500px,46%) minmax(560px,54%);
    border:0;
    border-radius:0;
    overflow:hidden;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }

  .brand-panel{
    min-height:100vh;
    height:100vh;
    padding:52px clamp(46px,5vw,92px) 46px;
    border-right:1px solid rgba(104,145,205,.12);
    background:
      radial-gradient(circle at 23% 26%,rgba(0,108,255,.11),transparent 32%),
      linear-gradient(145deg,rgba(5,17,32,.96),rgba(2,8,16,.99));
  }

  .brand-panel:after{
    content:"";
    position:absolute;
    inset:auto -1px 0 auto;
    width:1px;
    height:100%;
    background:linear-gradient(180deg,transparent,rgba(29,124,255,.32),transparent);
    pointer-events:none;
  }

  .brand-top{
    margin:0;
  }

  .brand-content{
    margin-top:clamp(72px,10vh,125px);
    max-width:470px;
  }

  .brand-content h1{
    font-size:clamp(58px,5.3vw,86px);
    line-height:.9;
    margin-bottom:30px;
  }

  .brand-content>p{
    max-width:430px;
    font-size:clamp(15px,1.05vw,18px);
  }

  .benefits{
    margin-top:30px;
    gap:20px;
  }

  .benefit{
    grid-template-columns:58px 1fr;
  }

  .benefit-icon{
    width:58px;
    height:58px;
  }

  .brand-visual{
    right:-55px;
    bottom:55px;
    width:min(39vw,560px);
    height:470px;
    opacity:.64;
  }

  .cube{
    width:190px;
    height:190px;
    left:155px;
    bottom:112px;
  }

  .cube-w{
    font-size:72px;
  }

  .glow-disc{
    left:70px;
    width:350px;
    height:105px;
  }

  .brand-bottom{
    left:clamp(46px,5vw,92px);
    bottom:42px;
  }

  .form-panel{
    min-height:100vh;
    height:100vh;
    padding:42px clamp(54px,7vw,130px);
    justify-content:center;
    align-items:stretch;
    background:
      radial-gradient(circle at 64% 28%,rgba(11,93,213,.09),transparent 28%),
      linear-gradient(160deg,rgba(4,12,23,.58),rgba(2,8,16,.3));
  }

  .mobile-brand{
    display:none!important;
  }

  .auth-card{
    width:min(100%,650px);
    min-height:0;
    margin:auto;
    padding:10px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .auth-card:before{
    display:none;
  }

  .step-indicator{
    top:-4px;
    right:0;
  }

  .auth-header{
    text-align:left;
    margin:0 0 36px;
  }

  .auth-header.compact{
    margin-bottom:25px;
  }

  .header-icon{
    width:62px;
    height:62px;
    margin:0 0 22px;
    border-radius:20px;
  }

  .auth-header h2{
    font-size:clamp(32px,2.5vw,43px);
    margin-bottom:10px;
  }

  .auth-header p{
    font-size:15px;
  }

  .otp-email{
    font-size:16px;
  }

  .auth-form{
    gap:20px;
  }

  .auth-form.dense{
    gap:14px;
  }

  .field>span{
    font-size:13px;
  }

  .input-wrap{
    height:58px;
    border-radius:13px;
    background:rgba(8,19,35,.72);
    border-color:rgba(120,151,196,.22);
  }

  .primary-btn,.google-btn{
    height:58px;
    border-radius:12px;
  }

  .divider{
    margin:2px 0;
  }

  .auth-footer{
    position:absolute;
    left:clamp(54px,7vw,130px);
    right:clamp(54px,7vw,130px);
    bottom:30px;
    width:auto;
    max-width:none;
    margin:0;
  }

  .success-wrap{
    min-height:560px;
    align-items:flex-start;
    text-align:left;
  }

  .success-wrap p{
    max-width:470px;
  }

  .success-ring{
    margin-bottom:4px;
  }

  .success-wrap .link-btn{
    margin-left:2px;
  }
}

@media (min-width:1450px){
  .form-panel{
    padding-left:clamp(90px,8vw,165px);
    padding-right:clamp(90px,8vw,165px);
  }

  .auth-card{
    width:min(100%,700px);
  }

  .auth-footer{
    left:clamp(90px,8vw,165px);
    right:clamp(90px,8vw,165px);
  }
}

@media (min-width:821px) and (max-height:780px){
  body{
    overflow:auto;
  }

  .auth-shell,
  .brand-panel,
  .form-panel{
    min-height:780px;
    height:780px;
  }

  .brand-content{
    margin-top:55px;
  }

  .brand-content h1{
    font-size:58px;
  }

  .benefits{
    gap:13px;
  }

  .benefit-icon{
    width:50px;
    height:50px;
  }

  .auth-header{
    margin-bottom:22px;
  }

  .header-icon{
    width:54px;
    height:54px;
    margin-bottom:14px;
  }

  .auth-header h2{
    font-size:32px;
  }

  .auth-form{
    gap:14px;
  }

  .input-wrap,
  .primary-btn,
  .google-btn{
    height:50px;
  }
}


/* =========================================================
   DESKTOP V3 — 65% BRAND / 35% AUTH
   ========================================================= */
@media (min-width:821px){
  .auth-shell{
    grid-template-columns:minmax(0,65%) minmax(420px,35%) !important;
  }

  .brand-panel{
    padding-left:clamp(64px,6vw,112px);
    padding-right:clamp(64px,6vw,112px);
  }

  .brand-content{
    max-width:560px;
    margin-top:clamp(70px,9vh,118px);
  }

  .brand-content h1{
    font-size:clamp(64px,5.8vw,96px);
  }

  .brand-content>p{
    max-width:520px;
    font-size:clamp(15px,1vw,18px);
  }

  .benefits{
    max-width:470px;
  }

  .brand-visual{
    right:clamp(-90px,-2vw,-20px);
    width:min(46vw,720px);
    height:520px;
    bottom:25px;
    opacity:.72;
  }

  .cube{
    width:220px;
    height:220px;
    left:205px;
    bottom:120px;
  }

  .cube-w{
    font-size:84px;
  }

  .glow-disc{
    left:90px;
    width:430px;
    height:125px;
  }

  .beam{
    width:560px;
  }

  .brand-bottom{
    left:clamp(64px,6vw,112px);
  }

  .form-panel{
    padding-left:clamp(34px,3.2vw,62px);
    padding-right:clamp(34px,3.2vw,62px);
  }

  .auth-card{
    width:100%;
    max-width:510px;
  }

  .auth-header h2{
    font-size:clamp(30px,2.05vw,38px);
  }

  .auth-header p{
    font-size:13px;
  }

  .input-wrap{
    height:54px;
  }

  .primary-btn,
  .google-btn{
    height:54px;
  }

  .auth-form{
    gap:18px;
  }

  .auth-form.dense{
    gap:11px;
  }

  .auth-footer{
    left:clamp(34px,3.2vw,62px);
    right:clamp(34px,3.2vw,62px);
    font-size:9px;
  }

  .auth-footer div{
    gap:14px;
  }

  .otp-grid{
    gap:8px;
  }

  .otp-grid input{
    font-size:21px;
  }
}

/* Ajuste especial para Registro dentro del 35% */
@media (min-width:821px){
  .auth-view[data-view="register"] .auth-header{
    margin-bottom:18px;
  }

  .auth-view[data-view="register"] .header-icon{
    width:54px;
    height:54px;
    margin-bottom:14px;
  }

  .auth-view[data-view="register"] .auth-header h2{
    font-size:29px;
  }

  .auth-view[data-view="register"] .input-wrap{
    height:47px;
  }

  .auth-view[data-view="register"] .primary-btn,
  .auth-view[data-view="register"] .google-btn{
    height:48px;
  }

  .auth-view[data-view="register"] .field>span{
    font-size:11px;
  }

  .auth-view[data-view="register"] .field-hint,
  .auth-view[data-view="register"] .check-row,
  .auth-view[data-view="register"] .switch-copy,
  .auth-view[data-view="register"] .divider{
    font-size:9px;
  }
}

@media (min-width:821px) and (max-width:1180px){
  .auth-shell{
    grid-template-columns:60% 40% !important;
  }

  .brand-panel{
    padding-left:46px;
    padding-right:46px;
  }

  .brand-visual{
    right:-150px;
  }

  .form-panel{
    padding-left:34px;
    padding-right:34px;
  }
}

@media (min-width:821px) and (max-height:760px){
  .auth-shell,
  .brand-panel,
  .form-panel{
    min-height:760px;
    height:760px;
  }

  .brand-content{
    margin-top:48px;
  }

  .brand-content h1{
    font-size:56px;
  }

  .brand-content>p{
    font-size:14px;
    margin-bottom:22px;
  }

  .benefits{
    gap:11px;
  }

  .benefit-icon{
    width:46px;
    height:46px;
  }

  .auth-card{
    max-width:500px;
  }

  .auth-view[data-view="register"] .auth-header{
    margin-bottom:10px;
  }

  .auth-view[data-view="register"] .header-icon{
    display:none;
  }

  .auth-view[data-view="register"] .auth-form.dense{
    gap:8px;
  }

  .auth-view[data-view="register"] .input-wrap{
    height:43px;
  }

  .auth-view[data-view="register"] .primary-btn,
  .auth-view[data-view="register"] .google-btn{
    height:44px;
  }
}


/* =========================================================
   MOBILE V5 — LIMPIO / CENTRADO / SIN TARJETA EXTERIOR
   ========================================================= */
@media (max-width:820px){
  html,body{
    min-height:100%;
    background:#030914;
  }

  body{
    min-height:100dvh;
    overflow-x:hidden;
    background:
      radial-gradient(circle at 50% -8%,rgba(0,105,255,.20),transparent 34%),
      radial-gradient(circle at 50% 105%,rgba(0,68,255,.10),transparent 30%),
      linear-gradient(180deg,#061427 0%,#030b17 48%,#020812 100%);
  }

  .auth-shell{
    width:100%;
    min-height:100dvh;
    margin:0;
    display:block;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }

  .brand-panel{
    display:none!important;
  }

  .form-panel{
    width:100%;
    min-height:100dvh;
    padding:22px 20px 20px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    background:transparent;
  }

  .mobile-brand{
    display:flex!important;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:2px 0 0;
    flex:0 0 auto;
  }

  .mobile-brand .brand{
    gap:10px;
  }

  .mobile-brand .brand-mark{
    width:54px;
    height:43px;
  }

  .mobile-brand .brand-copy strong{
    font-size:19px;
  }

  .mobile-brand .brand-copy small{
    font-size:10px;
    margin-top:6px;
  }

  .auth-card{
    width:100%;
    max-width:440px;
    min-height:0;
    flex:1 0 auto;
    margin:0 auto;
    padding:0;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    display:flex;
    align-items:center;
  }

  .auth-card:before{
    display:none!important;
  }

  .auth-view{
    width:100%;
  }

  .auth-view.active{
    display:block;
  }

  .auth-view[data-view="login"].active,
  .auth-view[data-view="otp"].active,
  .auth-view[data-view="forgot"].active,
  .auth-view[data-view="success"].active{
    margin-top:-18px;
  }

  .auth-view[data-view="register"].active{
    margin-top:0;
  }

  .step-indicator{
    top:14px;
    right:0;
  }

  .auth-header{
    text-align:center;
    margin:0 0 26px;
  }

  .auth-header.compact{
    margin-bottom:20px;
  }

  .header-icon{
    width:58px;
    height:58px;
    margin:0 auto 16px;
    border-radius:18px;
    background:rgba(7,25,51,.58);
  }

  .auth-header h2{
    font-size:26px;
    line-height:1.1;
    margin-bottom:9px;
  }

  .auth-header p{
    font-size:12px;
  }

  .auth-header>small{
    font-size:10px;
  }

  .auth-form{
    width:100%;
    gap:16px;
  }

  .auth-form.dense{
    gap:12px;
  }

  .field{
    gap:7px;
  }

  .field>span{
    font-size:11px;
  }

  .input-wrap{
    width:100%;
    height:51px;
    border-radius:12px;
    background:rgba(2,10,21,.58);
    border:1px solid rgba(119,154,206,.25);
  }

  .primary-btn,
  .google-btn{
    width:100%;
    height:51px;
    border-radius:11px;
  }

  .form-link-row{
    margin-top:-3px;
  }

  .divider{
    margin:1px 0;
  }

  .switch-copy{
    font-size:10px;
  }

  .check-row{
    font-size:9px;
  }

  .field-hint{
    font-size:9px;
  }

  .otp-grid{
    gap:7px;
    max-width:390px;
    margin-left:auto;
    margin-right:auto;
  }

  .otp-grid input{
    font-size:20px;
    border-radius:9px;
  }

  .success-wrap{
    min-height:0;
    width:100%;
    text-align:center;
    align-items:center;
    justify-content:center;
  }

  .success-wrap p{
    max-width:360px;
  }

  .auth-footer{
    position:static!important;
    width:100%;
    max-width:440px;
    margin:14px auto 0;
    padding:0 0 2px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-align:center;
    font-size:8px;
    color:#5f6d81;
    flex:0 0 auto;
  }

  .auth-footer div{
    display:flex;
    justify-content:center;
    gap:15px;
  }

  .auth-footer a{
    font-size:8px;
  }
}

/* Teléfonos angostos */
@media (max-width:480px){
  .form-panel{
    padding-left:20px;
    padding-right:20px;
  }

  .auth-card,
  .auth-footer{
    max-width:390px;
  }

  .mobile-brand{
    margin-top:0;
  }

  .auth-view[data-view="login"].active{
    margin-top:-10px;
  }

  .auth-header h2{
    font-size:24px;
  }
}

/* Pantallas móviles altas: centrado visual más elegante */
@media (max-width:820px) and (min-height:820px){
  .form-panel{
    padding-top:24px;
    padding-bottom:18px;
  }

  .auth-view[data-view="login"].active{
    transform:translateY(-4px);
  }
}

/* Registro: ocupa más altura, por eso se compacta sin encerrarlo */
@media (max-width:820px){
  .auth-view[data-view="register"] .header-icon{
    width:52px;
    height:52px;
    margin-bottom:12px;
  }

  .auth-view[data-view="register"] .auth-header{
    margin-bottom:16px;
  }

  .auth-view[data-view="register"] .auth-header h2{
    font-size:23px;
  }

  .auth-view[data-view="register"] .input-wrap{
    height:48px;
  }

  .auth-view[data-view="register"] .primary-btn,
  .auth-view[data-view="register"] .google-btn{
    height:48px;
  }
}

@media (max-width:820px) and (max-height:720px){
  .mobile-brand{
    transform:scale(.9);
    transform-origin:top center;
  }

  .auth-header{
    margin-bottom:16px;
  }

  .header-icon{
    width:48px;
    height:48px;
    margin-bottom:10px;
  }

  .auth-header h2{
    font-size:22px;
  }

  .auth-form{
    gap:11px;
  }

  .input-wrap,
  .primary-btn,
  .google-btn{
    height:46px;
  }

  .auth-footer{
    margin-top:8px;
  }
}


/* =========================================================
   BRAND PANEL V6 — COPY + VISUAL MÁS PREMIUM
   ========================================================= */
@media (min-width:821px){
  .brand-content{
    max-width:650px;
  }

  .brand-content h1{
    font-size:clamp(54px,5.1vw,82px);
    line-height:.96;
    letter-spacing:-.055em;
    max-width:720px;
  }

  .brand-content h1 span{
    color:#f7f9fd;
  }

  .brand-content h1 em{
    background:linear-gradient(90deg,#1678ff 0%,#25a7ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 32px rgba(18,126,255,.08);
  }

  .brand-content>p{
    max-width:570px;
    color:#aeb9ca;
    line-height:1.75;
  }

  .brand-content>p strong{
    color:#dce5f2;
    font-weight:600;
  }

  .benefits{
    max-width:560px;
  }

  .benefit{
    grid-template-columns:54px minmax(0,1fr);
    gap:15px;
  }

  .benefit strong{
    font-size:14px;
    letter-spacing:-.01em;
  }

  .benefit small{
    max-width:420px;
    color:#8e9aac;
  }

  .brand-visual{
    right:-40px;
    bottom:40px;
    width:min(44vw,680px);
    height:520px;
    opacity:.85;
    pointer-events:none;
  }

  .brand-visual .cube,
  .brand-visual .cube-w{
    display:none!important;
  }

  .glow-disc{
    left:120px;
    bottom:45px;
    width:390px;
    height:120px;
    opacity:.55;
    border-color:rgba(31,125,255,.58);
    box-shadow:
      0 0 55px rgba(0,105,255,.20),
      inset 0 0 35px rgba(0,105,255,.08);
  }

  .beam{
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(20,117,255,.14) 12%,#167cff 52%,rgba(28,139,255,.28) 72%,transparent);
    filter:drop-shadow(0 0 7px rgba(22,129,255,.9));
    transform-origin:center;
  }

  .beam-1{
    width:620px;
    top:110px;
    left:-55px;
    transform:rotate(-43deg);
    opacity:.74;
  }

  .beam-2{
    width:540px;
    top:205px;
    left:35px;
    transform:rotate(-43deg);
    opacity:.38;
  }

  .beam-3{
    position:absolute;
    width:460px;
    top:300px;
    left:120px;
    transform:rotate(-43deg);
    opacity:.18;
  }

  .orb{
    position:absolute;
    border-radius:50%;
    filter:blur(28px);
    background:rgba(0,107,255,.18);
  }

  .orb-a{
    width:260px;
    height:260px;
    right:80px;
    bottom:80px;
  }

  .orb-b{
    width:180px;
    height:180px;
    left:100px;
    top:170px;
    background:rgba(0,76,255,.12);
  }

  .spark{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#4aa7ff;
    box-shadow:0 0 14px rgba(65,161,255,.95);
    opacity:.8;
  }

  .spark-1{right:95px;top:120px}
  .spark-2{right:170px;top:245px;width:3px;height:3px;opacity:.5}
  .spark-3{left:150px;bottom:155px;width:3px;height:3px}
  .spark-4{right:250px;bottom:90px;width:2px;height:2px;opacity:.45}

  .brand-bottom span{
    font-size:13px;
    font-weight:700;
    color:#e8eef7;
  }

  .brand-bottom small{
    color:#7f8c9e;
    letter-spacing:.01em;
  }
}

@media (min-width:821px) and (max-width:1180px){
  .brand-content h1{
    font-size:56px;
  }

  .brand-content>p{
    max-width:460px;
  }

  .brand-visual{
    right:-180px;
    opacity:.55;
  }
}


/* =========================================================
   V7 — LOGO REAL ARRIBA + LOGO FLOTANTE SOBRE EL ARO
   ========================================================= */
.brand-image-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo-img{
  width:118px;
  height:118px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 22px rgba(0,132,255,.22));
}

.floating-logo-wrap{
  position:absolute;
  left:165px;
  bottom:105px;
  width:255px;
  height:255px;
  display:grid;
  place-items:center;
  z-index:4;
  transform:translateZ(0);
  animation:wsFloat 4.8s ease-in-out infinite;
}

.floating-logo-wrap:before{
  content:"";
  position:absolute;
  width:185px;
  height:185px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,128,255,.18),rgba(0,93,255,.06) 52%,transparent 72%);
  filter:blur(8px);
}

.floating-brand-logo{
  position:relative;
  width:220px;
  height:220px;
  object-fit:contain;
  z-index:1;
  filter:
    drop-shadow(0 16px 18px rgba(0,0,0,.38))
    drop-shadow(0 0 22px rgba(0,122,255,.40))
    drop-shadow(0 0 55px rgba(0,91,255,.16));
}

@keyframes wsFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

@media (min-width:821px){
  .brand-top .brand-logo-img{
    width:112px;
    height:112px;
  }

  .glow-disc{
    bottom:35px!important;
    left:105px!important;
    width:400px!important;
    height:118px!important;
    opacity:.75!important;
    border-color:rgba(29,129,255,.72)!important;
    box-shadow:
      0 0 45px rgba(0,105,255,.24),
      0 0 90px rgba(0,80,255,.10),
      inset 0 0 35px rgba(0,105,255,.08)!important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  .floating-logo-wrap{
    left:120px;
    width:220px;
    height:220px;
  }
  .floating-brand-logo{
    width:190px;
    height:190px;
  }
}

@media (max-width:820px){
  .mobile-brand{
    min-height:92px;
  }

  .mobile-logo-img{
    width:86px;
    height:86px;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 0 18px rgba(0,132,255,.22));
  }

  .brand-logo-img,
  .floating-logo-wrap{
    display:none!important;
  }
}


/* =========================================================
   V8 — AJUSTES FINALES SOLICITADOS
   PC: contenido izquierdo más arriba
   MÓVIL: sin imagen/logo superior
   ========================================================= */

/* PC: subir el bloque principal izquierdo sin tocar el login */
@media (min-width:821px){
  .brand-content{
    margin-top:clamp(38px,5.5vh,72px) !important;
  }
}

/* Móvil: eliminar por completo la imagen superior */
@media (max-width:820px){
  .mobile-brand{
    display:none !important;
  }

  /* Al desaparecer el logo, aprovechamos el espacio y centramos el acceso */
  .form-panel{
    padding-top:20px !important;
  }

  .auth-card{
    min-height:calc(100dvh - 105px);
  }

  .auth-view[data-view="login"].active,
  .auth-view[data-view="otp"].active,
  .auth-view[data-view="forgot"].active,
  .auth-view[data-view="success"].active{
    margin-top:0 !important;
  }

  .auth-view[data-view="register"].active{
    margin-top:0 !important;
  }
}


/* V9 — únicamente subir un poco más el contenido izquierdo en PC */
@media (min-width:821px){
  .brand-content{
    margin-top:clamp(12px,2.5vh,34px) !important;
  }
}