/* ============================================================
   CTS Sistemas — Home
   Tokens de identidade (seção 4 do briefing)
   Ritmo de layout: padrões estruturais de iusnatura.com.br
   ============================================================ */

:root{
  /* ----------------------------------------------------------
     Paleta canônica do CTS Design System (v1.0)
     Fonte: "CTS Design System.dc.html" — seções 02 Cores e 03 Gradientes.
     ---------------------------------------------------------- */
  --cts-cyan-300:  #4CCBF2;
  --cts-cyan-400:  #19B8EC;
  --cts-blue-500:  #0089C7;   /* primária */
  --cts-blue-600:  #007EB7;   /* logo */
  --cts-blue-700:  #00659A;
  --cts-blue-800:  #004E7A;
  --cts-navy-800:  #0A3450;
  --cts-navy-900:  #062338;
  --cts-navy-950:  #04141F;
  --cts-ink:       #0E1B24;
  --cts-cloud:     #F4F7FA;
  --cts-mist:      #E7EDF3;
  --cts-steel:     #9FB0BF;
  --cts-slate:     #55697A;
  --cts-grad-brand:  linear-gradient(135deg, #19B8EC 0%, #0083C1 50%, #00527E 100%);
  --cts-grad-btn:    linear-gradient(135deg, #19B8EC, #0083C1);
  --cts-grad-navy:   linear-gradient(160deg, #0A3450, #062338);

  /* ----------------------------------------------------------
     Camada semântica — tema claro (fundo branco é o padrão)
     ---------------------------------------------------------- */
  --page:        #FFFFFF;
  --page-alt:    var(--cts-cloud);
  --white:       #FFFFFF;

  --ink:         var(--cts-ink);      /* títulos e texto forte */
  --ink-soft:    var(--cts-slate);    /* corpo secundário */
  --ink-mute:    #8497A6;             /* rótulos, eyebrows */

  --accent:      var(--cts-blue-500);
  --accent-deep: #0083C1;
  --accent-hi:   var(--cts-cyan-400);
  --petrol:      var(--cts-blue-600);
  --navy:        var(--cts-navy-800);
  --navy-deep:   var(--cts-navy-900);

  --line:        #E3EAF1;             /* borda de card */
  --line-soft:   #EEF2F6;
  --hairline-ink:#E3EAF1;
  --chip:        #EAF6FC;             /* fundo de tag/chip */
  --field:       #F7FAFC;

  --surface:       var(--white);
  --surface-hover: #F7FAFC;

  /* Texto e filetes DENTRO de superfícies escuras (card navy, rodapé) */
  --text-on-dark:      #AFC0CE;
  --text-on-dark-soft: #7E93A3;
  --hairline:          rgba(255,255,255,.12);

  /* Tipografia */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ----------------------------------------------------------
     Layout — a área útil é a mesma da referência do Figma
     (node 1:2): prancha de 1920px com conteúdo de 1216px,
     ou seja, 352px de margem de cada lado. Todo conteúdo do
     site — inclusive o header — usa exatamente essa caixa.
     ---------------------------------------------------------- */
  --content: 1216px;                                        /* área útil */
  --gutter: 24px;                                           /* respiro lateral em telas menores */
  --container: calc(var(--content) + var(--gutter) * 2);
  /* Altura do header: medida em onegreen.com.br — a barra tem 72px com
     uma linha de conteúdo de 44px, ou seja, o item mais alto ocupa ~61%
     da barra. Com o botão padrão da CTS (56px), a mesma proporção dá
     92px, que é o respiro que faltava. */
  --header-h: 92px;
  --section-y: clamp(72px, 9vw, 120px);

  --r-sm: 10px;
  --r-btn: 12px;    /* raio dos botões — vem do CTA do hero (Figma) */
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 16px;     /* card: 16px em todo o site, como no Figma */
  --r-pill: 999px;  /* só para chips e tags */

  /* Sem drop shadow: a hierarquia vem de cor, filete e espaço. */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
  /* `clip` em vez de `hidden`: contém o estouro horizontal sem criar um
     contexto de rolagem, que quebraria o `position:sticky` do hero. */
  overflow-x:clip;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background-color:var(--page);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
ul,dl,dd{ list-style:none; margin:0; padding:0; }
/* O `figure` do navegador nasce com `margin:1em 40px`. Fora do reset ele
   estraga qualquer grade: numa coluna de ~395px, os 40px de cada lado
   comem 80px de largura e desalinham a caixa das vizinhas. */
figure,blockquote{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
blockquote{ margin:0; }
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.1;
  margin:0;
}
p{ margin:0; }

/* Fluxo da página — tudo que vem depois do hero.
   Precisa ser opaco e ficar ACIMA do hero fixado (`position:sticky`),
   porque é ele que cobre o hero conforme a página sobe. */
.page-flow{
  position:relative;
  z-index:1;
  background:var(--page);
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); background:var(--page); }

/* Ritmo de fundos do DS: branco e Nuvem alternados */
.section--journeys,
.section--results,
.section--cta{ background:var(--page-alt); }

/* Acessibilidade */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--white); color:var(--ink);
  padding:.75rem 1.25rem; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--accent-deep);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   Elementos de texto compartilhados
   ============================================================ */

/* Eyebrow: rótulo curto acima do título (padrão da referência) */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--accent-deep);
  margin-bottom:1.1rem;
}
.eyebrow--caps{
  text-transform:uppercase; letter-spacing:.14em; font-size:.75rem;
  font-weight:700; color:var(--ink-mute);
}
/* Sobre fundo escuro (hero): o azul da marca não tem contraste, então o
   rótulo sobe para o Ciano 300 — o mesmo tom usado nos cards navy.
   A margem sai porque o contêiner do hero já resolve o espaço no gap. */
.eyebrow--on-dark{
  color:var(--cts-cyan-300);
  margin-bottom:0;
}
/* Cabeçalho de seção: título à esquerda, apoio à direita (padrão da referência) */
.section-head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:end;
  gap:clamp(1.5rem, 4vw, 4rem);
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.section-title{
  font-size:clamp(1.95rem, 3.6vw, 3rem);
}
.section-title{ color:var(--ink); }
.section-support{
  color:var(--ink-soft);
  font-size:1.02rem;
  max-width:44ch;
}

/* ============================================================
   Botões
   ============================================================ */
/* PADRÃO ÚNICO DE BOTÃO — medidas do CTA do hero (Figma):
   altura 56px, padding lateral 24px, raio 12px, texto 16px/1.5.
   Vale para todos os botões do site, inclusive o do header.
   Chips e tags continuam em pílula. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:56px;
  padding-inline:24px;
  font-weight:600;
  font-size:1rem;
  line-height:1.5;
  letter-spacing:-.01em;
  border-radius:var(--r-btn);
  white-space:nowrap;
  border:1.5px solid transparent;
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             border-color .25s var(--ease), color .25s var(--ease),
             filter .25s var(--ease);
}
/* Mantidos como apelidos: o tamanho é único em todo o site. */
.btn-sm,
.btn-lg{ height:56px; padding-inline:24px; font-size:1rem; }
.btn-block{ display:flex; width:100%; }

.btn-primary{
  background:var(--cts-grad-btn);
  color:var(--white);
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); }

.btn-ghost{
  background:var(--white);
  border-color:#CBD8E2;
  color:var(--ink);
}
.btn-ghost:hover{ border-color:var(--accent-deep); color:var(--accent-deep); transform:translateY(-2px); }

/* Ghost dentro de superfícies escuras (card navy das jornadas, rodapé) */
.journey--primary .btn-ghost,
.site-footer .btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.34);
  color:var(--white);
}
.journey--primary .btn-ghost:hover,
.site-footer .btn-ghost:hover{
  border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.08);
  color:var(--white);
}

.link-arrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:600; font-size:.98rem;
  color:var(--accent-deep);
  padding:.5rem 0;
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow:hover{ gap:.75rem; color:var(--cts-blue-700); }
/* A seta tinha tamanho só dentro do trio de cards. Solta, ela nascia com
   a medida intrínseca do SVG e, como item de flex, roubava a largura do
   rótulo — que então quebrava em três linhas. O tamanho passa a ser do
   componente, e o rótulo não quebra: "ver todos" é um atalho de uma
   linha, não um parágrafo. */
.link-arrow{ flex:none; white-space:nowrap; }
.link-arrow svg{ flex:none; width:16px; height:16px; }

/* ============================================================
   6.0 — Header fixo
   ============================================================ */
/* O header vive sobre o fundo branco da página (o card do hero começa
   abaixo dele), então trabalha sempre em contraste escuro-sobre-claro. */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  background:var(--page);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}

.header-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:2rem;
}

.brand{ flex:0 0 auto; display:flex; align-items:center; }
.brand__logo{ height:30px; width:auto; }

.main-nav{ margin-inline:auto; }
.nav-list{ display:flex; align-items:center; gap:.25rem; }

.nav-link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.6rem .85rem;
  font-size:.95rem; font-weight:500;
  color:var(--ink);
  border-radius:var(--r-sm);
  transition:color .2s var(--ease);
}
.nav-link:hover{ color:var(--accent-deep); }
/* "Reforma Tributária" como item de primeiro nível (ajustes out/2026).
   Entra na cor padrão do menu, igual aos demais itens — o destaque em
   accent que existia aqui foi removido a pedido do cliente em 08/10.
   Com um item a mais, a fileira do menu ficou mais longa: os rótulos não
   podem quebrar em duas linhas, e na faixa em que o menu desktop ainda
   aparece mas a largura já aperta (1021–1210px) o respiro fecha para
   tudo caber em uma linha só. Abaixo de 1020px o menu já vira
   hambúrguer e nada disso vale. */
.nav-link{ white-space:nowrap; }
@media (min-width:1021px) and (max-width:1210px){
  .nav-list{ gap:0; }
  .nav-link{ padding-inline:.5rem; font-size:.9rem; }
  .header-actions{ gap:.4rem; }
  .header-secondary.btn-ghost{ padding-inline:10px; font-size:.9rem; }
}
.nav-toggle[aria-expanded="true"]{ color:var(--accent-deep); font-weight:600; }

/* "Área do Cliente" — ação secundária, sem moldura */
.header-secondary.btn-ghost{
  border-color:transparent;
  background:transparent;
  color:var(--ink-soft);
}
.header-secondary.btn-ghost:hover{
  border-color:transparent;
  background:var(--page-alt);
  color:var(--ink);
  transform:none;
}

.header-actions{ flex:0 0 auto; display:flex; align-items:center; gap:.65rem; }

/* ---------- Mega-dropdown "CTS Soluções" ----------
   Estrutura medida em iusnatura.com.br (menu "Softwares"): painel
   branco que ocupa a largura toda da janela, ancorado na base do
   header, com o conteúdo na mesma coluna útil de 1216px. À esquerda,
   rótulo em caixa alta e duas colunas de itens (caixa de ícone 40px +
   título 14/21 + apoio 12/18); à direita, um card com foto e chamada. */
.has-dropdown{ position:static; }
.chevron{ transition:transform .25s var(--ease); }
.nav-toggle[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

.dropdown{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--white);
  color:var(--ink);
  border-bottom:1px solid var(--line);
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
/* Abertura: quem manda é o `aria-expanded` do botão. O hover não abre
   mais sozinho pelo CSS — quem cuida disso é o main.js, com folga de
   entrada e, principalmente, de saída, para o painel não sumir no
   caminho entre a seta e o conteúdo. O `:focus-within` fica para o
   teclado, que precisa do painel aberto ao tabular para dentro dele. */
.has-dropdown:focus-within .dropdown,
.nav-toggle[aria-expanded="true"] + .dropdown{
  opacity:1; transform:translateY(0); pointer-events:auto;
}

/* NÃO usar ponte de CSS aqui. O painel é `position:absolute` ancorado no
   HEADER (o item é `position:static`), então qualquer pseudo-elemento
   dele sobre a faixa do header cobre a LARGURA TODA e engole o clique de
   todos os outros itens do menu. A folga para o ponteiro atravessar o
   vão entre a seta e o painel é dada pelo atraso de saída do main.js,
   que não interfere em quem está por baixo. */

.dropdown__inner{
  display:grid;
  grid-template-columns:1fr 398px;
  column-gap:clamp(2rem, 4vw, 4rem);
  row-gap:0;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding:32px var(--gutter) 40px;
}
/* Escurece a página atrás do painel, como na referência */
.dropdown::after{
  content:"";
  position:absolute;
  top:100%; left:0; right:0;
  height:100vh;
  background:rgba(14,27,36,.38);
  pointer-events:none;
}

/* Rótulo da seção — 12px / 1.7px de entreletra, como na referência */
.dropdown__label{
  grid-column:1 / -1;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:20px;
}

.dropdown-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px 32px;                    /* passo vertical folgado entre as soluções */
  align-content:start;
}
.dropdown-list a{
  display:flex;
  align-items:center;
  gap:16px;
  padding:4px;
  border-radius:9px;
  color:var(--ink);
  transition:background-color .18s var(--ease);
}
.dropdown-list a:hover{ background:var(--page-alt); }

.dropdown-ico{
  flex:0 0 40px;
  display:grid; place-items:center;
  width:40px; height:40px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--accent-deep);
}
.dropdown-ico svg{ width:20px; height:20px; }
.dropdown-list a:hover .dropdown-ico{ border-color:#BFE2F4; }

.dropdown-txt{ display:flex; flex-direction:column; }
.dropdown-txt b{
  font-size:.875rem; font-weight:500; line-height:1.5;
  color:var(--ink);
}
.dropdown-txt span{
  font-size:.75rem; line-height:1.5;
  color:var(--ink-mute);
}

/* Card de destaque da direita — chamada do CTS Revisão */
.dropdown__promo{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:290px;
  padding:24px;
  border-radius:12px;
  overflow:hidden;
  background:var(--cts-navy-950);
  color:var(--white);
}
.dropdown__promo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 40%;
  filter:brightness(.55) saturate(.85);
}
.dropdown__promo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,20,31,.92), rgba(4,20,31,.15) 62%);
}
.dropdown__promo-copy{
  position:relative; z-index:1;
  padding-left:14px;
  border-left:2px solid var(--cts-cyan-400);
}
.dropdown__promo-copy b{
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:500; line-height:1.2; letter-spacing:-.02em;
}
.dropdown__promo-copy span{
  display:block;
  margin-top:.35rem;
  font-size:.875rem;
  color:rgba(255,255,255,.78);
}

.dropdown-sep{ height:1px; margin:.4rem .8rem; background:var(--line); }

/* Hambúrguer */
.hamburger{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-left:auto;
  border-radius:var(--r-sm);
}
.hamburger span{
  display:block; height:2px; width:22px; margin-inline:auto;
  background:var(--ink); border-radius:2px;
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu{
  background:var(--page);
  border-top:1px solid var(--line);
  padding:1.25rem var(--gutter) 2rem;
  max-height:calc(100dvh - var(--header-h));
  overflow-y:auto;
}
.mobile-list > li{ border-bottom:1px solid var(--line-soft); }
.mobile-list a,
.mobile-accordion{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:1rem .25rem; font-size:1rem; font-weight:500; color:var(--ink);
}
.mobile-sublist{ padding:0 0 .75rem .9rem; }
.mobile-sublist a{ padding:.6rem .25rem; font-size:.94rem; color:var(--ink-soft); }
.mobile-sublist .dropdown-sep{ background:var(--line); margin:.4rem .25rem; }
.mobile-accordion[aria-expanded="true"] .chevron{ transform:rotate(180deg); }
.mobile-menu .btn{ margin-top:1.5rem; }

/* ============================================================
   6.1 — Hero · layout do Figma (node 1:697)

   Comportamento de scroll — medido em iusnatura.com.br/ius-weex:
   o hero NÃO se move, não escala e não esmaece. Ele fica fixado
   (`position:sticky`) e é a seção seguinte, opaca, que sobe por cima.
   Por isso não há JS de scroll aqui — só a animação de entrada.

   Camadas (cada uma dona de um `transform` próprio, para a entrada):
     .hero__reveal    → opacity + scale
     .hero__stage     → clipping do card
     .hero__media-in  → scale da foto
     título/lead/CTA  → opacity + translateY, escalonado
   ============================================================ */
.hero{
  position:sticky;
  top:0;
  z-index:0;
  background:var(--page);
  padding:calc(var(--header-h) + 12px) 24px 24px;
}

.hero__reveal{ border-radius:16px; }

.hero__stage{
  position:relative;
  height:clamp(500px, calc(100vh - var(--header-h) - 36px), 860px);
  height:clamp(500px, calc(100svh - var(--header-h) - 36px), 860px);
  border-radius:16px;
  overflow:hidden;
  background:var(--cts-navy-950);
}

.hero__media{ position:absolute; inset:0; }
.hero__media-in{ height:100%; }
/* A foto da referência é um interior escuro; a nossa é uma loja clara.
   O rebaixe abaixo devolve o mesmo ponto de partida sem virar filtro azul
   sobre a pele (DS, seção 06 — "evite HDR saturado / filtro azul forte"). */
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  /* O card é mais panorâmico que a foto (2.4 vs 1.78): o corte é só
     vertical. Y baixo mantém a cabeça do supermercadista inteira. */
  object-position:50% 8%;
  filter:brightness(.68) saturate(.82) contrast(1.06);
}

/* Véu radial do Figma (elipse 90% × 100% a partir do topo-centro),
   reescrito na cor Navy 950 do DS no lugar do verde da referência,
   somado a um rebaixe de base que sustenta o texto branco. */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top,
      rgba(4,20,31,.92) 0%, rgba(4,20,31,.55) 34%, rgba(4,20,31,0) 68%),
    radial-gradient(90% 100% at 54.8% -4.4%,
      rgba(4,20,31,0) 0%, rgba(4,20,31,.985) 99%);
}
/* Spotlight ciano — DS: "azul como acento, no grafismo; nunca um filtro
   azul sobre a pele". Por isso a opacidade baixa e o foco fora das figuras. */
.hero__glow{
  position:absolute; inset:0;
  background:radial-gradient(64% 58% at 78% 2%, rgba(25,184,236,.17), transparent 62%);
}

/* ---------- Hero sem foto ----------
   Quando a página não tem uma cena para mostrar, o quadro do hero é o
   próprio gradiente da marca, e não uma foto de banco genérica. É o
   mesmo par de camadas dos blocos escuros de destaque (DS, seção 03):
   Navy profundo com o brilho ciano vindo do alto à direita. */
.hero--brand .hero__stage{
  background:
    radial-gradient(120% 100% at 80% 6%, rgba(25,184,236,.42), rgba(4,20,31,0) 62%),
    linear-gradient(160deg, #0A3450 0%, #062338 52%, #04141F 100%);
}
/* Sem foto por baixo, o brilho pode subir um pouco sem estourar */
.hero--brand .hero__glow{
  background:radial-gradient(70% 62% at 76% 0%, rgba(25,184,236,.22), transparent 64%);
}

/* Conteúdo ancorado na base e alinhado à ESQUERDA, na mesma coluna
   útil (1216px) usada pelo resto do site — o título começa exatamente
   onde começa o conteúdo das outras seções. */
.hero__content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end;
  gap:32px;
  width:100%;
  max-width:calc(var(--content) + 80px);
  margin-inline:auto;
  padding:40px 40px clamp(44px, 9vh, 96px);
  text-align:left;
}
.hero__text{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }

/* Figma: 64px / 64px / -0.03em. Tipo do DS (Space Grotesk); peso 500 —
   equivalente ao Regular do Geist da referência, sem perder corpo. */
.hero__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.15rem, 4vw, 4rem);
  line-height:1;
  letter-spacing:-.03em;
  /* Caixa calibrada para o título cair em DUAS linhas em desktop e
     notebook: a frase do hero mede ~2.360px no corpo máximo, então uma
     caixa de 720px não comporta uma linha só. Vale para as demais
     páginas; o h1 da Home tem a própria regra (seção 7.24), porque lá o
     cliente pediu três linhas. */
  max-width:720px;
  color:var(--white);
  text-wrap:balance;
}
/* Figma: 18px / 25.2px (1.4) */
.hero__lead{
  font-size:clamp(1rem, 1.15vw, 1.125rem);
  line-height:1.4;
  color:rgba(255,255,255,.85);
  max-width:710px;
  text-wrap:pretty;
}

/* CTA do Figma: pílula clara + caixa de ícone 48px.
   Cores do DS: superfície Nuvem, texto Navy 900, ícone no gradiente da marca. */
