/* ELO GENESIS — elogenesis.com
   Sistema visual de `ELO GENESIS/SISTEMA-VISUAL.md`: paleta literal, Montserrat no display e no
   corpo, Panton Black Caps ELO nos rótulos de seção, e o ponto final de todo título em laranja —
   é o ponto do logotipo fechando a frase.

   v3, 11/11/2026 — CLARO POR PADRÃO. O site era navy do começo ao fim; o modelo da casa (o site
   da Argho e a institucional v4 aprovada) é o inverso: o claro é o chão e o escuro é o
   contraponto, reservado às faixas de cena. Quem decide o alinhamento do texto é o lado que a
   cena deixou vago. */

@font-face{
  font-family:'Panton ELO';
  src:url('fonte/PantonBlackCapsELO.ttf') format('truetype');
  font-weight:900;font-style:normal;font-display:swap;
}

:root{
  --navy:#0F1D47; --navy-claro:#17264F; --azul:#1B2A6B; --linha-escura:#2A3A6B;
  --bone:#F5F3EE; --bone-escuro:#ECE8DE; --linha:#D9D5CC;
  --laranja:#D96B1F; --laranja-claro:#F0A45E;
  --grafite:#1C1C1C; --cinza-texto:#4A5661; --cinza-claro:#C8CCD0; --cinza-rodape:#6E7A85;
  --gut:clamp(20px,5vw,80px);
  --larg:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Montserrat,system-ui,sans-serif;background:var(--bone);color:var(--grafite);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:900;letter-spacing:-.03em;line-height:1.05;color:var(--navy)}
:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
.ponto{color:var(--laranja)}
.chave{color:var(--laranja)}
.dentro{max-width:var(--larg);margin:0 auto;padding:0 var(--gut);width:100%}
.corpo{font-size:clamp(16px,1.25vw,18.5px);line-height:1.62;font-weight:500;
  color:var(--cinza-texto);max-width:58ch}

.pular{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--laranja);color:#fff;
  padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px}
.pular:focus{left:16px}

/* rótulo de seção: numerado porque a página É uma sequência, do que a marca é até como falar */
.secao{font-family:'Panton ELO',Montserrat,sans-serif;font-weight:900;
  font-size:clamp(11px,1.05vw,13px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--laranja);margin-bottom:18px}
.kicker{font-family:'Panton ELO',Montserrat,sans-serif;font-weight:900;
  font-size:clamp(12px,1.15vw,15px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--laranja)}
/* O LOGOTIPO EM TODA CENA. Ele abre o bloco de texto, no mesmo recuo da página. Na abertura é
   grande e ocupa o lugar do rótulo escrito "ELO GENESIS" — escrever o nome ao lado do logotipo é
   dizer a mesma coisa duas vezes. */
.marca-cena{width:clamp(150px,15vw,210px);height:auto;margin-bottom:clamp(20px,2.6vh,30px)}
.abertura .marca-cena{width:clamp(190px,21vw,290px);margin-bottom:clamp(22px,3vh,36px)}
/* a cena que não tem bloco de texto assina no canto escuro da própria foto */
/* .planta img tem especificidade maior que .marca-foto e engolia a largura: a assinatura
   precisa do mesmo peso de seletor para não virar marca d água gigante. */
.planta img.marca-foto{position:absolute;left:clamp(26px,3vw,52px);bottom:clamp(22px,2.6vw,38px);
  width:clamp(104px,9vw,140px);height:auto;opacity:.92;border-radius:0}

/* ── topo ─────────────────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px var(--gut);background:rgba(245,243,238,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha)}
.marca img{width:clamp(108px,9vw,132px)}
.topo nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);font-size:14px;
  font-weight:600;color:var(--navy)}
.topo nav a:hover{color:var(--laranja)}
.cta{background:var(--navy);color:#fff;border-radius:999px;padding:11px 22px;white-space:nowrap}
.cta:hover{background:var(--laranja);color:#fff}

/* ── cena de fundo: a mesma mecânica na abertura e no contato ─────────── */
.abertura,.contato,.cena{position:relative;isolation:isolate;overflow:hidden}
.abertura .fundo,.contato .fundo,.cena .fundo{position:absolute;inset:0;width:100%;
  height:100%;object-fit:cover;z-index:-2}
.abertura .veu,.contato .veu,.cena .veu{position:absolute;inset:0;z-index:-1}

/* ── abertura (clara) ─────────────────────────────────────────────────── */
/* A gota abre o alvo à direita e deixa o lado esquerdo claro e vazio: o véu CLAREIA a esquerda
   em vez de escurecer, e o título entra em navy. */
.abertura{min-height:clamp(560px,86vh,940px);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(72px,11vh,132px) 0 clamp(64px,9vh,104px);
  background:var(--bone)}
