/* ============================================================================
   UNICORNIO — marca.css · a identidade visual da marca (tokens + base)
   TEMA CLARO (07/07): fundo branco INTENCIONAL, leve e limpo ("menos é mais").
   A logo manda: unicórnio low-poly de chifre dourado. Regra do par de cores:
   VERDE = ação/confirmação · CIANO = link/foco/informação · DOURADO = detalhe nobre.
   REGRA DE COR (virada clara): a cor VIVA continua existindo, mas TROCA DE EMPREGO —
   tom vivo só em PREENCHIMENTO (com texto escuro por cima); quando a cor é o próprio
   TEXTO/BORDA, entra a versão mais fechada da MESMA família (legível no branco, AA).
   ========================================================================== */

:root {
  /* SUPERFÍCIES — rampa clara (papel quente → cartão branco → campo recuado).
     Nunca branco puro chapado em tudo: a PÁGINA é um branco quente; o CARTÃO é
     branco puro que "flutua" sobre ela; o CAMPO recua um tom (caixa a preencher). */
  --grafite-0: #f2f0ea;          /* palco recuado (tela de entrada) */
  --grafite-1: #faf9f6;          /* fundo da página (branco quente intencional) */
  --grafite-2: #ffffff;          /* superfície: cartões (branco puro) */
  --grafite-3: #f4f3ef;          /* superfície recuada / campos */
  --fio: #e4e0d5;                /* linha/divisor DECORATIVO (leve) */
  --fio-forte: #8e8570;          /* borda FUNCIONAL (campo, botão neutro) — aparece sozinha */

  /* tinta (texto) — alto contraste sobre o papel claro */
  --branco: #1a1811;             /* tinta de TÍTULO (nome herdado; hoje guarda tinta escura) */
  --prata: #4a473f;              /* tinta do texto corrente */
  --prata-escura: #6b675e;       /* apagado/mudo/legenda */

  /* o par de cores da logo — TEXTO (fechado, legível) + VIVO (preenchimento) */
  --neon-verde: #3d7a12;         /* VERDE texto/ícone/borda (AA no branco) */
  --neon-verde-vivo: #7ed321;    /* VERDE preenchimento (texto escuro por cima) */
  --neon-verde-tinta: #101c04;   /* texto escuro sobre o verde vivo */
  --neon-ciano: #086f91;         /* CIANO texto/borda/foco (AA no branco) */
  --neon-ciano-vivo: #2bb8e6;    /* CIANO preenchimento/realce (texto escuro por cima) */
  --verde-veu: rgba(126, 211, 33, .12);
  --ciano-veu: rgba(43, 184, 230, .12);

  /* estados de apoio — texto fechado + versão viva p/ preenchimento */
  --ambar: #8a6a12;              /* âmbar TEXTO (atenção) */
  --ambar-vivo: #e8b339;         /* âmbar preenchimento (selo) */
  --vermelho: #c43d2e;           /* vermelho TEXTO (erro/perigo) */
  --vermelho-vivo: #e5604f;      /* vermelho só grafismo/borda grande (nunca texto pequeno) */
  --roxo: #6b46c1;               /* roxo TEXTO (legível no branco) */
  --roxo-vivo: #a78bfa;          /* roxo só grafismo (ex.: marcador de feriado no calendário) */

  /* o DOURADO — o acento NOBRE/premium (logo, ações nobres). RARO de propósito. */
  --ouro: #8a6a1f;               /* dourado TEXTO/BORDA/realce (legível no branco) */
  --ouro-claro: #b8965b;         /* dourado decorativo (hover/gradiente) — nunca carrega texto só */
  --ouro-escuro: #3a2c0c;        /* texto escuro sobre o dourado vivo */
  --ouro-vivo: #cdab63;          /* dourado preenchimento sólido (texto escuro por cima) */
  --ouro-veu: rgba(205, 171, 99, .14);

  /* ── SISTEMA DE SUPERFÍCIES (um só, igual em toda página) ────────────────
     Página (body) → SEÇÃO/menu → CARTÃO → CAMPO. No claro a separação é por
     BRILHO + hairline (cartão branco puro sobre papel quente), não por caixa. */
  --sup-secao:  #faf9f6;
  --sup-cartao: #ffffff;
  --sup-campo:  #f4f3ef;
  /* o fio de luz do topo do cartão não existe no claro (linha clara some no branco) */
  --fio-luz: transparent;
  --larg-conteudo: 980px;
  --esp-1: .375rem; --esp-2: .625rem; --esp-3: .875rem; --esp-4: 1.375rem; --esp-5: 1.875rem;

  /* formas: facetas (chanfro), não cantos redondos genéricos */
  --corte: 11px;
  --corte-botao: 7px;
  --chanfro: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)),
                     calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
  --chanfro-botao: polygon(var(--corte-botao) 0, 100% 0,
                           100% calc(100% - var(--corte-botao)),
                           calc(100% - var(--corte-botao)) 100%, 0 100%,
                           0 var(--corte-botao));

  /* tipografia da marca (Unbounded = display angular · Sora = corpo tech) */
  --fonte-display: "Unbounded", "Sora", sans-serif;
  --fonte-corpo: "Sora", "Segoe UI", sans-serif;

  /* sombras suaves (substituem os glows neon do tema escuro) */
  --sombra-cartao: 0 1px 2px rgba(26, 24, 17, .04), 0 6px 18px rgba(26, 24, 17, .06);
  --glow-duplo: drop-shadow(0 8px 22px rgba(26, 24, 17, .10));
}

