/* ==========================================================================
   Climatizei · Sistema visual do site
   Base: brandbook (cores, Poppins, escala 1,414) e especificação do site v1.1
   ========================================================================== */

/* ---------- 1. Fontes (Poppins local, licença OFL) ---------- */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Cores da marca */
  --violeta: #8F00FF;
  --violeta-2: #A22AFF;
  --violeta-3: #B455FF;
  --violeta-4: #C780FF;
  --violeta-5: #DAAAFF;
  --violeta-6: #ECD5FF;

  --limao: #ADFF02;
  --limao-2: #BBFF2C;
  --limao-3: #C8FF56;
  --limao-4: #D6FF81;
  --limao-5: #E4FFAB;
  --limao-6: #F1FFD5;

  --off: #F4F7F6;
  --off-2: #F6F8F8;
  --off-3: #F8FAF9;
  --off-4: #FAFBFB;
  --off-5: #FBFCFC;
  --branco: #FDFEFE;

  --tinta: #2A0A4D;          /* texto longo sobre claro (15,6:1 no off-white) */
  --linha: #E3E0EA;          /* bordas e divisórias sobre claro */

  /* Papéis (tema claro, padrão das seções de leitura) */
  --bg: var(--off);
  --bg-elevado: var(--branco);
  --texto: var(--tinta);
  --titulo: var(--violeta);
  --destaque: var(--violeta);   /* no claro, o destaque é violeta; o limão nunca entra no claro */
  --logo-accent: var(--violeta);
  --foco: var(--violeta);

  /* Tipografia: escala 1,414 com base 16 px (brandbook) */
  --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-micro: 0.5rem;      /*   8 px · 6 pt     (não usar para leitura) */
  --fs-small: 0.707rem;    /*  11,3 px · 8,49 pt (só notas legais) */
  --fs-p: 1rem;            /*  16 px · 12 pt */
  --fs-h6: 1.414rem;       /*  22,6 px · 16,97 pt */
  --fs-h5: 2rem;           /*  32 px · 23,99 pt */
  --fs-h4: 2.828rem;       /*  45,2 px · 33,92 pt */
  --fs-h3: 4rem;           /*  64 px · 47,97 pt */
  --fs-h2: 5.657rem;       /*  90,4 px · 67,83 pt */
  --fs-h1: 8rem;           /* 128 px · 95,91 pt */
  --fs-lead: 1.189rem;     /*  19 px · meio passo (√1,414), para subtítulos */

  --lh-titulo: 1.15;
  --ls-titulo: -0.022em;
  --lh-texto: 1.6;

  /* Espaçamento em √2 (arredondado) */
  --s-1: 0.25rem;   /*   4 */
  --s-2: 0.5rem;    /*   8 */
  --s-3: 0.707rem;  /*  11 */
  --s-4: 1rem;      /*  16 */
  --s-5: 1.414rem;  /*  23 */
  --s-6: 2rem;      /*  32 */
  --s-7: 2.828rem;  /*  45 */
  --s-8: 4rem;      /*  64 */
  --s-9: 5.657rem;  /*  91 */
  --s-10: 8rem;     /* 128 */

  /* Forma */
  --r-1: 8px;
  --r-2: 16px;
  --r-3: 24px;
  --r-pill: 999px;
  --sombra-1: 0 2px 8px rgba(42, 10, 77, 0.06);
  --sombra-2: 0 16px 48px rgba(143, 0, 255, 0.16);

  /* Layout */
  --largura: 80rem;                         /* 1280 px */
  --margem: clamp(1rem, 4vw, 4rem);         /* 16 a 64 px */
  --cabecalho-h: 4.5rem;

  /* Motion (seção 11.2 da especificação) */
  --ease-brisa: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-respiro: cubic-bezier(0.37, 0, 0.63, 1);
  --t-1: 141ms;
  --t-2: 283ms;
  --t-3: 566ms;
  --t-4: 800ms;
  --t-5: 1131ms;
  --shift: 24px;
  --stagger: 80ms;
}

/* Contexto escuro: seções violeta */
.tema-violeta {
  --bg: var(--violeta);
  --bg-elevado: var(--violeta-2);
  --texto: var(--off);
  --titulo: var(--off);
  --destaque: var(--limao);
  --logo-accent: var(--limao);
  --foco: var(--limao);
  --linha: rgba(244, 247, 246, 0.24);
  background-color: var(--bg);
  color: var(--texto);
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 3.5rem;    /* 56 */
    --fs-h2: 2.828rem;  /* 45 */
    --fs-h3: 2rem;      /* 32 */
    --fs-h4: 1.682rem;  /* 27 */
    --fs-h5: 1.414rem;  /* 23 */
    --fs-h6: 1.189rem;  /* 19 */
    --shift: 16px;
    --cabecalho-h: 4rem;
  }
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cabecalho-h) + var(--s-4));
  interpolate-size: allow-keywords;   /* permite animar altura até "auto" (FAQ) */
}
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-p);
  line-height: var(--lh-texto);
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--titulo);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h3); }  /* no site, h2 de seção usa o nível h3 da escala */
h3, .h3 { font-size: var(--fs-h5); }
h4, .h4 { font-size: var(--fs-h6); }
.display { font-size: var(--fs-h2); }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.55; }
.small { font-size: 0.875rem; }       /* 14 px: menor tamanho de leitura no site */
.realce { color: var(--destaque); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--violeta); color: var(--off); }
.tema-violeta ::selection { background: var(--limao); color: var(--tinta); }

