/* sobre · manhã, areia clara · prefixo sb- */
.sb-secao{
  position:relative;isolation:isolate;overflow:clip;
  background:linear-gradient(in oklab 180deg, #f7efe4, #fbf6ef);
  color:var(--grafite);
  padding:var(--respiro) var(--margem) clamp(64px,6.4vw,104px);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  column-gap:clamp(32px,5vw,96px);
}
.sb-malha{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sb-m{position:absolute;border-radius:50%;opacity:.35}
.sb-m1{width:70vmax;height:50vmax;right:-20vmax;top:-12vmax;background:radial-gradient(closest-side in oklab, #f2cfb0, rgb(242 207 176 / 0));animation:sb-deriva 32s ease-in-out infinite alternate}
.sb-m2{width:60vmax;height:44vmax;left:10vmax;bottom:-20vmax;background:radial-gradient(closest-side in oklab, #f2cfb0, rgb(242 207 176 / 0));animation:sb-deriva 26s ease-in-out infinite alternate-reverse}
@keyframes sb-deriva{to{transform:translate(-6vmax,4vmax) scale(1.08)}}

/* foto: altura toda, sangra na borda e se desfaz na areia; luz de manhã entra pela direita */
.sb-foto{
  margin:calc(-1 * var(--respiro)) 0 0 calc(-1 * var(--margem));
  position:relative;min-height:700px;
  -webkit-mask-image:linear-gradient(to right,#000 0 76%,transparent 100%),linear-gradient(transparent 0,#000 8%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,#000 0 76%,transparent 100%),linear-gradient(transparent 0,#000 8%,#000 86%,transparent 100%);
          mask-composite:intersect;
}
.sb-foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block;
  filter:saturate(.94) sepia(.07) contrast(1.02);
}
.sb-foto::after{ /* sol baixo, de lado */
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:
    radial-gradient(closest-side in oklab, rgb(255 226 196 / .9), rgb(255 226 196 / 0)) 115% 18% / 90% 70% no-repeat,
    linear-gradient(in oklab 100deg, rgb(120 70 60 / .28), rgb(120 70 60 / 0) 45%);
}

.sb-texto{max-width:40em;align-self:center;padding:clamp(8px,2vw,32px) 0 clamp(56px,6vw,96px)}
.sb-kicker{margin:0 0 18px;font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--grafite-2);display:flex;align-items:center;gap:14px}
.sb-kicker::before{content:"";width:34px;height:2px;background:var(--pista);border-radius:2px}
.sb-titulo{margin:0 0 30px;font-family:var(--f-titulo);font-weight:600;font-size:clamp(48px,5.6vw,92px);line-height:.88;color:var(--grafite)}
.sb-linha{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.sb-linha>span{display:inline-block}
.sb-l2>span{color:var(--pista-funda)}
.js .sb-linha>span{transform:translateY(105%)}
.js .sb-secao.sb-on .sb-linha>span{transform:none;transition:transform 1.1s var(--curva)}
.js .sb-secao.sb-on .sb-linha:nth-child(2)>span{transition-delay:.1s}
.js .sb-secao.sb-on .sb-linha:nth-child(3)>span{transition-delay:.24s}
.js .sb-secao.sb-on .sb-linha:nth-child(4)>span{transition-delay:.34s}

.sb-corpo{margin:0 0 16px;font-size:clamp(18px,1.3vw,20px);line-height:1.55;max-width:33em;color:var(--grafite-2)}
.sb-lead{font-size:clamp(20px,1.6vw,25px);line-height:1.45;color:var(--grafite);max-width:26em;margin-bottom:20px}
.sb-citacao{margin:34px 0 0;padding:0 0 0 clamp(34px,3vw,46px);position:relative}
.sb-citacao::before{content:"“";position:absolute;left:-4px;top:-.18em;font-family:var(--f-titulo);font-weight:600;font-size:clamp(84px,7vw,120px);line-height:1;color:var(--pista)}
.sb-citacao p span{display:block}
.sb-citacao p{margin:0;font-family:var(--f-titulo);font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:.98;color:var(--grafite)}
.sb-citacao footer{margin-top:10px;font-size:15px;color:var(--grafite-2)}

/* a pista: raia que cruza a tela inteira; ela "fica de pé" sobre ela */
.sb-pista{grid-column:1/-1;position:relative;z-index:2;margin-top:-2px}
.sb-asfalto{
  position:relative;height:var(--sb-h,64px);margin:0 calc(-1 * var(--margem));
  background:
    repeating-linear-gradient(90deg, rgb(60 20 12 / .05) 0 2px, transparent 2px 7px),
    linear-gradient(#b8725a,#a8644d);
  box-shadow:inset 0 3px 0 rgb(255 250 243 / .92), inset 0 -3px 0 rgb(255 250 243 / .92), 0 22px 44px -28px rgb(80 36 26 / .6);
}
.sb-rastro{ /* luz que fica para trás */
  position:absolute;left:0;top:3px;bottom:3px;width:var(--sb-x,0px);
  background:linear-gradient(90deg, rgb(255 244 228 / 0), rgb(255 244 228 / .28));
  transition:width 1.1s var(--curva);
}
.sb-luz{
  position:absolute;top:50%;left:var(--sb-x,0px);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--sol);box-shadow:0 0 24px 10px rgb(255 244 228 / .75);
  opacity:0;transition:left 1.1s var(--curva), opacity .6s ease;
}
.sb-pista.sb-corre .sb-luz{opacity:1}

.sb-raia{--sb-pad:28px;list-style:none;margin:0 auto;padding:var(--sb-pad) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);column-gap:clamp(20px,2.4vw,40px);max-width:var(--conteudo)}
.sb-marco{position:relative}
.sb-marco::before{ /* marca branca atravessando a raia */
  content:"";position:absolute;left:0;top:calc(-1 * (var(--sb-pad) + var(--sb-h,64px)));width:3px;height:var(--sb-h,64px);background:var(--linha);
}
.sb-n{ /* número pintado no asfalto */
  position:absolute;left:16px;top:calc(-1 * (var(--sb-pad) + var(--sb-h,64px)) + 6px);
  font-family:var(--f-titulo);font-weight:600;font-size:calc(var(--sb-h,64px) - 6px);line-height:1;letter-spacing:.02em;
  color:rgb(255 250 243 / .38);transition:color .8s ease, text-shadow .8s ease;
}
.sb-marco b,.sb-d{opacity:.42;transition:opacity .8s ease}
.sb-marco.sb-aceso b,.sb-marco.sb-aceso .sb-d{opacity:1}
.sb-marco.sb-aceso .sb-n{color:var(--linha);text-shadow:0 0 18px rgb(255 244 228 / .8)}
.sb-marco b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:clamp(30px,2.6vw,42px);line-height:.95;margin:0 0 8px;color:var(--grafite)}
.sb-d{display:block;font-size:18px;line-height:1.45;color:var(--grafite-2);max-width:17em}
.sb-chegada b{color:var(--pista-funda);font-size:clamp(38px,3.4vw,56px)}
.sb-chegada .sb-d{font-family:var(--f-titulo);font-weight:500;font-size:clamp(26px,2.1vw,32px);line-height:1;color:var(--grafite);max-width:13em}

@media (max-width:1100px){
  .sb-secao{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .sb-foto{min-height:620px}
  .sb-raia{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px}
  .sb-chegada .sb-d{font-size:24px}
}
@media (max-width:760px){
  .sb-secao{grid-template-columns:minmax(0,1fr);padding-top:0}
  .sb-foto{margin:0 calc(-1 * var(--margem));min-height:0;aspect-ratio:4/5;max-height:560px;
    -webkit-mask-image:linear-gradient(#000 0 62%,transparent 98%);mask-image:linear-gradient(#000 0 62%,transparent 98%)}
  .sb-foto img{object-position:50% 12%}
  .sb-texto{margin-top:-40px;position:relative;padding-bottom:48px}
  .sb-kicker{font-size:12px;letter-spacing:.16em}
  .sb-titulo{font-size:clamp(44px,12.4vw,62px)}
  .sb-lead{font-size:20px}
  .sb-pista{--sb-w:58px;display:grid;grid-template-columns:var(--sb-w) minmax(0,1fr);column-gap:20px;margin-left:calc(-1 * var(--margem))}
  .sb-asfalto{margin:0;height:auto;
    background:repeating-linear-gradient(0deg, rgb(60 20 12 / .05) 0 2px, transparent 2px 7px), linear-gradient(90deg,#b8725a,#a8644d);
    box-shadow:inset 3px 0 0 rgb(255 250 243 / .92), inset -3px 0 0 rgb(255 250 243 / .92)}
  .sb-rastro{left:3px;right:3px;top:0;bottom:auto;width:auto;height:var(--sb-y,0px);background:linear-gradient(rgb(255 244 228 / 0), rgb(255 244 228 / .28));transition:height 1.1s var(--curva)}
  .sb-luz{left:50%;top:var(--sb-y,0px);transition:top 1.1s var(--curva), opacity .6s ease}
  .sb-raia{grid-template-columns:minmax(0,1fr);padding:10px 0 8px;row-gap:34px}
  .sb-marco::before{left:calc(-20px - var(--sb-w));top:0;width:var(--sb-w);height:3px}
  .sb-n{left:calc(-20px - var(--sb-w));top:13px;width:var(--sb-w);text-align:center;font-size:32px}
  .sb-chegada b{font-size:44px}
  .sb-chegada .sb-d{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  .js .sb-linha>span{transform:none}
  .sb-marco b,.sb-d{opacity:1}
  .sb-n{color:var(--linha)}
}