/* ---------------- base ---------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  /* fundo claro e LIMPO: um leve brilho no topo esvai para o papel quente. Sem
     véus neon, sem lajes — o respiro é o próprio branco. */
  background:
    radial-gradient(1100px 560px at 50% -200px, #ffffff 0%, transparent 70%),
    var(--grafite-1);
  background-attachment: fixed;
  color: var(--prata);
  font: 15.5px/1.55 var(--fonte-corpo);
}
main { max-width: var(--larg-conteudo); margin: 0 auto; padding: 18px 16px; }
a { color: var(--neon-ciano); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 {
  font-family: var(--fonte-display); font-weight: 500; font-size: 1.25rem;
  color: var(--branco); letter-spacing: .01em; margin: 0 0 6px;
}
h2 {
  font-size: .82rem; margin: 30px 0 12px; color: var(--prata);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
h2::before {   /* a faceta que abre cada seção — grafismo VIVO (não é texto) */
  content: ""; width: 16px; height: 8px; flex: none;
  background: linear-gradient(135deg, var(--neon-ciano-vivo), var(--neon-verde-vivo));
  clip-path: polygon(0 100%, 40% 0, 100% 0, 60% 100%);
  opacity: .95;
}
h3 { font-size: 1rem; margin: 0 0 6px; color: var(--branco); font-weight: 600; }
section:first-child h2 { margin-top: 8px; }
strong { color: var(--branco); font-weight: 600; }
.mudo { color: var(--prata-escura); font-size: .88rem; }
.mudo strong { color: var(--prata); }
hr { border: 0; border-top: 1px solid var(--fio); margin: 18px 0; }
code {
  background: var(--grafite-3); padding: 2px 6px; font-size: .85rem;
  color: var(--prata);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px),
                     calc(100% - 4px) 100%, 0 100%, 0 4px);
}
::selection { background: rgba(43, 184, 230, .22); color: var(--branco); }

/* ---------------- topo (páginas internas) ---------------- */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px max(16px, calc((100% - var(--larg-conteudo)) / 2 + 16px));
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5;
  box-shadow: 0 1px 0 var(--fio);
}
.topo::after {   /* o friso do topo — nível 1 (o mais nobre): assinado em DOURADO */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 2%,
              rgba(138, 106, 31, .5) 30%, rgba(184, 150, 91, .5) 70%,
              transparent 98%);
}
.marca { display: flex; align-items: center; gap: 11px; color: var(--branco); }
.marca:hover { text-decoration: none; }
.marca img { width: 34px; height: 34px; object-fit: contain; }
.marca .nome {
  font-family: var(--fonte-display); font-weight: 500; font-size: .95rem;
  letter-spacing: .12em; line-height: 1.15;
}
.marca small {
  display: block; font-family: var(--fonte-corpo); font-weight: 400;
  color: var(--ouro); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase;
}
.topo nav a { margin-left: 16px; color: var(--prata-escura); font-size: .88rem; }
.topo nav a:hover { color: var(--branco); text-decoration: none; }
.rodape {
  text-align: center; color: var(--prata-escura); font-size: .73rem;
  letter-spacing: .04em; padding: 28px 16px 34px;
}
.rodape b { color: var(--prata); font-weight: 600; letter-spacing: .1em; }
.rodape .assinatura { color: var(--ouro); }

