/* ==========================================================================
   S4R — folha unica de estilo
   Ordem: fontes · tokens · reset · base · layout · chrome · componentes ·
          formulario · estados de listagem · movimento
   Referencia: design_handoff_site_s4r/01-tokens.md e 03-templates-e-estados.md
   Mobile-first. Toda media query e min-width.
   ========================================================================== */

/* ---------- 1. Fontes ----------------------------------------------------
   Archivo e fonte variavel: um arquivo por subset cobre 400, 600, 700 e 800.
   Total 66 KB nos dois subsets, contra os 90 KB de orcamento.              */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root {
  /* marca */
  --blue: #1b4f91;
  --blue-700: #17406f;
  --blue-800: #12345c;
  --blue-900: #0f2f58;
  --teal: #0fb3b8;
  --teal-600: #0f8fa0;
  --green: #6cb83f;
  --green-700: #5aa233;
  --orange: #f08a24;
  --red: #e62b26;

  /* neutros */
  --ink: #12243c;
  --muted: #5c6d82;
  --line: #e4eaf1;
  --wash: #f4f8fc;
  --surface: #ffffff;

  /* gradientes */
  --grad-dark: linear-gradient(120deg, #0f2f58 0%, #1b4f91 55%, #0f8fa0 100%);
  --grad-hero:
    radial-gradient(1100px 520px at 88% -15%, #e6f6f7 0%, rgba(255,255,255,0) 62%),
    radial-gradient(900px 480px at 5% 0%, #eef3fb 0%, rgba(255,255,255,0) 58%);

  /* tipografia */
  --font-heading: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;

  /* escala — valores de mobile; o bloco lg reescreve os de desktop */
  --fs-display: 34px;   --lh-display: 1.03;
  --fs-h1: 32px;        --lh-h1: 1.04;
  --fs-h1-int: 30px;    --lh-h1-int: 1.05;
  --fs-h2: 26px;        --lh-h2: 1.12;
  --fs-h2-band: 25px;   --lh-h2-band: 1.14;
  --fs-h2-art: 24px;    --lh-h2-art: 1.14;
  --fs-h3: 19px;        --lh-h3: 1.25;
  --fs-lead: 17px;
  --fs-article: 17px;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-legal: 12px;
  --fs-kicker: 12px;
  --fs-num: 32px;

  /* espacamento — escala base 4px */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-18: 72px;
  --sp-22: 88px; --sp-23: 92px; --sp-24: 96px;

  --container: 1240px;
  --container-lp: 1180px;
  --gutter: 20px;
  --section-top: 48px;
  --section-bottom: 56px;
  --grid-gap: 16px;

  /* raios */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 28px;
  --radius-pill: 999px;

  /* sombras */
  --shadow-card: 0 2px 10px rgba(18,36,60,.05);
  --shadow-cta: 0 10px 26px rgba(27,79,145,.26);
  --shadow-raised: 0 18px 44px rgba(18,36,60,.09);
  --shadow-media: 0 24px 60px rgba(18,36,60,.14);
  --shadow-float: 0 12px 30px rgba(18,36,60,.16);

  /* movimento */
  --t-hover: 200ms;
  --t-enter: 500ms;
  --ease-enter: cubic-bezier(.22,.61,.36,1);

  /* medidas de linha */
  --measure-h1: 940px;
  --measure-lead: 640px;
  --measure-article: 720px;
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 64px;
    --fs-h1: 60px;
    --fs-h1-int: 54px;
    --fs-h2: 40px;
    --fs-h2-band: 38px;
    --fs-h2-art: 30px;
    --fs-h3: 21px;
    --fs-lead: 19px;
    --fs-article: 18px;
    --fs-num: 44px;

    --gutter: 40px;
    --section-top: 88px;
    --section-bottom: 92px;
    --grid-gap: 24px;
  }
}

/* ---------- 3. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---------- 4. Base tipografica ------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  text-wrap: balance;
}
p { text-wrap: pretty; }

.s4r-display {
  font-size: var(--fs-display); font-weight: 800;
  line-height: var(--lh-display); letter-spacing: -.03em;
  max-width: var(--measure-h1);
}
.s4r-h1 {
  font-size: var(--fs-h1); font-weight: 800;
  line-height: var(--lh-h1); letter-spacing: -.03em;
  max-width: var(--measure-h1);
}
.s4r-h1-int {
  font-size: var(--fs-h1-int); font-weight: 800;
  line-height: var(--lh-h1-int); letter-spacing: -.03em;
}
.s4r-h2 {
  font-size: var(--fs-h2); font-weight: 800;
  line-height: var(--lh-h2); letter-spacing: -.025em;
}
.s4r-h2-band {
  font-size: var(--fs-h2-band); font-weight: 800;
  line-height: var(--lh-h2-band); letter-spacing: -.025em;
}
.s4r-h2-art {
  font-size: var(--fs-h2-art); font-weight: 800;
  line-height: var(--lh-h2-art); letter-spacing: -.02em;
}
.s4r-h3 {
  font-size: var(--fs-h3); font-weight: 700;
  line-height: var(--lh-h3); letter-spacing: -.01em;
}
.s4r-lead {
  font-size: var(--fs-lead); font-weight: 400;
  line-height: 1.60; color: var(--muted);
  max-width: var(--measure-lead);
}
.s4r-small { font-size: var(--fs-small); line-height: 1.55; }
.s4r-legal { font-size: var(--fs-legal); line-height: 1.5; color: var(--muted); }

.s4r-kicker {
  font-size: var(--fs-kicker); font-weight: 800;
  line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
}

/* Numero de metrica. tabular-nums impede o salto de largura entre digitos. */
.s4r-num {
  font-size: var(--fs-num); font-weight: 800;
  line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-700); }

/* ---------- 5. Layout ---------------------------------------------------- */

.s4r-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.s4r-container--lp { max-width: var(--container-lp); }

.s4r-section { padding-block: var(--section-top) var(--section-bottom); }

/* O heroi ja fecha com o proprio respiro embaixo (--section-bottom). Somar o
   --section-top da secao seguinte dava 184px de vao no desktop, o dobro dos
   96px do handoff — e o buraco aparecia justamente entre os selos e "o que
   fazemos". Quem vem logo depois do heroi encosta. */
.s4r-hero + .s4r-section { padding-top: 0; }
.s4r-section--wash { background: var(--wash); }

/* min-width:0 desarma o bug classico do grid: item de grid tem min-width:auto
   por padrao, entao um texto sem ponto de quebra (medido: espaco nao
   separavel vindo da esteira de artigos) forca a coluna a crescer alem da
   fracao 1fr dela e estoura a pagina inteira, mesmo com overflow-wrap
   tratado no texto. */
.s4r-grid { display: grid; gap: var(--grid-gap); align-items: start; }
.s4r-grid > * { min-width: 0; }
.s4r-grid--2 { grid-template-columns: 1fr; }
.s4r-grid--3 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .s4r-grid--2, .s4r-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .s4r-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 6. Acessibilidade -------------------------------------------- */

/* Padrao unico de foco. Nunca remover sem substituto. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: inherit;
}
.s4r-on-dark :focus-visible { outline-color: #fff; }

.s4r-skip {
  position: absolute;
  left: var(--sp-4); top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--blue); color: #fff;
  font-size: var(--fs-small); font-weight: 700;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.s4r-skip:focus { transform: none; color: #fff; }

.s4r-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 7. Cabecalho ------------------------------------------------- */

.s4r-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.s4r-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
}
.s4r-header__logo { display: block; flex: none; }
.s4r-header__logo img, .s4r-header__logo svg { height: 34px; width: auto; }

.s4r-nav { display: none; }
.s4r-nav ul { display: flex; align-items: center; gap: var(--sp-8); }
.s4r-nav a {
  font-size: var(--fs-small); font-weight: 600;
  color: var(--muted); text-decoration: none;
  transition: color var(--t-hover) ease;
}
.s4r-nav a:hover, .s4r-nav a[aria-current="page"] { color: var(--blue); }

/* Especificidade elevada de proposito: .s4r-btn define display:inline-flex
   mais adiante nesta folha, com a mesma especificidade, e venceria por
   ordem. Sem o descendente, o CTA reaparece no mobile em cima do logo. */
.s4r-header .s4r-header__cta { display: none; }

/* Botao hamburguer: 44x44 e o minimo de alvo de toque. */
.s4r-burger {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  cursor: pointer; color: var(--ink);
}

@media (min-width: 1024px) {
  .s4r-nav { display: block; }
  .s4r-header .s4r-header__cta { display: inline-flex; }
  .s4r-burger { display: none; }
}

/* Drawer mobile: tela cheia, foco preso via JS, Esc fecha. */
.s4r-drawer {
  position: fixed; inset: 0; z-index: 50;
  background: var(--surface);
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--gutter) var(--sp-8);
  visibility: hidden; opacity: 0;
  /* visibility com atraso igual a duracao: some so depois do fade de saida.
     Ao abrir ela vira na hora (0s), porque elemento com visibility:hidden
     nao aceita foco, e o foco e movido para dentro do drawer no mesmo tick. */
  transition: opacity var(--t-hover) ease, visibility 0s linear var(--t-hover);
}
.s4r-drawer[data-open="true"] {
  visibility: visible; opacity: 1;
  transition: opacity var(--t-hover) ease, visibility 0s;
}
.s4r-drawer__top { display: flex; justify-content: space-between; align-items: center; }
.s4r-drawer__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); cursor: pointer; }
.s4r-drawer__nav { margin-top: var(--sp-8); flex: 1; }
.s4r-drawer__nav li + li { border-top: 1px solid var(--line); }
.s4r-drawer__nav a {
  display: flex; align-items: center; min-height: 56px;
  font-size: 20px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.s4r-drawer .s4r-btn { width: 100%; }

body[data-drawer-open="true"] { overflow: hidden; }

/* ---------- 8. Rodape ---------------------------------------------------- */

.s4r-footer {
  background: var(--wash);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-12) var(--sp-8);
}
.s4r-footer__cols {
  display: grid; gap: var(--sp-10);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .s4r-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .s4r-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.s4r-footer h2 {
  font-size: var(--fs-kicker); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-4);
}
.s4r-footer li + li { margin-top: var(--sp-3); }
.s4r-footer a { color: var(--ink); text-decoration: none; font-size: var(--fs-small); }
.s4r-footer a:hover { color: var(--blue); text-decoration: underline; }
.s4r-footer__base {
  margin-top: var(--sp-10); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
}

.s4r-social {
  display: flex; gap: var(--sp-3); margin-top: var(--sp-5);
}
.s4r-social li + li { margin-top: 0; }
.s4r-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.s4r-social a:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }
.s4r-social svg { width: 18px; height: 18px; }

/* Rodape de uma linha, exclusivo da landing e da pagina de obrigado. */
.s4r-footer--minimal {
  background: var(--surface); padding-block: var(--sp-6);
  text-align: center;
}

/* ---------- 9. Botoes ---------------------------------------------------- */

.s4r-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                 /* alvo de toque em qualquer viewport */
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 800;
  text-decoration: none; cursor: pointer;
  /* nunca "all": transicao so no que muda de verdade */
  transition: background-color var(--t-hover) ease,
              border-color var(--t-hover) ease,
              color var(--t-hover) ease,
              box-shadow var(--t-hover) ease;
}

.s4r-btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-cta); }
.s4r-btn--primary:hover { background: var(--blue-700); color: #fff; }
.s4r-btn--primary:active { background: var(--blue-800); box-shadow: none; transform: translateY(1px); }

.s4r-btn--secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.s4r-btn--secondary:hover { border-color: var(--blue); color: var(--blue); }
.s4r-btn--secondary:active { background: var(--wash); }

.s4r-btn--whatsapp { background: var(--green); color: #fff; }
.s4r-btn--whatsapp:hover { background: var(--green-700); color: #fff; }

.s4r-btn[disabled], .s4r-btn[aria-disabled="true"] {
  opacity: .45; box-shadow: none; cursor: not-allowed;
}

.s4r-link { color: var(--muted); text-decoration: none; font-weight: 600; }
.s4r-link:hover { color: var(--blue); text-decoration: underline; }
.s4r-link:active { color: var(--blue-800); }

/* ---------- 10. Componentes ---------------------------------------------- */

.s4r-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  /* Rede de seguranca, herdada por titulo, resumo e qualquer texto do card:
     titulo e resumo vem da esteira de artigos (fontes Microsoft, copiadas e
     coladas) e por vezes trazem espaco nao separavel (U+00A0) em vez de
     espaco comum. Um trecho de ~20 caracteres assim, no titulo, ja bastou
     para a coluna do grid crescer alem da fracao dela e estourar a pagina
     inteira — medido em /insights/categoria/geral/, nos dois artigos que
     tem "eficiente e com adesão" e "e agilidade está forçando" grudados. */
  overflow-wrap: anywhere;
}
.s4r-card--compact { border-radius: var(--radius-lg); }

/* Selo do card de solucao: quadrado arredondado com o traco da marca. Existe
   para a grade nao virar seis blocos so de texto — o icone da a ancora visual
   que o olho usa para achar a frente certa sem ler os seis titulos. */
.s4r-card__icone {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-md);
  background: rgba(15, 179, 184, .10);
  color: var(--blue);
}
.s4r-card__icone svg { width: 24px; height: 24px; }

.s4r-card--media { border-radius: var(--radius-2xl); box-shadow: var(--shadow-media); overflow: hidden; }

.s4r-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(15,179,184,.12);
  color: var(--teal-600);
  font-size: var(--fs-kicker); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}

