/* ============================================================
   Projeto Iluminar — a página veste as cores do PROJETO
   Branco e laranja, sem verde (pedido do Allan em 18/09/2026).
   O verde é da DAidea e continua no menu e no rodapé, que são da
   empresa; daqui pra dentro quem manda é o logo do Iluminar.

   Laranja real do logo: #F35F1F.
   CONTRASTE MEDIDO (WCAG AA):
     texto pequeno laranja no branco -> #A63C0C  (5,8:1)
     #F35F1F no branco               -> 3,2:1  = só em texto GRANDE e em forma
     texto escuro sobre o laranja    -> #1A1008 (6,6:1)
   ============================================================ */
:root{
  --laranja:#F35F1F;
  --laranja-luz:#FF8A3D;
  --laranja-texto:#A63C0C;   /* laranja legível em texto pequeno no claro */
  --areia:#FBF4EE;           /* o "creme" desta página, puxado pro quente */
  --carvao:#1A1008;          /* tinta: quase preto, sem nada de verde */
  --linha-quente:rgba(26,16,8,.12);

  /* troca os tokens do site DENTRO desta página */
  --creme:var(--areia);
  --tinta:var(--carvao);
  --tinta-fraca:#6E5C50;
  --linha-clara:var(--linha-quente);
  --raio:20px;
}

/* o texto sempre por cima do tubo de luz (que é uma camada fixa).
   O herói tem regra própria no pagina.css (.hero-int .envolt, z-index 2),
   que empata com o canvas — por isso ele precisa ser citado aqui também. */
.envolt{position:relative;z-index:3}
.il-hero .envolt{z-index:3}

/* ---------- o tubo que atravessa a página ---------- */
#il-tubo{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:2;pointer-events:none;
}
html:not(.js-movimento) #il-tubo{display:none}

/* ---------- abertura ---------- */
.il-hero{
  background:#fff;color:var(--carvao);
  padding:calc(var(--e7) + 60px) 0 var(--e7);
  position:relative;overflow:hidden;
}
.il-hero::after{display:none}          /* o halo verde do hero padrão sai */
/* a luz de partida: um brilho laranja atrás do logo */
.il-hero::before{
  content:"";position:absolute;left:50%;top:-18%;translate:-50% 0;
  width:min(1000px,130%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(243,95,31,.16) 0%,rgba(243,95,31,.06) 40%,transparent 68%);
  pointer-events:none;z-index:1;
}
.js-movimento .il-hero::before{opacity:0;animation:il-acende 1.6s cubic-bezier(.22,.7,.25,1) .25s forwards}
@keyframes il-acende{from{opacity:0;scale:.86}to{opacity:1;scale:1}}