.pular-conteudo {
  position: absolute; left: var(--s-4); top: -100px;
  padding: var(--s-3) var(--s-5);
  background: var(--violeta); color: var(--off);
  border-radius: var(--r-1); z-index: 100;
  transition: top var(--t-2) var(--ease-suave);
}
.pular-conteudo:focus-visible { top: var(--s-4); }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--largura) + var(--margem) * 2);
  margin-inline: auto;
  padding-inline: var(--margem);
}
.secao { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); }
.secao--clara { background: var(--off); }
.secao--branca { background: var(--branco); }
.pilha > * + * { margin-top: var(--s-5); }
.pilha-lg > * + * { margin-top: var(--s-7); }
.grade {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.cabeca-secao { max-width: 46rem; margin-bottom: var(--s-8); }
.cabeca-secao p { margin-top: var(--s-5); }

/* ---------- 5. Sobretítulo (com o pingo do i) ---------- */
.sobretitulo {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--destaque);
  margin-bottom: var(--s-5);
}
.sobretitulo::before {
  content: ""; flex: none;
  width: 0.62em; height: 0.56em;          /* proporção do pingo do i (56,32 × 51,04) */
  border-radius: 50%;
  background: currentColor;
}

/* ---------- 6. Botões ---------- */
.btn {
  --btn-bg: var(--violeta);
  --btn-texto: var(--off);
  --btn-fill: var(--violeta-2);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-texto);
  font-weight: 500; font-size: 1rem; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-1) var(--ease-suave), color var(--t-2) var(--ease-suave);
  -webkit-tap-highlight-color: transparent;
}
/* Círculo que nasce no ponto do cursor (JS define --x e --y; sem JS, nasce no centro) */
.btn::before {
  content: "";
  position: absolute; z-index: -1;
  left: var(--x, 50%); top: var(--y, 50%);
  width: 250%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--t-3) var(--ease-brisa);
}
.btn:hover::before { transform: translate(-50%, -50%) scale(1); }
.btn:active { transform: scale(0.98); }
.btn .seta {
  width: 1.1em; height: 1.1em; flex: none;
  transition: transform var(--t-2) var(--ease-suave);
}
.btn:hover .seta { transform: translateX(4px); }

/* No violeta, o botão principal é verde-limão com texto em tinta */
.tema-violeta .btn {
  --btn-bg: var(--limao);
  --btn-texto: var(--tinta);
  --btn-fill: var(--off);
}
.btn--secundario {
  --btn-bg: transparent;
  --btn-texto: var(--violeta);
  --btn-fill: var(--violeta);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--secundario:hover { --btn-texto: var(--off); color: var(--off); }
.tema-violeta .btn--secundario {
  --btn-bg: transparent;
  --btn-texto: var(--off);
  --btn-fill: var(--off);
}
.tema-violeta .btn--secundario:hover { color: var(--violeta); }
.btn--pequeno { min-height: 2.5rem; padding: 0.6rem 1.15rem; font-size: 0.9375rem; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---------- 7. Links de texto ---------- */
.link {
  color: var(--destaque);
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1.5px;
  padding-bottom: 2px;
  transition: background-size var(--t-3) var(--ease-brisa);
}
.link:hover, .link:focus-visible { background-size: 100% 1.5px; }
.link--seta { display: inline-flex; align-items: center; gap: var(--s-2); }
.link--seta svg { width: 1em; height: 1em; transition: transform var(--t-2) var(--ease-suave); }
.link--seta:hover svg { transform: translateX(4px); }

/* ---------- 8. Logos ---------- */
/* Nome em currentColor e acento em --logo-accent: no violeta sai a versão principal
   (off-white + verde-limão); no claro sai a positiva (tudo violeta) */
.logo { display: block; height: auto; color: var(--titulo); }
.logo--h { width: 10rem; }
.logo--hm { width: 14rem; }
.logo--v { width: 12rem; }
.logo--icone { width: 3rem; }
.floco { width: 1.5rem; height: auto; color: var(--destaque); }

/* ---------- 9. Cabeçalho ---------- */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  height: var(--cabecalho-h);
  transition:
    background-color var(--t-2) var(--ease-suave),
    box-shadow var(--t-2) var(--ease-suave),
    transform var(--t-3) var(--ease-brisa);
}
.cabecalho__interno {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
}
.cabecalho__marca { display: block; text-decoration: none; }
.cabecalho__marca .logo { width: 9rem; }
.cabecalho__nav { display: flex; align-items: center; gap: var(--s-6); }
.cabecalho__nav ul { display: flex; gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.cabecalho__nav a:not(.btn) {
  font-weight: 500; font-size: 0.9375rem; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1.5px;
  padding-bottom: 2px;
  transition: background-size var(--t-3) var(--ease-brisa);
}
.cabecalho__nav a:not(.btn):hover,
.cabecalho__nav a[aria-current="page"] { background-size: 100% 1.5px; }

/* Sobre o hero violeta o cabeçalho herda o tema escuro, mas sem fundo próprio */
.cabecalho.tema-violeta { background-color: transparent; }

/* Estado ao rolar (JS adiciona .is-rolado; .is-oculto ao descer) */
.cabecalho.is-rolado {
  --bg: var(--off);
  --texto: var(--tinta);
  --titulo: var(--violeta);
  --destaque: var(--violeta);
  --logo-accent: var(--violeta);
  --foco: var(--violeta);
  background-color: rgba(244, 247, 246, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--linha);
  color: var(--tinta);
}
.cabecalho.is-rolado .logo { color: var(--violeta); }
.cabecalho.is-rolado .btn { --btn-bg: var(--violeta); --btn-texto: var(--off); --btn-fill: var(--violeta-2); }
.cabecalho.is-oculto { transform: translateY(-100%); }

.menu-botao {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: var(--r-pill);
  background: transparent; cursor: pointer;
  position: relative;
}
.menu-botao span {
  position: absolute; left: 50%; top: 50%;
  width: 1.375rem; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-2) var(--ease-brisa), opacity var(--t-1) var(--ease-suave);
}
.menu-botao span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.menu-botao span:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
.menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 767px) {
  .menu-botao { display: block; }
  .cabecalho__nav {
    position: fixed; inset: var(--cabecalho-h) 0 0 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--s-7);
    padding: var(--s-7) var(--margem) var(--s-8);
    background: var(--violeta); color: var(--off);
    border-top: 1px solid rgba(244, 247, 246, 0.16);
    overflow-y: auto;
    --destaque: var(--limao); --foco: var(--limao);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path var(--t-3) var(--ease-brisa), visibility 0s linear var(--t-3);
  }
  .cabecalho__nav ul { flex-direction: column; gap: var(--s-5); }
  .cabecalho__nav a:not(.btn) { font-size: var(--fs-h5); font-weight: 700; letter-spacing: var(--ls-titulo); }
  .cabecalho__nav .btn { --btn-bg: var(--limao); --btn-texto: var(--tinta); --btn-fill: var(--off); align-self: flex-start; }
  .cabecalho.menu-aberto {
    background-color: var(--violeta);
    color: var(--off);
    --logo-accent: var(--limao);
    --foco: var(--limao);
  }
  .cabecalho.menu-aberto .logo { color: var(--off); }
  .cabecalho.menu-aberto .cabecalho__nav {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path var(--t-3) var(--ease-brisa), visibility 0s;
  }
}

