/* ===========================================================================
   Casa do Óleo e Filtros — sistema visual
   Identidade herdada do site anterior (Adobe Muse). Valores extraídos do CSS
   original, não estimados. Ver DESIGN.md.
   =========================================================================== */

/* --- Fontes próprias ------------------------------------------------------
   Auto-hospedadas: são as mesmas do site antigo e não existem no Google
   Fonts. `swap` para o texto aparecer imediatamente com a fonte de sistema
   enquanto a própria carrega. */

@font-face {
  font-family: 'Alibaba Sans';
  src: url('../fonts/alibaba-sans-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alibaba Sans';
  src: url('../fonts/alibabasans-lightitalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Alibaba Sans';
  src: url('../fonts/alibabasans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alibaba Sans';
  src: url('../fonts/alibabasans-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alibaba Sans';
  src: url('../fonts/alibabasans-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Economica';
  src: url('../fonts/economica-regular1.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --verde-escuro: #314F35;
  --verde-limao:  #BCD369;
  --verde-doacao: #117645;
  --branco:       #FFFFFF;
  --texto:        #666666;
  --texto-forte:  #3A3A3A;
  --bege:         #998675;
  --vinho:        #9E3431;

  --superficie:        #FFFFFF;
  --superficie-suave:  #F6F8F1;
  --borda:             #E4E7DC;

  --fonte: 'Alibaba Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-display: 'Economica', var(--fonte);

  /* Tamanhos do original viram clamp: no desktop batem o valor exato,
     no mobile reduzem em vez de estourar a linha. */
  --t-secao:   clamp(2rem, 1.3rem + 2.4vw, 2.625rem);   /* teto 42px */
  --t-titulo:  clamp(1.375rem, 1.1rem + 1vw, 1.75rem);  /* teto 28px */
  --t-sub:     clamp(1.125rem, 1rem + .5vw, 1.375rem);  /* teto 22px */
  --t-corpo:   clamp(1rem, .95rem + .25vw, 1.125rem);   /* teto 18px */
  --t-peq:     .9375rem;
  --t-micro:   .8125rem;

  --largura-maxima:   1152px;
  --largura-conteudo: 920px;
  --altura-barra:     69px;

  --e1: 0 1px 2px rgba(49, 79, 53, .06), 0 2px 8px rgba(49, 79, 53, .07);
  --e2: 0 2px 4px rgba(49, 79, 53, .07), 0 12px 28px rgba(49, 79, 53, .13);

  /* Ease-out exponencial: sai rápido, assenta devagar. */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --rapido: 180ms;
  --medio:  320ms;
  --lento:  520ms;
}

/* --- Base ----------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Âncoras não podem parar debaixo da barra fixa. */
  scroll-padding-top: calc(var(--altura-barra) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* A contenção horizontal fica no conteúdo, não no body: qualquer overflow no
   body — hidden ou clip — faz o WebKit tratá-lo como caixa de recorte e a
   barra sticky do topo para de grudar no celular. Aqui a barra é irmã do
   <main>, então nada mais a envolve. */
main, .rodape { overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }

/* <picture> só embrulha o <img> para oferecer o WebP; não deve criar uma caixa
   própria, senão quebra os layouts que miram o <img> direto. */
picture { display: contents; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--verde-escuro);
  font-weight: 300;
  line-height: 1.2;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--verde-escuro); }

/* --- Superfícies do navegador ---------------------------------------------
   Seleção, foco, cursor e barra de rolagem vêm sem estilo de fábrica e
   entregam a página como "montada". Aqui elas seguem a paleta. */

::selection {
  background: var(--verde-limao);
  color: var(--verde-escuro);
}

:focus-visible {
  outline: 3px solid var(--verde-limao);
  outline-offset: 3px;
  border-radius: 2px;
}

html { scrollbar-color: var(--verde-limao) var(--superficie-suave); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--superficie-suave); }
::-webkit-scrollbar-thumb {
  background: var(--verde-limao);
  border: 3px solid var(--superficie-suave);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--verde-escuro); }

input, textarea { caret-color: var(--verde-escuro); }

/* Pular para o conteúdo: primeiro alvo do teclado. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 14px 22px;
  background: var(--verde-escuro);
  color: var(--branco);
  text-decoration: none;
}
.pular:focus { left: 8px; top: 8px; }

/* --- Estrutura ------------------------------------------------------------ */

.envelope {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.envelope--estreito { max-width: calc(var(--largura-conteudo) + 96px); }

.secao { padding-block: clamp(56px, 8vw, 104px); }
.secao--suave { background: var(--superficie-suave); }

/* Âncora deslocada: o alvo do link não fica debaixo da barra fixa. */
.ancora {
  display: block;
  position: relative;
  top: calc(var(--altura-barra) * -1);
  visibility: hidden;
}

/* --- Título de seção ------------------------------------------------------
   Padrão do site original: caixa alta, peso leve, verde escuro, com um traço
   de 210x6px em verde-limão logo abaixo. */

.titulo-secao {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.titulo-secao h2 {
  font-size: var(--t-secao);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.titulo-secao::after {
  content: '';
  display: block;
  width: min(210px, 60%);
  height: 6px;
  margin: 18px auto 0;
  background: var(--verde-limao);
  /* Cresce a partir do centro quando a seção entra em cena. */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--lento) var(--curva) 120ms;
}

.aparece.visivel .titulo-secao::after,
.titulo-secao.visivel::after { transform: scaleX(1); }

/* Nem todo título é centralizado no original: o de "Sobre nós" alinha à
   esquerda, com o traço acompanhando. Precisa vir depois da regra base, cuja
   abreviação `margin` reescreve as margens laterais. */
.titulo-secao--esquerda { text-align: left; }
.titulo-secao--esquerda::after {
  margin-inline: 0;
  transform-origin: left;
}

/* --- Movimento -----------------------------------------------------------
   Entradas curtas disparadas por IntersectionObserver, uma vez só. O estado
   padrão já é visível: se o JS falhar, nada some. */

.aparece {
  opacity: 1;
  transform: none;
}

.js .aparece {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--medio) var(--curva),
    transform var(--medio) var(--curva);
}

.js .aparece.visivel {
  opacity: 1;
  transform: none;
}

/* Cascata: o atraso para de crescer no sexto item, senão o último demora
   demais para aparecer. */
.js .cascata > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--medio) var(--curva),
    transform var(--medio) var(--curva);
}
.js .cascata.visivel > * { opacity: 1; transform: none; }
.js .cascata.visivel > :nth-child(1) { transition-delay: 0ms; }
.js .cascata.visivel > :nth-child(2) { transition-delay: 70ms; }
.js .cascata.visivel > :nth-child(3) { transition-delay: 140ms; }
.js .cascata.visivel > :nth-child(4) { transition-delay: 210ms; }
.js .cascata.visivel > :nth-child(5) { transition-delay: 280ms; }
.js .cascata.visivel > :nth-child(n+6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece,
  .js .cascata > * { opacity: 1; transform: none; transition: none; }
  .titulo-secao::after { transform: scaleX(1); transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}