.pill-cta{
  display:inline-flex; align-items:center; gap:24px;
  height:56px;
  padding:4px 4px 4px 24px;
  border-radius:var(--r-btn);
  background:var(--cts-cloud);
  color:var(--cts-navy-900);
  font-weight:600; font-size:1rem; line-height:1.5; letter-spacing:-.01em;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.pill-cta:hover{
  background:var(--white);
  transform:translateY(-2px);
}
/* Sobre fundo Nuvem a pílula precisa de um filete para não sumir */
.pill-cta--light{
  background:var(--white);
  border:1px solid var(--line);
  padding-left:23px;
}
.pill-cta--light:hover{ border-color:#CBD8E2; }
.pill-cta__icon{
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:8px;
  background:var(--cts-grad-brand);
  color:var(--white);
}
/* Janela 20×20 girada -45°: a seta sai apontando na própria diagonal
   e a segunda entra no lugar dela. */
.pill-cta__window{
  display:block; width:20px; height:20px;
  overflow:hidden;
  transform:rotate(-45deg);
}
.pill-cta__track{
  display:flex; gap:10px;
  transition:transform .45s var(--ease);
}
.pill-cta__cell{
  flex:none;
  display:grid; place-items:center;
  width:20px; height:20px;
}
.pill-cta__cell svg{ width:15.63px; height:13.13px; }
.pill-cta:hover .pill-cta__track,
.pill-cta:focus-visible .pill-cta__track{ transform:translateX(-30px); }

/* Variação de marca — é ela que leva a seta do hero para os CTAs que
   vivem sobre fundo claro (header, menu mobile, formulário final). O
   contraste inverte: o corpo recebe o gradiente e a caixa do ícone fica
   branca, para o botão seguir sendo a ação primária da página. */
.pill-cta--brand{
  background:var(--cts-grad-btn);
  color:var(--white);
  border:0;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.pill-cta--brand:hover{ background:var(--cts-grad-btn); filter:brightness(1.06); }
.pill-cta--brand .pill-cta__icon{
  background:var(--white);
  color:var(--accent-deep);
}
/* Ocupando a linha inteira: menu mobile, card de apoio do FAQ e o
   fechamento do formulário. */
.pill-cta--block{
  display:flex;
  width:100%;
  justify-content:space-between;
}
/* Como <button> (submit do formulário) o componente precisa das mesmas
   regras de caixa que o reset tira dos botões. */
button.pill-cta{
  font-family:var(--font-body);
  text-align:left;
  cursor:pointer;
}

/* ---------- Entrada (ativada por JS via .is-anim → .is-ready) ---------- */
.hero.is-anim .hero__reveal{
  opacity:0;
  transform:scale(1.02);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
}
.hero.is-anim .hero__media-in{
  transform:scale(1.14);
  transition:transform 1.8s var(--ease);
}
.hero.is-anim .hero__title,
.hero.is-anim .hero__lead,
.hero.is-anim .hero__actions{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.hero.is-anim .hero__lead{ transition-delay:.12s; }
.hero.is-anim .hero__actions{ transition-delay:.24s; }

.hero.is-anim.is-ready .hero__reveal,
.hero.is-anim.is-ready .hero__media-in,
.hero.is-anim.is-ready .hero__title,
.hero.is-anim.is-ready .hero__lead,
.hero.is-anim.is-ready .hero__actions{
  opacity:1;
  transform:none;
}

/* Faixa de credibilidade — pílulas brancas montadas sobre a emenda */
.credibility-band{ padding-block:clamp(2.5rem, 5vw, 4rem); }
.credibility{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.9rem;
}
.cred-pill{
  display:flex; flex-direction:column; gap:.15rem;
  padding:1.25rem 1.45rem;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
.cred-pill__value{ color:var(--ink); }
.cred-pill__value{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.5rem, 2.3vw, 2rem);
  letter-spacing:-.03em;
  line-height:1.05;
}
.cred-pill__value--sm{
  font-size:clamp(.98rem, 1.25vw, 1.12rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
}
.cred-pill--wide{ justify-content:center; }
.cred-pill__label{ font-size:.86rem; color:var(--ink-soft); }

/* ============================================================
   6.2 — Bifurcação das jornadas
   ============================================================ */
/* Ritmo vertical do Figma: 96px topo / 120px base, 64px entre o
   cabeçalho e os cards, 24px entre os cards e a faixa de CTA. */
.section--journeys{
  padding-block:clamp(64px, 8vw, 96px) clamp(72px, 9vw, 120px);
}
.journeys-wrap{
  display:flex;
  flex-direction:column;
  gap:clamp(2.5rem, 5vw, 4rem);   /* Figma: 64px entre cabeçalho e cards */
}
/* Figma 1:851: os cards e a faixa de CTA são um bloco só, com 24px
   entre eles — e não os 64px que separam o cabeçalho. */
.journeys-stack{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ---------- Cabeçalho centralizado ---------- */
.journeys-head{
  display:flex; flex-direction:column; align-items:center;
  gap:16px;
  text-align:center;
}
.journeys-head .eyebrow{ margin-bottom:0; }
/* Figma: 40px / 48px / -0.02em */
.journeys-head .section-title{
  font-size:clamp(1.85rem, 3.2vw, 2.5rem);
  line-height:1.2;
  letter-spacing:-.02em;
  /* 20ch quebrava frases de uma linha só ("Manter dentro de casa, ou
     não" tem 29). A medida sobe para caber a frase inteira no desktop;
     o `balance` continua repartindo bem quando ela precisa quebrar. */
  max-width:34ch;
  text-wrap:balance;
}
/* Figma: 16px / 24px / -0.01em, caixa de 756px */
.journeys-lead{
  font-size:1rem;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--ink-soft);
  max-width:756px;
  text-wrap:pretty;
}

/* ---------- Par de cards ---------- */
.journeys{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
/* Figma 1:854/1:908: raio 16px, padding 64px, gap interno 48px */
.journey{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(2rem, 3.4vw, 48px);
  padding:clamp(1.85rem, 3.6vw, 64px);
  border-radius:var(--r-xl);
  /* O filete existe nos dois cards (transparente no escuro) para que a
     caixa interna tenha a mesma altura e as linhas dos dois alinhem. */
  border:1px solid transparent;
}
.journey__head{ display:flex; flex-direction:column; gap:.6rem; }
/* Ícone da solução no topo do card — o mesmo desenho do menu de
   soluções, para o produto ser reconhecido de uma página para outra. */
.journey__ico{
  display:grid; place-items:center;
  width:48px; height:48px;
  margin-bottom:.4rem;
  border-radius:var(--r-sm);
  background:var(--chip);
  color:var(--accent-deep);
}
.journey__ico svg{ width:26px; height:26px; }
/* No card escuro (`--primary`, o navy do DS) o ícone inverte, como o da
   âncora dos diferenciais e o do contraste: caixa translúcida e traço
   ciano, em vez do bloco claro que salta sobre o fundo. */
.journey--primary .journey__ico{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  color:var(--cts-cyan-300);
}
.journey__kicker{
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
/* Figma: 32px / 38.4px / -0.02em */
.journey__title{
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  line-height:1.2;
  letter-spacing:-.02em;
}
/* Texto de apoio do card. Mesma escala do .journeys-lead da seção, com a
   medida presa em ~46ch para não colar na borda do padding de 64px. */
.journey__lead{
  margin-top:.4rem;
  font-size:1rem;
  line-height:1.55;
  max-width:46ch;
  text-wrap:pretty;
}

/* Linhas com filete — o slot fixo da esquerda carrega a marca de item
   no lugar do ícone decorativo do Figma. */
.journey__list{ width:100%; }
.journey-row{
  display:flex;
  gap:12px;
  padding-block:16px;
  border-bottom:1px solid;
}
/* Mesma métrica do .origin__mark, para a marca alinhar com a primeira linha */
.journey-row__mark{
  flex:0 0 20px;
  display:grid; place-items:center;
  width:20px; height:20px;
  margin-top:2px;
}
.journey-row__mark svg{ width:20px; height:20px; }
/* Figma: 17px / 23.8px */
.journey-row__text{
  flex:1;
  font-size:1.0625rem;
  line-height:1.4;
}

.journey .btn{ margin-top:auto; }

/* Card A — a jornada que lidera (CTS Cadastro), no "card escuro" do DS.
   [DECISÃO] O Figma usa o card claro da esquerda em opacidade 40% por ser
   o lado "problema". Aqui as duas jornadas são ofertas reais, então
   nenhuma é rebaixada — a hierarquia fica só na cor. */
.journey--primary{
  position:relative;
  overflow:hidden;
  background:var(--cts-grad-navy);
  color:var(--white);
}
/* Eco do brilho inferior do card do Figma, na cor da marca */
.journey--primary::after{
  content:""; position:absolute; inset:auto auto -30% -20%;
  width:70%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(25,184,236,.22), transparent 68%);
  pointer-events:none;
}
.journey--primary > *{ position:relative; z-index:1; }
.journey--primary .journey__title{ color:var(--white); }
.journey--primary .journey__kicker{ color:var(--cts-cyan-300); }
.journey--primary .journey__lead{ color:var(--text-on-dark-soft); }
.journey--primary .journey-row{ border-color:rgba(255,255,255,.16); }
.journey--primary .journey-row__mark{ color:var(--cts-cyan-300); }
.journey--primary .journey-row__text{ color:var(--white); }

/* Card B — segunda linha de negócio. Sai do branco (que sumia contra a
   Nuvem do fundo da seção) e assume a Névoa da paleta: destaca-se do
   fundo sem disputar com o gradiente navy do card A. */
.journey--secondary{
  background:var(--cts-mist);
  border-color:rgba(85,105,122,.2);
}
.journey--secondary .journey__kicker{ color:var(--accent-deep); }
.journey--secondary .journey__lead{ color:var(--ink-mute); }
.journey--secondary .journey-row{ border-color:rgba(14,27,36,.14); }
.journey--secondary .journey-row__mark{ color:var(--accent-deep); }
.journey--secondary .journey-row__text{ color:var(--ink); }

/* ---------- Faixa de CTA (Figma 1:955) ---------- */
.journeys-cta{
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.5rem, 4vw, 3rem);
  padding:40px;
  border-radius:var(--r-xl);
  /* Como no Figma, a faixa é escura: é o que dá contraste ao botão claro.
     Aqui o gradiente vai do azul da marca ao navy, para não repetir
     exatamente o card A. */
  background:linear-gradient(120deg, #00659A 0%, #004E7A 42%, #062338 100%);
  color:var(--white);
}
.journeys-cta::after{
  content:""; position:absolute; inset:-55% -12% auto auto;
  width:44%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(25,184,236,.3), transparent 66%);
  pointer-events:none;
}
.journeys-cta__copy{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; }
/* Figma: 32px / 38.4px medium */
.journeys-cta__title{
  font-size:clamp(1.4rem, 2.4vw, 2rem);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--white);
}
/* Figma: 16px / 22.4px, caixa de 528px */
.journeys-cta__lead{
  font-size:1rem;
  line-height:1.4;
  color:rgba(255,255,255,.9);
  max-width:528px;
}
.journeys-cta .pill-cta{ position:relative; z-index:1; flex:0 0 auto; }

/* ============================================================
   6.3 — Hub de soluções (+ mural de clientes)
   Layout: Figma node 3:262 — chip de rótulo, título centralizado,
   painel de 414px com o diagrama (seis nós ligados ao núcleo) e três
   colunas de apoio embaixo. O mural de clientes divide a mesma
   superfície, logo abaixo.

   Fundo: "Navy profundo" do DS (160° · #0A3450 → #062338), estendido
   até o Navy 950 para dar profundidade, com o "Brilho / spotlight"
   ciano por cima. Tudo dentro da seção passa a trabalhar em contraste
   claro-sobre-escuro.
   ============================================================ */
.section--solutions{
  position:relative;
  background:
    radial-gradient(58% 46% at 78% 8%, rgba(25,184,236,.20), transparent 66%),
    radial-gradient(46% 40% at 12% 92%, rgba(0,131,193,.18), transparent 68%),
    linear-gradient(160deg, #0A3450 0%, #062338 52%, #04141F 100%);
  color:var(--white);
}

.hub{
  display:flex;
  flex-direction:column;
  gap:60px;                         /* Figma 3:265 */
}
.hub__head{
  display:flex; flex-direction:column; align-items:center;
  gap:16px;
  text-align:center;
}
/* Chip de rótulo (Figma 3:267): 32px de altura, pílula, filete claro */
.chip-label{
  display:inline-flex; align-items:center;
  height:32px;
  padding-inline:12px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
  font-size:.8125rem;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--ink);
}
/* Sobre o degradê escuro o chip vira vidro */
.section--solutions .chip-label{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  color:var(--white);
}
.hub__title{
  font-size:clamp(1.85rem, 3.2vw, 2.5rem);
  line-height:1.2;
  letter-spacing:-.02em;
  max-width:22ch;
  text-wrap:balance;
  color:var(--white);
}

/* ---------- Painel do diagrama ----------
   Sobre o degradê da seção o painel não pode ser mais um bloco opaco:
   é uma lâmina de vidro, com contraste suave contra o fundo. */
.hub__stage{
  /* ----------------------------------------------------------
     Geometria do diagrama. As linhas e as luzes se posicionam a
     partir DESTAS medidas, e não de porcentagens — era daí que vinha
     o desalinhamento: uma linha a 25% da altura do painel caía dentro
     do card do nó, por cima do texto.
     ---------------------------------------------------------- */
  --hub-pad-y:67px;                 /* respiro vertical do painel (Figma 3:279) */
  --hub-node-h:57px;                /* 39px do link + 8px de padding + 1px de filete, dos dois lados */
  --hub-gap:56px;                   /* passo entre fileira e núcleo (Figma 3:296) */
  --hub-core-h:62px;                /* 54px do chip + 3px de padding + 1px de filete, dos dois lados */
  --hub-line:rgba(228,228,231,.38);

  position:relative;
  min-height:414px;
  padding:var(--hub-pad-y) clamp(24px, 5vw, 165px);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  color:var(--white);
}
/* Bolha de luz do Figma 3:282, reescrita no ciano da marca */
.hub__glow{
  position:absolute;
  top:-119px; left:66%;
  width:651px; height:651px;
  border-radius:50%;
  background:rgba(25,184,236,.34);
  filter:blur(118px);
  pointer-events:none;
}
/* Espinha horizontal (Figma 3:283): uma linha só, no centro exato do
   painel — que é também o centro do núcleo, porque o diagrama é
   simétrico — indo de borda a borda do retângulo. */
.hub__grid-lines{
  position:absolute;
  top:50%; left:0; right:0;
  height:1px;
  margin-top:-.5px;
  background:var(--hub-line);
  pointer-events:none;
}

/* ---------- Luzes percorrendo as linhas ----------
   Referência: iusnatura.com.br/cal. Cada trilho é um recorte sobre a
   linha e, dentro dele, corre um segmento claro em degradê. Os dois
   trilhos verticais convergem para o núcleo, que ainda ganha um brilho
   girando na própria moldura. */
.hub__beams{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
}
.hub-beam{
  position:absolute;
  overflow:hidden;
}
/* Halo pulsante atrás do núcleo — vive na camada das luzes porque o
   próprio núcleo recorta o que passa dele para dentro. */
.hub-core-halo{
  position:absolute;
  top:50%; left:50%;
  width:280px; height:280px;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(25,184,236,.4), transparent 66%);
  filter:blur(26px);
  animation:hub-core-pulse 4.2s ease-in-out infinite;
}
@keyframes hub-core-pulse{
  0%, 100% { opacity:.45; }
  50%      { opacity:.95; }
}
.hub-beam::before{
  content:"";
  position:absolute;
  background:linear-gradient(var(--beam-dir, 90deg),
    transparent 0%,
    rgba(76,203,242,.9) 45%,
    rgba(255,255,255,.95) 55%,
    transparent 100%);
  animation:hub-beam-run var(--beam-dur, 4.6s) var(--beam-delay, 0s) linear infinite;
}

/* Trilhos horizontais — correm sobre a espinha, de borda a borda do
   painel. Duas luzes em sentidos opostos, com delays diferentes. */
.hub-beam--h{ left:0; width:100%; height:2px; top:50%; margin-top:-1px; }
.hub-beam--h::before{ top:0; bottom:0; left:0; width:22%; }
.hub-beam--h2{ --beam-delay:2.3s; --beam-dir:270deg; }
.hub-beam--h2::before{ animation-name:hub-beam-run-rev; }

/* Trilhos verticais — descem e sobem em direção ao núcleo, no mesmo
   eixo e na mesma medida dos conectores dos nós da coluna central. */
.hub-beam--v{
  left:50%; width:2px; margin-left:-1px;
  height:calc(var(--hub-gap) + var(--hub-core-h) / 2);
}
.hub-beam--v::before{ left:0; right:0; top:0; height:40%; --beam-dir:180deg; }
.hub-beam--v1{ top:calc(var(--hub-pad-y) + var(--hub-node-h)); --beam-dur:3.2s; }
.hub-beam--v1::before{ animation-name:hub-beam-fall; }
.hub-beam--v2{ bottom:calc(var(--hub-pad-y) + var(--hub-node-h)); --beam-dur:3.2s; --beam-delay:1.6s; }
.hub-beam--v2::before{ animation-name:hub-beam-rise; }

@keyframes hub-beam-run{
  0%   { transform:translateX(-100%); opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { transform:translateX(455%); opacity:0; }
}
@keyframes hub-beam-run-rev{
  0%   { transform:translateX(455%); opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { transform:translateX(-100%); opacity:0; }
}
@keyframes hub-beam-fall{
  0%   { transform:translateY(-100%); opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:1; }
  100% { transform:translateY(250%); opacity:0; }
}
@keyframes hub-beam-rise{
  0%   { transform:translateY(250%); opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:1; }
  100% { transform:translateY(-100%); opacity:0; }
}

.hub__diagram{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:56px;                         /* Figma 3:296 */
}
/* Três colunas de MESMA largura, com o nó centrado em cada uma. É o que
   garante que o bloco de cima e o de baixo de uma mesma coluna dividam o
   mesmo eixo — com `space-between` os nós de larguras diferentes puxavam
   os eixos para lados opostos e os conectores saíam de prumo. */
.hub__row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:center;
  justify-items:center;
  width:100%;
  max-width:886px;                  /* Figma 3:297 */
  gap:1rem;
}

/* Nó: moldura externa de 55px + pílula interna de 39px (Figma 3:299) */
.hub-node{
  position:relative;
  padding:8px;
  border:1px solid rgba(228,228,231,.16);
  border-radius:6px;
  background:rgba(255,255,255,.04);
}

/* Conector vertical: nasce no centro EXATO do bloco (left:50%) e vai até
   a espinha. Desenhá-lo no próprio nó é o que mantém a linha centrada
   qualquer que seja a largura do rótulo. */
.hub-node::after{
  content:"";
  position:absolute;
  left:50%;
  width:1px;
  margin-left:-.5px;
  height:calc(var(--hub-gap) + var(--hub-core-h) / 2);
  background:var(--hub-line);
  pointer-events:none;
}
.hub__row:first-of-type .hub-node::after{ top:100%; }
.hub__row:last-of-type  .hub-node::after{ bottom:100%; }
/* Medidas horizontais do Figma 3:299 / 3:329, lidas em pixel na prancha.
   Em coordenadas internas da pílula: o glifo mora entre 12 e 30, o filete
   cai em 43 e o rótulo começa em 61 — ou seja, o ícone fica CENTRADO no
   compartimento que vai da borda da pílula até o filete (12 de um lado,
   13 do outro). O respiro vive nas células, não na pílula: um
   `padding-inline` no link empurrava o glifo 6,5px para a direita e o
   colava no filete. */
.hub-node a{
  display:flex;
  align-items:center;
  height:39px;
  padding-inline:0;
  gap:0;
  border-radius:4px;
  background:rgba(6,35,56,.72);
  color:var(--white);
  transition:background-color .25s var(--ease);
}
.hub-node:hover{ border-color:rgba(76,203,242,.45); }
.hub-node a:hover,
.hub-node a:focus-visible{ background:var(--cts-blue-800); }

/* ---------- Abertura no hover ----------
   O apoio curto e a chamada aparecem em um painel ancorado ao nó, sem
   empurrar o diagrama: a fileira de cima abre para baixo, a de baixo
   abre para cima. */
.hub-node__more{
  position:absolute;
  left:0; right:0;
  top:calc(100% - 6px);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 14px 12px;
  border:1px solid rgba(76,203,242,.28);
  border-top:0;
  border-radius:0 0 6px 6px;
  background:linear-gradient(180deg, rgba(6,35,56,.96), rgba(4,20,31,.96));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.hub__row:last-of-type .hub-node__more{
  top:auto;
  bottom:calc(100% - 6px);
  border:1px solid rgba(76,203,242,.28);
  border-bottom:0;
  border-radius:6px 6px 0 0;
  transform:translateY(6px);
}
.hub-node:hover .hub-node__more,
.hub-node:focus-within .hub-node__more{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.hub-node__desc{
  font-size:.8125rem;
  line-height:1.45;
  color:var(--text-on-dark);
}
.hub-node__cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8125rem; font-weight:600;
  color:var(--cts-cyan-300);
}
.hub-node__cta svg{ width:14px; height:14px; }
.hub-node a:hover .hub-node__cta{ gap:10px; }
.hub-node__cta{ transition:gap .25s var(--ease); }
/* 44px = os 43 do compartimento + 1 do filete. `place-items:center`
   centraliza o glifo nele, na horizontal e na vertical. */
.hub-node__ico{
  flex:0 0 44px;
  display:grid; place-items:center;
  width:44px; height:39px;
  color:var(--cts-cyan-300);
  border-right:1px solid rgba(228,228,231,.16);
}
.hub-node__ico svg{ width:18px; height:18px; }
/* Figma: 18px do filete até o rótulo, 12px do rótulo até a borda oposta */
.hub-node__label{
  padding-left:18px;
  padding-right:12px;
  font-size:.875rem; font-weight:500; line-height:1.5; letter-spacing:-.01em;
  white-space:nowrap;
}
/* Coluna da direita: ícone depois do rótulo, como no Figma — as mesmas
   medidas, espelhadas. */
.hub-node--end .hub-node__ico{
  border-right:0;
  border-left:1px solid rgba(228,228,231,.16);
}
.hub-node--end .hub-node__label{ padding-left:12px; padding-right:18px; }

/* Núcleo — a marca no lugar do "Sistema CAL®" da referência */
/* Figma 3:345: moldura de vidro em volta do núcleo — filete, não sombra.
   É aqui que a luz da referência é mais forte: um brilho dá a volta na
   moldura, como se as linhas descarregassem no núcleo. */
.hub-core{
  position:relative;
  z-index:2;
  padding:3px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:7px;
  background:rgba(255,255,255,.05);
  overflow:hidden;
  isolation:isolate;
}
.hub-core::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:conic-gradient(from 0turn,
    transparent 0 58%,
    rgba(25,184,236,.55) 72%,
    rgba(76,203,242,.95) 80%,
    rgba(255,255,255,.95) 84%,
    rgba(76,203,242,.4) 90%,
    transparent 96%);
  animation:hub-core-spin 4.2s linear infinite;
  pointer-events:none;
}
@keyframes hub-core-spin{ to{ transform:rotate(1turn); } }
@keyframes hub-core-pulse{
  0%, 100% { opacity:.45; }
  50%      { opacity:.9; }
}

.hub-core__chip{
  position:relative;
  z-index:1;
  display:grid; place-items:center;
  height:54px;
  padding:6px 22px;
  border-radius:5px;
  background:var(--white);
}
.hub-core__logo{ height:26px; width:auto; }

/* ---------- Três apoios embaixo (Figma 3:408) ---------- */
.hub__notes{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(1.5rem, 3vw, 3rem);
}
.hub-note{
  display:flex; flex-direction:column; gap:24px;
  padding-left:20px;
  padding-right:24px;
}
/* Contraste sobre o degradê: caixa de vidro e ícone no ciano claro */
.hub-note__ico{
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--cts-cyan-300);
}
.hub-note__ico svg{ width:24px; height:24px; }
.hub-note__body{ display:flex; flex-direction:column; gap:12px; }
/* Figma 3:422: 20px / 24px, com um filete curto de 16px 20px à esquerda */
.hub-note__title{
  position:relative;
  font-size:1.25rem;
  line-height:1.2;
  letter-spacing:0;
  color:var(--cts-cyan-300);
}
.hub-note__title::before{
  content:"";
  position:absolute;
  left:-20px; top:4px;
  width:1px; height:16px;
  background:var(--cts-cyan-400);
}
.hub-note__text{
  font-size:1rem;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--text-on-dark);
}

/* ============================================================
   6.4 — Resultados
   Layout: Figma node 2:1543 — coluna de texto + CTA à esquerda (442px)
   e pilha de números à direita (521px), cada um sobre um filete de 2px.
   Movimento: "looping select" da seção "Valorizamos nosso pioneirismo
   sem nos aquietar" (iusnatura.com.br) — um número por vez fica ativo,
   o filete se preenche durante a permanência e o ciclo reinicia.
   ============================================================ */
.results-grid{
  display:grid;
  grid-template-columns:minmax(0, 442px) minmax(0, 521px);
  justify-content:space-between;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}

/* Figma 2:1545: coluna de 442px, título com caixa de 384px e apoio
   com 346px; 16px entre título e apoio, 32px até o botão. */
.results-intro{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:32px;
}
.results-intro__copy{ display:flex; flex-direction:column; gap:16px; }
.results-intro .eyebrow{ margin-bottom:0; }
.results-intro .section-title{
  font-size:clamp(1.85rem, 3.2vw, 2.5rem);
  line-height:1.2;
  letter-spacing:-.02em;
  max-width:384px;
}
.results-intro .section-support{ max-width:346px; }

/* ---------- Pilha de números ---------- */
.results-list{ display:flex; flex-direction:column; gap:24px; }
/* Variante em grade: na "A CTS hoje" os quatro números dividem a largura
   toda, em vez de empilhar numa coluna estreita ao lado do cabeçalho.
   A escala do número sobe junto — é o destaque da seção. */
.results-list--wide{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(1.5rem, 3vw, 2.5rem);
}
.results-list--wide .result__value{ font-size:clamp(2.4rem, 5vw, 4rem); }
/* Valor que é palavra, e não número: na escala dos números ele quebrava
   em duas linhas e desalinhava o filete da sua coluna com o das outras. */
.results-list--wide .result__value--text{ font-size:clamp(1.75rem, 3.2vw, 2.6rem); }
/* O corpo cresce e empurra o filete para a base: as quatro linhas de
   apoio e os quatro filetes ficam na mesma altura. */
.results-list--wide .result{ height:100%; }
.results-list--wide .result__body{ flex:1; }
.results-list--wide .result__label{ font-size:1.0625rem; }

@media (max-width:900px){
  .results-list--wide{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
  .results-list--wide{ grid-template-columns:1fr; }
}
.result{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.result__body{ display:flex; flex-direction:column; gap:4px; }

/* Figma: 48px / 57.6px / -1px */
.result__value{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.1rem, 4vw, 3rem);
  line-height:1.2;
  letter-spacing:-.021em;
  color:var(--cts-steel);
  transition:color .5s var(--ease);
}
/* Figma: 16px / 24px / -0.16px */
.result__label{
  font-size:1rem;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--cts-steel);
  transition:color .5s var(--ease);
}
/* Filete de 2px com preenchimento que acompanha a permanência */
.result__track{
  position:relative;
  height:2px;
  border-radius:var(--r-pill);
  background:#CBD8E2;   /* equivalente ao #d4d4d8 do Figma na paleta da CTS */
  overflow:hidden;
}
.result__fill{
  position:absolute; inset:0 auto 0 0;
  width:0;
  border-radius:var(--r-pill);
  background:var(--accent);
}

/* Estado ativo do "looping select" */
.result.is-active .result__value{ color:var(--accent-deep); }
.result.is-active .result__label{ color:var(--ink-soft); }
.result.is-active .result__fill{
  width:100%;
  transition:width var(--result-dwell, 5s) linear;
}

/* ============================================================
   6.5 — Confiança
   ============================================================ */
/* O mural divide a superfície em degradê do hub: título e filete
   trabalham em claro-sobre-escuro. */
.logos{ margin-top:clamp(3rem, 6vw, 60px); }
.logos-title{
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  padding-bottom:1.25rem;
  margin-bottom:1.75rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
/* Mural em uma linha só: os grupos de 5 dividem a MESMA célula de grade,
   um por cima do outro, e a troca é feita por opacidade. Empilhá-los
   assim mantém a altura do mural estável — não há salto quando o grupo
   muda. */
.logo-wall{
  display:grid;
  grid-template-columns:1fr;
}
.logo-slide{
  grid-area:1 / 1;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:.75rem;
  opacity:0;
  pointer-events:none;                /* o grupo escondido não rouba o hover */
  transition:opacity .6s var(--ease);
}
.logo-slide.is-active{
  opacity:1;
  pointer-events:auto;
}
/* Célula em vidro escuro sobre o degradê: mural uniforme, sem azulejo
   claro quebrando o fundo da seção. */
.logo-cell{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:104px;
  padding:1rem 1.25rem;
  background:rgba(4,20,31,.42);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-md);
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.logo-cell:hover{ background:rgba(4,20,31,.55); border-color:rgba(76,203,242,.45); }
/* Os logos têm proporções bem diferentes entre si: a altura manda e a
   largura acompanha, para que todos ocupem o mesmo peso visual. */
.logo-cell img{
  width:auto;
  max-width:100%;
  max-height:64px;
  object-fit:contain;
}
/* ============================================================
   6.5b — De onde a CTS vem
   Layout: Figma node 1:1179 — cartão de 1216px de largura com foto
   full-bleed, véu escuro em gradiente e um painel de 500px encostado
   na direita, com 40px de folga em cima, embaixo e na lateral.

   Movimento: medido na seção "A SIPAT que conecta, engaja e transforma"
   (iusnatura.com.br/ius-weex) — aquele bloco NÃO tem animação de
   entrada nem de scroll: entra pronto e fica parado. A única sutileza
   é a foto ampliada (scale 1.3) dentro do recorte. Reproduzido aqui,
   por isso esta seção não usa a classe .reveal.
   ============================================================ */
.section--origin{ padding-block:clamp(72px, 9vw, 120px); }

.origin{
  position:relative;
  min-height:720px;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--cts-navy-950);
}
/* Figma 1:1184: a foto entra ampliada (1.3×) dentro do recorte. O zoom
   é feito com `inset` negativo, e não com `transform:scale`: dentro de
   um pai com `overflow:hidden` + raio, o scale faz o Chrome parar de
   rasterizar a foto — o cartão fica só com o fundo. O inset dá o mesmo
   enquadramento sem criar a camada que quebra. */
.origin__media{ position:absolute; inset:-15%; }
/* Marcação de que a foto ainda é provisória — discreta, no canto de
   baixo da faixa que sobra ao lado do painel. Remover junto com o
   data-placeholder quando a foto do escritório chegar. */
.origin__ph{
  position:absolute;
  left:40px; bottom:40px;
  z-index:1;
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 15px;
  border:1px dashed rgba(255,255,255,.26);
  border-radius:var(--r-pill);
  background:rgba(4,20,31,.42);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.origin__ph svg{ width:16px; height:16px; }

.origin__media img{
  width:100%; height:100%;
  object-fit:cover;
  /* Enquadramento da foto do escritório: puxa para as mesas ocupadas,
     que ficam abaixo e à esquerda — a direita fica sob o painel. */
  object-position:38% 62%;
  /* Rebaixe leve: a foto do escritório é clara e o véu já faz o
     grosso do trabalho — mais que isto e o time some. */
  filter:brightness(.88) saturate(.88) contrast(1.04);
}
/* Figma 1:1185: linear-gradient(#010a00 -19%, transparente 54%,
   rgba(1,10,0,.9) 100%) a 86% — reescrito no Navy 950 da CTS. A parada
   do meio ganha um pouco de alfa porque a foto da CTS é clara: sem
   isso o cartão não fecha no tom escuro da referência. */
.origin__veil{
  position:absolute; inset:0;
  opacity:.86;
  background:linear-gradient(to bottom,
    var(--cts-navy-950) -19%,
    rgba(4,20,31,.34) 54%,
    rgba(4,20,31,.9) 100%);
}

/* Painel da direita — 500px, colado à direita com 40px de folga */
/* Medidas do painel na referência (iusnatura.com.br/ius-weex, "CTA Card"):
   500×640, padding 40, raio 16 e 48px entre os três blocos — cabeçalho,
   lista de fatos e CTA. Os 40px de folga em cima, embaixo e na direita
   saem do próprio cartão de 720px. */
.origin__panel{
  position:absolute;
  top:40px; right:40px; bottom:40px;
  display:flex;
  flex-direction:column;
  gap:48px;
  width:500px;
  max-width:calc(100% - 80px);
  padding:40px;
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(25,184,236,.28), transparent 62%),
    linear-gradient(160deg, #0A3450 0%, #062338 62%, #04141F 100%);
  color:var(--white);
  overflow:hidden;
}
.origin__head{ display:flex; flex-direction:column; gap:16px; }
/* Figma 1:1192: 40px / 48px / -0.8px */
.origin__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.75rem, 2.7vw, 2.5rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--white);
}
/* Figma 1:1196: 18px / 25.2px / -0.18px */
.origin__lead{
  font-size:1.125rem;
  line-height:1.4;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.86);
}