/* ---------- 10. Hero (estrutura base) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--cabecalho-h) * -1);
  padding-top: calc(var(--cabecalho-h) + clamp(var(--s-8), 10vw, var(--s-10)));
  padding-bottom: clamp(var(--s-8), 9vw, var(--s-10));
}
.hero__conteudo { position: relative; z-index: 1; max-width: 62rem; }
.hero h1 { font-size: clamp(2.828rem, 1.2rem + 6vw, var(--fs-h2)); }
.hero .lead { max-width: 40rem; margin-top: var(--s-6); }
.hero .acoes { margin-top: var(--s-7); }

/* Floco como marca d'água */
.marca-dagua {
  position: absolute; z-index: 0; pointer-events: none;
  right: -8%; top: 50%;
  width: min(62vw, 46rem);
  transform: translateY(-50%);
  color: var(--off);
  opacity: 0.08;
}
.marca-dagua .floco { width: 100%; color: inherit; }

/* ---------- 11. Faixa de credibilidade ---------- */
.credenciais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-6);
  padding-block: var(--s-7);
  border-top: 1px solid var(--linha);
}
.credencial strong {
  display: block;
  font-size: var(--fs-h5); font-weight: 700;
  line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo);
  color: var(--destaque);
}
.credencial span { display: block; margin-top: var(--s-2); font-size: 0.9375rem; }

/* ---------- 12. Lista com o pingo do i ---------- */
.lista-ponto { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.lista-ponto li { position: relative; padding-left: 1.6rem; }
.lista-ponto li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 0.62rem; height: 0.56rem;
  border-radius: 50%;
  background: var(--destaque);
}

/* ---------- 13. Cartão de serviço ---------- */
.cartao {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  text-decoration: none;
  color: var(--texto);
  transition:
    transform var(--t-3) var(--ease-brisa),
    box-shadow var(--t-3) var(--ease-brisa),
    border-color var(--t-2) var(--ease-suave);
}
.cartao .floco {
  width: 2.25rem;
  color: var(--violeta);
  transition: transform var(--t-4) var(--ease-brisa);
}
.cartao h3 { font-size: var(--fs-h6); }
.cartao p { opacity: 0.88; }
.cartao .link--seta { margin-top: auto; padding-top: var(--s-3); color: var(--destaque); font-weight: 500; }
a.cartao:hover, .cartao:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2);
  border-color: transparent;
}
a.cartao:hover .floco { transform: rotate(60deg); }   /* um braço do floco */
a.cartao:hover .link--seta svg { transform: translateX(4px); }

