:root {
  --cor-primaria: #E8573F;
  --cor-secundaria: #F2894A;
  --cor-destaque: #F5B841;
  --cor-fundo: #FAF6F0;
  --cor-texto: #1E1E1E;
}

/* ============================================================
   HIGH LEVEL — Tema da agência
   Paleta: coral/laranja/ouro + creme/grafite (DNA v1.0)
   Tipografia: Sora (display) + Inter (corpo) + JetBrains Mono (dados)
   ============================================================ */

/* As variáveis --cor-primaria, --cor-secundaria, --cor-destaque,
   --cor-fundo e --cor-texto são injetadas pelo build a partir de site.json */

/* Fontes self-hosted (performance + LGPD) — servidas de /fontes/, sem Google Fonts */
@font-face { font-family:'Sora'; font-style:normal; font-weight:300; font-display:swap; src:url('/fontes/sora-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:400; font-display:swap; src:url('/fontes/sora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('/fontes/sora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('/fontes/sora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:800; font-display:swap; src:url('/fontes/sora-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fontes/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:italic; font-weight:400; font-display:swap; src:url('/fontes/inter-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fontes/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fontes/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fontes/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fontes/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  /* Paleta estendida */
  --coral:         #B83A26;  /* coral funcional, AA em qualquer fundo claro (creme e creme-dark) */
  --coral-vivo:    #E8573F;  /* coral vibrante — só para acentos de texto GRANDE (passa 3:1) */
  --coral-dark:    #A5341F;  /* hover / estados */
  --coral-soft:    #FBE8E3;
  --laranja:       #F2894A;
  --laranja-soft:  #FDEEDF;
  --ouro:          #F5B841;
  --ouro-soft:     #FDF3DC;
  --ouro-dark:     #D99A1F;
  --creme:         #FAF6F0;
  --creme-dark:    #F1EAE0;
  --linha:         #E8E1D7;
  --grafite:       #1E1E1E;
  --grafite-800:   #2A2A2A;
  --grafite-700:   #3D3D3D;
  --cinza:         #6B6B6B;
  --cinza-forte:   #5F5F5F;  /* texto secundário sobre creme-dark: --cinza fica em 4.46, abaixo do AA */
  --cinza-claro:   #A9A29A;

  /* Tipografia */
  --fonte-display: 'Sora', system-ui, sans-serif;
  --fonte-corpo:   'Inter', system-ui, sans-serif;
  --fonte-mono:    'JetBrains Mono', monospace;

  /* Sistema */
  --raio-sm:     8px;
  --raio:        12px;
  --raio-lg:     18px;
  --raio-pill:   999px;
  --transicao:   .22s cubic-bezier(0.16, 1, 0.3, 1);
  --sombra:      0 8px 24px rgba(30, 30, 30, .10);

  /* z-index semântico */
  --z-nav:      40;
  --z-mobile:   41;
  --z-whatsapp: 50;
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(72px + 2rem); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--coral); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

body {
  font-family: var(--fonte-corpo);
  color: var(--grafite);
  background: var(--creme);
  line-height: 1.65;
  font-size: 1rem;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  color: var(--grafite);
  text-wrap: balance;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* ---- Acessibilidade ---- */
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 3px;
}
.pular-conteudo {
  position: absolute; left: -9999px; top: 0;
  background: var(--grafite); color: var(--creme);
  padding: .6rem 1rem; z-index: 60; font-family: var(--fonte-display);
}
.pular-conteudo:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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

/* ---- Layout ---- */
.container { max-width: 1200px; margin: 0 auto; padding-inline: 2rem; }
.secao { padding-block: 5.5rem; }

/* Compatibilidade com templates do motor */
.regua { display: none; }
.centro { text-align: center; }

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.hl-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(250, 246, 240, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.hl-nav-inner {
  max-width: 1200px; margin: 0 auto; padding-inline: 2rem;
  height: 72px; display: flex; align-items: center; gap: 8px;
  position: relative;
}
.hl-logo { display: flex; align-items: center; text-decoration: none; }
.hl-logo img { height: 34px; width: 101px; display: block; }
.hl-logo-texto {
  font-family: var(--fonte-display); font-weight: 800;
  font-size: 1.2rem; color: var(--grafite); letter-spacing: -0.02em;
}
.hl-links {
  display: flex; align-items: center; gap: 2px; margin-left: auto;
}
.hl-links a {
  font-size: .9rem; font-weight: 500;
  color: var(--grafite); text-decoration: none;
  padding: 8px 14px; border-radius: var(--raio-pill);
  transition: background var(--transicao), color var(--transicao);
}
.hl-links a:hover {
  background: var(--creme-dark); text-decoration: none; color: var(--grafite);
}
.hl-cta-nav {
  background: var(--coral) !important;
  color: var(--creme) !important;
  font-family: var(--fonte-display) !important;
  font-weight: 600 !important;
  margin-left: 8px !important;
  padding: 10px 20px !important;
}
.hl-cta-nav:hover {
  background: var(--coral-dark) !important;
  color: var(--creme) !important;
}

/* Burger mobile */
.menu-toggle { display: none; }
.hl-burger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 40px; height: 40px; margin-left: auto;
  cursor: pointer; padding: 10px; border-radius: var(--raio-sm);
}
/* :not(.sr-only) porque o label ganhou uma quarta <span>, com o texto que dá
   nome ao botão de menu. Sem a exclusão, ela receberia as 2px de altura e o
   fundo das barras e apareceria como um risco extra. As três barras seguem
   sendo os filhos 1, 2 e 3, então os :nth-child da animação continuam valendo. */
.hl-burger span:not(.sr-only) {
  display: block; height: 2px; background: var(--grafite);
  border-radius: 2px; transition: transform .2s, opacity .2s;
}

@media (max-width: 860px) {
  .hl-burger { display: flex; }
  .hl-links {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(250, 246, 240, .98);
    border-bottom: 1px solid var(--linha);
    padding: 8px 24px 16px; z-index: var(--z-mobile);
  }
  .hl-links a { padding: 13px 8px; border-radius: 0; border-bottom: 1px solid var(--linha); font-size: .95rem; }
  .hl-links a:last-child { border-bottom: none; }
  /* No mobile o CTA sai do menu: o botão flutuante de WhatsApp já cobre a conversão. */
  .hl-cta-nav { display: none !important; }
  .menu-toggle:checked ~ .hl-links { display: flex; }
  .menu-toggle:checked ~ .hl-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle:checked ~ .hl-burger span:nth-child(2) { opacity: 0; }
  .menu-toggle:checked ~ .hl-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   HERO (home)
   ============================================================ */
.hl-hero {
  padding: 5.5rem 0 4.5rem;
  overflow: hidden;
}
.hl-hero-grid {
  max-width: 1200px; margin: 0 auto; padding-inline: 2rem;
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 4rem; align-items: center;
}
.hl-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.06;
}
.hl-hero h1 em {
  font-style: normal; color: var(--coral-vivo);
}
/* Linha de campanha do DNA v1.1 — "99% IA. 100% Sênior.", números em ouro.
   Vive sobre grafite: o ouro da marca não alcança 3:1 sobre o creme, e
   escurecê-lo até passar deixaria de ser ouro. Sobre grafite dá 9,4:1. */
.hl-campanha {
  display: inline-flex; align-items: baseline;
  font-family: var(--fonte-mono); font-weight: 500;
  font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
  letter-spacing: .04em; line-height: 1;
  color: var(--creme); background: var(--grafite);
  border-radius: var(--raio-pill);
  padding: .625rem 1.125rem;
  margin-bottom: 1.5rem;
}
.hl-campanha strong { color: var(--ouro); font-weight: 700; }
.hl-hero-sub {
  font-size: 1.125rem; color: var(--cinza);
  margin-top: 1.25rem; max-width: 44ch;
  line-height: 1.6; text-wrap: pretty;
}
.hl-hero-foto { position: relative; }
.hl-hero-foto img {
  width: 100%; border-radius: var(--raio-lg);
  display: block; aspect-ratio: 4/5;
  object-fit: cover; object-position: 60% center;
}
.hl-hero-foto::after {
  content: "";
  position: absolute; top: 20px; left: -20px; right: 20px; bottom: -20px;
  border: 1.5px solid var(--ouro); border-radius: var(--raio-lg); z-index: -1;
}

@media (max-width: 860px) {
  .hl-hero { padding-top: 3rem; padding-bottom: 3rem; }
  .hl-hero-grid { grid-template-columns: 1fr; gap: 2rem; padding-inline: 1.5rem; }
  .hl-hero-foto::after { display: none; }
  /* Foto no mobile: formato wide, corte simétrico em cima e embaixo. */
  .hl-hero-foto img { aspect-ratio: 3/2; object-position: center 25%; }
}

/* ============================================================
   STATS BAND
   ============================================================ */
.hl-stats {
  background: var(--grafite); color: var(--creme);
  margin-top: 5.5rem;
}
.hl-stats-inner {
  max-width: 1200px; margin: 0 auto; padding: 3rem 2rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.hl-stat-valor {
  font-family: var(--fonte-mono); font-weight: 500;
  font-size: 1.75rem; color: var(--ouro); display: block;
}
.hl-stat-rotulo {
  font-size: .8rem; color: var(--cinza-claro);
  margin-top: .3rem; display: block; line-height: 1.4;
}

@media (max-width: 860px) {
  .hl-stats-inner {
    grid-template-columns: repeat(3, 1fr);
    padding: 2.5rem 1.5rem;
  }
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.hl-manifesto {
  padding: 8rem 0;
}
.hl-manifesto-inner {
  max-width: 900px; margin: 0 auto; padding-inline: 2rem;
  text-align: center;
}
.hl-manifesto p {
  font-family: var(--fonte-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--grafite);
}
.hl-manifesto strong { font-weight: 800; }
.hl-manifesto .hl-destaque { color: var(--coral-vivo); }

@media (max-width: 640px) {
  .hl-manifesto { padding: 5.5rem 0; }
  .hl-manifesto-inner { padding-inline: 1.5rem; }
}

/* ============================================================
   MÉTODO (4 etapas)
   ============================================================ */
.hl-metodo {
  background: var(--creme-dark);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 6.5rem 0;
}
.hl-metodo-cabeca {
  max-width: 1200px; margin: 0 auto 4rem; padding-inline: 2rem;
}
.hl-metodo-cabeca h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.025em;
}
.hl-metodo-cabeca p {
  font-size: 1.0625rem; color: var(--cinza-forte);
  margin-top: .875rem; max-width: 56ch; line-height: 1.6;
}
.hl-metodo-steps {
  max-width: 1200px; margin: 0 auto; padding-inline: 2rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.hl-step {
  border-left: 1.5px solid var(--grafite);
  padding: 4px 1.75rem 4px 1.5rem;
}
.hl-step-num {
  font-family: var(--fonte-mono); font-size: .7rem;
  color: var(--coral); display: block; margin-bottom: .875rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.hl-step-titulo {
  font-family: var(--fonte-display); font-weight: 600;
  font-size: 1.125rem; color: var(--grafite);
}
.hl-step-desc {
  font-size: .875rem; color: var(--cinza-forte);
  margin-top: .625rem; line-height: 1.6;
}

@media (max-width: 900px) {
  .hl-metodo-steps { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
}
@media (max-width: 560px) {
  .hl-metodo { padding: 5rem 0; }
  .hl-metodo-cabeca { padding-inline: 1.5rem; margin-bottom: 3rem; }
  .hl-metodo-steps { grid-template-columns: 1fr; gap: 2rem; padding-inline: 1.5rem; }
}

/* ============================================================
   SERVIÇOS — bento grid
   ============================================================ */
.hl-servicos {
  padding: 6.5rem 0;
}
.hl-servicos-cabeca {
  max-width: 1200px; margin: 0 auto 3.5rem; padding-inline: 2rem;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.hl-servicos-cabeca h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.025em;
}
.hl-bento {
  max-width: 1200px; margin: 0 auto; padding-inline: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 230px;
  gap: 1rem;
}
.hl-cell {
  border-radius: var(--raio-lg); padding: 1.6rem;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.5rem; position: relative; overflow: hidden;
  border: 1px solid var(--linha); background: #fff;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.hl-cell:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.hl-cell-kicker {
  font-family: var(--fonte-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral); position: relative; z-index: 2;
}
.hl-cell-corpo { position: relative; z-index: 2; }
.hl-cell-titulo {
  font-family: var(--fonte-display); font-weight: 600;
  font-size: 1.15rem; color: var(--grafite); line-height: 1.2;
}
.hl-cell-desc {
  font-size: .8125rem; margin-top: .45rem;
  line-height: 1.55; color: var(--cinza-forte);
}

/* variantes */
.hl-cell.com-foto { border: none; }
.hl-cell.com-foto > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hl-cell.com-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(30,30,30,.34) 0%, rgba(30,30,30,0) 22%, rgba(30,30,30,.42) 56%, rgba(30,30,30,.94) 100%);
}
.hl-cell.com-foto .hl-cell-kicker { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.hl-cell.com-foto .hl-cell-titulo,
.hl-cell.com-foto .hl-cell-desc { text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.hl-cell.com-foto .hl-cell-titulo { color: #fff; }
.hl-cell.com-foto .hl-cell-desc { color: rgba(255,255,255,.9); }
.hl-cell.servico { background: var(--creme-dark); }
.hl-cell.escuro { background: var(--grafite); border: none; }
.hl-cell.escuro .hl-cell-kicker { color: var(--ouro); }
.hl-cell.escuro .hl-cell-titulo { color: var(--creme); }
.hl-cell.escuro .hl-cell-desc { color: var(--cinza-claro); }
.hl-cell.coral-solido { background: var(--coral-dark); border: none; }
.hl-cell.coral-solido .hl-cell-kicker { color: rgba(255,255,255,.92); }
.hl-cell.coral-solido .hl-cell-titulo { color: #fff; }
.hl-cell.coral-solido .hl-cell-desc { color: #fff; }
.hl-cell.span2 { grid-column: span 2; }
.hl-cell.alto { grid-row: span 2; }

@media (max-width: 900px) {
  .hl-bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 210px;
  }
  .hl-cell.span2 { grid-column: span 2; }
  .hl-cell.alto { grid-row: span 1; }
}
@media (max-width: 580px) {
  .hl-servicos { padding: 5rem 0; }
  .hl-servicos-cabeca { padding-inline: 1.5rem; margin-bottom: 2.5rem; }
  .hl-bento {
    grid-template-columns: 1fr; padding-inline: 1.5rem;
    grid-auto-rows: auto;
  }
  .hl-cell { min-height: 180px; }
  .hl-cell.span2 { grid-column: span 1; }
}

/* ============================================================
   OPERAÇÃO (dark section)
   ============================================================ */
.hl-operacao {
  background: var(--grafite); color: var(--creme);
  padding: 6.5rem 0;
}
.hl-operacao-grid {
  max-width: 1200px; margin: 0 auto; padding-inline: 2rem;
  display: grid; grid-template-columns: .88fr 1.12fr;
  gap: 5rem; align-items: center;
}
.hl-operacao-foto img {
  width: 100%; border-radius: var(--raio-lg);
  display: block; aspect-ratio: 3/4; object-fit: cover;
}
.hl-operacao h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--creme);
}
.hl-operacao h2 .fino { font-weight: 300; }
.hl-operacao-texto {
  color: var(--cinza-claro); margin-top: 1.25rem;
  max-width: 54ch; font-size: 1.0625rem; line-height: 1.65;
}
.hl-operacao-texto strong { color: var(--creme); font-weight: 600; }
.hl-operacao-destaque {
  margin-top: 2rem;
  border-left: 2px solid var(--ouro);
  padding: .25rem 0 .25rem 1.25rem;
  font-size: .9375rem; color: var(--creme); line-height: 1.55;
}
.hl-operacao-destaque span {
  font-family: var(--fonte-mono); font-size: .75rem;
  color: var(--ouro); display: block; margin-bottom: .4rem;
  letter-spacing: .05em;
}

@media (max-width: 860px) {
  .hl-operacao { padding: 5rem 0; }
  .hl-operacao-grid {
    grid-template-columns: 1fr; gap: 3rem; padding-inline: 1.5rem;
  }
  .hl-operacao-foto img { aspect-ratio: 4/3; object-position: center 30%; }
}

/* ============================================================
   BIBLIOTECA — destaque na home
   ============================================================ */
.hl-bib-home {
  background: var(--creme-dark);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 6.5rem 0;
}
.hl-bib-home-grid {
  max-width: 1200px; margin: 0 auto; padding-inline: 2rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.hl-bib-home-ilus img {
  width: 100%; border-radius: var(--raio-lg); display: block;
}
.hl-bib-home-kicker {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
  display: block; margin-bottom: 1rem;
}
.hl-bib-home h2 {
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
}
.hl-bib-home h2 em { font-style: normal; color: var(--coral-vivo); }
.hl-bib-home p {
  font-size: 1.05rem; color: var(--cinza-forte);
  margin-top: 1.25rem; max-width: 48ch; line-height: 1.65;
}
.hl-bib-home .hl-btn { margin-top: 2rem; display: inline-flex; }

@media (max-width: 860px) {
  .hl-bib-home { padding: 5rem 0; }
  .hl-bib-home-grid { grid-template-columns: 1fr; gap: 2.5rem; padding-inline: 1.5rem; }
  .hl-bib-home-ilus { order: -1; }
}

/* ============================================================
   PREÇOS — duas operações independentes (fundo grafite)
   ============================================================ */
.hl-precos {
  background: var(--grafite);
  padding: 6.5rem 0;
}
.hl-precos-inner {
  max-width: 1100px; margin: 0 auto; padding-inline: 2rem;
}
.hl-precos-kicker {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ouro);
  display: block; margin-bottom: 1rem;
}
.hl-precos h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
  color: var(--creme); max-width: 24ch;
}
.hl-precos h2 em { font-style: normal; color: var(--ouro); }

/* Uma coluna por operação; dentro dela, setup e mensalidade empilhados */
.hl-operacoes {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem; margin-top: 3.25rem; align-items: start;
}
.hl-operacao {
  background: var(--grafite-800);
  border: 1px solid var(--grafite-700);
  border-radius: var(--raio);
  padding: 2.25rem 2rem 2.5rem;
}
.hl-operacao.destaque { border-color: var(--ouro); }
.hl-operacao-cabeca {
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--grafite-700);
}
.hl-operacao-rotulo {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ouro);
  display: block;
}
.hl-operacao-cabeca h3 {
  font-family: var(--fonte-display); font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--creme); margin: .625rem 0 0;
}
.hl-operacao-cabeca p {
  color: var(--cinza-claro); font-size: 1rem; line-height: 1.6;
  margin: .75rem 0 0;
}
/* Subgrid alinha cabeça, setup e mensalidade entre as duas colunas: o olho
   compara os dois preços na mesma linha. Sem suporte, degrada para o fluxo normal. */
@media (min-width: 861px) {
  .hl-operacoes { grid-template-rows: auto auto auto; row-gap: 0; }
  .hl-operacao { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
}

/* Aritmética da licença: rótulo à esquerda, número à direita, como extrato */
.hl-conta { list-style: none; padding: 0; margin: 0; }
.hl-conta li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: .875rem 0;
  border-bottom: 1px solid var(--grafite-700);
}
.hl-conta li > span {
  color: var(--cinza-claro); font-size: .9375rem; line-height: 1.4;
}
.hl-conta li > strong {
  font-family: var(--fonte-display); font-weight: 800;
  font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1;
  color: var(--creme); text-align: right; white-space: nowrap;
}
.hl-conta li > strong small {
  display: block; font-family: var(--fonte-corpo);
  font-size: .75rem; font-weight: 400; letter-spacing: 0;
  color: var(--cinza-claro); margin-top: .375rem;
}
.hl-conta-menos > strong { color: var(--coral-vivo); }
.hl-conta-total { border-bottom: 0; padding-bottom: 0; }
.hl-conta-total > strong { color: var(--ouro); font-size: 1.75rem; }
.hl-conta-nota {
  color: var(--cinza-claro); font-size: .9375rem; line-height: 1.6;
  margin: 1rem 0 0;
}
/* Mesma conta sobre fundo creme: o ouro não passa em contraste aqui, então
   o destaque vira coral funcional (AA em fundo claro). */
.hl-capacidade .hl-conta li { border-bottom-color: var(--linha); }
.hl-capacidade .hl-conta li > span,
.hl-capacidade .hl-conta li > strong small,
.hl-capacidade .hl-conta-nota { color: var(--cinza-forte); }
.hl-capacidade .hl-conta li > strong { color: var(--grafite); }
.hl-capacidade .hl-conta-menos > strong,
.hl-capacidade .hl-conta-total > strong { color: var(--coral); }

.hl-operacao-linha { padding-top: 1.75rem; }
.hl-operacao-linha + .hl-operacao-linha {
  margin-top: 1.75rem; border-top: 1px solid var(--grafite-700);
}
.hl-operacao-preco {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1rem;
}
.hl-operacao-preco .hl-preco-rotulo { flex-basis: 100%; }
.hl-operacao-preco .hl-preco-valor {
  font-size: clamp(1.875rem, 3.4vw, 2.375rem); margin-top: .5rem;
}
.hl-operacao-preco .hl-preco-valor span { display: inline; margin: 0 0 0 .375rem; }
.hl-operacao-preco .hl-preco-prazo { margin-top: .5rem; }
.hl-preco-rotulo {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-claro);
  display: block;
}
.hl-preco-valor {
  font-family: var(--fonte-display); font-weight: 800;
  font-size: clamp(2.125rem, 4.5vw, 2.875rem);
  letter-spacing: -0.035em; line-height: 1.05;
  color: var(--ouro); margin-top: .75rem;
}
.hl-preco-valor span {
  display: block; font-family: var(--fonte-corpo);
  font-size: .875rem; font-weight: 400; letter-spacing: 0;
  color: var(--cinza-claro); margin-top: .5rem;
}
.hl-preco-prazo {
  display: inline-block; margin-top: 1rem;
  font-family: var(--fonte-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ouro);
  border: 1px solid rgba(245, 184, 65, .45);
  border-radius: var(--raio-pill); padding: .4rem .875rem;
  line-height: 1.3;
}
.hl-preco-lista {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
}
.hl-preco-lista li {
  color: var(--cinza-claro); font-size: .9375rem; line-height: 1.5;
  padding: .5rem 0 .5rem 1.5rem; position: relative;
}
.hl-preco-lista li::before {
  content: ""; position: absolute; left: 0; top: 1.0625rem;
  width: 8px; height: 2px; background: var(--ouro);
}

.hl-precos-acao {
  margin-top: 3rem; display: flex; align-items: flex-start;
  gap: 2.5rem; flex-wrap: wrap;
}
.hl-precos-nota {
  color: var(--cinza-claro); font-size: .875rem; line-height: 1.5;
  max-width: 34ch;
}
.hl-precos-nota.forte { max-width: 46ch; }
.hl-precos-nota strong { color: var(--creme); font-weight: 600; }

@media (max-width: 860px) {
  .hl-precos { padding: 5rem 0; }
  .hl-precos-inner { padding-inline: 1.5rem; }
  .hl-operacoes { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; }
  .hl-operacao { padding: 2rem 1.5rem 2.25rem; }
  .hl-precos-acao { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* Capacidade — teto de clientes */
.hl-capacidade {
  background: var(--creme-dark);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 6rem 0;
}
.hl-capacidade-grid {
  max-width: 1100px; margin: 0 auto; padding-inline: 2rem;
  display: grid; grid-template-columns: auto 1fr;
  gap: 4.5rem; align-items: start;
}
.hl-capacidade-num {
  font-family: var(--fonte-display); font-weight: 800;
  font-size: clamp(4.5rem, 10vw, 6rem); line-height: .85;
  letter-spacing: -0.04em; color: var(--coral);
}
.hl-capacidade-num span {
  display: block; font-family: var(--fonte-mono);
  font-size: .72rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cinza-forte);
  margin-top: 1.125rem; line-height: 1.4; white-space: nowrap;
}
.hl-capacidade-kicker {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
  display: block; margin-bottom: .875rem;
}
.hl-capacidade h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  max-width: 20ch;
}
.hl-capacidade p {
  font-size: 1.0625rem; color: var(--cinza-forte);
  margin-top: 1.25rem; max-width: 62ch; line-height: 1.7;
}

/* Estado das vagas mensais, uma linha por operação (site.json > capacidade.operacoes) */
.hl-vagas {
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.hl-vagas-rotulo {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-forte);
  display: block; margin-bottom: .875rem;
}
.hl-vagas-marcas { display: flex; gap: 7px; flex-wrap: wrap; }
.hl-vagas-marcas span {
  box-sizing: border-box; display: block;
  width: 28px; height: 9px; border-radius: var(--raio-pill);
}
.hl-vagas-marcas .ocupada { background: var(--grafite); }
.hl-vagas-marcas .aberta { background: transparent; border: 1.5px solid var(--coral); }
.hl-capacidade .hl-vagas-estado {
  margin-top: 1rem; font-size: .9375rem; color: var(--cinza-forte);
}
.hl-capacidade .hl-vagas-estado strong { color: var(--grafite); font-weight: 600; }

@media (max-width: 860px) {
  .hl-capacidade { padding: 4.5rem 0; }
  .hl-capacidade-grid {
    grid-template-columns: 1fr; gap: 2rem; padding-inline: 1.5rem;
  }
  /* sem nowrap: em telas de 320px o rótulo estoura a coluna */
  .hl-capacidade-num span { white-space: normal; }
  .hl-vagas { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Consultoria de IA (piso em site.json > consultoria) */
.hl-consultoria {
  padding: 6rem 0;
  border-top: 1px solid var(--linha);
}
.hl-consultoria-inner { max-width: 1100px; margin: 0 auto; padding-inline: 2rem; }
.hl-consultoria-cabeca {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 3.5rem; align-items: start;
}
.hl-consultoria-kicker {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
  display: block; margin-bottom: .875rem;
}
.hl-consultoria h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; max-width: 22ch;
}
.hl-consultoria h2 em { font-style: normal; color: var(--coral-vivo); }
.hl-consultoria-cabeca > div > p {
  font-size: 1.0625rem; color: var(--cinza);
  margin-top: 1.25rem; max-width: 58ch; line-height: 1.7;
}
.hl-consultoria-preco {
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--creme-dark); padding: 1.5rem 1.5rem 1.625rem;
}
.hl-consultoria-preco-rot {
  font-family: var(--fonte-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-forte);
  display: block;
}
.hl-consultoria-preco strong {
  display: block; font-family: var(--fonte-display); font-weight: 800;
  font-size: 2rem; letter-spacing: -0.035em; color: var(--coral);
  margin-top: .5rem; line-height: 1.1;
}
.hl-consultoria-prazo {
  display: inline-block; margin-top: .75rem;
  font-family: var(--fonte-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--coral);
  border: 1px solid rgba(184, 58, 38, .35);
  border-radius: var(--raio-pill); padding: .375rem .8125rem;
  line-height: 1.3;
}
.hl-consultoria-preco-nota {
  display: block; font-size: .8125rem; color: var(--cinza-forte);
  line-height: 1.55; margin-top: .875rem;
  padding-top: .875rem; border-top: 1px solid var(--linha);
}
.hl-consultoria-lista {
  list-style: none; padding: 0;
  margin: 3.25rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem 2.5rem;
}
.hl-consultoria-lista li {
  font-size: .9375rem; color: var(--cinza); line-height: 1.6;
  padding-top: 1rem; border-top: 2px solid var(--ouro);
}
.hl-consultoria-lista li strong {
  display: block; font-family: var(--fonte-display); font-weight: 600;
  font-size: 1.0625rem; color: var(--grafite); margin-bottom: .375rem;
  letter-spacing: -0.01em;
}
.hl-consultoria-fecho {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-display); font-weight: 600;
  font-size: 1.125rem; color: var(--grafite);
}

@media (max-width: 860px) {
  .hl-consultoria { padding: 4.5rem 0; }
  .hl-consultoria-inner { padding-inline: 1.5rem; }
  .hl-consultoria-cabeca { grid-template-columns: 1fr; gap: 2rem; }
  .hl-consultoria-lista { margin-top: 2.5rem; gap: 1.5rem; }
}

/* Corpo da página de preços */
.conteudo-precos h2 {
  border-top: 1px solid var(--linha);
  margin-top: 3rem; padding-top: 3rem;
}
.conteudo-precos h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.conteudo-precos h3 { margin-top: 2.25rem; }

/* ============================================================
   ÚLTIMOS DO BLOG (home)
   ============================================================ */
.hl-blog-home {
  padding: 6.5rem 0;
  border-top: 1px solid var(--linha);
}
.hl-blog-home-cabeca {
  max-width: 1200px; margin: 0 auto 3.5rem; padding-inline: 2rem;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.hl-blog-home-cabeca h2 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.025em;
}

/* ============================================================
   GRADE DE POSTS (compartilhada — blog + home)
   ============================================================ */
.grade-posts {
  max-width: 1200px; margin: 0 auto; padding-inline: 2rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.card-post {
  display: flex; flex-direction: column;
  border-radius: var(--raio-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--linha);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-post:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.card-post > a img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.card-corpo {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: .5rem; flex: 1;
}
.card-categoria { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.card-categoria a { color: var(--coral); text-decoration: none; }
.card-corpo h2, .card-corpo h3 {
  font-size: 1.1rem; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.015em;
}
.card-corpo h2 a, .card-corpo h3 a { color: var(--grafite); text-decoration: none; }
.card-corpo h2 a:hover, .card-corpo h3 a:hover { color: var(--coral); }
.card-corpo p { font-size: .9rem; color: var(--cinza); line-height: 1.55; }
.card-corpo time { font-size: .8rem; color: var(--cinza); margin-top: auto; }

/* post em destaque */
.post-destaque {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.2fr 1fr;
  border-radius: var(--raio-lg); overflow: hidden;
  border: 1px solid var(--linha); background: #fff;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.post-destaque:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.post-destaque > a img {
  aspect-ratio: 16/10; object-fit: cover; width: 100%; height: 100%;
}
.post-destaque .card-corpo { padding: 2.5rem 2.5rem; justify-content: center; }
.post-destaque .card-corpo h2 {
  font-size: 1.5rem; letter-spacing: -0.02em;
}
@media (max-width: 860px) {
  .post-destaque { grid-template-columns: 1fr; }
  .post-destaque .card-corpo { padding: 1.5rem; }
}
@media (max-width: 580px) {
  .grade-posts { padding-inline: 1.5rem; }
}

/* ============================================================
   CTA FINAL (home)
   ============================================================ */
.hl-cta-final {
  padding: 8rem 0;
  text-align: center;
}
.hl-cta-final h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.08; max-width: 20ch; margin: 0 auto;
}
.hl-cta-final h2 em { font-style: normal; color: var(--coral-vivo); }
.hl-cta-final p {
  font-size: 1.0625rem; color: var(--cinza);
  margin: 1.25rem auto 0; max-width: 42ch; line-height: 1.6;
}
.hl-cta-final .hl-ctas { margin-top: 2.25rem; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) { .hl-cta-final { padding: 5.5rem 0; } }

/* ============================================================
   BOTÕES
   ============================================================ */
.hl-btn {
  display: inline-block; text-decoration: none;
  font-family: var(--fonte-display); font-weight: 600;
  font-size: .9375rem; padding: .875rem 1.875rem;
  border-radius: var(--raio-pill);
  transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao);
  line-height: 1;
}
.hl-btn:hover { text-decoration: none; transform: translateY(-2px); }
.hl-btn:active { transform: translateY(1px) scale(.98); }
.hl-btn-coral { background: var(--coral); color: var(--creme); }
.hl-btn-coral:hover { background: var(--coral-dark); color: var(--creme); box-shadow: 0 8px 20px rgba(232, 87, 63, .28); }
.hl-btn-ghost {
  background: transparent; color: var(--grafite);
  border: 1.5px solid var(--grafite);
}
.hl-btn-ghost:hover { background: var(--grafite); color: var(--creme); }
.hl-btn-ghost-light {
  background: transparent; color: var(--creme);
  border: 1.5px solid rgba(250, 246, 240, .5);
}
.hl-btn-ghost-light:hover { background: var(--creme); color: var(--grafite); }

/* Botão padrão do motor (compatibilidade com templates) */
.botao {
  display: inline-block; background: var(--coral); color: var(--creme);
  font-family: var(--fonte-display); font-weight: 600; font-size: .9375rem;
  padding: .875rem 1.875rem; border-radius: var(--raio-pill);
  transition: transform var(--transicao), background var(--transicao);
  text-decoration: none;
}
.botao:hover { background: var(--coral-dark); color: var(--creme); text-decoration: none; transform: translateY(-2px); }
.botao:active { transform: scale(.98); }
.botao-borda {
  background: transparent; color: var(--grafite);
  border: 1.5px solid var(--grafite);
}
.botao-borda:hover { background: var(--grafite); color: var(--creme); }

/* ============================================================
   PÁGINAS INTERNAS — cabeçalho
   ============================================================ */
.hl-pagina-hero {
  padding: 6rem 0 5rem;
  background: var(--creme);
  border-bottom: 1px solid var(--linha);
}
.hl-pagina-hero .container { max-width: 900px; }
.hl-pagina-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800; letter-spacing: -0.035em;
  max-width: 20ch; line-height: 1.1;
}
.hl-pagina-hero p {
  font-size: 1.15rem; color: var(--cinza);
  margin-top: 1.25rem; max-width: 56ch; line-height: 1.65;
}
.hl-pagina-corpo {
  max-width: 900px; margin: 0 auto; padding: 5rem 2rem 6rem;
}
.hl-pagina-corpo hr {
  border: none; border-top: 1px solid var(--linha); margin: 3rem 0;
}

/* Serviços — lista numerada com rótulo mono (consistência com a home) */
.conteudo-servicos { counter-reset: servico; }
.conteudo-servicos hr { display: none; }
.conteudo-servicos h2 {
  counter-increment: servico;
  border-top: 1px solid var(--linha);
  margin-top: 2.75rem; padding-top: 2.75rem;
  clear: both;
}
.conteudo-servicos h2::before {
  content: counter(servico, decimal-leading-zero);
  display: block; font-family: var(--fonte-mono); font-weight: 500;
  font-size: .8rem; letter-spacing: .12em; color: var(--coral);
  margin-bottom: .7rem;
}
.conteudo-servicos > h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }

/* Ilustrações por serviço */
.servico-ilus {
  float: right;
  width: clamp(200px, 40%, 340px);
  margin: .5rem 0 1.5rem 2.5rem;
  border-radius: var(--raio);
  overflow: hidden;
}
.servico-ilus img { width: 100%; height: auto; display: block; border-radius: 0; margin: 0; }
@media (max-width: 640px) {
  .servico-ilus { float: none; width: 100%; margin: 1rem 0 1.25rem; }
}

/* Compatibilidade motor */
.cabecalho-pagina { padding: 4rem 0 3rem; border-bottom: 1px solid var(--linha); }
.cabecalho-pagina h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; max-width: 18ch; }
.cabecalho-pagina .hero-sub { margin: 1rem 0 0; font-size: 1.1rem; color: var(--cinza); }
.trilha { font-size: .8rem; color: var(--cinza-claro); margin-bottom: 1rem; }
.trilha a { color: var(--cinza-claro); }
.hero { padding: 4.5rem 0 4rem; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; margin-bottom: 1rem; }
.hero-sub { font-size: 1.1rem; color: var(--cinza); max-width: 34rem; margin-bottom: 1.75rem; }
.hero-visual { position: relative; }
.hero-visual::before { content: ''; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; background: var(--coral-soft); border-radius: var(--raio); }
.hero-visual img { position: relative; border-radius: var(--raio); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.hero-editorial .hero-grid { grid-template-columns: minmax(0, 46rem); }
@media (max-width: 860px) {
  .hero { padding: 3rem 0 2.5rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================
   CONTEÚDO MARKDOWN (páginas e posts)
   ============================================================ */
.conteudo-md h2 {
  font-size: 1.5rem; font-weight: 800;
  margin: 3rem 0 .875rem; letter-spacing: -0.02em;
  padding-top: .5rem;
}
.conteudo-md h3 {
  font-size: 1.2rem; font-weight: 700;
  margin: 1.75rem 0 .5rem; letter-spacing: -0.015em;
}
.conteudo-md p, .conteudo-md ul, .conteudo-md ol {
  margin-bottom: 1.1rem; max-width: 70ch;
}
.conteudo-md p { text-wrap: pretty; line-height: 1.7; }
.conteudo-md ul, .conteudo-md ol { padding-left: 1.4rem; }
.conteudo-md li { margin-bottom: .4rem; line-height: 1.65; }
.conteudo-md blockquote {
  border-left: 3px solid var(--coral);
  background: var(--coral-soft); padding: 1.1rem 1.5rem;
  border-radius: 0 var(--raio) var(--raio) 0;
  margin-bottom: 1.25rem; max-width: 70ch;
}
.conteudo-md img { border-radius: var(--raio); margin: 1.75rem 0; }
.conteudo-md table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.conteudo-md th, .conteudo-md td {
  border-bottom: 1px solid var(--linha); padding: .7rem .9rem; text-align: left;
}
.conteudo-md th { color: var(--grafite); font-weight: 700; }
.conteudo-md strong { color: var(--grafite); }
.conteudo-md a { color: var(--coral); }
.conteudo-md a:hover { color: var(--coral-dark); }
.secao.container.conteudo-md { max-width: 760px; margin: 0 auto; padding-block: 5rem; }

/* ============================================================
   POST (artigo)
   ============================================================ */
.post-capa {
  border-radius: var(--raio-lg); margin: 2rem auto 0;
  aspect-ratio: 21/9; object-fit: cover; width: 100%;
}
.post-meta { color: var(--cinza-claro); font-size: .875rem; margin-top: .875rem; }
.post-corpo { padding-top: 3.5rem; }
.post-tags { padding-bottom: 3rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  display: inline-block; background: var(--creme-dark);
  border: 1px solid var(--linha); border-radius: var(--raio-pill);
  padding: .3rem 1rem; font-size: .8rem; color: var(--cinza);
  transition: border-color var(--transicao), color var(--transicao);
}
.tag:hover { text-decoration: none; border-color: var(--coral); color: var(--grafite); }

/* ============================================================
   PAGINAÇÃO / FILTRO
   ============================================================ */
.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linha);
}
.paginacao-info { color: var(--cinza-claro); font-size: .875rem; }
.filtro-aviso { margin-bottom: 2rem; color: var(--cinza); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-lista { max-width: 48rem; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item summary {
  cursor: pointer; font-family: var(--fonte-display);
  font-weight: 600; color: var(--grafite); font-size: 1.0625rem;
  padding: 1.375rem 2.75rem 1.375rem 0;
  list-style: none; position: relative; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--coral);
  transition: transform var(--transicao);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-resposta { padding: 0 0 1.5rem; max-width: 64ch; }
.faq-resposta p { margin-bottom: .875rem; color: var(--cinza); line-height: 1.65; }

/* ============================================================
   SEÇÃO CABEÇALHO (compatibilidade motor — blog listing)
   ============================================================ */
.secao-cabeca { margin-bottom: 3rem; }
.secao-cabeca h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em;
}
.secao { padding-block: 5rem; }

/* ============================================================
   RODAPÉ
   ============================================================ */
.hl-footer {
  background: var(--grafite); color: var(--cinza-claro);
  padding: 4.5rem 0 0;
  margin-top: 0;
}
.hl-footer-inner {
  max-width: 1200px; margin: 0 auto; padding-inline: 2rem;
  display: grid; grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 3rem; padding-bottom: 3.5rem;
}
/* 250px é o mínimo do DNA v1.1 para a assinatura COM tagline: abaixo disso a
   linha vira textura e o lockup exige a versão sem tagline. */
.hl-footer-logo {
  width: 250px; height: auto; max-width: 100%;
  display: block; margin-bottom: 1.125rem;
}
.hl-footer-marca p {
  font-size: .875rem; color: var(--cinza-claro); line-height: 1.5;
  margin-top: 0;
}
.hl-footer-col strong {
  display: block; color: var(--creme); font-family: var(--fonte-display);
  font-weight: 600; font-size: .875rem; margin-bottom: 1rem;
  letter-spacing: .01em;
}
.hl-footer-col a {
  display: block; color: var(--cinza-claro); font-size: .875rem;
  margin-bottom: .5rem; text-decoration: none; transition: color var(--transicao);
}
.hl-footer-col a:hover { color: var(--creme); text-decoration: none; }
.hl-footer-base {
  max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem;
  border-top: 1px solid var(--grafite-700);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: .75rem; font-size: .8rem; color: var(--cinza-claro);
}
/* Versão do site: discreta, mas visível — a operação é viva e mostra isso */
.hl-versao {
  font-family: var(--fonte-mono); font-size: .75rem;
  color: var(--cinza-claro); opacity: .7; cursor: default;
}
.hl-logo-texto {
  font-family: var(--fonte-display); font-weight: 800;
  font-size: 1.2rem; color: var(--creme); letter-spacing: -0.02em;
}

@media (max-width: 860px) {
  .hl-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hl-footer-marca { grid-column: span 2; }
}
@media (max-width: 520px) {
  .hl-footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .hl-footer-marca { grid-column: span 1; }
  .hl-footer-base { flex-direction: column; gap: .5rem; text-align: center; }
}

/* Compatibilidade: rodape do motor (usado em listagem de blog) */
.rodape { background: var(--grafite); color: var(--cinza-claro); margin-top: 4.5rem; padding: 3.5rem 0 1.75rem; }
.rodape a { color: var(--creme); }
.rodape-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2.5rem; padding-bottom: 2.5rem; max-width: 1200px; margin: 0 auto; padding-inline: 2rem; }
.rodape-col strong { display: block; color: var(--creme); margin-bottom: .8rem; font-size: .95rem; }
.rodape-col p { margin-bottom: .45rem; font-size: .9rem; }
.rodape-base { border-top: 1px solid rgba(250,246,240,.12); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .82rem; max-width: 1200px; margin: 0 auto; padding-inline: 2rem; }
.rodape a.hl-assinatura { display: none; }

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.hl-whatsapp {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 3.5rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center;
  background: #0E7C3D; color: #fff; border-radius: 50%;
  box-shadow: 0 6px 18px rgba(14,124,61,.4);
  z-index: var(--z-whatsapp);
  transition: transform var(--transicao), box-shadow var(--transicao), opacity var(--transicao);
  text-decoration: none;
}
.hl-whatsapp--oculto { opacity: 0; pointer-events: none; }
.hl-whatsapp svg { width: 1.85rem; height: 1.85rem; fill: #fff; display: block; }
.hl-whatsapp:hover { text-decoration: none; transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px rgba(14,124,61,.48); }
.hl-whatsapp:active { transform: scale(.95); }

/* ============================================================
   BIBLIOTECA (skills + prompts)
   ============================================================ */
.bib-hero { padding: 5.5rem 0 3rem; background: var(--creme); border-bottom: 1px solid var(--linha); }
.bib-hero .container { max-width: 1000px; }
.bib-kicker {
  font-family: var(--fonte-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
  display: block; margin-bottom: 1rem;
}
.bib-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; max-width: 20ch; }
.bib-hero h1 em { font-style: normal; color: var(--coral-vivo); }
.bib-hero p { font-size: 1.125rem; color: var(--cinza); margin-top: 1.15rem; max-width: 56ch; line-height: 1.6; }

.bib-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 2.25rem; }
.bib-stat-num { font-family: var(--fonte-mono); font-weight: 500; font-size: 1.9rem; color: var(--grafite); display: block; line-height: 1; }
.bib-stat-rot { font-size: .8rem; color: var(--cinza); margin-top: .4rem; display: block; }

/* Busca */
.bib-busca { margin: 2rem 0 0; position: relative; max-width: 520px; }
.bib-busca input {
  width: 100%; font-family: var(--fonte-corpo); font-size: 1rem;
  padding: .85rem 1.1rem; border: 1.5px solid var(--linha);
  border-radius: var(--raio); background: #fff; color: var(--grafite);
}
.bib-busca input:focus { outline: none; border-color: var(--coral); }
.bib-busca input::placeholder { color: var(--cinza-claro); }
.bib-busca-res { margin-top: .5rem; }
.bib-busca-vazio { color: var(--cinza); font-size: .9rem; padding: .5rem 0; }

/* Seções e grades */
.bib-secao { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
.bib-secao-cabeca { margin-bottom: 2rem; }
.bib-secao-cabeca h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; }
.bib-secao-cabeca p { color: var(--cinza); margin-top: .5rem; max-width: 60ch; }
.bib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.bib-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .bib-grid-2 { grid-template-columns: 1fr; } }