.s4r-chip {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--muted);
  font-size: var(--fs-small); font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t-hover) ease, color var(--t-hover) ease;
}
.s4r-chip:hover { border-color: var(--blue); color: var(--blue); }
.s4r-chip[aria-current="page"] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Faixa escura: usada no CTA de fim de pagina e na prova da landing. */
.s4r-band {
  background: var(--grad-dark);
  color: #fff;
  border-radius: var(--radius-3xl);
  padding: var(--sp-12) var(--sp-6);
}
.s4r-band a { color: #fff; }
@media (min-width: 1024px) { .s4r-band { padding: var(--sp-16) var(--sp-14); } }

.s4r-hero-wash { background-image: var(--grad-hero); background-repeat: no-repeat; }

/* Toda imagem reserva proporcao: CLS zero e requisito de orcamento. */
.s4r-ratio-16-10 { aspect-ratio: 16 / 10; object-fit: cover; }
.s4r-ratio-3-2   { aspect-ratio: 3 / 2;  object-fit: cover; }
.s4r-ratio-16-9  { aspect-ratio: 16 / 9; object-fit: cover; }
.s4r-ratio-1-1   { aspect-ratio: 1 / 1;  object-fit: cover; }

/* Grade de logos de cliente: 3x2 no mobile, 6 colunas no desktop. */
.s4r-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
@media (min-width: 1024px) { .s4r-logos { grid-template-columns: repeat(6, 1fr); } }
.s4r-logos img {
  height: 84px; width: 100%; object-fit: contain;
  background: var(--surface); border-radius: var(--radius-lg);
}

/* ---------- 11. Formulario ----------------------------------------------- */

.s4r-form { display: grid; gap: var(--sp-5); }
.s4r-field { display: grid; gap: var(--sp-2); }

.s4r-label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.s4r-label .req { color: var(--red); }

.s4r-input, .s4r-textarea, .s4r-select {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.s4r-input::placeholder, .s4r-textarea::placeholder { color: var(--muted); }
.s4r-textarea { min-height: 120px; resize: vertical; }

.s4r-input:focus, .s4r-textarea:focus, .s4r-select:focus { border-color: var(--blue); }

/* Preenchido: mesma moldura do repouso, texto um grau mais firme. */
.s4r-input:not(:placeholder-shown),
.s4r-textarea:not(:placeholder-shown) { font-weight: 500; }

.s4r-input[aria-invalid="true"], .s4r-textarea[aria-invalid="true"] {
  border-color: var(--red);
  background: rgba(230,43,38,.04);
}

.s4r-input[disabled], .s4r-textarea[disabled] { opacity: .45; cursor: not-allowed; }
.s4r-input[readonly], .s4r-textarea[readonly] { background: var(--wash); }

.s4r-error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; color: var(--red);
}
.s4r-error svg { flex: none; width: 14px; height: 14px; margin-top: 3px; }

/* Erro geral: recebe role="alert" e foco programatico ao aparecer. */
.s4r-alert {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  background: rgba(230,43,38,.06);
  border: 1px solid var(--red);
  border-radius: var(--radius-md);
  font-size: var(--fs-small); color: var(--ink);
}
.s4r-alert ul { margin-top: var(--sp-2); display: grid; gap: 4px; }
.s4r-alert a { color: var(--red); }

/* Consentimento LGPD: caixa 20x20 dentro de alvo de toque de 44x44. */
.s4r-consent { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: var(--sp-2); }
.s4r-consent input[type="checkbox"] {
  width: 20px; height: 20px; margin: 12px;
  accent-color: var(--blue); cursor: pointer;
}
.s4r-consent label { font-size: var(--fs-small); line-height: 1.5; padding-top: 10px; }

.s4r-form__note { font-size: var(--fs-legal); color: var(--muted); }

/* Honeypot: fora da tela, sem display:none, e ignorado por leitor de tela. */
.s4r-hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Enviando */
.s4r-form[aria-busy="true"] .s4r-btn { opacity: .45; cursor: not-allowed; }
.s4r-spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: s4rSpin .7s linear infinite;
}

/* ---------- 12. Estados de listagem -------------------------------------- */

.s4r-skeleton {
  background: var(--wash);
  border-radius: var(--radius-xl);
}
.s4r-skeleton--card { aspect-ratio: 3 / 2; }

.s4r-empty {
  display: grid; justify-items: center; gap: var(--sp-3);
  padding: var(--sp-16) var(--sp-5);
  text-align: center;
}
.s4r-empty svg { width: 40px; height: 40px; color: var(--muted); }
.s4r-empty p { color: var(--muted); font-size: var(--fs-small); max-width: 42ch; }

/* ---------- 13. Movimento ------------------------------------------------ */

@keyframes s4rUp     { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes s4rGrow   { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes s4rTick   { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes s4rSpin   { to { transform: rotate(360deg); } }
@keyframes s4rSpinRev{ to { transform: rotate(-360deg); } }
@keyframes s4rFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes s4rPulse  { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes s4rBreathe{ 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.03); } }

/* Entrada por IntersectionObserver: o JS troca data-reveal para "in". */
[data-reveal] { opacity: 0; }
[data-reveal="in"] { animation: s4rUp var(--t-enter) var(--ease-enter) both; }

/* Sem JS, nada pode ficar invisivel. */
.no-js [data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; }
}

/* ==========================================================================
   14. Landing de trafego pago e pagina de obrigado
   Estas duas paginas nao usam o chrome global. Ver header-lp.php.
   ========================================================================== */

.s4r-lp-topo { border-bottom: 1px solid var(--line); background: var(--surface); }
.s4r-lp-topo__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-4);
}
.s4r-lp-topo__fone {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  color: var(--green-700); font-size: var(--fs-small); font-weight: 700;
  text-decoration: none; border-radius: var(--radius-pill);
}
.s4r-lp-topo__fone:hover { color: var(--green-700); background: rgba(108,184,63,.1); }

/* Marcador de conteudo pendente. Impossivel de confundir com conteudo real,
   e some sozinho quando o dado chega. Nunca deve ir para producao visivel. */
