/* ==========================================================================
   TL-01 · Acesso ao CONNECTA
   Réplica do protótipo v2 ("Login 2026 · modal claro, vídeo e linguagem premium").
   As regras abaixo são o resultado já achatado da cascata do protótipo: base do
   cartão dividido + o bloco de sobreposição que dá o vidro, o vídeo e o laranja.
   ========================================================================== */

html,body{height:100%}
body{
  position:relative;isolation:isolate;display:grid;place-items:center;padding:24px;overflow:auto;
  font-family:var(--ng-font);color:var(--ng-ink);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 8% 12%,rgba(0,69,113,.08),transparent 31rem),
    radial-gradient(circle at 92% 88%,rgba(229,114,0,.08),transparent 29rem),
    #F4F6F7;
}

/* ── fundo ambiente: o vídeo da marca desfocado atrás de tudo ─────────────── */
.ambient-video{
  position:fixed;z-index:-3;inset:-6%;width:112%;height:112%;object-fit:cover;
  filter:blur(34px) saturate(.88) brightness(.72);transform:scale(1.08);
  opacity:1;pointer-events:none}
.ambient-texture{position:fixed;z-index:-2;inset:0;pointer-events:none;opacity:.58;
  background-image:radial-gradient(circle,rgba(255,255,255,.32) 0 .65px,transparent .8px);
  background-size:6px 6px;
  -webkit-mask-image:linear-gradient(135deg,rgba(0,0,0,.92),rgba(0,0,0,.38) 58%,rgba(0,0,0,.72));
  mask-image:linear-gradient(135deg,rgba(0,0,0,.92),rgba(0,0,0,.38) 58%,rgba(0,0,0,.72))}
.ambient-overlay{position:fixed;z-index:-1;inset:0;pointer-events:none;background:
  radial-gradient(circle at 7% 4%,rgba(229,114,0,.48) 0%,rgba(229,114,0,.14) 18%,transparent 34%),
  radial-gradient(circle at 82% 22%,rgba(44,194,235,.24) 0%,transparent 38%),
  linear-gradient(118deg,rgba(0,45,74,.52) 0%,rgba(0,69,113,.10) 43%,rgba(0,22,42,.40) 100%);
  mix-blend-mode:soft-light}
.ambient-overlay::after{position:absolute;inset:0;content:'';pointer-events:none;background:
  linear-gradient(180deg,rgba(0,20,36,.04),rgba(0,20,36,.28)),
  radial-gradient(ellipse at center,transparent 30%,rgba(0,15,30,.58) 100%)}

/* ── cartão ──────────────────────────────────────────────────────────────── */
.login-shell{display:flex;flex-direction:column;align-items:center;gap:14px;
  width:min(1020px,calc(100vw - 48px))}
.stage{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  width:100%;height:min(660px,calc(100dvh - 92px));
  min-height:610px;border:0;border-radius:28px;overflow:hidden;
  background:
    radial-gradient(ellipse at 7% 5%,rgba(255,255,255,.90) 0%,rgba(255,255,255,.34) 34%,transparent 59%),
    radial-gradient(ellipse at 94% 92%,rgba(153,213,243,.52) 0%,rgba(191,230,248,.24) 46%,transparent 70%),
    linear-gradient(142deg,rgba(235,248,255,.82) 0%,rgba(205,235,250,.70) 48%,rgba(236,248,255,.76) 100%);
  box-shadow:0 34px 100px rgba(0,23,38,.34);
  backdrop-filter:blur(30px) saturate(1.20);-webkit-backdrop-filter:blur(30px) saturate(1.20)
}
.stage .show,.stage .gate{
  transition:transform .7s cubic-bezier(.7,0,.3,1),opacity .6s ease,filter .6s ease}
.stage.leaving .show{transform:translateX(3%);opacity:.2;filter:blur(5px)}
.stage.leaving .gate{transform:translateX(-3%);opacity:0}