/* Lista de fatos com filetes brancos a 15%, como no Figma 1:1198 */
.origin__facts{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:24px;
}
.origin__facts::before,
.origin__fact + .origin__fact::before{
  content:"";
  display:block;
  height:1px;
  background:rgba(255,255,255,.15);
}
.origin__fact{ display:flex; flex-direction:column; gap:24px; }
.origin__fact-row{ display:flex; gap:12px; align-items:flex-start; }
/* Ícone de traço de 24px, na mesma linha do título — como na referência,
   onde o ícone fica fora da coluna de texto e título e apoio alinham. */
.origin__mark{
  flex:0 0 24px;
  display:grid; place-items:center;
  width:24px; height:24px;
  margin-top:1px;
  color:var(--cts-cyan-300);
}
.origin__mark svg{ width:24px; height:24px; }
.origin__fact-text{ display:flex; flex-direction:column; gap:2px; }
/* Figma 1:1206: 19px / 26.6px */
.origin__fact-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1875rem;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--white);
}
/* Figma 1:1210: 16px / 22.4px / -0.16px, caixa de 340px, opacidade 70% */
.origin__fact-desc{
  font-size:1rem;
  line-height:1.4;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.7);
  max-width:340px;
}
/* CTA na base do painel, ocupando a largura útil (Figma 1:1226) */
.origin__panel .pill-cta{
  justify-content:space-between;
  width:100%;
  gap:16px;
  margin-top:auto;
}

/* ============================================================
   6.5a — Depoimentos
   Layout: Figma node 3:2 — cabeçalho à esquerda, setas no canto
   superior direito e carrossel de dois cards de 592×389 com 32px
   entre eles. Cores e raios adaptados ao DS da CTS.
   ============================================================ */
.section--voices{ background:var(--page); }
.voices{
  display:flex;
  flex-direction:column;
  gap:48px;                          /* Figma 3:3 */
}
.voices__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(1.5rem, 4vw, 3rem);
}
.voices__intro{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.voices__title{
  font-size:clamp(1.85rem, 3.2vw, 2.5rem);
  line-height:1.2;
  letter-spacing:-.02em;
}
.voices__lead{
  font-size:1rem;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:852px;                   /* Figma 3:18 */
}

/* Setas 42px, como no carrossel da referência (onegreen.com.br), mas com
   o raio dos botões do site (--r-btn) no lugar do círculo: é o padrão de
   canto de todo controle da página. */
.voices__nav{ display:flex; gap:8px; flex:0 0 auto; }
.voices__arrow{
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:var(--r-btn);
  background:var(--cts-grad-btn);
  color:var(--white);
  transition:filter .25s var(--ease), opacity .25s var(--ease);
}
.voices__arrow svg{ width:20px; height:20px; }
.voices__arrow:hover{ filter:brightness(1.08); }
.voices__arrow[disabled]{ opacity:.4; cursor:default; }

/* Viewport recortado; a faixa desliza por transform, com a mesma
   duração e curva do Swiper da referência (500ms / ease). */
.voices__viewport{ overflow:hidden; }
.voices__track{
  display:flex;
  gap:32px;
  will-change:transform;
}
.voices__track.is-animating{ transition:transform .5s ease; }

/* Card: 592×389 no Figma — aqui, metade da coluna útil menos o gap */
.voice{
  flex:0 0 calc((100% - 32px) / 2);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  min-height:389px;
  padding:40px;
  background:var(--page-alt);
  border-radius:var(--r-xl);
}
.voice__top{ display:flex; flex-direction:column; gap:24px; }
/* Faixa para o logo do cliente. O Figma usa 42px, mas ali os logos são
   assinaturas largas; os da CTS são quase quadrados, então 48px devolve
   o mesmo peso visual na composição. */
.voice__logo{ height:48px; }
.voice__logo img{ height:100%; width:auto; max-width:180px; object-fit:contain; }
.voice__quote{
  font-size:1rem;
  line-height:1.5;
  color:var(--ink-soft);
}

.voice__author{ display:flex; align-items:center; gap:16px; }
/* PLACEHOLDER: sem foto do cliente, a marca entra como iniciais */
.voice__avatar{
  flex:0 0 48px;
  display:grid; place-items:center;
  width:48px; height:46px;
  border-radius:6px;
  background:var(--cts-grad-brand);
  color:var(--white);
  font-family:var(--font-display);
  font-size:.875rem; font-weight:600; letter-spacing:.02em;
}
.voice__id{ display:flex; flex-direction:column; gap:4px; }
.voice__name{ font-size:1rem; font-weight:600; color:var(--ink); line-height:1.2; }
.voice__role{ font-size:.875rem; color:var(--ink-soft); line-height:1.2; }

/* Slot de placeholder — REMOVER ANTES DE PUBLICAR */
.placeholder-slot{
  margin-top:clamp(2.5rem, 5vw, 4rem);
  padding:2.25rem;
  border:1px dashed #B9CBDA;
  border-radius:var(--r-xl);
  color:var(--ink-soft);
  font-size:.92rem;
  text-align:center;
}
.placeholder-slot strong{ color:var(--accent-deep); }

/* ============================================================
   6.6 — Ação (CTA + formulário)
   ============================================================ */
.section--cta{ padding-top:clamp(48px, 6vw, 84px); }
.cta-panel{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 4.5vw, 4rem);
  padding:clamp(2rem, 4.4vw, 3.75rem);
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
.cta-panel__copy{ display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.cta-title{
  color:var(--ink);
  font-size:clamp(1.8rem, 3.1vw, 2.5rem);
  max-width:20ch;
}
.cta-support{ color:var(--ink-soft); max-width:42ch; }

/* Fechamento em split (Figma 1:1463, página CTS Cadastro): dois cartões
   colados — 662px de formulário + 20px + 535px de foto — somando a mesma
   coluna útil de 1216px. A Home segue com o .cta-panel simples. */
.cta-split{
  display:grid;
  grid-template-columns:minmax(0, 662fr) minmax(0, 535fr);
  gap:20px;
  align-items:stretch;
}
.cta-split > .cta-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(1.75rem, 3vw, 2.5rem);
}
/* Mesmo título da faixa intermediária: também em duas linhas, com a caixa
   folgada o bastante para não quebrar em três. Escopo no split para não
   mexer no fechamento da Home, que tem outra frase e outra largura. */
.cta-split .cta-title{
  max-width:26ch;
  text-wrap:balance;
}
.cta-media{
  position:relative;
  overflow:hidden;
  min-height:320px;
  border-radius:var(--r-xl);
  background:var(--cts-navy-950);
}
.cta-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Corte baixo: privilegia as pessoas, não o forro do escritório */
  object-position:50% 62%;
  /* Rebaixe leve, como no resto das fotos do site (DS, seção 06) */
  filter:brightness(.9) saturate(.94) contrast(1.03);
}
/* Fotos cujo assunto está na METADE DE CIMA do quadro (a Revisão, com o
   documento nas mãos): o corte padrão, pensado para retratos de meio
   corpo, cortaria justamente o que interessa. */
.cta-media--high img{ object-position:50% 34%; }

.cta-form{ display:flex; flex-direction:column; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-soft);
}
.field input{
  font:inherit;
  font-size:.98rem;
  color:var(--ink);
  padding:.85rem 1rem;
  background:var(--field);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input:focus{ outline:none; border-color:var(--accent-deep); background:var(--white); }
.cta-form .btn{ margin-top:.5rem; flex:0 0 auto; }
/* Em uma caixa larga, `space-between` jogaria o rótulo e a seta para
   cantos opostos: aqui o par fica centrado. */
.cta-form .pill-cta{ margin-top:.25rem; flex:0 0 auto; }
.cta-form .pill-cta--block{ justify-content:center; gap:20px; padding-inline:4px; }

/* ============================================================
   6.7 — Rodapé
   ============================================================ */
/* Rodapé — única superfície escura fixa da página, para fechar o fluxo.
   Usa a variação branca do logo, conforme o DS. */
.site-footer{
  position:relative;
  z-index:1;
  background:var(--cts-navy-900);
  color:var(--text-on-dark);
  padding-block:clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr repeat(4, 1fr);
  gap:clamp(1.75rem, 3.5vw, 3rem);
}
.footer-logo{ height:32px; width:auto; margin-bottom:1.5rem; }
.footer-contact li{ padding-block:.3rem; font-size:.94rem; color:var(--text-on-dark); }
.footer-contact a:hover{ color:var(--white); }

/* Redes sociais — ícones ancorados à esquerda, abaixo do bloco de contato */
.footer-social{
  display:flex;
  gap:10px;
  margin-top:1.25rem;
}
.footer-social a{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid var(--hairline);
  border-radius:var(--r-sm);
  color:var(--text-on-dark);
  transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.footer-social a:hover{
  color:var(--white);
  border-color:rgba(76,203,242,.45);
  background:rgba(255,255,255,.06);
}
.footer-social svg{ width:20px; height:20px; }

.footer-col__title{
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:0;
  color:var(--white);
  padding-bottom:.85rem;
  margin-bottom:1.1rem;
  border-bottom:1px solid var(--hairline);
}
.footer-col li{ padding-block:.35rem; }
.footer-col a{ font-size:.94rem; color:var(--text-on-dark-soft); transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--white); }

.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:clamp(2.5rem, 5vw, 4rem);
  padding-top:1.75rem;
  border-top:1px solid var(--hairline);
  font-size:.88rem;
  color:var(--text-on-dark-soft);
}
.footer-bottom a:hover{ color:var(--white); }

/* Crédito da agência: o logo da NOZ no lugar do nome escrito. A marca
   entra com a mesma discrição do texto que substituiu (opacidade da cor
   de apoio do rodapé) e firma no hover, como os demais links daqui. */
.footer-credit{ display:inline-flex; align-items:center; gap:.5rem; }
.footer-credit a{ display:inline-flex; align-items:center; }
.footer-noz{
  display:block;
  height:14px; width:auto;
  opacity:.72;
  transition:opacity .2s var(--ease);
}
.footer-credit a:hover .footer-noz,
.footer-credit a:focus-visible .footer-noz{ opacity:1; }

/* ============================================================
   Animações de entrada
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* Cards das jornadas: escalonamento como na referência — o cabeçalho
   revela primeiro e os cards entram em sequência. */
.journeys .reveal:nth-child(2){ transition-delay:.14s; }

.hub__notes .reveal:nth-child(2){ transition-delay:.08s; }
.hub__notes .reveal:nth-child(3){ transition-delay:.16s; }

/* ============================================================
   PÁGINA CTS CADASTRO (cadastro.html)
   Componentes que ainda não existiam na Home. Tokens, botões, header,
   rodapé, hero e formulário vêm todos das seções acima — aqui só entra
   o que a página de conversão pede a mais.
   ============================================================ */

/* ---------- Fundos de seção reaproveitáveis ----------
   O mesmo degradê da seção de soluções da Home, liberado como
   modificador para qualquer seção que precise inverter o contraste. */
.section--dark{
  position:relative;
  background:
    radial-gradient(58% 46% at 78% 8%, rgba(25,184,236,.20), transparent 66%),
    radial-gradient(46% 40% at 12% 92%, rgba(0,131,193,.18), transparent 68%),
    linear-gradient(160deg, #0A3450 0%, #062338 52%, #04141F 100%);
  color:var(--white);
}
.section--dark .chip-label{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  color:var(--white);
}
.section-title--on-dark{ color:var(--white); }
.section--alt{ background:var(--page-alt); }

/* ---------- Cabeçalho de bloco ----------
   Abertura padrão das seções internas: eyebrow em caixa alta sobre o
   título. Mesma escala do .section-head da Home, em coluna. */
.block-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-bottom:clamp(2.25rem, 4vw, 3.5rem);
}
.block-head--center{ align-items:center; text-align:center; }
.block-head .eyebrow{ margin-bottom:.75rem; }
.block-head .chip-label{ margin-bottom:1rem; }
.block-head .section-title{ max-width:22ch; }

/* ---------- 6.1 Hero em duas colunas ----------
   O hero da Home é um card cheio de foto com o texto ancorado na base e
   preso em sticky. Na página interna ele vira split: texto à esquerda,
   visual de produto à direita, e sai do sticky (não há page-flow aqui
   subindo por cima). */
.hero--split{ position:relative; }
.hero--split .hero__stage{
  height:auto;
  min-height:clamp(520px, calc(100svh - var(--header-h) - 60px), 760px);
  display:flex;
  background:
    radial-gradient(52% 44% at 82% 6%, rgba(25,184,236,.20), transparent 68%),
    linear-gradient(160deg, #0A3450 0%, #062338 54%, #04141F 100%);
}
/* Com a foto conceitual por baixo, o véu volta a ter o papel da Home:
   sustentar o texto branco. Aqui ele é ponderado para a ESQUERDA, que é
   onde mora o título — a ficha de produto, à direita, pede menos rebaixe. */
.hero--split .hero__veil{
  background:
    linear-gradient(100deg,
      rgba(4,20,31,.94) 0%, rgba(4,20,31,.82) 38%, rgba(4,20,31,.42) 72%, rgba(4,20,31,.30) 100%),
    radial-gradient(80% 90% at 18% 88%, rgba(4,20,31,.55) 0%, rgba(4,20,31,0) 70%);
}
/* Mesmo tratamento de foto do hero da Home (DS, seção 06): rebaixe de
   luminância, sem filtro azul sobre a pele. */
.hero--split .hero__media img{
  object-position:50% 42%;
  filter:brightness(.62) saturate(.82) contrast(1.06);
}
.hero--split .hero__content{
  /* `relative` (e não `static`) porque o véu e o brilho são elementos
     posicionados: sem uma camada própria, o conteúdo ficaria por baixo
     deles — invisível assim que o véu ganhou opacidade para sustentar o
     texto sobre a foto. */
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  justify-content:initial;
  gap:clamp(2.5rem, 5vw, 4.5rem);
  padding-block:clamp(48px, 7vw, 88px);
}
.hero--split .hero__title{
  font-size:clamp(2rem, 3.1vw, 3.25rem);
  line-height:1.05;
  max-width:none;
}
.hero--split .hero__lead{ max-width:52ch; }
.hero--split .hero__actions{ margin-top:.75rem; }

/* Ficha de produto do hero — o "padrão canônico da marca": card branco
   arredondado sobre o fundo escuro. */
.hero__product{ display:flex; justify-content:flex-end; }
.prodcard{
  width:100%;
  max-width:420px;
  display:flex; flex-direction:column; gap:1.25rem;
  padding:clamp(1.5rem, 2.6vw, 2rem);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-xl);
  color:var(--ink);
}
.prodcard__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.prodcard__ico{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:var(--r-sm);
  background:var(--chip);
  color:var(--accent-deep);
}
.prodcard__ico svg{ width:24px; height:24px; }
.prodcard__seal{
  display:inline-flex; align-items:center; gap:.4rem;
  height:32px; padding-inline:12px;
  border-radius:var(--r-pill);
  background:var(--chip);
  border:1px solid #BFE2F4;
  font-size:.8125rem; font-weight:600;
  color:var(--accent-deep);
}
.prodcard__seal svg{ width:15px; height:15px; }

.prodcard__rows{ display:flex; flex-direction:column; }
.prodrow{
  display:flex; align-items:center; gap:1rem;
  padding-block:14px;
  border-bottom:1px solid var(--line);
}
.prodrow__key{
  flex:0 0 92px;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
/* PLACEHOLDER visual: os valores ficam mascarados de propósito — EAN,
   NCM e alíquota são dado técnico real e não são inventados. */
.prodrow__val--mask{
  height:10px;
  width:var(--mask-w, 60%);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--cts-mist), var(--cts-cloud));
}
.prodcard__foot{
  font-size:.85rem;
  color:var(--ink-soft);
}