.s4r-slot {
  display: inline-block; padding: 2px 10px;
  border: 1px dashed var(--orange); border-radius: var(--radius-sm);
  color: var(--orange); font-weight: 600;
}

/* ---------- Heroi ---------- */

.s4r-lp-hero { padding-block: var(--sp-12) var(--sp-14); }
.s4r-lp-hero__grid { display: grid; gap: var(--sp-8); align-items: start; }

@media (min-width: 1024px) {
  .s4r-lp-hero { padding-block: var(--sp-22) var(--sp-23); }
  .s4r-lp-hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-18); }
  /* Formulario acompanha a rolagem so no desktop. No mobile ele desce para
     baixo do heroi e o CTA vira ancora ate ele. */
  .s4r-lp-hero__form { position: sticky; top: var(--sp-6); }
}

.s4r-lp-hero__bullets { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }
.s4r-lp-hero__bullets li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.s4r-lp-hero__bullets svg { flex: none; width: 20px; height: 20px; color: var(--green); margin-top: 2px; }

.s4r-lp-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-raised);
  padding: var(--sp-6);
}
@media (min-width: 1024px) { .s4r-lp-card { padding: var(--sp-8); } }

/* ---------- Faixa de prova ---------- */

.s4r-prova { background: var(--grad-dark); color: #fff; padding-block: var(--sp-12); }
@media (min-width: 1024px) { .s4r-prova { padding-block: var(--sp-16); } }
.s4r-prova__num { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
@media (min-width: 640px) { .s4r-prova__num { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }

/* ---------- Facade de video ----------
   O embed nunca entra no HTML inicial. O JS troca por iframe no clique. */

.s4r-video {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-media); background: var(--wash);
}
.s4r-video img { width: 100%; height: 100%; object-fit: cover; }
.s4r-video__play {
  position: absolute; top: 50%; left: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94); border-radius: 50%;
  box-shadow: var(--shadow-float);
  transition: transform var(--t-hover) ease;
}
.s4r-video:hover .s4r-video__play { transform: scale(1.06); }
.s4r-video__play svg { width: 30px; height: 30px; color: var(--blue); margin-left: 4px; }
.s4r-video iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Obrigado ---------- */

.s4r-obrigado { padding-block: var(--sp-16) var(--sp-14); }
.s4r-obrigado__grid { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 1024px) { .s4r-obrigado__grid { grid-template-columns: 1.15fr .85fr; gap: var(--sp-16); } }

.s4r-check {
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(108,184,63,.16);
}
.s4r-check svg { width: 32px; height: 32px; color: var(--green); }

.s4r-passos { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); counter-reset: passo; }
.s4r-passos li { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-4); align-items: start; }
.s4r-passos li::before {
  counter-increment: passo; content: counter(passo);
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: var(--wash); color: var(--blue);
  font-family: var(--font-heading); font-size: 14px; font-weight: 800;
}

/* Na variacao A o formulario fica ao lado da promessa no desktop, entao um
   botao ali seria redundante. No mobile o formulario desce para baixo do
   heroi, e sem este botao o CTA sairia de cima da dobra em 360x640, que e o
   criterio mais duro do handoff. */
.s4r-cta-ate-o-form { margin-top: var(--sp-8); }
@media (min-width: 1024px) { .s4r-lp-hero--a .s4r-cta-ate-o-form { display: none; } }

/* Ordem no mobile: promessa, CTA, prova. Os bullets sao prova de apoio e
   podem esperar; o CTA nao pode. Medido em 360x640: com os bullets antes do
   botao, ele caia para 685px, 45px abaixo da dobra. */
.s4r-lp-hero__promessa { display: flex; flex-direction: column; }
.s4r-lp-hero__promessa .s4r-cta-ate-o-form { order: 2; }
.s4r-lp-hero__promessa .s4r-lp-hero__bullets { order: 3; }
.s4r-lp-hero__promessa .s4r-cta-ate-o-form .s4r-btn { width: 100%; }

@media (min-width: 640px) {
  .s4r-lp-hero__promessa .s4r-cta-ate-o-form .s4r-btn { width: auto; }
}
@media (min-width: 1024px) {
  .s4r-lp-hero__promessa { display: block; }
}

/* ==========================================================================
   15. Home
   ========================================================================== */

.s4r-hero { padding-block: var(--sp-12) var(--sp-14); }
.s4r-hero__grid { display: grid; gap: var(--sp-8); align-items: center; }

@media (min-width: 1024px) {
  .s4r-hero { padding-block: var(--sp-22) var(--sp-24); }
  .s4r-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--sp-18); }
}

.s4r-hero__lead { max-width: 560px; }
.s4r-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-10); }
.s4r-hero__ctas .s4r-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .s4r-hero__ctas .s4r-btn { flex: 0 0 auto; } }

/* Selos de confianca sob os CTAs. Lista, nao div: sao tres afirmacoes
   irmas, e o leitor de tela anuncia "lista de 3 itens" antes de le-las. */
.s4r-selos {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin: var(--sp-8) 0 0; padding: 0; list-style: none;
}
.s4r-selos li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--wash);
  font-size: var(--fs-legal); font-weight: 700; color: var(--ink);
}
.s4r-selos i { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }

/* No mobile a ilustracao vem depois da dobra, por regra do handoff. */
.s4r-hero__arte { order: 2; }
@media (min-width: 1024px) { .s4r-hero__arte { order: 0; } }

/* ---------- Orbita da marca ----------
   Assinatura visual do heroi, conforme o handoff: a marca da S4R no centro,
   halo conico, dois aneis em contragiro, quatro satelites e quatro pilulas
   com a stack. Uma imagem so (a marca) mais @keyframes: nenhuma biblioteca,
   nenhuma requisicao extra, e proporcao fixa (CLS zero). */

.s4r-orbita { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1;
              margin-inline: auto; animation: s4rUp var(--t-enter) .1s var(--ease-enter) both; }

/* Recorta o excedente das caixas giradas — ver comentario no template part. */
.s4r-orbita__campo { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-pill); }

.s4r-orbita__halo {
  position: absolute; inset: 6%; border-radius: var(--radius-pill);
  background: conic-gradient(from 200deg,
    rgba(27,79,145,.10), rgba(15,179,184,.14), rgba(108,184,63,.12),
    rgba(240,138,36,.12), rgba(27,79,145,.10));
}

.s4r-orbita__anel { position: absolute; border-radius: var(--radius-pill); }
.s4r-orbita__anel--fora   { inset: 4%;  border: 1.5px dashed rgba(27,79,145,.28);
                            animation: s4rSpin 60s linear infinite; }