/* ── painel da marca (vídeo do planeta) ──────────────────────────────────── */
.show{order:2;position:relative;overflow:hidden;min-width:0;margin:10px 10px 10px 0;
  border:0;border-radius:23px;background:#102D3D;
  box-shadow:0 10px 30px rgba(0,32,52,.12);touch-action:auto}
.show::after{position:absolute;z-index:1;inset:0;content:'';pointer-events:none;
  background:linear-gradient(180deg,rgba(0,25,40,.04) 30%,rgba(0,30,49,.74) 100%)}
.brand-video{position:absolute;z-index:0;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;background:#102D3D}
/* O painel da marca do protótipo v2 fica SÓ com o vídeo: o bloco de texto existe na
   estrutura e é escondido pela camada "Login 2026" (`.show-in{display:none!important}`).
   Réplica fiel = o mesmo silêncio — o planeta não disputa atenção com o formulário. */
.show-in{display:none;position:relative;z-index:2;height:100%;flex-direction:column;
  padding:44px 56px;color:#fff;pointer-events:none}
.pitch{max-width:470px;margin-top:auto}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;
  border:1px solid rgba(255,255,255,.36);border-radius:999px;background:rgba(0,45,74,.22);
  backdrop-filter:blur(12px);color:#fff;font-size:11px;font-weight:600;letter-spacing:1.6px;
  text-transform:uppercase;
  opacity:0;transform:translateY(18px);animation:sobe .9s .40s cubic-bezier(.2,.8,.2,1) forwards}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:#B65B00;
  box-shadow:0 0 0 4px rgba(229,114,0,.20)}
.pitch h1{max-width:450px;margin:20px 0 0;color:#fff;font-size:clamp(36px,4vw,52px);
  font-weight:500;line-height:1.1;letter-spacing:-2px;text-shadow:0 2px 18px rgba(0,26,42,.18);
  opacity:0;transform:translateY(18px);animation:sobe 1s .52s cubic-bezier(.2,.8,.2,1) forwards}
