/* Reset e fundacao. Consome so var() de tokens.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ancora nao pode parar colada no header fixo. Calculado a partir da altura
   * real do header mais um respiro, entao mexer no header nao quebra a ancora. */
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

@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;
  }
}

body {
  margin: 0;
  /* ⛔ Palavra que nao cabe estoura a caixa em vez de quebrar.
   *
   * Com a fonte do navegador em 200% (requisito de acessibilidade), titulos
   * como "Our Commitment" pediam 354px numa caixa de 326px, e "Commercial
   * Cleaning" pedia 321px em 256px: a palavra saia pela lateral e o texto
   * sumia no recorte. break-word so age quando a palavra REALMENTE nao cabe,
   * entao no tamanho normal nada muda. Medido no Edge, nao deduzido. */
  overflow-wrap: break-word;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--c-ink-strong);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0; text-wrap: pretty; }

p + p { margin-top: var(--space-4); }

a { color: inherit; }

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol { margin: 0; padding: 0; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Foco visivel sempre. Remover outline sem por outra coisa no lugar torna o
 * site inutilizavel por teclado, e e o erro de acessibilidade mais comum. */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- utilitarios */

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

.section {
  /* ⛔ flow-root, e nao block: a dobra que fica com padding-top ZERO pela
   * costura deixava a margem do primeiro filho ESCAPAR para fora dela. O
   * .cta-block__actions tem margin-top de 24px e, quando o botao e o unico
   * conteudo, esses 24px viravam uma faixa do fundo da pagina entre duas
   * dobras creme. Medido: vao de 24px em dois lugares. */
  display: flow-root;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: var(--section-y-tight);
}

/* O degrau mais curto do ritmo, para a dobra que e so um botao. Fica aqui
 * junto dos outros dois degraus, e nao escondido no componente: era o
 * .cta-block que sobrescrevia em silencio o .section--tight do HTML. */
.section--hair {
  padding-block: var(--section-y-hair);
}

/* Encosta a dobra seguinte nesta. Sem isso, padding cheio embaixo mais padding
 * cheio em cima somam quase 20rem de fundo vazio entre dois blocos curtos. */
.section--tight-bottom {
  padding-bottom: var(--section-y-hair);
}

.section--surface     { background: var(--c-surface); }
.section--deep        { background: var(--c-surface-deep); }
/* ⛔ A dobra clara redefine os PAPEIS, nao os componentes.
 *
 * Medido no site original: sobre o creme #f7f6f2 ele escreve em #1e3d2f, em
 * 12.677 caracteres de corpo e 2.685 de titulo, ou seja 11.01:1. Se a virada
 * fosse feita componente a componente, cada um dos 15 tipos de dobra
 * precisaria da sua propria excecao, e o primeiro esquecido vira texto creme
 * sobre fundo creme. Aqui trocam os tokens e todo o resto acompanha sozinho.
 */
.section--light {
  --c-ink:        var(--c-forest-700);          /* 11.01:1 sobre o creme */
  --c-ink-strong: var(--c-forest-900);          /* 15.96:1               */
  --c-ink-muted:  #4e665a;                      /*  5.76:1, solido       */
  --c-border:     var(--c-border-light);
  --c-wash:       color-mix(in srgb, var(--c-forest-900) 5%, transparent);
  /* ⚠️ OPACO de proposito. A .trust-bar pinta fundo PROPRIO e, com a mesma
   * especificidade e vindo depois no arquivo, ela ganha do background desta
   * regra. Se --c-inset fosse semi-transparente, a faixa ficaria com o verde
   * do body por baixo em vez do creme da dobra. */
  --c-inset:      color-mix(in srgb, var(--c-white) 72%, var(--c-cream));
  --c-field:      var(--c-white);
  /* Todo texto em dourado da dobra clara passa a usar o dourado escuro: o
   * dourado cheio da 2.31:1 sobre creme e reprova em 11 lugares medidos. */
  --c-accent:     var(--c-gold-deep);
  --c-on-accent:  var(--c-white);
  background: var(--c-surface-light);
  color: var(--c-forest-700);
}

/* ⚠️ O botao primario e uma pastilha ESCURA. O texto dele NAO pode acompanhar
 * a virada do --c-ink-strong, senao fica escuro sobre escuro. */
.section--light .btn--primary { color: var(--c-white); }

/* ⚠️ Divergencia consciente do original: la o rotulo dourado sobre creme fica
 * em 2.31:1. Aqui ele herda o --c-gold-deep e vai para 4.61:1. Mesmo motivo
 * pelo qual o botao CTA mudou de branco-no-dourado para verde-com-branco. */

/* ---------------------------------------------------- costura entre dobras
 *
 * O vao que se ve entre duas dobras e a SOMA de dois paddings: o de baixo da
 * primeira mais o de cima da segunda. Quando o fundo MUDA, cada metade dessa
 * soma pertence visualmente a sua faixa e a soma nao incomoda. Quando o fundo
 * NAO muda, as duas metades viram uma unica mancha lisa de ate 256px, e e ela
 * que se le como "essa dobra ficou maior que a outra". Nao e a dobra que
 * cresceu, e o buraco no meio de uma faixa so.
 *
 * Aqui a segunda dobra de um par do mesmo tom abre mao do padding de cima: o
 * vao passa a ser exatamente UM degrau do ritmo, nunca dois. E tambem e o que
 * funde duas dobras curtas numa faixa unica sem tirar texto de lugar nenhum.
 *
 * ⚠️ O :not() vem em cadeia, e nao como lista :not(.a, .b, .c): lista dentro
 * de :not() so existe do Safari 16 para cima, e a cadeia funciona em tudo.
 * ⚠️ A especificidade alta e proposital: esta regra precisa ganhar do padding
 * proprio de componentes como .cta-block. Quem precisar de padding de topo
 * numa dobra que cai aqui tem que declarar com esta forca ou mudar o tom.
 */
.section:not(.section--surface):not(.section--deep):not(.section--light)
  + .section:not(.section--surface):not(.section--deep):not(.section--light),
.section--surface + .section--surface,
.section--deep + .section--deep,
.section--light + .section--light {
  padding-top: 0;
}

.prose { max-width: var(--measure); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* Escondido da tela, presente para leitor de tela. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-12));
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus { top: var(--space-4); }

