/* ===== ca · VEIO 08 · Cada passo — placa clara, quente de areia ===== */
.ca{--ca-areia:#f3ebe2;--ca-faixa:clamp(6rem, 3rem + 6vw, 10rem);
  --ca-sangra:max(var(--b-margem), calc((100vw - var(--wf-largura)) / 2));background:var(--ca-areia)}
.ca .wf-pedra{opacity:.32}
.ca .wf-pedra::after{background:radial-gradient(120% 90% at 70% 30% in oklab, rgba(243,235,226,.35), rgba(243,235,226,.8))}
.ca-luz{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 30% at 88% 2% in oklab, rgba(255,203,164,.6), rgba(255,203,164,0) 70%),
             radial-gradient(55% 25% at 10% 100% in oklab, rgba(240,190,160,.4), rgba(240,190,160,0) 70%)}

/* topo */
.ca-topo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem 4rem;align-items:end;margin-bottom:clamp(3rem, 2rem + 3vw, 5rem)}
.ca-h2{font-size:clamp(2.5rem, 1rem + 5vw, 5.4rem);line-height:1.02}
.ca-lead{margin:0;max-width:31rem}

/* a rota: esquerda | faixa da trilha | direita */
.ca-rota{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--ca-faixa) minmax(0,1fr);row-gap:clamp(4rem, 2rem + 5vw, 8rem);align-items:center}
.ca-rota>*:not(.ca-trilha){position:relative;z-index:1}
.ca-trilha{position:absolute;left:0;right:0;top:0;height:100%;z-index:0;pointer-events:none}
.ca-pes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ca-veio{position:absolute;left:0;right:0;top:0;height:0}
.ca-veio .wf-veio-base{opacity:.55}
.ca-pe{opacity:0;transform-box:fill-box;transform-origin:50% 60%;transition:opacity .8s var(--b-ease), transform .9s var(--b-ease)}
.ca-pe.is-in{opacity:1}
.ca-pe:not(.is-in){transform:scale(1.3) translateY(-4px)}
.ca-km-vivo{display:none}
.js .ca-km-vivo{display:block;position:absolute;left:0;top:0;padding:.3rem .55rem;font-family:var(--b-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:var(--wf-terracota);background:var(--ca-areia);border:1px solid rgba(138,76,62,.3);opacity:0;transition:opacity .5s, transform .6s var(--b-ease)}
.js .ca-km-vivo.is-on{opacity:1}

/* marcos sair / chegar */
.ca-marco{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center}
.ca-marco::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--wf-terracota);box-shadow:0 0 0 .45rem rgba(138,76,62,.12)}
.ca-marco span{font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:1.5rem;line-height:1;color:var(--wf-terracota)}
.ca-marco small{font-family:var(--b-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wf-tinta-suave)}
.ca-marco-sair{grid-row:1;align-self:start}
.ca-marco-chegar{grid-row:6}

/* 1 · as pernas e a fala */
.ca-pernas{grid-column:1;grid-row:2;aspect-ratio:4/5;margin-left:calc(-1 * var(--ca-sangra));width:calc(100% + var(--ca-sangra))}
.ca-pernas img{object-position:50% 72%;box-shadow:0 50px 80px -50px rgba(90,52,40,.6)}
.ca-pernas .wf-etiqueta{left:var(--ca-sangra)}
.ca-brilho{grid-column:3;grid-row:2;margin:0}
.ca-brilho-alto{margin:0;font-family:var(--b-serifa);font-weight:200;font-size:clamp(2rem, .9rem + 3vw, 3.7rem);line-height:1.08;letter-spacing:-.012em;color:var(--wf-tinta);text-wrap:balance}
.ca-brilho-alto em{font-style:italic;font-weight:300;color:var(--wf-terracota)}
.ca-brilho-baixo{margin:1.6rem 0 0;max-width:28rem;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:var(--t-lead);line-height:1.45;color:var(--wf-tinta-suave)}
.ca-brilho footer{margin-top:1.1rem;font-family:var(--b-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wf-tinta-suave)}
.ca-brilho footer::before{content:"— "}

/* 2 · 45 km e a chegada */
.ca-km{grid-column:1;grid-row:3;justify-self:end;text-align:right;display:grid;gap:1rem;max-width:26rem}
.ca-km-num{margin:0;display:flex;align-items:flex-end;justify-content:flex-end;gap:.9rem}
.ca-km-num span{font-family:var(--b-serifa);font-weight:200;font-size:clamp(5.5rem, 2rem + 11vw, 14rem);line-height:.8;letter-spacing:-.03em;color:var(--wf-terracota)}
.ca-km-num small{text-align:left;font-family:var(--b-mono);font-size:.72rem;line-height:1.6;letter-spacing:.18em;text-transform:uppercase;color:var(--wf-tinta-suave);padding-bottom:.4rem}
.ca-km-txt{margin:0;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:var(--t-lead);line-height:1.45;color:var(--wf-tinta)}
.ca-chegada{grid-column:3;grid-row:3;aspect-ratio:1080/590;margin-right:calc(-1 * var(--ca-sangra));width:calc(100% + var(--ca-sangra))}
.ca-chegada .wf-etiqueta{top:0;bottom:auto}
.ca-chegada img{object-position:50% 100%;box-shadow:0 50px 80px -50px rgba(90,52,40,.55)}