.s4r-orbita__anel--dentro { inset: 19%; border: 1.5px dotted rgba(15,179,184,.42);
                            animation: s4rSpinRev 44s linear infinite; }

/* Os satelites ficam na borda do anel externo e giram com ele. O giro esta
   no container; a pulsacao, em cada quadrado — assim uma animacao nao
   sobrescreve a transform da outra. */
.s4r-orbita__satelites { position: absolute; inset: 4%; animation: s4rSpin 60s linear infinite; }
.s4r-orbita__sat { position: absolute; width: 26px; height: 26px; border-radius: 7px;
                   animation: s4rPulse 5s ease-in-out infinite; }
.s4r-orbita__sat--topo { top: -13px; left: 50%; margin-left: -13px; background: var(--blue);
                         box-shadow: 0 6px 16px rgba(27,79,145,.40); animation-delay: 0s; }
.s4r-orbita__sat--dir  { right: -13px; top: 50%; margin-top: -13px; background: var(--teal);
                         box-shadow: 0 6px 16px rgba(15,179,184,.40); animation-delay: .8s; }
.s4r-orbita__sat--base { bottom: -13px; left: 50%; margin-left: -13px; background: var(--green);
                         box-shadow: 0 6px 16px rgba(108,184,63,.40); animation-delay: 1.6s; }
.s4r-orbita__sat--esq  { left: -13px; top: 50%; margin-top: -13px; background: var(--orange);
                         box-shadow: 0 6px 16px rgba(240,138,36,.40); animation-delay: 2.4s; }

.s4r-orbita__nucleo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52%; aspect-ratio: 1;
  background: #fff; border-radius: var(--radius-pill);
  box-shadow: 0 26px 60px rgba(18,36,60,.16);
  display: grid; place-items: center;
  animation: s4rBreathe 7s ease-in-out infinite;
}
.s4r-orbita__nucleo img { width: 56%; height: auto; }

.s4r-orbita__pill {
  position: absolute; display: flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(18,36,60,.12);
  font-size: var(--fs-legal); font-weight: 800; color: var(--ink);
  white-space: nowrap;
  animation: s4rFloat 6s ease-in-out infinite;
}
.s4r-orbita__pill i { width: 9px; height: 9px; border-radius: var(--radius-pill); flex: none; }
.s4r-orbita__pill--ap { top: 3%;     left: 4%;    animation-delay: 0s; }
.s4r-orbita__pill--au { top: 27%;    right: -2%;  animation-delay: 1.2s; }
.s4r-orbita__pill--cs { bottom: 21%; left: -2%;   animation-delay: 2.4s; }
.s4r-orbita__pill--bi { bottom: 1%;  right: 2%;   animation-delay: 3.6s; }

/* Entre 480 e 1023px a orbita e a unica coisa na linha e cresceria demais:
   as pilulas colariam nas bordas do container. Segurando em 400px. */
@media (max-width: 1023px) { .s4r-orbita { max-width: 400px; } }

/* Abaixo de 480px as pilulas nao cabem nas laterais sem estourar o container.
   Em vez de encolher a fonte ate ficar ilegivel, elas saem: a orbita e a
   marca sozinhas ja sustentam o bloco, e a stack esta escrita no lead. */
@media (max-width: 479px) {
  .s4r-orbita { max-width: 300px; }
  .s4r-orbita__pill { display: none; }
  .s4r-orbita__sat { width: 18px; height: 18px; border-radius: 5px; }
  .s4r-orbita__sat--topo, .s4r-orbita__sat--base { margin-left: -9px; }
  .s4r-orbita__sat--dir, .s4r-orbita__sat--esq { margin-top: -9px; }
  .s4r-orbita__sat--topo { top: -9px; }
  .s4r-orbita__sat--base { bottom: -9px; }
  .s4r-orbita__sat--dir  { right: -9px; }
  .s4r-orbita__sat--esq  { left: -9px; }
}

/* ---------- Mesa de projeto ----------
   Arte do heroi de /quem-somos/, no lugar que era da foto do time (ver
   template-parts/mesa-de-projeto.php). Mesma familia visual da orbita:
   travada em 520px para nao esticar na coluna do heroi, sombra de midia,
   raio 2xl. Sem imagem e sem animacao continua — aqui a informacao e o
   desenho, entao nada compete com a leitura. */

.s4r-mesa {
  max-width: 520px; margin-inline: auto;
  display: grid; align-content: center; gap: var(--sp-6);
  /* Entrada por CSS e nao por data-reveal: acima da dobra, opacity 0 a
     espera do IntersectionObserver e risco de conteudo invisivel. */
  animation: s4rUp var(--t-enter) .1s var(--ease-enter) both;
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-media);
}

/* Os 440px de altura que o handoff pedia para a foto so fazem sentido onde
   o heroi tem duas colunas. No mobile o painel segue a altura do conteudo. */
@media (min-width: 1024px) { .s4r-mesa { min-height: 440px; } }

.s4r-mesa__kicker { margin: 0; color: var(--muted); }

.s4r-mesa__lugares { display: grid; gap: var(--sp-6); margin: 0; padding: 0; list-style: none; }

.s4r-mesa__lugar { position: relative; display: grid; grid-template-columns: 32px 1fr;
                   gap: var(--sp-4); align-items: start; }

/* Trilho que liga um marcador ao proximo. Fica em cada item e nao na lista
   inteira de proposito: ancorado no topo do disco (32px) e esticado ate o
   fim do gap (-sp-6), ele encosta exatamente no disco seguinte, seja qual
   for a altura do texto que o item tiver. Uma linha unica na lista teria
   que adivinhar essa altura, e sobraria pendurada quando o texto quebrasse
   em duas linhas. O ultimo item nao tem proximo, entao nao ganha trilho. */
.s4r-mesa__lugar:not(:last-child)::before {
  content: ''; position: absolute; left: 15px; top: 32px;
  bottom: calc(var(--sp-6) * -1); width: 2px;
  background: var(--line); border-radius: var(--radius-pill);
}

.s4r-mesa__marca {
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  /* O anel branco e o que faz o disco recortar o trilho que passa atras. */
  box-shadow: 0 0 0 5px var(--surface);
}
.s4r-mesa__marca--blue   { background: var(--blue); }
.s4r-mesa__marca--teal   { background: var(--teal); }
.s4r-mesa__marca--orange { background: var(--orange); }
.s4r-mesa__marca--green  { background: var(--green); }

.s4r-mesa__papel { margin: 0; font-weight: 800; line-height: 1.25; }
.s4r-mesa__faz   { margin: var(--sp-2) 0 0; font-size: var(--fs-small);
                   line-height: 1.5; color: var(--muted); }

/* A sustentacao nao e um lugar na mesa: e o que vem depois dela. Por isso
   filete no lugar de trilho. */
.s4r-mesa__rodape {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-4); align-items: center;
  margin: 0; padding-top: var(--sp-6); border-top: 1px solid var(--line);
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
}

/* Mesmo limite que a orbita usa: entre 480 e 1023px o painel e a unica
   coisa na linha e cresceria demais. */
@media (max-width: 1023px) { .s4r-mesa { max-width: 460px; } }
@media (max-width: 479px)  { .s4r-mesa { padding: var(--sp-6); } }

/* ---------- Tres verbos ---------- */

.s4r-verbos { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) { .s4r-verbos { grid-template-columns: repeat(3, 1fr); } }
.s4r-verbos article { padding-top: var(--sp-5); border-top: 3px solid var(--teal); }
.s4r-verbos h3 { margin-bottom: var(--sp-3); }

/* ---------- Faixa de numeros ---------- */

.s4r-numeros { display: grid; gap: var(--sp-8); }
@media (min-width: 640px) { .s4r-numeros { grid-template-columns: repeat(2, 1fr); } }
/* auto-fit, nao repeat(4): com 3 numeros a quarta coluna ficava vazia
   e a faixa abria um buraco a direita. Mesma armadilha do .s4r-grid. */
@media (min-width: 1024px) {
  .s4r-numeros { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.s4r-numeros div { border-left: 3px solid var(--line); padding-left: var(--sp-5); }
.s4r-numeros .s4r-num { color: var(--blue); }

/* ---------- Depoimento ---------- */

.s4r-depo blockquote { max-width: 820px; }
.s4r-depo__autor { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-8); }
.s4r-depo__autor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* ---------- Contato ---------- */

.s4r-contato__grid { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 1024px) { .s4r-contato__grid { grid-template-columns: .8fr 1.2fr; gap: var(--sp-16); } }

.s4r-contato__item { display: flex; gap: var(--sp-4); padding-block: var(--sp-5); border-bottom: 1px solid var(--line); }
.s4r-contato__item:last-child { border-bottom: 0; }
.s4r-contato__item svg { flex: none; width: 22px; height: 22px; color: var(--blue); margin-top: 2px; }
.s4r-contato__item dt { font-size: var(--fs-legal); font-weight: 800; letter-spacing: .1em;
                        text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.s4r-contato__item dd { margin: 0; font-size: var(--fs-small); font-weight: 600; }

/* Variante curta de texto para o mobile.
   O handoff pede texto mais curto no breakpoint pequeno, nao line-clamp:
   cortar visualmente deixaria a frase pela metade, e o leitor de tela leria
   o texto inteiro de qualquer jeito. Sao dois textos, um por breakpoint,
   e o que nao vale para o viewport atual sai do fluxo com display:none. */
.s4r-so-mobile { display: block; }
.s4r-so-desktop { display: none; }
@media (min-width: 1024px) {
  .s4r-so-mobile { display: none; }
  .s4r-so-desktop { display: block; }
}

/* ==========================================================================
   16. Blog: listagem, artigo, categoria, autor
   ========================================================================== */

/* ---------- Chips de categoria ---------- */
.s4r-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Artigo em destaque da listagem ---------- */
.s4r-destaque { display: grid; gap: var(--sp-6); align-items: center;
                border: 1px solid var(--line); border-radius: var(--radius-2xl);
                overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
@media (min-width: 768px) { .s4r-destaque { grid-template-columns: 1fr 300px; } }
@media (min-width: 1024px) { .s4r-destaque { grid-template-columns: 1fr 420px; } }
.s4r-destaque__texto { padding: var(--sp-8); }
.s4r-destaque img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Card de artigo ---------- */
.s4r-post img { width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--sp-5); }
.s4r-post__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
                  margin-top: var(--sp-4); color: var(--muted); }

/* ---------- Artigo ---------- */
.s4r-artigo__grid { display: grid; gap: var(--sp-12); align-items: start; }
@media (min-width: 1024px) {
  .s4r-artigo__grid { grid-template-columns: minmax(0, var(--measure-article)) 300px; gap: var(--sp-16); justify-content: center; }
  .s4r-artigo__lado { position: sticky; top: var(--sp-22); }
}

/* Tipografia do corpo do artigo. Unico lugar do tema que estiliza tags
   diretas, porque o conteudo vem do editor e nao carrega classe. */
.s4r-prosa { font-size: var(--fs-article); line-height: 1.75; }
.s4r-prosa > * + * { margin-top: var(--sp-6); }
.s4r-prosa h2 { font-size: var(--fs-h2-art); font-weight: 800; line-height: 1.14;
                letter-spacing: -.02em; margin-top: var(--sp-12); scroll-margin-top: var(--sp-22); }
.s4r-prosa h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: var(--sp-8);
                scroll-margin-top: var(--sp-22); }
.s4r-prosa ul, .s4r-prosa ol { padding-left: var(--sp-6); display: grid; gap: var(--sp-3); }
.s4r-prosa ul { list-style: disc; }
.s4r-prosa ol { list-style: decimal; }
.s4r-prosa img { border-radius: var(--radius-xl); }
.s4r-prosa figcaption { margin-top: var(--sp-3); font-size: var(--fs-legal); color: var(--muted); }
.s4r-prosa blockquote { background: var(--wash); border-radius: var(--radius-xl);
                        padding: var(--sp-6); font-size: var(--fs-lead); }
.s4r-prosa a { font-weight: 600; }

/* Tabela do editor (ex.: politica de privacidade). Wrapper com scroll
   horizontal porque uma tabela de 3 colunas nao cabe em 360px. */
.s4r-tabela-wrap { overflow-x: auto; }
.s4r-prosa table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 480px; }
.s4r-prosa th, .s4r-prosa td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.s4r-prosa th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.s4r-prosa td { color: var(--muted); }

/* ---------- Indice do artigo ---------- */
.s4r-indice li + li { margin-top: var(--sp-3); }
.s4r-indice a { display: block; padding-left: var(--sp-4); color: var(--muted);
                border-left: 2px solid var(--line); font-size: var(--fs-small);
                text-decoration: none; transition: color var(--t-hover) ease, border-color var(--t-hover) ease; }
.s4r-indice a:hover { color: var(--blue); }
.s4r-indice a[aria-current="true"] { color: var(--blue); border-color: var(--blue); font-weight: 600; }

/* ---------- Bloco de autor ---------- */
.s4r-autor { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-4);
             align-items: start; padding-top: var(--sp-8); border-top: 1px solid var(--line); }
