/* Esenco — blocos de página */

/* ---------- Hero ---------------------------------------------------------- */
.hero{position:relative;background:linear-gradient(160deg,var(--azul-800) 0%,var(--azul-700) 46%,var(--azul-900) 100%);
  color:#E7EEF4;overflow:hidden;isolation:isolate}
.hero-foto{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-foto img{display:block;width:100%;height:100%;object-fit:cover}
.hero-veu{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,36,62,.94) 0%,rgba(0,36,62,.82) 32%,rgba(0,36,62,.42) 60%,rgba(0,36,62,.08) 82%)}
.hero-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e-8);align-items:center;
  padding-block:var(--e-9)}
@media (max-width:940px){.hero-grade{grid-template-columns:1fr;gap:var(--e-6);padding-block:var(--e-8)}}
.hero h1{font-size:var(--t-display);color:#fff;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--ouro-400)}
.hero-sub{font-size:1.1875rem;color:#B9CCDB;max-width:44ch;margin-top:var(--e-4)}
.hero-ctas{display:flex;gap:var(--e-3);flex-wrap:wrap;margin-top:var(--e-6)}
.hero-regua{position:absolute;top:0;left:0;width:100%;height:32px;opacity:.4;pointer-events:none}
.hero-regua line{stroke:var(--ouro-400);stroke-width:1}
.hero-provas{gap:var(--e-6);margin-top:var(--e-7);
  padding-top:var(--e-5);border-top:1px solid rgba(255,255,255,.14)}
.hero-provas>div{position:relative;padding-left:8px}
.hero-provas-arco{position:absolute;left:-14px;top:-16px;pointer-events:none}
.hero-provas-arco circle{fill:none;stroke:var(--ouro-400);stroke-opacity:.35;stroke-width:2;
  stroke-linecap:round;transform:rotate(-90deg);transform-origin:29px 29px}
.hero-provas b{position:relative;display:block;font-family:var(--fonte-titulo);font-size:1.5rem;
  color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.hero-provas span{position:relative;font-size:var(--t-peq);color:#9FB6C8}

/* ---------- Faixa de logos / selos ---------------------------------------- */
.faixa{background:var(--areia-300);padding-block:var(--e-5);border-block:1px solid var(--areia-500)}
.faixa-itens{display:flex;gap:var(--e-7);justify-content:center;flex-wrap:wrap;align-items:center;
  font-family:var(--fonte-titulo);font-weight:600;color:var(--cinza-700);font-size:var(--t-peq)}
.faixa-itens span{display:flex;align-items:center;gap:8px}
.faixa-itens svg{color:var(--ouro-600);flex:none}

/* ---------- Cartão de produto --------------------------------------------- */
.produto{display:flex;flex-direction:column;background:#fff;border:1px solid var(--borda);
  border-radius:var(--r-xl);overflow:hidden;transition:var(--transicao);position:relative}
.produto:hover{transform:translateY(-4px);box-shadow:var(--s-3)}
.produto[data-destaque=true]{border-color:var(--ouro-500);box-shadow:0 0 0 1px var(--ouro-500),var(--s-2)}
.produto-selo{position:absolute;top:16px;right:16px;z-index:2}
.produto-arte{background:linear-gradient(170deg,var(--areia-100),var(--areia-300));
  padding:var(--e-6) var(--e-5);display:grid;place-items:center;min-height:250px}
.produto-arte img{max-height:210px;width:auto;filter:drop-shadow(0 16px 26px rgba(16,34,47,.18))}
.produto-corpo{padding:var(--e-5);display:flex;flex-direction:column;gap:var(--e-3);flex:1}
.produto-corpo h3{font-size:1.4rem}
.produto-para{font-size:var(--t-micro);color:var(--cinza-600)}
.produto-specs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:var(--t-peq);color:var(--cinza-700)}
.produto-specs li{display:flex;gap:9px;align-items:flex-start}
.produto-specs li::before{content:"";width:16px;height:16px;flex:none;margin-top:3px;
  background:var(--sucesso-100);border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' stroke='%232E8B5B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.preco{margin-top:auto;padding-top:var(--e-4);border-top:1px dashed var(--borda)}
.preco .de{font-size:var(--t-peq);color:var(--cinza-600);text-decoration:line-through}
.preco .por{position:relative;font-family:var(--fonte-titulo);font-size:2.1rem;font-weight:700;color:var(--azul-800);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preco .por .arco-numero{left:-18px;top:-17px}
.preco .parc{font-size:var(--t-peq);color:var(--cinza-700);font-variant-numeric:tabular-nums}

/* ---------- Detalhe do produto -------------------------------------------- */
.detalhe{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-8);align-items:start}
/* Enquanto o produto carrega, reserva a tela: sem isso o conteúdo chega e empurra a página (CLS) */
.detalhe[aria-busy=true]{min-height:100svh}
@media (max-width:900px){.detalhe{grid-template-columns:1fr;gap:var(--e-6)}}
.detalhe-arte{background:linear-gradient(170deg,var(--areia-100),var(--areia-300));
  border-radius:var(--r-xl);padding:var(--e-8);display:grid;place-items:center;border:1px solid var(--areia-500)}
.detalhe-arte img{max-height:400px;width:auto;filter:drop-shadow(0 24px 40px rgba(16,34,47,.2))}
.ficha{list-style:none;padding:0;margin:0;border-top:1px solid var(--borda)}
.ficha li{display:flex;justify-content:space-between;gap:var(--e-4);padding:12px 0;
  border-bottom:1px solid var(--borda);font-size:var(--t-peq)}
.ficha b{font-weight:600;color:var(--azul-800);font-family:var(--fonte-titulo)}
/* Suporte: o e-mail da ficha quebra em vez de alargar a página em telas bem estreitas */
#contato .ficha b{text-align:right;overflow-wrap:anywhere}

/* ---------- Planos -------------------------------------------------------- */
.plano{display:flex;flex-direction:column;gap:var(--e-4);background:#fff;border:1px solid var(--borda);
  border-radius:var(--r-lg);padding:var(--e-6);position:relative;transition:var(--transicao)}
.plano:hover{box-shadow:var(--s-2)}
.plano[data-destaque=true]{border-color:var(--azul-700);box-shadow:0 0 0 1px var(--azul-700),var(--s-2)}
.plano-taxa{position:relative;display:inline-block;font-family:var(--fonte-titulo);font-size:2.6rem;font-weight:700;color:var(--azul-700);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plano-taxa .arco-numero{left:-20px;top:-19px}
.plano-taxa small{font-size:1rem;font-weight:600;color:var(--cinza-600)}
.plano-lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:var(--t-peq);color:var(--cinza-700)}
.plano-lista li{display:flex;justify-content:space-between;gap:var(--e-3);padding-bottom:9px;border-bottom:1px dotted var(--borda)}
.plano-lista b{color:var(--azul-800);font-family:var(--fonte-num);font-variant-numeric:tabular-nums}
/* Botão do plano quebra linha em vez de alargar o cartão (3 colunas logo acima de 900px) */
.plano .btn{white-space:normal;line-height:1.2;text-align:center}

/* ---------- Simulador ----------------------------------------------------- */
.sim{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-7);align-items:start}
@media (max-width:860px){.sim{grid-template-columns:1fr}}
/* Deixa as colunas encolherem: sem isso, a opção mais longa do select alarga a página em 320px */
.sim>*{min-width:0}
.sim-saida{background:var(--azul-900);color:#fff;border-radius:var(--r-lg);padding:var(--e-6);position:sticky;top:96px}
.sim-linha{display:flex;justify-content:space-between;gap:var(--e-4);padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:var(--t-peq);color:#B9CCDB}
.sim-linha b{white-space:nowrap;text-align:right;color:#fff;font-family:var(--fonte-num);font-size:1rem;font-variant-numeric:tabular-nums}
.sim-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-4);padding-top:var(--e-5)}
.sim-total b{font-family:var(--fonte-titulo);font-size:2.2rem;color:var(--ouro-400);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sim-cobrar{margin-top:var(--e-4);padding:var(--e-5);border:1px solid var(--ouro-500);border-radius:var(--r-lg);
  background:rgba(221,165,32,.12);display:flex;flex-direction:column;align-items:center;gap:var(--e-2);text-align:center}
.sim-cobrar-rot{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro-400)}
.sim-cobrar-valor{font-family:var(--fonte-titulo);font-size:clamp(2.4rem,2rem + 1.6vw,3.2rem);line-height:1;color:var(--ouro-400);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sim-cobrar-parcela{font-size:var(--t-corpo);color:#fff}
.sim-cobrar-parcela b{font-family:var(--fonte-num);font-size:1.25rem;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--ouro-500)}

/* ---------- Benefícios ---------------------------------------------------- */
.benef{display:flex;flex-direction:column;gap:var(--e-3)}
.benef-ic{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--ouro-050);color:var(--ouro-700);border:1px solid var(--ouro-100)}
.bg-escuro .benef-ic{background:rgba(221,165,32,.16);border-color:rgba(221,165,32,.3);color:var(--ouro-400)}
.benef h3{font-size:1.125rem}
.benef p{font-size:var(--t-peq);color:var(--cinza-700)}
.bg-escuro .benef p{color:#A9BFD0}

/* ---------- Depoimentos --------------------------------------------------- */
.depo{background:#fff;border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e-5);
  display:flex;flex-direction:column;gap:var(--e-4)}
.depo p{font-size:var(--t-peq);color:var(--cinza-700);line-height:1.65}
.depo footer{display:flex;gap:12px;align-items:center;margin-top:auto}
.depo .ini{width:40px;height:40px;border-radius:50%;background:var(--azul-700);color:#fff;
  display:grid;place-items:center;font-family:var(--fonte-titulo);font-weight:700;font-size:.9rem;flex:none}
.estrelas{color:var(--ouro-500);font-size:.95rem;letter-spacing:2px}

/* ---------- CTA final ----------------------------------------------------- */
.cta{background:linear-gradient(120deg,var(--azul-700),var(--azul-900));color:#fff;
  border-radius:var(--r-xl);padding:var(--e-8);text-align:center;position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23DDA520' stroke-width='2'%3E%3Cpath d='M-10 30 L20 0 L50 30 L80 0 L110 30 L140 0'/%3E%3Cpath d='M-10 90 L20 60 L50 90 L80 60 L110 90 L140 60'/%3E%3C/g%3E%3C/svg%3E")}
.cta h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta .lead,.cta .apoio,.cta p{color:#B9CCDB}
.sim-saida .lead{color:#B9CCDB}

/* ---------- Números de destaque (ex.: cartão "Sobre a Esenco") ------------ */
.stat-num{display:block;font-family:var(--fonte-titulo);font-size:2rem;color:var(--azul-700);font-variant-numeric:tabular-nums}

/* ==========================================================================
   Painéis (Área do Cliente / Gestores)
   ========================================================================== */
.app{min-height:100vh;display:grid;grid-template-columns:252px 1fr;background:var(--fundo-suave)}
@media (max-width:900px){.app{grid-template-columns:1fr}}
.app-lateral{background:var(--azul-900);color:#A9BFD0;padding:var(--e-5) var(--e-4);
  display:flex;flex-direction:column;gap:var(--e-5);position:sticky;top:0;height:100vh}
@media (max-width:900px){.app-lateral{position:static;height:auto}}
.app-lateral img{height:30px;width:auto}
.app-nav{display:flex;flex-direction:column;gap:2px}
.app-nav a,.app-nav button{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-sm);
  color:#A9BFD0;text-decoration:none;font-size:var(--t-peq);font-weight:500;font-family:var(--fonte-titulo);
  background:none;border:0;cursor:pointer;width:100%;text-align:left;transition:var(--transicao)}
.app-nav a:hover,.app-nav button:hover{background:rgba(255,255,255,.08);color:#fff}
.app-nav [aria-current=page],.app-nav [aria-selected=true]{background:var(--azul-700);color:#fff}
.app-nav svg{flex:none;opacity:.85}
.app-lateral .rodape-lat{margin-top:auto;font-size:var(--t-micro);color:#6E8AA1;display:flex;flex-direction:column;gap:var(--e-3)}
.app-main{padding:var(--e-6);min-width:0}
@media (max-width:640px){.app-main{padding:var(--e-4)}}
.app-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--e-4);
  flex-wrap:wrap;margin-bottom:var(--e-6)}
.app-topo h1{font-size:1.75rem}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-4);margin-bottom:var(--e-6)}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.kpis{grid-template-columns:1fr}}
.kpi{background:#fff;border:1px solid var(--borda);border-radius:var(--r-lg);padding:var(--e-5)}
.kpi span{font-size:var(--t-micro);color:var(--cinza-600);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.kpi b{position:relative;display:block;font-family:var(--fonte-titulo);font-size:2rem;color:var(--azul-800);line-height:1.15;
  margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi b .arco-numero{left:-16px;top:-15px}
.kpi em{font-style:normal;font-size:var(--t-micro);color:var(--cinza-600)}

.painel{background:#fff;border:1px solid var(--borda);border-radius:var(--r-lg);overflow:hidden}
.painel-topo{display:flex;justify-content:space-between;align-items:center;gap:var(--e-4);
  padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--borda);flex-wrap:wrap}
.painel-topo h2{font-size:1.125rem}
.painel-corpo{padding:var(--e-5)}
.barra-filtros{display:flex;gap:var(--e-3);flex-wrap:wrap;align-items:center}
.barra-filtros .entrada{width:auto;min-width:190px;padding:9px 12px;font-size:var(--t-peq)}

.mini-thumb{width:46px;height:46px;border-radius:var(--r-sm);object-fit:contain;background:var(--areia-100);
  border:1px solid var(--borda);flex:none}
.linha-prod{display:flex;gap:12px;align-items:center}

.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--fundo)}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-arte{display:none}}
.login-arte{background:linear-gradient(160deg,var(--azul-800),var(--azul-900));color:#fff;
  padding:var(--e-9) var(--e-8);display:flex;flex-direction:column;justify-content:space-between;
  position:relative;isolation:isolate;overflow:hidden}
.login-arte::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23DDA520' stroke-width='2.5'%3E%3Cpath d='M-10 35 L25 0 L60 35 L95 0 L130 35 L165 0'/%3E%3Cpath d='M-10 105 L25 70 L60 105 L95 70 L130 105 L165 70'/%3E%3C/g%3E%3C/svg%3E")}
.login-form{display:grid;place-items:center;padding:var(--e-7) var(--e-5)}
.login-form>div{width:100%;max-width:400px}

/* Grupos de dados do checkout (pessoa física / jurídica). Grupo escondido também fica desabilitado. */
.grupo-dados{border:0;padding:0;margin:var(--e-4) 0 0;min-width:0}
.grupo-dados[hidden]{display:none}
.grupo-dados legend{padding:0;margin-bottom:var(--e-4);font-family:var(--fonte-titulo);font-weight:600;font-size:1rem;color:var(--azul-800)}

/* Carrinho e checkout: lista à esquerda, resumo à direita; empilha no celular */
.layout-pedido{display:grid;grid-template-columns:1.35fr .95fr;gap:var(--e-7);align-items:start}
/* Checkout: o botão de confirmar fica fora do formulário, embaixo dele, e o resumo ocupa a coluna da direita nas
   duas linhas. Empilhado, vale a ordem do HTML: formulário, resumo e botão (total e cupom antes de confirmar). */
.layout-pedido:has(>.confirmar-pedido){row-gap:var(--e-5)}
.resumo-pedido{grid-column:2;grid-row:1/span 2}
.confirmar-pedido{grid-column:1}
@media (max-width:900px){.layout-pedido{grid-template-columns:1fr}.layout-pedido>aside{position:static!important}
  .resumo-pedido,.confirmar-pedido{grid-column:auto;grid-row:auto}}
.item-carrinho{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e-4);align-items:center;
  padding-block:var(--e-4);border-bottom:1px solid var(--borda)}
.item-carrinho:last-child{border-bottom:0}
.item-carrinho .mini-thumb{width:88px;height:88px}
.item-carrinho-qtd{display:flex;align-items:center;gap:var(--e-2);margin-top:var(--e-3)}
.item-carrinho-preco{text-align:right}
@media (max-width:620px){
  .item-carrinho{grid-template-columns:auto 1fr}
  .item-carrinho-preco{grid-column:1/-1;text-align:left;display:flex;justify-content:space-between;align-items:center}
}

/* Painel do afiliado: link de cada modelo */
.lista-links{display:flex;flex-direction:column;gap:var(--e-5)}
.lista-links-item{display:grid;gap:var(--e-3);padding-bottom:var(--e-5);border-bottom:1px solid var(--borda)}
.lista-links-item:last-child{padding-bottom:0;border-bottom:0}

/* Painel de gestores: evolução mensal de um afiliado (os números ficam na tabela ao lado) */
.barras{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e-2);align-items:end;height:var(--grafico-altura)}
/* Duas linhas: a de cima é toda da barra (a % de --h vale sobre ela), a de baixo é do mês. */
.barra{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:end;row-gap:var(--e-1);height:100%;
  font-size:var(--t-micro);color:var(--cinza-600)}
.barra i{display:block;width:100%;max-width:var(--grafico-barra-largura);height:var(--h);min-height:var(--grafico-barra-minima);background:var(--azul-600);
  border-radius:var(--r-sm) var(--r-sm) 0 0}
@media (max-width:620px){.barras{grid-template-columns:repeat(6,1fr);height:auto;row-gap:var(--e-4)}.barra{height:var(--grafico-altura-compacta)}}

/* Escolha de cliente (Tornar afiliado) */
.lista-escolha{display:flex;flex-direction:column;gap:var(--e-2);list-style:none;padding:0;margin:0}
.lista-escolha li{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);flex-wrap:wrap;
  padding:var(--e-3);border:1px solid var(--borda);border-radius:var(--r-md)}

/* Termos e privacidade: texto corrido dos documentos legais */
.texto-legal{max-width:72ch;display:flex;flex-direction:column;gap:var(--e-3)}
.texto-legal h2{font-size:var(--t-h3);margin-top:var(--e-6);scroll-margin-top:var(--e-9)}
.texto-legal h3{font-size:var(--t-h4);margin-top:var(--e-3)}
.texto-legal ul{padding-left:var(--e-5);display:flex;flex-direction:column;gap:var(--e-2)}
.texto-legal a{overflow-wrap:anywhere}
.legal-tabela{overflow-x:auto}
.legal-tabela table{width:100%;border-collapse:collapse;font-size:var(--t-peq)}
.legal-tabela th,.legal-tabela td{text-align:left;vertical-align:top;padding:var(--e-2) var(--e-3);border-bottom:1px solid var(--borda)}
.legal-tabela th{background:var(--fundo-suave)}

/* --- Pagamento (Mercado Pago) -------------------------------------------- */
.pagamento-pix { display: grid; gap: var(--e-4); justify-items: center; text-align: center; }
.pagamento-pix img { width: min(100%, var(--pix-qr)); height: auto; }
.pagamento-pix textarea { width: 100%; resize: none; font-family: var(--fonte-mono); }