/* =====================================================================
   v4 — visual sóbrio e institucional, aplicado a todas as páginas.
   Títulos em Archivo (levemente estreita), texto em Inter, azul #0162CC,
   cantos menores, linhas finas no lugar de sombras, sem formas decorativas.
   Carregado depois de site.css e v3.css.
   ===================================================================== */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 75% 100%; font-display: swap; src: url('/assets/fonts/archivo-sub.woff2') format('woff2'); }
:root {
  --marinho: #0A2240; --marinho-2: #12305A; --linha: #DCE3EC; --linha-forte: #C8D2DE; --cinza-secao: #F2F5F9;
  --raio-g: 12px; --raio: 10px; --raio-p: 8px; --sombra-2: 0 18px 40px -28px rgba(10, 34, 64, .35);
}
body { color: #2B3A4F; }
h1, h2, h3, .titulo-centro { font-family: Archivo, Inter, sans-serif; font-stretch: 88%; color: var(--marinho); letter-spacing: -.01em; }
h1 { font-weight: 800; line-height: 1.04; } h2 { font-weight: 800; line-height: 1.08; } h3 { font-weight: 700; }
h1 span, h2 span { color: inherit; }

/* Sem formas decorativas */
.forma { display: none !important; }

/* Botões retos, sem seta */
.btn { border-radius: 8px; } .btn .ic, .topo__cta .ic { display: none; }
.btn--primario { box-shadow: none; }
.btn--secundario { border: 2px solid var(--marinho); color: var(--marinho); background: transparent; } .btn--secundario:hover { background: var(--cinza-secao); border-color: var(--marinho); }
.btn--claro { background: #fff; color: var(--marinho); }

/* Rótulo acima dos títulos: discreto, sem cara de etiqueta */
.sobretitulo { font-size: 15px; font-weight: 600; color: var(--azul); letter-spacing: 0; text-transform: none; }
.sobretitulo::before, .sobretitulo .ic { display: none; }
.hero3__selo { color: #5B6B80; }

/* Topo */
.topo { box-shadow: none; border-bottom: 1px solid var(--linha); }
.nav__link { border-radius: 6px; font-weight: 500; color: var(--marinho); }
.nav__link[aria-expanded="true"], .nav__link[aria-current="page"] { background: var(--cinza-secao); color: var(--marinho); }
.mega { box-shadow: 0 24px 40px -30px rgba(10, 34, 64, .4); }

/* Heróis das páginas internas: fundo branco, título grande */
.hero { background: #fff; border-bottom: 1px solid var(--linha); }
.hero::after { display: none; }
.hero h1 { font-size: clamp(36px, 4.4vw, 58px); letter-spacing: -.01em; line-height: 1.04; }
.hero__sub { color: #4A5A70; }

/* Seções */
.secao--suave, .ecossistema { background: var(--cinza-secao); border-radius: 0; }
.cabeca h2, .resultado h2, .resultado h3, .faq .cabeca h2 { font-size: clamp(28px, 3vw, 40px); }

/* Cartões: menos arredondados, borda fina, sem sombra */
.perfil, .area, .problema, .uso, .destaque, .cliente, .relacionado, .recursos li, .solucao { border-radius: 10px; box-shadow: none; }
.destaque:hover, .solucao:hover, .relacionado:hover { box-shadow: none; transform: none; border-color: var(--azul); }
.problema { border-style: solid; border-color: var(--linha); background: #fff; border-left: 3px solid var(--azul); }
.recursos li { border-color: var(--linha); }
.recursos .ic, .lista-check .ic { background: none; padding: 0; color: var(--azul); }
.ic--caixa { box-shadow: none; border-radius: 8px; }
.moldura { border-radius: 10px; box-shadow: 0 30px 60px -36px rgba(10, 34, 64, .45); }
.celular { border-radius: 28px; background: var(--marinho); }

/* Linha do tempo das etapas */
.conexoes__passos li::before, .passos li::before { border-radius: 50%; }

/* Faixas escuras com o marinho da marca */
.ia3, .faixa-ia { background: var(--marinho); }
.ia3 h2, .faixa-ia h2 { color: #fff; }

/* Formulário de demonstração: caixa reta com borda */
.demo3__caixa { border-radius: 12px; box-shadow: none; border: 1px solid var(--linha); }
.demo3 h2 { font-size: clamp(28px, 3vw, 40px); }
.form input, .form select, .form textarea { border-radius: 8px; }

/* Rodapé */
.rodape { background: var(--marinho); }
.rodape__chamada { border-radius: 10px; }

/* Barra fixa do celular e WhatsApp */
.barra-cta .btn { border-radius: 8px; }

/* Diferencial do produto em passos (ex.: Chamar garçom no Deedo Comanda) */
.dif { border-bottom: 1px solid var(--linha); }
.dif__cab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-7); align-items: end; margin-bottom: var(--e-7); }
.dif__cab h2 { font-size: clamp(32px, 3.6vw, 48px); }
.dif__cab p { font-size: var(--t-18); color: #4A5A70; margin: 0; }
.dif__passos { list-style: none; counter-reset: dif; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
.dif__passos li { counter-increment: dif; display: flex; flex-direction: column; }
.dif__passos .celular { width: 100%; max-width: 230px; margin-bottom: var(--e-5); }
.dif__passos .celular__tela { aspect-ratio: 9 / 19.5; overflow: hidden; padding-top: 18px; background: #fff; }
.dif__passos .celular__tela img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dif__passos strong { display: flex; align-items: center; gap: 10px; font-family: Archivo, Inter, sans-serif; font-stretch: 88%; font-size: 20px; color: var(--marinho); }
.dif__passos strong::before { content: counter(dif); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--azul); color: #fff; font: 700 13px/26px Inter, sans-serif; text-align: center; }
.dif__passos span { margin-top: 6px; color: #4A5A70; font-size: 15px; }
.dif__painel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--e-7); align-items: center; margin-top: var(--e-8); padding-top: var(--e-7); border-top: 1px solid var(--linha); }
.dif__painel h3 { font-size: clamp(26px, 2.6vw, 34px); }
.dif__painel p { margin: var(--e-3) 0 var(--e-5); color: #4A5A70; }
@media (max-width: 900px) {
  .dif__cab, .dif__painel { grid-template-columns: 1fr; gap: var(--e-4); }
  .dif__passos { grid-template-columns: repeat(4, 72%); overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--e-5); padding-bottom: var(--e-3); margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .dif__passos li { scroll-snap-align: start; }
  .dif__passos .celular { max-width: 210px; }
}

/* Celular realista (iPhone grafite), igual em todo o site. Marcação: aparelho() em tools/gerar.js.
   Medidas em cqw (1cqw = 1% da largura do aparelho), então fica proporcional em qualquer tamanho. */
.celular { position: relative; padding: 0; border-radius: 0; background: none; box-shadow: none; aspect-ratio: 71.6 / 147.6; container-type: inline-size; }
.celular::before, .celular::after { content: none; }
.celular__corpo { position: absolute; inset: 0; border-radius: 16.5cqw; background: linear-gradient(135deg, #8E9095 0%, #4A4C51 18%, #2E3034 40%, #5B5E63 62%, #2B2D31 82%, #7C7F85 100%); filter: drop-shadow(0 4cqw 6cqw rgba(10, 34, 64, .28)) drop-shadow(0 1cqw 1.5cqw rgba(10, 34, 64, .18)); }
.celular__corpo::before { content: ''; position: absolute; inset: .55cqw; border-radius: 15.9cqw; background: linear-gradient(135deg, #3A3C40, #1D1E21 50%, #34363A); }
.celular__corpo::after { content: ''; position: absolute; inset: 1.25cqw; border-radius: 15.2cqw; background: #050506; box-shadow: inset 0 0 0 .25cqw #1A1A1C; }
.celular__btn { position: absolute; width: 1.2cqw; border-radius: .6cqw; background: linear-gradient(90deg, #2C2E32, #85888D 50%, #3A3C40); }
.celular__btn.b1 { left: -.9cqw; top: 19%; height: 5.5%; } .celular__btn.b2 { left: -.9cqw; top: 28%; height: 10%; }
.celular__btn.b3 { left: -.9cqw; top: 40%; height: 10%; } .celular__btn.b4 { right: -.9cqw; top: 31%; height: 15%; }
.celular .celular__tela { position: absolute; inset: 4.6cqw; padding: 0; aspect-ratio: auto; border-radius: 12.1cqw; overflow: hidden; background: #fff; display: flex; flex-direction: column; container-type: inline-size; }
.celular__status { flex: none; display: block; width: 100%; height: auto; background: #fff; color: #000; fill: currentColor; }
.celular .celular__tela img { flex: 1 1 0; min-height: 0; width: 100%; height: auto; border-radius: 0; aspect-ratio: auto; object-fit: cover; object-position: top; }
.celular__home { position: absolute; left: 32%; right: 32%; bottom: 1.2%; height: .6%; min-height: 2px; border-radius: 9px; background: #111; opacity: .8; }
.celular__ilha { position: absolute; z-index: 3; top: 3.6%; left: 34.5%; width: 31%; aspect-ratio: 126 / 37; border-radius: 99px; background: #000; }
.celular__ilha::after { content: ''; position: absolute; right: 9%; top: 22%; height: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2C3A5A 0 18%, #0D1220 45%, #000 70%); }
.celular__brilho { position: absolute; inset: 4.6cqw; border-radius: 12.1cqw; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .05) 100%); }
/* Home: a simulação da Fluência ocupa a tela do aparelho */
.h4 .celular .flu { flex: 1 1 0; min-height: 0; aspect-ratio: auto; border-radius: 0; padding-top: 0; }

/* Chamada final: sem cartões flutuando sobre a tela; o QR do WhatsApp fica abaixo, alinhado */
.demo3__visual { flex-direction: column; gap: var(--e-5); min-height: 0; }
.demo3__whats { position: static; box-shadow: none; border: 1px solid var(--linha); border-radius: 10px; max-width: 300px; transform: none !important; }
.demo3__kpi { display: none !important; }

/* .resultado zerava a margem lateral quando usado junto com .container (seção "na prática" encostava na borda) */
.container.resultado { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Celulares maiores no topo das páginas, para a tela do sistema ficar legível */
.hero__visual .celular { width: 32%; max-width: 236px; bottom: -24px; }
.h4 .fone { width: 220px; }
@media (max-width: 960px) { .h4 .fone { width: 168px; } }
@media (max-width: 640px) { .hero__visual .celular { width: 38%; } }

/* Links dentro de texto: sublinhados, para não depender só da cor (WCAG 1.4.1) */
main p a:not(.btn):not(.link-seta):not(.link-discreto), .aceite a, .texto-legal li a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }