/* =====================================================================
   BARRA 2238 — barra2238.com.br
   Folha de estilo única. Todas as cores estão no bloco :root abaixo:
   troque um valor ali e a mudança vale no site inteiro.
   Tipografia: Bebas Neue (títulos) + Inter (texto corrido).
   ===================================================================== */

:root{
  --osso:#F7F2E7;        /* fundo principal, tom de papel */
  --osso-2:#EFE7D6;      /* faixa alternada */
  --papel:#FFFDF7;       /* cartões */
  --pasto:#124A31;       /* verde principal */
  --pasto-esc:#0D3823;   /* verde escuro (topo, rodapé) */
  --sol:#E0A32A;         /* amarelo da marca */
  --sol-esc:#9E6D08;     /* amarelo escurecido, para texto sobre fundo claro */
  --tinta:#2C2219;       /* texto */
  --tinta-2:#5E5243;     /* texto secundário */
  --linha:rgba(44,34,25,.14);

  --bloco:clamp(56px, 8.5vw, 100px);
  --raio:10px;

  color-scheme: light;   /* impede o navegador de inverter as cores */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--osso); -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

body{
  margin:0; background:var(--osso); color:var(--tinta);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size:17px; line-height:1.72; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (max-width:600px){ body{font-size:16.5px; line-height:1.66} }

img{max-width:100%; display:block}
a{color:inherit}
a:focus-visible, button:focus-visible{outline:3px solid var(--sol); outline-offset:3px; border-radius:3px}

.wrap{width:100%; max-width:1120px; margin-inline:auto; padding-inline:clamp(20px,5.2vw,32px)}
section{padding:var(--bloco) 0}

/* ---------- tipografia de destaque ---------- */
.nome, .titulo, .cifra, .placa b, .palavra p, .marcado, .marca b, .rodape-marca b{
  font-family:"Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight:400; text-transform:uppercase;
}
.titulo{
  font-size:clamp(30px, 4.6vw, 48px); line-height:1.08; letter-spacing:.025em;
  margin:0 0 16px; color:var(--tinta);
}
.etiqueta{
  display:flex; align-items:center; gap:11px;
  font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--sol-esc); margin:0 0 14px;
}
.etiqueta::before{content:""; width:24px; height:3px; background:var(--sol); border-radius:2px; flex:none}
.sub{
  color:var(--tinta-2); margin:0 0 clamp(26px,4vw,42px); max-width:58ch;
  font-size:clamp(16px,1.6vw,18px);
}