/* ---------- 14. Passos (Como funciona) ---------- */
.passos {
  --linha-progresso: 0;          /* motion.js anima de 0 a 1 conforme a rolagem */
  position: relative;
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(3, 1fr);
  counter-reset: passo;
  list-style: none; padding: 0;
}
.passos::before, .passos::after {
  content: "";
  position: absolute; left: 0.75rem; right: 0.75rem; top: 0.75rem;
  height: 2px;
}
.passos::before { background: var(--linha); }
.passos::after {
  background: var(--destaque);
  transform-origin: left center;
  transform: scaleX(var(--linha-progresso));
}
.passo { position: relative; padding-top: var(--s-7); counter-increment: passo; }
.passo::before {
  content: "";
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--destaque);
  transition: background-color var(--t-3) var(--ease-brisa);
}
.passo.is-ativo::before { background: var(--destaque); }
.passo__num { display: block; font-size: 0.875rem; font-weight: 500; color: var(--destaque); margin-bottom: var(--s-3); }
.passo__num::before { content: "0" counter(passo) " · "; }
.passo h3 { font-size: var(--fs-h6); margin-bottom: var(--s-3); }
@media (max-width: 767px) {
  .passos { grid-template-columns: 1fr; gap: var(--s-6); }
  .passos::before, .passos::after {
    left: 0.75rem; right: auto; top: 0.75rem; bottom: 0.75rem;
    width: 2px; height: auto;
  }
  .passos::after { transform-origin: center top; transform: scaleY(var(--linha-progresso)); }
  .passo { padding-top: 0; padding-left: var(--s-7); }
}

/* ---------- 15. Perguntas frequentes ---------- */
.faq { border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0;
  font-weight: 500; font-size: 1.0625rem;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icone {
  position: relative; flex: none;
  width: 1.25rem; height: 1.25rem;
  color: var(--destaque);
  transition: transform var(--t-2) var(--ease-suave);
}
.faq__icone::before, .faq__icone::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq__icone::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icone { transform: rotate(45deg); }
.faq__resposta { padding-bottom: var(--s-5); max-width: 48rem; opacity: 0.9; }
/* Altura animada nos navegadores que suportam ::details-content; nos outros, abre direto */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 400ms var(--ease-suave), content-visibility 400ms allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

/* ---------- 16. Chamada final ---------- */
.chamada {
  position: relative; overflow: hidden;
  border-radius: var(--r-3);
  padding: clamp(var(--s-7), 7vw, var(--s-9));
  background:
    radial-gradient(120% 140% at 85% 0%, var(--violeta-2) 0%, transparent 55%),
    var(--violeta);
}
.chamada__conteudo { position: relative; z-index: 1; max-width: 40rem; }
.chamada h2 { font-size: var(--fs-h4); }
.chamada p { margin-top: var(--s-5); }
.chamada .acoes { margin-top: var(--s-7); }
.chamada .marca-dagua { right: -6%; width: min(48vw, 30rem); opacity: 0.1; }

/* ---------- 17. Rodapé ---------- */
.rodape { padding-block: var(--s-9) var(--s-6); }
.rodape__grade {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
.rodape__marca img { width: 11rem; }
.rodape__marca p { margin-top: var(--s-5); max-width: 18rem; font-size: 0.9375rem; }
.rodape h2 { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--destaque); margin-bottom: var(--s-4); }
.rodape ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); font-size: 0.9375rem; }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-9); padding-top: var(--s-5);
  border-top: 1px solid var(--linha);
  font-size: 0.8125rem;
}
@media (max-width: 900px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ---------- 18. WhatsApp flutuante ---------- */
.whatsapp {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 40;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--violeta); color: var(--off);
  box-shadow: var(--sombra-2);
  transition: transform var(--t-2) var(--ease-suave), opacity var(--t-3) var(--ease-brisa);
}
.whatsapp svg { width: 1.6rem; height: 1.6rem; }
.whatsapp:hover { transform: translateY(-2px); }
.whatsapp[data-oculto] { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* ---------- 19. Aviso de cookies ---------- */
.cookies {
  position: fixed; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); z-index: 60;
  max-width: 34rem;
  display: grid; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--branco); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--r-3);
  box-shadow: var(--sombra-2);
  font-size: 0.9375rem;
}
.cookies[hidden] { display: none; }
.cookies .acoes { gap: var(--s-3); }

