/* Nexo Emissor · site (nexoemissor.com.br). Cores da marca: docs/SITE.md e o guia do pacote de marca. */

@font-face { font-family: "IBM Plex Sans"; src: url("/fontes/IBMPlexSans-Light-Latin1.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fontes/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fontes/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fontes/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fontes/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --laranja: #F26819;            /* selo da marca; texto grafite sobre ele */
  --laranja-acao: #B84B0B;       /* botão e link sobre fundo claro: branco sobre ele 5,2:1 */
  --laranja-acao-hover: #9C3F09;
  --laranja-acao-ativo: #7A3107;
  --laranja-no-escuro: #F79B5F;  /* link sobre fundo escuro */
  --damasco: #FDBA74;
  --laranja-claro: #FDEEE3;
  --grafite: #22262E;
  --escuro: #161A20;
  --escuro-2: #20252D;
  --escuro-linha: #333A45;
  --fundo: #FFFFFF;
  --fundo-claro: #F7F7F5;
  --linha: #E1DED7;
  --texto: #22262E;
  --texto-2: #565C69;            /* 6,6:1 sobre #F7F7F5 */
  --texto-no-escuro: #F4F4F4;
  --texto-2-no-escuro: #B7BCC6;
  --foco: #F26819;
  --largura: 1240px;
  --margem: 16px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (min-width: 672px) { :root { --margem: 32px; } }
@media (min-width: 1056px) { :root { --margem: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--laranja-acao); text-underline-offset: 3px; }
a:hover { color: var(--laranja-acao-hover); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }

/* item de grade não alarga a grade com o próprio conteúdo (texto sem quebra, imagem) */
.abertura__grade > *, .duas > *, .passos > *, .recurso > *, .cartoes > *, .planos > *, .rodape__grade > * { min-width: 0; }
.caixa { width: 100%; max-width: calc(var(--largura) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }
.pular { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--laranja); color: var(--escuro); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 8px; }

/* ---------- tipografia ---------- */
h1 { font-weight: 300; font-size: clamp(2.5rem, 1.35rem + 4.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch; }
h3 { font-weight: 500; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.005em; }
.sobretitulo { font: 400 0.8125rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--laranja-acao); margin-bottom: 16px; }
.destaque { font-size: 1.25rem; line-height: 1.55; color: var(--texto-2); margin-top: 24px; max-width: 40ch; }

/* ---------- botões (Carbon: texto à esquerda, ícone à direita, cantos retos) ---------- */
.botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 48px; padding: 12px 16px; border: 1px solid transparent; font: 400 1rem/1.25 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .11s, color .11s, border-color .11s; }
.botao--pequeno { min-height: 40px; padding: 8px 16px; font-size: 0.9375rem; }
.botao--grande { min-height: 64px; padding: 16px 20px; font-size: 1.0625rem; }
.botao--largo { width: 100%; }
.botao__icone { width: 18px; height: 18px; fill: currentColor; flex: none; }
.botao--primario { background: var(--laranja); color: var(--escuro); }
.botao--primario:hover { background: #FF8235; color: var(--escuro); }
.botao--primario:active { background: #D9570C; }
.botao--acao { background: var(--laranja-acao); color: #FFFFFF; }
.botao--acao:hover { background: var(--laranja-acao-hover); color: #FFFFFF; }
.botao--acao:active { background: var(--laranja-acao-ativo); }
.botao--escuro { background: var(--escuro); color: #FFFFFF; }
.botao--escuro:hover { background: #2B313B; color: #FFFFFF; }
.botao--fantasma { background: transparent; color: var(--texto-no-escuro); border-color: #6F7685; }
.botao--fantasma:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; border-color: #A0A6B2; }
.botao--terciario { background: transparent; color: var(--laranja-acao); border-color: var(--laranja-acao); }
.botao--terciario:hover { background: var(--laranja-acao); color: #FFFFFF; }
.secao--escura :focus-visible, .abertura :focus-visible, .topo :focus-visible, .rodape :focus-visible, .cookies :focus-visible { outline-color: #FFFFFF; }
.chamada :focus-visible { outline-color: var(--escuro); }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: var(--escuro); border-bottom: 1px solid var(--escuro-linha); }
.topo__linha { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.topo__marca { display: flex; flex: none; }
.topo__marca img { width: 132px; height: auto; }
.topo__nav { display: none; gap: 4px; margin-left: 16px; }
.topo__nav a, .topo__entrar { color: var(--texto-2-no-escuro); text-decoration: none; padding: 8px 12px; font-size: 0.9375rem; }
.topo__nav a:hover, .topo__entrar:hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.topo__acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topo__entrar { display: none; }
@media (min-width: 672px) { .topo__entrar { display: inline-block; } .topo__marca img { width: 150px; } }
@media (min-width: 1056px) { .topo__nav { display: flex; } }

/* ---------- abertura ---------- */
.abertura { position: relative; background: var(--escuro); color: var(--texto-no-escuro); overflow: hidden; padding: 56px 0 72px; }
.abertura::before { /* o selo da marca, grande e só no contorno */
  content: ""; position: absolute; width: 900px; height: 900px; right: -260px; top: -180px; border: 1px solid #2E3440;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  background: linear-gradient(135deg, rgba(242, 104, 25, .10), rgba(242, 104, 25, 0) 55%);
}
.abertura__grade { position: relative; display: grid; gap: 48px; }
.abertura .sobretitulo { color: var(--laranja-no-escuro); }
.abertura h1 { max-width: 14ch; }
.abertura__sub { margin-top: 28px; font-size: 1.1875rem; line-height: 1.6; color: var(--texto-2-no-escuro); max-width: 46ch; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.abertura__acoes .botao { flex: 1 1 220px; max-width: 280px; }
.abertura__nota { margin-top: 16px; font-size: 0.875rem; color: #8F96A3; }
.abertura__visual { position: relative; }
@media (min-width: 1056px) {
  .abertura { padding: 88px 0 112px; }
  .abertura__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; }
  .abertura__visual { margin-right: calc(-1 * var(--margem) - 120px); }
}

/* ---------- moldura de navegador ---------- */
.navegador { background: #FFFFFF; border: 1px solid #3A414D; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
.navegador__barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #2A2F38; }
.navegador__barra span { width: 9px; height: 9px; border-radius: 50%; background: #4A515E; }
.navegador__barra b { flex: 1; min-width: 0; margin: 0 36px 0 18px; font: 400 0.75rem/20px var(--mono); color: #AEB4BF; background: #1F242C; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navegador--claro { border-color: var(--linha); box-shadow: 0 12px 32px rgba(34, 38, 46, .10); }
.navegador--claro .navegador__barra { background: #ECEAE5; }
.navegador--claro .navegador__barra span { background: #CFCBC2; }
.navegador--claro .navegador__barra b { background: #FFFFFF; color: #6B7180; }

/* ---------- faixa ---------- */
.faixa { border-bottom: 1px solid var(--linha); }
.faixa__lista { display: grid; gap: 0; }
.faixa__lista li { display: grid; gap: 4px; padding: 24px 0; border-top: 1px solid var(--linha); }
.faixa__lista li:first-child { border-top: 0; }
.faixa__lista strong { font-weight: 600; font-size: 1rem; }
.faixa__lista span { color: var(--texto-2); font-size: 0.9375rem; line-height: 1.5; }
@media (min-width: 672px) {
  .faixa__lista { grid-template-columns: repeat(3, 1fr); }
  .faixa__lista li { padding: 28px 24px 28px 0; border-top: 0; }
  .faixa__lista li + li { padding-left: 24px; border-left: 1px solid var(--linha); }
}

/* ---------- seções ---------- */
.secao { padding: 80px 0; }
.secao--clara { background: var(--fundo-claro); }
.secao--escura { background: var(--escuro); color: var(--texto-no-escuro); }
.secao--escura .sobretitulo { color: var(--laranja-no-escuro); }
.secao--escura h2 { max-width: none; }
@media (min-width: 1056px) { .secao { padding: 120px 0; } }
.duas { display: grid; gap: 48px; }
@media (min-width: 1056px) { .duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 80px; } .duas--perguntas { align-items: start; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

.dores { margin-top: 40px; display: grid; gap: 0; border-top: 1px solid var(--linha); }
.dores li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.dores__n { font: 400 0.875rem/1.9 var(--mono); color: var(--laranja-acao); }
.dores strong { font-weight: 600; }
.dores p { color: var(--texto-2); margin-top: 2px; }

.ilustracao img { width: 100%; }
.ilustracao figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--texto-2); text-align: center; }

/* ---------- vídeo ---------- */
.video { text-align: left; }
.video__quadro { margin-top: 40px; border: 1px solid var(--escuro-linha); background: #000; }
.video__quadro video { width: 100%; aspect-ratio: 16 / 9; }

/* ---------- como funciona ---------- */
.passos { display: grid; gap: 40px; margin-top: 48px; }
.passos__lista { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.passos__lista button { display: grid; grid-template-columns: 40px 1fr; gap: 12px; width: 100%; padding: 20px 16px 20px 0; border: 0; border-bottom: 1px solid var(--linha); background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; position: relative; }
.passos__lista button::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--laranja); transition: width .2s; }
.passos__lista button[aria-selected="true"]::before { width: 100%; }
.passos__lista button:hover strong { color: var(--laranja-acao); }
.passos__n { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--texto-2); font: 400 0.875rem/1 var(--mono); color: var(--texto-2); }
.passos__lista button[aria-selected="true"] .passos__n { background: var(--laranja); border-color: var(--laranja); color: var(--escuro); }
.passos__lista strong { display: block; font-weight: 600; font-size: 1.0625rem; }
.passos__lista strong + span { display: block; margin-top: 4px; color: var(--texto-2); font-size: 0.9688rem; line-height: 1.55; }
.passos__telas .navegador { border-color: var(--linha); box-shadow: 0 16px 48px rgba(34, 38, 46, .14); }
.passos__telas .navegador__barra { background: #ECEAE5; }
.passos__telas .navegador__barra span { background: #CFCBC2; }
.passos__telas .navegador__barra b { background: #FFFFFF; color: #6B7180; }
@media (min-width: 1056px) { .passos { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; } .passos__telas { position: sticky; top: 96px; } }

/* ---------- recursos do dia a dia ---------- */
.recurso { display: grid; gap: 24px; align-items: center; margin-top: 56px; }
.recurso .ilustracao { max-width: 520px; }
.recurso__texto h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; max-width: 20ch; }
.recurso__texto p { margin-top: 16px; color: var(--texto-2); font-size: 1.125rem; max-width: 42ch; }
@media (min-width: 672px) {
  .recurso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 72px; }
  .recurso--invertido .ilustracao { order: 2; justify-self: end; }
}
@media (min-width: 1056px) { .recurso { gap: 96px; margin-top: 88px; } }

.cartoes { display: grid; gap: 40px; margin-top: 88px; padding-top: 56px; border-top: 1px solid var(--linha); }
.cartao h3 { margin-top: 24px; }
.cartao p { margin-top: 8px; color: var(--texto-2); max-width: 46ch; }
@media (min-width: 672px) { .cartoes { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* ---------- planos ---------- */
.planos { display: grid; gap: 24px; margin-top: 48px; }
.plano { display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; border: 1px solid var(--linha); background: #FFFFFF; }
.plano--destaque { border-top: 4px solid var(--laranja); }
.plano h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; font-size: 1.25rem; }
.plano__preco { font-weight: 300; font-size: 3rem; line-height: 1; letter-spacing: -0.02em; }
.plano__moeda { font-size: 1.25rem; vertical-align: top; position: relative; top: 6px; }
.plano__periodo { font-size: 1rem; letter-spacing: 0; color: var(--texto-2); }
.plano__para { color: var(--texto-2); }
.plano__lista { display: grid; gap: 10px; align-content: start; margin: 8px 0 16px; flex: 1; }
.plano__lista li { position: relative; padding-left: 28px; line-height: 1.5; }
.plano__lista li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--laranja-acao); border-bottom: 2px solid var(--laranja-acao); transform: rotate(-45deg); }
.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--laranja-claro); color: #7A3107; font-size: 0.8125rem; font-weight: 500; }
@media (min-width: 672px) { .planos { grid-template-columns: 1fr 1fr; max-width: 920px; } .plano { padding: 40px 32px; } }

/* ---------- perguntas (acordeão no jeito do Carbon) ---------- */
.perguntas { border-bottom: 1px solid var(--linha); }
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 16px 0; font-size: 1.125rem; cursor: pointer; list-style: none; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 1.5px solid var(--texto); border-bottom: 1.5px solid var(--texto); transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.perguntas details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.perguntas summary:hover { color: var(--laranja-acao); }
.perguntas details p { padding: 0 48px 24px 0; color: var(--texto-2); max-width: 64ch; }

/* ---------- chamada final ---------- */
.chamada { background: var(--laranja); color: var(--escuro); padding: 64px 0; }
.chamada__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.chamada h2 { max-width: 16ch; }
.chamada .botao { flex: 0 1 300px; }

/* ---------- rodapé ---------- */
.rodape { background: var(--escuro); color: var(--texto-2-no-escuro); padding: 64px 0 32px; font-size: 0.9375rem; }
.rodape__grade { display: grid; gap: 40px; }
.rodape__marca img { width: 150px; }
.rodape__marca p { margin-top: 12px; }
.rodape nav { display: grid; gap: 8px; align-content: start; }
.rodape__titulo { font: 400 0.75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8F96A3; margin-bottom: 4px; }
.rodape a, .rodape__link { color: var(--texto-no-escuro); text-decoration: none; justify-self: start; }
.rodape a:hover, .rodape__link:hover { color: var(--laranja-no-escuro); text-decoration: underline; }
.rodape__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.rodape__base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--escuro-linha); font-size: 0.8125rem; color: #8F96A3; }
@media (min-width: 672px) { .rodape__grade { grid-template-columns: 2fr 1fr 1fr; } }

/* ---------- aviso de cookies ---------- */
.cookies { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 760px; margin-inline: auto; padding: 16px 20px; background: #262B33; color: var(--texto-no-escuro); border: 1px solid #3A414D; border-left: 3px solid var(--laranja); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); font-size: 0.9375rem; line-height: 1.5; }
.cookies p { flex: 1 1 320px; }
.cookies__acoes { display: flex; flex-wrap: wrap; gap: 8px; }