/* ---------- 6.2 Sintomas ----------
   Layout: Figma 1:1242 — coluna de abertura à esquerda (390px) e pilha de
   cards largos à direita (736px), cada card com bloco visual de 200×180 e
   o texto ao lado.

   Movimento (iusnatura.com.br/ius-weex, "Benefícios que geram resultados"):
   cada card é `position:sticky` com um `top` 15px maior que o do anterior,
   então eles se empilham em baralho conforme a página sobe. A coluna da
   esquerda fica presa junto.

   O sticky exige que o elemento tenha para onde correr dentro do próprio
   contêiner: por isso a coluna da esquerda é um bloco que estica (item de
   grade) com um filho `__in` preso — sem esse par, a coluna teria a altura
   do conteúdo e nunca sairia do lugar. */
.symptoms-split{
  display:grid;
  grid-template-columns:minmax(0, 390px) minmax(0, 736px);
  justify-content:space-between;
  gap:clamp(2rem, 5vw, 4rem);
}
.symptoms-intro__in{
  position:sticky;
  top:calc(var(--header-h) + 40px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.symptoms-intro .eyebrow{ margin-bottom:.75rem; }
.symptoms-intro .section-title{ max-width:14ch; }
.symptoms-intro__lead{
  margin-top:1rem;
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:34ch;
  text-wrap:pretty;
}
.symptoms-intro .pill-cta{ margin-top:clamp(1.5rem, 3vw, 2rem); }

.symptoms{ display:flex; flex-direction:column; gap:24px; }
.symptom{
  position:sticky;
  top:calc(var(--header-h) + 40px);
  display:flex; align-items:center; gap:32px;
  padding:32px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
/* O baralho: 15px de degrau de um card para o seguinte, medido na
   referência. Sem o degrau os cards se cobririam por inteiro. */
.symptom:nth-child(2){ top:calc(var(--header-h) + 55px); }
.symptom:nth-child(3){ top:calc(var(--header-h) + 70px); }
.symptom:nth-child(4){ top:calc(var(--header-h) + 85px); }
.symptom:nth-child(5){ top:calc(var(--header-h) + 100px); }

/* PLACEHOLDER: no lugar da foto da referência, o ícone do sintoma no
   mesmo footprint (200×180). Trocar por foto quando houver banco. */
.symptom__media{
  flex:0 0 200px;
  display:grid; place-items:center;
  width:200px; height:180px;
  border-radius:var(--r-md);
  background:var(--chip);
  color:var(--accent-deep);
}
.symptom__media svg{ width:68px; height:68px; stroke-width:1.1; }
.symptom__body{ display:flex; flex-direction:column; gap:.65rem; }
.symptom__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.15rem, 1.9vw, 1.5rem);
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:pretty;
}
.symptom__num{ color:var(--ink-mute); }
.symptom__text{
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* ---------- 6.3 Como funciona ----------
   Duas trilhas de três etapas, como no fluxograma "Entenda o processo"
   do site atual da CTS. O conector entre os cards repete o motivo das
   linhas do hub da Home: um filete claro ligando um passo ao próximo. */
/* ---------- Toggle entre as trilhas ----------
   Layout: Figma 17:706. Interação e movimento medidos no CSS de produção
   de elevenlabs.io (seção "Showcasing the global impact of AI audio
   research"):
     · trilho de 44px com filete fino por dentro (o raio aqui é o dos
       botões da CTS, --r-btn, no lugar da pílula da referência);
     · colunas de mesma largura, trilho centrado e com a largura do conteúdo;
     · a pílula do item ativo NÃO desliza — cada aba tem a sua e ela entra
       por opacidade, junto com a cor do rótulo;
     · 150ms com cubic-bezier(.4, 0, .2, 1) nas duas transições;
     · o item inativo ganha um fundo suave no hover.
   Cores traduzidas para o DS da CTS, que aqui trabalha sobre fundo escuro:
   pílula ativa clara com texto Navy, inativo em texto-sobre-escuro. */
.steps-tabs{
  --tabs-ease:cubic-bezier(.4, 0, .2, 1);
  --tabs-dur:.15s;
}
.steps-tabs__list{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  width:max-content;
  max-width:100%;
  height:44px;
  margin-inline:auto;
  margin-bottom:clamp(2rem, 4vw, 3rem);
  border-radius:var(--r-btn);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.steps-tab{
  position:relative;
  isolation:isolate;                 /* prende as camadas da pílula na aba */
  display:flex; align-items:center; justify-content:center;
  padding-inline:20px;
  border-radius:var(--r-btn);
  font-size:.9375rem; font-weight:600; line-height:1.5; letter-spacing:-.01em;
  color:var(--text-on-dark);
  white-space:nowrap;
  transition:color var(--tabs-dur) var(--tabs-ease);
}
.steps-tab:hover{ color:var(--white); }
.steps-tab[aria-selected="true"]{ color:var(--cts-navy-900); }

/* Pílula do item ativo */
.steps-tab::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:var(--r-btn);
  background:var(--cts-cloud);
  box-shadow:0 0 1px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04);
  opacity:0;
  transition:opacity var(--tabs-dur) var(--tabs-ease);
}
.steps-tab[aria-selected="true"]::before{ opacity:1; }

/* Realce de hover do item inativo, recuado 3px como na referência */
.steps-tab::after{
  content:"";
  position:absolute; inset:3px; z-index:-1;
  /* 3px para dentro pede 3px a menos de raio, para os cantos ficarem
     concêntricos com os do trilho */
  border-radius:calc(var(--r-btn) - 3px);
  background:rgba(255,255,255,.08);
  opacity:0;
  transition:opacity var(--tabs-dur) var(--tabs-ease);
}
.steps-tab:hover::after{ opacity:1; }
.steps-tab[aria-selected="true"]::after{ opacity:0; }

/* O painel só entra em fade quando há JS: sem ele o primeiro painel
   precisa continuar visível. A referência troca o painel sem animação;
   os 150ms aqui são os mesmos do toggle, para o conjunto ler como um só
   movimento em vez de um corte seco. */
.steps-tabs.is-ready .steps-panel{
  opacity:0;
  transition:opacity var(--tabs-dur) var(--tabs-ease);
}
.steps-tabs.is-ready .steps-panel.is-active{ opacity:1; }
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.step{
  position:relative;
  display:flex; flex-direction:column; gap:.85rem;
  padding:clamp(1.5rem, 2.4vw, 1.9rem);
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
}
/* Conector: sai da borda direita do card em direção ao seguinte */
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:calc(clamp(1.5rem, 2.4vw, 1.9rem) + 22px);
  left:100%;
  width:16px; height:1px;
  background:linear-gradient(90deg, rgba(76,203,242,.7), rgba(76,203,242,.15));
}
.step__num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.14em;
  color:var(--cts-cyan-300);
}
.step__ico{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--cts-cyan-300);
}
.step__ico svg{ width:24px; height:24px; }
.step__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1875rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--white);
}
.step__title{ text-wrap:pretty; }
/* A altura é a da grade — todos os cards da fileira acompanham o mais
   alto, sem precisar de mínimo arbitrário. */
.steps .step{ justify-content:flex-start; }
/* No fluxograma da CTS a última caixa de cada trilha é o RESULTADO, e
   vem com a moldura reforçada. Aqui a ênfase é a mesma, na linguagem do
   DS: filete ciano e fundo um passo mais claro. */
.step--result{
  border-color:rgba(76,203,242,.42);
  background:rgba(25,184,236,.10);
}
.step__text{
  font-size:.98rem;
  line-height:1.5;
  color:var(--text-on-dark);
  text-wrap:pretty;
}

/* ---------- 6.4 Os 8 diferenciais ----------
   Grade 4×2 numerada. O card 01 é a âncora do argumento e recebe o
   card navy do DS; os demais ficam no card claro. */
.perks{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.perk{
  position:relative;
  display:flex; flex-direction:column; gap:.75rem;
  padding:clamp(1.5rem, 2.4vw, 1.9rem);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.perk:hover{ transform:translateY(-3px); border-color:#BFE2F4; }
.perk__ico{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:var(--r-sm);
  background:var(--chip);
  color:var(--accent-deep);
}
.perk__ico svg{ width:24px; height:24px; }
.perk__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.125rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}
.perk__text{
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}
/* Card largo: fecha a última fileira quando a grade tem um card a menos
   (CTS Cadastro ficou com 6 diferenciais), espelhando a âncora em cima. */
.perk--wide{ grid-column:span 2; }
/* Âncora: o ativo que sustenta todos os outros diferenciais */
.perk--anchor{
  grid-column:span 2;
  position:relative;
  overflow:hidden;
  background:var(--cts-grad-navy);
  border-color:transparent;
}
.perk--anchor::after{
  content:""; position:absolute; inset:auto auto -40% -15%;
  width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(25,184,236,.24), transparent 68%);
  pointer-events:none;
}
.perk--anchor > *{ position:relative; z-index:1; }
.perk--anchor .perk__ico{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--cts-cyan-300);
}
.perk--anchor .perk__title{ color:var(--white); font-size:1.375rem; }
.perk--anchor .perk__text{ color:var(--text-on-dark); }

/* ---------- 6.5 Faixa de CTA intermediária ----------
   Layout: Figma 16:4 — faixa de 1216×350 dividida em painel de cor
   (708/1216) com título, apoio e botão, e foto (508/1216) com a MESMA
   altura da faixa. Medido no Figma: a foto vai de x=708 até a borda e de
   y=0 a y=350, sem transbordo. Só os cantos externos são arredondados;
   a emenda entre painel e foto é reta. */
/* A faixa nascia com `padding-block:0` e encostava nas seções de cima e
   de baixo. Ela volta ao ritmo vertical do site (--section-y), como
   qualquer outra seção, para o bloco respirar entre as vizinhas. */
.section--midcta{ padding-block:var(--section-y); background:var(--page); }
.midcta{
  display:grid;
  grid-template-columns:minmax(0, 708fr) minmax(0, 508fr);
  align-items:stretch;
  min-height:350px;
}
/* Fundo: "Brilho / spotlight" do DS (seção 03) — radial ciano sobre o
   Navy profundo. É o gradiente escuro previsto para blocos de destaque,
   e já traz a luz que antes vinha de um elemento avulso. */
.midcta__panel{
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start;
  gap:clamp(1.5rem, 3vw, 2rem);
  padding:clamp(2rem, 4vw, 3rem) clamp(1.75rem, 3.6vw, 3.75rem);
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  background:
    radial-gradient(120% 100% at 80% 12%, rgba(25,184,236,.55), rgba(4,20,31,0) 60%),
    linear-gradient(160deg, #0A3450, #04141F);
  color:var(--white);
}
.midcta__copy{ display:flex; flex-direction:column; gap:.85rem; }
/* A caixa comporta a frase em DUAS linhas: com 20ch ela quebrava em três.
   `balance` reparte as duas linhas com pesos parecidos em vez de deixar
   uma cheia e outra com três palavras. */
.midcta__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--white);
  max-width:30ch;
  text-wrap:balance;
}
.midcta__lead{
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--text-on-dark);
  max-width:38ch;
  text-wrap:pretty;
}
.midcta__panel .pill-cta,
.midcta__panel .btn{ flex:0 0 auto; }

.midcta__media{
  position:relative;
  overflow:hidden;
  border-radius:0 var(--r-xl) var(--r-xl) 0;
  background:var(--cts-navy-950);
}
.midcta__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* A foto é retrato e a caixa é deitada: o `cover` corta na vertical.
     O enquadramento sobe para segurar rosto e headset no quadro. */
  object-position:50% 14%;
}

/* ---------- 6.8 FAQ ----------
   Layout: Figma 1:1362 — o cabeçalho é fechado por um filete de largura
   total; abaixo, card de apoio à ESQUERDA (425px) e acordeão à direita
   (738px), com 60px entre eles. O painel abre por altura animada; o botão
   é o próprio cabeçalho, operável por teclado. */
.faq-head{
  display:flex; flex-direction:column; align-items:flex-start;
  padding-bottom:clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(2rem, 4vw, 3.25rem);
}
.faq-head .eyebrow{ margin-bottom:.75rem; }
.faq-head .section-title{ max-width:22ch; }

.faq{
  display:grid;
  grid-template-columns:minmax(0, 425fr) minmax(0, 738fr);
  gap:60px;
  align-items:start;
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child .faq-item__btn{ padding-top:0; }
.faq-item__head{ margin:0; }
.faq-item__btn{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  width:100%;
  padding:1.35rem 0;
  text-align:left;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.05rem, 1.5vw, 1.1875rem);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.faq-item__btn:hover{ color:var(--accent-deep); }
/* A pergunta aberta assume a cor da marca, como na referência */
.faq-item__btn[aria-expanded="true"]{ color:var(--accent-deep); }
/* Chevron limpo, sem moldura (Figma 1:1362): gira 180° ao abrir */
.faq-item__chev{
  flex:0 0 24px;
  display:grid; place-items:center;
  width:24px; height:24px;
  color:var(--ink-mute);
  transition:transform .3s var(--ease), color .2s var(--ease);
}
.faq-item__chev svg{ width:20px; height:20px; }
.faq-item__btn:hover .faq-item__chev{ color:var(--accent-deep); }
.faq-item__btn[aria-expanded="true"] .faq-item__chev{
  transform:rotate(180deg);
  color:var(--accent-deep);
}

/* O painel anima de 0 até a altura do conteúdo. `hidden` sai por JS no
   início da abertura e volta no fim do fechamento, para o conteúdo não
   ficar exposto a leitores de tela enquanto está recolhido. */
.faq-item__panel{
  overflow:hidden;
  height:0;
  transition:height .32s var(--ease);
}
.faq-item__panel[hidden]{ display:block; height:0; }
.faq-item__panel p{
  padding:0 3rem 1.5rem 0;
  font-size:1rem;
  line-height:1.6;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* Card de apoio: na referência é o bloco escuro da marca. Aqui vira o
   "Navy profundo" do DS, com o mesmo brilho ciano dos outros cards
   escuros do site. */
.faq-aside{
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
  gap:clamp(1.25rem, 2.5vw, 1.75rem);
  min-height:390px;
  padding:clamp(1.75rem, 3vw, 2.25rem);
  background:var(--cts-grad-navy);
  border-radius:var(--r-xl);
  color:var(--white);
}
.faq-aside::after{
  content:""; position:absolute; inset:auto auto -35% -25%;
  width:85%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(25,184,236,.26), transparent 68%);
  pointer-events:none;
}
.faq-aside > *{ position:relative; z-index:1; }
.faq-aside__avatar{
  position:relative;
  display:grid; place-items:center;
  width:56px; height:56px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:var(--cts-cyan-300);
}
.faq-aside__avatar svg{ width:28px; height:28px; }
/* Ponto de "tem gente do outro lado", como na referência */
.faq-aside__dot{
  position:absolute; top:1px; right:1px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--cts-cyan-400);
  box-shadow:0 0 0 3px var(--cts-navy-800);
}
/* Copy e CTA ancorados na base do card (Figma 1:1362) */
.faq-aside__copy{
  display:flex; flex-direction:column; gap:.65rem;
  margin-top:auto;
}
.faq-aside__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.35rem, 2.2vw, 1.75rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--white);
}
.faq-aside__text{
  font-size:.98rem;
  line-height:1.55;
  color:var(--text-on-dark);
  text-wrap:pretty;
}

/* Estado ativo no dropdown — marca a solução da página atual */
.dropdown-list a.is-current{ background:var(--page-alt); }
.dropdown-list a.is-current .dropdown-ico{
  border-color:#BFE2F4;
  background:var(--chip);
}
.dropdown-list a.is-current .dropdown-txt b{ color:var(--accent-deep); }
.mobile-sublist a.is-current{ color:var(--accent-deep); font-weight:600; }

/* ============================================================
   PÁGINA DE CONTATO (contato.html)
   Diagramação de iusnatura.com.br/contato: split de tela inteira, sem
   header do site — à esquerda a marca e os dados, à direita o cartão
   do formulário. Cores e tipografia são as do DS da CTS.
   ============================================================ */
.contact-split{
  display:grid;
  grid-template-columns:minmax(0, 45fr) minmax(0, 55fr);
  min-height:100vh;
  min-height:100svh;
}

/* ---------- Painel esquerdo ---------- */
.contact-aside{
  background:var(--page);
  padding:clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3.5rem);
  display:flex;
  justify-content:flex-end;
}
/* A coluna de texto para na mesma medida do conteúdo do site, encostada
   na divisa do split — é isso que alinha os dois painéis. */
.contact-aside__inner{
  width:100%;
  max-width:520px;
  display:flex; flex-direction:column;
  gap:clamp(1.75rem, 3vw, 2.5rem);
}
.contact-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  margin-bottom:clamp(1rem, 3vw, 2.5rem);
}
.back-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.94rem; font-weight:500;
  color:var(--ink-soft);
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.back-link:hover{ color:var(--accent-deep); gap:.65rem; }
.back-link svg{ width:16px; height:16px; }

.contact-aside__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.contact-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2rem, 3.4vw, 3rem);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ink);
}
.contact-lead{
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:46ch;
  text-wrap:pretty;
}

/* Selos de credibilidade */
.contact-marks{ display:flex; flex-direction:column; gap:1rem; }
.contact-mark{ display:flex; gap:12px; align-items:flex-start; }
.contact-mark__ico{
  flex:0 0 28px;
  display:grid; place-items:center;
  width:28px; height:28px;
  border-radius:var(--r-sm);
  background:var(--chip);
  color:var(--accent-deep);
}
.contact-mark__ico svg{ width:17px; height:17px; }
.contact-mark__text{
  font-size:.98rem;
  line-height:1.45;
  color:var(--ink);
  text-wrap:pretty;
}

/* Dados de contato — filete separando do bloco acima, como na referência.
   `margin-top:auto` empurra o bloco para a base da coluna: sem ele o
   conteúdo da esquerda terminava antes do meio da tela e o cartão do
   formulário, centrado, ficava fora do eixo dele. Com o bloco na base, as
   duas colunas passam a dividir o mesmo centro. Em telas estreitas, onde
   a coluna tem a altura do conteúdo, o `auto` vira zero e nada muda. */
.contact-list{
  display:flex; flex-direction:column; gap:1.15rem;
  margin-top:auto;
  padding-top:clamp(1.5rem, 3vw, 2rem);
  border-top:1px solid var(--line);
}
.contact-row{ display:flex; gap:14px; align-items:flex-start; }
.contact-row__ico{
  flex:0 0 40px;
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:var(--r-sm);
  background:var(--white);
  border:1px solid var(--line);
  color:var(--accent-deep);
}
.contact-row__ico svg{ width:20px; height:20px; }
.contact-row__body{ display:flex; flex-direction:column; gap:1px; }
.contact-row__key{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.contact-row__val{
  font-size:1rem;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.contact-row__val:hover{ color:var(--accent-deep); }

/* ---------- Painel direito ---------- */
/* O cartão fica centrado na altura do painel, no mesmo eixo do bloco de
   texto da esquerda. Ancorado no topo (como estava), ele terminava bem
   antes da coluna vizinha e abria um vão na base da tela. */
.contact-main{
  background:var(--page-alt);
  padding:clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3.5rem);
  display:flex;
  align-items:center;
}
.contact-card{
  width:100%;
  max-width:620px;
  display:flex; flex-direction:column; gap:1.75rem;
  padding:clamp(1.75rem, 3.2vw, 2.75rem);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}
.contact-card__head{ display:flex; flex-direction:column; gap:.6rem; }
.contact-card__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.5rem, 2.4vw, 1.9rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
}
.contact-card__lead{
  font-size:1rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}

.contact-form{ display:flex; flex-direction:column; gap:1.25rem; }
/* Grade de dois campos por linha, como na referência */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.field__req{ color:var(--accent-deep); margin-left:2px; }

/* Consentimento (LGPD) — PLACEHOLDER de texto, estrutura da referência */
.consent{ display:flex; align-items:flex-start; gap:.6rem; }
.consent input{
  flex:0 0 auto;
  width:18px; height:18px;
  margin-top:2px;
  accent-color:var(--accent-deep);
}
.consent label{
  font-size:.92rem;
  line-height:1.45;
  color:var(--ink-soft);
}
.consent__note{
  margin-top:-.6rem;
  font-size:.82rem;
  line-height:1.5;
  color:var(--ink-mute);
}
.consent__note a{ color:var(--accent-deep); text-decoration:underline; }

/* ---------- Botão flutuante de WhatsApp (todas as páginas) ----------
   Medidas levantadas em iusnatura.com.br: bolha de 48×48 fixada a 35px da
   direita e 20px da base, raio de pílula e sombra 0 4px 20px rgba(0,0,0,.15).
   No hover ela cresce para 200×56, perde a sombra e revela o rótulo, com o
   ícone recolhido em um disco claro à direita.

   COR: verde do WhatsApp (#25D366) — é a ÚNICA exceção autorizada à paleta
   da CTS em todo o site. O botão precisa ser reconhecido de imediato como
   WhatsApp, e é o reconhecimento da cor que faz isso. Não trocar pelo
   gradiente da marca. */
/* ---------- Flutuante do WhatsApp + painel de contato ----------
   O disco agora mora numa doca fixa junto com o painel, que sobe acima
   dele. Antes o próprio `.wa-float` é que era `position:fixed`; quem
   segura a âncora na tela passa a ser a doca, para o painel e o botão
   se alinharem pela mesma borda. */
.wa-dock{
  position:fixed;
  right:35px;
  bottom:20px;
  z-index:95;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:14px;
}

.wa-float{
  border:0;
  font-family:inherit;
  cursor:pointer;
  display:flex; align-items:center; justify-content:flex-end;
  width:48px; height:48px;
  padding:0;
  border-radius:28px;
  background:#25D366;
  color:var(--white);
  overflow:hidden;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  transition:width .3s var(--ease), height .3s var(--ease),
             padding .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease);
}
.wa-float__label{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  opacity:0;
  transition:opacity .2s var(--ease);
}
.wa-float__ico{
  flex:0 0 48px;
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:var(--r-pill);
  transition:flex-basis .3s var(--ease), width .3s var(--ease),
             height .3s var(--ease), background-color .3s var(--ease);
}
.wa-float__ico svg{ width:26px; height:26px; }