/* ============================================================================
   SUPERFÍCIES — a hierarquia única (página → SEÇÃO → CARTÃO → CAMPO).
   No claro: cartão branco puro sobre papel quente, hairline + sombra suave.
   ========================================================================== */

/* nível CARTÃO (facetado) — o bloco de conteúdo */
.cartao {
  position: relative; display: block; padding: 15px 17px;
  background: var(--sup-cartao);
  box-shadow: inset 0 0 0 1px var(--fio), var(--sombra-cartao);
  clip-path: var(--chanfro);
}
.cartao::after {   /* neutro no claro (o --fio-luz é transparente) */
  content: ""; position: absolute; top: 0; left: var(--corte); right: 0;
  height: 1px; pointer-events: none; background: var(--fio-luz);
}
/* um cartão DENTRO de outro recua de tom (o nível CAMPO): pai branco, filho papel */
.cartao .cartao { background: var(--sup-campo); box-shadow: inset 0 0 0 1px var(--fio); }

/* ---------------- botões ---------------- */
/* AÇÃO PRIMÁRIA (confirmar/salvar) — VERDE de contorno, texto verde fechado.
   Limpo, sem glow: a cor já sinaliza "confirmar". */
.botao {
  position: relative; display: inline-block; text-align: center;
  background: rgba(126, 211, 33, .12);
  color: var(--neon-verde); border: 0; padding: 8px 15px;
  box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .55);
  font: inherit; font-weight: 600; font-size: .86rem; letter-spacing: .02em;
  cursor: pointer; clip-path: var(--chanfro-botao);
  transition: box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.botao:hover {
  background: rgba(126, 211, 33, .2);
  box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .95);
  transform: translateY(-1px); text-decoration: none;
}
.botao:active { transform: none; }
.botao.secundario {
  background: var(--ciano-veu); color: var(--neon-ciano);
  box-shadow: inset 0 0 0 1px rgba(8, 111, 145, .5);
}
.botao.secundario:hover {
  background: rgba(43, 184, 230, .2);
  box-shadow: inset 0 0 0 1px rgba(8, 111, 145, .9);
}
/* AÇÃO NOBRE (criar canal / gerar vídeo) — o DOURADO. Contorno, uso parcimonioso. */
.botao.ouro {
  background: rgba(205, 171, 99, .16); color: var(--ouro);
  box-shadow: inset 0 0 0 1px rgba(138, 106, 31, .55);
}
.botao.ouro:hover {
  background: rgba(205, 171, 99, .26);
  box-shadow: inset 0 0 0 1px rgba(138, 106, 31, .95);
}
/* CANCELAR/EXCLUIR = OPÇÕES, não alarmes → botão NEUTRO discreto. */
.botao.perigo {
  background: var(--grafite-3); color: var(--prata);
  box-shadow: inset 0 0 0 1px var(--fio-forte);
}
.botao.perigo:hover {
  color: var(--branco); transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--prata);
}
/* o ÚNICO vermelho de AÇÃO: a confirmação final dentro do modal (raro = tem peso) */
.botao.perigo-confirma {
  background: rgba(229, 96, 79, .14); color: var(--vermelho);
  box-shadow: inset 0 0 0 1px rgba(196, 61, 46, .55);
}
.botao.perigo-confirma:hover {
  background: rgba(229, 96, 79, .22); transform: translateY(-1px);
}
.botao.mini { padding: 5px 10px; font-size: .76rem; }
.botao.grande {
  display: inline-block; width: auto; padding: 11px 22px;
  margin-top: 14px; font-size: .95rem;
}
.botao.bloco { display: block; width: 100%; }
.botao[disabled] {
  background: var(--grafite-3); color: var(--prata-escura); cursor: not-allowed;
  box-shadow: inset 0 0 0 1px var(--fio); transform: none;
}

/* o botão Google — contorno facetado sobre branco; o G colorido fica no HTML */
.botao-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 18px;
  background: #ffffff; color: var(--branco);
  box-shadow: inset 0 0 0 1px var(--fio-forte);
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  clip-path: var(--chanfro-botao);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.botao-google:hover {
  text-decoration: none; transform: translateY(-1px);
  background: var(--grafite-3);
  box-shadow: inset 0 0 0 1px var(--prata-escura);
}
.botao-google svg { width: 19px; height: 19px; flex: none; }