/* ---------- 19b. Blocos da home ---------- */
.dividido {
  display: grid;
  gap: clamp(var(--s-7), 6vw, var(--s-9));
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.dividido--texto-primeiro > :first-child { order: 0; }
@media (max-width: 900px) { .dividido { grid-template-columns: 1fr; } }

.bloco-pmoc {
  padding: clamp(var(--s-7), 6vw, var(--s-9));
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
}
.bloco-pmoc h2 { font-size: var(--fs-h4); }
.bloco-pmoc .lead { margin-top: var(--s-5); }
.bloco-pmoc .link--seta { margin-top: var(--s-6); }
.bloco-pmoc__lista {
  padding: var(--s-6);
  background: var(--off);
  border-radius: var(--r-2);
}
.bloco-pmoc__lista p { font-weight: 500; margin-bottom: var(--s-4); }
@media (max-width: 767px) {
  .bloco-pmoc { padding: var(--s-6) var(--s-5); }
  .bloco-pmoc__lista { padding: var(--s-5); }
}

.foto {
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--violeta-6);
  aspect-ratio: 16 / 10;
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { font-size: 0.8125rem; opacity: 0.7; padding: var(--s-3) 0 0; }

.selos { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; padding: 0; }
.selos li {
  padding: 0.55rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 500;
  background: var(--bg-elevado);
}

/* ---------- 19c. Páginas internas e PMOC ---------- */
.hero--interna {
  padding-top: calc(var(--cabecalho-h) + clamp(var(--s-7), 8vw, var(--s-9)));
  padding-bottom: clamp(var(--s-7), 8vw, var(--s-9));
}
.hero--interna h1 { font-size: clamp(2.5rem, 1.2rem + 4.2vw, var(--fs-h3)); }
.hero--interna .marca-dagua { width: min(48vw, 34rem); right: -6%; }

.dividido--topo { align-items: start; }
.dividido--topo h2 { font-size: var(--fs-h4); }

.fatos { display: grid; gap: 0; margin: var(--s-6) 0 0; border-top: 1px solid var(--linha); }
.fatos > div {
  display: grid; grid-template-columns: 9rem 1fr; gap: var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--linha);
}
.fatos dt { font-weight: 500; color: var(--destaque); font-size: 0.9375rem; }
.fatos dd { margin: 0; }
@media (max-width: 560px) { .fatos > div { grid-template-columns: 1fr; gap: var(--s-1); } }

.nota {
  margin-top: var(--s-6);
  padding-left: var(--s-5);
  border-left: 3px solid var(--destaque);
  max-width: 44rem;
}