.s4r-autor img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* ---------- Cabecalho da pagina de autor ---------- */
.s4r-autor-topo { display: grid; gap: var(--sp-6); }
@media (min-width: 640px) { .s4r-autor-topo { grid-template-columns: auto 1fr; gap: var(--sp-8); } }
.s4r-autor-topo img { width: 160px; height: 160px; border-radius: var(--radius-pill);
                      aspect-ratio: 1; object-fit: cover; box-shadow: var(--shadow-card); }
.s4r-autor-topo__links { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.s4r-autor-topo__links a { width: 44px; height: 44px; display: grid; place-items: center;
                           border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); }
.s4r-autor-topo__links a:hover { border-color: var(--blue); color: var(--blue); }
.s4r-autor-topo__links svg { width: 20px; height: 20px; }

/* ---------- Monograma do autor ----------
   Ocupa o lugar do avatar nos dois blocos de assinatura. Ver s4r_monograma():
   nao ha foto de pessoa no site, e a silhueta cinza do Gravatar era pior que
   a ausencia — parecia defeito e custava uma requisicao externa por artigo.
   Disco de cor da marca com as iniciais: so CSS, nenhuma requisicao. */

.s4r-monograma {
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  color: #fff; font-family: var(--font-heading); font-weight: 800;
  line-height: 1; letter-spacing: .01em;
  -webkit-user-select: none; user-select: none;
}
.s4r-monograma--artigo { width: 64px;  height: 64px;  font-size: 22px; }
.s4r-monograma--topo   { width: 160px; height: 160px; font-size: 54px;
                         box-shadow: var(--shadow-card); }

/* Quatro cores fechadas, sorteadas pelo login do autor. Os tons de teal e
   verde sao versoes escurecidas dos tokens: nos valores originais o branco
   por cima da so 2,5:1 de contraste. Estes quatro ficam todos acima de
   4,5:1. E o laranja fica de fora — e a cor do marcador de conteudo
   pendente (.s4r-slot) e leria como defeito numa assinatura. */
.s4r-monograma--cor-1 { background: var(--blue); }      /* 8,2:1  */
.s4r-monograma--cor-2 { background: #0c7280; }          /* 5,6:1  */
.s4r-monograma--cor-3 { background: #3f7a22; }          /* 5,2:1  */
.s4r-monograma--cor-4 { background: var(--blue-900); }  /* 13,4:1 */

/* ---------- Paginacao numerada ----------
   Numerada e nao scroll infinito, por SEO: o rastreador precisa de link. */
.s4r-paginacao { display: flex; flex-wrap: wrap; gap: var(--sp-2);
                 justify-content: center; margin-top: var(--sp-12); }
.s4r-paginacao .page-numbers {
  min-width: 44px; min-height: 44px; padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-decoration: none;
}
.s4r-paginacao .page-numbers:hover { border-color: var(--blue); color: var(--blue); }
.s4r-paginacao .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.s4r-paginacao .dots { border-color: transparent; }

/* ---------- Newsletter ---------- */
.s4r-news { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .s4r-news { grid-template-columns: 1fr auto; align-items: end; } }

/* O cabecalho e a imagem do artigo precisam nascer na MESMA coluna do corpo.
   Centralizar os dois com margin:auto nao serve: o grid do corpo carrega a
   barra lateral junto, entao seu centro nao e o centro da pagina. Repetir a
   grade e o unico jeito de o titulo cair exatamente sobre o primeiro
   paragrafo. Medido: sem isto, 182px de desalinhamento em 1280. */
.s4r-artigo__topo { display: grid; }
/* Item de grid tem min-width:auto por padrao — uma tabela larga (a politica
   de privacidade tem cinco) empurra a pagina inteira para o lado no mobile.
   Mesma causa do bug documentado em .s4r-grid > *. */
.s4r-artigo__topo > * { min-width: 0; }
@media (min-width: 1024px) {
  .s4r-artigo__topo {
    grid-template-columns: minmax(0, var(--measure-article)) 300px;
    gap: var(--sp-16);
    justify-content: center;
  }
}

/* ---------- Entregaveis e par antes/depois ---------- */

.s4r-entregaveis {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  font-size: 15px; line-height: 1.55; color: var(--muted);
}
.s4r-entregaveis li { position: relative; padding-left: var(--sp-6); }
.s4r-entregaveis li + li { margin-top: var(--sp-2); }
.s4r-entregaveis li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 999px; background: var(--blue);
}

/* O par de numeros e o argumento do card: tabular-nums para os digitos nao
   dancarem entre um card e outro na mesma linha da grade. */
.s4r-antes-depois {
  display: flex; align-items: end; gap: var(--sp-4);
  margin-top: var(--sp-6); flex-wrap: wrap;
}
.s4r-antes-depois__num {
  font-variant-numeric: tabular-nums;
  font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--blue);
  margin-top: var(--sp-1);
}
.s4r-antes-depois__num--antes { color: var(--muted); font-weight: 700; }
.s4r-antes-depois__seta { color: var(--muted); font-size: 20px; line-height: 2.2; }

/* ---------- Card de case no nivel 1 ---------- */

/* Sem numero e sem nome de cliente, o card precisa de corpo proprio: o
   resumo carrega o argumento e a stack ancora no rodape. A coluna flex com
   rodape em auto mantem os "Ver o case" alinhados entre cards de alturas
   diferentes — sem isto o link sobe junto com o texto mais curto. */
.s4r-card-case { display: flex; flex-direction: column; height: 100%; }
.s4r-card-case__resumo {
  margin-top: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-small);
}
.s4r-card-case__rodape { margin-top: auto; padding-top: var(--sp-6); }
.s4r-card-case__rodape p { margin-top: var(--sp-5); }

/* A grade de cases precisa de linhas do tamanho do conteudo, nao do maior
   card da linha — armadilha ja paga antes: sem align-items:start o Grid
   estica todo card ate a altura do vizinho. Aqui e o oposto: queremos o
   esticamento, para o rodape colar embaixo. Por isso stretch explicito. */
.s4r-grid--3 > .s4r-card-case { align-self: stretch; }

.s4r-stack { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.s4r-stack__item {
  padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--wash); color: var(--muted);
  font-size: var(--fs-legal); font-weight: 600;
  white-space: nowrap;
}

/* ---------- Faixa escura com numeros e CTA duplo (quem somos) ---------- */

/* Sobre gradiente escuro a borda azul-claro dos numeros some. Aqui a regua
   e branca translucida, e o numero e branco: contraste de 4.5:1 mantido. */
