/* =========================================================================
   Site de divulgação — folha única, sem framework e sem CSS em linha.
   Tokens espelhados de packages/design-tokens/tokens.css (D-012: lá é a
   fonte; aqui é a cópia, e token novo nasce lá primeiro).
   D-005: tema claro apenas. Não há modo escuro aqui, e não é esquecimento.

   A IDEIA DO DESENHO — "casa cheia". O site é foto primeiro, texto depois.
   Cada seção abre com uma fotografia grande de gente rindo, abraçando ou
   dançando; o texto entra curto e quente ao lado dela. Sofisticado aqui
   quer dizer editorial: escala generosa, muito ar, hierarquia forte de
   tipografia (uma serifa de display para os títulos, Nunito Sans no corpo)
   e cor da marca em detalhe preciso — nunca cartão cinza, nunca parede
   vazia. Superfície é creme, branco ou teal claro; terracota é a cor de
   ação (botão), teal é a cor de identidade.

   CONTRASTE — WCAG 2.2 AA (texto normal >= 4,5:1; texto grande e contorno
   >= 3:1). Texto sobre fotografia nunca pousa na foto crua: pousa sobre um
   véu em gradiente de #042A2E (--veu). Como o fundo é uma foto, o número
   não se calcula — mede-se. Estes saíram do pixel MAIS CLARO dentro da
   caixa de cada texto, na página gerada, com o texto escondido:
     abertura, h1 branco (texto grande)      computador 3,95   celular 6,10
     abertura, subtítulo #F2EDE5 (normal)    computador 7,83   celular 7,96
     fechamento, assinatura branca (grande)  computador 6,44   celular 9,14
   As medianas dessas mesmas caixas ficam entre 9 e 13,4:1: o pior pixel é
   um reflexo de janela, não a área por onde a letra corre. Trocar a foto
   de abertura ou a do fechamento obriga a medir de novo; aliviar o véu,
   idem. A receita da medida está em site/README.md.

   Texto principal #102D3A sobre
     creme #F8F6F1 13,33   branco #FFFFFF 14,40   creme-2 #F2EEE7 12,45
     teal claro #E7F3F1 12,68   terra claro #FFF1E6 13,01
   Texto secundário #536171 sobre
     creme #F8F6F1 5,86   branco #FFFFFF 6,33   teal claro #E7F3F1 5,58
     creme-2 #F2EEE7 5,48
   Cor da marca #07666C (kicker, link, contorno de botão) sobre
     creme #F8F6F1 6,22   branco #FFFFFF 6,72   teal claro #E7F3F1 5,91
   Terracota #A54113 (botão de ação, barra da escuta) sobre
     creme #F8F6F1 5,78   branco #FFFFFF 6,24   terra claro #FFF1E6 5,64
     creme-2 #F2EEE7 5,40   e #FFFFFF sobre #A54113 6,24 (texto do botão)
     #FFFFFF sobre #83330E 8,59 (botão de ação com o ponteiro em cima)
   Demais pares:
     #064F54 sobre #FFFFFF 9,32   #FFFFFF sobre #07666C 6,72
     #1B5C93 sobre #EAF3FC 6,24   #157052 sobre #FFFFFF 6,05
   Contorno e forma (>= 3:1, WCAG 1.4.11):
     #788A8D sobre #FFFFFF 3,61   #788A8D sobre #F8F6F1 3,34
     #07666C como anel de foco sobre creme 6,22 e sobre branco 6,72
   --border (#E1E4E0) fica abaixo de 3:1 de propósito e não carrega
   informação: só separa superfície de superfície. Onde o contorno É a
   informação, a cor é --border-forte.
   ========================================================================= */

/* Nunito Sans hospedada localmente (assets/fonts/, licença OFL em
   assets/fonts/OFL-NunitoSans.txt). É a fonte variável oficial do Google
   Fonts (eixo wght 200–1000): um arquivo por subconjunto cobre os pesos
   400 a 800 que o site usa. Zero requisição para fora: o rodapé promete
   isso ao leitor. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/nunito-sans-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: "Nunito Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/nunito-sans-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;
}

/* Fraunces (SIL OFL, licença em assets/fonts/OFL-Fraunces.txt) é a fonte de
   display: só títulos, números dos passos e a assinatura da marca. Tamanho
   óptico 144 — o corte de display, de contraste alto —, subconjunto latin,
   hospedada aqui mesmo como a Nunito Sans. Um arquivo serve os dois pesos
   usados, 600 e 700: é a mesma declaração que o Google Fonts entrega. Se o
   arquivo faltar, os títulos caem na serifa do sistema e a página fica de
   pé do mesmo jeito. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-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: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fraunces-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;
}

:root {
  --bg: #F8F6F1;
  --surface: #FFFFFF;
  --surface-2: #F2EEE7;
  --text: #102D3A;
  --text-muted: #536171;
  --primary: #07666C;
  --primary-pressed: #064F54;
  --primary-soft: #E7F3F1;
  --attention: #A54113;
  --attention-pressed: #83330E;
  --attention-soft: #FFF1E6;
  --attention-borda: #E8C3A6;
  --success: #157052;
  --border: #E1E4E0;
  /* contorno que carrega significado */
  --border-forte: #788A8D;

  --marca-1: #07666C;
  --marca-2: #157052;
  --marca-3: #A54113;
  --marca-4: #5B4B8A;

  /* tons suaves, usados em detalhe */
  --tom-teal: #E7F3F1;
  --tom-verde: #E7F5EC;
  --tom-terra: #FFF1E6;
  --tom-roxo: #F1EBFA;
  --tom-escola: #EAF3FC;
  --tom-casa: #F2ECE1;

  /* o fundo do véu sobre fotografia: o teal da marca, quase preto */
  --veu: 4 42 46;

  --radius-card: 20px;
  --radius-img: 20px;
  --radius-button: 14px;
  --radius-pill: 999px;
  --alvo: 48px;
  --mov: 180ms;
  --shadow-tela: 0 22px 54px rgb(16 45 58 / 14%);
  --shadow-foto: 0 18px 40px rgb(16 45 58 / 12%);

  --font-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", Times, serif;

  --larg: 74rem;
  --gutter: clamp(16px, 4vw, 32px);
  --secao-y: clamp(52px, 7vw, 112px);

  --fs-display: clamp(2.6rem, 1.5rem + 4.2vw, 4.6rem);
  --fs-h1-interna: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
}

/* --- base -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.s-sprite { display: none; }

h1, h2, h3 { line-height: 1.12; text-wrap: balance; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
svg { display: block; }
img { max-width: 100%; height: auto; }

a { color: var(--primary); transition: color var(--mov) ease-out; }
a:hover { color: var(--primary-pressed); }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}
main:focus { outline: none; }

.s-larg {
  width: 100%;
  max-width: var(--larg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.s-ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-ico--mini { width: 18px; height: 18px; }

/* --- pular para o conteúdo --------------------------------------------- */

.s-pular { position: absolute; left: -9999px; top: 0; }
.s-pular:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding: 0 20px;
  background: var(--primary);
  color: var(--surface);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-tela);
}

/* --- cabeçalho ---------------------------------------------------------- */

.s-topo {
  position: relative;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.s-topo__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 18px;
  padding-block: 4px;
}

.s-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--alvo);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}
.s-marca__roda { width: 30px; height: 30px; flex: 0 0 auto; }
.s-marca__nome {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.s-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-inline-start: auto;
}
.s-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding: 0 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--mov) ease-out, color var(--mov) ease-out;
}
.s-nav__link:hover { background: var(--primary-soft); color: var(--primary-pressed); }
.s-nav__link--atual {
  color: var(--primary);
  box-shadow: inset 0 -3px 0 var(--primary);
  border-radius: 10px 10px 0 0;
}

/* No celular os dois destinos do menu (D-021) cabem na mesma linha da marca,
   sem faixa própria e sem encolher a letra. O que muda é o respiro lateral:
   com 10 px de cada lado o alvo mais curto ("Início") passa de 42,6 px para
   ~50 px de largura, acima dos 44 px que o toque pede em ambos os eixos. */
@media (max-width: 46rem) {
  .s-nav { gap: 4px; }
  .s-nav__link { padding: 0 10px; }
}

/* --- tipografia comum --------------------------------------------------- */

.s-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.06;
}
.s-h2 { font-size: var(--fs-h2); }
.s-h1-interna { font-size: var(--fs-h1-interna); }

.s-kicker {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.s-lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 62ch;
  line-height: 1.55;
}
.s-lead--grande {
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  color: var(--text);
  line-height: 1.38;
  max-width: 36ch;
}

.s-nota {
  margin-top: clamp(16px, 2.4vw, 28px);
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 78ch;
}

.s-legenda { font-size: 0.8125rem; color: var(--text-muted); text-align: center; }

/* --- botões ------------------------------------------------------------- */

.s-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 30px);
}

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo);
  padding: 0 26px;
  border-radius: var(--radius-button);
  font-size: 1.0625rem;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color var(--mov) ease-out,
              border-color var(--mov) ease-out,
              color var(--mov) ease-out,
              transform var(--mov) ease-out;
}
.s-btn:active { transform: translateY(1px); }

.s-btn--primario { background: var(--attention); color: var(--surface); }
.s-btn--primario:hover { background: var(--attention-pressed); color: var(--surface); }

.s-btn--contorno { border-color: var(--primary); color: var(--primary); }
.s-btn--contorno:hover { background: var(--primary-soft); color: var(--primary-pressed); }

.s-btn--claro { border-color: rgb(255 255 255 / 76%); color: #FFFFFF; }
.s-btn--claro:hover { background: rgb(255 255 255 / 16%); color: #FFFFFF; }

/* --- seções ------------------------------------------------------------- */

.s-secao { padding-block: var(--secao-y); }
.s-secao--creme { background: var(--surface-2); }
.s-secao--teal { background: var(--primary-soft); }
.s-secao--sem-topo { padding-top: 0; }
/* quando a seção seguinte tem o mesmo fundo e continua o mesmo assunto: o ar
   entre as duas é um só, não a soma de dois */
.s-secao--sem-base { padding-bottom: clamp(26px, 3.4vw, 48px); }

/* A cabeça da seção limita a LINHA, não a caixa: a caixa continua sendo a
   coluna da página, senão o título desalinha do conteúdo que vem abaixo. */
.s-cabeca > * { max-width: 46rem; }
.s-cabeca > * + * { margin-top: 14px; }
.s-cabeca--centro { text-align: center; }
.s-cabeca--centro > * { margin-inline: auto; }

/* --- vaga de imagem ----------------------------------------------------- */

.s-vaga {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--surface-2);
}
.s-vaga picture { display: block; height: 100%; }
.s-vaga__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.s-vaga--r169 { aspect-ratio: 16 / 9; }
.s-vaga--r45 { aspect-ratio: 4 / 5; }
.s-vaga--r11 { aspect-ratio: 1 / 1; }
.s-vaga--r43 { aspect-ratio: 4 / 3; }
.s-vaga--r32 { aspect-ratio: 3 / 2; }
.s-vaga--r31 { aspect-ratio: 3 / 1; }
.s-vaga--banner { aspect-ratio: 960 / 717; }

/* a ilustração provisória: só aparece se o arquivo da foto faltar */
.s-vaga__art {
  width: min(52%, 180px);
  height: auto;
  margin: clamp(28px, 7vw, 64px) auto;
  opacity: 0.85;
}
.s-vaga__nota {
  position: absolute;
  inset-inline: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 92%);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.s-vaga--teal { background: var(--tom-teal); }
.s-vaga--verde { background: var(--tom-verde); }
.s-vaga--terra { background: var(--tom-terra); }
.s-vaga--roxo { background: var(--tom-roxo); }
.s-vaga--escola { background: var(--tom-escola); }
.s-vaga--casa { background: var(--tom-casa); }

/* --- abertura em tela cheia --------------------------------------------- */

.s-abertura {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 84svh;
  padding-block: clamp(40px, 7vw, 80px);
  background: var(--primary-pressed);
  overflow: hidden;
}
.s-abertura__foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.s-abertura__foto picture { display: block; height: 100%; }
.s-abertura__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.s-abertura__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgb(var(--veu) / 94%) 0%,
      rgb(var(--veu) / 88%) 22%,
      rgb(var(--veu) / 72%) 44%,
      rgb(var(--veu) / 40%) 64%,
      rgb(var(--veu) / 10%) 84%,
      rgb(var(--veu) / 0%) 100%);
}
.s-abertura__in { position: relative; z-index: 2; }
.s-abertura__h1 {
  max-width: 16ch;
  font-size: var(--fs-display);
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 2px 20px rgb(var(--veu) / 50%);
}
.s-abertura__lead {
  margin-top: clamp(14px, 1.8vw, 22px);
  max-width: 44ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.6vw, 1.375rem);
  color: #F2EDE5;
  line-height: 1.5;
}

/* No celular a foto é a de retrato, e ela é alta: a roda de gente fica na
   metade de baixo do arquivo. Para o título não pousar em cima dos rostos,
   a abertura cresce (o texto ocupa uma fatia menor da tela) e o bloco de
   texto encolhe um pouco. */
@media (max-width: 46rem) {
  .s-abertura { min-height: 84svh; padding-block: 28px; }
  /* a caixa da foto sobe 20% além do topo: o que sai é céu, e a roda de
     gente sobe para a metade de cima, acima do título */
  .s-abertura__foto { top: -20%; }
  .s-abertura__h1 { max-width: 13ch; }
  .s-abertura__lead { max-width: 38ch; }
  .s-abertura .s-acoes { gap: 10px; }
}

/* --- abertura das páginas internas -------------------------------------- */

.s-abertura-interna { background: var(--bg); }
.s-abertura-interna .s-sangra__in > * + * { margin-top: 16px; }
/* no celular a foto de abertura das internas também é grande: ela é a
   primeira coisa que a página mostra */
@media (max-width: 63.99rem) {
  /* altura fixa e proporção livre: com aspect-ratio junto, a altura viraria
     largura (16/9 de 44svh dá mais que a tela) e a página rolaria de lado */
  .s-abertura-interna .s-sangra__fig .s-vaga { aspect-ratio: auto; height: 44svh; }
}

/* --- faixa de foto de ponta a ponta -------------------------------------- */

.s-faixa { width: 100%; height: clamp(200px, 30vw, 380px); }
.s-faixa--alta { height: clamp(240px, 38vw, 500px); }
.s-faixa .s-vaga { height: 100%; aspect-ratio: auto; border-radius: 0; }
.s-faixa .s-vaga__img { object-position: 50% 46%; }

/* --- bloco que sangra até a borda --------------------------------------- */

.s-sangra { display: grid; }
.s-sangra__fig { min-height: 0; }
.s-sangra__fig .s-vaga { border-radius: 0; height: 100%; }
.s-sangra__txt { display: flex; }
.s-sangra__in {
  width: 100%;
  padding-inline: var(--gutter);
  padding-block: clamp(30px, 5vw, 56px);
}
.s-sangra__in > * + * { margin-top: 16px; }
.s-sangra__in .s-lead + .s-blocos-leves,
.s-sangra__in .s-lead + .s-lista { margin-top: clamp(22px, 2.8vw, 32px); }

@media (min-width: 64rem) {
  .s-sangra { grid-template-columns: 1fr 1fr; align-items: center; }
  .s-sangra__fig { align-self: stretch; }
  .s-sangra__fig .s-vaga { aspect-ratio: auto; min-height: 30rem; }
  .s-sangra__fig--alta .s-vaga { min-height: 34rem; }
  .s-sangra__in { width: min(100%, calc(var(--larg) / 2)); }
  .s-sangra--esq .s-sangra__in { margin-inline-end: auto; }
  .s-sangra--dir .s-sangra__fig { order: 2; }
  .s-sangra--dir .s-sangra__txt { order: 1; }
  .s-sangra--dir .s-sangra__in { margin-inline-start: auto; }
}

/* --- mosaico editorial --------------------------------------------------- */

.s-mosaico {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(28px, 4vw, 52px);
}
.s-mos {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-img);
  transition: transform var(--mov) ease-out, box-shadow var(--mov) ease-out;
}
.s-mos:hover { transform: translateY(-2px); box-shadow: var(--shadow-foto); }
.s-mos:hover .s-vaga__img { transform: scale(1.04); }
.s-mos .s-vaga { height: 100%; aspect-ratio: auto; border-radius: 0; }
.s-mos__leg {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 36px 18px 14px;
  background: linear-gradient(to top,
    rgb(var(--veu) / 88%) 0%, rgb(var(--veu) / 54%) 55%, rgb(var(--veu) / 0%) 100%);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 700;
}
.s-mos--abraco { grid-column: span 2; aspect-ratio: 5 / 4; }
.s-mos--irmaos { aspect-ratio: 1 / 1; }
.s-mos--cozinha { aspect-ratio: 1 / 1; }
.s-mos--quintal { grid-column: span 2; aspect-ratio: 3 / 2; }

@media (min-width: 48rem) {
  .s-mosaico {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(160px, 18vw, 272px);
  }
  .s-mos { aspect-ratio: auto; }
  .s-mos--abraco { grid-column: 1 / 6; grid-row: 1 / 3; }
  .s-mos--irmaos { grid-column: 6 / 10; grid-row: 1; }
  .s-mos--cozinha { grid-column: 10 / 13; grid-row: 1; }
  .s-mos--quintal { grid-column: 6 / 13; grid-row: 2; }
  .s-mos__leg { padding: 44px 22px 18px; font-size: 1rem; }
}

/* --- texto com uma foto ao lado ------------------------------------------
   Duas colunas de texto e uma de foto, tudo dentro da coluna da página (ao
   contrário do .s-sangra, que vai até a borda e não alinha com o que vem
   depois). É o que quebra as paredes de ícone+título+texto: a seção de
   privacidade da inicial e a abertura do socorro no aplicativo.
   No celular vira uma coluna, e a foto entra DEPOIS do texto — a pessoa lê
   do que se trata e a foto respira o trecho em vez de atrasá-lo. */

.s-com-foto {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
.s-com-foto__fig .s-vaga { box-shadow: var(--shadow-foto); }

@media (min-width: 64rem) {
  .s-com-foto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-com-foto > :first-child { grid-column: span 2; }

  /* Variante de três peças — cabeça, foto, resto do texto. A foto ocupa a
     terceira coluna nas duas linhas, e o texto corre ao lado dela em vez de
     deixar um buraco embaixo da cabeça. No celular a ordem é a do HTML:
     cabeça, foto, resto — a foto quebra o texto onde ele começa a ficar
     longo, e não no fim dele. */
  .s-com-foto--tres > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .s-com-foto--tres > :nth-child(2) { grid-column: 3; grid-row: 1 / span 2; }
  .s-com-foto--tres > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .s-com-foto--tres .s-lista--duas { margin-top: 0; }
}

/* --- uma foto sozinha, para partir um trecho longo -----------------------
   Fica contida e centrada, com legenda embaixo: não vira faixa de ponta a
   ponta porque uma foto 4:3 ou 1:1 não sobrevive ao corte de uma faixa —
   sairiam as cabeças. */

.s-foto-solo {
  display: grid;
  gap: 10px;
  max-width: 44rem;
  margin-inline: auto;
}
.s-foto-solo--estreita { max-width: 32rem; }
.s-foto-solo .s-vaga { box-shadow: var(--shadow-foto); }
/* Reenquadra para a direita: o arquivo desta vaga veio com uma faixa de
   parede vazia na borda esquerda (cerca de 22% da largura), e um quadro 1:1
   alinhado à direita corta exatamente essa faixa — a roda fica centrada.
   Não é regra geral: é o conserto de um enquadramento, e some no dia em que
   o arquivo for trocado por um sem a faixa. */
.s-foto-solo--corte-dir { max-width: 34rem; }
.s-foto-solo--corte-dir .s-vaga { aspect-ratio: 1 / 1; }
.s-foto-solo--corte-dir .s-vaga__img { object-position: 100% 50%; }

/* --- o caminho para a rotina com previsibilidade (D-021) ------------------
   Uma linha só, no fim da inicial, antes do fechamento. */

/* o padding de cima existe para a margem da linha não vazar da seção e abrir
   uma faixa do fundo do corpo entre esta seção e a de cima, que é creme igual */
.s-rotina {
  background: var(--surface-2);
  padding-block: clamp(8px, 1vw, 16px) clamp(36px, 4.6vw, 64px);
}

/* --- trio de pontos ------------------------------------------------------ */

.s-pontos {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(30px, 4vw, 54px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--border);
}
.s-ponto > * + * { margin-top: 8px; }
.s-ponto p { color: var(--text-muted); max-width: 40ch; }
.s-ponto__t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-h3);
  font-weight: 800;
}
.s-ponto__ico { color: var(--primary); }

@media (min-width: 48rem) {
  .s-pontos { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
}

/* --- passos numerados ---------------------------------------------------- */

.s-passos {
  counter-reset: passo;
  display: grid;
  gap: clamp(26px, 3vw, 34px);
  margin-top: clamp(30px, 4vw, 52px);
}
.s-passo {
  counter-increment: passo;
  position: relative;
  padding-inline-start: 74px;
}
.s-passo::before {
  content: counter(passo);
  position: absolute;
  inset-inline-start: 0;
  top: -8px;
  width: 54px;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--attention);
  font-variant-numeric: tabular-nums;
}
.s-passo::after {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: 46px;
  bottom: -34px;
  width: 2px;
  background: var(--primary);
  opacity: 0.22;
}
.s-passo:last-child::after { display: none; }
.s-passo__t { font-size: var(--fs-h3); font-weight: 800; }
.s-passo__p { margin-top: 6px; color: var(--text-muted); max-width: 40ch; }

@media (min-width: 62rem) {
  .s-passos { grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 2.6vw, 40px); }
  .s-passo { padding-inline-start: 0; padding-top: 70px; }
  .s-passo::before { top: 0; font-size: 3.5rem; }
  .s-passo::after {
    inset-inline-start: 62px;
    inset-inline-end: -30px;
    top: 32px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

/* --- um dia na casa ------------------------------------------------------ */

.s-dia {
  display: grid;
  gap: clamp(30px, 4vw, 58px);
  margin-top: clamp(34px, 4.6vw, 66px);
}
.s-dia__texto > * + * { margin-top: 14px; }

.s-momentos {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  margin-top: clamp(24px, 3vw, 34px);
}
.s-momento {
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--primary-soft);
}
.s-momento__q {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.s-momento__t { margin-top: 2px; font-size: var(--fs-h3); font-weight: 800; }
.s-momento__p { margin-top: 4px; color: var(--text-muted); max-width: 54ch; }

.s-pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(22px, 2.8vw, 30px);
}
.s-pilula {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-pressed);
  font-size: 0.875rem;
  font-weight: 700;
}

.s-linha-discreta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 62ch;
}
.s-linha-discreta a { font-weight: 800; }
.s-linha-discreta--centro {
  justify-content: center;
  text-align: center;
  margin-inline: auto;
  max-width: 56ch;
}

/* No celular o texto vem antes da telinha: primeiro se diz que seção é
   esta, depois se mostra o exemplo. No computador a telinha volta para a
   coluna da esquerda. */
.s-dia__texto { order: 1; }
.s-tela-fig { order: 2; }

@media (min-width: 62rem) {
  .s-dia { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: center; }
  .s-dia__texto { order: 2; }
  .s-tela-fig { order: 1; }
}

/* --- a telinha de exemplo ------------------------------------------------ */

.s-tela-fig { display: grid; gap: 10px; justify-items: center; }
.s-tela {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 16px;
  box-shadow: var(--shadow-tela);
}
.s-tela > * + * { margin-top: 12px; }
.s-tela__topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.s-tela__saudacao { font-weight: 800; font-size: 1.0625rem; }
.s-tela__data { color: var(--text-muted); font-size: 0.875rem; }
.s-tela__secao {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.s-tela__agora {
  background: var(--bg);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--primary);
  border-radius: 14px;
  padding: 14px;
}
.s-tela__agora > * + * { margin-top: 7px; }
.s-tela__quando {
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.s-tela__cat {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--tom-escola);
  color: #1B5C93;
  font-size: 0.75rem;
  font-weight: 800;
}
.s-tela__ativ { font-size: 1.0625rem; font-weight: 800; line-height: 1.25; }
.s-tela__passos { display: grid; gap: 7px; }
.s-tela__passo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.s-tela__marca { color: var(--border-forte); }
.s-tela__passo--feito { color: var(--text); }
.s-tela__marca--feito { color: var(--success); }
.s-tela__acoes { display: grid; gap: 7px; }
.s-tela__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-size: 0.9375rem;
  font-weight: 800;
  text-align: center;
}
.s-tela__btn--primario { background: var(--primary); color: var(--surface); }
.s-tela__proximos { display: grid; gap: 7px; }
.s-tela__proximos li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.9375rem;
}
.s-tela__hora { font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }

/* --- blocos leves (no aparelho) ------------------------------------------ */

.s-blocos-leves { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.s-bloco-leve {
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--attention-borda);
}
.s-bloco-leve__t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-h3);
  font-weight: 800;
}
.s-bloco-leve__ico { color: var(--attention); }
.s-bloco-leve p { margin-top: 6px; color: var(--text-muted); max-width: 52ch; }

/* --- promessas de privacidade -------------------------------------------- */

.s-promessas {
  display: grid;
  gap: clamp(22px, 3vw, 38px);
  margin-top: clamp(28px, 4vw, 48px);
}
.s-promessa > * + * { margin-top: 8px; }
.s-promessa p { color: var(--text-muted); max-width: 46ch; }
.s-promessa__t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-h3);
  font-weight: 800;
}
.s-promessa__ico { color: var(--primary); }

@media (min-width: 48rem) {
  .s-promessas { grid-template-columns: repeat(2, 1fr); }
}

/* A escuta de segurança (D-008) é a regra mais pesada da página: vem num
   bloco quente, com barra terracota, e não passa despercebida. */
.s-escuta {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius-card);
  background: var(--attention-soft);
  border-inline-start: 5px solid var(--attention);
}
.s-escuta__t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-h3);
  font-weight: 800;
}
.s-escuta__ico { color: var(--attention); }
.s-escuta__p { margin-top: 8px; max-width: 76ch; }

/* --- o nome -------------------------------------------------------------- */

.s-nome { display: grid; gap: clamp(20px, 3vw, 40px); }
.s-nome__cabeca > * + * { margin-top: 14px; }
.s-nome__corpo > * + * { margin-top: 14px; }
.s-nome__p { color: var(--text-muted); max-width: 54ch; }

@media (min-width: 62rem) {
  .s-nome { grid-template-columns: 1fr 1fr; align-items: start; }
  .s-nome__corpo { padding-top: 8px; }
}

/* --- perguntas ------------------------------------------------------------ */

.s-perguntas {
  max-width: 46rem;
  margin-top: clamp(24px, 3.4vw, 40px);
  margin-inline: auto;
  border-top: 1px solid var(--border);
}
.s-pergunta { border-bottom: 1px solid var(--border); }
.s-pergunta__p {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--alvo);
  padding-block: 14px;
  padding-inline-end: 6px;
  font-size: var(--fs-h3);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  transition: color var(--mov) ease-out;
}
.s-pergunta__p::-webkit-details-marker { display: none; }
.s-pergunta__p:hover { color: var(--primary); }
.s-pergunta__p::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-inline-start: auto;
  flex: 0 0 auto;
  border-right: 2.5px solid var(--primary);
  border-bottom: 2.5px solid var(--primary);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--mov) ease-out;
}
.s-pergunta[open] .s-pergunta__p::after { transform: translateY(3px) rotate(225deg); }
.s-pergunta__r {
  padding-bottom: 20px;
  padding-inline-end: 36px;
  color: var(--text-muted);
  max-width: 68ch;
}

/* --- blocos de texto das páginas internas -------------------------------- */

.s-blocos { display: grid; gap: clamp(28px, 3.6vw, 46px); }
.s-bloco > * + * { margin-top: 10px; }
.s-bloco__t {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  letter-spacing: -0.01em;
}
.s-bloco__ico { color: var(--primary); }
.s-bloco__p { color: var(--text-muted); max-width: 56ch; }

@media (min-width: 56rem) {
  .s-blocos { grid-template-columns: repeat(2, 1fr); gap: clamp(34px, 4vw, 60px); }
}

.s-lista { display: grid; gap: 9px; }
.s-lista li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--text-muted);
  max-width: 64ch;
}
.s-lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.s-lista--nao li::before {
  top: 0.74em;
  height: 3px;
  width: 12px;
  border-radius: 2px;
  background: var(--attention);
}
.s-lista--duas { margin-top: clamp(24px, 3vw, 38px); }
@media (min-width: 56rem) {
  /* duas colunas de jornal, não grade: em grade cada par de itens fica preso
     à altura do mais alto e abre buracos no meio da lista */
  .s-lista--duas { display: block; columns: 2; column-gap: clamp(28px, 4vw, 56px); }
  .s-lista--duas li { break-inside: avoid; margin-bottom: 12px; max-width: 52ch; }
}

.s-aviso {
  display: flex;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px);
  border-radius: var(--radius-card);
  background: var(--attention-soft);
  border-inline-start: 4px solid var(--attention);
  font-size: 0.9375rem;
  max-width: 62ch;
}
.s-aviso .s-ico { color: var(--attention); }

.s-onde {
  margin-top: clamp(24px, 3vw, 36px);
  max-width: 54rem;
  border-top: 1px solid var(--border);
}
.s-onde__linha {
  display: grid;
  gap: 4px 24px;
  padding-block: clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--border);
}
.s-onde__t { font-size: var(--fs-h3); font-weight: 800; }
.s-onde__o-que { color: var(--text-muted); }
@media (min-width: 48rem) {
  .s-onde__linha { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}

.s-fim { max-width: 42rem; margin-inline: auto; text-align: center; }
.s-fim > * + * { margin-top: 16px; }
.s-fim .s-lead { margin-inline: auto; }
.s-fim .s-acoes { justify-content: center; }

.s-roda-media { width: 72px; height: 72px; margin-inline: auto; }
.s-roda-grande { width: clamp(84px, 11vw, 120px); height: auto; }

/* --- fechamento sobre a roda no quintal ---------------------------------- */

.s-fecho {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(24rem, 56svh, 32rem);
  padding-block: clamp(48px, 7vw, 96px);
  background: var(--primary-pressed);
  overflow: hidden;
}
.s-fecho__foto { position: absolute; inset: 0; z-index: 0; }
.s-fecho__foto .s-vaga { height: 100%; aspect-ratio: auto; border-radius: 0; }
.s-fecho__foto .s-vaga__img { object-position: 50% 42%; }
.s-fecho__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgb(var(--veu) / 92%) 0%,
      rgb(var(--veu) / 80%) 44%,
      rgb(var(--veu) / 48%) 100%);
}
/* no celular o texto atravessa a faixa inteira, então o véu deixa de ser
   lateral e passa a cobrir tudo: a assinatura é grande, mas precisa dos
   seus 3:1 também na borda direita da foto */
