em --mono 22px (o ao redor mantém a caixa acima). */
.senha-provisoria code {
font-size: 22px;
font-weight: 700;
}
.painel-senha-explicacao {
color: var(--ink-3);
font-size: 12.5px;
line-height: 1.55;
}
.titulo-secao {
font-size: 15px;
font-weight: 600;
letter-spacing: -.2px;
margin-bottom: 12px;
}
.painel-avisos-titulo {
font-weight: 600;
font-size: 13px;
margin-bottom: 6px;
}
.painel-erro {
text-align: center;
max-width: 560px;
margin: 60px auto;
padding: 40px 30px;
}
.painel-erro-codigo {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 8px;
}
.painel-erro-identificador {
margin-top: 14px;
font-size: 12px;
color: var(--ink-3);
}
.painel-erro-identificador code {
font-family: var(--mono);
}
.painel-em-construcao {
text-align: center;
padding: 40px 30px;
}
.painel-em-construcao-selo {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 99px;
background: var(--gold-soft);
color: var(--gold);
font-size: 11px;
font-weight: 600;
margin-bottom: 10px;
}
.painel-em-construcao-pacote {
color: var(--ink-3);
font-size: 12.5px;
margin-top: 10px;
}
/* títulos e avisos */
.titulo-pagina {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 600;
letter-spacing: -.5px;
color: var(--ink);
margin-bottom: 10px;
}
/* T4: respiro entre o eyebrow (D10) e o h1 dentro do page-head */
.page-head .titulo-pagina {
margin-top: 8px;
}
.carga-explicacao {
color: var(--ink-3);
font-size: 13.5px;
line-height: 1.55;
max-width: 64ch;
margin-bottom: 16px;
}
/* T14.5: dropzone da carga manual — o nasce dentro do
) */
.marca-naturgy {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gold);
}
/* ── tipografia utilitária ── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 10px;
font-weight: 600;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--cta);
}
.eyebrow::before {
content: "";
width: 20px;
height: 2px;
background: var(--cta);
border-radius: 2px;
}
/* ───────────────────────── (5) shell de acesso (gate) ───────────────────────── */
#gatehost {
position: fixed;
inset: 0;
z-index: 900;
display: grid;
place-items: center;
padding: 24px;
background: #00131F;
overflow: auto;
}
.amb {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* T16 (R4, E8): vídeo ambiente desfocado atrás do palco (mesmo arquivo do .brand-video) */
.amb-video {
position: absolute;
inset: -6%;
width: 112%;
height: 112%;
object-fit: cover;
filter: blur(34px) saturate(.9) brightness(.62);
transform: scale(1.08);
}
.amb-grain {
position: absolute;
inset: 0;
opacity: .5;
background-image: radial-gradient(circle, rgba(255, 255, 255, .26) 0 .6px, transparent .8px);
background-size: 6px 6px;
-webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .3) 58%, rgba(0, 0, 0, .7));
mask-image: linear-gradient(135deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .3) 58%, rgba(0, 0, 0, .7));
}
.amb-tint {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 7% 4%, rgba(229, 114, 0, .34) 0%, rgba(229, 114, 0, .10) 20%, transparent 38%),
radial-gradient(circle at 84% 24%, rgba(44, 194, 235, .20) 0%, transparent 40%),
linear-gradient(118deg, rgba(0, 45, 74, .62) 0%, rgba(0, 69, 113, .14) 44%, rgba(0, 19, 31, .62) 100%);
}
.amb-vignette {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 20, 36, .06), rgba(0, 20, 36, .3)),
radial-gradient(ellipse at center, transparent 28%, rgba(0, 15, 30, .6) 100%);
}
.gate-shell {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: min(1020px, calc(100vw - 44px));
}
.stage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: 100%;
/* T15.2 (GAP-3): altura fixa cortava telas com mais campos (/primeiro-acesso/outra-forma);
agora acompanha o conteúdo, com piso e teto. */
height: auto;
min-height: 604px;
max-height: calc(100dvh - 48px);
border-radius: var(--r-xl);
overflow: hidden;
background:
radial-gradient(ellipse at 7% 5%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .36) 34%, transparent 60%),
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, .84) 0%, rgba(205, 235, 250, .72) 48%, rgba(236, 248, 255, .78) 100%);
box-shadow: 0 34px 100px rgba(0, 23, 38, .36);
backdrop-filter: blur(30px) saturate(1.2);
-webkit-backdrop-filter: blur(30px) saturate(1.2);
}
/* T16 (E9): transição de saída no submit do login — site.js liga .leaving no .stage */
.stage.leaving .gate {
transform: translateX(-3%);
opacity: 0;
}
.stage.leaving .show {
transform: translateX(3%);
opacity: .2;
filter: blur(5px);
}
.stage .gate, .stage .show {
transition: transform .7s cubic-bezier(.7, 0, .3, 1), opacity .6s ease, filter .6s ease;
}
.gate {
/* T15.2 (GAP-3): justify-content:center recortava o topo do conteúdo quando ele não cabe
(bug clássico de flex + overflow:auto); o .gate-in já centraliza com margin:auto. */
position: relative;
order: 1;
display: flex;
flex-direction: column;
padding: 34px 48px 30px;
overflow-y: auto;
}
.gate-in {
width: 100%;
max-width: 400px;
margin: auto;
}
/* T16: logo (D3 mantém o SVG colorido, ao contrário do .mk-naturgy mono do protótipo — só o
respiro embaixo é o mesmo) + régua divisória antes do título */
.gate-in > .marca-naturgy {
margin-bottom: 14px;
}
.gate-rule {
height: 1px;
margin: 0 0 22px;
background: linear-gradient(90deg, rgba(0, 69, 113, .2), rgba(255, 255, 255, .62) 62%, transparent);
}
.gate h1, .gate h2 {
color: #152D3D;
font-size: 33px;
font-weight: 600;
letter-spacing: -1.15px;
line-height: 1.08;
margin: 0 0 9px;
}
.gate .lead {
color: #697780;
font-size: 13.5px;
line-height: 1.55;
margin-bottom: 24px;
}
.field {
position: relative;
margin-bottom: 13px;
}
.field input {
width: 100%;
height: 55px;
padding: 22px 16px 8px;
font-size: 14.5px;
color: #102D3E;
background: rgba(255, 255, 255, .54);
border: 1px solid rgba(255, 255, 255, .76);
border-radius: 13px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 4px 14px rgba(0, 69, 113, .035);
transition: border-color .18s, background .18s, box-shadow .18s;
}
.field input:hover {
border-color: #fff;
background: rgba(255, 255, 255, .68);
}
.field input:focus {
outline: none;
border-color: #004571;
background: rgba(255, 255, 255, .9);
box-shadow: 0 0 0 4px rgba(0, 69, 113, .1), 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);
}
/* T21.4 (GAP-4, R14): .field label não declara text-transform/letter-spacing/font-weight, então
essas 3 propriedades vazavam de .form-label (D7, uppercase 9.5px/1.5px/600) — o rótulo em
repouso saía em caixa alta espaçada. Reforço com a classe .form-label no seletor, especificidade
(0,2,1), maior que .form-label (0,1,0). */
.field label.form-label {
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-size: 14px;
color: #74818A;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label {
top: 8px;
font-size: 10.5px;
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: #8A5A05;
}
.caps.on {
display: flex;
}
.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;
flex: none;
display: grid;
place-items: center;
border: 1.5px solid #C4CDD2;
border-radius: 6px;
background: #fff;
transition: .16s;
}
.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: 0 0 0 3px rgba(8, 122, 195, .32);
}
/* T16: linha do "Manter conectado" + "Esqueci minha senha" (Login), e os links avulsos do
.gate-alt (Login e demais telas de acesso, junto com .cartao-acesso-links a) */
.gate-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 4px 0 20px;
}
.linky {
font-size: 13px;
font-weight: 600;
color: #004571;
text-decoration: none;
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
.linky:hover {
color: #C75F00;
text-decoration: underline;
}
/* botão primário do gate: azul que se preenche de laranja da esquerda p/ direita */
.go {
position: relative;
width: 100%;
height: 54px;
border: 0;
border-radius: 13px;
cursor: pointer;
font-family: var(--font);
font-size: 15px;
font-weight: 600;
letter-spacing: .2px;
color: #fff;
background: #004571;
overflow: hidden;
isolation: isolate;
box-shadow: 0 10px 25px rgba(0, 69, 113, .22);
transition: box-shadow .16s;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.go::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
transform: translateX(-101%);
background: linear-gradient(90deg, #D96800 0%, #E57200 54%, #F08A24 100%);
transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
.go:hover, .go:focus-visible {
box-shadow: 0 13px 30px rgba(229, 114, 0, .3);
color: #fff;
}
.go:hover::before, .go:focus-visible::before {
transform: translateX(0);
}
/* T16: rótulo + seta (some no .busy) e o spinner que aparece no lugar (E9: site.js liga .busy
no submit do login enquanto a requisição real vai ao servidor) */
.go .lbl {
display: inline-flex;
align-items: center;
gap: 10px;
transition: opacity .2s;
}
.go .lbl svg {
width: 17px;
transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.go:hover .lbl svg, .go:focus-visible .lbl svg {
transform: translateX(4px);
}
.go .spin {
position: absolute;
inset: 0;
display: none;
place-items: center;
}
.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: spin .7s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.gate-alt {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid rgba(0, 69, 113, .12);
list-style: none;
}
.gate-alt li {
display: inline-flex;
}
.gate-alt a {
font-size: 13px;
font-weight: 600;
color: #004571;
text-decoration: none;
}
.gate-alt a:hover {
color: #C75F00;
text-decoration: underline;
}
/* palco: painel escuro da marca, com o vídeo (T16, R4: E8) atrás do texto */
.show {
position: relative;
order: 2;
overflow: hidden;
min-width: 0;
margin: 10px 10px 10px 0;
border-radius: 23px;
background: #102D3D;
box-shadow: 0 10px 30px rgba(0, 32, 52, .12);
}
.brand-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.show::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0, 25, 40, .72) 0%, rgba(0, 30, 49, .46) 54%, rgba(0, 25, 40, .12) 100%),
linear-gradient(180deg, rgba(0, 25, 40, .02) 20%, rgba(0, 30, 49, .18) 52%, rgba(0, 25, 40, .78) 100%);
}
.show-in {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 38px 40px;
}
.pitch {
max-width: 430px;
}
/* T21.7 (R14): animações "rise" do protótipo, h1/p/pulse entram com opacidade 0 e
translateY(18px), subindo em cascata (animation-delay crescente); prefers-reduced-motion
zera a duração via a regra global (seção 11) e, abaixo, fixa opacity:1/transform:none para
não deixar o conteúdo "piscando" invisível durante o delay.
T24.1 (R17): a etiqueta ".eyebrow" ("XML e DANFE em um clique") saiu do palco; o h1 assumiu o
primeiro delay e os demais blocos foram reindexados uma casa para trás. */
.pitch h1 {
margin: 20px 0 0;
color: #fff;
font-size: clamp(30px, 3.3vw, 46px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -1.8px;
text-shadow: 0 3px 24px rgba(0, 15, 28, .72), 0 1px 3px rgba(0, 0, 0, .5);
opacity: 0;
transform: translateY(18px);
animation: rise 1s .4s cubic-bezier(.2, .8, .2, 1) forwards;
}
.pitch h1 b {
font-weight: 700;
}
.pitch p {
margin-top: 16px;
max-width: 400px;
font-size: 13.5px;
line-height: 1.6;
color: rgba(255, 255, 255, .94);
text-shadow: 0 2px 10px rgba(0, 15, 28, .72);
opacity: 0;
transform: translateY(18px);
animation: rise 1s .52s cubic-bezier(.2, .8, .2, 1) forwards;
}
/* T16 (E3): os 3 contadores do palco, fatos estáticos e verdadeiros, animados por countTo()
em site.js a partir de data-count-to; o .dotlive fica só no primeiro item.
T24.2 (R17): gap reduzido de 32px para 24px para os 3 rótulos caberem numa linha em 1280px. */
.pulse {
display: flex;
gap: 24px;
margin-top: 32px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .16);
opacity: 0;
transform: translateY(18px);
animation: rise 1s .64s cubic-bezier(.2, .8, .2, 1) forwards;
}
/* T24.2 (R17): cada item encolhe (min-width:0) para o texto do rótulo poder quebrar dentro do
próprio item em vez de estourar a largura do palco. */
.pulse > div {
min-width: 0;
flex: 1;
}
.pulse .p-v {
display: flex;
align-items: baseline;
gap: 3px;
font-family: var(--mono);
font-size: 23px;
font-weight: 500;
color: #fff;
font-variant-numeric: tabular-nums;
}
.pulse .p-v i {
font-style: normal;
font-size: 13px;
color: #FF9900;
}
.pulse .p-k {
margin-top: 3px;
font-size: 12.5px;
letter-spacing: .2px;
line-height: 1.35;
color: rgba(255, 255, 255, .82);
}
.dotlive {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 6px;
vertical-align: middle;
border-radius: 50%;
background: #42D18A;
animation: blip 2.2s ease-in-out infinite;
}
@keyframes blip {
0%, 100% {
box-shadow: 0 0 0 0 rgba(66, 209, 138, .55);
}
50% {
box-shadow: 0 0 0 6px rgba(66, 209, 138, 0);
}
}
@keyframes rise {
to {
opacity: 1;
transform: none;
}
}
/* T16 (E4): o .gate-foot do gate ganha 2 linhas dentro do