.abertura .fundo{object-position:70% center}
.abertura .veu{background:
  linear-gradient(90deg,rgba(245,243,238,.96) 0%,rgba(245,243,238,.90) 26%,rgba(245,243,238,.30) 50%,rgba(245,243,238,0) 70%),
  linear-gradient(0deg,rgba(245,243,238,.42) 0%,rgba(245,243,238,0) 30%)}
.abertura h1{font-size:clamp(42px,7.2vw,100px);margin:18px 0 26px}
.lead{font-size:clamp(17px,1.45vw,21px);line-height:1.52;font-weight:500;max-width:44ch;
  color:var(--cinza-texto)}
.botoes{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}
.botao{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:15px;
  padding:16px 28px;border-radius:999px}
.botao:hover{background:var(--laranja)}
.botao.vazado{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.botao.vazado:hover{background:var(--navy);color:#fff}

/* ── régua de fatos ───────────────────────────────────────────────────── */
.regua{background:var(--bone-escuro);border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha)}
.regua .dentro{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(20px,3vw,48px);padding-top:clamp(28px,4vh,44px);padding-bottom:clamp(28px,4vh,44px)}
.regua strong{display:block;font-size:clamp(19px,1.8vw,24px);font-weight:800;color:var(--navy);
  letter-spacing:-.02em;margin-bottom:6px}
.regua span{font-size:14.5px;font-weight:500;color:var(--cinza-texto);line-height:1.45}

/* ── 01 · a marca: seção inteira sobre uma cena ───────────────────────── */
/* A cena do leque deixa vago o canto de BAIXO À ESQUERDA (o bico vem do alto): o véu escurece
   esse canto e deixa o leque e o elo intactos. */
.cena{display:flex;align-items:flex-end;min-height:clamp(540px,82vh,900px);
  padding:clamp(96px,16vh,200px) 0 clamp(56px,9vh,96px)}
.cena .fundo{object-position:62% center}
.cena .veu{background:
  linear-gradient(95deg,rgba(6,12,30,.94) 0%,rgba(6,12,30,.80) 36%,rgba(6,12,30,.26) 64%,rgba(6,12,30,0) 86%),
  linear-gradient(0deg,rgba(6,12,30,.92) 0%,rgba(6,12,30,.42) 40%,rgba(6,12,30,0) 70%)}
.cena h2{font-size:clamp(28px,3.9vw,52px);color:#fff;margin-bottom:22px}
.cena .lead{color:#D6DCE6;max-width:50ch}

/* ── bloco duplo: painel de texto + foto ──────────────────────────────── */
/* Texto sobre foto só é legível quando a cena reserva um lado vago e escuro. Quando a foto ocupa
   o quadro inteiro, o texto vai para um painel chapado ao lado — e o painel começa no mesmo
   recuo das outras seções, para o olho não perceber dois alinhamentos. */
.dupla{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--navy)}
.dupla .bloco{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(44px,7vh,88px) clamp(28px,4vw,56px) clamp(44px,7vh,88px)
          max(var(--gut),calc((100vw - var(--larg)) / 2 + var(--gut)))}
.dupla .bloco p{font-size:clamp(22px,2.5vw,36px);font-weight:900;line-height:1.08;
  letter-spacing:-.03em;color:#fff}
.dupla .bloco .apoio{font-size:clamp(15px,1.2vw,17px);font-weight:500;line-height:1.55;
  letter-spacing:0;color:#D6DCE6;margin-top:18px;max-width:40ch}
.dupla figure{min-height:clamp(320px,46vh,560px)}
.dupla figure img{width:100%;height:100%;object-fit:cover}

/* ── o que fazemos ────────────────────────────────────────────────────── */
.fazemos{padding:clamp(72px,11vh,132px) 0}
.cabeca{margin-bottom:clamp(36px,6vh,64px)}
.cabeca h2{font-size:clamp(28px,3.9vw,52px);margin-bottom:22px}
.cabeca .corpo{margin-top:4px}

/* a cena da planta: uma foto só, grande, com a legenda apontando o que está visível nela */
.planta{position:relative;max-width:1560px;margin:0 auto clamp(28px,4vh,48px);
  padding:0 clamp(0px,2vw,32px)}
.planta img{width:100%;border-radius:4px}
.planta figcaption{max-width:var(--larg);margin:16px auto 0;padding:0 var(--gut);
  font-size:15px;line-height:1.55;font-weight:600;color:var(--cinza-texto)}

.quatro{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:clamp(20px,2.6vw,36px);margin-top:clamp(28px,4vh,52px)}
.quatro h3{font-size:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:10px;
  padding-top:18px;border-top:3px solid var(--laranja)}
.quatro p{font-size:15px;line-height:1.55;font-weight:500;color:var(--cinza-texto)}

/* ── adjuvantes ───────────────────────────────────────────────────────── */
.adjuvantes{position:relative;isolation:isolate;overflow:hidden;
  background:var(--bone-escuro);padding:clamp(72px,11vh,132px) 0;
  border-top:1px solid var(--linha)}
/* O alvo entra como marca d'água, atrás de tudo. Discreto: o alvo de verdade é a CENA
   da faixa da marca, e repetir o dispositivo em força enfraquece os dois. */
.adjuvantes .alvo{position:absolute;z-index:-1;right:-16vw;top:50%;transform:translateY(-50%);
  width:min(56vw,600px);height:auto;opacity:.28;pointer-events:none}
.trio{list-style:none;counter-reset:passo;max-width:var(--larg);margin:0 auto;
  padding:0 var(--gut);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,3vw,40px)}
.trio li{counter-increment:passo;position:relative;background:var(--bone);
  border:1px solid var(--linha);border-radius:4px;padding:clamp(24px,3vw,34px);overflow:hidden}
.trio li::before{content:counter(passo,decimal-leading-zero);position:absolute;bottom:-26px;
  right:10px;font-size:104px;font-weight:900;letter-spacing:-.06em;color:#EFEAE0;line-height:1;
  z-index:0}
.trio h3{font-size:20.5px;font-weight:800;letter-spacing:-.015em;margin-bottom:12px;
  position:relative}
.trio h3::before{content:"";display:block;width:34px;height:3px;background:var(--laranja);
  margin-bottom:16px}
.trio p{font-size:15.5px;line-height:1.56;font-weight:500;color:var(--cinza-texto);position:relative}
.aviso{max-width:var(--larg);margin:clamp(28px,4vh,48px) auto 0;padding:0 var(--gut);
  font-size:16px;line-height:1.6;font-weight:500;color:var(--cinza-texto);max-width:min(var(--larg),76ch)}
.aviso strong{color:var(--navy);font-weight:800}

/* ── biopark ──────────────────────────────────────────────────────────── */
.biopark{padding:clamp(76px,12vh,152px) 0;border-top:1px solid var(--linha)}
.biopark .dentro{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(28px,5vw,72px)}
.biopark h2{font-size:clamp(26px,3.5vw,46px);margin-bottom:22px}
.biopark figure{border-radius:4px;overflow:hidden}

/* ── contato (escuro, sobre a cena do campo) ──────────────────────────── */
.contato{padding:clamp(88px,14vh,180px) 0 clamp(96px,16vh,200px)}
.contato .fundo{object-position:center 62%}
.contato .veu{background:
  linear-gradient(100deg,rgba(9,17,42,.93) 0%,rgba(9,17,42,.76) 44%,rgba(9,17,42,.30) 76%,rgba(9,17,42,.16) 100%)}
.contato h2{font-size:clamp(28px,3.9vw,52px);margin:16px 0 22px;color:#fff}
.contato .lead{color:#D6DCE6;max-width:50ch}
.contato dl{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,80px);margin-top:38px}
.contato dt{font-family:'Panton ELO',Montserrat,sans-serif;font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--laranja);margin-bottom:8px}
.contato dd{font-size:clamp(17px,1.5vw,21px);font-weight:700;color:#fff}
.contato a:hover{color:var(--laranja-claro)}

footer{background:var(--navy);padding:48px var(--gut);display:flex;flex-wrap:wrap;
  align-items:center;gap:24px;justify-content:space-between}
footer .assina{display:flex;align-items:center;gap:18px}
footer .assina .icone{width:58px;height:58px}
footer .assina .palavra{width:168px}
footer p{font-family:'Panton ELO',Montserrat,sans-serif;font-size:11.5px;letter-spacing:.18em;
  color:var(--cinza-claro)}

/* ── telas estreitas ──────────────────────────────────────────────────── */
@media (max-width:880px){
  .biopark .dentro{grid-template-columns:1fr}
  .biopark figure{order:0}
  .cena{min-height:0;padding-top:clamp(200px,42vh,420px)}
  .cena .fundo{object-position:70% center}
  .cena .veu{background:
    linear-gradient(0deg,rgba(6,12,30,.95) 0%,rgba(6,12,30,.78) 52%,rgba(6,12,30,.25) 100%)}
  .adjuvantes .alvo{right:-36vw;width:92vw;opacity:.22}
  .topo nav a:not(.cta){display:none}
  .abertura{min-height:0;padding-top:clamp(48px,7vh,80px)}
  .abertura .fundo{object-position:70% center}
  .abertura .veu{background:
    linear-gradient(0deg,rgba(245,243,238,.97) 0%,rgba(245,243,238,.90) 52%,rgba(245,243,238,.62) 100%)}
  .dupla{grid-template-columns:1fr}
  .dupla .bloco{padding:clamp(40px,6vh,72px) var(--gut)}
  .dupla figure{min-height:0;aspect-ratio:16/10}
  .contato .veu{background:
    linear-gradient(0deg,rgba(9,17,42,.93) 0%,rgba(9,17,42,.74) 60%,rgba(9,17,42,.48) 100%)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}