.s4r-numeros--dark div { border-left-color: rgba(255, 255, 255, .35); }
.s4r-numeros--dark .s4r-num { color: #fff; }

.s4r-band--duplo { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) {
  .s4r-band--duplo {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-12);
  }
}
.s4r-band__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
/* Em 360px dois botoes lado a lado quebram o rotulo em tres linhas. */
@media (max-width: 479px) { .s4r-band__ctas .s4r-btn { width: 100%; } }

/* Selo colorido dos principios: o desenho usa tres cores da paleta, e o
   quadrado e decorativo (aria-hidden), nunca portador de informacao. */
.s4r-selo { display: block; width: 40px; height: 40px; border-radius: var(--radius-md); }
.s4r-selo--1 { background: rgba(37, 99, 235, .12); box-shadow: inset 0 0 0 10px transparent; }
.s4r-selo--2 { background: rgba(13, 148, 136, .14); }
.s4r-selo--3 { background: rgba(132, 204, 22, .18); }
.s4r-selo::after {
  content: ""; display: block; width: 8px; height: 8px; border-radius: 999px;
  margin: 16px 0 0 16px; background: currentColor; opacity: .7;
}
.s4r-selo--1 { color: var(--blue); }
.s4r-selo--2 { color: #0d9488; }
.s4r-selo--3 { color: #65a30d; }

/* Lista de links de navegacao (404): o mesmo desenho da lista de
   entregaveis, mas cada link precisa de alvo de 44px no toque — no 404 a
   lista É a navegação, não texto de apoio. */
.s4r-entregaveis--links li + li { margin-top: 0; }
.s4r-entregaveis--links a {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ---------- Banner de cookies -------------------------------------------
   Fixo no rodape da viewport, abaixo do drawer (z-index 50) para o drawer
   sempre vencer se os dois coincidirem. Comeca [hidden]: so aparece se o
   s4r-cookies.js decidir que ainda nao ha escolha gravada. */
.s4r-cookies {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  padding: var(--sp-5) var(--gutter);
}
.s4r-cookies[hidden] { display: none; }
.s4r-cookies__inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}
.s4r-cookies__inner p { flex: 1 1 420px; margin: 0; color: var(--muted); }
.s4r-cookies__acoes { display: flex; gap: var(--sp-3); flex-shrink: 0; }
.s4r-cookies__acoes .s4r-btn { min-height: 44px; }

/* Botao flutuante do WhatsApp -------------------------------------------
   z-index 44: abaixo do drawer (50) e do banner de cookies (45). O banner
   ocupa a largura toda do rodape e cobriria o botao, entao o botao sobe
   enquanto ele estiver na tela, lendo a altura que o s4r-cookies.js publica
   em --s4r-cookies-altura. Sem o JS a variavel nao existe e o fallback 0px
   deixa o botao no canto, que e o estado correto quando nao ha banner. */
.s4r-whats {
  position: fixed; z-index: 44;
  right: var(--gutter);
  bottom: calc(var(--gutter) + var(--s4r-cookies-altura, 0px));
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: 0 var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--green); color: #fff;
  font-weight: 600; line-height: 1; text-decoration: none;
  box-shadow: var(--shadow-float);
  transition: background-color .2s ease, transform .2s ease, bottom .2s ease;
}
.s4r-whats:hover { background: var(--green-700); color: #fff; transform: translateY(-2px); }
/* Contorno branco: o azul do foco global some sobre o verde do botao. */
.s4r-whats:focus-visible { outline-color: #fff; }
.s4r-whats__icone { width: 26px; height: 26px; flex-shrink: 0; }

/* No celular vira circulo: o rotulo comeria a tela e o aria-label ja nomeia
   o link para leitor de tela. */
@media (max-width: 640px) {
  .s4r-whats { width: 56px; padding: 0; justify-content: center; }
  .s4r-whats__rotulo { display: none; }
}

@media print { .s4r-whats { display: none; } }

/* ---------- Prova rotativa da home --------------------------------------
   Um so bloco escuro alternando depoimento e logos a cada 5s.

   A face inativa NAO sai do fluxo: se saisse (display:none/hidden), a faixa
   passaria a medir so a face visivel e mudaria de altura a cada troca. As
   duas ocupam a mesma celula do grid e a inativa fica invisivel — assim a
   altura e a da maior das duas, fixa, e o resto da pagina nao pula junto.
   visibility:hidden tambem tira a face inativa do leitor de tela e da ordem
   de tabulacao, que e o que display:none dava de bom.

   Sem JS, .js-pronto nunca chega: as duas faces empilham e aparecem
   inteiras. Conteudo invisivel para sempre nao e opcao.                    */
.s4r-prova { display: grid; }
.s4r-prova__controles { display: none; }

.s4r-prova.js-pronto .s4r-prova__slide {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0;
}
.s4r-prova.js-pronto .s4r-prova__slide.is-ativa {
  visibility: visible; opacity: 1;
  animation: s4r-prova-entra .45s ease both;
}

@keyframes s4r-prova-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Parede de logos dentro da faixa escura.

   Os arquivos em assets/img/clientes/ ja saem brancos, com o mesmo tamanho
   de tela (600x240) e o peso otico equalizado por area de tinta — e por isso
   que aqui nao ha ajuste por logo. A margem dentro da tela e pequena de
   proposito: com object-fit: contain, todo respiro embutido no arquivo vira
   logo menor na pagina, e foi o que encolheu a parede na primeira tentativa. Seis marcas de origens diferentes, cada
   uma com sua cor e seu recorte, so leem como um conjunto assim; placa
   branca atras de cada uma deixava a faixa parecendo uma tabela de figurinhas.

   Como sao brancos com transparencia, servem so sobre fundo escuro. Se um
   dia esta faixa virar clara, os logos somem: trocar os arquivos, nao o CSS. */
.s4r-logos--band { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .s4r-logos--band { grid-template-columns: repeat(4, 1fr); } }
.s4r-logos--band img {
  height: 76px; width: 100%; object-fit: contain;
  background: none; border-radius: 0;
  opacity: .8; transition: opacity .2s ease;
}
.s4r-logos--band img:hover { opacity: 1; }

.s4r-prova.js-pronto .s4r-prova__controles {
  grid-area: 2 / 1; display: flex; gap: var(--sp-3);
  justify-content: center; margin-top: var(--sp-8);
}
.s4r-prova__ponto {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: transparent;
  cursor: pointer;
}
.s4r-prova__ponto.is-ativa { background: #fff; }
.s4r-prova__ponto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .s4r-prova.js-pronto .s4r-prova__slide.is-ativa { animation: none; }
}