/* Card genérico (skill / prompt) */
.bib-card {
  display: flex; flex-direction: column; gap: .85rem;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-lg);
  padding: 1.4rem; transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.bib-card:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: #DAD2C6; text-decoration: none; }
.bib-card-topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.bib-card-cat { font-family: var(--fonte-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); }
.bib-card-num { font-family: var(--fonte-mono); font-size: .7rem; color: var(--cinza-claro); }
.bib-card h2, .bib-card h3 { font-family: var(--fonte-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--grafite); letter-spacing: -0.01em; }
.bib-card p { font-size: .85rem; color: var(--cinza); line-height: 1.5; flex: 1; }
.bib-card-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.bib-chip { font-family: var(--fonte-mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .6rem; border-radius: var(--raio-pill); background: var(--creme-dark); color: var(--cinza); border: 1px solid var(--linha); }
.bib-chip.nivel-iniciante { color: var(--ouro-dark); }
.bib-chip.nivel-intermediario { color: var(--coral); }
.bib-chip.nivel-avancado { color: var(--grafite); }

/* Card de categoria (maior) */
.bib-cat {
  display: flex; flex-direction: column; gap: .6rem;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-lg);
  padding: 1.75rem; transition: transform var(--transicao), box-shadow var(--transicao);
}
.bib-cat:hover { transform: translateY(-3px); box-shadow: var(--sombra); text-decoration: none; }
.bib-cat-count { font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .06em; color: var(--coral); }
.bib-cat h2, .bib-cat h3 { font-family: var(--fonte-display); font-weight: 700; font-size: 1.2rem; color: var(--grafite); letter-spacing: -0.015em; }
.bib-cat p { font-size: .875rem; color: var(--cinza); line-height: 1.55; flex: 1; }
.bib-cat-ir { font-family: var(--fonte-mono); font-size: .74rem; color: var(--grafite); margin-top: .4rem; }