/* 3 · o mantra, um verso de cada lado da trilha */
.ca-verso{grid-column:1/-1;grid-row:4;margin:0;display:grid;grid-template-columns:subgrid}
.ca-verso p{grid-column:1/-1;margin:0;display:grid;grid-template-columns:subgrid;row-gap:.2rem;
  font-family:var(--b-serifa);font-weight:200;font-size:clamp(1.6rem, .9rem + 2.2vw, 3rem);line-height:1.15;color:var(--wf-tinta)}
.ca-verso span{display:block}
.ca-verso span:nth-child(odd){grid-column:1;text-align:right}
.ca-verso span:nth-child(even){grid-column:3}
.ca-verso span:nth-child(1){grid-row:1} .ca-verso span:nth-child(2){grid-row:2} .ca-verso span:nth-child(3){grid-row:3}
.ca-verso span:nth-child(4){grid-row:4} .ca-verso span:nth-child(5){grid-row:5} .ca-verso span:nth-child(6){grid-row:6}
.ca-verso em{font-style:italic;font-weight:300;color:var(--wf-terracota)}
.ca-verso footer{grid-column:3;margin-top:1.4rem;font-family:var(--b-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wf-tinta-suave)}

/* 4 · o que ela ensina */
.ca-sol{grid-column:1;grid-row:5;aspect-ratio:5/4;margin-left:calc(-1 * var(--ca-sangra));width:calc(100% + var(--ca-sangra))}
.ca-sol img{object-position:50% 60%}
.ca-sol img{box-shadow:0 50px 80px -50px rgba(90,52,40,.55)}
.ca-ensina{grid-column:3;grid-row:5;display:grid;gap:1.6rem;max-width:34rem}
.ca-transforma{margin:0;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:clamp(1.5rem, 1rem + 1.4vw, 2.2rem);line-height:1.2;color:var(--wf-terracota)}
.ca-ativa{margin:0}
.ca-assina{font-family:var(--b-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}

/* chegada */
.ca-fim{grid-column:1/-1;grid-row:7;display:flex;flex-direction:column;align-items:center;gap:1.6rem;text-align:center;margin-top:calc(-1 * clamp(2rem, 1rem + 3vw, 5rem))}
.ca-valeu{margin:0;font-family:var(--b-serifa);font-weight:200;font-size:clamp(2rem, 1rem + 3vw, 3.6rem);line-height:1.08;color:var(--wf-tinta)}
.ca-valeu em{font-style:italic;font-weight:300;color:var(--wf-terracota)}
.ca-globo{margin:0;max-width:26rem;font-size:var(--t-mini);line-height:1.5;color:var(--wf-tinta-suave)}

/* tablet e celular: a trilha corre pela esquerda */
@media (max-width:900px){
  .ca{--ca-faixa:2.6rem}
  .ca-topo{grid-template-columns:1fr}
  .ca-rota{grid-template-columns:var(--ca-faixa) minmax(0,1fr);row-gap:3.5rem;align-items:start}
  .ca-rota>*:not(.ca-trilha){grid-column:2!important;grid-row:auto!important}
  .ca-marco{flex-direction:row;gap:.7rem;margin-left:calc(-1 * var(--ca-faixa) + var(--ca-faixa)/2 - .35rem);text-align:left}
  .ca-marco::before{flex:none}
  .ca-pernas{margin-left:0;width:100%;max-width:32rem}
  .ca-pernas .wf-etiqueta{left:0}
  .ca-chegada{margin-right:calc(-1 * var(--b-margem));width:calc(100% + var(--b-margem))}
  .ca-km,.ca-sol{justify-self:start;text-align:left}
  .ca-km-num{justify-content:flex-start}
  .ca-verso{display:block}
  .ca-verso p{display:block}
  .ca-verso span:nth-child(n){text-align:left}
  .ca-verso span:nth-child(even){padding-left:1.4rem}
  .ca-sol{margin-left:0;width:100%}
  .ca-fim{align-items:flex-start;text-align:left;margin-top:-1.5rem}
  .js .ca-km-vivo{display:none}
}
@media (max-width:560px){
  .ca .wf-etiqueta{font-size:.72rem}
  .ca-verso footer,.ca-brilho footer,.ca-marco small{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){ .ca-pe{opacity:1;transform:none} }