.entregas {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  list-style: none; padding: 0;
}
.entrega {
  position: relative;
  padding: var(--s-6);
  padding-left: calc(var(--s-6) + 2.25rem);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
}
.entrega h3 { font-size: var(--fs-h6); margin-bottom: var(--s-3); }
.entrega p { opacity: 0.88; }
/* Pingo do i que vira check (motion.js adiciona .is-marcado; sem JS já aparece marcado) */
.entrega__marca {
  position: absolute; left: var(--s-6); top: calc(var(--s-6) + 0.35rem);
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--violeta);
}
.entrega__marca::after {
  content: "";
  position: absolute; left: 50%; top: 46%;
  width: 0.42rem; height: 0.72rem;
  border: solid var(--off); border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.js-motion .entrega__marca { transform: scale(0.45); transition: transform var(--t-3) var(--ease-brisa); }
.js-motion .entrega__marca::after { opacity: 0; transition: opacity var(--t-2) var(--ease-suave) 120ms; }
.js-motion .entrega.is-marcado .entrega__marca { transform: none; }
.js-motion .entrega.is-marcado .entrega__marca::after { opacity: 1; }

.passos--4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
@media (max-width: 1000px) and (min-width: 768px) { .passos--4 { grid-template-columns: repeat(2, 1fr); } .passos--4::before, .passos--4::after { display: none; } }
@media (max-width: 767px) { .passos--4 { grid-template-columns: 1fr; } }

.docs { list-style: none; padding: 0 var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.doc {
  display: grid; gap: var(--s-1);
  padding: var(--s-5) var(--s-6);
  background: var(--off); color: var(--tinta);
  border-radius: var(--r-2);
  box-shadow: 0 18px 40px rgba(42, 10, 77, 0.22);
}
.doc:nth-child(1) { transform: rotate(-1.5deg); }
.doc:nth-child(2) { transform: translateX(var(--s-5)) rotate(1deg); }
.doc:nth-child(3) { transform: rotate(-0.5deg); }
.doc__tipo { font-size: 0.8125rem; font-weight: 500; color: var(--violeta); }
.doc strong { font-size: var(--fs-h6); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); color: var(--violeta); }
.doc span:last-child { font-size: 0.9375rem; }
@media (max-width: 767px) { .docs { padding-right: 0; } .doc:nth-child(2) { transform: rotate(1deg); } }

/* ---------- 19d. Páginas de serviço ---------- */
.hero__grade {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(var(--s-7), 5vw, var(--s-9));
  align-items: center;
}
.hero--servico .hero__conteudo { max-width: none; }
.hero--servico .marca-dagua { opacity: 0.06; }
@media (max-width: 900px) { .hero__grade { grid-template-columns: 1fr; } }

.ilustra {
  position: relative; z-index: 1;
  padding: var(--s-6);
  background: var(--branco); color: var(--tinta);
  border-radius: var(--r-3);
  box-shadow: 0 24px 60px rgba(42, 10, 77, 0.28);
}
.ilustra__rotulo { font-size: 0.8125rem; font-weight: 500; color: var(--violeta); margin-bottom: var(--s-5); }
.ilustra__svg { width: 100%; height: auto; }
.ilustra__selo {
  display: inline-block;
  margin-top: var(--s-5);
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  background: var(--violeta); color: var(--off);
  font-size: 0.8125rem; font-weight: 500;
}

.barras { display: grid; gap: var(--s-5); }
.barra span { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: var(--s-2); }
.barra__trilho { height: 0.9rem; border-radius: var(--r-pill); background: var(--violeta-6); overflow: hidden; }
.barra__valor {
  height: 100%; border-radius: inherit;
  background: var(--violeta);
  transform-origin: left center;
  transform: scaleX(var(--v, 1));
}
.barra--sobra .barra__valor { background: var(--violeta-4); }

.sinais { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.sinais li {
  position: relative;
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.7rem 1rem;
  background: var(--off); border-radius: var(--r-2);
  font-weight: 500; font-size: 0.9375rem;
}
.sinais li::before {
  content: ""; flex: none;
  width: 0.62rem; height: 0.56rem; border-radius: 50%;
  background: var(--violeta);
}
/* risco que atravessa o sinal resolvido (estado final; motion.js anima --risco de 0% a 100%) */
.sinais li span {
  background: linear-gradient(var(--violeta), var(--violeta)) no-repeat 0 55% / var(--risco, 100%) 2px;
}
.sinais li { color: rgba(42, 10, 77, 0.6); }

.pontos {
  list-style: none; padding: 0;
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.ponto { padding-top: var(--s-5); border-top: 2px solid var(--violeta); }
.ponto h3 { font-size: var(--fs-h6); margin-bottom: var(--s-3); }
.ponto p { opacity: 0.88; }

.chamada__alternativa { margin-top: var(--s-6); font-size: 0.9375rem; }

/* ---------- 19e. Equipe, agenda, textos legais e 404 ---------- */
.hero--compacto {
  padding-top: calc(var(--cabecalho-h) + clamp(var(--s-7), 6vw, var(--s-8)));
  padding-bottom: clamp(var(--s-7), 6vw, var(--s-8));
}

.pessoas {
  list-style: none; padding: 0;
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pessoa {
  padding: var(--s-5);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
}
.pessoa__foto {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--s-5);
  border-radius: var(--r-2);
  background: var(--violeta-6);
  overflow: hidden;
}
.pessoa__foto .floco { width: 28%; color: var(--violeta-4); }
.pessoa__foto img { width: 100%; height: 100%; object-fit: cover; }
.pessoa h3 { font-size: var(--fs-h6); }
.pessoa__cargo { color: var(--violeta); font-weight: 500; margin: var(--s-1) 0 var(--s-3); }
.pessoa p { font-size: 0.9375rem; }
.pessoa__credencial { margin-top: var(--s-3); font-size: 0.8125rem !important; opacity: 0.75; }

/* Agenda */
.secao--agenda { padding-top: var(--s-8); }
.agenda-grade {
  display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
}
@media (max-width: 1000px) { .agenda-grade { grid-template-columns: 1fr; } }

.abas {
  display: inline-flex; gap: var(--s-1);
  padding: var(--s-1);
  margin-bottom: var(--s-5);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
}
.aba {
  border: 0; cursor: pointer;
  padding: 0.65rem 1.2rem;
  border-radius: var(--r-pill);
  background: transparent; color: var(--tinta);
  font-weight: 500; font-size: 0.9375rem;
  transition: background-color var(--t-2) var(--ease-suave), color var(--t-2) var(--ease-suave);
}
.aba:hover { background: var(--violeta-6); }
.aba[aria-selected="true"] { background: var(--violeta); color: var(--off); }
@media (max-width: 480px) { .abas { display: flex; } .aba { flex: 1; padding-inline: 0.6rem; font-size: 0.875rem; } }

.agenda {
  position: relative;
  min-height: 40rem;
  padding: var(--s-4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-3);
  overflow: hidden;
}
.agenda__cal { width: 100%; min-height: 38rem; overflow: auto; }
.agenda__cal[hidden] { display: none; }
.agenda__esqueleto { position: absolute; inset: var(--s-4); display: grid; gap: var(--s-5); align-content: start; padding: var(--s-5); }
.agenda__esqueleto[hidden] { display: none; }
.esq { border-radius: var(--r-1); background: var(--violeta-6); }
.esq--titulo { height: 1.5rem; width: 40%; }
.esq-grade { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s-5); }
.esq--cal { height: 22rem; }
.esq-horas { display: grid; gap: var(--s-3); align-content: start; }
.esq-horas .esq { height: 2.75rem; }
.agenda__aviso, .agenda__sucesso {
  display: grid; justify-items: start; gap: var(--s-4);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
}
.agenda__aviso[hidden], .agenda__sucesso[hidden] { display: none; }
.agenda__aviso h2, .agenda__sucesso h2 { font-size: var(--fs-h5); }
.agenda__sucesso { justify-items: center; text-align: center; min-height: 36rem; align-content: center; }
.agenda__sucesso:focus { outline: none; }
.agenda__sucesso-floco { width: 7rem; color: var(--violeta); }
.agenda__sucesso-floco .floco { width: 100%; color: inherit; }
.agenda__sucesso p { max-width: 30rem; }

.agenda-info { display: grid; gap: var(--s-4); }
.agenda-info__bloco {
  padding: var(--s-5);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
}
.agenda-info__bloco h2 { font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-bottom: var(--s-4); }
.agenda-info__bloco .lista-ponto { gap: var(--s-3); font-size: 0.9375rem; }
.agenda-info__bloco--alt { background: var(--violeta-6); border-color: transparent; }
.agenda-info__bloco--alt p { margin-bottom: var(--s-3); font-size: 0.9375rem; }

/* Textos legais */
.texto-legal { max-width: 46rem; }
.texto-legal > * + * { margin-top: var(--s-4); }
.texto-legal h2 { font-size: var(--fs-h6); margin-top: var(--s-7); }
.texto-legal .lista-ponto { gap: var(--s-3); }

/* 404 */
.pagina-404 { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; }
.pagina-404 h1 { font-size: clamp(2.828rem, 1.2rem + 5vw, var(--fs-h2)); }

/* ---------- 20. Motion (seção 11 da especificação) ----------
   Tudo aqui só vale com html.js-motion, que o <head> liga quando a pessoa não pede menos
   movimento. Se motion.js não carregar, a classe sai sozinha em 4 s e nada fica escondido. */

/* 20.1 Entrada ao rolar: estado inicial; motion.js anima com GSAP e adiciona .is-visivel */
.js-motion :is(
  .cabeca-secao > :not(h2), .bloco-pmoc, .cartao, .entrega, .ponto, .pessoa, .passo,
  .faq__item, .selos li, .foto, .chamada, .agenda-info__bloco,
  .dividido:not(.bloco-pmoc) > div, .fatos, .nota, .texto-legal
):not(.is-visivel) {
  opacity: 0;
  transform: translateY(var(--shift));
}
.js-motion .revelando { transition: none !important; }
/* Títulos de seção entram linha por linha (SplitText); escondidos até serem divididos */
.js-motion .cabeca-secao h2:not(.is-dividido) { visibility: hidden; }
.linha-mascara { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* 20.2 Hero das páginas internas: entrada suave no carregamento */
@keyframes entra-subindo { from { opacity: 0; transform: translateY(var(--shift)); } }
.js-motion .hero--interna .hero__conteudo > * {
  animation: entra-subindo var(--t-4) var(--ease-brisa) both;
}
.js-motion .hero--interna .hero__conteudo > :nth-child(2) { animation-delay: 80ms; }
.js-motion .hero--interna .hero__conteudo > :nth-child(3) { animation-delay: 160ms; }
.js-motion .hero--interna .hero__conteudo > :nth-child(4) { animation-delay: 240ms; }
.js-motion .hero--interna .credenciais { animation: entra-subindo var(--t-4) var(--ease-brisa) 320ms both; }
.js-motion .ilustra { animation: entra-subindo var(--t-4) var(--ease-brisa) 200ms both; }

/* 20.3 Floco de marca d'água: uma volta a cada 120 s */
@keyframes gira { to { transform: rotate(360deg); } }
.js-motion .marca-dagua .floco { animation: gira 120s linear infinite; }

/* 20.4 Chamada final: gradiente que respira (8 s, ida e volta) */
@keyframes respira {
  from { background-position: 0% 0%, 0 0; }
  to { background-position: 100% 60%, 0 0; }
}
.js-motion .chamada {
  background:
    radial-gradient(120% 140% at 85% 0%, var(--violeta-2) 0%, transparent 55%) 0 0 / 160% 160% no-repeat,
    var(--violeta);
  animation: respira 8s var(--ease-respiro) infinite alternate;
}

/* 20.5 Abertura 32° → 23° (home, uma vez por sessão) */
.abertura, .abertura__pular { display: none; }
.abertura-ativa .hero--abertura .abertura,
.abertura.is-ativa {
  display: grid;
  position: absolute; inset: 0; z-index: 2;
  place-content: center; justify-items: center;
  gap: var(--s-5);
  pointer-events: none;
}
.abertura-ativa .hero--abertura .abertura__pular,
.abertura__pular.is-ativo {
  display: block;
  position: fixed; right: var(--margem); bottom: var(--s-6); z-index: 3;
  padding: 0.5rem 1rem;
  border: 0; border-radius: var(--r-pill);
  background: rgba(244, 247, 246, 0.12); color: var(--off);
  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
}
.abertura__floco { width: min(34vh, 15rem); color: var(--off); }
.abertura__floco svg { width: 100%; height: auto; overflow: visible; }
.abertura__contorno { fill: none; stroke: currentColor; stroke-opacity: 0.28; stroke-width: 3; }
.abertura__braco { fill: var(--limao); opacity: 0; }
.abertura__temp {
  font-size: clamp(4rem, 3rem + 6vw, 8rem);
  font-weight: 700; line-height: 1; letter-spacing: var(--ls-titulo);
  color: var(--off);
  font-variant-numeric: tabular-nums;
}
.abertura-ativa .hero--abertura :is(.hero__conteudo > *, .credencial, .credenciais, .marca-dagua) { opacity: 0; }

/* 20.6 Como funciona: a linha é desenhada pela rolagem (motion.js ajusta --linha-progresso) */
.js-motion .passo::before { transition: background-color var(--t-3) var(--ease-brisa), transform var(--t-3) var(--ease-brisa); }
.js-motion .passo.is-ativo::before { transform: scale(1.12); }

/* 20.7 Barra de conformidade do PMOC (criada por motion.js dentro do cabeçalho) */
.barra-conformidade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  pointer-events: none;
}
.barra-conformidade__preenche {
  position: absolute; inset: 0;
  background: var(--destaque);
  transform-origin: left center;
  transform: scaleX(var(--progresso, 0));
}
.barra-conformidade__rotulo {
  position: absolute; right: var(--margem); top: 8px;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--destaque); color: var(--off);
  font-size: 0.75rem; font-weight: 500;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t-3) var(--ease-brisa), transform var(--t-3) var(--ease-brisa);
}
.tema-violeta:not(.is-rolado) .barra-conformidade__rotulo { color: var(--tinta); }
.barra-conformidade.is-completa .barra-conformidade__rotulo { opacity: 1; transform: none; }

