/* ==========================================================================
   Telas de conta sem login (recuperar.html, confirmar-email.html).
   Mesma pegada da vitrine (css/planos.css) e do cadastro (css/cadastro.css):
   painel noite com os brilhos de água e gás à esquerda, formulário no papel
   à direita. No celular sobra só o formulário, com a marca em cima.

   Os JS destas páginas só ligam `.etapa.visivel`, `.msg.visivel.{erro,ok}`,
   o `aria-pressed` do `.ver-senha` e `style.display` dos formulários.
   ========================================================================== */

:root {
    --noite: #071029;
    --noite-borda: rgba(148, 176, 230, .16);
    --noite-texto: #e8eefb;
    --noite-apoio: #a7b6d4;

    --papel: #f6f8fc;
    --cartao: #ffffff;
    --tinta: #0b1733;
    --apoio: #4a5873;
    --suave: #64748b;
    --borda: #e3e8f1;

    --agua: #0284c7;
    --agua-clara: #38bdf8;
    --gas: #f97316;
    --ok: #059669;
    --perigo: #dc2626;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--papel); color: var(--tinta); line-height: 1.55;
    -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh;
}
h1, h2, .marca, .btn { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; letter-spacing: -.02em; }
a { color: inherit; text-decoration: none; }
:where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--agua-clara); outline-offset: 3px; border-radius: 8px; }
/* R-ZOOM: o toque duplo rápido num botão era lido como gesto de zoom. */
button, a, label, [role="button"] { touch-action: manipulation; }

/* ---------------------------------------------------------------- Estrutura */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Lado da marca */
.lado-marca {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--noite); color: var(--noite-texto);
    display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
    padding: 40px clamp(32px, 5vw, 72px);
}
.lado-marca::before, .lado-marca::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.lado-marca::before { width: 560px; height: 560px; left: -220px; top: -240px; background: rgba(2, 132, 199, .45); }
.lado-marca::after { width: 460px; height: 460px; right: -180px; bottom: -240px; background: rgba(249, 115, 22, .28); }
.malha {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(167, 182, 212, .14) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 30%, transparent 80%);
}
.marca { display: inline-flex; align-items: center; gap: 10px; font-size: 1.1875rem; font-weight: 800; white-space: nowrap; }
.marca img { width: 34px; height: 34px; border-radius: 9px; }
.marca .azul { color: var(--agua-clara); }
.marca .laranja { color: var(--gas); }
.lado-marca h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; max-width: 520px; text-wrap: balance; }
.lado-marca h2 .destaque {
    background: linear-gradient(92deg, var(--agua-clara) 0%, #7dd3fc 40%, var(--gas) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lado-marca .texto { color: var(--noite-apoio); font-size: 1.0625rem; margin-top: 18px; max-width: 460px; }
.lista { list-style: none; display: grid; gap: 12px; max-width: 460px; }
.lista li {
    display: flex; gap: 14px; align-items: center;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--noite-borda);
    border-radius: 16px; padding: 14px 16px;
}
.lista .icone { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(56, 189, 248, .14); color: var(--agua-clara); }
.lista .icone.gas { background: rgba(249, 115, 22, .16); color: #fdba74; }
.lista .icone.ok { background: rgba(74, 222, 128, .14); color: #86efac; }
.lista .icone svg { width: 19px; height: 19px; }
.lista strong { display: block; font-size: .9375rem; font-weight: 600; color: #fff; }
.lista small { display: block; font-size: .8125rem; color: var(--noite-apoio); }

/* ---------------------------------------------------------------- Lado do formulário */
.lado-form { display: grid; place-items: center; padding: 40px 20px; }
.caixa { width: 100%; max-width: 420px; }
/* Marca no topo só quando o painel escuro some. */
.marca-celular { display: none; margin-bottom: 32px; }
.marca-celular .azul { color: var(--agua); }
.marca-celular .laranja { color: #ea580c; }
@media (max-width: 900px) { .marca-celular { display: inline-flex; } .lado-form { place-items: start center; padding-top: 48px; } }

.etapa { display: none; }
.etapa.visivel { display: block; animation: entrar .5s var(--ease); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.sub { color: var(--apoio); font-size: 1rem; margin: 10px 0 28px; }
.etapa.centro { text-align: center; }
.etapa.centro .sub { margin-left: auto; margin-right: auto; max-width: 360px; }

.campo { margin-bottom: 16px; }
label { display: block; font-size: .8125rem; font-weight: 600; color: var(--tinta); margin-bottom: 6px; }
input {
    width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid #d5dde9;
    font-size: 1rem; font-family: inherit; color: var(--tinta); background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: #9aa6b8; }
input:hover { border-color: #b8c4d6; }
input:focus { outline: none; border-color: var(--agua); box-shadow: 0 0 0 4px rgba(2, 132, 199, .14); }
.ajuda { font-size: .8125rem; color: var(--suave); margin-top: 6px; }

.campo-senha { position: relative; display: flex; }
.campo-senha input { padding-right: 52px; }
.ver-senha {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; background: none; border-radius: 10px; cursor: pointer;
    color: var(--suave); display: grid; place-items: center;
}
.ver-senha:hover { color: var(--tinta); background: var(--papel); }
.ver-senha .olho-corte { display: none; }
.ver-senha[aria-pressed="true"] .olho-corte { display: block; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 54px; padding: 0 24px; margin-top: 8px; border: 0; border-radius: 999px;
    background: var(--gas); color: var(--tinta); font-size: 1.0625rem; font-weight: 700; line-height: 1;
    cursor: pointer; box-shadow: 0 10px 30px -10px rgba(249, 115, 22, .7);
    transition: transform .2s var(--ease), background-color .2s ease, opacity .2s ease;
}
.btn:hover:not(:disabled) { background: #fb8a3c; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.msg { display: none; border-radius: 12px; padding: 13px 16px; font-size: .9375rem; margin-top: 18px; font-weight: 500; }
.msg.visivel { display: block; }
.msg.erro { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.msg.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

.rodape { text-align: center; margin-top: 28px; font-size: .875rem; color: var(--apoio); }
.rodape a { color: var(--agua); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.rodape a:hover { color: var(--tinta); }

/* Selo de resultado (pronto / falhou) */
.selo {
    width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 24px;
}
.selo.ok { background: #dcfce7; color: var(--ok); box-shadow: 0 0 0 10px rgba(5, 150, 105, .08); }
.selo.ruim { background: #fee2e2; color: var(--perigo); box-shadow: 0 0 0 10px rgba(220, 38, 38, .08); }

.carregando { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--suave); padding: 24px 0; }
.carregando::before {
    content: ''; width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid var(--borda); border-top-color: var(--agua);
    animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* No fim do arquivo de propósito: `.lado-marca { display: flex }` está acima,
   e com a mesma especificidade quem vence é a regra que vem depois. */
@media (max-width: 900px) { .lado-marca { display: none; } }