.pitch h1 b{font-weight:650}
.pitch p{max-width:410px;margin-top:17px;color:rgba(255,255,255,.78);font-size:14px;line-height:1.55;
  opacity:0;transform:translateY(18px);animation:sobe 1s .64s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes sobe{to{opacity:1;transform:none}}

/* ── portão: o formulário ────────────────────────────────────────────────── */
.gate{order:1;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:transparent}
.gate-top{position:absolute;z-index:5;top:24px;right:25px;padding:0;
  display:flex;align-items:center;justify-content:flex-end;gap:12px}
.gate-b{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:470px;margin:auto;padding:34px 48px 30px}
/* S14a · o lockup oficial: Naturgy | Connecta, em azul sobre o painel claro do portão. */
.gate-logo{display:flex;align-items:center;gap:13px;width:auto;min-height:46px;margin:0 0 14px}
.gate-logo__naturgy{display:block;width:126px;height:auto;object-fit:contain;object-position:left center}
.gate-logo i{width:1px;height:26px;flex:none;background:rgba(0,69,113,.28)}
.gate-logo__connecta{display:block;width:112px;height:auto}
.logo-divider{width:100%;height:1px;margin:0 0 22px;
  background:linear-gradient(90deg,rgba(0,69,113,.18),rgba(255,255,255,.62) 62%,transparent)}
.gate-b h2{margin:10px 0 9px;color:#152D3D;font-size:36px;font-weight:600;
  letter-spacing:-1.25px;line-height:1.08}
.gate-b .lead{margin-bottom:24px;color:#697780;font-size:14px;line-height:1.55}

/* ── campos com label flutuante ──────────────────────────────────────────── */
.field{position:relative;margin-bottom:13px}
.field input{width:100%;height:55px;padding:22px 16px 8px;font-size:14.5px;font-family:var(--ng-font);
  color:#102D3E;background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.76);
  border-radius:13px;transition:border-color .18s,background .18s,box-shadow .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 4px 14px rgba(0,69,113,.035)}
.field input:hover{border-color:#fff;background:rgba(255,255,255,.67)}
.field input:focus-visible{outline:none;border-color:#004571;background:rgba(255,255,255,.88);
  box-shadow:var(--ng-focus),inset 0 1px 0 #fff}
.field label{position:absolute;left:17px;top:18px;font-size:14px;color:#74818A;
  pointer-events:none;transition:all .16s cubic-bezier(.2,.8,.2,1)}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{top:8px;font-size:11px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;color:#004571}
.field .eye{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border:0;background:none;cursor:pointer;color:#78858D;display:grid;place-items:center;border-radius:9px}
.field .eye:hover{background:rgba(0,69,113,.07);color:#004571}
.field .eye svg{width:19px;height:19px}
.caps{display:none;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--ng-amber-700)}
.caps.on{display:flex}

/* ── manter conectado + esqueci minha senha ──────────────────────────────── */
.row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px;gap:12px}
.check{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:#5E6C74;
  cursor:pointer;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .bx{width:19px;height:19px;border:1.5px solid #C4CDD2;border-radius:6px;flex:none;
  display:grid;place-items:center;transition:.16s;background:#fff}
.check input:checked + .bx{background:#004571;border-color:#004571}
.check .bx svg{width:12px;height:12px;color:#fff;opacity:0;transition:.16s}
.check input:checked + .bx svg{opacity:1}
.check input:focus-visible + .bx{box-shadow:var(--ng-focus)}
.link{font-size:13px;color:#004571;text-decoration:none;font-weight:600}
.link:hover{color:#C75F00;text-decoration:underline}

/* ── botão Entrar: o calor sobe da esquerda para a direita ───────────────── */
.go{position:relative;width:100%;height:54px;border:0;border-radius:13px;cursor:pointer;
  font-family:var(--ng-font);font-size:15px;font-weight:600;color:#fff;letter-spacing:.2px;
  background:#004571;overflow:hidden;isolation:isolate;
  box-shadow:0 10px 25px rgba(0,69,113,.22);transition:transform .16s,box-shadow .16s}
.go::before{content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-101%);
  background:linear-gradient(90deg,#D96800 0%,#B65B00 54%,#F08A24 100%);
  transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.go:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(229,114,0,.30)}
.go:hover::before{transform:translateX(0)}
.go:active{transform:translateY(0)}
.go[disabled]{cursor:wait;opacity:.9;transform:none}
.go .lbl{display:inline-flex;align-items:center;gap:10px;transition:opacity .2s}
.go .lbl svg{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.go:hover .lbl svg{transform:translateX(4px)}
.go .spin{position:absolute;inset:0;display:none;place-items:center}
/* estado ocupado: o laranja preenche e o rótulo vira "Entrando…" */
.go.busy::before{transform:translateX(0)}
.go.busy .lbl{opacity:0}
.go.busy .spin{display:grid}
.spin i{width:19px;height:19px;border:2.2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;display:block;animation:girando .7s linear infinite}
@keyframes girando{to{transform:rotate(360deg)}}

/* ── divisor e SSO ───────────────────────────────────────────────────────── */
.sep{display:flex;align-items:center;gap:14px;margin:18px 0;color:#fff;font-size:11px;
  letter-spacing:1.4px;text-transform:uppercase}
.sep::before,.sep::after{content:'';flex:1;height:1px;background:var(--ng-line)}
.sso{width:100%;height:52px;border:1.5px solid rgba(255,255,255,.78);border-radius:13px;
  background:rgba(255,255,255,.48);font-family:var(--ng-font);font-size:14px;font-weight:600;
  color:#294453;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;
  transition:.18s;box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 4px 14px rgba(0,69,113,.035)}
.sso:hover{border-color:#fff;color:#004571;background:rgba(255,255,255,.70)}
.sso svg{width:18px;height:18px}
/* flag desligada: presente, esmaecido e inoperante — a Naturgy ainda não liberou o tenant */
.sso[disabled]{cursor:not-allowed;opacity:.55;filter:grayscale(.65)}
.sso[disabled]:hover{border-color:rgba(255,255,255,.78);color:#294453;background:rgba(255,255,255,.48)}

/* ── banner de erro e aviso de sessão ────────────────────────────────────── */
.err{display:flex;align-items:center;gap:9px;background:#FFF7F5;color:var(--ng-red-700);
  border:1px solid #F0D5CF;border-radius:12px;padding:11px 14px;font-size:12.5px;margin-bottom:16px;
  animation:tremor .4s}
.err svg{width:16px;flex:none}
@keyframes tremor{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-4px)}}
.aviso-sessao{margin:0 0 18px;font-size:12.5px;line-height:1.5;color:#8A5A05;
  background:#FDF6E7;border-radius:8px;padding:9px 12px}
.aviso-sessao b{color:#6B4405}

/* ── rodapé de segurança ─────────────────────────────────────────────────── */
.modal-foot{display:flex;align-items:center;justify-content:center;gap:9px;margin:0;
  color:rgba(255,255,255,.72);font-size:11.5px;letter-spacing:.05px;text-align:center;
  text-shadow:0 1px 8px rgba(0,24,40,.28)}
.modal-foot svg{width:15px;height:15px;color:#B65B00;flex:none;
  filter:drop-shadow(0 2px 5px rgba(229,114,0,.24))}

/* ── splash de entrada com a marca ───────────────────────────────────────── */
.entry-splash{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;overflow:hidden;
  visibility:hidden;opacity:0;pointer-events:none;
  background:linear-gradient(135deg,#00192C 0%,#003B63 46%,#075F91 100%);
  transition:opacity .38s ease,visibility .38s ease}
.entry-splash::before{position:absolute;inset:-25%;content:'';opacity:.74;
  background:
    radial-gradient(circle at 72% 24%,rgba(32,151,210,.36),transparent 34%),
    radial-gradient(circle at 18% 82%,rgba(0,34,58,.74),transparent 38%);
  animation:brilhoSplash 2.4s ease-in-out infinite alternate}
.entry-splash.is-active{visibility:visible;opacity:1;pointer-events:auto}
.entry-brand{position:relative;isolation:isolate;width:clamp(190px,22vw,248px);aspect-ratio:125/55}
.entry-name-window{position:absolute;z-index:3;inset:0 20% 0 0;overflow:hidden;contain:strict;
  pointer-events:none;transform:translateZ(0);backface-visibility:hidden}
.entry-name-img{position:absolute;inset:0 auto 0 0;width:125%;height:100%;max-width:none;
  object-fit:fill;user-select:none;-webkit-user-drag:none}
.entry-wings-window{position:absolute;z-index:1;top:0;right:0;width:20%;height:100%;
  overflow:hidden;contain:strict;isolation:isolate;pointer-events:none}
.entry-wing-img{position:absolute;z-index:1;top:0;right:0;width:500%;height:100%;max-width:none;
  object-fit:fill;transform-origin:80.5% 50%;will-change:opacity,transform;
  user-select:none;-webkit-user-drag:none}
.entry-state-open{opacity:1}
.entry-state-closed{opacity:0}
.entry-splash.is-active .entry-state-open{animation:asaAberta 1.38s .48s cubic-bezier(.4,0,.2,1) 1 both}
.entry-splash.is-active .entry-state-closed{animation:asaFechada 1.38s .48s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes brilhoSplash{to{transform:translate3d(2%,-1.5%,0) scale(1.04)}}
@keyframes asaAberta{
  0%,18%{opacity:1;transform:scaleX(1)} 42%{opacity:.20;transform:scaleX(.76)}
  50%,56%{opacity:0;transform:scaleX(.68)} 74%{opacity:1;transform:scaleX(1.025)}
  88%{opacity:1;transform:scaleX(.992)} 100%{opacity:1;transform:scaleX(1)}}
@keyframes asaFechada{
  0%,32%{opacity:0;transform:scaleX(.78)} 48%,58%{opacity:1;transform:scaleX(1)}
  72%{opacity:.16;transform:scaleX(.90)} 80%,100%{opacity:0;transform:scaleX(.82)}}

/* ── placeholder público (esqueci minha senha) ───────────────────────────── */
.publico{position:relative;z-index:1;width:min(560px,calc(100vw - 48px));background:#fff;
  border-radius:22px;padding:38px 42px;box-shadow:0 34px 100px rgba(0,23,38,.34)}
.publico .selo{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--ng-orange-600);
  background:var(--ng-orange-100);border-radius:999px;padding:5px 11px}
.publico h1{margin:16px 0 10px;font-size:26px;font-weight:600;letter-spacing:-.7px;color:var(--ng-blue-600)}
.publico p{font-size:13.5px;line-height:1.65;color:var(--ng-ink-3)}
.publico .voltar{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;
  font-weight:600;color:var(--ng-blue-600);text-decoration:none}
.publico .voltar:hover{color:var(--ng-orange-600);text-decoration:underline}

/* ── responsivo (RNF-07) ─────────────────────────────────────────────────── */
@media (max-width:900px){
  body{padding:18px;background:transparent}
  .login-shell{width:min(520px,calc(100vw - 32px));gap:9px;padding:0}
  .stage{grid-template-columns:1fr;width:100%;height:auto;min-height:0;border-radius:24px;
    box-shadow:0 24px 70px rgba(0,23,38,.32)}
  .show{order:1;min-height:clamp(150px,23vh,190px);margin:7px 7px 0;border-radius:18px}
  .gate{order:2;overflow:visible}
  .gate-top{top:18px;right:20px}
  .gate-b{max-width:520px;padding:26px clamp(28px,7vw,42px) 30px}
  .gate-logo{margin-bottom:15px}
  .gate-logo__naturgy{width:108px}
  .gate-logo__connecta{width:98px}
  .logo-divider{margin-bottom:22px}
  .gate-b h2{font-size:30px}
  .gate-b .lead{margin-bottom:24px}
}
@media (max-width:560px){
  body{padding:12px}
  .login-shell{width:100%;max-width:400px;gap:8px}
  .stage{border-radius:21px}
  .show{min-height:132px;margin:6px 6px 0;border-radius:16px}
  .gate-top{top:14px;right:16px}
  .gate-b{padding:22px 22px 25px}
  .gate-logo{gap:10px;margin-bottom:12px}
  .gate-logo__naturgy{width:94px}
  .gate-logo__connecta{width:84px}
  .logo-divider{margin-bottom:18px}
  .gate-b h2{font-size:27px}
  .gate-b .lead{margin-bottom:19px;font-size:12.5px}
  .field{margin-bottom:12px}
  .field input{height:48px}
  .row{flex-direction:column;align-items:flex-start;gap:12px;margin:3px 0 18px}
  .go{height:48px}
  .sep{margin:16px 0}
  .sso{height:46px;font-size:12px}
  .modal-foot{font-size:11px}
  .publico{padding:26px 22px}
}
@media (prefers-reduced-motion:reduce){
  .brand-video,.ambient-video{display:none}
  .eyebrow,.pitch h1,.pitch p{opacity:1;transform:none}
}

/* ── telas públicas do S02 (esqueci, ativar, redefinir, token inválido) ──── */
.publico-logo{display:block;width:132px;height:auto;margin:0 0 18px}
.publico .neutro{background:var(--ng-blue-050);border:1px solid var(--ng-blue-100);border-radius:11px;
  padding:13px 15px;font-size:13.5px;line-height:1.6;color:var(--ng-ink-2);margin-top:6px}
.publico .regra{font-size:11.5px;color:var(--ng-ink-4);line-height:1.55;margin:2px 0 18px}
.publico .field{margin-bottom:13px}
.publico .go{margin-top:4px}
/* aviso verde de conta ativada / senha redefinida na TL-01 (A5) */
.aviso-ok-acesso{margin:0 0 18px;font-size:12.5px;line-height:1.5;color:#0B5C36;
  background:#E7F5EC;border:1px solid #BFE3CD;border-radius:10px;padding:10px 13px}