/* 20.8 Documentos da fiscalização: entram empilhados e se abrem em leque */
.js-motion .doc { transition: transform var(--t-4) var(--ease-brisa), opacity var(--t-3) var(--ease-brisa); }
.js-motion .doc:nth-child(2) { transition-delay: 80ms; }
.js-motion .doc:nth-child(3) { transition-delay: 160ms; }
.js-motion .docs:not(.is-aberto) .doc { opacity: 0.001; }
.js-motion .docs:not(.is-aberto) .doc:nth-child(1) { opacity: 1; transform: rotate(0deg); }
.js-motion .docs:not(.is-aberto) .doc:nth-child(2) { transform: translateY(calc(-100% - var(--s-4))) rotate(0deg); }
.js-motion .docs:not(.is-aberto) .doc:nth-child(3) { transform: translateY(calc(-200% - var(--s-4) * 2)) rotate(0deg); }

/* 20.9 Ilustrações das páginas de serviço (estado inicial; .is-animada leva ao final) */
.js-motion .ilustra .barra--certa .barra__valor { transition: transform 1131ms var(--ease-brisa) 500ms; }
.js-motion .ilustra:not(.is-animada) .barra--certa .barra__valor { transform: scaleX(1); }
.js-motion .ilustra .ilustra__selo { transition: opacity var(--t-3) var(--ease-brisa), transform var(--t-3) var(--ease-brisa); transition-delay: 1400ms; }
.js-motion .ilustra:not(.is-animada) .ilustra__selo { opacity: 0; transform: translateY(8px); }

