/* ==========================================================================
   Climatizei · Home (versão 2, outubro de 2026)
   Conceito: "Climatizei" é verbo no passado. Cada cena conjuga um serviço
   (Regularizei, Calculei, Instalei, Cuidei, Acompanhei) e o termômetro fixo
   desce de 32° a 23° ao longo da rolagem.
   Só carrega na home. Depende dos tokens de style.css.
   ========================================================================== */

.home {
  --g-pad: var(--margem);
  --g-bloco: clamp(5rem, 12vw, 11rem);
  --g-titulo-m: clamp(2.1rem, 1rem + 4.2vw, 5.4rem);
  --g-verbo: clamp(3.2rem, 0.5rem + 9.2vw, 10.5rem);
  overflow-x: clip;
}

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

/* Tipografia gigante: o tamanho é ajustado por home.js para ocupar a largura exata.
   Sem JS, o valor em vw abaixo chega muito perto. */
.h-gigante {
  display: block;
  font-weight: 700;
  font-size: 16.4vw;
  line-height: 0.8;
  letter-spacing: -0.045em;
  white-space: nowrap;
  margin-left: -0.055em;
}
.h-gigante em, .h-verbos__verbo em { font-style: normal; }

.h-titulo-m {
  font-size: var(--g-titulo-m);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.h-gigante-m {
  font-size: clamp(3.2rem, 1rem + 9.4vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin-left: -0.05em;
}

/* Letras divididas por home.js: cada letra sobe de dentro de uma máscara */
.h-letra { display: inline-block; overflow: clip; overflow-clip-margin: 0.08em; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.h-letra > span { display: inline-block; will-change: transform; }

/* ---------- 1. Abertura ---------- */
.h-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(var(--cabecalho-h) * -1);
  padding: calc(var(--cabecalho-h) + clamp(1.5rem, 4vw, 3rem)) var(--g-pad) clamp(1.25rem, 3vw, 2.5rem);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.h-hero__titulo {
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s-8);
  margin: 0;
  color: var(--off);
  font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal;
  position: relative; z-index: 1;
}
.h-hero__kicker {
  display: block;
  max-width: 17ch;
  font-size: clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.h-hero__nome { color: var(--off); }
.h-hero__floco {
  position: absolute; z-index: 0;
  right: calc(var(--g-pad) - 1vw);
  top: calc(var(--cabecalho-h) + clamp(0.5rem, 2vw, 1.5rem));
  width: clamp(9rem, min(30vw, 40vh), 30rem);
  color: var(--off);
}
.h-hero__floco svg { width: 100%; height: auto; overflow: visible; display: block; animation: h-gira 120s linear infinite; }
.h-hero__floco .abertura__contorno { fill: none; stroke: currentColor; stroke-opacity: 0.22; stroke-width: 2; }
.h-hero__floco .abertura__braco { fill: var(--limao); }
.h-hero__floco.is-completo .abertura__contorno { fill: var(--limao); stroke: none; stroke-opacity: 0; }
.h-hero__floco.is-completo .abertura__braco { visibility: hidden; }
@keyframes h-gira { to { transform: rotate(360deg); } }

.h-hero__base {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  margin-top: clamp(1.25rem, 2.6vw, 2.25rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1.5px solid rgba(244, 247, 246, 0.28);
}
.h-hero__base p { max-width: 34rem; font-size: var(--fs-lead); line-height: 1.5; margin: 0; }

/* ---------- 2. O nome é um verbo ---------- */
.h-verbo {
  background: var(--off);
  color: var(--violeta);
  padding: var(--g-bloco) var(--g-pad);
}
.h-verbo__frase {
  font-size: clamp(2.6rem, 0.6rem + 7.4vw, 9.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--violeta);
  max-width: 14ch;
}
.h-verbo__apoio {
  margin: clamp(2rem, 5vw, 4.5rem) 0 0 auto;
  max-width: 24ch;
  font-size: clamp(1.4rem, 0.9rem + 1.9vw, 2.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--tinta);
}
.h-palavra { display: inline-block; }

/* Peças encaixadas no meio da frase */
.h-peca {
  display: inline-flex; align-items: center; justify-content: center;
  height: 0.8em;
  vertical-align: -0.06em;
  border-radius: 0.2em;
  margin: 0 0.04em;
  overflow: hidden;
}
.h-peca--floco { width: 0.8em; background: var(--violeta); }
.h-peca--floco .floco { display: block; width: 0.52em; height: auto; color: var(--limao); animation: h-gira 24s linear infinite; }
.h-peca--foto { width: 1.7em; border-radius: 999px; background: var(--violeta-6); }
.h-peca--foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.h-peca--termometro {
  width: 0.6em; height: 1.3em;
  vertical-align: -0.2em;
  border-radius: 0;
  overflow: visible;
  margin-left: 0.08em;
}
.h-peca--termometro svg { width: 100%; height: 100%; overflow: visible; }
.h-termo__vidro { fill: var(--branco); stroke: var(--violeta); stroke-width: 4.5; stroke-linejoin: round; }
.h-termo__coluna, .h-termo__bulbo { fill: var(--violeta); }
.h-termo__coluna { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.42); }
.h-termo__escala { fill: none; stroke: var(--violeta); stroke-width: 3; stroke-linecap: round; }
.h-peca--grau {
  padding: 0 0.22em 0 0.26em;
  background: var(--tinta); color: var(--off);
  font-size: 0.62em; height: 1.29em; border-radius: 0.32em;
  letter-spacing: -0.03em;
  vertical-align: 0.02em;
}

/* ---------- 3. PMOC ---------- */
.h-pmoc {
  background: var(--limao);
  color: var(--tinta);
  padding: var(--g-bloco) var(--g-pad);
  --foco: var(--violeta);
}
.h-pmoc .h-titulo-m { color: var(--violeta); }
.h-sigla {
  list-style: none; margin: clamp(2rem, 5vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(0.5rem, 1.5vw, 1.5rem);
}
.h-sigla li { display: flex; flex-direction: column; min-width: 0; }
.h-sigla__letra {
  font-weight: 700;
  font-size: clamp(6rem, 25vw, 26rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: var(--violeta);
  margin-left: -0.04em;
  display: block;
  overflow: clip; overflow-clip-margin: 0.1em;
  padding-top: 0.06em;
}
.h-sigla__letra > span { display: inline-block; }
.h-sigla__palavra {
  display: block;
  margin-top: clamp(0.75rem, 1.6vw, 1.5rem);
  padding-top: clamp(0.6rem, 1vw, 1rem);
  border-top: 2px solid var(--tinta);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.6rem + 1.3vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.h-pmoc__base {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7) clamp(2rem, 6vw, 6rem);
  margin-top: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
.h-pmoc__lei {
  margin: 0;
  font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.9rem);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.02em;
  max-width: 26ch;
}
.h-pmoc__base { align-items: center; }
.h-pmoc__texto .acoes { margin-top: var(--s-6); }
.h-pmoc .btn--secundario { --btn-texto: var(--tinta); --btn-fill: var(--tinta); color: var(--tinta); }
.h-pmoc .btn--secundario:hover { color: var(--limao); }

/* Documento do PMOC: a entrega desenhada, no lugar da lista */
.h-doc { margin: 0; justify-self: center; perspective: 900px; }
.h-doc__folha {
  position: relative;
  width: min(100%, 29rem);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--branco); color: var(--tinta);
  border-radius: 1.25rem;
  box-shadow: 0 12px 0 rgba(42, 10, 77, 0.14), 0 30px 60px rgba(42, 10, 77, 0.18);
  transform: rotate(-4deg);
}
.h-doc__topo { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 1rem; border-bottom: 1.5px solid var(--linha); }
.h-doc__topo strong { display: block; font-size: 1.6rem; line-height: 1; color: var(--violeta); letter-spacing: -0.03em; }
.h-doc__topo small { display: block; margin-top: 0.3rem; font-size: 0.75rem; line-height: 1.3; opacity: 0.7; max-width: 15rem; }
.h-doc__selo { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--violeta); flex: none; }
.h-doc__selo .floco { width: 1.7rem; color: var(--limao); }
.h-doc__itens { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.75rem; font-size: clamp(0.9375rem, 0.8rem + 0.3vw, 1.0625rem); font-weight: 500; }
.h-doc__itens li { display: flex; align-items: center; gap: 0.6rem; }
.h-doc__itens i {
  width: 1.35rem; height: 1.35rem; border-radius: 0.4rem; flex: none;
  background: var(--violeta);
  -webkit-mask: none;
  position: relative;
}
.h-doc__itens i::after {
  content: ""; position: absolute; left: 0.42rem; top: 0.2rem;
  width: 0.38rem; height: 0.7rem;
  border: solid var(--limao); border-width: 0 0.17rem 0.17rem 0;
  transform: rotate(45deg);
}
.h-doc__qr { position: absolute; right: 1.4rem; bottom: 1.3rem; width: clamp(4.2rem, 6vw, 5.4rem); padding: 0.35rem; background: var(--branco); border-radius: 0.5rem; box-shadow: inset 0 0 0 1.5px var(--linha); }
.h-doc__qr svg { width: 100%; height: auto; fill: var(--tinta); }
.h-doc__art {
  position: absolute; right: -1.6rem; top: -1.6rem;
  display: grid; place-items: center;
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  background: var(--violeta); color: var(--limao);
  font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em;
  box-shadow: 0 0 0 0.35rem var(--limao), 0 0 0 0.55rem var(--violeta);
  transform: rotate(12deg);
}

/* ---------- 4. Serviços: vitrine ---------- */
.h-servicos { position: relative; padding: var(--g-bloco) var(--g-pad); }
.h-servicos .h-titulo-m { max-width: 16ch; }
.h-show { margin-top: clamp(2rem, 4vw, 3.5rem); }
.h-show__abas { display: none; }
.h-show__palco { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.h-slide {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--tinta);
  overflow: hidden;
}
.h-slide__texto { container-type: inline-size; }
.h-slide__verbo {
  margin: 0 0 var(--s-5);
  font-weight: 700;
  font-size: min(14cqi, 7.2rem);
  line-height: 0.85; letter-spacing: -0.05em;
  margin-left: -0.04em;
  color: var(--off);
  white-space: nowrap;
}
.h-slide__verbo em { font-style: normal; color: var(--limao); }
.h-slide h3 { font-size: var(--fs-lead); margin: 0 0 var(--s-2); }
.h-slide h3 a { color: var(--off); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1.5px; transition: background-size var(--t-3) var(--ease-brisa); }
.h-slide h3 a:hover { background-size: 100% 1.5px; }
.h-slide h3 a::after { content: ""; position: absolute; inset: 0; } /* o cartão inteiro leva à página do serviço */
.h-slide__texto > p:last-child { margin: 0; opacity: 0.8; }
.h-slide__visual {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(16rem, 28vw, 24rem);
  border-radius: clamp(1rem, 2vw, 1.75rem);
  background:
    radial-gradient(60% 70% at 25% 30%, rgba(173, 255, 2, 0.35), transparent 70%),
    radial-gradient(60% 70% at 80% 75%, rgba(180, 85, 255, 0.75), transparent 70%),
    var(--violeta-2);
  overflow: hidden;
}

/* Telas desenhadas dentro de cada serviço */
.h-ui {
  width: min(88%, 22rem);
  padding: 1.25rem 1.3rem;
  border-radius: 1.1rem;
  background: var(--branco); color: var(--tinta);
  box-shadow: 0 20px 50px rgba(42, 10, 77, 0.3);
  font-size: 0.875rem;
}
.h-ui__titulo { margin: 0 0 0.85rem; font-weight: 700; font-size: 1rem; color: var(--violeta); letter-spacing: -0.01em; }
.h-ui svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h-ui__fatores { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.h-ui__fatores li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.7rem; background: var(--off); font-weight: 500; }
.h-ui__fatores svg { width: 1.2rem; height: 1.2rem; color: var(--violeta); flex: none; }
.h-ui__resultado { margin-top: 0.9rem; padding: 0.85rem 0.9rem; border-radius: 0.8rem; background: var(--violeta); color: var(--off); }
.h-ui__resultado span { display: block; font-size: 0.75rem; opacity: 0.85; }
.h-ui__resultado strong { display: block; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1.15; }
.h-ui__barra { display: block; height: 0.4rem; margin-top: 0.5rem; border-radius: 1rem; background: rgba(244, 247, 246, 0.25); overflow: hidden; }
.h-ui__barra b { display: block; height: 100%; width: 72%; border-radius: inherit; background: var(--limao); }
.h-ui--inst { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.h-ui__split { width: 100%; max-width: 13rem; margin: 0 auto -0.4rem; overflow: visible; stroke: none !important; }
.h-ui__split .ob__ar { stroke: #8F00FF !important; }
.h-ui__check { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-weight: 500; }
.h-ui__check li { display: flex; align-items: center; gap: 0.55rem; }
.h-ui__check li::before {
  content: ""; width: 1.2rem; height: 1.2rem; border-radius: 50%; flex: none;
  background: var(--violeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ADFF02' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.h-ui__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.h-ui__lista li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: 0.7rem; background: var(--off); }
.h-ui__lista b { display: block; font-size: 0.8125rem; color: var(--violeta); }
.h-ui__lista span { font-size: 0.8125rem; line-height: 1.3; }
.h-ui__lista em { font-style: normal; font-size: 0.6875rem; font-weight: 700; padding: 0.3rem 0.55rem; border-radius: 1rem; white-space: nowrap; }
.h-ui__lista .ok { background: var(--violeta); color: var(--off); }
.h-ui__lista .and { background: var(--violeta-6); color: var(--violeta); }
.h-ui__lista .ag { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linha); }
.h-ui__grafico { width: 100%; height: auto; overflow: visible; }
.h-ui__grade { stroke: var(--linha) !important; stroke-width: 1 !important; }
.h-ui__linha { stroke: var(--violeta) !important; stroke-width: 3.5 !important; }
.h-ui__grafico circle { fill: var(--limao); stroke: var(--violeta) !important; stroke-width: 3 !important; }
.h-ui__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.h-ui__chips span { padding: 0.35rem 0.65rem; border-radius: 1rem; background: var(--violeta-6); color: var(--violeta); font-size: 0.75rem; font-weight: 700; }

/* Vitrine fixada com abas (desktop com movimento): home.js liga .is-fixa */
.h-show.is-fixa { position: relative; }
.h-show.is-fixa .h-show__abas {
  display: flex; justify-content: center; gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.h-show__aba {
  width: 3.2rem; height: 3.2rem; border: 0; border-radius: 1rem;
  display: grid; place-items: center;
  background: rgba(244, 247, 246, 0.14); color: var(--off);
  cursor: pointer;
  transition: background-color var(--t-2) var(--ease-suave), color var(--t-2) var(--ease-suave), transform var(--t-2) var(--ease-suave);
}
.h-show__aba svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h-show__aba:hover { background: rgba(244, 247, 246, 0.24); }
.h-show__aba[aria-selected="true"] { background: var(--limao); color: var(--tinta); transform: translateY(-2px); }
.h-show.is-fixa .h-show__palco { display: grid; grid-template-areas: "s"; }
.h-show.is-fixa .h-slide { min-height: min(40rem, calc(100vh - 12rem)); }
.h-show.is-fixa .h-slide__visual { align-self: stretch; }
.h-show.is-fixa .h-slide { grid-area: s; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease-suave), visibility 0s 0.5s; }
.h-show.is-fixa .h-slide.is-ativo { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease-suave), visibility 0s; }

/* ---------- 5. Equipe: a foto abre entre as palavras ---------- */
.h-equipe {
  background: var(--off);
  color: var(--tinta);
  padding: var(--g-bloco) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.h-equipe__titulo {
  display: flex; flex-direction: column;
  padding: 0 var(--g-pad);
  font-size: clamp(3.4rem, 1rem + 11vw, 13rem);
  line-height: 0.86; letter-spacing: -0.05em;
  color: var(--violeta);
  max-width: none;
}
.h-equipe__p1 { align-self: flex-start; margin-left: -0.04em; }
.h-equipe__p2 { align-self: flex-end; position: relative; z-index: 2; }
.h-equipe__foto {
  position: relative;
  margin: clamp(-3rem, -4vw, -1rem) auto 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 88vh;
  clip-path: inset(0 var(--g-pad) round clamp(1rem, 2.5vw, 2rem));
}
.h-equipe__foto img { width: 100%; height: 100%; object-fit: cover; }
.h-equipe__fatos {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: calc(var(--g-pad) + clamp(1rem, 2.5vw, 2rem)); bottom: clamp(1rem, 2.5vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  max-width: calc(100% - 2 * var(--g-pad) - 2rem);
}
.h-equipe__fatos li {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--branco); color: var(--tinta);
  font-weight: 500; font-size: 0.9375rem;
  box-shadow: 0 8px 24px rgba(42, 10, 77, 0.18);
}
.h-equipe__fatos strong { color: var(--violeta); }
.h-equipe__link { display: inline-flex; margin: var(--s-6) var(--g-pad) 0; }

/* ---------- 6. Para quem ---------- */
.h-quem {
  background: var(--off);
  color: var(--violeta);
  padding: var(--g-bloco) 0;
}
.h-quem .h-titulo-m { padding: 0 var(--g-pad); }
.h-faixas { margin-top: clamp(2rem, 4vw, 3.5rem); }
.h-faixa {
  margin: 0;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(3.2rem, 1rem + 8.6vw, 10.5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  will-change: transform;
}
.h-faixa .floco { display: inline-block; width: 0.5em; color: var(--violeta); vertical-align: 0.06em; margin: 0 0.12em; }
.h-faixa--contorno { color: transparent; -webkit-text-stroke: 2px var(--violeta); }
.h-faixa--contorno .floco { color: var(--violeta); }

/* ---------- 7. Fechamento ---------- */
.h-final {
  padding: var(--g-bloco) var(--g-pad) clamp(3rem, 6vw, 5rem);
  border-bottom: 1.5px solid rgba(244, 247, 246, 0.2);
}
.h-passos {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6) clamp(1.5rem, 3vw, 3rem);
}
.h-passos li { border-top: 1.5px solid rgba(244, 247, 246, 0.28); padding-top: var(--s-5); }
.h-passos__tempo {
  display: block;
  font-weight: 700;
  font-size: clamp(2.2rem, 1rem + 3.4vw, 4.6rem);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--limao);
  margin-bottom: var(--s-5);
}
.h-passos h3 { font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.6rem); color: var(--off); margin: 0; letter-spacing: -0.02em; }

.h-final__fecho { margin-top: clamp(5rem, 12vw, 10rem); }
.h-final__nome { color: var(--off); }
/* ---------- Estados iniciais da animação (só com motion ligado) ---------- */
.js-motion:not(.home-sem-js) .h-hero__kicker,
.js-motion:not(.home-sem-js) .h-hero__base { opacity: 0; }
.js-motion:not(.home-sem-js) .h-hero__floco .abertura__braco { opacity: 0; }
.js-motion:not(.home-sem-js) .h-hero__nome { visibility: hidden; }
.js-motion .h-hero__nome.is-pronto { visibility: visible; }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .h-pmoc__base { grid-template-columns: 1fr; }
  .h-slide { grid-template-columns: 1fr; }
  .h-doc { justify-self: start; margin-top: var(--s-6); }
}
@media (max-width: 767px) {
  .h-hero__titulo { gap: var(--s-6); }
  .h-hero__floco { width: 46vw; top: calc(var(--cabecalho-h) + 5.5rem); right: -6vw; }
  .h-hero__kicker { max-width: 12ch; }
  .h-hero__base .acoes { width: 100%; }
  .h-sigla { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-6); }
  .h-sigla__letra { font-size: 42vw; }
  .h-passos { grid-template-columns: 1fr; }
  .h-faixa--contorno { -webkit-text-stroke-width: 1.5px; }
  .h-doc__art { right: -0.6rem; width: 4.4rem; height: 4.4rem; font-size: 1.15rem; }
  .h-equipe__foto { aspect-ratio: 4 / 5; }
  .h-equipe__fatos li { font-size: 0.8125rem; padding: 0.5rem 0.8rem; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .h-hero__floco svg, .h-peca--floco .floco { animation: none; }
}

/* Na home tudo vai de borda a borda: o cabeçalho acompanha a mesma margem */
body:has(.home) .cabecalho .container { max-width: none; padding-inline: var(--margem); }