/* ----------------------------------------------------------------- botoes
 *
 * O rotulo vem primeiro. Branco sobre o dourado #c39e65 da 2.50:1 e reprova
 * em AA, entao rotulo branco exige face escura. Numeros calculados pela
 * formula WCAG de luminancia relativa:
 *
 *   repouso  face #131d18 + rotulo #ffffff .................. 17.26:1
 *   hover    face #c39e65 + rotulo #131d18 ................... 6.90:1
 *   anel dourado #c39e65 contra os fundos reais da pagina:
 *            sobre #131d18 6.90:1 | #1e3d2f 4.76:1 | #254939 4.02:1
 *
 * O anel de 2px nao e enfeite: qualquer face escura o bastante para o branco
 * passar 4.5:1 fica no maximo 2.6:1 contra o verde do fundo, ou seja, a cor
 * da face sozinha nunca alcanca os 3:1 de elemento nao textual. Quem desenha
 * a borda do botao e o anel.
 *
 * Onde a face some no fundo (e o anel passa a ser o botao inteiro): a unica
 * dobra section--deep com CTA, public/index.html 979. Nos demais pontos, o
 * header sticky incluido, a face fica 1.45:1 sobre #1e3d2f e 1.72:1 sobre
 * #254939, ou seja, quase plana tambem.
 *
 * Primario e ghost aparecem lado a lado em public/index.html 614 e 615, sobre
 * #1e3d2f. Para eles nao virarem o mesmo botao, o anel do ghost e creme
 * (11.01:1 sobre #1e3d2f, 9.29:1 sobre #254939) e o do primario e dourado:
 * a diferenca vira de matiz, nao so de 2px contra 1px.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  min-height: 48px;           /* alvo de toque confortavel */
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;           /* Poppins 600 ja e auto-hospedada */
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              transform 0.25s var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

.btn--primary {
  background: var(--c-surface-deep);
  border-width: 2px;
  border-color: var(--c-accent);
  color: var(--c-ink-strong);
  box-shadow: var(--shadow-md);
}

/* :focus-visible fica de fora de proposito. O anel de foco --c-focus #ffd58a
 * e desenhado por outline com offset, ou seja, encosta no fundo da pagina e
 * nao na face: 12.44:1 sobre #131d18 e 8.58:1 sobre #1e3d2f. Trocar a face no
 * foco nao ajudaria e so tiraria o hover do lugar. */
.btn--primary:hover,
.btn--primary:active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}

.btn--ghost {
  background: transparent;
  border-color: var(--c-ink);   /* creme 9.29:1 a 15.96:1 contra os 3 fundos */
  color: var(--c-ink);          /* o dourado de antes dava 4.02:1, reprovava */
}

.btn--ghost:hover,
.btn--ghost:active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}