/* ---------------- formulários ---------------- */
.pilha { display: flex; flex-direction: column; gap: 13px; margin-top: 10px; }
.pilha > .botao, .pilha > form > .botao,
.pilha > .botao-google { align-self: flex-start; }
.pilha > .botao.bloco, .pilha > .botao-google.bloco { align-self: stretch; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: stretch; }
.acoes .botao {
  padding: 8px 15px; font-size: .86rem; margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .85rem; color: var(--prata-escura);
}
input[type=email], input[type=password], input[type=text], input[type=number],
textarea, select {
  background: #ffffff; border: 1px solid var(--fio-forte);
  color: var(--branco); padding: 11px 13px; font: inherit; width: 100%;
  border-radius: 0; transition: border-color .18s ease, box-shadow .18s ease;
}
select { width: auto; cursor: pointer; }
input:focus, textarea:focus {   /* a borda acende em ciano (informação/foco) */
  outline: none; border-color: var(--neon-ciano);
  box-shadow: 0 0 0 2px rgba(43, 184, 230, .28);
}
input::placeholder, textarea::placeholder { color: var(--prata-escura); }

/* ── CONTROLES INLINE (regra GLOBAL) — rádio/checkbox e caixa de número em LINHA ── */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
  flex-direction: row; align-items: center; gap: .5rem; cursor: pointer;
}
label:has(> input[type="number"]),
label:has(> input.campo-mini) {
  flex-direction: row; align-items: center; gap: .6rem; flex-wrap: wrap;
}
label > input[type="number"], input.campo-mini {
  width: 52px; padding: 3px 5px; text-align: center;
  background: #ffffff; border-color: var(--fio-forte);
}

/* ---------------- avisos / etiquetas / selo ---------------- */
/* avisos: fundo em VÉU claro da cor + texto na versão FECHADA (legível no branco) */
.aviso {
  padding: 11px 15px; margin-bottom: 14px; font-size: .9rem;
  background: rgba(232, 179, 57, .14); color: var(--ambar);
  box-shadow: inset 0 0 0 1px rgba(138, 106, 31, .3);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px),
                     calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.aviso strong { color: var(--ambar); }
.aviso.ok { background: var(--verde-veu); color: var(--neon-verde);
  box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .3); }
.aviso.ok strong { color: var(--neon-verde); }
.aviso.erro { background: rgba(229, 96, 79, .14); color: var(--vermelho);
  box-shadow: inset 0 0 0 1px rgba(196, 61, 46, .35); }
.aviso.erro strong { color: var(--vermelho); }
.aviso.info { background: var(--ciano-veu); color: var(--neon-ciano);
  box-shadow: inset 0 0 0 1px rgba(8, 111, 145, .3); }
.aviso.info strong { color: var(--neon-ciano); }
.etiqueta { font-size: .76rem; color: var(--prata-escura); letter-spacing: .02em; }
.etiqueta.ok { color: var(--neon-verde); }
.etiqueta.atencao { color: var(--ambar); }
.etiqueta.erro { color: var(--vermelho); }
/* numeração vdyt##### ao lado do título no painel */
.vdyt-badge { font-size: .72rem; font-weight: 700; color: var(--neon-verde);
              letter-spacing: .04em; opacity: .9; }
.selo {
  background: var(--ambar-vivo); color: #1c1500; font-size: .72rem; font-weight: 700;
  padding: 2px 9px; vertical-align: 2px;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px),
                     calc(100% - 5px) 100%, 0 100%, 0 5px);
}
/* selo VERDE: força/vitória — verde = conquista */
.selo.selo-verde { background: var(--verde-veu); color: var(--neon-verde);
  box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .35); }

/* REALCE de cartão pelo par de cores: verde = positivo · ciano = info */
.realce-verde { box-shadow: inset 0 0 0 1px rgba(61, 122, 18, .45), var(--sombra-cartao); }
.realce-verde::after { background: linear-gradient(90deg,
  rgba(126, 211, 33, .5), transparent 60%); }
.realce-ciano { box-shadow: inset 0 0 0 1px rgba(8, 111, 145, .45), var(--sombra-cartao); }
.realce-ciano::after { background: linear-gradient(90deg,
  rgba(43, 184, 230, .5), transparent 60%); }

