/* =====================================================================================
   Identidade visual do site — camada de escala, pesos e CTAs (V1 aprovada em 28/09/2026)
   Carregada em TODAS as páginas do site (includes/head.php põe .tipo-nova no <body>), por cima
   do app.css — que já está na paleta oficial (_ferramentas/css-paleta-oficial.php).

   Base: Manual de Identidade Visual da Pontual + "Ajustes gerais do site".
     Fontes: Lato (institucional) e Arial (complementar, reserva). Nada fora dessas duas.
     Cores:  #ED1C24, #231F20, #A7A9AC, #C4161C, #9E0B0F, #790000 + branco e cinzas.
     Escala: nada útil abaixo de 13px; parágrafos em 18px; títulos de seção ~47px.

   O "!important" aparece só na família/peso/entrelinha dos TÍTULOS: o app.css fixa
   font-family/peso em cada título, com especificidades diferentes.
   ===================================================================================== */

/* ---------- Família ---------- */
body.tipo-nova {
    --sans: "Lato", Arial, "Helvetica Neue", sans-serif;
    --titulo: "Lato", Arial, "Helvetica Neue", sans-serif;
}

/* ---------- Escala única ---------- */
body.tipo-nova {
    --t-rotulo: 13px;     /* sobretítulos em caixa-alta, etiquetas, categorias */
    --t-meta: 14px;       /* datas, cargos, informações de apoio curtas */
    --t-apoio: 16px;      /* texto de cartões, listas, links e botões */
    --t-texto: 18px;      /* parágrafos */
    --t-lead: 20px;       /* texto de abertura do hero */
    --t-cartao: 20px;     /* título de cartão */
    --t-destaque: 26px;   /* título de cartão grande (soluções, artigos) */
}

/* ---------- Títulos ---------- */
body.tipo-nova :is(h1, h2, h3, h4) { font-family: var(--titulo) !important; letter-spacing: -.02em !important; }
body.tipo-nova :is(h1, h2) { line-height: 1.1 !important; }
/* Lato: Black (900) nos títulos grandes — é o peso que mais se aproxima do "PONTUAL" da logo. */
body.tipo-nova :is(h1, h2) { font-weight: 900 !important; }
body.tipo-nova :is(h1, h2) :is(em, span),
body.tipo-nova :is(h3, h4) { font-weight: 700 !important; }
/* Títulos de seção maiores (pedido: "conteúdos parecem pequenos para o espaço"): o tamanho padrão
   de título de seção do app.css passou de clamp(2rem,2.7vw,3rem) para clamp(2.3rem,3.3vw,3.25rem). */

/* ---------- Elementos comuns ---------- */
body.tipo-nova .eyebrow,
body.tipo-nova .testimonials-label { font-size: var(--t-rotulo); letter-spacing: .1em; }
body.tipo-nova .btn { font-size: var(--t-apoio); }
body.tipo-nova .btn-sm { font-size: var(--t-meta); }
body.tipo-nova :is(.text-link, .article-link, .solution-cta) { font-size: var(--t-apoio); }

/* ---------- Cabeçalho ---------- */
body.tipo-nova :is(.utility-inner p, .utility-inner a) { font-size: var(--t-rotulo); }
/* Menu com mais presença e área de clique (pedido: "menus muito pequenos"). */
body.tipo-nova .site-navigation > ul { gap: clamp(8px, 1.2vw, 20px); }
body.tipo-nova .site-navigation > ul > li > a { padding-inline: 8px; font-size: 17px; font-weight: 700; }
body.tipo-nova .site-navigation > ul > li > a::after { left: 8px; width: calc(100% - 16px); }

/* ---------- Hero ---------- */
/* O título do hero tem ~630px de largura. Para manter as 3 linhas de hoje, "Tranquilidade
   para todos." precisa caber nela: em 62px mede 670px na Lato e 723px na Arial. */