.js-motion .ilustra .peca { transition: opacity var(--t-3) var(--ease-brisa), transform var(--t-3) var(--ease-brisa); }
.js-motion .ilustra:not(.is-animada) .peca { opacity: 0; transform: translateY(-10px); }
.js-motion .ilustra .peca[data-peca="2"] { transition-delay: 160ms; }
.js-motion .ilustra .peca[data-peca="3"] { transition-delay: 320ms; }
.js-motion .ilustra .peca[data-peca="4"] { transition-delay: 480ms; }
.js-motion .ilustra .peca[data-peca="5"] { transition-delay: 640ms; }

.js-motion .ilustra .sinais li span { transition: background-size var(--t-3) var(--ease-brisa); }
.js-motion .ilustra .sinais li { transition: color var(--t-3) var(--ease-brisa); }
.js-motion .ilustra:not(.is-animada) .sinais li { color: var(--tinta); }
.js-motion .ilustra:not(.is-animada) .sinais li span { background-size: 0% 2px; }
.js-motion .ilustra .sinais li:nth-child(1), .js-motion .ilustra .sinais li:nth-child(1) span { transition-delay: 500ms; }
.js-motion .ilustra .sinais li:nth-child(2), .js-motion .ilustra .sinais li:nth-child(2) span { transition-delay: 800ms; }
.js-motion .ilustra .sinais li:nth-child(3), .js-motion .ilustra .sinais li:nth-child(3) span { transition-delay: 1100ms; }
.js-motion .ilustra .sinais li:nth-child(4), .js-motion .ilustra .sinais li:nth-child(4) span { transition-delay: 1400ms; }

.js-motion .ilustra .linha-consumo { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-brisa) 400ms; }
.js-motion .ilustra:not(.is-animada) .linha-consumo { stroke-dashoffset: 1; }

/* 20.10 Agenda: silhueta que respira e floco de sucesso */
@keyframes esq-respira { 50% { opacity: 0.5; } }
.js-motion .esq { animation: esq-respira 1600ms var(--ease-respiro) infinite; }
@keyframes floco-forma { from { opacity: 0; transform: scale(0.6) rotate(-60deg); } }
.js-motion .agenda__sucesso:not([hidden]) .agenda__sucesso-floco { animation: floco-forma var(--t-5) var(--ease-brisa) both; }
.js-motion .agenda__sucesso:not([hidden]) :is(h2, p) { animation: entra-subindo var(--t-4) var(--ease-brisa) 400ms both; }

/* 20.11 Quem pede menos movimento: só fades curtos */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .btn::before { transition-duration: var(--t-1); }
  .cartao, a.cartao:hover { transform: none; }
  a.cartao:hover .floco { transform: none; }
  .cabecalho.is-oculto { transform: none; }
}

/* Lenis (rolagem suave no desktop) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- 21. Troca de página (View Transitions entre documentos) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-sai var(--t-2) var(--ease-suave) both; }
  ::view-transition-new(root) { animation: vt-entra var(--t-3) var(--ease-brisa) both; }
}
@keyframes vt-sai { to { opacity: 0; transform: translateY(12px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(-12px); } }

/* Agenda sem link configurado: o aviso não precisa da altura do calendário */
.agenda:has(.agenda__aviso:not([hidden])) { min-height: 0; }

/* Cartão de equipe só com a função (sem nome) */
.pessoa h3 + p:not(.pessoa__cargo) { margin-top: var(--s-3); }