/* ============================================================================
   TELA DE ENTRADA — a assinatura da marca, agora clara e arejada
   ========================================================================== */
body.tela-entrada {
  min-height: 100svh; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 700px at 50% -8%, #ffffff 0%, transparent 60%),
    radial-gradient(900px 620px at 88% 108%, rgba(43, 184, 230, .06), transparent 55%),
    radial-gradient(900px 620px at 10% 104%, rgba(126, 211, 33, .05), transparent 55%),
    var(--grafite-0);
}
/* a malha low-poly (linhas suaves) — traço claro-escuro discreto sobre o papel */
body.tela-entrada::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='none' stroke='%238e8570' stroke-opacity='.35'%3E%3Cpath d='M0 60 140 150 210 0M210 0 300 90 420 60M140 150 300 90M140 150 90 330 0 300M90 330 210 420M90 330 330 300M300 90 330 300M330 300 420 300M330 300 210 420M0 60 0 300M420 60 420 300'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 72%);
}
body.tela-entrada::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
body.tela-entrada main {
  position: relative; z-index: 1; flex: 1; max-width: none; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: clamp(12px, 2.5vh, 28px) 18px clamp(10px, 1.5vh, 18px);
}
body.tela-entrada .aviso { width: 100%; max-width: 340px; }
body.tela-entrada .rodape { position: relative; z-index: 1; padding: 14px 16px 16px; }

.entrada { width: 100%; max-width: 340px; }

/* marca: LOGO protagonista (grande) com halo suave */
.entrada-marca { position: relative; text-align: center; padding: 2px 0 clamp(16px, 2.4vh, 24px); }
.entrada-marca::before {   /* halo duplo (verde + ciano) atrás da logo — suave no claro */
  content: ""; position: absolute; left: 50%; top: 96px; width: 380px;
  height: 380px; transform: translate(-50%, -50%); pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(126, 211, 33, .14), transparent 62%),
    radial-gradient(closest-side, rgba(43, 184, 230, .12) 18%, transparent 74%);
  filter: blur(14px);
  animation: pulsar 5.5s ease-in-out infinite;
}
.entrada-logo {
  position: relative; width: clamp(176px, 30vh, 248px); height: auto;
  margin-bottom: clamp(10px, 1.6vh, 16px);
  filter: drop-shadow(0 10px 24px rgba(26, 24, 17, .16));
}
.entrada-titulo {
  font-family: var(--fonte-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vh, 1.9rem);
  letter-spacing: .16em; color: var(--branco); margin: 0; padding-left: .16em;
}
.entrada-assinatura {
  margin: 6px 0 0; color: var(--ouro); font-size: .7rem;
  letter-spacing: .42em; text-transform: uppercase; padding-left: .42em;
}

/* o cartão de entrada: contorno duplo chanfrado (o momento de destaque) */
.painel-entrada {
  position: relative; padding: 1px; clip-path: var(--chanfro);
  background: linear-gradient(140deg,
    rgba(61, 122, 18, .55) 0%, rgba(126, 211, 33, .16) 28%,
    rgba(43, 184, 230, .16) 70%, rgba(8, 111, 145, .55) 100%);
  filter: var(--glow-duplo);
}
.painel-entrada-interno {
  background: #ffffff;
  clip-path: var(--chanfro); padding: 18px 20px 16px;
}
.painel-entrada-interno h1 { font-size: .96rem; letter-spacing: .04em; margin-bottom: 4px; }
.painel-entrada-interno > .mudo { font-size: .8rem; margin: 0; }
.divisor {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 10px;
  color: var(--prata-escura); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
}
.divisor::before, .divisor::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fio) 30%, var(--fio) 70%, transparent);
}
.painel-entrada-interno .pilha { gap: 9px; margin-top: 8px; }
.painel-entrada-interno label { gap: 4px; font-size: .82rem; }
.painel-entrada-interno input[type=email],
.painel-entrada-interno input[type=password] { padding: 9px 12px; }
.painel-entrada-interno .botao,
.painel-entrada-interno .botao-google { padding: 10px 16px; }

