/*
 * Personaliza — CSS de layout/estrutura, portado 1:1 do index.html aprovado.
 * Os tokens visuais (cores, fontes, radius) em :root abaixo são os defaults;
 * a partir do Sprint 2 eles passam a ser sobrescritos dinamicamente por
 * inc/customizer-css-output.php a partir dos valores salvos no Personalizar.
 */
:root{
  --navy: #0D1B2E;
  --navy-2: #142C48;
  --navy-3: #1B3A5C;
  /* Verde da marca: hex único #00FFD3 nos DOIS tons, por decisão do cliente.
     ATENÇÃO ao mexer aqui: #00FFD3 sobre branco dá ~1,3:1 de contraste (o
     mínimo legível é 4,5:1), e --teal-dark é usado como cor de TEXTO sobre
     fundo claro em ~20 pontos do tema (destaque de título de seção, tagline
     dos pilares, h2 do case, hover do menu, aviso de sucesso do formulário).
     Esses textos ficam de baixa legibilidade — é uma escolha de marca
     assumida, não um descuido. Para reverter só esses casos, basta devolver
     --teal-dark a #14A886, que é a mesma família em tom escuro. */
  --teal: #00FFD3;
  --teal-dark: #00FFD3;
  --cyan: #23B3CB;
  --orange: #F58220;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --ink: #0D1B2E;
  --muted: #667085;
  --line: #E6E9EF;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  /* Chevron "›" como SVG, usado em mask pelos círculos .dot dos botões —
     ver a nota em .dot mais abaixo sobre por que não é o glifo de texto. */
  --chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:var(--font-heading);
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
}
p{margin:0;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
/* Texto só pra leitor de tela — some visualmente sem sair da árvore de
   acessibilidade (display:none tiraria dela). Mesma receita do WordPress. */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal-dark);
}

/* Ícones enviados como imagem (upload) ficam contidos no mesmo espaço do
   emoji/texto; em elementos não substituídos (<span>) width/height é
   ignorado pelo navegador, então esta regra não afeta o caso de texto. */
.icon-emoji{width:20px;height:20px;object-fit:contain;}
.icon-emoji.icon-svg{display:inline-flex;align-items:center;justify-content:center;}
.icon-emoji.icon-svg svg{width:100%;height:100%;}

/* ---------- Efeitos de abertura ao rolar (Home) ---------- */
/* .reveal começa invisível/deslocado pra baixo e ganha .is-visible via JS
   (assets/js/theme.js) na primeira vez que entra na tela. --reveal-i (0–6,
   calculado em JS a partir da posição entre os irmãos .reveal do mesmo
   container) dá um atraso em cascata pros cards de um mesmo grid — sutil
   (70ms por item, teto de 420ms) pra não virar um efeito cansativo em
   grids com muitos itens. */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
  transition-delay:calc(var(--reveal-i, 0) * 70ms);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Placeholder boxes ---------- */
.placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  background:
    repeating-linear-gradient(135deg, #EDEFF3, #EDEFF3 10px, #E4E7ED 10px, #E4E7ED 20px);
  border:1.5px dashed #B9C0CC;
  border-radius:var(--radius-md);
  color:#7A8496;
  font-size:13px;
  line-height:1.5;
  padding:20px;
  width:100%;
}
.placeholder .ph-icon{font-size:22px;opacity:.7;}
.placeholder .ph-label{font-weight:700;color:#57616F;font-size:12px;text-transform:uppercase;letter-spacing:.06em;}
.placeholder .ph-dim{font-size:11px;color:#98A1AF;}
.placeholder.dark{
  background:repeating-linear-gradient(135deg, #16304F, #16304F 10px, #10233B 10px, #10233B 20px);
  border-color:#2C4E75;
  color:#9FB4CC;
}
.placeholder.dark .ph-label{color:#CFE3F5;}
.placeholder.dark .ph-dim{color:#7C93AE;}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(245,247,250,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 32px;max-width:var(--maxw);margin:0 auto;
}
/* No desktop, .nav-top-row (logo + hambúrguer agrupados no HTML, ver
   header.php) não deve virar uma caixa própria — display:contents remove
   ela da árvore de layout, então .nav-brand e .hamburger continuam se
   comportando como filhos diretos do flex `.nav`, como sempre foram. Só
   ganha layout de verdade no mobile (ver @media max-width:1240px). */
.nav-top-row{display:contents;}
.nav-brand{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
/* ---------- Seletor de idioma (site multilíngue, ver inc/i18n.php) ----------
   Flutuante na borda esquerda da tela, independente do cabeçalho — mesmo
   padrão de posicionamento fixo do .chat-fab (ver mais abaixo), espelhado
   pro lado esquerdo. */
.lang-switcher-floating{
  position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:4px;
  background:var(--card);border-radius:999px;padding:8px 6px;
  box-shadow:0 8px 24px rgba(13,27,46,.16);
}
.lang-switcher-item{
  font-size:11px;font-weight:700;letter-spacing:0.03em;text-align:center;
  color:var(--muted);padding:5px 9px;border-radius:999px;
  transition:color .15s ease, background .15s ease;
}
.lang-switcher-item:hover{color:var(--ink);background:rgba(13,27,46,0.06);}
.lang-switcher-item.is-active{color:var(--navy);background:rgba(31,203,160,0.16);}
.lang-switcher-item.is-unavailable{opacity:.55;}
@media (max-width:768px){
  .lang-switcher-floating{left:8px;padding:6px 4px;gap:2px;}
  .lang-switcher-item{padding:4px 6px;font-size:10px;}
}
.logo-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg, var(--teal), var(--cyan));
  position:relative;flex-shrink:0;
}
.logo-mark::after{
  content:"";position:absolute;inset:9px;
  background:var(--navy);border-radius:4px;
}
.logo-text{line-height:1.05;}
.logo-text .name{font-family:var(--font-heading);font-weight:800;font-size:16px;letter-spacing:0.02em;}
/* Altura vem do style="" inline (slider do Personalizar); largura fica livre
   (width:auto no style inline) pra não cortar logotipos largos (ícone+texto
   numa arte só) — sem border-radius/object-fit:cover, que são coisa de ícone
   quadrado e cortavam a arte quando o logo era um lockup horizontal. */
.site-logo-img{object-fit:contain;flex-shrink:0;}
.logo-text .tag{font-size:9px;letter-spacing:0.14em;color:var(--muted);text-transform:uppercase;font-weight:600;}
.nav-links{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:nowrap;}
.nav-links a{font-size:13.5px;font-weight:600;color:#2B3648;white-space:nowrap;}
.nav-links a:hover{color:var(--teal-dark);}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;
  font-size:13px;font-weight:700;
  border:none;cursor:pointer;white-space:nowrap;
}
/* Base do círculo do ícone "›" nos botões — precisa estar num seletor que
   valha pra QUALQUER botão (não só .btn-primary), senão um <span> sem
   display:flex/width/height definidos vira um retângulo preto (o tamanho
   do glifo "›" + o background da cor), em vez de um círculo.

   O ícone É DESENHADO por ::before (chevron SVG em mask), não pelo glifo "›"
   que está no HTML — o glifo continua no markup por compatibilidade, mas
   fica com font-size:0. Motivo: centralizar texto num círculo centraliza a
   CAIXA DE LINHA, não a tinta do glifo; o "›" fica alto/baixo dentro do em
   quadrado dependendo da fonte (e o site cai em fallback enquanto a Inter
   não carrega), que é exatamente o "ícone descentralizado" reportado.
   Com mask + currentColor o ícone herda a cor de cada variante de botão
   como antes, e o centro óptico passa a ser o centro geométrico do círculo. */
.dot{
  --dot-icon-size:10px;
  width:20px;height:20px;border-radius:50%;
  display:flex;justify-content:center;align-items:center;
  font-size:0;line-height:0;
  transition:transform .2s;
}
.dot::before{
  content:"";
  width:var(--dot-icon-size);height:var(--dot-icon-size);
  background:currentColor;
  -webkit-mask:var(--chevron-right) center / var(--dot-icon-size) var(--dot-icon-size) no-repeat;
          mask:var(--chevron-right) center / var(--dot-icon-size) var(--dot-icon-size) no-repeat;
}
.btn:hover .dot{transform:translateX(2px);}

.btn-primary{background:var(--navy);color:#fff;}
.btn-primary .dot{background:var(--teal);color:var(--navy);}
.btn-outline{background:#fff;color:var(--navy);border:1.5px solid var(--line);}
.btn-outline .dot{background:var(--navy);color:#fff;}
.btn-light{background:#fff;color:var(--navy);}
.btn-light .dot{background:var(--navy);color:#fff;}
.btn-teal{background:var(--teal);color:var(--navy);}
.btn-teal .dot{background:var(--navy);color:var(--teal);}
.nav > .btn-primary{flex-shrink:0;}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0;}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;}

/* Submenu (dropdown) — hoje só usado em "Inteligência de Clientes", que
   agrupa Método CRESCER®/Customer IQ® (ver personaliza_render_header_menu_items()
   em inc/template-tags.php). Desktop: dropdown flutuante no hover/focus.
   Mobile: vira lista estática indentada dentro do próprio painel do
   hambúrguer (sem :hover em touch), ver @media (max-width:1240px) abaixo. */
.nav-links li.has-submenu{position:relative;}
.nav-links li.has-submenu > a{display:inline-flex;align-items:center;gap:4px;}
.nav-links .submenu-caret{font-size:9px;transition:transform .15s;}
.nav-links li.has-submenu:hover .submenu-caret,
.nav-links li.has-submenu:focus-within .submenu-caret{transform:rotate(180deg);}
.nav-links .submenu{
  list-style:none;margin:0;padding:8px;
  position:absolute;top:100%;left:0;margin-top:6px;min-width:220px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 28px rgba(13,27,46,0.14);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:200;
}
.nav-links .submenu li{margin:0;}
.nav-links .submenu a{display:block;padding:10px 12px;border-radius:8px;white-space:nowrap;color:#2B3648;}
.nav-links .submenu a:hover{background:#F5F7FA;color:var(--teal-dark);}
.nav-links li.has-submenu:hover .submenu,
.nav-links li.has-submenu:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.has-hero header .nav-links .submenu a{color:#2B3648;}
.has-hero header .nav-links .submenu a:hover{color:var(--teal-dark);}
@media (max-width:1240px){
  .nav-links .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:transparent;
    padding:2px 0 2px 14px;margin-top:2px;
  }
  .nav-links li.has-submenu > a{justify-content:space-between;}
  .nav-links .submenu a{padding:8px 6px;font-weight:500;font-size:13px;}
}

/* =====================================================================
   HOME — layout do Figma (node 30-897).
   As classes .home-* valem SÓ pra página inicial (front-page.php). As
   páginas internas continuam usando .section/.section-head/.cases-grid/
   .articles-grid/.entregas-grid, definidos mais abaixo e intocados.
   ================================================================== */

/* Cabeçalho transparente por cima da faixa escura de abertura — vale pra
   Home (.home-hero) E pras páginas internas/posts/cases (.page-banner). A
   classe 'has-hero' é posta no <body> por personaliza_body_class_has_hero()
   (functions.php) só nas telas que realmente abrem com essa faixa; onde não
   há faixa (busca, 404, fallback do index.php) o header continua branco e
   sticky, senão o menu branco ficaria invisível sobre fundo claro. */
.has-hero header{
  position:absolute;top:0;left:0;right:0;
  background:transparent;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,0.25);
}
.has-hero header .nav-links a{color:#fff;}
.has-hero header .nav-links a:hover{color:var(--teal);}
.has-hero header .logo-text .name,
.has-hero header .logo-text .tag{color:#fff;}
.has-hero header .hamburger span{background:#fff;}

/* ---------- Home · Hero ---------- */
.home-hero{
  position:relative;
  min-height:min(78vh, 620px);
  display:flex;align-items:center;
  background-color:var(--navy);
  background-size:cover;background-position:center;
  padding:120px 0 64px;
}
.home-hero--empty{
  background-image:linear-gradient(120deg, var(--navy) 0%, #1B3A5C 100%);
}

/* Banners rotativos: cada slide é uma camada empilhada no mesmo lugar, e a
   troca é só opacidade (crossfade). Empilhar com grid em vez de position:
   absolute mantém as camadas participando do tamanho do container, então o
   Hero não precisa de altura fixa pra não colapsar. */
.home-hero-slides{
  position:absolute;inset:0;display:grid;z-index:0;
}
.home-hero-slide{
  grid-area:1 / 1;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .9s ease;
}
.home-hero-slide.is-active{opacity:1;}
/* O conteúdo e os controles ficam ACIMA das camadas de imagem. */
.home-hero-inner{width:100%;position:relative;z-index:1;}
.home-hero-dots{
  position:absolute;z-index:2;left:0;right:0;bottom:28px;
  display:flex;gap:8px;justify-content:center;
}
.home-hero-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:width .25s ease, background .25s ease;
}
.home-hero-dot:hover{background:rgba(255,255,255,.75);}
.home-hero-dot.is-active{background:var(--teal);width:22px;border-radius:4px;}
.home-hero-dot:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* Setas anterior/próximo. O ícone é SVG (não o glifo "‹"/"›"), então o
   centro óptico é o centro geométrico do botão — sem depender da métrica da
   fonte, que é justamente o que descentraliza o "›" nos botões .dot. */
.home-hero-arrow{
  position:absolute;z-index:2;top:50%;transform:translateY(-50%);
  width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(2px);
  transition:background .2s ease;
}
.home-hero-arrow:hover{background:rgba(255,255,255,.3);}
.home-hero-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.home-hero-arrow svg{width:22px;height:22px;display:block;}
.home-hero-arrow--prev{left:20px;}
.home-hero-arrow--next{right:20px;}

.home-hero h1{
  color:#fff;font-size:clamp(38px, 6.2vw, 76px);line-height:1.06;
  max-width:15ch;text-wrap:balance;
}
.home-hero h1 .hl{color:var(--teal);}

/* Frases dos banners: empilhadas no mesmo grid-area, igual às imagens, pra
   trocarem em crossfade sem empurrar o layout (o <h1> mantém a altura da
   maior frase, então nada "pula" a cada troca). */
.home-hero-title{display:grid;}
.home-hero-title-item{
  grid-area:1 / 1;
  opacity:0;transition:opacity .9s ease;
  pointer-events:none;
}
.home-hero-title-item.is-active{opacity:1;pointer-events:auto;}

/* Quem pediu menos animação no sistema não recebe crossfade: o slide ativo
   simplesmente aparece. O JS também não inicia a rotação automática nesse
   caso (ver assets/js/theme.js) — os controles continuam funcionando. */
@media (prefers-reduced-motion: reduce){
  .home-hero-slide,
  .home-hero-title-item{transition:none;}
}

/* ---------- Home · estrutura das seções ---------- */
.home-main{background:#EFF3FB;}
.home-section{padding:56px 0;}
.home-section:first-child{padding-top:64px;}
.home-section-title{
  font-size:clamp(22px, 2.4vw, 30px);line-height:1.28;max-width:22ch;margin-bottom:32px;
}
.home-section-title .hl{color:var(--teal-dark);}

/* ---------- Home · Desafios (5 cards) ---------- */
.desafios-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch;}
.desafios-row .desafio-card{
  border:none;box-shadow:0 6px 20px rgba(13,27,46,.07);
  padding:20px 18px;gap:10px;border-radius:14px;
}
/* No design os ícones são traços finos direto sobre o card branco (sem a
   "pastilha" verde-clara que os cards das páginas internas usam). O tamanho
   precisa ser explícito porque .icon-emoji.icon-svg svg usa width/height:100%
   — com height:auto no pai, o SVG colapsaria pra zero.
   O .icon-emoji também precisa ser redimensionado aqui: a regra global fixa
   20×20 (tamanho de emoji), e os ícones enviados como IMAGEM pelo cliente
   ficavam quadradinhos ilegíveis nesse tamanho. */
.desafios-row .desafio-card .icon{
  width:30px;height:30px;background:none;border-radius:0;
  justify-content:flex-start;color:var(--navy);font-size:24px;margin-bottom:2px;
}
.desafios-row .desafio-card .icon .icon-emoji{width:30px;height:30px;}
.desafios-row .desafio-card h3{font-size:13.5px;line-height:1.35;}
.desafios-row .desafio-card p{font-size:11.5px;line-height:1.5;}

/* ---------- Home · Método CRESCER® ----------
   'background-color' (e não o atalho 'background'): a imagem de fundo da
   seção vem por style inline, de personaliza_section_bg_style() — o atalho
   redefiniria background-image e brigaria com ela. Sem imagem escolhida no
   Personalizar, sobra só o navy, que é o comportamento esperado. */
.metodo-card{
  background-color:var(--navy);border-radius:20px;color:#fff;
  background-size:cover;background-position:center;
  padding:clamp(28px, 4vw, 52px);
}
/* Com imagem, o card assume a proporção do próprio arquivo enviado
   (--personaliza-section-ratio vem do PHP, ver personaliza_section_bg_style()).
   Proporções iguais + 'cover' = imagem inteira visível, sem recorte e sem
   emenda. O texto fica centralizado verticalmente sobre ela.
   min-height é a rede de segurança: se o texto for mais alto que a proporção
   permitir, o card cresce em vez de espremer/vazar o conteúdo. */
.metodo-card.has-bg{
  aspect-ratio:var(--personaliza-section-ratio, 2.1);
  min-height:340px;
  display:flex;flex-direction:column;justify-content:center;
}
.metodo-card h2{font-size:clamp(20px, 2.3vw, 28px);color:#fff;line-height:1.28;max-width:20ch;}
.metodo-card h2 .hl{color:var(--teal);}
.metodo-card p{margin-top:20px;color:#B9C6D9;font-size:13.5px;line-height:1.7;max-width:46ch;}
/* align-self: sem isso o botão estica de ponta a ponta quando o card está em
   modo flex-column (.has-bg) — itens de flex herdam align-items:stretch, e o
   .btn, sendo blockificado como item, ocupa a largura inteira. */
.metodo-card .btn{margin-top:28px;align-self:flex-start;}
/* No Figma o botão branco do card navy tem o ponto teal (o .btn-light padrão
   usa ponto navy, que sumiria contra o próprio botão branco). */
.metodo-card .btn-light .dot{background:var(--teal);}

/* ---------- Home · Customer IQ ----------
   Formato original (gauge com a pontuação no centro + escala de 3 níveis
   descrita), retomado a pedido do cliente no lugar do card enxuto do Figma. */
.iq-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:44px;display:grid;grid-template-columns:0.7fr 1.3fr 0.9fr;gap:36px;align-items:center;
}
.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
.gauge{position:relative;width:170px;height:170px;}
.gauge svg{transform:rotate(-90deg);}
.gauge-label{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.gauge-label .g-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.05em;text-transform:uppercase;}
.gauge-label .g-score{font-family:var(--font-heading);font-weight:800;font-size:38px;color:var(--navy);line-height:1;margin-top:4px;}
.gauge-label .g-max{font-size:11px;color:var(--muted);margin-top:2px;}

.iq-mid h2{font-size:24px;line-height:1.3;}
.iq-mid h2 .hl{color:var(--teal-dark);}
.iq-mid p{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.65;max-width:380px;}
.iq-mid .cta-row{margin-top:22px;}

.iq-scale{display:flex;flex-direction:column;gap:16px;border-left:1px solid var(--line);padding-left:28px;}
.iq-scale .scale-item{display:flex;gap:12px;align-items:flex-start;}
.iq-scale .range{
  font-size:11px;font-weight:800;color:#fff;background:var(--navy);
  padding:4px 8px;border-radius:6px;min-width:52px;text-align:center;flex-shrink:0;
}
.iq-scale .range.mid{background:var(--cyan);}
.iq-scale .range.high{background:var(--teal-dark);}
.iq-scale .scale-text b{display:block;font-size:13px;font-weight:700;}
.iq-scale .scale-text p{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5;}

/* ---------- Home · Conteúdos (imagem + corpo branco) ---------- */
.artigos-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.artigo-tile{display:flex;flex-direction:column;}
.artigo-tile-media{display:block;border-radius:14px 14px 0 0;overflow:hidden;}
.artigo-tile-media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.artigo-tile-media .ph-article{aspect-ratio:16/10;border-radius:0;}
.artigo-tile-body{
  background:var(--card);border-radius:0 0 14px 14px;padding:16px 16px 20px;
  flex:1;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 6px 20px rgba(13,27,46,.07);
}
.artigo-tile-body h3{font-size:13.5px;line-height:1.4;font-weight:700;}
.artigo-tile-body .meta{font-size:11px;color:var(--muted);}

/* ---------- Home · CTA final (faixa navy de largura total) ---------- */
.home-cta{background:var(--navy);color:#fff;padding:clamp(48px, 6vw, 84px) 0;}
.home-cta-eyebrow{
  display:block;color:var(--teal);font-size:13px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
}
.home-cta h2{
  color:#fff;font-size:clamp(26px, 3.4vw, 40px);line-height:1.2;margin-top:16px;max-width:20ch;
}
.home-cta h2 .hl{color:var(--teal);}
.home-cta-bottom{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:28px;
}
.home-cta-bottom p{color:#B9C6D9;font-size:13.5px;line-height:1.7;max-width:52ch;}
/* Botão contornado sobre fundo escuro (só existe na faixa do CTA final). */
.btn-ghost{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.7);
  padding:12px 30px;
}
.btn-ghost:hover{background:#fff;color:var(--navy);}

@media (max-width:1100px){
  .desafios-row{grid-template-columns:repeat(3,1fr);}
  .artigos-row{grid-template-columns:repeat(2,1fr);}
  /* A escala de níveis desce pra baixo do gauge+texto e vira uma linha. */
  .iq-card{grid-template-columns:1fr 1fr;}
  .iq-scale{
    grid-column:1/-1;border-left:none;padding-left:0;
    border-top:1px solid var(--line);padding-top:24px;
    flex-direction:row;justify-content:space-between;
  }
}
@media (max-width:860px){
  /* Numa tela estreita, manter a proporção da imagem deixaria o card baixo
     demais pro texto caber. Solta a proporção e volta pro comportamento
     normal (altura pelo conteúdo); a imagem continua de fundo, cobrindo. */
  .metodo-card.has-bg{aspect-ratio:auto;min-height:0;}
}
@media (max-width:760px){
  .home-hero{min-height:auto;padding:110px 0 48px;}
  /* Setas menores e coladas nas bordas em tela estreita, senão avançam sobre
     a frase do banner. */
  .home-hero-arrow{width:36px;height:36px;}
  .home-hero-arrow svg{width:18px;height:18px;}
  .home-hero-arrow--prev{left:8px;}
  .home-hero-arrow--next{right:8px;}
  .desafios-row{grid-template-columns:1fr 1fr;}
  .artigos-row{grid-template-columns:1fr;}
  .iq-card{grid-template-columns:1fr;padding:32px 24px;}
  .iq-scale{flex-direction:column;}
}
@media (max-width:480px){
  .desafios-row{grid-template-columns:1fr;}
}

/* ---------- Seções (páginas internas) ---------- */
.section{padding:64px 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px;
}
.section-head h2{font-size:28px;line-height:1.25;max-width:480px;}
.section-head h2 .hl{color:var(--teal-dark);}
.section-head .side-text{font-size:14px;color:var(--muted);max-width:340px;line-height:1.6;}

.entregas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.desafio-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px;display:flex;flex-direction:column;gap:14px;
}
.desafio-card .icon{
  width:38px;height:38px;border-radius:10px;background:#EAF9F4;
  display:flex;align-items:center;justify-content:center;color:var(--teal-dark);font-size:18px;
}
.desafio-card h3{font-size:15px;line-height:1.3;font-weight:700;}
.desafio-card p{font-size:13px;color:var(--muted);line-height:1.55;}
/* .dots (indicador de carrossel) removido junto com o markup em
   front-page.php — não havia slider nenhum por trás, ver a nota lá. */

/* ---------- Serviços — ponte conceitual + 3 pilares ---------- */
.bridge{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 32px;margin-bottom:16px;display:flex;gap:20px;align-items:center;
}
.bridge .icon{
  width:48px;height:48px;border-radius:13px;background:#EAF9F4;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--teal-dark);
}
.bridge p{font-size:14.5px;line-height:1.7;color:#33404F;}
.bridge p .hl{color:var(--teal-dark);font-weight:700;}

.pillar{margin-bottom:56px;}
.pillar:last-of-type{margin-bottom:0;}
.pillar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:20px;border-bottom:2px solid var(--line);}
.pillar-head .num{
  font-family:var(--font-heading);font-weight:800;font-size:13px;color:#fff;background:var(--navy);
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.pillar-head h2{font-size:24px;line-height:1.25;}
.pillar-head .tagline{font-size:14px;color:var(--teal-dark);font-weight:600;margin-top:6px;}
.pillar-head .side-note{font-size:12.5px;color:var(--muted);max-width:280px;text-align:right;line-height:1.5;}

.pillar[data-pillar="1"] .pillar-head .num{background:var(--teal-dark);}
.pillar[data-pillar="2"] .pillar-head .num{background:var(--cyan);}
.pillar[data-pillar="3"] .pillar-head .num{background:var(--orange);}
.pillar[data-pillar="1"] .pillar-head .tagline{color:var(--teal-dark);}
.pillar[data-pillar="2"] .pillar-head .tagline{color:var(--cyan);}
.pillar[data-pillar="3"] .pillar-head .tagline{color:var(--orange);}

.service-list{display:flex;flex-direction:column;}
.service-item{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);}
.service-item:last-child{border-bottom:none;}
.service-item .s-num{font-family:var(--font-heading);font-weight:800;font-size:19px;color:var(--line);}
.pillar[data-pillar="1"] .service-item .s-num{color:#CFF3E8;}
.pillar[data-pillar="2"] .service-item .s-num{color:#CDEEF4;}
.pillar[data-pillar="3"] .service-item .s-num{color:#FBDDBB;}
.service-item h3{font-size:16px;margin-bottom:6px;}
.service-item p{font-size:13.5px;color:var(--muted);line-height:1.65;max-width:640px;}

/* CTA banner arredondado — reaproveitado no fim de Serviços e Inteligência de
   Clientes (o final da Home já tem seu próprio .home-cta full-width; este é
   o "card" fechado, como no mockup). */
.cta-banner{
  background:radial-gradient(circle at 15% 30%, var(--navy-3) 0%, var(--navy) 60%);
  border-radius:28px;padding:44px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;color:#fff;
}
.cta-banner h2{font-size:22px;line-height:1.35;max-width:460px;color:#fff;}
.cta-banner h2 .hl{color:var(--teal);}

/* Bloco de vídeo explicativo (Inteligência de Clientes) — com vídeo
   cadastrado, reaproveita .personaliza-video-embed (proporção vinda do
   próprio arquivo via --video-aspect, ver regra mais abaixo), mesmo
   componente do vídeo-depoimento dos cases; sem vídeo ainda, cai no
   .placeholder padrão do tema (ver personaliza_render_image()), travado em
   16:9 pra reservar o mesmo espaço do mockup em vez de ficar com altura de
   caixa pequena/arbitrária. */
.video-feature{margin-bottom:8px;}
.video-feature .video-placeholder{aspect-ratio:16/9;}

@media (max-width:860px){
  .bridge{flex-direction:column;align-items:flex-start;padding:24px;}
  .pillar-head .side-note{text-align:left;max-width:100%;}
  .service-item{grid-template-columns:38px 1fr;}
  .cta-banner{flex-direction:column;align-items:flex-start;padding:30px 24px;}
}

/* ---------- Cases ---------- */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.case-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:var(--card);}
.case-card .ph-case{aspect-ratio:4/3;border-radius:0;}
.case-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.case-body{padding:20px;}
.tag{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--teal-dark);background:#EAF9F4;padding:5px 10px;border-radius:6px;margin-bottom:12px;
}
.case-body h3{font-size:16px;line-height:1.4;font-weight:700;}
.case-body a.more{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:12px;font-weight:700;color:var(--navy);
}

/* ---------- Reflexões ---------- */
.articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.article-card .ph-article{aspect-ratio:4/3;border-radius:var(--radius-sm);}
.article-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);display:block;}
.article-card{display:flex;flex-direction:column;gap:12px;}
/* Imagem do card virou link (ver template-reflexoes.php) — o <a> precisa ser
   bloco pra não colapsar a altura da imagem, e o radius vai nele pro overflow
   do hover não vazar quadrado nos cantos. */
.article-card-media{display:block;border-radius:var(--radius-sm);overflow:hidden;}
.article-card-media img{transition:transform .35s ease;}
.article-card-media:hover img{transform:scale(1.04);}
.article-card h3{font-size:14.5px;line-height:1.4;font-weight:700;margin-top:2px;}
.article-card .meta{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:6px;}

/* ---------- Footer ---------- */
footer{background:var(--navy);color:#B9C6D9;padding:64px 0 28px;}
/* Flexbox em vez de CSS Grid: as colunas "Soluções"/"Conteúdos" somem
   quando vazias (ver footer.php), então o número de colunas varia — e
   "grid-template-columns: 1.4fr repeat(auto-fit, minmax(...))" É CSS
   INVÁLIDO (misturar unidade fr com auto-fit/auto-fill não é permitido pela
   spec; o navegador descarta a declaração inteira e o grid vira 1 coluna
   só, empilhando tudo). Flexbox não tem essa restrição. */
.footer-grid{
  display:flex;flex-wrap:wrap;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-about{flex:1.4 1 260px;}
.footer-col{flex:1 1 140px;}
.footer-grid .logo-text .name{color:#fff;}
.footer-grid .logo-text .tag{color:#8FA3BC;}
.footer-about p{font-size:13px;line-height:1.7;margin-top:14px;color:#9FB0C6;max-width:220px;}
.social-row{display:flex;gap:10px;margin-top:18px;}
.social-row a{
  width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.footer-col h4{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:13px;color:#B9C6D9;}
.footer-col a:hover{color:var(--teal);}
.footer-contact p{font-size:13px;display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;color:#B9C6D9;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12px;color:#7C90AA;flex-wrap:wrap;gap:12px;
}
.footer-bottom .links{display:flex;gap:22px;list-style:none;margin:0;padding:0;}

/* ---------- Modal de vídeo (selo "Assista ao filme") ---------- */
.personaliza-video-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:32px;}
.personaliza-video-modal[hidden]{display:none;}
.personaliza-video-modal-backdrop{position:absolute;inset:0;background:rgba(13,27,46,0.85);}
.personaliza-video-modal-dialog{
  position:relative;width:min(900px,100%);aspect-ratio:16/9;
  background:#000;border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.4);
}
.personaliza-video-modal-close{
  position:absolute;top:-42px;right:0;background:none;border:none;
  color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:4px 8px;
}
.personaliza-video-modal-body{width:100%;height:100%;}
.personaliza-video-modal-body iframe,
.personaliza-video-modal-body video{width:100%;height:100%;border:0;display:block;}

/* ---------- Modal de lead (CTAs "Quero aplicar..." etc.) ---------- */
.personaliza-lead-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;}
.personaliza-lead-modal[hidden]{display:none;}
.personaliza-lead-modal-backdrop{position:absolute;inset:0;background:rgba(13,27,46,0.85);}
.personaliza-lead-modal-dialog{
  position:relative;width:min(480px,100%);max-height:90vh;overflow-y:auto;
  background:var(--card);border-radius:var(--radius-lg);padding:36px;
  box-shadow:0 30px 80px rgba(0,0,0,0.4);
}
.personaliza-lead-modal-close{
  position:absolute;top:14px;right:14px;background:none;border:none;
  color:var(--muted);font-size:24px;line-height:1;cursor:pointer;padding:4px 8px;
}
.personaliza-lead-form h3{font-size:20px;padding-right:24px;}
.personaliza-lead-form .form-grid{grid-template-columns:1fr;margin-top:20px;}
.personaliza-lead-form .cta-row{margin-top:22px;}
.personaliza-lead-form button[type="submit"]{border:none;cursor:pointer;width:100%;justify-content:center;}
.personaliza-lead-modal-notice{margin-bottom:20px;}

/* Botão de chat flutuante (WhatsApp) — 3 estilos: circle / circle-label / pill */
.chat-fab{
  position:fixed;bottom:26px;right:26px;z-index:90;
  display:flex;align-items:center;gap:10px;
  text-decoration:none;font-size:20px;color:var(--navy);
}
.chat-fab-icon{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  background:var(--chat-fab-color, var(--teal));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(13,27,46,0.35);
  color:#fff;
}
.chat-fab-label{
  display:none;font-size:13px;font-weight:700;color:var(--chat-fab-text-color, #fff);
  background:var(--navy);padding:10px 16px;border-radius:999px;
  box-shadow:0 8px 20px rgba(13,27,46,0.25);white-space:nowrap;
}
.chat-fab--circle-label .chat-fab-label{display:inline-flex;align-items:center;}
.chat-fab--pill{
  background:var(--chat-fab-color, var(--teal));
  border-radius:999px;padding:6px 20px 6px 6px;
  box-shadow:0 10px 26px rgba(13,27,46,0.35);
}
.chat-fab--pill .chat-fab-icon{box-shadow:none;width:42px;height:42px;background:rgba(255,255,255,0.3);}
.chat-fab--pill .chat-fab-label{display:inline-flex;align-items:center;background:none;box-shadow:none;padding:0;color:var(--chat-fab-text-color, var(--navy));}
@media (max-width: 560px){
  .chat-fab-label{font-size:12px;padding:8px 12px;}
  .chat-fab--pill .chat-fab-icon,
  .chat-fab-icon{width:48px;height:48px;}
}

/* Efeitos de destaque do botão de chat (Personalizar → Botão de Chat
   Flutuante → Efeito de destaque) — animações em loop só no ícone (não no
   balão de texto), pra chamar atenção sem incomodar. */
.chat-fab--effect-pulse .chat-fab-icon{position:relative;}
.chat-fab--effect-pulse .chat-fab-icon::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--chat-fab-color, var(--teal));
  animation:personaliza-fab-pulse 2s ease-out infinite;
}
.chat-fab--effect-grow .chat-fab-icon{animation:personaliza-fab-grow 1.6s ease-in-out infinite;}
.chat-fab--effect-shake .chat-fab-icon{animation:personaliza-fab-shake 3.2s ease-in-out infinite;}
.chat-fab--effect-bounce .chat-fab-icon{animation:personaliza-fab-bounce 1.8s ease-in-out infinite;}

@keyframes personaliza-fab-pulse{
  0%{transform:scale(1);opacity:.55;}
  100%{transform:scale(1.9);opacity:0;}
}
@keyframes personaliza-fab-grow{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}
@keyframes personaliza-fab-shake{
  0%,92%,100%{transform:rotate(0);}
  93%{transform:rotate(-12deg);}
  94%{transform:rotate(10deg);}
  95%{transform:rotate(-8deg);}
  96%{transform:rotate(6deg);}
  97%{transform:rotate(-4deg);}
  98%{transform:rotate(0);}
}
@keyframes personaliza-fab-bounce{
  0%,20%,50%,80%,100%{transform:translateY(0);}
  40%{transform:translateY(-10px);}
  60%{transform:translateY(-5px);}
}

@media (prefers-reduced-motion: reduce){
  .chat-fab-icon,
  .chat-fab-icon::before{animation:none !important;}
}

/* ---------- Banner de página interna (Sprints 2–8) ---------- */
/* O padding-top precisa comportar o cabeçalho, que agora fica sobreposto
   (position:absolute) em vez de empurrar o banner pra baixo — ver
   ".has-hero header" lá em cima. Sem essa folga, o eyebrow/título ficariam
   por baixo do menu. */
.page-banner{
  padding:150px 0 64px;
  background:linear-gradient(135deg, var(--navy), var(--navy-2));
  background-size:cover;background-position:center;
  color:#fff;
}
.page-banner .eyebrow{color:var(--teal);}
.page-banner h1{
  margin-top:14px;font-size:38px;line-height:1.15;
  font-family:var(--font-heading);font-weight:800;
}
.page-banner h1 .hl{color:var(--teal);}
.page-banner p{margin-top:16px;font-size:16px;line-height:1.6;color:#C7D3E2;}

/* Texto corrido das páginas internas (personaliza_render_paragraphs()) */
.page-copy h2{font-size:26px;line-height:1.25;margin-bottom:16px;}
.page-copy p{color:var(--muted);font-size:15.5px;line-height:1.7;margin-top:14px;}
.page-copy p:first-child{margin-top:0;}
.page-copy ul{margin-top:14px;padding-left:20px;color:var(--muted);font-size:15.5px;line-height:1.7;}
.page-copy ul li{margin-top:6px;}

/* Escala colorida vermelho→teal (níveis de resposta e classificação final
   do Customer IQ®) — cada posição tem uma cor/ícone calculados em PHP por
   personaliza_scale_step(), formando um gradiente contínuo de maturidade
   em vez de só "ruim"/"bom". */
.scale-rows{display:flex;flex-direction:column;gap:10px;margin-top:20px;max-width:760px;}
.scale-row{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--scale-color, var(--teal));
  border-radius:var(--radius-md);padding:14px 18px;
}
.scale-icon{
  width:32px;height:32px;flex-shrink:0;border-radius:50%;
  background:var(--scale-bg, #EAF9F4);color:var(--scale-color, var(--teal));
  display:flex;align-items:center;justify-content:center;
}
.scale-icon-inner{width:16px;height:16px;display:inline-flex;}
.scale-icon-inner svg{width:100%;height:100%;}
.scale-row-text{flex:1;}
.scale-row-text b{display:block;font-size:14px;font-weight:700;color:var(--ink);}
.scale-row-text p{margin-top:2px;font-size:12.5px;color:var(--muted);line-height:1.5;}
.scale-row-valor{
  flex-shrink:0;align-self:center;font-family:var(--font-heading);font-weight:800;font-size:14px;
  color:var(--scale-color, var(--teal));
}

/* Alerta "nota importante" (Customer IQ® — ajuste de pesos aplicado) */
.iq-nota-importante{
  display:flex;gap:12px;align-items:flex-start;margin-top:16px;max-width:760px;
  background:#FEF3E8;border:1px solid #F7D9BC;border-radius:var(--radius-md);padding:16px 18px;
}
.iq-nota-importante p{font-size:13px;color:var(--navy);line-height:1.6;}

/* Barras de porcentagem (as 7 dimensões do Customer IQ®, resultado de
   exemplo) — mesma cor teal do resto da marca, já que aqui não é uma
   escala de "ruim a bom", é só a leitura do resultado por dimensão. */
.dimensao-bars{display:flex;flex-direction:column;gap:16px;margin-top:22px;max-width:760px;}
.dimensao-bar-row{display:flex;flex-direction:column;gap:6px;}
.dimensao-bar-head{display:flex;justify-content:space-between;font-size:13.5px;}
.dimensao-bar-head b{color:var(--ink);font-weight:700;}
.dimensao-bar-head span{color:var(--teal-dark);font-weight:700;}
.dimensao-bar-track{height:8px;border-radius:99px;background:var(--line);overflow:hidden;}
.dimensao-bar-fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg, var(--cyan), var(--teal));}

/* Chips de indicador por etapa (Método CRESCER®, "por que funciona") —
   ícone de seta (alta/queda) + texto, agrupados por etapa. Ver
   personaliza_render_indicador_chips() em inc/template-tags.php. */
.indicadores-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px;}
.indicador-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px 22px;
}
.indicador-card h3{font-size:15px;font-weight:700;color:var(--navy);}
.indicador-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.indicador-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#EAF9F4;color:var(--teal-dark);
  border-radius:999px;padding:7px 14px 7px 10px;
  font-size:12.5px;font-weight:700;
}
.indicador-chip-icon{width:15px;height:15px;flex-shrink:0;display:inline-flex;}
.indicador-chip-icon svg{width:100%;height:100%;}

/* Bloco "tela de resultado" — mockup simplificado do relatório do Customer IQ® */
.iq-result-card{
  max-width:100%;
  background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:32px;
}
.iq-result-score{font-size:52px;font-weight:800;font-family:var(--font-heading);color:var(--teal);}
.iq-result-label{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#C7D3E2;}
.iq-result-bar{margin-top:16px;height:8px;border-radius:99px;background:rgba(255,255,255,0.12);overflow:hidden;}
.iq-result-bar span{display:block;height:100%;background:var(--teal);border-radius:99px;}
.iq-result-card p{margin-top:14px;font-size:13.5px;color:#C7D3E2;line-height:1.6;}
.iq-result-card .opportunity{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.15);}
.iq-result-card .opportunity b{color:var(--orange);}
.iq-result-card .cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- Etapas do Método CRESCER® (Sprint 4) ---------- */
.etapas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.etapa-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;
  transition:transform .2s, box-shadow .2s;
}
.etapa-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(13,27,46,0.08);}

.etapa-head{display:flex;align-items:center;gap:16px;}
.etapa-icon{
  width:52px;height:52px;flex-shrink:0;border-radius:16px;
  background:linear-gradient(135deg, var(--navy), var(--navy-3));
  display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.etapa-icon .icon-svg{width:24px;height:24px;}
.etapa-numero{
  display:block;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal-dark);
}
.etapa-card h3{font-size:19px;letter-spacing:0.02em;margin-top:2px;}
.etapa-subtitulo{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.5;}

/* Chip com o indicador impactado por essa etapa (mesmo dado da tabela
   etapa→indicador mais abaixo na página) — um resumo de "impacto" logo no
   card, no espírito do print de referência (comparativo em destaque). */
.etapa-indicador{
  display:flex;align-items:center;gap:8px;margin-top:16px;
  background:#EAF9F4;color:var(--teal-dark);
  border-radius:999px;padding:8px 14px;
  font-size:12.5px;font-weight:700;
}
.etapa-indicador .icon-svg{width:15px;height:15px;flex-shrink:0;}

.etapa-lead{display:block;margin-top:20px;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);}
.etapa-card ul{margin-top:10px;list-style:none;padding:0;color:var(--ink);font-size:13.5px;line-height:1.5;}
.etapa-card ul li{
  position:relative;padding-left:24px;margin-top:8px;
}
.etapa-card ul li::before{
  content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:#EAF9F4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314A886' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5,13 9,17 19,7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:9px 9px;
}

.etapa-beneficio-box{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:22px;padding:16px;border-radius:var(--radius-md);
  background:#F0FBF8;border:1px solid #D3F0E7;
}
.etapa-beneficio-icon{display:inline-flex;width:20px;height:20px;flex-shrink:0;color:var(--teal-dark);}
.etapa-beneficio-icon svg{width:100%;height:100%;}
.etapa-beneficio-box p{font-size:13px;color:var(--navy);line-height:1.55;}

/* ---------- Mockup de notebook (screenshot do dashboard — Sprint 5) ---------- */
.device-mockup{max-width:900px;margin:0 auto;}
.device-mockup .screen{
  background:var(--navy);border-radius:14px 14px 4px 4px;padding:14px 14px 0;
}
.device-mockup .screen img,
.device-mockup .screen .placeholder{border-radius:6px 6px 0 0;}
.device-mockup .base{
  height:16px;background:linear-gradient(#2C4E75, #16304F);
  border-radius:0 0 10px 10px;
  box-shadow:0 6px 14px rgba(13,27,46,0.25);
}
.device-mockup .base::after{
  content:"";display:block;width:80px;height:4px;margin:0 auto;
  background:rgba(255,255,255,0.15);border-radius:99px;position:relative;top:6px;
}

/* ---------- Case individual (Sprint 6) ---------- */
/* aspect-ratio (não mais o truque padding-bottom:56.25% + height:0): a
   proporção vem de --video-aspect, que os templates preenchem com o tamanho
   REAL do arquivo (ver personaliza_video_aspect_attr() em
   inc/template-tags.php). Os vídeos institucionais do cliente são 1440x1080
   (4:3) e ficavam com tarjas pretas nas laterais dentro da caixa 16:9 fixa.
   O fallback 16/9 mantém o comportamento antigo pros embeds de
   YouTube/Vimeo, que não passam --video-aspect. */
.personaliza-video-embed{position:relative;aspect-ratio:var(--video-aspect, 16 / 9);border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);}
.personaliza-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Vídeo enviado pela biblioteca de mídia (em vez de embed do YouTube/Vimeo) —
   object-fit:contain, não cover: diferente do vídeo mudo/loop do Hero, este
   toca com controles e som, então não pode cortar a imagem. Com a caixa já
   na proporção do arquivo, o contain deixa de gerar tarja. */
.personaliza-video-embed video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;}
.case-sections{margin-top:8px;}
.case-section{margin-top:36px;}
.case-section:first-child{margin-top:0;}
.case-section h2{font-size:22px;color:var(--teal-dark);}
.case-section ul{margin-top:12px;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.7;}
.case-section ul li{margin-top:6px;}

/* ---------- Reflexões: listagem + artigo (Sprint 7) ---------- */
.category-filter{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:8px;}
.category-filter a{
  font-size:13px;font-weight:700;color:var(--muted);
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
}
.category-filter a.active{background:var(--navy);color:#fff;border-color:var(--navy);}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap;}
.pagination span,
.pagination a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 8px;border-radius:8px;
  font-size:13px;font-weight:700;color:var(--navy);border:1px solid var(--line);
}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy);}

.article-content{color:var(--ink);font-size:16px;line-height:1.75;}
.article-content > *{margin-top:20px;}
.article-content > *:first-child{margin-top:0;}
.article-content h2{font-size:24px;margin-top:36px;}
.article-content h3{font-size:19px;margin-top:28px;}
.article-content img{border-radius:var(--radius-md);}
.article-content ul,
.article-content ol{padding-left:22px;color:var(--muted);}
.article-content blockquote{
  border-left:3px solid var(--teal);padding-left:18px;color:var(--muted);font-style:italic;
}

/* ---------- Timeline (Sprint 8 — Sobre) ---------- */
.timeline{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:24px;
  padding-top:28px;position:relative;
}
.timeline::before{
  content:"";position:absolute;top:5px;left:0;right:0;height:2px;background:var(--line);
}
.timeline-item{position:relative;padding-top:20px;}
.timeline-dot{
  position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--teal-dark);border:2px solid var(--card);
}
.timeline-ano{
  display:block;font-family:var(--font-heading);font-weight:800;font-size:17px;color:var(--navy);
}
.timeline-item p{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.6;}

/* ---------- Formulário de contato (Sprint 8) ---------- */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-form{margin-top:28px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;}
.form-grid label{
  display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink);
}
.form-grid label.full{grid-column:1/-1;}
.form-grid input,
.form-grid select{
  font:inherit;font-weight:400;padding:11px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--card);color:var(--ink);
}
.form-notice{
  margin-top:20px;padding:14px 18px;border-radius:var(--radius-md);font-size:14px;
}
.form-notice--ok{background:#EAF9F4;color:var(--teal-dark);border:1px solid var(--teal);}
.form-notice--erro{background:#FDECEA;color:#B3261E;border:1px solid #F2B8B5;}
.form-grid textarea{
  font:inherit;font-weight:400;padding:11px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--card);color:var(--ink);resize:vertical;min-height:96px;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{outline:none;border-color:var(--teal);}
.form-grid--stack{grid-template-columns:1fr;}
.form-grid fieldset.full{grid-column:1/-1;border:0;padding:0;margin:0;}
.form-grid legend{display:block;width:100%;padding:0;margin-bottom:10px;font-size:13px;font-weight:700;color:var(--ink);}

/* ---------- Contato — bloco institucional + formulário de briefing ---------- */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:28px;align-items:start;}
.contact-info-card,
.contact-form-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;
}
.contact-info-card h3{font-size:16px;margin-bottom:18px;}
.contact-info-row{display:flex;align-items:flex-start;gap:12px;margin-top:16px;}
.contact-info-row:first-of-type{margin-top:0;}
.contact-info-row .icon{
  width:36px;height:36px;border-radius:10px;background:#EAF9F4;color:var(--teal-dark);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.contact-info-row p{font-size:14px;line-height:1.6;color:#33404F;margin:0;padding-top:6px;}
.contact-map{
  margin-top:20px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:var(--bg, #F5F7FA);
}
.contact-map iframe{width:100%;height:100%;border:0;display:block;}

.radio-group{display:flex;flex-direction:column;gap:10px;}
.radio-option{
  display:flex;align-items:flex-start;gap:10px;padding:13px 14px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;
  transition:border-color .15s, background .15s;
}
.radio-option:hover{border-color:#C7CEDA;}
.radio-option.checked{border-color:var(--teal);background:#EEFBF7;}
.radio-option input{width:auto;margin-top:2px;accent-color:var(--teal-dark);flex-shrink:0;}
.radio-option .opt-text{font-size:14px;line-height:1.4;}
.radio-option .opt-text b{display:block;font-size:14px;color:var(--navy);}
.radio-option .opt-text span{font-size:12.5px;color:var(--muted);}

.iq-nudge{
  display:none;margin-top:14px;padding:16px 18px;background:#EEFBF7;
  border:1.5px dashed var(--teal-dark);border-radius:var(--radius-md);
  font-size:13.5px;line-height:1.6;color:#0D3A2E;
}
.iq-nudge.show{display:block;}
.iq-nudge a{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  background:var(--navy);color:#fff;font-weight:700;font-size:12.5px;
  padding:10px 16px;border-radius:999px;text-decoration:none;
}

@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-info-card,
  .contact-form-card{padding:26px;}
}

/* ---------- Responsive ---------- */
/* Menu do cabeçalho: com 7 itens (Inteligência de Clientes, Customer IQ®,
   Método CRESCER®, Cases, Conteúdos, Sobre, Contato) + logo + CTA, o menu
   horizontal não cabe mais numa faixa de larguras "quase desktop" antes do
   breakpoint geral de 860px — ficava espremido. Corta pro hambúrguer bem
   antes disso, um breakpoint só pra isso, sem mexer no resto do
   @media (max-width: 860px) abaixo (que trata outras seções da página). */
@media (max-width: 1240px){
  .nav-links{display:none;}
  .hamburger{display:block;}

  /* Reorganiza o cabeçalho em 2 linhas: logo + hambúrguer em cima (a mesma
     posição de sempre, um em cada ponta), CTA sozinho embaixo, centralizado
     — pedido do cliente. .nav-top-row (só existia como display:contents no
     desktop, ver a regra dela lá em cima) vira uma linha de verdade aqui. */
  .nav{flex-direction:column;align-items:stretch;}
  .nav-top-row{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;
  }
  .nav > .btn-primary{
    align-self:center;
    /* flex-direction:column muda o eixo principal pra vertical — max-width
       (não flex-shrink, que aqui passa a controlar ALTURA) é o que evita
       o botão vazar a largura do header se o texto do CTA (editável no
       Personalizar, tamanho livre) for comprido. */
    max-width:100%;
  }
  .nav > .btn-primary > span:first-child{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  }
  /* Com o menu aberto, .nav-links vira position:absolute (ver
     assets/js/theme.js) — sai do fluxo em coluna do .nav, e o CTA (que vem
     depois dela no HTML) fica exposto bem onde o dropdown começa: visível
     por baixo dele e ainda clicável por cima. Escondido enquanto o menu
     estiver aberto (classe posta pelo mesmo JS) resolve os dois problemas
     de uma vez — reaparece ao fechar o menu. */
  .nav.is-nav-open > .btn-primary{display:none;}

  /* O dropdown mobile do menu abre com fundo BRANCO (ver a montagem do
     estilo inline em assets/js/theme.js) — o texto branco herdado de
     ".has-hero header .nav-links a" (pensado pro cabeçalho transparente
     sobre a FOTO do Hero, não sobre esse fundo branco do próprio menu)
     ficava ilegível: branco em cima de branco. Preto (a mesma cor do menu
     fora do Hero, ver .nav-links a acima) resolve nas duas situações. */
  .has-hero header .nav-links a{color:#2B3648;}
  .has-hero header .nav-links a:hover{color:var(--teal-dark);}
}
@media (max-width: 1080px){
  .footer-grid{row-gap:36px;}
  .footer-about,
  .footer-col{flex-basis:45%;}
}
@media (max-width: 860px){
  .entregas-grid{grid-template-columns:repeat(2,1fr);}
  .cases-grid{grid-template-columns:1fr 1fr;}
  .articles-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .nav{padding:14px 16px;gap:10px;}
  .logo-text .tag{display:none;}

  /* Logo enviada como IMAGEM (upload) é o bug real por trás do cabeçalho
     "vazando" no mobile: personaliza_render_logo() grava a altura em
     style="height:Npx" inline (Personalizar → tamanho do logo), e
     .nav-brand tinha flex-shrink:0 — uma logo com lockup largo (ícone +
     nome + tagline numa arte só) simplesmente não tinha como encolher.
     Sem nada cedendo espaço, a LARGURA TOTAL do cabeçalho passava a
     viewport inteira, e o mobile reage a isso dando zoom out na página
     inteira pra caber tudo — aparecia como "hambúrguer passando a tela e
     a tela aumentando", com o menu abrindo com o layout todo errado (a
     página inteira renderizava mais larga que o aparelho).

     Agora .nav-top-row (ver @media max-width:1240px acima) só tem logo +
     hambúrguer disputando espaço nessa linha — o CTA saiu pra linha
     própria abaixo — então sobra bem mais espaço aqui do que antes.

     max-width em vw (não %): só nav-brand{flex-shrink:1} não basta — com
     flex-basis:auto (o padrão), o navegador não resolve max-width:% do
     filho ANTES de decidir o tamanho do próprio .nav-brand (dependência
     circular clássica do flexbox), então a imagem continuava saindo no
     tamanho natural do arquivo. vw ancora direto no viewport, sem
     depender dessa resolução. height:auto !important derruba o
     height:Npx inline mantendo a proporção (senão a imagem ficava
     esticada/achatada ao encolher só a largura). Testado em 320–414px de
     viewport, com upload de aspect ratio bem largo (~10:1) — sem overflow. */
  .nav-brand{flex-shrink:1;min-width:0;}
  /* width E height com !important (não só height): o style="width:auto"
     que personaliza_render_logo() grava inline tem prioridade sobre
     QUALQUER regra externa sem !important, então um "width:55vw" sozinho
     aqui seria simplesmente ignorado — width continuaria 'auto' vindo do
     inline. E com width:auto + height:auto ao mesmo tempo, num SVG
     referenciado por <img> que só declara viewBox (sem width/height no
     <svg> raiz — caso real do logo em produção, exportado do Illustrator),
     o navegador não tem nenhuma dimensão pra ancorar o cálculo e renderiza
     a imagem em 0×0 (bug real, reproduzido e confirmado com o arquivo de
     produção antes desta correção — a logo "sumia" no mobile). Com width
     definido (não só limitado por max-width) + height:auto, a altura
     calcula certinho a partir da proporção do viewBox. */
  .site-logo-img{width:55vw !important;height:auto !important;}

  /* CTA: já ganhou max-width:100% + reticências no span do texto lá no
     @media max-width:1240px (regra que vale pra qualquer largura em que o
     cabeçalho já virou 2 linhas) — aqui só reduz o tamanho visual. */
  .nav > .btn-primary{padding:9px 14px;font-size:11px;gap:6px;}
  /* Sem font-size aqui: o ícone é o ::before em mask, então o que encolhe
     é --dot-icon-size (mexer no font-size não teria efeito nenhum).
     flex-shrink:0: se faltar espaço no botão, quem cede é o texto (via
     reticências, ver @media max-width:1240px), não o ícone — senão ele
     sai do círculo perfeito e fica achatado. */
  .nav > .btn-primary .dot{width:16px;height:16px;--dot-icon-size:8px;flex-shrink:0;}
  .wrap{padding:0 20px;}
  .page-banner{padding:104px 0 40px;}
  .page-banner h1{font-size:28px;}
  .section{padding:44px 0;}
  .home-section{padding:40px 0;}
  .section-head h2{font-size:23px;}
  .entregas-grid{grid-template-columns:1fr;}
  .etapas-grid{grid-template-columns:1fr;}
  .indicadores-grid{grid-template-columns:1fr;}
  .timeline{grid-auto-flow:row;gap:20px;}
  .timeline::before{top:0;bottom:0;left:5px;right:auto;width:2px;height:auto;}
  .timeline-item{padding-top:0;padding-left:28px;}
  .form-grid{grid-template-columns:1fr;}
  .cases-grid{grid-template-columns:1fr;}
  .articles-grid{grid-template-columns:1fr;}
  .footer-about,
  .footer-col{flex-basis:100%;}
  .btn{padding:11px 16px;font-size:12.5px;}
}