/* áreas · sol a pino, grafite · prefixo ar- */
.ar-secao{
  position:relative;isolation:isolate;overflow:clip;
  background:linear-gradient(in oklab 180deg, #1c1a1c, #262226);
  color:#f6ece1;
  padding:var(--respiro) 0;
}
.ar-malha{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ar-m{position:absolute;border-radius:50%}
.ar-m1{width:80vmax;height:56vmax;left:-24vmax;top:-20vmax;opacity:.25;background:radial-gradient(closest-side in oklab, #94543f, rgb(148 84 63 / 0));animation:ar-deriva 34s ease-in-out infinite alternate}
.ar-m2{width:60vmax;height:50vmax;right:-20vmax;bottom:-16vmax;opacity:.08;background:radial-gradient(closest-side in oklab, #c9c3cf, rgb(201 195 207 / 0));animation:ar-deriva 28s ease-in-out infinite alternate-reverse}
@keyframes ar-deriva{to{transform:translate(6vmax,3vmax) scale(1.07)}}

/* cabeçalho em duas colunas */
.ar-cabeca{
  padding:0 var(--margem);max-width:calc(var(--conteudo) + 2 * var(--margem));margin:0 auto clamp(56px,6vw,96px);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px clamp(32px,5vw,96px);align-items:end;
}
.ar-kicker{margin:0 0 18px;font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#cfc4bd;display:flex;align-items:center;gap:14px}
.ar-kicker::before{content:"";width:34px;height:2px;background:var(--pista);border-radius:2px}
.ar-titulo{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(44px,5.2vw,88px);line-height:.88;color:#f6ece1}
.ar-linha{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.ar-linha>span{display:inline-block}
.ar-l2>span{color:var(--pessego)}
.js .ar-linha>span{transform:translateY(105%)}
.js .ar-secao.ar-on .ar-linha>span{transform:none;transition:transform 1.1s var(--curva)}
.js .ar-secao.ar-on .ar-l2>span{transition-delay:.18s}
.ar-apoio{margin:0;font-size:clamp(18px,1.4vw,22px);line-height:1.5;color:#e2d6ce;max-width:24em;padding-bottom:.3em}

/* a pista: três raias de borda a borda */
.ar-pista{list-style:none;margin:0;padding:0;position:relative}
.ar-raia{
  --ar-chao:#4a2b23;
  position:relative;isolation:isolate;overflow:clip;
  display:grid;grid-template-columns:var(--ar-col) minmax(0,1fr);
  --ar-col:clamp(150px,16vw,260px);--ar-passo:clamp(14px,2.2vw,40px);--ar-esc:0;
  background:
    radial-gradient(circle at 1px 1px, rgb(20 6 2 / .16) .9px, transparent 1.4px) 0 0 / 5px 5px,
    radial-gradient(circle at 1px 1px, rgb(255 236 214 / .07) .8px, transparent 1.3px) 2px 3px / 6px 6px,
    linear-gradient(180deg, rgb(255 232 208 / .12), rgb(255 232 208 / 0) 38%, rgb(0 0 0 / .16)),
    var(--ar-chao);
  outline:none;transition:background-color .6s ease, --ar-chao .6s ease;cursor:default;
}
.ar-raia-1{--ar-chao:#84483a}
.ar-raia-2{--ar-esc:1}
.ar-raia-3{--ar-esc:2}
.ar-raia::before,.ar-raia:last-child::after{ /* linha branca da raia */
  content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:4px;background:var(--linha);
  transform-origin:0 50%;
}
.ar-raia:last-child::after{top:auto;bottom:0}
.js .ar-raia::before,.js .ar-raia:last-child::after{transform:scaleX(0)}
.js .ar-corre .ar-raia::before,.js .ar-corre .ar-raia:last-child::after{transform:none;transition:transform 1.5s var(--curva)}
.js .ar-corre .ar-raia-2::before{transition-delay:.15s}
.js .ar-corre .ar-raia-3::before{transition-delay:.3s}
.js .ar-corre .ar-raia-3::after{transition-delay:.45s}

/* luz que corre a raia na entrada e ao acender */
.ar-varre{
  position:absolute;z-index:-1;top:0;bottom:0;left:0;width:34%;pointer-events:none;
  background:linear-gradient(90deg, rgb(255 236 214 / 0), rgb(255 236 214 / .2) 60%, rgb(255 244 228 / .32) 92%, rgb(255 236 214 / 0));
  transform:translateX(-110%);
}
.ar-corre .ar-varre{animation:ar-corre 2.2s var(--curva) .2s 1 both}
.ar-corre .ar-raia-2 .ar-varre{animation-delay:.38s}
.ar-corre .ar-raia-3 .ar-varre{animation-delay:.56s}
.ar-corre .ar-raia.ar-acesa .ar-varre{animation:ar-corre2 1.6s var(--curva) 0s 1 both}
@keyframes ar-corre{to{transform:translateX(320%)}}
@keyframes ar-corre2{from{transform:translateX(-110%)}to{transform:translateX(320%)}}

.ar-num{ /* número pintado e linha de largada, escalonados como na curva */
  --ar-topo:clamp(18px,2.2vw,34px);
  display:flex;align-items:flex-start;padding:var(--ar-topo) 0 0 calc(var(--margem) * .5 + var(--ar-esc) * var(--ar-passo));
  font-family:var(--f-titulo);font-weight:600;font-size:clamp(76px,9vw,170px);line-height:.8;color:rgb(255 250 243 / .32);
  transition:color .6s ease, text-shadow .6s ease;
}
.ar-num::after{
  content:"";align-self:stretch;flex:none;width:clamp(4px,.45vw,7px);margin:calc(-1 * var(--ar-topo)) 0 0 clamp(10px,1.2vw,20px);
  background:var(--linha);transform-origin:50% 0;
}
.js .ar-num::after{transform:scaleY(0)}
.js .ar-corre .ar-num::after{transform:none;transition:transform .9s var(--curva) calc(.5s + var(--ar-esc) * .15s)}
.ar-raia-1 .ar-num{color:rgb(255 250 243 / .88)}
.ar-conteudo{padding:clamp(30px,3.2vw,52px) var(--margem) clamp(30px,3.2vw,52px) clamp(16px,2vw,32px);max-width:calc(var(--conteudo) + var(--margem))}
.ar-nome{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(40px,4.2vw,72px);line-height:.9;color:#f6ece1}
.ar-nome small{font-size:.5em;font-weight:500;color:var(--pessego);letter-spacing:.1em;vertical-align:.5em;margin-left:.2em}
.ar-raia-1 .ar-nome{font-size:clamp(48px,5.4vw,96px)}

.ar-topo{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:16px clamp(28px,4vw,72px);align-items:end}
.ar-intro{margin:0;font-size:clamp(18px,1.3vw,20px);line-height:1.55;color:#f6ece1;max-width:30em;padding-bottom:.4em}

.ar-itens{list-style:none;margin:clamp(30px,3vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px clamp(20px,2.2vw,36px)}
.ar-itens b{display:flex;align-items:flex-start;gap:10px;font-family:var(--f-titulo);font-weight:500;font-size:clamp(25px,1.9vw,30px);line-height:1;color:#fbe3cc;margin-bottom:8px}
.ar-itens b::before{content:"";flex:none;width:18px;height:3px;margin-top:.36em;background:var(--linha);border-radius:2px}
.ar-itens span{display:block;font-size:18px;line-height:1.5;color:#f6ece1}

.ar-negado{
  margin:clamp(30px,3vw,44px) calc(-1 * var(--margem)) 0 0;padding:20px var(--margem) 22px clamp(20px,2vw,30px);
  background:linear-gradient(90deg, rgb(28 18 16 / .42), rgb(28 18 16 / .22));
  border-top:2px dashed rgb(255 250 243 / .45);
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:8px clamp(20px,3vw,48px);align-items:baseline;
}
.ar-negado b{font-family:var(--f-titulo);font-weight:600;font-size:clamp(28px,2.4vw,38px);line-height:1;color:var(--pessego)}
.ar-negado p{margin:0;font-size:18px;line-height:1.55;color:#f6ece1;max-width:44em}
.ar-negado a{color:var(--pessego);font-weight:400;text-underline-offset:4px;white-space:nowrap}
.ar-negado a::after{content:" ↓"}
.ar-negado a:focus-visible{outline:2px solid var(--pessego);outline-offset:3px}

.ar-raia-1 .ar-conteudo{padding-bottom:0}
.ar-raia-1 .ar-negado{padding-bottom:clamp(26px,2.6vw,40px)}
.ar-curta{display:grid;grid-template-columns:minmax(0,clamp(220px,24vw,380px)) minmax(0,1fr);gap:8px clamp(20px,3vw,56px);align-items:baseline}
.ar-frase{margin:0;font-size:clamp(18px,1.4vw,22px);line-height:1.5;color:#f6ece1;max-width:30em}

/* a raia se acende */
.ar-raia.ar-acesa{--ar-chao:#8f4e3d}
.ar-raia-1.ar-acesa{--ar-chao:#8f4e3d}
.ar-raia.ar-acesa .ar-num{color:var(--linha);text-shadow:0 0 30px rgb(255 236 214 / .45)}
.ar-raia:focus-visible{box-shadow:inset 0 0 0 2px var(--pessego)}

@property --ar-chao{syntax:"<color>";inherits:true;initial-value:#4a2b23}

@media (max-width:1200px){ .ar-itens{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .ar-cabeca{grid-template-columns:minmax(0,1fr)}
  .ar-topo{grid-template-columns:minmax(0,1fr)}
  .ar-itens{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ar-curta{grid-template-columns:minmax(0,1fr)}
  .ar-negado{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .ar-raia{--ar-col:78px;--ar-passo:9px}
  .ar-num{--ar-topo:24px;font-size:60px;padding-left:calc(10px + var(--ar-esc) * var(--ar-passo))}
  .ar-num::after{width:4px;margin-left:8px}
  .ar-conteudo{padding:26px var(--margem) 30px 12px}
  .ar-titulo{font-size:clamp(38px,10.6vw,60px)}
  .ar-itens{grid-template-columns:minmax(0,1fr);gap:20px}
  .ar-negado{margin-left:-12px;padding:18px var(--margem) 26px 12px}
}
@media (prefers-reduced-motion:reduce){
  .js .ar-linha>span{transform:none}
  .js .ar-raia::before,.js .ar-raia:last-child::after{transform:none}
  .ar-varre{display:none}
  .js .ar-num::after{transform:none}
}