.link-magico { margin-top: 11px; }
.link-magico summary {
  cursor: pointer; color: var(--prata-escura); font-size: .82rem;
  list-style: none; transition: color .18s ease;
}
.link-magico summary::before { content: "› "; color: var(--neon-ciano); }
.link-magico summary:hover { color: var(--neon-ciano); }

/* entrada orquestrada: logo → título → formulário (em escada) */
@keyframes surgir {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulsar {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.entrada-logo {
  animation: surgir .65s cubic-bezier(.2, .7, .2, 1) both,
             flutuar 6s ease-in-out .9s infinite;
}
.entrada-titulo { animation: surgir .65s cubic-bezier(.2, .7, .2, 1) .12s both; }
.entrada-assinatura { animation: surgir .65s cubic-bezier(.2, .7, .2, 1) .22s both; }
.painel-entrada { animation: surgir .7s cubic-bezier(.2, .7, .2, 1) .34s both; }

/* acesso restrito (e-mail fora da lista) */
.acesso-restrito { text-align: center; }
.acesso-restrito .email-negado {
  display: inline-block; margin: 10px 0; padding: 6px 14px; color: var(--branco);
  background: var(--grafite-3); font-size: .9rem;
  box-shadow: inset 0 0 0 1px var(--fio);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px),
                     calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.acesso-restrito .acoes { justify-content: center; }

/* ============================================================================
   UTILITÁRIOS DE RITMO — espaço é estrutura, sempre da escala.
   ========================================================================== */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--esp-1); }
.mt-2 { margin-top: var(--esp-2); }
.mt-3 { margin-top: var(--esp-3); }
.mt-4 { margin-top: var(--esp-4); }
.mt-5 { margin-top: var(--esp-5); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--esp-1); }
.mb-2 { margin-bottom: var(--esp-2); }
.mb-3 { margin-bottom: var(--esp-3); }
.mb-4 { margin-bottom: var(--esp-4); }
.mb-5 { margin-bottom: var(--esp-5); }
.ml-1 { margin-left: var(--esp-1); }
.ml-2 { margin-left: var(--esp-2); }
.txt-xs { font-size: .72rem; }
.txt-sm { font-size: .8rem; }
.txt-md { font-size: 1rem; }
.em-linha { display: inline-block; }
.bloco { display: block; }
.minw-canal { min-width: 260px; }

/* ============================================================================
   CONTROLE "abrir tudo · fechar tudo" — discreto, no topo das páginas densas.
   ========================================================================== */
.controle-paineis {
  display: flex; gap: var(--esp-3); justify-content: flex-end;
  margin: 0 0 var(--esp-2); font-size: .78rem; letter-spacing: .02em;
}
.controle-paineis button {
  background: none; border: 0; cursor: pointer; padding: 2px 2px;
  color: var(--prata-escura); font: inherit; transition: color .15s ease;
}
.controle-paineis button:hover { color: var(--neon-ciano); }
.controle-paineis .sep { color: var(--fio); user-select: none; }

/* ---------------- movimento com respeito ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ENTRADA EM DUAS COLUNAS (desktop): a MARCA é o DESTAQUE */
@media (min-width: 720px) {
  body.tela-entrada main { justify-content: center; }
  .entrada {
    max-width: 1000px;
    display: flex; align-items: center;
    gap: clamp(40px, 6vw, 90px);
  }
  .entrada-marca { flex: 1 1 auto; padding: 0; }
  .entrada-marca::before { top: 46%; width: 520px; height: 520px; }
  .entrada-logo { width: clamp(300px, 32vw, 440px); margin-bottom: clamp(16px, 2vh, 24px); }
  .entrada-titulo { font-size: clamp(2.2rem, 3.8vw, 3.1rem); }
  .entrada-assinatura { font-size: .82rem; letter-spacing: .46em; }
  .painel-entrada { flex: 0 0 320px; max-width: 320px; align-self: center; }
}

/* ---------------- celular ---------------- */
@media (max-width: 560px) {
  main { padding: 14px 12px; }
  .topo { padding: 8px 12px; }
  .acoes .botao { flex: 1; }
  body.tela-entrada main { padding: clamp(10px, 2vh, 18px) 14px clamp(8px, 1.2vh, 14px); }
  .entrada-logo { width: clamp(150px, 25vh, 200px); }
  .entrada-titulo { font-size: clamp(1.3rem, 2.6vh, 1.6rem); }
  .painel-entrada-interno { padding: 16px 16px 14px; }
}