.wa-float:hover,
.wa-float:focus-visible{
  /* A largura anterior (200px) deixava o rótulo encostando no disco do
     ícone — medido: -3px, ou seja, o texto chegava a invadi-lo. Os 220px
     com `gap:12px` abrem uma folga confortável entre os dois. */
  width:220px; height:56px;
  padding:0 6px 0 22px;
  gap:12px;
  box-shadow:none;
  background:#1EBE5B;                /* verde do WhatsApp, um passo mais fundo */
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label{ opacity:1; transition-delay:.08s; }
.wa-float:hover .wa-float__ico,
.wa-float:focus-visible .wa-float__ico{
  flex-basis:44px; width:44px; height:44px;
  background:rgba(255,255,255,.18);
}

/* Com o painel aberto o disco vira "fechar": o rótulo já não cabe, e a
   pastilha não deve mais crescer no hover. */
.wa-float[aria-expanded="true"],
.wa-float[aria-expanded="true"]:hover,
.wa-float[aria-expanded="true"]:focus-visible{
  width:48px; height:48px;
  padding:0; gap:0;
  background:#1EBE5B;
}
.wa-float[aria-expanded="true"] .wa-float__label{ opacity:0; transition-delay:0s; }
.wa-float[aria-expanded="true"] .wa-float__ico{
  flex-basis:48px; width:48px; height:48px;
  background:transparent;
}

/* ---------- Painel ----------
   Cabeçalho no verde da plataforma (a barra é do WhatsApp, não da CTS) e
   corpo no branco do DS, com os campos na mesma escala do formulário de
   fechamento das páginas. */
.wa-panel{
  width:min(340px, calc(100vw - 32px));
  overflow:hidden;
  border-radius:16px;
  background:var(--white);
  box-shadow:0 32px 64px -28px rgba(4, 20, 31, .45);
  animation:wa-in .32s var(--ease);
}
.wa-panel[hidden]{ display:none; }

@keyframes wa-in{
  from{ opacity:0; transform:translateY(12px) scale(.98); }
  to{ opacity:1; transform:none; }
}

.wa-panel__top{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:#25D366;
  color:var(--white);
}
.wa-panel__avatar{
  display:grid; place-items:center;
  flex:0 0 38px;
  width:38px; height:38px;
  overflow:hidden;
  border-radius:50%;
  background:rgba(255,255,255,.2);
}
.wa-panel__avatar img{ width:22px; height:auto; }
.wa-panel__who{ display:flex; flex-direction:column; gap:2px; margin-right:auto; }
.wa-panel__who b{ font-size:.90625rem; font-weight:600; }
.wa-panel__who small{
  display:flex; align-items:center; gap:6px;
  font-size:.71875rem;
  opacity:.92;
}
.wa-panel__who small i{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--white);
}
.wa-panel__close{
  display:grid; place-items:center;
  flex:0 0 26px;
  width:26px; height:26px;
  padding:0; border:0;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:var(--white);
  cursor:pointer;
  transition:background-color .25s var(--ease);
}
.wa-panel__close:hover{ background:rgba(255,255,255,.3); }
.wa-panel__close svg{ width:14px; height:14px; }

.wa-panel__body{ padding:16px; }
/* Fala de abertura, com o canto vivo do lado de quem escreveu */
.wa-panel__bubble{
  padding:12px 14px;
  border-radius:12px 12px 12px 3px;
  background:var(--page-alt);
  font-size:.84375rem;
  line-height:1.5;
  color:var(--ink);
}

.wa-form{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.wa-field{ display:flex; flex-direction:column; gap:5px; }
.wa-field span{
  font-size:.65625rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.wa-field input{
  height:38px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  font-family:inherit;
  font-size:.875rem;
  color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-field input:focus{
  outline:none;
  border-color:#25D366;
  box-shadow:0 0 0 3px rgba(37, 211, 102, .18);
}
/* Reserva a linha do erro: sem isso o painel salta ao validar */
.wa-form__error{
  min-height:16px;
  font-size:.75rem; line-height:16px;
  color:#C0392B;
}
.wa-form__send{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:42px;
  border:0;
  border-radius:10px;
  background:#25D366;
  font-family:inherit;
  font-size:.875rem; font-weight:600; letter-spacing:.02em;
  color:var(--white);
  cursor:pointer;
  transition:background-color .3s var(--ease);
}
.wa-form__send:hover{ background:#1EBE5B; }
.wa-form__send-ico{ display:grid; place-items:center; width:18px; height:18px; }
.wa-form__send-ico svg{ width:18px; height:18px; }

@media (max-width:560px){
  .wa-dock{ right:16px; bottom:16px; }
  .wa-panel{ width:calc(100vw - 32px); }
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width:1020px){
  .main-nav, .header-secondary{ display:none; }
  .hamburger{ display:flex; }
  .header-actions{ margin-left:auto; }

  .hero{ padding:calc(var(--header-h) + 8px) 16px 16px; }
  .hero__content{ padding:32px 28px clamp(40px, 7vh, 72px); gap:28px; }

  .section-head{ grid-template-columns:1fr; align-items:start; }

  .journeys{ grid-template-columns:1fr; }
  .journeys-cta{ flex-direction:column; align-items:flex-start; gap:1.75rem; padding:32px; }
  .results-grid{ grid-template-columns:1fr; }

  /* ---- Página CTS Cadastro ---- */
  /* Hero: o visual de produto desce para baixo do texto */
  .hero--split .hero__stage{ min-height:0; }
  .hero--split .hero__content{ grid-template-columns:1fr; align-items:start; }
  .hero__product{ justify-content:flex-start; }
  .prodcard{ max-width:none; }

  /* Sintomas: a abertura vira uma faixa acima da pilha e larga o sticky;
     o baralho de cards continua, agora em uma coluna só. */
  .symptoms-split{ grid-template-columns:1fr; }
  .symptoms-intro__in{ position:static; }

  /* Os passos seguem em 3 colunas: a trilha é uma sequência de três e
     quebrá-la em 2+1 deixaria um card órfão no fim do fluxo. Os cards
     ainda cabem com folga nesta largura. */
  .perks{ grid-template-columns:repeat(2, 1fr); }

  /* A faixa empilha: foto acima, painel de cor abaixo */
  .midcta{ grid-template-columns:1fr; min-height:0; }
  .midcta__panel{ border-radius:0 0 var(--r-xl) var(--r-xl); }
  .midcta__media{
    order:-1;
    height:clamp(200px, 34vw, 280px);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
  }
  /* FAQ empilhado: o acordeão sobe e o card de apoio fecha a seção */
  .faq{ grid-template-columns:1fr; gap:clamp(1.75rem, 4vw, 2.5rem); }
  .faq-aside{ order:1; min-height:0; }
  .faq-aside__copy{ margin-top:0; }

  /* Fechamento: a foto passa a ser uma faixa acima do formulário */
  .cta-split{ grid-template-columns:1fr; }
  .cta-media{ order:-1; min-height:0; height:clamp(200px, 34vw, 300px); }

  /* ---- Página de Contato ---- */
  /* O split vira empilhado: primeiro a promessa e os dados, depois o
     formulário. A altura mínima de tela sai de cena. */
  .contact-split{ grid-template-columns:1fr; min-height:0; }
  .contact-aside{ justify-content:center; }
  .contact-aside__inner{ max-width:640px; }
  .contact-main{ justify-content:center; }
  .contact-card{ max-width:640px; }

  /* Hub: o diagrama não cabe em três colunas — vira duas fileiras de
     dois com o núcleo no meio. Sem a grade de três colunas as ligações
     perdem o sentido, então linhas, conectores e luzes saem de cena. */
  .hub{ gap:clamp(2.5rem, 6vw, 60px); }
  .hub__stage{ min-height:0; padding:40px 24px; }
  .hub__grid-lines{ display:none; }
  .hub__beams{ display:none; }
  .hub-node::after{ display:none; }
  .hub__diagram{ gap:32px; }
  .hub__row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    justify-items:stretch;
    gap:12px;
    max-width:none;
  }
  .hub-node a{ height:auto; min-height:39px; }
  .hub-node__label{ white-space:normal; }
  /* Empilhado, todos os nós ficam com o ícone à esquerda. `row-reverse`
     inverte a ordem do DOM; `flex-end` traz o conteúdo de volta para o
     começo da linha. */
  .hub-node--end a{ flex-direction:row-reverse; justify-content:flex-end; }
  .hub-node--end .hub-node__ico{ border-left:0; border-right:1px solid rgba(228,228,231,.16); }
  .hub-node--end .hub-node__label{ padding-left:18px; padding-right:12px; }
  .hub__notes{ grid-template-columns:1fr 1fr; }

  .voices__head{ flex-direction:column; align-items:flex-start; }
  /* A grade de colunas mora no grupo, não no mural: os dois grupos têm
     5 logos, então continuam com a mesma altura ao quebrar em linhas. */
  .logo-slide{ grid-template-columns:repeat(3, 1fr); }

  /* Origem: o painel deixa de flutuar sobre a foto e empilha embaixo dela */
  .origin{ min-height:0; }
  /* Empilhado, o bloco da foto volta ao fluxo — sem o zoom por inset,
     que aqui vazaria por cima do painel em vez de ser cortado. */
  .origin__media{ position:relative; inset:auto; height:clamp(240px, 42vw, 380px); }
  .origin__ph{ left:28px; bottom:auto; top:24px; }
  .origin__media img{ filter:brightness(.88) saturate(.9) contrast(1.02); }
  /* Empilhado, o véu não precisa mais sustentar texto branco por cima:
     vira só um rebaixe leve que costura a foto com o painel. */
  .origin__veil{
    inset:0 0 auto;
    height:clamp(240px, 42vw, 380px);
    opacity:1;
    background:linear-gradient(to bottom, rgba(4,20,31,.28), rgba(4,20,31,.72));
  }
  .origin__panel{
    position:relative;
    inset:auto;
    width:auto; max-width:none;
    margin:16px;
    padding:32px;
  }

  .cta-panel{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .header-actions .btn-ghost{ display:none; }

  .hero{ padding:calc(var(--header-h) + 8px) 12px 12px; }
  .hero__stage{ min-height:480px; border-radius:14px; }
  .hero__content{ padding:28px 20px 40px; gap:24px; }
  .hero__title{ letter-spacing:-.02em; }
  .pill-cta{ width:100%; justify-content:space-between; gap:16px; }
  /* Exceção: no header a pílula divide a barra com a marca e o
     hambúrguer, então continua compacta — e o respiro da barra encolhe
     para os três caberem. */
  .header-inner{ gap:.5rem; }
  .header-actions .pill-cta{
    width:auto;
    gap:12px;
    height:48px;
    padding:4px 4px 4px 16px;
    justify-content:flex-start;
  }
  .header-actions .pill-cta__icon{ width:40px; height:40px; }

  /* A marca segue ao lado do texto: com bullet, empilhar quebraria a leitura */
  .journey-row{ gap:10px; }
  .journeys-cta{ padding:26px; }

  .credibility{ grid-template-columns:repeat(2, 1fr); gap:.7rem; }
  .cred-pill{ padding:1.05rem 1.15rem; }
  .cred-pill--wide{ grid-column:1 / -1; }

  .hub__row{ grid-template-columns:1fr; }
  .hub__notes{ grid-template-columns:1fr; }
  .voice{ flex:0 0 100%; min-height:0; padding:28px; }
  .voices__track{ gap:16px; }
  .logo-slide{ grid-template-columns:repeat(2, 1fr); }
  .logo-cell{ min-height:88px; }
  .logo-cell img{ max-height:52px; }
  .origin__panel{ margin:12px; padding:24px; }
  .origin__panel .pill-cta{ gap:12px; }
  .footer-grid{ grid-template-columns:1fr; }

  /* ---- Página CTS Cadastro ---- */
  /* Em tela estreita o baralho sai de cena: com o card ocupando quase a
     altura toda da janela, o empilhamento esconderia o conteúdo em vez de
     conduzir a leitura. Os cards voltam ao fluxo normal. */
  .symptom{ position:static; flex-direction:column; align-items:flex-start; gap:20px; padding:24px; }
  .symptom__media{ flex:0 0 auto; width:100%; height:150px; }
  /* Aqui a trilha empilha e o conector horizontal sai de cena */
  .steps{ grid-template-columns:1fr; }
  .step:not(:last-child)::after{ display:none; }
  /* O toggle encolhe para caber na coluna: com o respiro e o corpo de
     tela cheia o trilho passaria dos 356px e estouraria a lateral. */
  .steps-tab{ padding-inline:14px; font-size:.875rem; }
  .perks{ grid-template-columns:1fr; }
  .perk--anchor{ grid-column:auto; }
  .perk--wide{ grid-column:auto; }
  .midcta__panel .pill-cta{ width:100%; }
  .prodrow__key{ flex:0 0 76px; }
  .faq-item__panel p{ padding-right:0; }
  .faq-item__btn{ gap:1rem; }

  /* ---- Página de Contato ---- */
  .form-grid{ grid-template-columns:1fr; }

  /* WhatsApp: a bolha encolhe e chega mais perto do canto */
  .wa-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .wa-float__ico{ flex-basis:52px; width:52px; height:52px; }
  .wa-float:hover,
  .wa-float:focus-visible{ width:214px; height:52px; padding:0 4px 0 20px; gap:12px; }
  .wa-float:hover .wa-float__ico,
  .wa-float:focus-visible .wa-float__ico{ flex-basis:44px; width:44px; height:44px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }

  /* Luzes do hub: som e movimento contínuos saem de cena */
  .hub__beams{ display:none; }
  .hub-core::before{ display:none; }

  /* Hero: sem animação de entrada — vai direto ao estado final. */
  .hero.is-anim .hero__reveal,
  .hero.is-anim .hero__media-in,
  .hero.is-anim .hero__title,
  .hero.is-anim .hero__lead,
  .hero.is-anim .hero__actions{ opacity:1; transform:none; }
}

/* ============================================================
   7 — PÁGINAS INTERNAS (blocos novos)
   Bloco aditivo: só componentes que ainda não existiam. Nenhuma regra
   daqui para baixo redefine seletor já usado pela Home, pelo CTS
   Cadastro ou pelo Contato — as páginas prontas seguem intactas.
   ============================================================ */

/* ---------- 7.1 Segurança e metodologia (CTS Revisão) ----------
   Cartão de foto à esquerda e o argumento à direita. A proporção é a
   mesma do fechamento (.cta-split), para o par de blocos ler como a
   mesma família. */
.safety{
  display:grid;
  grid-template-columns:minmax(0, 468fr) minmax(0, 728fr);
  gap:clamp(1.5rem, 3.3vw, 40px);
  align-items:stretch;
}
.safety__media{
  position:relative;
  overflow:hidden;
  min-height:420px;
  border-radius:var(--r-xl);
  background:var(--cts-navy-950);
}
.safety__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Corte à direita do quadro: a mesa e o laptop ocupam a base, e o
     recorte alto deixaria só parede. */
  object-position:52% 38%;
  /* Rebaixe leve, como no resto das fotos do site (DS, seção 06) */
  filter:brightness(.92) saturate(.94) contrast(1.03);
}
/* Faixa de apoio sobreposta à foto (Digitação). O texto assenta na base
   do quadro sobre um véu que escurece só a parte de baixo da imagem —
   é ele que segura o contraste, independentemente da foto que entrar. */
.safety__media--noted{ display:flex; align-items:flex-end; }
.safety__scrim{
  position:absolute; inset:auto 0 0 0;
  height:78%;
  background:linear-gradient(to top, rgba(4,20,31,.92) 12%, rgba(4,20,31,.72) 42%, rgba(4,20,31,0));
  pointer-events:none;
}
.safety__note{
  position:relative;
  display:flex; gap:14px; align-items:flex-start;
  width:100%;
  padding:clamp(1.25rem, 2.4vw, 1.75rem);
  color:var(--white);
}
.safety__note-ico{
  flex:0 0 32px;
  display:grid; place-items:center;
  width:32px; height:32px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:var(--cts-cyan-300);
}
.safety__note-ico svg{ width:19px; height:19px; }
.safety__note-text{
  font-size:.98rem;
  line-height:1.5;
  color:var(--text-on-dark);
  text-wrap:pretty;
}
.safety__note-text .link-arrow{ color:var(--cts-cyan-300); }

.safety__body{ display:flex; flex-direction:column; justify-content:center; }
.safety__body .block-head{ margin-bottom:clamp(1.5rem, 3vw, 2rem); }

/* Contraste: o risco de um lado, o método da CTS do outro. O lado da
   CTS é o card navy do DS — a mesma ênfase da âncora dos diferenciais. */
.contrast{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-bottom:clamp(1.5rem, 3vw, 2rem);
}
.contrast__card{
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column; gap:.85rem;
  padding:clamp(1.35rem, 2.2vw, 1.75rem);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--white);
}
.contrast__ico{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:var(--r-sm);
}
.contrast__ico svg{ width:24px; height:24px; }
.contrast__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.125rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}
.contrast__text{
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}
/* O lado do risco fica em cinza: presente, mas sem competir com a marca */
.contrast__card--risk{ background:var(--page-alt); }
.contrast__card--risk .contrast__ico{
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink-mute);
}
.contrast__card--cts{ background:var(--cts-grad-navy); border-color:transparent; }
.contrast__card--cts::after{
  content:""; position:absolute; inset:auto auto -40% -15%;
  width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(25,184,236,.24), transparent 68%);
  pointer-events:none;
}
.contrast__card--cts > *{ position:relative; z-index:1; }
.contrast__card--cts .contrast__ico{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--cts-cyan-300);
}
.contrast__card--cts .contrast__title{ color:var(--white); }
.contrast__card--cts .contrast__text{ color:var(--text-on-dark); }

/* ---------- Contraste em coluna cheia (Revisão) ----------
   Sem a foto ao lado, o bloco herda o padrão das "Duas jornadas" da Home:
   cabeçalho centralizado e dois cards grandes dividindo a largura toda.
   O respiro interno e a escala de texto sobem para a dos .journey — o
   card deixa de ser um apoio e passa a ser o argumento da seção. */
.safety--full{ grid-template-columns:1fr; }
.safety--full .journeys-head{ margin-bottom:clamp(2rem, 4vw, 3.25rem); }

.contrast--wide{ gap:16px; }
.contrast--wide .contrast__card{
  gap:clamp(1rem, 1.8vw, 1.35rem);
  padding:clamp(1.85rem, 3.6vw, 3.5rem);
}
.contrast--wide .contrast__ico{ width:52px; height:52px; }
.contrast--wide .contrast__ico svg{ width:28px; height:28px; }
.contrast--wide .contrast__title{ font-size:clamp(1.35rem, 2.2vw, 1.75rem); }
.contrast--wide .contrast__text{ font-size:1.0625rem; line-height:1.55; max-width:44ch; }

@media (max-width:720px){
  .contrast--wide{ grid-template-columns:1fr; }
}

/* As duas credenciais fecham o bloco lado a lado (na página de Contato
   elas empilham, porque a coluna lá é estreita). */
.safety .contact-marks{ flex-direction:row; flex-wrap:wrap; gap:24px; }
/* Na versão em coluna cheia elas ficam centradas sob os dois cards, como
   um par — sem o `flex:1` que, na largura toda, as jogaria para os
   extremos da linha. */
.safety--full .contact-marks{ justify-content:center; gap:clamp(1.5rem, 4vw, 3rem); }
.safety--full .contact-mark{ flex:0 1 auto; }
.safety .contact-mark{ flex:1 1 260px; }

/* ---------- 7.2 Nota de rodapé de seção ----------
   Observação técnica que qualifica a grade acima sem virar mais um card. */
.note-band{
  display:flex; gap:16px; align-items:flex-start;
  margin-top:16px;
  padding:clamp(1.15rem, 2vw, 1.4rem) clamp(1.35rem, 2.2vw, 1.75rem);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--white);
}
.note-band__ico{
  flex:0 0 32px;
  display:grid; place-items:center;
  width:32px; height:32px;
  border-radius:var(--r-sm);
  background:var(--chip);
  color:var(--accent-deep);
}
.note-band__ico svg{ width:19px; height:19px; }
/* Faixa que abre uma seção (CTS Monitoramento · Reforma): o respiro vai
   para baixo, entre a faixa e o bloco que vem depois. */