/* ---------- topo ---------- */
.topo{position:sticky; top:0; z-index:60; background:var(--pasto-esc); border-bottom:3px solid var(--sol)}
.topo-in{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:11px}
.marca{display:block; text-decoration:none; color:#fff; line-height:1.2}
.marca b{display:block; font-size:20px; letter-spacing:.06em; line-height:1.1}
.marca > span{display:block; margin-top:2px; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(247,242,231,.62)}
.menu{margin-left:auto; display:flex; align-items:center; gap:22px}
.menu a{color:#EFE7D6; text-decoration:none; font-size:14.5px; font-weight:500}
.menu a:hover{color:#fff; text-decoration:underline; text-underline-offset:5px}
.btn-topo{background:var(--sol); color:#23180A !important; padding:9px 17px; border-radius:6px; font-weight:700; font-size:14px}
.btn-topo:hover{filter:brightness(1.07); text-decoration:none !important}

@media (max-width:820px){
  .menu{
    width:100%; margin-left:0; order:3; justify-content:space-between; gap:8px;
    border-top:1px solid rgba(247,242,231,.15); padding-top:10px;
  }
  .menu a{font-size:13.5px}
  .btn-topo{padding:8px 14px; font-size:13px}
  .marca{margin-right:auto}
}
@media (max-width:400px){ .menu a:not(.btn-topo){font-size:12.5px} }

/* ---------- herói ---------- */
.heroi{
  background:linear-gradient(168deg, #16593A 0%, var(--pasto) 45%, var(--pasto-esc) 100%);
  color:#F6F0E3; padding:0; overflow:hidden;
}
.heroi-in{
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(26px,4.6vw,54px);
  align-items:center; padding-block:clamp(44px,6.5vw,80px) clamp(48px,6.5vw,84px);
}
.heroi .etiqueta{color:var(--sol)}
.nome{
  margin:0; font-size:clamp(56px, 13vw, 108px); line-height:.94; letter-spacing:.02em;
}
.nome span{display:block}
.chamada{margin:20px 0 0; max-width:36ch; font-size:clamp(16.5px,1.8vw,20px); line-height:1.6; color:#E7DEC8}
.placa{
  display:inline-flex; align-items:center; gap:14px; margin-top:26px;
  background:var(--sol); color:#23180A; padding:11px 20px 9px; border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(35,24,10,.22);
}
.placa b{font-size:clamp(38px,5.4vw,52px); line-height:.85; letter-spacing:.03em}
.placa i{
  font-family:"Inter",sans-serif; font-style:normal; font-size:11px; font-weight:700;
  line-height:1.35; letter-spacing:.12em; text-transform:uppercase; max-width:9ch;
}
.retrato{
  width:100%; max-width:400px; margin-inline:auto; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--raio); box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.retrato img{width:100%; height:100%; object-fit:cover; object-position:top center}

@media (max-width:860px){
  .heroi-in{grid-template-columns:1fr; gap:26px; padding-block:clamp(34px,7vw,52px)}
  .nome{font-size:clamp(52px,15vw,78px)}
  .chamada{max-width:none}
  .retrato{max-width:none; aspect-ratio:4/5}   /* foto DEPOIS do texto, largura cheia */
}

/* ---------- a palavra ---------- */
.palavra{background:var(--osso-2); border-block:1px solid var(--linha)}
.palavra p{
  margin:0; max-width:17ch;
  font-size:clamp(34px,7vw,60px); line-height:1.02; letter-spacing:.02em;
  border-left:6px solid var(--sol); padding-left:clamp(18px,3vw,26px);
}
.palavra small{
  display:block; margin-top:16px; padding-left:clamp(24px,3.6vw,32px);
  font-size:14.5px; color:var(--tinta-2);
}

/* ---------- quem sou ---------- */
.bio{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,44px)}
.bio p{margin:0 0 18px; max-width:60ch}
.bio p:last-child{margin-bottom:0}
@media (max-width:820px){ .bio{grid-template-columns:1fr; gap:0} }

/* ---------- faixa de foto ---------- */
.faixa-foto{margin:0; background:var(--pasto-esc); border-block:4px solid var(--sol)}
.faixa-foto img{width:100%; height:clamp(200px,42vw,420px); object-fit:cover; object-position:center 30%}

/* ---------- trajetória ---------- */
.acao{
  background:var(--pasto); color:#F3EDE0; border-radius:var(--raio);
  padding:clamp(24px,3.4vw,36px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3.2vw,34px); align-items:center;
  margin-bottom:clamp(28px,4vw,42px);
}
.acao .cifra{font-size:clamp(46px,6.6vw,72px); line-height:.9; color:var(--sol); letter-spacing:.02em}
.acao .cifra em{
  display:block; margin-top:10px; font-style:normal; font-family:"Inter",sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#D9CFB8;
}
.acao p{margin:0; max-width:54ch; color:#EDE6D7}
@media (max-width:760px){ .acao{grid-template-columns:1fr; gap:16px} }

.feitos{list-style:none; margin:0; padding:0}
.feitos li{
  display:grid; grid-template-columns:38px 1fr; gap:18px; align-items:start;
  padding:23px 0; border-bottom:1px solid var(--linha);
}
.feitos li:first-child{border-top:1px solid var(--linha)}
.feitos h3{margin:0 0 5px; font-size:18px; font-weight:700; line-height:1.35}
.feitos p{margin:0; color:var(--tinta-2); max-width:66ch}
.ferro{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:rgba(224,163,42,.16); color:var(--sol-esc);
  display:grid; place-items:center; font-size:12.5px; font-weight:700; letter-spacing:.02em;
  box-shadow:inset 0 0 0 2px rgba(224,163,42,.5);
}
@media (max-width:520px){
  .feitos li{grid-template-columns:30px 1fr; gap:13px; padding:19px 0}
  .ferro{width:30px; height:30px; font-size:11px}
}

/* ---------- compromissos ---------- */
.compromissos{background:var(--osso-2); border-block:1px solid var(--linha)}
.grade{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.item{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:21px 22px; display:grid; grid-template-columns:42px 1fr; gap:15px; align-items:start;
}
.item .ico{width:42px; height:42px; border-radius:50%; background:rgba(18,74,49,.09); display:grid; place-items:center}
.item svg{width:22px; height:22px; stroke:var(--pasto); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.item h3{margin:0 0 3px; font-size:16.5px; font-weight:700; line-height:1.35}
.item p{margin:0; font-size:15.5px; line-height:1.58; color:var(--tinta-2)}
@media (max-width:820px){ .grade{grid-template-columns:1fr} }

/* ---------- credibilidade ---------- */
.credo{background:var(--pasto); color:#F1EBDE}
.credo .titulo{color:#fff}
.credo .etiqueta{color:var(--sol)}
.credo-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start}
.credo p{margin:0 0 17px; max-width:54ch; color:#E3DAC6}
.credo p:last-child{margin-bottom:0}
.marcado{
  margin:0; color:#fff; font-size:clamp(28px,4.6vw,40px); line-height:1.06; letter-spacing:.02em;
  border-left:5px solid var(--sol); padding-left:19px;
}
@media (max-width:820px){ .credo-in{grid-template-columns:1fr; gap:22px} }

/* ---------- chamada final ---------- */
.cta{text-align:center}
.cta .etiqueta{justify-content:center}
.cta .titulo{max-width:20ch; margin-inline:auto}
.cta .sub{margin-inline:auto}
.botoes{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:8px; text-decoration:none;
  font-weight:700; font-size:15.5px; line-height:1;
  background:var(--pasto); color:#F6F0E3; border:2px solid var(--pasto);
  transition:filter .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover{filter:brightness(1.12)}
.btn--linha{background:transparent; color:var(--pasto)}
.btn--linha:hover{background:var(--pasto); color:#F6F0E3; filter:none}
@media (max-width:520px){ .btn{width:100%; padding:16px 20px} }

/* ---------- rodapé ---------- */
footer{background:var(--pasto-esc); color:#D7CEBB; padding:clamp(32px,5vw,46px) 0; border-top:3px solid var(--sol)}
.rodape-in{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; justify-content:space-between}
.rodape-marca{color:#fff}
.rodape-marca b{display:block; font-size:22px; letter-spacing:.06em; line-height:1.15}
.rodape-marca > span{display:block; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:rgba(247,242,231,.6)}
.legal{margin:15px 0 0; font-size:13.5px; line-height:1.6; color:#B5AB96; max-width:46ch}
.rodape-links{display:flex; flex-wrap:wrap; gap:10px}
.rodape-links a{
  display:inline-flex; align-items:center; padding:10px 18px; border-radius:8px;
  border:2px solid rgba(224,163,42,.55); color:var(--sol); text-decoration:none;
  font-weight:700; font-size:14.5px;
}
.rodape-links a:hover{background:var(--sol); color:#23180A}

/* ---------- botão flutuante de WhatsApp (só no celular, some no herói) ---------- */
.zap{
  position:fixed; right:15px; bottom:15px; z-index:70;
  width:54px; height:54px; border-radius:50%;
  background:#128C4A; color:#fff; display:none; place-items:center;
  box-shadow:0 10px 24px rgba(13,56,35,.4);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.zap svg{width:28px; height:28px; fill:currentColor}
.zap.aparece{opacity:1; transform:none; pointer-events:auto}
@media (max-width:820px){ .zap{display:grid} }

/* ---------- entrada do herói ---------- */
@media (prefers-reduced-motion: no-preference){
  .heroi .etiqueta, .nome, .chamada, .placa, .retrato{animation:sobe .65s cubic-bezier(.2,.7,.3,1) both}
  .nome{animation-delay:.05s}
  .chamada{animation-delay:.12s}
  .placa{animation-delay:.18s}
  .retrato{animation-delay:.1s}
  @keyframes sobe{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
}

/* numero destacado dentro da assinatura do topo e do rodape */
.marca .n, .rodape-marca .n{display:inline; color:var(--sol); font-weight:700}