.il-hero .trilha{color:#8a7a6e}
.il-hero .trilha a{color:var(--laranja-texto)}
.il-hero h1{max-width:15ch}
.il-hero h1 em{color:var(--laranja);font-style:normal}   /* grande: 3,2:1 ok */
.il-hero .chamada{color:#5B4A3F}

.il-marca{
  display:block;width:min(420px,72%);height:auto;margin-bottom:var(--e3);
}

/* ---------- os números da prova ---------- */
.il-numeros{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);
  margin-top:var(--e5);padding-top:var(--e4);border-top:2px solid var(--laranja);
}
.il-num b{
  display:block;font-family:var(--fonte-titulo);font-weight:600;
  font-size:clamp(30px,3.6vw,46px);line-height:1;color:var(--laranja);
}
.il-num span{display:block;margin-top:8px;font-size:15px;color:#6E5C50;max-width:24ch}

/* ---------- blocos: só branco e areia; o "escuro" virou laranja cheio ---------- */
.bloco-creme{background:var(--areia)}
.bloco-branco{background:#fff}
.bloco-escuro{background:var(--laranja);color:var(--carvao)}
.bloco-escuro h2,
.bloco-escuro .intro,
.bloco-escuro > .envolt > p{color:var(--carvao)}
.bloco-escuro .intro{opacity:.85}

/* (02/10) os títulos "apagados até o tubo passar" saíram junto com o tubo */

/* ---------- o que levar ---------- */
.il-itens{list-style:none;padding:0;margin:var(--e4) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e2)}
.il-item{
  background:#fff;border:1px solid var(--linha-quente);border-radius:16px;
  padding:var(--e3);display:flex;flex-direction:column;gap:10px;
  box-shadow:0 6px 22px rgba(163,60,12,.07);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.il-item:hover{border-color:var(--laranja);box-shadow:0 14px 34px rgba(243,95,31,.18);transform:translateY(-3px)}
.il-item svg{color:var(--laranja)}
.il-item b{font-size:16.5px;line-height:1.3}
.il-item p{font-size:14.5px;color:#6E5C50}

.il-nao{margin-top:var(--e4);border-left:3px solid var(--laranja);
  padding:var(--e2) 0 var(--e2) var(--e3);max-width:64ch}
.il-nao b{display:block;margin-bottom:6px}
.il-nao a{color:var(--laranja-texto)}

/* ---------- os 3 passos (faixa laranja) ---------- */
.il-passos{list-style:none;padding:0;margin:var(--e5) 0 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3);counter-reset:passo}
.il-passo{position:relative;padding-top:var(--e5)}
.il-passo::before{
  counter-increment:passo;content:counter(passo);
  position:absolute;top:0;left:0;
  font-family:var(--fonte-titulo);font-weight:600;font-size:56px;line-height:1;
  color:#fff;
}
.il-passo b{display:block;font-size:18px;margin-bottom:6px}
.il-passo p{color:var(--carvao);font-size:15.5px}        /* .8 dava 4,41:1 — abaixo do AA */
.bloco-escuro .benef p{color:var(--carvao)}

/* ---------- a foto do dia da ação ---------- */
.il-dia{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e5);align-items:center}
.il-foto{position:relative;border-radius:var(--raio);overflow:hidden;
  box-shadow:0 20px 50px rgba(163,60,12,.16)}
.il-foto img{width:100%;height:auto;display:block}
.il-foto figcaption{
  position:absolute;inset:auto 0 0 0;padding:var(--e3);
  background:linear-gradient(to top,rgba(26,16,8,.88),transparent);
  color:#fff;font-size:14px;line-height:1.45;
}
.il-dia h2{margin-bottom:var(--e2)}
.il-quando{list-style:none;padding:0;margin:var(--e3) 0 0;display:flex;gap:10px;flex-wrap:wrap}
.il-quando li{
  background:rgba(243,95,31,.1);color:var(--laranja-texto);
  border:1px solid rgba(243,95,31,.32);border-radius:99px;
  padding:8px 16px;font-weight:600;font-size:14.5px;
}

/* ---------- o fim: o tubo se parte e vira as 200 mil ---------- */
.il-fim{
  background:#fff;padding:var(--e7) 0 calc(var(--e7) + 40px);
  text-align:center;position:relative;
}
.il-fim b{
  display:block;font-family:var(--fonte-titulo);font-weight:600;
  font-size:clamp(56px,11vw,150px);line-height:.92;letter-spacing:-.045em;
  color:var(--laranja);
}
.il-fim p{
  margin:var(--e3) auto 0;max-width:46ch;font-size:17px;line-height:1.7;color:#5B4A3F;
}

/* ---------- botões e chamada final ---------- */
/* branco no laranja dá 3,24:1: texto do botão é escuro (6,6:1) */
.btn-laranja{background:var(--laranja);color:var(--carvao)}
.btn-laranja:hover{background:#ff6f2e}
.btn-linha{border-color:rgba(26,16,8,.25);color:var(--carvao)}
.btn-linha:hover{background:rgba(26,16,8,.05)}
.btn-linha-esc{border-color:var(--linha-quente);color:var(--carvao);background:#fff}
.btn-linha-esc:hover{border-color:var(--laranja)}

.cta-textura{background:var(--laranja);color:var(--carvao)}
.cta-textura > img{display:none}          /* a folhagem verde não entra aqui */
.cta-textura::before{
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.28),transparent 62%);
}
.cta-textura h2,.cta-textura p{color:var(--carvao)}
.cta-textura p{opacity:.85}
.cta-textura .btn-laranja{background:#fff;color:var(--carvao)}
.cta-textura .btn-laranja:hover{background:#fff8f3}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .il-itens{grid-template-columns:1fr 1fr}
  .il-passos{grid-template-columns:1fr;gap:var(--e4)}
  .il-numeros{grid-template-columns:1fr;gap:var(--e3)}
  .il-dia{grid-template-columns:1fr;gap:var(--e4)}
  .il-marca{width:min(320px,78%)}
}
@media (max-width:560px){
  .il-itens{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .js-movimento .il-hero::before{animation:none;opacity:1}
  .js-movimento .bloco h2,
  .js-movimento .il-dia h2,
  .js-movimento .bloco-escuro h2{color:var(--carvao);text-shadow:none}
  .js-movimento .bloco-escuro h2{color:var(--carvao)}
}