.note-band--lead{ margin:0 0 clamp(2rem, 4vw, 3rem); }
.note-band--lead .note-band__text strong{ color:var(--ink); font-weight:600; }
.note-band__text{
  font-size:.98rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* ---------- Grade com destaque lateral ----------
   Medida em iusnatura.com.br/cal/guardiao (bloco "Como funciona"): três
   colunas iguais; os cards de tópico caem em 2×2 nas duas primeiras e o
   card de destaque ocupa a terceira inteira, alto como as duas fileiras
   somadas. O destaque vem PRIMEIRO no HTML (é a ideia-chave da seção e
   deve ser lida antes por leitor de tela); a colocação explícita na
   grade é que o joga para a direita. */
.perks--aside{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
}
.perks--aside .perk--anchor{
  grid-column:3;
  grid-row:1 / span 2;
  padding:clamp(1.9rem, 3vw, 2.6rem);
  gap:1rem;
}
.perks--aside .perk--anchor .perk__title{ font-size:clamp(1.25rem, 2vw, 1.5rem); }
.perks--aside .perk--anchor .perk__text{ font-size:1rem; }
/* O CTA fecha o card, colado na base */
.perks--aside .perk--anchor .pill-cta{ margin-top:auto; align-self:flex-start; }

@media (max-width:1020px){
  /* Duas colunas: os tópicos seguem em 2×2 e o destaque passa a ocupar a
     linha inteira abaixo deles, em vez de virar uma coluna estreita. */
  .perks--aside{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .perks--aside .perk--anchor{ grid-column:1 / -1; grid-row:auto; }
}
@media (max-width:720px){
  .perks--aside{ grid-template-columns:1fr; }
}

/* ---------- Grade de tópicos com foto alta ao lado ----------
   Medida na seção "Benefícios" de onegreen.com.br: três colunas iguais;
   os cards de tópico caem em 2×2 nas duas primeiras e a foto ocupa a
   terceira inteira, alta como as duas fileiras somadas. A foto é um
   `figure` fora da `ul` — ela não é mais um item da enumeração. */
.perks-media{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  align-items:stretch;
}
.perks-media .perks--pair{
  grid-column:span 2;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
/* Em duas colunas os quatro tópicos têm o mesmo peso: o card de destaque
   não pode herdar o `span 2` da âncora, senão a grade vira três fileiras
   e a foto ao lado perde a altura de referência. */
.perks-media .perks--pair .perk--anchor{ grid-column:auto; }
.perks-media .perks--pair .perk--anchor .perk__title{ font-size:1.125rem; }
.perks-media__figure{
  position:relative;
  overflow:hidden;
  min-height:320px;
  border-radius:var(--r-xl);
  background:var(--cts-navy-950);
}
.perks-media__figure img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 42%;
  /* Rebaixe leve, como no resto das fotos do site (DS, seção 06) */
  filter:brightness(.92) saturate(.94) contrast(1.03);
}

@media (max-width:1020px){
  /* A foto passa a fechar a largura toda, abaixo dos cards */
  .perks-media{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .perks-media .perks--pair{ grid-column:1 / -1; }
  .perks-media__figure{ grid-column:1 / -1; min-height:240px; }
}
@media (max-width:720px){
  .perks-media .perks--pair{ grid-template-columns:1fr; }
}

/* ---------- 7.3 Grade de enquadramento ----------
   Nos diferenciais a âncora ocupa duas colunas; aqui os quatro cards são
   pares de leitura (regime, porte, setor, geografia) e precisam da mesma
   largura, senão o último fica órfão na segunda fileira. */
.perks--even .perk--anchor{ grid-column:auto; }
.perks--even .perk--anchor .perk__title{ font-size:1.125rem; }

@media (max-width:1020px){
  /* Segurança: a foto vira uma faixa acima do argumento */
  .safety{ grid-template-columns:1fr; }
  .safety__media{ order:-1; min-height:0; height:clamp(220px, 36vw, 320px); }
}

@media (max-width:720px){
  .contrast{ grid-template-columns:1fr; }
  .safety .contact-marks{ flex-direction:column; gap:1rem; }
}

/* ---------- 7.4 Cartão de cruzamento (CTS Análise) ----------
   Mesma moldura do cartão de ficha do CTS Cadastro (.prodcard, que a peça
   também carrega): aqui as linhas ganham duas colunas — a base do
   supermercado e a base da CTS, lado a lado. É o produto explicado em
   forma, sem inventar dado técnico: as barras continuam mascaradas. */
.crosscard{ max-width:440px; }
.crossrows{ display:flex; flex-direction:column; }
.crossrow{
  display:grid;
  grid-template-columns:minmax(0, 88px) minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
  gap:12px;
  padding-block:13px;
  border-bottom:1px solid var(--line);
}
/* Cabeçalho das colunas: nomeia as duas bases, sem filete embaixo */
.crossrow--head{
  padding-block:0 8px;
  border-bottom:0;
  font-size:.6875rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.crossrow__key{
  font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.crossrow__cell{ display:flex; align-items:center; gap:8px; }
/* PLACEHOLDER visual, como no .prodrow__val--mask: descrição, NCM e
   tributação são dado técnico real e não são inventados. */
.crossrow__bar{
  height:10px;
  width:var(--mask-w, 70%);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--cts-mist), var(--cts-cloud));
}
/* A coluna da CTS é a corrigida: entra na cor da marca */
.crossrow__bar--ok{
  background:linear-gradient(90deg, #BFE2F4, var(--chip));
}
.crossrow__mark{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:.8125rem; font-weight:700;
  color:var(--ink-mute);
}
/* A linha divergente é a razão de ser do cruzamento: fica marcada */
.crossrow--diff{ background:rgba(25,184,236,.06); }
.crossrow--diff .crossrow__key{ color:var(--accent-deep); }
.crossrow__mark--diff{ color:var(--accent-deep); }

/* ---------- 7.5 Grade de três ----------
   Sequência "antes · aqui · depois": três cards de mesma largura, com o
   do meio no card navy do DS. */
.perks--trio{ grid-template-columns:repeat(3, 1fr); }
.perks--trio .perk--anchor{ grid-column:auto; }
.perks--trio .perk--anchor .perk__title{ font-size:1.125rem; }
/* O link de saída fica colado na base do card, para os três alinharem */
.perks--trio .perk .link-arrow{ margin-top:auto; }
.perks--trio .perk .link-arrow svg{ width:16px; height:16px; }

/* ---------- Trio com card de destaque (página de solução) ----------
   Na Análise o card do meio é o próprio produto da página, e não uma
   ponte como os vizinhos. Ele sai da linha dos outros dois pelas margens
   negativas — cresce para cima e para baixo sem alterar a altura da
   grade — ganha respiro interno maior e fecha com o CTA da página. */
.perks--feature .perk--anchor{
  margin-block:calc(-1 * var(--feature-lift, 34px));
  padding:clamp(1.9rem, 3vw, 2.6rem);
  gap:1rem;
  box-shadow:0 26px 60px -32px rgba(4, 20, 31, .6);
}
.perks--feature .perk--anchor .perk__title{ font-size:clamp(1.25rem, 2vw, 1.5rem); }
.perks--feature .perk--anchor .perk__text{ font-size:1rem; }
/* O CTA fecha o card, como o link-arrow fecha os vizinhos */
.perks--feature .perk--anchor .pill-cta{ margin-top:auto; align-self:flex-start; }

/* Abaixo de 1020px o trio vira 2 colunas e o card de destaque volta a
   ocupar a linha inteira: o realce por margem negativa só faz sentido
   com os três lado a lado. */
@media (max-width:1020px){
  .perks--feature .perk--anchor{ margin-block:0; box-shadow:none; }
}

@media (max-width:1020px){
  .perks--trio{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:720px){
  .perks--trio{ grid-template-columns:1fr; }
  .crossrow{ grid-template-columns:minmax(0, 72px) minmax(0, 1fr) minmax(0, 1fr); gap:8px; }
}

/* ---------- 7.6 Recorte alternativo do hero ----------
   A caixa do hero é bem mais deitada que as fotos (2,5:1 contra 16:9),
   então o `cover` corta na VERTICAL — só o eixo Y do object-position tem
   efeito. Nas fotos em que o rosto cai na borda de cima do corte padrão,
   este modificador desce o enquadramento para o plano de trabalho. */
.hero--low .hero__media img{ object-position:50% var(--hero-y, 54%); }
/* Cada página afina o ponto do corte pela sua foto, com --hero-y no
   próprio <section> — o padrão de 54% serve à maioria. */

/* ---------- 7.7 Cartão de ciclo (CTS Monitoramento) ----------
   Mesma moldura do cartão de ficha do CTS Cadastro (.prodcard, que a peça
   também carrega). O que muda é o miolo: em vez de linhas de campo, uma
   linha do tempo — a base reconferida ciclo a ciclo. É o argumento da
   solução (tempo) dito em forma. */
.cyclecard{ max-width:420px; }
.cyclerows{ display:flex; flex-direction:column; }
.cyclerow{
  position:relative;
  display:grid;
  grid-template-columns:20px minmax(0, 1fr);
  align-items:center;
  gap:16px;
  padding-block:15px;
}
/* Trilho: o filete que liga um ciclo ao seguinte sai do ponto e desce
   até o próximo. O último não tem para onde ir, então não desenha. */
.cyclerow__rail{
  position:relative;
  display:grid; place-items:center;
  width:20px; height:20px;
}
.cyclerow:not(:last-child) .cyclerow__rail::after{
  content:"";
  position:absolute;
  top:16px; left:50%;
  width:1px; height:34px;
  transform:translateX(-50%);
  background:var(--line);
}
.cyclerow__dot{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--cts-mist);
  border:2px solid var(--cts-mist);
}
.cyclerow__body{ display:flex; flex-direction:column; gap:8px; }
.cyclerow__key{
  font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
/* PLACEHOLDER visual, como no .prodrow__val--mask: o volume de itens
   reconferidos por ciclo é dado real de cada cliente e não é inventado. */
.cyclerow__bar{
  height:10px;
  width:var(--mask-w, 70%);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--cts-mist), var(--cts-cloud));
}
/* Ciclo atual: é ele que carrega a cor da marca */
.cyclerow--now .cyclerow__dot{
  background:var(--accent);
  border-color:#BFE2F4;
  box-shadow:0 0 0 4px rgba(25,184,236,.14);
}
.cyclerow--now .cyclerow__key{ color:var(--accent-deep); }
.cyclerow--now .cyclerow__bar{ background:linear-gradient(90deg, #BFE2F4, var(--chip)); }
/* Próximo ciclo: ainda não aconteceu, então entra em contorno */
.cyclerow--next .cyclerow__dot{ background:var(--white); border-color:var(--cts-mist); }
.cyclerow--next .cyclerow__bar{ opacity:.55; }

/* ---------- 7.8 Bloco de argumento com a foto invertida ----------
   Mesmo componente da seção "Segurança antes de tudo" (.safety), com as
   colunas trocadas: em páginas seguidas, alternar o lado da foto evita
   que os blocos leiam como a mesma seção repetida. */
.safety--flip{ grid-template-columns:minmax(0, 728fr) minmax(0, 468fr); }
.safety--flip .safety__media{ order:2; }
.safety--flip .safety__body{ order:1; }

@media (max-width:1020px){
  /* Empilhado, a foto volta a ser a faixa de cima nos dois casos */
  .safety--flip{ grid-template-columns:1fr; }
  .safety--flip .safety__media{ order:-1; }
  .safety--flip .safety__body{ order:0; }
}

/* ---------- 7.9 Cartão de ligação (CTS Digitação) ----------
   Mesma moldura do cartão de ficha do CTS Cadastro (.prodcard, que a peça
   também carrega). O miolo aqui são os dois pontos da operação — a loja e
   o time da CTS — com o acesso remoto entre eles. É a solução dita em uma
   imagem: o time não está na loja, mas está dentro do sistema dela. */
.linkcard{ max-width:400px; }
.linkflow{ display:flex; flex-direction:column; }
.linknode{
  display:flex; align-items:center; gap:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
}
.linknode__ico{
  flex:0 0 40px;
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:var(--r-sm);
  background:var(--chip);
  color:var(--accent-deep);
}
.linknode__ico svg{ width:22px; height:22px; }
.linknode__body{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; }
.linknode__key{
  font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute);
}
/* PLACEHOLDER visual, como no .prodrow__val--mask: volume de notas e nome
   de ERP são dado real de cada cliente e não são inventados. */
.linknode__bar{
  height:10px;
  width:var(--mask-w, 70%);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--cts-mist), var(--cts-cloud));
}
/* O nó da CTS é o card navy do DS, como a âncora dos diferenciais */
.linknode--cts{
  background:var(--cts-grad-navy);
  border-color:transparent;
}
.linknode--cts .linknode__ico{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--cts-cyan-300);
}
.linknode--cts .linknode__key{ color:var(--cts-cyan-300); }
.linknode--cts .linknode__bar{ background:linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.08)); }

/* O fio entre os dois nós: tracejado, porque a ligação é remota */
.linkwire{
  position:relative;
  display:grid; place-items:center;
  height:52px;
}
.linkwire::before{
  content:"";
  position:absolute; inset:0 auto;
  left:50%; width:0;
  border-left:1px dashed var(--line);
}
.linkwire__chip{
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  height:28px; padding-inline:11px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
  font-size:.75rem; font-weight:600;
  color:var(--ink-soft);
}
.linkwire__chip svg{ width:15px; height:15px; color:var(--accent-deep); }

/* ---------- 7.10 Par de cards sem contraste ----------
   O componente .contrast também serve quando os dois cards são duas
   SITUAÇÕES, e não uma oposição: sem os modificadores --risk/--cts os
   dois ficam no cartão claro, e o ícone precisa da mesma vestimenta do
   .perk__ico para não sair sem fundo. */
.contrast__ico--plain{
  background:var(--chip);
  color:var(--accent-deep);
}

/* Link dentro de um parágrafo: o componente .link-arrow é um bloco de
   linha própria; nesta forma ele volta a correr no meio do texto. */
.link-arrow--inline{
  display:inline;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- 7.11 Cartão de montagem (CTS Treinamento) ----------
   Mesma moldura do cartão de ficha do CTS Cadastro (.prodcard, que a peça
   também carrega). Aqui o miolo é uma lista de checagem: o que se define
   com o cliente e o programa que sai disso. A forma diz o argumento — o
   treinamento não vem pronto, é montado. */
.checkcard{ max-width:420px; }
.checkrows{ display:flex; flex-direction:column; }
.checkrow{
  display:grid;
  grid-template-columns:22px minmax(0, 1fr);
  align-items:center;
  gap:14px;
  padding-block:13px;
  border-bottom:1px solid var(--line);
}
.checkrow:last-child{ border-bottom:0; }
.checkrow__box{
  display:grid; place-items:center;
  width:22px; height:22px;
  border-radius:7px;
  border:1.5px solid var(--cts-mist);
  background:var(--white);
  color:transparent;
}
.checkrow__box svg{ width:13px; height:13px; }
.checkrow__body{ display:flex; flex-direction:column; gap:8px; }
.checkrow__key{
  font-size:.8125rem; font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
/* PLACEHOLDER visual, como no .prodrow__val--mask: conteúdo, formato e
   duração são definidos com o cliente — não há programa fixo a exibir. */
.checkrow__bar{
  height:10px;
  width:var(--mask-w, 70%);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--cts-mist), var(--cts-cloud));
}
.checkrow__bar--ok{ background:linear-gradient(90deg, #BFE2F4, var(--chip)); }
/* Definido com o cliente: caixa marcada */
.checkrow--done .checkrow__box{
  background:var(--chip);
  border-color:#BFE2F4;
  color:var(--accent-deep);
}
/* A última linha é o RESULTADO da montagem, como o .step--result da
   trilha: filete ciano e fundo um passo mais claro. */
.checkrow--result{
  margin-top:6px;
  padding:13px 12px;
  border-bottom:0;
  border-radius:var(--r-md);
  background:rgba(25,184,236,.08);
  border:1px solid #BFE2F4;
}
.checkrow--result .checkrow__box{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}
.checkrow--result .checkrow__key{ color:var(--accent-deep); }

/* ---------- 7.12 Par argumento + peça (página A CTS) ----------
   Duas colunas de mesmo peso: o texto de um lado, a peça que o ilustra do
   outro. Serve onde o argumento só fica claro quando se vê a estrutura —
   caso do EAN contra o NCM. */
.duo{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.duo__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1.15rem; }
.duo__copy .section-title{ max-width:18ch; }
.duo__visual{ display:flex; justify-content:flex-end; }

/* O apoio de seção nasceu para fundo claro; dentro de .section--dark ele
   precisa do texto sobre escuro do DS. */
.section-support--on-dark{ color:var(--text-on-dark); max-width:52ch; }

/* Marca de igualdade do cartão de cruzamento: onde os dois lados batem,
   o sinal fica em cinza — só a divergência recebe a cor da marca. */
.crossrow__mark{ font-size:.9375rem; }

/* ---------- 7.13 Cobertura geográfica (página A CTS) ----------
   Os estados em que a CTS atua, cada um com a sigla no chip da marca.
   Grade de três para os seis caberem em duas fileiras limpas. */
.geo-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-bottom:clamp(1.25rem, 2.5vw, 1.75rem);
}
.geo-item{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
}
.geo-item__uf{
  flex:0 0 auto;
  display:grid; place-items:center;
  min-width:38px; height:30px;
  padding-inline:8px;
  border-radius:var(--r-sm);
  background:var(--chip);
  font-family:var(--font-display);
  font-weight:700; font-size:.8125rem;
  letter-spacing:.04em;
  color:var(--accent-deep);
}
.geo-item__name{
  font-size:.92rem;
  line-height:1.3;
  color:var(--ink-soft);
  text-wrap:pretty;
}

@media (max-width:1020px){
  .duo{ grid-template-columns:1fr; }
  .duo__visual{ justify-content:flex-start; }
  .geo-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:720px){
  .geo-list{ grid-template-columns:1fr; }
}

/* Item de primeiro nível da navegação na página em que se está.
   O dropdown e o submenu mobile já tinham o seu marcador; faltava este. */
.nav-link.is-current{ color:var(--accent-deep); }

/* ---------- 7.14 Cases (página Cases e resultados) ----------
   PLACEHOLDER ESTRUTURAL. A copy pede a moldura pronta para receber os
   cases reais e proíbe inventar conteúdo: por isso os campos entram
   mascarados, como já acontece no cartão de ficha do CTS Cadastro, e
   cada card carrega uma etiqueta visível de PLACEHOLDER — se alguém
   publicar sem substituir, isso aparece na tela em vez de passar batido. */
.cases{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}
.case{
  display:flex; flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--white);
}
.case__media{
  position:relative;
  height:clamp(180px, 22vw, 240px);
  background:var(--cts-navy-950);
}
.case__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 46%;
  /* Rebaixe mais forte que o das outras fotos: enquanto o case é
     provisório, a imagem não pode competir com a etiqueta. */
  filter:brightness(.62) saturate(.74) contrast(1.02);
}
/* Etiqueta de provisório — mesma linguagem do .origin__ph */
.case__ph{
  position:absolute;
  left:20px; bottom:20px;
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px;
  border:1px dashed rgba(255,255,255,.3);
  border-radius:var(--r-pill);
  background:rgba(4,20,31,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.76);
}
.case__ph svg{ width:15px; height:15px; }

.case__body{
  display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.5rem, 2.6vw, 2rem);
}
.case__kicker{
  font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-deep);
}
.case__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.375rem;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
}
.case__facts{ display:flex; flex-direction:column; }
.case__fact{
  display:flex; flex-direction:column; gap:9px;
  padding-block:14px;
  border-top:1px solid var(--line);
}
.case__fact dt{
  font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.case__fact dd{ display:flex; flex-direction:column; gap:7px; margin:0; }
/* As linhas mascaradas: mesmo tratamento do .prodrow__val--mask */
.case__mask{
  height:10px;
  width:var(--mask-w, 70%);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--cts-mist), var(--cts-cloud));
}
/* A linha do resultado é a que o case existe para dizer: fica na marca */
.case__fact--result dt{ color:var(--accent-deep); }
.case__fact--result .case__mask{
  height:14px;
  background:linear-gradient(90deg, #BFE2F4, var(--chip));
}
.case__note{
  font-size:.85rem;
  line-height:1.45;
  color:var(--ink-mute);
  text-wrap:pretty;
}

/* O mural de logotipos fora da seção do hub não precisa do respiro que
   o separava do diagrama. */
.logos--solo{ margin-top:0; }

@media (max-width:1020px){
  .cases{ grid-template-columns:1fr; }
}

/* ---------- 7.15 Lista de artigos (página Conteúdos) ----------
   PLACEHOLDER ESTRUTURAL, como os cases: a moldura do artigo com os
   campos mascarados e a etiqueta visível de PLACEHOLDER (reaproveitadas
   de .case__ph e .case__mask). Quando houver conteúdo editorial, os
   cards passam a ser gerados com texto real. */
.posts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}
.post{
  display:flex; flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--white);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.post:hover{ transform:translateY(-3px); border-color:#BFE2F4; }
.post__media{
  position:relative;
  height:clamp(150px, 17vw, 186px);
  background:var(--cts-navy-950);
}
.post__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 46%;
  /* Rebaixe mais forte enquanto o card é provisório: a foto não pode
     competir com a etiqueta de placeholder. */
  filter:brightness(.62) saturate(.74) contrast(1.02);
}
.post__body{
  display:flex; flex-direction:column; gap:.8rem;
  padding:clamp(1.35rem, 2.2vw, 1.75rem);
}
.post__cat{
  align-self:flex-start;
  display:inline-flex; align-items:center;
  height:26px; padding-inline:11px;
  border-radius:var(--r-pill);
  background:var(--chip);
  font-size:.75rem; font-weight:600;
  letter-spacing:-.01em;
  color:var(--accent-deep);
}
.post__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1875rem;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--ink);
}
.post__excerpt{ display:flex; flex-direction:column; gap:7px; }
.post__meta{
  margin-top:auto;
  padding-top:.35rem;
  font-size:.8125rem;
  color:var(--ink-mute);
}

/* ============================================================
   Cobertura — estrutura do hero de iusnatura.com.br/onde-atuamos
   ============================================================ */
.section--globe{
  position:relative;
  overflow:hidden;
  /* A seção é mais baixa que uma seção comum: o globo saiu do fluxo e
     deixou de empurrar altura. O respiro de baixo é maior que o de cima
     só para o conteúdo não encostar na curva. */
  padding-block:clamp(56px, 7vw, 88px) clamp(120px, 15vw, 190px);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(25,184,236,.28), rgba(4,20,31,0) 62%),
    linear-gradient(180deg, #0A3450 0%, #062338 55%, #04141F 100%);
}
.section--globe > .container{ position:relative; z-index:1; }
/* Sobre o degradê escuro o chip vira vidro, como na seção de soluções */
.section--globe .chip-label{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:var(--cts-cyan-300);
}

.globe-head{
  display:flex; flex-direction:column; align-items:center;
  gap:1rem;
  text-align:center;
}
.globe-head__title{ max-width:16ch; }
.globe-head__lead{
  max-width:56ch;
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--text-on-dark);
  text-wrap:pretty;
}

/* Estados em pastilhas: na coluna estreita eles eram uma lista; centrados
   numa faixa cheia, viram uma linha de marcadores. */
.geo-chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:660px; margin:.5rem auto 0; /* 7 estados: quebra em 4 + 3, sem um selo órfão */
}
.geo-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding-inline:16px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:.875rem;
  color:var(--text-on-dark);
}
.geo-chip b{
  font-weight:700;
  letter-spacing:.06em;
  color:var(--cts-cyan-300);
}
.globe-head__actions{ margin-top:1rem; }

/* O globo sai do fluxo e vai para trás do conteúdo: assim ele não
   empurra a altura da seção e a calota sobe até atrás do texto, como na
   referência. Ancorado na base e centrado, com a maior parte da esfera
   escondida abaixo do corte da seção. */
.globe{
  position:absolute;
  z-index:0;
  left:50%;
  bottom:calc(-1 * min(600px, 62vw));
  width:min(1040px, 132vw);
  aspect-ratio:1;
  transform:translateX(-50%);
  pointer-events:none;
}
.globe__canvas{ display:block; width:100%; height:100%; }

@media (max-width:720px){
  .globe{ bottom:calc(-1 * 66vw); width:150vw; }
}
/* Sem movimento, o globo fica parado — o main.js confere isso também */
@media (prefers-reduced-motion:reduce){
  .globe__canvas{ opacity:.9; }
}

/* ============================================================
   Reforma Tributária — blocos medidos em iusnatura.com.br/software-aipr
   ============================================================ */

/* Etiqueta em pílula que abre os dois blocos, como na referência */
.pill-label{
  display:inline-flex; align-items:center;
  height:32px; padding-inline:16px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
  font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
}
.pill-label--on-dark{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--cts-cyan-300);
}

/* ---------- "Funcionalidades": abertura em duas colunas ---------- */
.feat-intro{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:16px;
  margin-bottom:16px;
  align-items:stretch;
}
.feat-intro__card{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:1.25rem;
  padding:clamp(1.75rem, 3.4vw, 3rem);
  border-radius:var(--r-xl);
  background:var(--white);
  border:1px solid var(--line);
}
.feat-intro__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.75rem, 3.2vw, 2.5rem);
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:14ch;
  text-wrap:balance;
}
.feat-intro__lead{
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink-soft);
  text-wrap:pretty;
}
.feat-intro__lead strong{ color:var(--ink); font-weight:600; }
.feat-intro__card .btn{ margin-top:auto; }

/* Painel de cor à direita, como na referência */
.feat-intro__visual{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:1rem;
  min-height:280px;
  padding:clamp(1.75rem, 3.4vw, 3rem);
  overflow:hidden;
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 100% at 70% 18%, rgba(25,184,236,.5), rgba(4,20,31,0) 62%),
    linear-gradient(160deg, #0A3450, #04141F);
  color:var(--white);
}
.feat-intro__badge{
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  color:var(--cts-cyan-300);
}
.feat-intro__badge svg{ width:28px; height:28px; }
.feat-intro__badge-text{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.125rem, 2vw, 1.5rem);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--white);
}

/* ---------- "Funcionalidades": fileira de cards ---------- */
.feat-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}
.feat-card{
  display:flex; flex-direction:column; gap:.9rem;
  padding:clamp(1.5rem, 2.4vw, 1.9rem);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--white);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.feat-card:hover{ transform:translateY(-3px); border-color:#BFE2F4; }
.feat-card__check{
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--cts-navy-900, #0A3450);
  color:var(--white);
}
.feat-card__check svg{ width:18px; height:18px; }
.feat-card__title{
  margin-top:.4rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.125rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}
.feat-card__text{
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}
/* A prioridade que a CTS resolve é a tese da página: card navy */
.feat-card--anchor{
  position:relative;
  overflow:hidden;
  background:var(--cts-grad-navy);
  border-color:transparent;
}
.feat-card--anchor::after{
  content:""; position:absolute; inset:auto auto -40% -15%;
  width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(25,184,236,.24), transparent 68%);
  pointer-events:none;
}
.feat-card--anchor > *{ position:relative; z-index:1; }
.feat-card--anchor .feat-card__check{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:var(--cts-cyan-300);
}
.feat-card--anchor .feat-card__title{ color:var(--white); }
.feat-card--anchor .feat-card__text{ color:var(--text-on-dark); }