/* Entrada dupla (skills vs prompts) na home da biblioteca */
.bib-portas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .bib-portas { grid-template-columns: 1fr; } }
.bib-porta { border-radius: var(--raio-lg); padding: 2.25rem; display: flex; flex-direction: column; gap: .75rem; min-height: 230px; justify-content: space-between; transition: transform var(--transicao), box-shadow var(--transicao); }
.bib-porta:hover { transform: translateY(-3px); box-shadow: var(--sombra); text-decoration: none; }
.bib-porta.escura { background: var(--grafite); color: var(--creme); }
.bib-porta.coral { background: var(--coral-dark); color: #fff; }
.bib-porta .bib-porta-kicker { font-family: var(--fonte-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.bib-porta.escura .bib-porta-kicker { color: var(--ouro); }
.bib-porta.coral .bib-porta-kicker { color: rgba(255,255,255,.85); }
.bib-porta h2, .bib-porta h3 { font-family: var(--fonte-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; }
.bib-porta.escura h2, .bib-porta.escura h3 { color: var(--creme); }
.bib-porta.coral h2, .bib-porta.coral h3 { color: #fff; }
.bib-porta p { font-size: .95rem; line-height: 1.55; }
.bib-porta.escura p { color: var(--cinza-claro); }
.bib-porta.coral p { color: rgba(255,255,255,.92); }
.bib-porta-ir { font-family: var(--fonte-mono); font-size: .78rem; margin-top: .5rem; }
.bib-porta.escura .bib-porta-ir { color: var(--ouro); }
.bib-porta.coral .bib-porta-ir { color: #fff; }

/* Detalhe de skill / prompt */
.bib-det-hero { padding: 4.5rem 0 2rem; }
.bib-det-hero .container { max-width: 1000px; }
.bib-trilha { font-family: var(--fonte-mono); font-size: .72rem; color: var(--cinza-claro); margin-bottom: 1.25rem; }
.bib-trilha a { color: var(--cinza); }
.bib-trilha a:hover { color: var(--coral); text-decoration: none; }
.bib-trilha span { margin: 0 .4rem; }
.bib-det-num { font-family: var(--fonte-mono); font-size: .78rem; color: var(--coral); margin-bottom: .6rem; display: block; letter-spacing: .06em; }
.bib-det-hero h1 { font-size: clamp(1.9rem, 4vw, 2.85rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; max-width: 24ch; }
.bib-det-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }

.bib-det-corpo { max-width: 1000px; margin: 0 auto; padding: 1.5rem 2rem 4.5rem; }
.bib-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.bib-cards .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .bib-cards { grid-template-columns: 1fr; } }
.bib-bloco { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 1.6rem 1.75rem; }
.bib-bloco-tit { font-family: var(--fonte-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); margin-bottom: 1rem; }
.bib-bloco p { color: var(--grafite); font-size: .975rem; line-height: 1.65; }
.bib-bloco ul { list-style: none; padding: 0; }
.bib-bloco ul li { position: relative; padding-left: 1.4rem; margin-bottom: .6rem; font-size: .95rem; color: var(--grafite); line-height: 1.5; }
.bib-bloco ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.bib-passos { list-style: none; padding: 0; counter-reset: p; }
.bib-passos li { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: .85rem; font-size: .95rem; color: var(--grafite); line-height: 1.45; }
.bib-passos li::before { counter-increment: p; content: counter(p, decimal-leading-zero); font-family: var(--fonte-mono); font-size: .72rem; color: var(--coral); background: var(--creme-dark); border: 1px solid var(--linha); width: 1.7rem; height: 1.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Caixa de prompt */
.bib-uso-hint { margin-top: 1rem; font-size: .82rem; color: var(--cinza); line-height: 1.55; }
.bib-uso-hint code { font-family: var(--fonte-mono); background: var(--coral-suave); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.bib-prompt-hd { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.bib-prompt {
  background: var(--grafite); color: #E9E3DA; border-radius: var(--raio);
  padding: 1.4rem 1.5rem; font-family: var(--fonte-mono); font-size: .82rem;
  line-height: 1.75; white-space: pre-wrap; word-break: break-word;
  max-height: 460px; overflow-y: auto;
}
.bib-copiar {
  font-family: var(--fonte-display); font-weight: 600; font-size: .82rem;
  background: var(--coral); color: #fff; border: none; cursor: pointer;
  padding: .55rem 1.1rem; border-radius: var(--raio-pill);
  transition: background var(--transicao), transform var(--transicao);
}
.bib-copiar:hover { background: var(--coral-dark); }
.bib-copiar:active { transform: scale(.97); }
.bib-copiar.ok { background: var(--grafite); }

/* Exemplo input/output */
.bib-exemplo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .bib-exemplo { grid-template-columns: 1fr; } }
.bib-ex-cx { background: var(--creme-dark); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1rem; }
.bib-ex-rot { font-family: var(--fonte-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cinza-claro); margin-bottom: .6rem; }
.bib-ex-cx pre { font-family: var(--fonte-mono); font-size: .78rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--cinza); }

/* Voltar / relacionados */
.bib-voltar { font-family: var(--fonte-mono); font-size: .78rem; color: var(--cinza); }
.bib-voltar:hover { color: var(--coral); text-decoration: none; }

@media (max-width: 640px) {
  .bib-secao { padding: 3rem 1.5rem; }
  .bib-hero { padding: 3.5rem 0 2.5rem; }
  .bib-stats { gap: 1.5rem; }
  .bib-det-corpo { padding-inline: 1.5rem; }
}

/* ============================================================
   REVELAÇÃO NO SCROLL
   ============================================================ */
.rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0; transform: translateY(28px);
    transition: opacity .65s cubic-bezier(0.16, 1, 0.3, 1),
                transform .65s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .rv.vis { opacity: 1; transform: none; }
  .rv.d1 { transition-delay: .08s; }
  .rv.d2 { transition-delay: .16s; }
  .rv.d3 { transition-delay: .24s; }
}

/* ── Link dentro de texto corrido (WCAG 1.4.1) ───────────────────
   O coral #B83A26 sobre texto #1E1E1E dá 2,91:1 — abaixo dos 3:1 que o
   critério pede para distinguir link só pela cor. Falta pouco, e é
   justamente o caso em que ninguém percebe o problema testando no olho.
   Sublinhado discreto em prosa; menu, card e botão seguem sem. */
.conteudo-md p > a:not(.botao),
.conteudo-md li > a:not(.botao) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.conteudo-md p > a:not(.botao):hover,
.conteudo-md li > a:not(.botao):hover { text-decoration-color: currentColor; }

/* ── Área de toque mínima (WCAG 2.2 AA · 2.5.8) ──────────────────
   Medido a 412px: os 12 links das colunas do rodapé e o rótulo de categoria
   do card ficavam abaixo de 24px de altura. Fonte pequena (.75 e .875rem)
   deixa a caixa do link menor que o alvo mínimo.

   No rodapé o <a> é display:block, então o padding entra no layout: a margem
   entre itens desce na mesma medida para o bloco não crescer. No rótulo de
   categoria o <a> é inline e o padding só amplia o hit-test. */
.hl-footer-col a { padding-block: .25rem; margin-bottom: .25rem; }
.card-categoria a { padding-block: .3rem; }

/* Segunda leva, da varredura ampla em 12 páginas: a primeira só tinha medido
   home e blog. Link em prosa (.conteudo-md e resposta do FAQ), aviso de filtro
   e rótulo da biblioteca ficavam em 15 a 20px. Todos inline. */
.conteudo-md p > a,
.faq-resposta p > a,
.filtro-aviso a,
.bib-kicker a { padding-block: .15rem; }
.bib-kicker a { padding-block: .3rem; }

/* A resposta do FAQ é prosa e caía fora da regra de sublinhado, que estava
   presa a .conteudo-md. Mesmo motivo do spa-recovery: enumerar container
   erra por omissão. */
.faq-resposta p > a:not(.botao),
.faq-resposta li > a:not(.botao) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.faq-resposta p > a:not(.botao):hover { text-decoration-color: currentColor; }