@media (max-width: 46rem) {
  .s-fecho__veu {
    background:
      linear-gradient(to top,
        rgb(var(--veu) / 90%) 0%,
        rgb(var(--veu) / 82%) 60%,
        rgb(var(--veu) / 72%) 100%);
  }
}
.s-fecho__in {
  position: relative;
  z-index: 2;
  /* a roda da marca sobre fundo escuro: os pontos clareiam para manter a
     forma legível (>= 3:1) e o anel deixa de ser um cinza invisível */
  --marca-1: #7FD3CE;
  --marca-2: #92D9AF;
  --marca-3: #F2B189;
  --marca-4: #B9A9E6;
  --border: rgb(255 255 255 / 52%);
}
.s-fecho__assinatura {
  margin-top: clamp(20px, 3vw, 32px);
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}

/* --- rodapé --------------------------------------------------------------- */

.s-rodape {
  background: var(--primary-soft);
  padding-block: clamp(40px, 5.4vw, 72px);
}
.s-rodape__in { display: grid; gap: clamp(26px, 3.4vw, 44px); }
.s-rodape__marca .s-marca__roda { width: 44px; height: 44px; }
.s-rodape__nome {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  letter-spacing: -0.01em;
}
.s-rodape__assinatura { color: var(--primary); font-weight: 700; }
.s-rodape__sobre {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 40ch;
}
.s-rodape__titulo {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.s-rodape__nav ul { display: grid; gap: 2px; justify-items: start; }
/* o respiro lateral é o que leva o alvo mais curto ("Início", 41 px de
   texto) para além dos 44 px nos dois eixos; a margem negativa devolve o
   alinhamento óptico com o título da coluna */
.s-rodape__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 6px;
  margin-inline-start: -6px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}
.s-rodape__nav a:hover { text-decoration: underline; }
/* o menu do topo tem só dois destinos (D-021): nas páginas que saíram dele,
   é o rodapé que diz onde a pessoa está. Sublinhado e cor de texto, nunca
   só cor. */
.s-rodape__nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.s-rodape__estado ul { display: grid; gap: 8px; }
.s-rodape__estado li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 40ch;
}
.s-rodape__estado li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

@media (min-width: 56rem) {
  .s-rodape__in { grid-template-columns: 1.4fr 1fr 1.3fr; gap: clamp(28px, 4vw, 64px); }
}

/* --- movimento ------------------------------------------------------------
   Duas coisas se movem, e as duas são de entrada, nunca em laço:
   (1) a foto de abertura tem um Ken Burns lento de 16 s, que para no fim;
   (2) cada bloco surge uma vez ao entrar na tela, pela linha do tempo de
   rolagem do próprio CSS — sem JavaScript, porque a página promete não ter
   nenhum, e o build reprova <script> na saída. Onde a linha do tempo de
   rolagem não existe, o bloco simplesmente já nasce visível: o estado
   padrão de todo elemento aqui é opacidade 1, sem deslocamento.
   Em prefers-reduced-motion nada disso acontece.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .s-abertura__img { animation: s-kenburns 16s cubic-bezier(0.22, 1, 0.36, 1) both; }

  @supports (animation-timeline: view()) {
    .s-rev {
      animation: s-surgir linear both;
      animation-timeline: view();
      /* começa em entry 0%: um bloco que já está inteiro na tela quando a
         página carrega — ao abrir direto numa âncora, por exemplo — já
         passou do fim da faixa e o preenchimento `both` o deixa visível.
         Terminar em 25% faz o bloco chegar por inteiro antes de ficar no
         meio da tela, e não depois. */
      animation-range: entry 0% entry 25%;
    }
  }
}

/* Impressão e PDF não têm linha do tempo de rolagem: sem isto, toda seção
   com .s-rev sairia em branco (opacidade 0) na folha. Mesmo motivo pelo qual
   a captura de página inteira precisa de janelas por posição de rolagem. */
@media print {
  .s-rev {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .s-abertura__img { animation: none !important; }
}

@keyframes s-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@keyframes s-surgir {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

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