/* Esenco — componentes */

/* ---------- Botões -------------------------------------------------------- */
.btn{
  --bg:var(--azul-700);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  font-family:var(--fonte-titulo);font-weight:600;font-size:1rem;line-height:1;
  padding:14px 24px;border-radius:var(--r-md);border:1.5px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none;
  transition:transform var(--transicao),box-shadow var(--transicao),background var(--transicao),color var(--transicao);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--s-2);color:var(--fg)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn-ouro{--bg:var(--ouro-500);--fg:var(--azul-900)}
.btn-ouro:hover{--bg:var(--ouro-400)}
.btn-contorno{--bg:transparent;--fg:var(--azul-700);--bd:var(--borda-forte)}
.btn-contorno:hover{--bd:var(--azul-700);--bg:var(--azul-050)}
.btn-contorno-claro{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.45)}
.btn-contorno-claro:hover{--bg:rgba(255,255,255,.1);--bd:#fff}
.btn-fantasma{--bg:transparent;--fg:var(--azul-700);--bd:transparent;padding-inline:12px}
.btn-fantasma:hover{--bg:var(--azul-050);box-shadow:none}
.btn-perigo{--bg:var(--erro-500);--fg:#fff}
.btn-sm{padding:9px 16px;font-size:var(--t-peq);border-radius:var(--r-sm)}
.btn-lg{padding:17px 32px;font-size:1.0625rem}
.btn-bloco{width:100%}
.btn .ic{width:18px;height:18px;flex:none}

/* "ou" entre o login com o Google e o formulário de e-mail e senha. */
.divisor-ou{display:flex;align-items:center;gap:var(--e-3);color:var(--cinza-600);font-size:var(--t-peq)}
.divisor-ou::before,.divisor-ou::after{content:"";flex:1;border-top:1px solid var(--borda)}

/* ---------- Etiquetas ----------------------------------------------------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-full);
  font-size:var(--t-micro);font-weight:600;font-family:var(--fonte-titulo);letter-spacing:.02em;
  background:var(--azul-050);color:var(--azul-700);border:1px solid var(--azul-100);
}
.tag-ouro{background:var(--ouro-050);color:var(--ouro-700);border-color:var(--ouro-100)}
.tag-sucesso{background:var(--sucesso-100);color:var(--sucesso-700);border-color:#C3E4D3}
.tag-alerta{background:var(--alerta-100);color:var(--alerta-700);border-color:#F1DDAF}
.tag-erro{background:var(--erro-100);color:var(--erro-700);border-color:#F2C9C9}
.tag-neutra{background:var(--cinza-100);color:var(--cinza-700);border-color:var(--cinza-200)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.tag-sem-ponto::before{display:none}

/* ---------- Cartões ------------------------------------------------------- */
.cartao{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--r-lg);
  padding:var(--e-5);box-shadow:var(--s-1);
}
.cartao-alto{box-shadow:var(--s-2)}
.cartao-link{display:block;text-decoration:none;color:inherit;transition:transform var(--transicao),box-shadow var(--transicao),border-color var(--transicao)}
.cartao-link:hover{transform:translateY(-3px);box-shadow:var(--s-3);border-color:var(--azul-100);color:inherit}
.cartao-escuro{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);box-shadow:none;color:#D7E3EC}

/* ---------- Arco decorativo (preço, taxa e KPI) --------------------------- */
/* Puramente visual — não representa proporção de nada. Fica atrás do número:
   o elemento pai do número precisa de position:relative. */
.arco-numero{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.arco-numero circle{fill:none;stroke:var(--ouro-500);stroke-opacity:.28;stroke-width:2;
  stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}

/* ---------- Topo ---------------------------------------------------------- */
.topo{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borda)}
/* Logo de um lado e menu inteiro do outro não cabem logo acima do corte do celular (980px):
   os espaços abrem aos poucos com --topo-folga (tokens.css). Os multiplicadores são a diferença
   entre dois tokens (12 = --e-5 − --e-3; 8 = --e-2; 5 = 13px − --e-2; 4 = --e-3 − --e-2;
   8 = --e-4 − --e-2). Sem breakpoint novo e sem buraco entre cortes. */
.topo-barra{display:flex;align-items:center;gap:calc(var(--e-3) + 12 * var(--topo-folga));height:var(--altura-topo)}
.topo-logo{flex:none}
.topo-logo img{height:34px;width:auto}
.topo-nav{display:flex;align-items:center;gap:calc(8 * var(--topo-folga));margin-left:auto}
.topo-nav a{
  font-family:var(--fonte-titulo);font-weight:500;font-size:.96rem;color:var(--cinza-700);
  text-decoration:none;padding:9px calc(var(--e-2) + 5 * var(--topo-folga));border-radius:var(--r-sm);transition:var(--transicao);
}
.topo-nav a:hover{background:var(--azul-050);color:var(--azul-700)}
.topo-nav a[aria-current=page]{color:var(--azul-700);font-weight:600;background:var(--azul-050)}
.topo-acoes{display:flex;align-items:center;gap:calc(var(--e-2) + 4 * var(--topo-folga));margin-left:calc(var(--e-2) + 8 * var(--topo-folga))}
.topo-menu{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto;color:var(--azul-700)}
/* Desktop: o painel some da árvore de layout e nav/ações seguem como itens da barra.
   Celular: vira uma caixa única, então as ações sempre ficam logo abaixo dos links. */
.topo-painel{display:contents}
@media (max-width:980px){
  .topo{--topo-folga:1px} /* menu do celular com os espaços cheios */
  .topo-painel{display:none}
  .topo-menu{display:block}
  .topo[data-aberto=true] .topo-painel{
    display:flex;flex-direction:column;position:absolute;inset:var(--altura-topo) 0 auto;
    background:#fff;border-bottom:1px solid var(--borda);padding:var(--e-4) var(--e-4) var(--e-5);gap:var(--e-4);
    box-shadow:var(--s-2)}
  .topo-painel .topo-nav,.topo-painel .topo-acoes{display:flex;flex-direction:column;align-items:stretch;margin:0}
  .topo-painel .topo-nav{gap:2px}
  .topo-painel .topo-acoes{gap:var(--e-3)}
}

/* Carrinho no topo: fica fora de .topo-acoes para continuar visível no celular */
.topo-carrinho{position:relative;display:grid;place-items:center;width:var(--e-7);height:var(--e-7);flex:none;
  color:var(--azul-700);border-radius:var(--r-sm);transition:var(--transicao)}
.topo-carrinho:hover{background:var(--azul-050)}
.topo-carrinho-qtd{position:absolute;top:var(--e-1);right:var(--e-1);min-width:var(--e-4);height:var(--e-4);padding:0 var(--e-1);
  display:grid;place-items:center;border-radius:var(--r-full);background:var(--ouro-500);color:var(--azul-900);
  font-family:var(--fonte-titulo);font-weight:700;font-size:var(--t-micro);line-height:1}
@media (max-width:980px){.topo-carrinho{margin-left:0}}

/* ---------- Rodapé -------------------------------------------------------- */
.rodape{background:var(--azul-900);color:#A9BFD0;padding-block:var(--e-8) var(--e-6);font-size:var(--t-peq)}
.rodape h4{color:#fff;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--e-4)}
.rodape a{color:#A9BFD0;text-decoration:none;display:block;padding:5px 0}
.rodape a:hover{color:var(--ouro-400)}
.rodape-topo{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--e-6)}
@media (max-width:820px){.rodape-topo{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rodape-topo{grid-template-columns:1fr}}
.rodape-base{margin-top:var(--e-7);padding-top:var(--e-5);border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:var(--e-4);flex-wrap:wrap;font-size:var(--t-micro)}
.rodape img{height:36px;width:auto}
.rodape .micro{color:#8FA8BC}

/* ---------- Formulários --------------------------------------------------- */
.campo{display:flex;flex-direction:column;gap:6px}
.campo label,.rotulo{font-size:var(--t-peq);font-weight:600;color:var(--azul-800);font-family:var(--fonte-titulo)}
.campo .dica{font-size:var(--t-micro);color:var(--cinza-600)}
.entrada,select.entrada,textarea.entrada{
  width:100%;padding:12px 14px;border:1.5px solid var(--borda-forte);border-radius:var(--r-sm);
  background:#fff;font-size:1rem;transition:var(--transicao);
}
.entrada:hover{border-color:var(--azul-600)}
.entrada:focus{outline:none;border-color:var(--azul-600);box-shadow:0 0 0 3px rgba(10,76,124,.14)}
.entrada[aria-invalid=true]{border-color:var(--erro-500)}
/* Só leitura (ex.: CPF em "Meus dados"): o dado aparece, mas não parece editável. */
.entrada[readonly]{background:var(--fundo-suave);color:var(--cinza-700);border-color:var(--borda)}
.entrada[readonly]:hover{border-color:var(--borda)}
.entrada::placeholder{color:var(--cinza-600)}
select.entrada{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6E7E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
textarea.entrada{min-height:120px;resize:vertical}
.erro-campo{font-size:var(--t-micro);color:var(--erro-700);font-weight:600}

/* Campo de senha: olho para mostrar/ocultar + checklist de regras */
.campo-senha{position:relative}
.campo-senha .entrada{padding-right:48px}
.ver-senha{position:absolute;top:0;right:0;bottom:0;width:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--r-sm);color:var(--cinza-600);cursor:pointer;transition:var(--transicao)}
.ver-senha:hover{color:var(--azul-700)}
.ver-senha[aria-pressed=true]{color:var(--azul-700)}
.regras-senha{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:var(--t-micro);color:var(--cinza-600)}
.regras-senha[hidden]{display:none}
.regras-senha li{display:flex;align-items:center;gap:var(--e-2)}
.regras-senha li::before{content:"○";width:1em;text-align:center}
.regras-senha li[data-ok=true]{color:var(--sucesso-700)}
.regras-senha li[data-ok=true]::before{content:"✓";font-weight:700}
.opcao{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1.5px solid var(--borda);
  border-radius:var(--r-md);cursor:pointer;transition:var(--transicao);background:#fff}
.opcao:hover{border-color:var(--cinza-500)}
.opcao input{margin-top:3px;accent-color:var(--azul-700)}
.opcao:has(input:checked){border-color:var(--azul-700);background:var(--azul-050);box-shadow:inset 0 0 0 1px var(--azul-700)}

/* ---------- Tabelas ------------------------------------------------------- */
.tabela-wrap{overflow-x:auto;border:1px solid var(--borda);border-radius:var(--r-lg);background:#fff}
table.tabela{width:100%;border-collapse:collapse;font-size:var(--t-peq)}
.tabela thead th{
  text-align:left;padding:13px 16px;background:var(--fundo-suave);color:var(--cinza-700);
  font-family:var(--fonte-titulo);font-weight:600;font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid var(--borda);white-space:nowrap}
.tabela td{padding:14px 16px;border-bottom:1px solid var(--borda);vertical-align:middle}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover{background:var(--areia-100)}
.tabela .dir{text-align:right}

/* ---------- Abas ---------------------------------------------------------- */
.abas{display:flex;gap:2px;border-bottom:1px solid var(--borda);overflow-x:auto}
.abas button{
  background:none;border:0;border-bottom:2.5px solid transparent;padding:12px 16px;cursor:pointer;
  font-family:var(--fonte-titulo);font-weight:600;font-size:.96rem;color:var(--cinza-600);white-space:nowrap;
  transition:var(--transicao)}
.abas button:hover{color:var(--azul-700)}
.abas button[aria-selected=true]{color:var(--azul-700);border-bottom-color:var(--ouro-500)}

/* ---------- Acordeão ------------------------------------------------------ */
.faq{border-top:1px solid var(--borda)}
.faq details{border-bottom:1px solid var(--borda)}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--e-5) 44px var(--e-5) 0;position:relative;
  font-family:var(--fonte-titulo);font-weight:600;font-size:1.0625rem;color:var(--azul-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--ouro-600);border-bottom:2px solid var(--ouro-600);
  transform:rotate(45deg);transition:transform var(--transicao)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .faq-corpo{padding:0 var(--e-6) var(--e-5) 0;color:var(--cinza-700)}

/* ---------- Passos (status do pedido) ------------------------------------- */
.passos{display:flex;gap:0;list-style:none;padding:0;margin:0;counter-reset:p}
.passos li{flex:1;position:relative;padding-top:38px;text-align:center;font-size:var(--t-micro);color:var(--cinza-600)}
.passos li::before{
  counter-increment:p;content:counter(p);position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--borda-forte);
  color:var(--cinza-500);display:grid;place-items:center;font-weight:700;font-size:12px;z-index:2}
.passos li::after{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--borda-forte);z-index:1}
.passos li:first-child::after{display:none}
.passos li[data-ok]{color:var(--azul-800);font-weight:600}
.passos li[data-ok]::before{background:var(--azul-700);border-color:var(--azul-700);color:#fff;content:"✓"}
.passos li[data-ok]::after{background:var(--azul-700)}
.passos li[data-atual]::before{background:var(--ouro-500);border-color:var(--ouro-500);color:var(--azul-900);content:counter(p);
  box-shadow:0 0 0 4px var(--ouro-100)}
.passos li[data-atual]{color:var(--azul-900);font-weight:700}
/* Abaixo de 620px as 5 etapas lado a lado não cabem (a palavra "processamento" não
   encolhe): vira uma linha do tempo vertical, círculo à esquerda do rótulo. Cada
   ::after passa a descer até o PRÓXIMO item (não subir até o anterior, como na
   horizontal): por isso troca quem some (último, não primeiro) e de qual item vem
   a cor "concluído" (do próximo ser --data-ok--, não deste). */
@media (max-width:620px){
  .passos{flex-direction:column;gap:0}
  .passos li{flex:none;text-align:left;padding:0 0 var(--e-6) 38px;min-height:26px}
  .passos li:last-child{padding-bottom:0}
  .passos li::before{top:0;left:0;transform:none}
  .passos li::after{top:0;bottom:0;left:var(--e-3);width:2px;height:auto;background:var(--borda-forte)}
  .passos li:first-child::after{display:block}
  .passos li:last-child::after{display:none}
  .passos li[data-ok]::after{background:var(--borda-forte)}
  .passos li:has(+ li[data-ok])::after{background:var(--azul-700)}
}

/* ---------- Avisos -------------------------------------------------------- */
.aviso{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);font-size:var(--t-peq);
  background:var(--azul-050);color:var(--azul-800);border:1px solid var(--azul-100)}
.aviso-ouro{background:var(--ouro-050);color:var(--ouro-700);border-color:var(--ouro-100)}
.aviso-erro{background:var(--erro-100);color:var(--erro-700);border-color:#F2C9C9}
.aviso-ok{background:var(--sucesso-100);color:var(--sucesso-700);border-color:#C3E4D3}

/* ---------- Modal --------------------------------------------------------- */
/* margin:auto é o que centra o <dialog> na tela; o reset global (*{margin:0}) o zeraria. */
dialog.modal{
  margin:auto;
  border:0;border-radius:var(--r-lg);padding:0;max-width:640px;width:calc(100% - 32px);
  box-shadow:var(--s-3);color:inherit}
dialog.modal.modal-larga{max-width:1100px}
dialog.modal::backdrop{background:rgba(16,34,47,.55);backdrop-filter:blur(3px)}
.modal-topo{display:flex;justify-content:space-between;align-items:center;gap:var(--e-4);
  padding:var(--e-5);border-bottom:1px solid var(--borda)}
.modal-corpo{padding:var(--e-5);max-height:min(66vh,620px);overflow:auto}
dialog.modal-larga .modal-corpo{max-height:min(74vh,760px)}
.modal-base{padding:var(--e-4) var(--e-5);border-top:1px solid var(--borda);display:flex;
  justify-content:flex-end;gap:var(--e-3);background:var(--fundo-suave);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.entrada-taxa{font-variant-numeric:tabular-nums}
.entrada-taxa::-webkit-outer-spin-button,.entrada-taxa::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.entrada-taxa{-moz-appearance:textfield}
.fechar{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--cinza-600);padding:4px 8px}
.fechar:hover{color:var(--azul-700)}

/* ---------- Toast --------------------------------------------------------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:10px}
/* Na camada de cima (popover, ver UI.toast): sem o quadro padrão que o navegador dá ao popover. */
.toasts[popover]{top:auto;left:auto;margin:0;padding:0;border:0;background:none;overflow:visible}
.toasts[popover]:not(:popover-open){display:none}
.toast{background:var(--azul-900);color:#fff;padding:13px 18px;border-radius:var(--r-md);
  box-shadow:var(--s-3);font-size:var(--t-peq);max-width:340px;
  animation:sobe 220ms cubic-bezier(.32,.72,.35,1)}
.toast[data-tipo=erro]{background:var(--erro-700)}
.toast[data-tipo=ok]{background:var(--sucesso-700)}
@keyframes sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Estado vazio -------------------------------------------------- */
.vazio{text-align:center;padding:var(--e-8) var(--e-5);color:var(--cinza-600)}
.vazio svg{margin:0 auto var(--e-4);color:var(--cinza-300)}

/* Link de afiliado: campo só leitura + copiar e compartilhar (produto, painel do afiliado) */
.link-afiliado{display:flex;flex-direction:column;gap:var(--e-2)}
.link-afiliado-linha{display:flex;gap:var(--e-2);flex-wrap:wrap}
.link-afiliado-linha .entrada{flex:1 1 260px;min-width:0;font-size:var(--t-peq)}

/* reCAPTCHA v3: o selo flutuante some; no lugar, a frase .aviso-recaptcha perto do botão (o Google permite). */
.grecaptcha-badge{visibility:hidden}
.aviso-recaptcha{margin-top:var(--e-2)}