/* ---------- "Benefícios": cabeçalho com CTA na outra ponta ---------- */
.benef-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.benef-head__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; max-width:52ch; }
.benef-head__title{ max-width:18ch; }
.benef-head__lead{
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--text-on-dark);
  text-wrap:pretty;
}
.benef-head__cta{ flex:0 0 auto; }

/* ---------- "Benefícios": sanfona + cartão ---------- */
.benef-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 420px);
  gap:16px;
  align-items:start;
}
.accordion{
  overflow:hidden;
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
}
.accordion__item + .accordion__item{ border-top:1px solid rgba(255,255,255,.1); }
.accordion__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%;
  padding:clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.75rem);
  border:0;
  background:transparent;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.0625rem;
  line-height:1.3;
  letter-spacing:-.01em;
  text-align:left;
  color:var(--white);
  cursor:pointer;
  transition:background-color .25s var(--ease);
}
.accordion__head:hover{ background:rgba(255,255,255,.05); }
.accordion__chevron{
  flex:none;
  width:18px; height:18px;
  color:var(--cts-cyan-300);
  transition:transform .3s var(--ease);
}
.accordion__head[aria-expanded="true"] .accordion__chevron{ transform:rotate(180deg); }
.accordion__panel{
  padding:0 clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.6rem);
}
.accordion__panel[hidden]{ display:none; }
.accordion__panel p{
  font-size:.9375rem;
  line-height:1.6;
  color:var(--text-on-dark);
  max-width:56ch;
  text-wrap:pretty;
}

.benef-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:1.15rem;
  padding:clamp(1.75rem, 3vw, 2.25rem);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 100% at 80% 10%, rgba(25,184,236,.4), rgba(4,20,31,0) 60%),
    linear-gradient(160deg, #0A3450, #04141F);
  color:var(--white);
}
.benef-card__mark{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  color:var(--cts-cyan-300);
}
.benef-card__mark svg{ width:24px; height:24px; }
.benef-card__quote{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.125rem, 2vw, 1.375rem);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--white);
  text-wrap:pretty;
}
.benef-card__who{ display:flex; flex-direction:column; gap:.15rem; font-size:.875rem; }
.benef-card__who b{ font-weight:600; color:var(--white); }
.benef-card__who span{ color:var(--text-on-dark-soft); }
.benef-card__stats{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-top:.35rem;
}
.benef-card__stats li{
  padding:7px 12px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  font-size:.75rem;
  line-height:1.3;
  color:var(--text-on-dark);
}

@media (max-width:1020px){
  .feat-intro{ grid-template-columns:1fr; }
  .feat-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .benef-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .feat-cards{ grid-template-columns:1fr; }
  .benef-head__cta{ width:100%; justify-content:center; }
}

/* ============================================================
   Listagem de conteúdos — diagramação medida em blog.iusnatura.com.br
   ============================================================ */

/* Página que abre sem hero: o header é fixo, então o primeiro bloco
   precisa reservar a altura dele mais o respiro de topo. */
.section--top{ padding-top:calc(var(--header-h) + clamp(28px, 5vw, 64px)); }

/* ============================================================
   Página de publicação — estrutura medida em blog.iusnatura.com.br
   ============================================================ */

.article-head .container{ max-width:var(--container); }

/* Migalha de pão: onde a pessoa está dentro de Conteúdos */
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-bottom:1.25rem;
  font-size:.8125rem;
  color:var(--ink-mute);
}
.crumbs a{ color:var(--ink-soft); }
.crumbs a:hover{ color:var(--accent-deep); }

.article-title{
  max-width:22ch;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2rem, 4.4vw, 3.25rem);
  line-height:1.12;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
.article-lead{
  margin-top:1.25rem;
  max-width:62ch;
  font-size:1.125rem;
  line-height:1.6;
  color:var(--ink-soft);
  text-wrap:pretty;
}

.article-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  margin-top:1.75rem;
  font-size:.875rem;
  color:var(--ink-soft);
}
.article-meta__who,
.article-meta__date{ display:inline-flex; align-items:center; gap:8px; }
.article-meta__avatar{
  display:grid; place-items:center;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--chip);
  color:var(--accent-deep);
}
.article-meta__avatar svg{ width:17px; height:17px; }
.article-meta__date svg{ width:16px; height:16px; color:var(--ink-mute); }
.article-meta__sep{
  width:4px; height:4px;
  border-radius:50%;
  background:var(--line);
}
.article-meta__read{ color:var(--ink-mute); }

/* Compartilhamento: cada rede na sua cor, como na referência */
.share{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:1.75rem;
}
.share__btn{
  display:inline-flex; align-items:center; gap:9px;
  height:40px; padding-inline:18px;
  border:0;
  border-radius:var(--r-pill);
  font-family:inherit;
  font-size:.8125rem; font-weight:600;
  color:var(--white);
  cursor:pointer;
  transition:filter .25s var(--ease), transform .25s var(--ease);
}
.share__btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.share__btn svg{ width:17px; height:17px; }
.share__btn--wa{ background:#25D366; }
.share__btn--li{ background:#0A66C2; }
.share__btn--fb{ background:#1877F2; }
/* Copiar link é ação neutra: fica no cinza do DS, não numa cor de rede */
.share__btn--copy{
  background:var(--page-alt);
  border:1px solid var(--line);
  color:var(--ink);
}
.share__btn--copy:hover{ filter:none; border-color:#BFE2F4; }

.article-cover{
  position:relative;
  margin:clamp(2rem, 4vw, 3rem) 0 0;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--cts-navy-950);
}
.article-cover img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Enquanto é placeholder, a foto recua para a etiqueta se ler */
.article-cover[data-placeholder] img{ filter:brightness(.62) saturate(.74); }

/* ---------- Corpo em duas colunas ----------
   Índice à esquerda, texto à direita, como na referência. O índice
   acompanha a rolagem — num texto longo é o que evita a volta ao topo. */
.article-body{ padding-top:0; }
.article-grid{
  display:grid;
  grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
  gap:clamp(1.75rem, 4vw, 60px);
  align-items:start;
}
.article-aside{
  display:flex; flex-direction:column; gap:16px;
  position:sticky;
  top:calc(var(--header-h) + 20px);
}
.toc{
  padding:clamp(1.35rem, 2.2vw, 1.6rem);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--white);
}
.toc__title{
  padding-bottom:.85rem;
  margin-bottom:.85rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.0625rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.toc__list{
  display:flex; flex-direction:column; gap:.7rem;
  counter-reset:toc;
  list-style:none;
}
.toc__list li{ counter-increment:toc; }
.toc__list a{
  display:flex; gap:10px;
  font-size:.875rem;
  line-height:1.4;
  color:var(--ink-soft);
}
.toc__list a::before{
  content:counter(toc) ".";
  flex:none;
  font-weight:600;
  color:var(--ink-mute);
}
.toc__list a:hover{ color:var(--accent-deep); }

/* ---------- Texto da publicação ----------
   Único bloco do site cujo HTML vem do editor: a formatação é presa aos
   próprios elementos, sem classe, para o que for publicado já sair
   certo. Medida de leitura presa em ~72ch. */
.prose{ max-width:72ch; color:var(--ink); }
.prose > * + *{ margin-top:1.15rem; }
.prose p{ font-size:1.0625rem; line-height:1.7; color:var(--ink-soft); text-wrap:pretty; }
.prose h2{
  margin-top:clamp(2.25rem, 4vw, 3rem);
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  line-height:1.22;
  letter-spacing:-.02em;
  color:var(--ink);
  /* O índice leva para cá: o alvo não pode parar embaixo do header fixo */
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.prose h3{
  margin-top:clamp(1.75rem, 3vw, 2.25rem);
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.25rem;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--ink);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.prose a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ font-weight:600; color:var(--ink); }
.prose ul, .prose ol{
  display:flex; flex-direction:column; gap:.6rem;
  padding-left:1.35rem;
  font-size:1.0625rem; line-height:1.65;
  color:var(--ink-soft);
}
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li::marker{ color:var(--accent-deep); }
.prose blockquote{
  padding:clamp(1.25rem, 2.4vw, 1.75rem);
  border-left:3px solid var(--accent-deep);
  border-radius:0 var(--r-xl) var(--r-xl) 0;
  background:var(--page-alt);
}
.prose blockquote p{ font-size:1.125rem; line-height:1.6; color:var(--ink); }
.prose blockquote cite{
  display:block;
  margin-top:.75rem;
  font-size:.875rem; font-style:normal;
  color:var(--ink-mute);
}
.prose figure{ margin-block:clamp(1.75rem, 3vw, 2.5rem); }
.prose figure img{
  width:100%;
  /* `height:auto` é obrigatório aqui: sem ele, o atributo `height` do
     `<img>` vale como altura usada e o `aspect-ratio` não governa nada
     — a foto saía com a altura do arquivo (1708px). */
  height:auto;
  /* Quadrada: em 16/9 a foto ficava alta demais dentro da coluna de
     leitura e empurrava o texto para longe. */
  aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--r-xl);
}
.prose figure[data-placeholder] img{ filter:brightness(.72) saturate(.78); }
.prose figcaption{
  margin-top:.7rem;
  font-size:.8125rem;
  color:var(--ink-mute);
}
.prose .note-band{ margin-top:clamp(2rem, 4vw, 2.75rem); }

/* ---------- Blocos próprios da página de case ----------
   A ficha abre o texto em dados (mesma ideia da "Ficha do caso" da
   referência) e o bloco de números fecha o resultado. */
.case-sheet{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--line);
}
.case-sheet > div{
  display:flex; flex-direction:column; gap:.35rem;
  padding:clamp(1rem, 2vw, 1.35rem);
  background:var(--white);
}
.case-sheet dt{
  font-size:.6875rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.case-sheet dd{ font-size:.9375rem; line-height:1.4; color:var(--ink); }

.case-results{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:16px;
  padding-left:0 !important;
  list-style:none !important;
}
.case-results li{
  display:flex; flex-direction:column; gap:.3rem;
  padding:clamp(1.1rem, 2vw, 1.5rem);
  border-radius:var(--r-xl);
  background:var(--cts-grad-navy);
  color:var(--white);
}
.case-results li::marker{ content:none; }
.case-results b{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.375rem, 2.4vw, 1.75rem);
  line-height:1.15;
  letter-spacing:-.02em;
}
.case-results span{ font-size:.875rem; line-height:1.4; color:var(--text-on-dark); }

/* O título do case na listagem também é o link do card */
.case{ position:relative; }
.case__title a{ color:inherit; }
.case__title a::after{ content:""; position:absolute; inset:0; z-index:1; }

@media (max-width:1020px){
  /* O índice sai do lado e vira um bloco antes do texto */
  .article-grid{ grid-template-columns:1fr; }
  .article-aside{ position:static; flex-direction:row; flex-wrap:wrap; }
  .article-aside > *{ flex:1 1 280px; }
}
@media (max-width:720px){
  .article-aside{ flex-direction:column; }
}

/* ---------- Faixa de última atualização ----------
   Equivalente à "ÚLTIMAS ATUALIZAÇÕES" do topo da referência: etiqueta
   à esquerda e a chamada corrida ao lado, num filete de largura toda. */
.ticker{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin-bottom:clamp(1.5rem, 3vw, 2rem);
  padding:8px 8px 8px 8px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
}
.ticker__tag{
  display:inline-flex; align-items:center; gap:8px;
  flex:none;
  height:34px; padding-inline:16px;
  border-radius:var(--r-pill);
  background:var(--cts-grad-navy);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--white);
}
.ticker__tag svg{ width:15px; height:15px; }
.ticker__text{
  display:flex; align-items:center; gap:10px;
  min-width:0;
  padding-right:10px;
  font-size:.9375rem;
  color:var(--ink-soft);
}
.ticker__dot{
  flex:none;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--accent-deep);
}

/* ---------- Destaques: 1 grande + 2 empilhados ----------
   Na referência o bloco de topo divide a largura em 2/3 e 1/3; o card
   grande ocupa as duas fileiras da esquerda e os dois menores empilham
   na direita, com a mesma altura somada. */
.feature-grid{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
  grid-auto-rows:1fr;
  gap:16px;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.feature-card{
  position:relative;
  display:flex; align-items:flex-end;
  min-height:230px;
  overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--cts-navy-950);
  transition:transform .25s var(--ease);
}
.feature-card:hover{ transform:translateY(-3px); }
.feature-card--lead{
  grid-column:1;
  grid-row:1 / span 2;
  min-height:480px;
}
.feature-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 46%;
  /* Rebaixe mais forte enquanto o card é provisório: a foto não pode
     competir com a etiqueta de placeholder. */
  filter:brightness(.62) saturate(.74) contrast(1.02);
}
/* No card de destaque a chamada ocupa a base: a etiqueta de placeholder
   sobe para o topo para não se sobrepor a ela. */
.feature-card .case__ph{ top:20px; bottom:auto; z-index:2; }

/* O véu é o que segura o contraste da chamada sobre qualquer foto */
.feature-card__scrim{
  position:absolute; inset:auto 0 0 0;
  height:82%;
  background:linear-gradient(to top, rgba(4,20,31,.94) 10%, rgba(4,20,31,.66) 46%, rgba(4,20,31,0));
  pointer-events:none;
}
.feature-card__body{
  position:relative;
  display:flex; flex-direction:column; gap:.7rem;
  width:100%;
  padding:clamp(1.35rem, 2.4vw, 1.9rem);
  color:var(--white);
}
/* Os títulos dos cards são o link do card. O ::after estica a área de
   clique sobre o cartão inteiro, para o alvo não ser só a linha de texto. */
.post{ position:relative; }
.post__title a, .feature-card__title a{ color:inherit; }
.post__title a::after, .feature-card__title a::after{
  content:""; position:absolute; inset:0; z-index:1;
}

.feature-card__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1875rem;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--white);
  text-wrap:pretty;
}
.feature-card--lead .feature-card__title{
  font-size:clamp(1.375rem, 2.4vw, 1.875rem);
  max-width:20ch;
}
.feature-card__meta{
  display:flex; flex-wrap:wrap; gap:.5rem;
  font-size:.8125rem;
  color:var(--text-on-dark-soft);
}
/* Etiquetas de categoria sobre a foto */
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  display:inline-flex; align-items:center;
  height:24px; padding-inline:10px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--white);
}
/* Variante sobre fundo CLARO (página de publicação). Precisa vir depois
   da base: as duas têm a mesma especificidade e quem vence é a última. */
.tag-row--ink{ margin-bottom:1.25rem; }
.tag--ink{
  background:var(--chip);
  border-color:transparent;
  color:var(--accent-deep);
}

/* ---------- Faixa de categorias ----------
   Na referência é um carrossel de chips logo abaixo dos destaques. Aqui
   ela rola na horizontal quando não couber, em vez de quebrar em duas
   fileiras. */
.chip-row{
  margin-bottom:clamp(2rem, 4vw, 3rem);
  overflow-x:auto;
  scrollbar-width:none;
}
.chip-row::-webkit-scrollbar{ display:none; }
.chip-row ul{ display:flex; gap:12px; min-width:max-content; }
.chip{
  display:inline-flex; align-items:center;
  height:44px; padding-inline:22px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--white);
  font-size:.9375rem; font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}

/* ---------- Cabeçalho da lista ----------
   Filete de destaque acima do título e, na outra ponta, o atalho da
   listagem — o mesmo arranjo da referência. */
.list-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  margin-bottom:clamp(1.5rem, 3vw, 2rem);
}
.list-head__left{ display:flex; flex-direction:column; gap:.85rem; }
.list-head__dash{
  display:block;
  width:34px; height:4px;
  border-radius:var(--r-pill);
  background:var(--cts-grad-brand);
}
.list-head__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.375rem, 2.4vw, 1.875rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
}

/* ---------- Corpo: grade de cards + coluna de apoio ---------- */
.list-body{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 320px);
  gap:clamp(1.5rem, 2.6vw, 32px);
  align-items:start;
}
/* Dois cards por linha, em vez dos três da grade solta */
.posts--pair{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

.list-aside{ display:flex; flex-direction:column; gap:16px; }
.aside-card{
  padding:clamp(1.35rem, 2.2vw, 1.75rem);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--white);
}
.aside-card__title{
  margin-bottom:1.15rem;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.125rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}
.aside-list{ display:flex; flex-direction:column; gap:1.15rem; }
.aside-item{ display:flex; gap:12px; align-items:flex-start; }
.aside-item__ico{
  flex:0 0 34px;
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:var(--r-sm);
  background:var(--chip);
  color:var(--accent-deep);
}
.aside-item__ico svg{ width:19px; height:19px; }
.aside-item__title{
  font-weight:600;
  font-size:.9375rem;
  line-height:1.3;
  color:var(--ink);
}
.aside-item__text{
  margin-top:.25rem;
  font-size:.875rem;
  line-height:1.45;
  color:var(--ink-soft);
  text-wrap:pretty;
}

/* Card de chamada da coluna — o equivalente ao banner da referência */
.aside-promo{
  position:relative;
  /* flex, e não block: é o que dá altura definida à camada de texto, para
     o `margin-top:auto` do título encostá-lo na base do card — que é
     onde o degradê está mais fechado. */
  display:flex;
  overflow:hidden;
  min-height:260px;
  border-radius:var(--r-xl);
  background:var(--cts-navy-950);
  transition:transform .25s var(--ease);
}
.aside-promo:hover{ transform:translateY(-3px); }
.aside-promo__media{ position:absolute; inset:0; }
.aside-promo__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 22%;
  filter:brightness(.66) saturate(.82) contrast(1.02);
}
.aside-promo__copy{
  position:relative;
  display:flex; flex-direction:column; gap:.55rem;
  flex:1;
  padding:clamp(1.35rem, 2.2vw, 1.6rem);
  background:linear-gradient(to top, rgba(4,20,31,.92) 18%, rgba(4,20,31,.35) 62%, rgba(4,20,31,.1));
  color:var(--white);
}
.aside-promo__kicker{
  font-size:.6875rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cts-cyan-300);
}
.aside-promo__title{
  margin-top:auto;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.0625rem;
  line-height:1.3;
  letter-spacing:-.01em;
  text-wrap:pretty;
}
.aside-promo__link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.875rem; font-weight:600;
  color:var(--cts-cyan-300);
}
.aside-promo__link svg{ width:16px; height:16px; }

@media (max-width:1020px){
  /* A coluna de apoio passa para baixo da lista */
  .list-body{ grid-template-columns:1fr; }
  .list-aside{ flex-direction:row; flex-wrap:wrap; }
  .list-aside > *{ flex:1 1 280px; }
}
@media (max-width:860px){
  /* Os destaques deixam de ser 2/3 + 1/3 e viram uma coluna só */
  .feature-grid{ grid-template-columns:1fr; }
  .feature-card--lead{ grid-column:auto; grid-row:auto; min-height:320px; }
}
@media (max-width:720px){
  .posts--pair{ grid-template-columns:1fr; }
  .list-aside{ flex-direction:column; }
}

/* ---------- 7.16 Estado vazio ----------
   O que a listagem mostra enquanto não há nada publicado. Moldura
   pontilhada, como o .placeholder-slot, mas com a ação junto: o visitante
   que chegou procurando resposta sai com um caminho, e não com um vazio. */
.empty-state{
  display:flex; align-items:center; gap:clamp(1rem, 2.5vw, 1.75rem);
  flex-wrap:wrap;
  margin-top:24px;
  padding:clamp(1.5rem, 3vw, 2.25rem);
  border:1px dashed #B9CBDA;
  border-radius:var(--r-xl);
  background:var(--white);
}
.empty-state__ico{
  flex:0 0 48px;
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:var(--r-md);
  background:var(--chip);
  color:var(--accent-deep);
}
.empty-state__ico svg{ width:26px; height:26px; }
.empty-state__copy{ flex:1 1 320px; display:flex; flex-direction:column; gap:.4rem; }
.empty-state__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1875rem;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}
.empty-state__text{
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
}
.empty-state .pill-cta{ flex:0 0 auto; }

@media (max-width:1020px){
  .posts{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:720px){
  .posts{ grid-template-columns:1fr; }
  .empty-state .pill-cta{ width:100%; }
}

/* ---------- 7.17 Cartão de alíquotas (Reforma Tributária) ----------
   Mesma moldura do cartão do CTS Cadastro (.prodcard, que a peça também
   carrega). Diferença importante: aqui os valores são REAIS e publicados
   (as alíquotas simbólicas do período), então aparecem como número — e
   não como barra mascarada, que é o tratamento reservado ao dado que a
   CTS não pode inventar. */
.ratecard{ max-width:400px; }
.raterows{ display:flex; flex-direction:column; }
.raterow{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:16px;
  border-bottom:1px solid var(--line);
}
.raterow:last-child{ border-bottom:0; }
.raterow__key{ display:flex; flex-direction:column; gap:3px; }
.raterow__sigla{
  font-family:var(--font-display);
  font-weight:700; font-size:.9375rem;
  letter-spacing:.02em;
  color:var(--ink);
}
.raterow__nome{
  font-size:.75rem;
  line-height:1.3;
  color:var(--ink-mute);
}
.raterow__val{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.75rem;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--accent-deep);
}
/* Selo neutro: "fase de testes" é estado, não conformidade — não pode
   usar o mesmo verde-azul de aprovação dos outros cartões. */
.prodcard__seal--neutral{
  background:var(--page-alt);
  border-color:var(--line);
  color:var(--ink-soft);
}

/* ---------- 7.18 Linha do tempo (Reforma Tributária) ----------
   A copy traz o calendário como tabela de duas colunas. Em tabela a data
   some no meio do texto, e é ela que manda nesta seção: por isso vira
   linha do tempo, com a data em destaque e o trilho ligando os marcos. */
.timeline{ display:flex; flex-direction:column; }
.tl-item{
  position:relative;
  display:grid;
  grid-template-columns:24px minmax(0, 1fr);
  gap:20px;
  padding-block:20px;
}
.tl-item__rail{
  position:relative;
  display:grid; place-items:center;
  width:24px; height:24px;
}
/* O trilho sai do ponto e desce até o próximo; o último não desenha */
.tl-item:not(:last-child) .tl-item__rail::after{
  content:"";
  position:absolute;
  top:18px; left:50%;
  width:1px; height:calc(100% + 40px - 18px);
  transform:translateX(-50%);
  background:var(--line);
}
.tl-item__dot{
  width:12px; height:12px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--cts-steel);
}
.tl-item__body{ display:flex; flex-direction:column; gap:.4rem; }
.tl-item__date{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.0625rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
.tl-item__text{
  font-size:.98rem;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:pretty;
  max-width:64ch;
}
.tl-item__tag{
  display:inline-flex; align-items:center;
  height:22px; padding-inline:9px;
  border-radius:var(--r-pill);
  background:var(--page-alt);
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-mute);
}
/* Marcos já decorridos: leitura do calendário, não juízo sobre a
   situação de ninguém. Ficam presentes, mas em segundo plano. */