body.tipo-nova .hero-copy h1 { font-size: clamp(2.8rem, 4vw, 3.6rem); }   /* ~58px em 1440 */
body.tipo-nova .hero-copy > p { font-size: var(--t-lead); line-height: 1.55; }
body.tipo-nova .hero-proof strong { font-size: var(--t-texto); }
body.tipo-nova .hero-proof span { font-size: var(--t-apoio); }
body.tipo-nova :is(.photo-index small, .mini-brand, .floating-label, .floating-meta span) { font-size: var(--t-rotulo); }
body.tipo-nova .floating-meta small { font-size: var(--t-rotulo); }

/* ---------- O que buscamos resolver ---------- */
body.tipo-nova .home-context-copy > p { font-size: var(--t-texto); }
body.tipo-nova .home-context-bridge { font-size: var(--t-apoio); }
body.tipo-nova .home-context-point h3 { font-size: var(--t-cartao); }
body.tipo-nova .home-context-point p { font-size: var(--t-apoio); }

/* ---------- Soluções ---------- */
body.tipo-nova .solutions-intro > p { max-width: 400px; font-size: var(--t-texto); line-height: 1.6; }
body.tipo-nova .solution-eyebrow { font-size: var(--t-rotulo); }
body.tipo-nova .solution-body h3 { font-size: var(--t-destaque); }
body.tipo-nova .solution-body p { font-size: var(--t-texto); }
/* Serviço único (28/09/2026): um painel largo, imagem à esquerda e texto à direita. */
body.tipo-nova .solutions-section .solution-showcase--unico { grid-template-columns: 1fr; max-width: 1180px; }
body.tipo-nova .solution-showcase--unico .solution-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
body.tipo-nova .solution-showcase--unico .solution-media { aspect-ratio: auto; min-height: 420px; }
body.tipo-nova .solution-showcase--unico .solution-body { justify-content: center; padding: clamp(32px, 4vw, 60px); }
body.tipo-nova .solution-showcase--unico .solution-body h3 { font-size: clamp(2rem, 2.6vw, 2.5rem); }
body.tipo-nova .solution-showcase--unico .solution-cta { margin-top: 8px; }
@media (max-width: 900px) {
    body.tipo-nova .solutions-section .solution-showcase--unico { max-width: 760px; }
    body.tipo-nova .solution-showcase--unico .solution-panel { grid-template-columns: 1fr; }
    body.tipo-nova .solution-showcase--unico .solution-media { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---------- Comparativo Sem × Com ---------- */
body.tipo-nova .home-guarantee-heading p { font-size: var(--t-texto); }
body.tipo-nova .home-guarantee-tag { font-size: var(--t-rotulo); }
body.tipo-nova .home-guarantee-side-head h3 { font-size: var(--t-texto); }
body.tipo-nova .home-guarantee-unit-copy strong { font-size: var(--t-apoio); }
body.tipo-nova .home-guarantee-unit-copy small { font-size: var(--t-meta); }
body.tipo-nova .home-guarantee-result-copy strong { font-size: var(--t-apoio); }
body.tipo-nova :is(.home-guarantee-alert, .home-guarantee-ok) { font-size: var(--t-meta); }
body.tipo-nova .home-guarantee-seal-copy strong { font-size: var(--t-apoio); }
body.tipo-nova .home-guarantee-seal-copy small { font-size: var(--t-meta); }
body.tipo-nova .home-guarantee-proofs li { font-size: var(--t-apoio); }

/* ---------- Ecossistema ---------- */
body.tipo-nova .ecosystem-copy > p { max-width: 440px; font-size: var(--t-texto); }
body.tipo-nova .ecosystem-layers li { font-size: var(--t-apoio); }

/* ---------- Por que escolher ---------- */
body.tipo-nova .home-benefits-intro p { font-size: var(--t-texto); }
body.tipo-nova :is(.home-benefits-intro .text-link, .home-benefits-cta) { font-size: var(--t-apoio); }
body.tipo-nova .home-benefit-card h3 { font-size: var(--t-texto); }
body.tipo-nova .home-benefit-card p { font-size: var(--t-apoio); line-height: 1.4; }

/* ---------- Depoimentos ---------- */
body.tipo-nova .testimonials-heading p { font-size: var(--t-texto); }
body.tipo-nova :is(.testimonial-featured-badge, .testimonial-featured-summary > span) { font-size: var(--t-rotulo); }
body.tipo-nova .testimonial-featured-summary p { font-size: var(--t-texto); }
body.tipo-nova .testimonial-featured-summary h3 { font-size: var(--t-cartao); }
body.tipo-nova .testimonial-featured-summary small { font-size: var(--t-meta); }
body.tipo-nova .testimonial-playlist-copy strong { font-size: var(--t-texto); }
body.tipo-nova .testimonial-playlist-copy small { font-size: var(--t-meta); }
body.tipo-nova .testimonial-playlist-copy > span { font-size: var(--t-meta); }
body.tipo-nova .testimonial-playlist-open { font-size: var(--t-meta); }
body.tipo-nova .testimonial-highlights strong { font-size: var(--t-apoio); }
body.tipo-nova .testimonial-highlights small { font-size: var(--t-meta); }

/* ---------- Como começar ---------- */
body.tipo-nova .process-heading > p { font-size: var(--t-texto); }
body.tipo-nova .process-step h3 { font-size: var(--t-cartao); }
body.tipo-nova .process-step p { font-size: var(--t-apoio); }

/* ---------- Conteúdos ---------- */
body.tipo-nova .article-image > span { font-size: var(--t-rotulo); }
body.tipo-nova .article-body > small { font-size: var(--t-meta); }
body.tipo-nova .article-body h3 { font-size: var(--t-destaque); }
body.tipo-nova .article-body p { font-size: var(--t-apoio); }

/* ---------- Chamada final ---------- */
body.tipo-nova .home-cta-content > p { font-size: var(--t-texto); }
body.tipo-nova .home-cta-whats { font-size: var(--t-apoio); }
body.tipo-nova .home-cta-chip strong { font-size: var(--t-apoio); }
body.tipo-nova .home-cta-chip small { font-size: var(--t-meta); }

/* ---------- Rodapé ---------- */
body.tipo-nova .footer-brand-block > p { font-size: var(--t-apoio); }
body.tipo-nova :is(.footer-phone, .footer-whatsapp) { font-size: var(--t-apoio); }
body.tipo-nova .footer-brand-block > small { font-size: var(--t-meta); }
body.tipo-nova .footer-column h2 { font-size: var(--t-rotulo); }
body.tipo-nova .footer-column > a { font-size: var(--t-apoio); }
body.tipo-nova .footer-addresses strong { font-size: var(--t-apoio); }
body.tipo-nova .footer-addresses span { font-size: var(--t-meta); }
body.tipo-nova .footer-addresses small { font-size: var(--t-rotulo); }
body.tipo-nova :is(.footer-bottom p, .footer-bottom a) { font-size: var(--t-rotulo); }

/* ---------- Hierarquia de CTA (pedido: "CTAs precisam ter mais destaque") ----------
   1. Principal  = vermelho institucional sólido, maior — só nas ações de proposta.
   2. Secundário = contorno em preto institucional (branco sobre fundo escuro).
   3. Navegação  = link de texto sublinhado (.text-link), como já é. */
body.tipo-nova .btn { font-weight: 700; }
body.tipo-nova .btn-primary { color: #fff; background: var(--red); box-shadow: 0 10px 24px rgba(35, 31, 32, .16); }
body.tipo-nova .btn-primary:hover { background: var(--red-dark); box-shadow: 0 14px 30px rgba(35, 31, 32, .22); }
body.tipo-nova .btn-lg { min-height: 60px; padding: 18px 32px; font-size: 17px; }
body.tipo-nova .hero-actions .btn-text,
body.tipo-nova :is(.testimonials-cta, .content-cta) .btn-primary {
    min-height: 56px; padding: 15px 28px; color: var(--ink); background: transparent;
    border: 2px solid var(--ink); border-radius: 999px; box-shadow: none; font-size: var(--t-apoio);
}
body.tipo-nova .hero-actions .btn-text { min-height: 60px; font-size: 17px; }
body.tipo-nova .hero-actions .btn-text::before { display: none; }
body.tipo-nova .hero-actions .btn-text:hover,
body.tipo-nova :is(.testimonials-cta, .content-cta) .btn-primary:hover { color: #fff; background: var(--ink); }
body.tipo-nova .ecosystem-cta.btn-primary { color: #fff; background: transparent; border: 2px solid #fff; box-shadow: none; }
body.tipo-nova .ecosystem-cta.btn-primary:hover { color: var(--ink); background: #fff; }
body.tipo-nova .text-link:hover { color: var(--red); }

/* ---------- Blocos de texto mais largos (acompanham a letra maior) ---------- */
body.tipo-nova .home-context-copy > p { max-width: 540px; }
body.tipo-nova .solutions-intro > p { max-width: 440px; }
body.tipo-nova .home-benefits-intro p { max-width: 420px; }
body.tipo-nova .process-heading > p { max-width: 470px; }
body.tipo-nova .testimonials-heading p { max-width: 640px; }

/* ---------- Fundos das seções claras ----------
   Pedido do marketing: variação no claro só a partir do PRETO (nada de rosado) e a troca de
   seção precisa ser PERCEBIDA. Faixas alternadas: seção branca lisa × seção cinza clara com um
   degradê suave dentro dela (#F2F2F2 → #EAEBEC, cinzas da escala do preto institucional) e um
   fio no topo. O salto branco ↔ cinza marca o início de cada seção.
   Ordem na home: hero · contexto · soluções · comparativo · [ecossistema escuro] · benefícios ·
   depoimentos · processo · conteúdos · chamada final · [rodapé escuro]. */
body.tipo-nova { --secao-cinza-topo: #F2F2F2; --secao-cinza-base: #EAEBEC; --secao-fio: #DCDDDE; }
body.tipo-nova :is(.hero-home, .solutions-section, .home-benefits, .process-section, .home-cta) {
    background: #FFFFFF !important;
}
body.tipo-nova :is(.home-context-section, .home-guarantee-section, .testimonials-section, .content-section) {
    background: linear-gradient(180deg, var(--secao-cinza-topo) 0%, var(--secao-cinza-base) 100%) !important;
    box-shadow: inset 0 1px 0 var(--secao-fio), inset 0 -1px 0 var(--secao-fio);
}
body.tipo-nova .home-cta { border-top: 0; }

/* Linha curva decorativa do hero: era vermelho a 16% de opacidade (= rosa sobre o branco).
   Vira cinza claro sólido da escala do preto. */
body.tipo-nova .hero-thread { opacity: 1; }
body.tipo-nova .hero-thread path { stroke: #D1D3D4; }
/* Pontos do fio das soluções: vermelho a 85% clareava o tom; vermelho institucional cheio. */
body.tipo-nova .solutions-thread circle { opacity: 1; }

/* ---------- Cores que não passam pelo conversor (estão no HTML/SVG) ---------- */
/* Sobretítulo sobre fundo escuro: branco com o traço vermelho (o salmão saiu da paleta). */
body.tipo-nova .eyebrow-light { color: #fff; }
body.tipo-nova .eyebrow-light > span { background: var(--red); }
/* Prédio do comparativo: vinhos fora da paleta → vermelhos complementares e preto institucional. */
body.tipo-nova .home-guarantee-building [fill="#7C1722"] { fill: #9E0B0F; }
body.tipo-nova .home-guarantee-building [fill="#2C070C"],
body.tipo-nova .home-guarantee-building [fill="#1F1C1D"] { fill: #231F20; }
body.tipo-nova .home-guarantee-building #pgTower stop:first-child { stop-color: #9E0B0F; }
body.tipo-nova .home-guarantee-building #pgTower stop:last-child { stop-color: #790000; }

/* Até 1320px o cabeçalho não comporta o menu em 17px com logo, "Entrar" e o CTA (a Arial, mais larga, estourava 41px em 1280). */
@media (max-width: 1320px) {
    body.tipo-nova .site-navigation > ul { gap: 4px; }
    body.tipo-nova .site-navigation > ul > li > a { padding-inline: 6px; font-size: 16px; }
    body.tipo-nova .site-navigation > ul > li > a::after { left: 6px; width: calc(100% - 12px); }
}
/* Notebooks pequenos (1081–1200px, antes do menu recolher): ainda maior que os 13px de hoje. */
@media (max-width: 1200px) {
    body.tipo-nova .site-navigation > ul { gap: 2px; }
    body.tipo-nova .site-navigation > ul > li > a { padding-inline: 4px; font-size: 14.5px; }
    body.tipo-nova .site-navigation > ul > li > a::after { left: 4px; width: calc(100% - 8px); }
}

/* ---------- Celular ---------- */
@media (max-width: 680px) {
    body.tipo-nova .hero-copy h1 { font-size: 2.45rem; }
    body.tipo-nova { --t-texto: 17px; --t-lead: 18px; --t-cartao: 19px; --t-destaque: 23px; }
    body.tipo-nova main h2 { font-size: clamp(2rem, 8.4vw, 2.5rem) !important; }
    body.tipo-nova .hero-actions .btn-text { width: 100%; }
}

/* ---------- Fechamentos claros nas páginas internas (28/09/2026) ----------
   Regra do site: a seção colada no rodapé (escuro) é sempre CLARA. Onde a página terminava em
   faixa escura, ela vira faixa cinza (mesmos tons das seções cinza da home). */
body.tipo-nova :is(.faq-support, .blog-newsletter, .portal-invite),
body.tipo-nova .home-cta.home-cta--cinza {
    color: var(--ink);
    background: linear-gradient(180deg, var(--secao-cinza-topo) 0%, var(--secao-cinza-base) 100%) !important;
    box-shadow: inset 0 1px 0 var(--secao-fio);
}
body.tipo-nova :is(.faq-support-grid, .blog-newsletter-grid-bg) { display: none; }
body.tipo-nova :is(.faq-support h2, .blog-newsletter-layout h2, .portal-invite-grid h2) { color: var(--ink); }
body.tipo-nova :is(.faq-support header > p, .blog-newsletter-layout > div > p, .portal-invite-grid p) { color: #58595B; font-size: var(--t-texto); }
/* Dúvidas: canais em cartões brancos. */
body.tipo-nova .faq-support-channels > a { color: var(--ink); background: #fff; border-color: #DCDDDE; box-shadow: 0 10px 26px rgba(35, 31, 32, .06); backdrop-filter: none; }
body.tipo-nova .faq-support-channels > a:hover { background: #fff; border-color: #A7A9AC; }
body.tipo-nova .faq-support-channels > a > span { background: #F1F2F2; }
body.tipo-nova .faq-support-channels small { color: #6D6E71; font-size: var(--t-rotulo); }
body.tipo-nova .faq-support-channels strong { font-size: var(--t-texto); }
/* Conteúdos: formulário da newsletter sobre o claro. */
body.tipo-nova .blog-newsletter-form input { color: var(--ink); background: #fff; border-color: #BCBEC0; }
body.tipo-nova .blog-newsletter-form input::placeholder { color: #808285; }
body.tipo-nova .blog-newsletter-form input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(35, 31, 32, .08); }
/* Páginas por público: convite do ambiente demo. */
body.tipo-nova .portal-invite-grid h2 { font-size: clamp(2.3rem, 3.3vw, 3.25rem); }
body.tipo-nova .portal-invite-cards article { box-shadow: 0 24px 50px rgba(35, 31, 32, .12); }
body.tipo-nova .portal-invite-cards small { font-size: var(--t-rotulo); }
/* O 3º cartão cobria o título do 2º ("Acesso organizado"). */
body.tipo-nova .portal-invite-cards article:nth-child(3) { left: 6%; }