.tl-item--past .tl-item__date{ color:var(--ink-mute); }
.tl-item--past .tl-item__dot{ background:var(--cts-mist); border-color:var(--cts-mist); }
/* Próximo marco: é para onde a página quer que se olhe */
.tl-item--next .tl-item__dot{
  background:var(--accent);
  border-color:#BFE2F4;
  box-shadow:0 0 0 4px rgba(25,184,236,.14);
}
.tl-item__tag--next{
  background:var(--chip);
  border-color:#BFE2F4;
  color:var(--accent-deep);
}

/* Crédito de fonte — vive abaixo de dado de terceiro (AGAS, RFB, CGIBS) */
.source-note{
  margin-top:1.25rem;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--ink-mute);
  text-wrap:pretty;
}

/* ---------- 7.19 Variações de grade ----------
   Cinco frentes em uma fileira só: os títulos são curtos e a leitura
   "são cinco" é parte do argumento. */
.steps--five{ grid-template-columns:repeat(5, 1fr); }
/* As pílulas de número em duas colunas, quando dividem a largura com
   uma foto ao lado em vez de ocupar a seção inteira. */
.credibility--duo{
  grid-template-columns:repeat(2, 1fr);
  margin-bottom:clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (max-width:1020px){
  .steps--five{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:720px){
  .steps--five{ grid-template-columns:1fr; }
  .credibility--duo{ grid-template-columns:1fr; }
  .tl-item{ grid-template-columns:20px minmax(0, 1fr); gap:14px; }
}

/* A linha do tempo mora na coluna direita do split de coluna presa; o
   primeiro marco alinha com o topo do título, sem o respiro que o
   padding de item daria. */
.timeline-col{ padding-top:4px; }
.timeline-col .timeline > .tl-item:first-child{ padding-top:0; }

/* ============================================================
   7.20 — Ajustes out/2026
   Tudo o que a rodada de ajustes do cliente pediu de novo. Fica no fim
   do arquivo, depois das media queries do bloco original de cada
   componente, para que as variações compactas vençam sem precisar de
   !important nem de seletor por id.
   ============================================================ */

/* ---------- CTA de chamada direta ----------
   Os rótulos canônicos da rodada são frases inteiras ("QUERO SABER O
   IMPACTO DA REFORMA NO MEU SUPERMERCADO"), e não cabem em uma linha.
   A variação --long solta a altura fixa e deixa o rótulo quebrar,
   mantendo altura mínima, raio, cor e peso do botão padrão do DS. */
.btn--long{
  height:auto;
  min-height:56px;
  padding-block:.9rem;
  white-space:normal;
  line-height:1.3;
  font-size:.9375rem;
  text-align:center;
  text-wrap:balance;
  max-width:100%;
}
.pill-cta--long{
  height:auto;
  min-height:56px;
  align-items:center;
  gap:16px;
  max-width:100%;
}
.pill-cta--long .pill-cta__label{
  padding-block:.7rem;
  font-size:.9375rem;
  line-height:1.3;
  text-wrap:balance;
}
/* O quadrado da seta não acompanha a altura do rótulo em duas linhas */
.pill-cta--long .pill-cta__icon{ flex:0 0 48px; }

/* Faixa de ação centrada abaixo de um bloco de texto */
.block-cta{
  display:flex; justify-content:center;
  margin-top:clamp(2rem, 4vw, 2.75rem);
}
/* Abertura de lista dentro de uma seção ("Envie sua base e descubra:") */
.block-lead{
  margin-bottom:clamp(1.25rem, 2.5vw, 1.75rem);
  text-align:center;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.0625rem;
  letter-spacing:-.01em;
  color:var(--ink);
}
/* Apoio de bloco com texto mais longo que o padrão de 44ch */
.block-head--wide .section-support{ max-width:64ch; }

/* ---------- Sintomas na Home ----------
   Mesmo baralho da página CTS Cadastro (.symptoms-split / .symptom), em
   versão compacta: a Home traz 8 itens, e cada item é uma frase inteira
   em vez de título + apoio. O ícone encolhe, o padding fecha, e o degrau
   de 15px do baralho segue até o oitavo card — sem isso, do sexto em
   diante eles se cobririam por inteiro. */
/* O título desta seção tem de cair em TRÊS linhas no desktop (pedido do
   cliente em 08/10). Quem manda no número de linhas aqui é a largura da
   COLUNA, não o max-width em ch: a coluna é mais estreita que qualquer
   valor em ch que se escrevesse, então o ch nunca chegava a valer.
   Medido com a frase real em Space Grotesk — a 390px ela quebra em 4
   linhas; 430px devolve 3 linhas em toda a faixa de corpo do título no
   desktop (48px a 37px, de 1440px a 1021px). Os 40px a mais saem da
   coluna dos cards, que encolhe de 736 para 722px dentro do container
   de 1216px — diferença que não muda o baralho. */
.symptoms-split--compact{ grid-template-columns:minmax(0, 430px) minmax(0, 736px); }
.symptoms-split--compact .symptoms-intro .section-title{
  max-width:none;
  /* Com a largura fixando 3 linhas, o balance só distribui melhor as
     palavras entre elas — não muda a contagem. */
  text-wrap:balance;
}
.symptoms--compact{ gap:16px; }
.symptoms--compact .symptom{ gap:24px; padding:24px; }
.symptoms--compact .symptom__media{
  flex:0 0 92px;
  width:92px; height:92px;
}
.symptoms--compact .symptom__media svg{ width:40px; height:40px; }
.symptoms--compact .symptom__title{
  font-size:clamp(1.02rem, 1.5vw, 1.1875rem);
  line-height:1.3;
}
.symptom:nth-child(6){ top:calc(var(--header-h) + 115px); }
.symptom:nth-child(7){ top:calc(var(--header-h) + 130px); }
.symptom:nth-child(8){ top:calc(var(--header-h) + 145px); }

/* ---------- Numeração das etapas na sanfona (página da Reforma) ----------
   As seis etapas são um processo, então a ordem precisa aparecer. A
   sanfona não tem slot de número: ele entra no próprio rótulo, em accent
   e um ponto menor que o título, para não competir com ele. */
.accordion__num{
  color:var(--cts-cyan-300);
  font-variant-numeric:tabular-nums;
  margin-right:.15rem;
}

/* ---------- Linha do tempo em 4 fases (página da Reforma) ----------
   O rótulo-verbo manda na leitura; as datas e as fontes canônicas ficam
   como subtexto de cada fase. */
.tl-item__phase{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
.tl-item--past .tl-item__phase{ color:var(--ink-mute); }
.tl-sub{
  display:flex; flex-direction:column; gap:.4rem;
  margin-top:.5rem;
  padding-left:14px;
  border-left:1px solid var(--line);
  max-width:64ch;
}
.tl-sub li{
  font-size:.875rem;
  line-height:1.5;
  color:var(--ink-mute);
  text-wrap:pretty;
}
.tl-sub b{ font-weight:600; color:var(--ink-soft); }

@media (max-width:640px){
  /* No mobile o baralho vira pilha (.symptom fica estático) e o bloco
     visual ocupa a largura do card — a versão compacta acompanha, com
     altura menor que a dos cards da página CTS Cadastro. */
  .symptoms--compact .symptom__media{
    flex:0 0 auto;
    width:100%; height:112px;
  }
  .block-cta .btn--long,
  .block-cta .pill-cta--long{ width:100%; }
}

/* ============================================================
   7.21 — Dois layouts de seção vindos da referência Ius Natura
   (ajustes 08/10/2026, a pedido do cliente)
   ============================================================ */

/* ---------- Faixa com foto sangrada e bloco sobreposto ----------
   Medido na seção "Os melhores profissionais do mercado em requisitos
   legais" de iusnatura.com.br/cal: a foto ocupa a largura inteira da
   tela, sem container, e um cartão branco de canto arredondado se
   sobrepõe a ela, preso a um dos lados da área útil.

   Diferença nossa: na referência o cartão fica à direita e a cena viva
   da foto, à esquerda. Aqui é o contrário — o corredor de gôndolas tem o
   ponto de fuga à direita, então o cartão entra à esquerda, onde a foto
   já é mais escura, e a profundidade fica visível ao lado dele.

   O véu NÃO é decoração: é o que garante contraste de texto sobre uma
   foto clara e cheia de embalagem colorida. */
.section--bleed{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--cts-navy-950);
  padding-block:clamp(88px, 11vw, 148px);
}
.bleed-media{ position:absolute; inset:0; z-index:-1; }
.bleed-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  /* Mesmo rebaixe do hero: sem filtro azul sobre a cena (DS, seção 06) */
  filter:brightness(.6) saturate(.8) contrast(1.06);
}
.bleed-media__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(4,20,31,.86) 0%, rgba(4,20,31,.5) 46%, rgba(4,20,31,.28) 72%, rgba(4,20,31,.52) 100%),
    radial-gradient(70% 90% at 76% 10%, rgba(25,184,236,.16), transparent 64%);
}
.bleed-card{
  width:min(100%, 560px);
  background:var(--white);
  border-radius:var(--r-xl);
  padding:clamp(1.75rem, 3.4vw, 2.75rem);
  box-shadow:0 24px 60px rgba(4,20,31,.28);
}
.bleed-card .chip-label{ margin-bottom:1rem; }
.bleed-card .section-title{ margin-bottom:1rem; }
.bleed-card .section-support{ max-width:none; }

/* ---------- Seção partida: foto de um lado, conteúdo do outro ----------
   Pedido do cliente a partir da Ius ("imagem de um lado e conteúdo do
   outro"). A foto vem primeiro na ordem do documento porque no mobile,
   onde as colunas viram pilha, ela abre a seção — igual ao resto do
   site, em que a cena entra antes do argumento. */
.split-media{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(2rem, 4.5vw, 4rem);
  align-items:center;
}
.split-media__fig{
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:4 / 5;
  background:var(--cts-navy-950);
}
.split-media__fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.split-media__body{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:1rem;
}
.split-media__body .section-support{ max-width:48ch; }
/* O CTA desta seção não é centralizado como o dos blocos de cabeçalho:
   ele segue o alinhamento à esquerda da coluna de texto. */
.split-media__body .block-cta{
  justify-content:flex-start;
  margin-top:clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (max-width:900px){
  /* Pilha: a foto perde altura para não empurrar o texto tela abaixo. */
  .split-media{ grid-template-columns:1fr; gap:clamp(1.5rem, 4vw, 2rem); }
  .split-media__fig{ aspect-ratio:16 / 10; }
  .bleed-card{ width:100%; }
}

/* ============================================================
   7.22 — Ajustes 08/10/2026 (2ª validação do Gustavo)
   ============================================================ */

/* ---------- Depoimentos reais: altura natural por card ----------
   Os seis depoimentos do cliente têm tamanhos muito diferentes — o mais
   longo tem cinco parágrafos, o mais curto tem três linhas. Com o
   alinhamento esticado do flex, TODOS os cards herdariam a altura do
   maior, e o card curto ficaria com meio metro de vazio embaixo.
   Aqui cada card fica do tamanho do seu texto, com o mesmo piso de 389px
   do desenho original. Vale só na Home: em cases.html os depoimentos
   ainda são placeholders de tamanho parecido. */
.voices__track--natural .voice{ align-self:flex-start; }

/* ---------- Eyebrows padronizados na Home e na Reforma ----------
   Pedido do cliente (08/10): usar como modelo único o rótulo das seções
   "Hub de soluções para o seu negócio" e "Depoimentos" — a pílula branca
   com filete (.chip-label). Na Home e em reforma-tributaria.html não
   existe mais .eyebrow nem .pill-label: os três estilos que conviviam
   (eyebrow azul, eyebrow--caps cinza em caixa alta e pill-label) viraram
   um só. As demais páginas seguem com .eyebrow até alguém pedir o
   contrário — por isso as duas famílias continuam no CSS.

   Sobre fundo escuro o chip vira vidro, como já fazia no Hub, com texto
   branco: é a combinação de maior contraste disponível sem introduzir
   uma cor nova. */
/* O chip é inline-flex, mas como FILHO DE FLEX em coluna ele herda
   align-self:stretch e se estica na largura toda da coluna — invisível
   enquanto o rótulo era .eyebrow (sem borda), gritante agora que tem
   filete. Fixar a largura no conteúdo desliga o stretch sem brigar com
   os contêineres que centralizam (ali o align-items já resolve). */
.chip-label{ width:fit-content; }
.chip-label--on-dark{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  color:var(--white);
}
/* A coluna de abertura dos sintomas não usa gap: o rótulo precisa do
   próprio respiro, como o .eyebrow tinha ali. */
.symptoms-intro .chip-label{ margin-bottom:1rem; }

/* ---------- CTAs de seção: todos com a seta padrão ----------
   Pedido do cliente (08/10) para a Home: os CTAs que eram .btn (sem
   seta) passaram a ser o mesmo componente de pílula dos demais. O
   .journey .btn prendia o botão no rodapé do card; a pílula precisa da
   mesma regra. */
.journey .pill-cta{ margin-top:auto; align-self:flex-start; }
/* Dentro do cartão da faixa sangrada o CTA ganha o respiro do apoio. */
.bleed-card__cta{ margin-top:clamp(1.25rem, 2.4vw, 1.75rem); }

/* ============================================================
   7.23 — Ajustes 08/10/2026 (3ª validação do Gustavo)
   Item 2 do "Alterações Site CTS.docx": a lista "Consultoria em
   Reforma Tributária para supermercados" entra na seção partida da
   Home, entre o apoio e o CTA.
   ============================================================ */

/* A lista reaproveita o componente dos cards de jornada. Lá as cores
   vêm do contexto (.journey--primary / --secondary); solto aqui, o
   filete do .journey-row cairia em currentColor — um traço escuro e
   cheio entre as linhas. Estas três regras dão a ele o mesmo
   tratamento de fundo claro que ele tem dentro do card cinza. */
.split-media__body .journey-row{ border-color:rgba(14,27,36,.14); }
.split-media__body .journey-row__mark{ color:var(--accent-deep); }
/* Sem o título acima dela (retirado a pedido do Gustavo em 08/10), a
   lista encosta direto no parágrafo de apoio: o gap de 1rem da coluna
   mais o padding de 16px da primeira linha já dão o respiro, e o filete
   de abertura ganha um pouco mais de ar para não virar sublinhado do
   parágrafo. */
.split-media__body .journey__list{ margin-top:.5rem; }

/* Com a lista, a coluna de texto passa a ser MAIS ALTA que a foto, que
   estava travada em 4/5 e centralizada — sobrava vazio acima e abaixo
   dela. A foto passa a acompanhar a altura do texto (é o que a
   referência da Ius faz), com um piso para não achatar quando a coluna
   de texto for curta; o object-fit:cover cuida do enquadramento.

   [ARMADILHA, medida em 08/10] o aspect-ratio TEM de sair junto com o
   stretch. Mantido, ele passa a derivar a LARGURA da altura esticada
   (981px → 785px de largura numa coluna de 600px) e a foto invade a
   coluna de texto. Pelo mesmo motivo o piso de altura não pode valer na
   pilha do mobile, onde o 16/10 continua: 420px de piso viravam 672px
   de largura numa tela de 390px. Daí o escopo em min-width:901px, que
   deixa o empilhado exatamente como estava. */
@media (min-width:901px){
  .split-media{ align-items:stretch; }
  .split-media__fig{ aspect-ratio:auto; min-height:clamp(420px, 42vw, 620px); }
}

/* ============================================================
   7.24 — Hero da Home com a arte de banner do cliente (09/10/2026)
   ============================================================ */

/* O tratamento padrão do .hero existe para domar FOTO: rebaixa o brilho,
   dessatura e joga um véu forte por cima, porque as fotos de banco são
   cenas de loja claras. A arte entregue pelo cliente
   (bg_hero_banner.png) é o oposto: já nasce em navy, com a metade
   esquerda deliberadamente vazia para receber o texto e um brilho ciano
   próprio. Aplicar o tratamento de foto nela apagaria o desenho — as
   fichas de produto e o banco de dados somem. Daí este modificador, que
   só vale na Home e deixa as outras páginas intactas. */
/* [MEDIDO 09/10] o palco do hero é MUITO mais panorâmico que a arte nas
   telas reais: proporção 2,0 a 2,4 contra 1,78 da arte. Com `cover` isso
   cortava de 12% a 26% na vertical — até 95px só na base, levando embora
   o chão refletido e a base do banco de dados. (O headless não mostrava:
   ele reporta uma `svh` maior que a da janela de verdade, e no screenshot
   o palco saía em 1362x860, proporção 1,58. Conferir corte de hero em
   janela simulada, não na altura padrão do headless.)

   Em vez de cortar, a arte foi ALARGADA para 2,40:1 em
   bg_hero_banner-wide.jpg: o vazio da esquerda é um gradiente puramente
   vertical (variação horizontal de 1 a 6 por canal nos primeiros 120px),
   então estendê-lo não tem emenda visível — 1,42/255 de diferença na
   junção. O original fica no projeto, intocado.

   Ancorada à DIREITA: a composição (fichas, banco de dados, gôndolas)
   nunca é cortada, em nenhuma proporção de palco entre 1,78 e 2,40; o
   que sobra para cortar é sempre o vazio estendido, que é justamente
   onde o texto se apoia. */
.hero--art .hero__media img{
  object-position:100% 50%;
  filter:none;
}
/* [09/10] A arte 02 veio SEM o filtro chapado — e isso inverteu o
   problema. O lado esquerdo, onde o texto se apoia, deixou de ser navy
   quase preto e virou loja clara: medido no arquivo, os pontos mais
   claros sob o bloco do título dão 1,7:1 de contraste com o branco, longe
   dos 4,5:1 da AA. Sem rebaixe o texto fica ilegível.

   A saída não é voltar ao filtro sobre a imagem inteira, que foi o que
   incomodou. O rebaixe é DIRECIONAL: forte na faixa esquerda, onde mora o
   texto, e zerado antes dos dois terços — toda a composição (fichas,
   banco de dados, gôndolas, reflexos do chão) fica intocada e com o
   brilho que a arte nova trouxe. */
.hero--art .hero__veil{
  background:
    linear-gradient(to right,
      rgba(4,20,31,.74) 0%, rgba(4,20,31,.68) 26%, rgba(4,20,31,.44) 44%,
      rgba(4,20,31,.15) 58%, rgba(4,20,31,0) 72%),
    linear-gradient(to top,
      rgba(4,20,31,.40) 0%, rgba(4,20,31,.10) 36%, rgba(4,20,31,0) 62%);
}
/* A arte traz o próprio brilho de marca; o spotlight do DS viraria uma
   segunda fonte de luz disputando com ela. */
.hero--art .hero__glow{ background:none; }

/* Título do hero da Home em TRÊS linhas no desktop (pedido do cliente,
   09/10). Escopado aqui de propósito: o `.hero__title` é compartilhado
   pelos heros das outras 13 páginas, que têm frases de outro tamanho —
   mexer na regra global mudaria a quebra de todas elas.

   [ARMADILHA] a medida TEM de ser em `em`, não em px. O corpo é
   clamp(2.15rem, 4vw, 4rem), isto é, escala com a tela; uma caixa em px
   fica para trás e a contagem de linhas muda sozinha conforme a
   resolução — com os 720px de antes a frase dava 3 linhas em 1440, mas 4
   em 1920 e 2 em 1100. Em `em` a caixa acompanha o corpo.

   Varredura medida em 1280 / 1366 / 1440 / 1600 / 1920: de 12em a 15em
   dá 3 linhas em todas; 11,25em cai para 4 e 16em sobe para 2. 13.5em
   fica no meio da faixa, longe das duas bordas. Abaixo de ~900px o corpo
   começa a travar no mínimo e a caixa passa da largura da tela — ali
   vale a largura disponível e a quebra é a do mobile, como antes. */
.hero--art .hero__title{ max-width:13.5em; }
/* [09/10, 2ª correção] a caixa em `em` media 3 linhas em 1280/1366/1440/
   1600/1920, mas na tela do Gustavo em 1920 saíam 4 — e, reduzindo a
   janela, voltavam 3. Não reproduzi o caso aqui, e a quebra automática
   depende de coisas que não dá para fixar à distância (arredondamento do
   corpo, fonte carregada na hora da medida, zoom do navegador). Em vez de
   recalibrar o número no escuro, as três linhas passaram a ser explícitas
   no HTML. A caixa em `em` fica como rede para o trecho entre 901px e o
   desktop largo. */
@media (min-width:901px){
  .hero--art .hero__title-line{ display:block; }
  /* com as linhas em bloco a caixa não tem mais o que fazer; quem limita é
     a coluna útil, bem mais larga que a maior das três linhas */
  .hero--art .hero__title{ max-width:none; }
}

/* A arte é 16:9 e guarda o vazio à esquerda e os grafismos à direita.
   Num palco retrato (mobile) o `cover` corta tudo menos uma fatia
   central estreita — justamente a fatia dos grafismos, que vão parar
   atrás do título e do apoio. Medido em 500px: o banco de dados caía em
   cima da linha "cadastro de produtos pode estar fazendo você pagar".

   Em vez de empurrar o enquadramento para o vazio (o que apagaria o
   conceito no celular), a arte vira textura: fica um pouco mais à
   direita, onde a cena de loja é mais rica, e o véu passa a um rebaixe
   quase chapado, que devolve o contraste ao texto sem escurecer tudo. */
@media (max-width:720px){
  /* 70% da arte LARGA equivale ao antigo 58% da original (o original
     ocupa de 26% a 100% da arte estendida). */
  .hero--art .hero__media img{ object-position:70% 50%; }
  .hero--art .hero__veil{
    background:linear-gradient(to top,
      rgba(4,20,31,.90) 0%, rgba(4,20,31,.70) 42%, rgba(4,20,31,.46) 100%);
  }
}

/* ============================================================
   7.25 — Aviso dos formulários (out/2026, conversão WordPress)

   Esta seção NÃO existe na versão estática do site: ela nasceu com o
   envio de verdade. O formulário recarrega a página com ?cts=ok ou
   ?cts=erro, e é esta faixa que diz o que aconteceu.

   As cores saem das variáveis do DS, sem valor novo. O papel de alerta
   (role="status") é quem avisa o leitor de tela; a cor é reforço, nunca
   a única pista — por isso o texto diz o que houve por extenso.
   ============================================================ */

.form-aviso {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: .95rem;
  line-height: 1.45;
}

.form-aviso--ok {
  background: rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .35);
  color: #065f46;
}

.form-aviso--erro {
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .32);
  color: #991b1b;
}

/* Campo obrigatório vazio no momento do envio. */
.cta-form .is-invalid,
.contact-form .is-invalid {
  border-color: rgba(220, 38, 38, .6);
}

/* Em faixa escura (o CTA final da Home e das páginas de solução) o texto
   escuro do aviso sumiria no fundo. */
.section--cta .form-aviso,
.cta-band .form-aviso {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}