/* Página Café da manhã: composição própria, sobre a base (base.css), o movimento (movimento.css) e os componentes (componentes.css).
   Largura fluida (container de 1600 px, como o Airbnb), cada bloco ocupa a tela: ao abrir, só o topo aparece.
   Topo com título grande, três tiras de foto em paralaxe e faixa que corre; escada de valores; uma seção por cesta;
   faixa escura para empresas; faixa em tom de ouro; perguntas; chamada final. */

/* ---------- topo ---------- */
.topo{min-height:var(--sec-h);display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:clip}
.topo__grade{display:grid;gap:var(--s6);align-items:center;padding-block:var(--s5) var(--s6)}
@media(min-width:900px){.topo__grade{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:stretch;padding-block:var(--s6)}}
@media(prefers-reduced-motion:no-preference){
  /* ao rolar, o texto do topo recua e some devagar (--topo-p vai de 0 a 1 no movimento.js) */
  .topo__texto{opacity:calc(1 - var(--topo-p,0) * .8);translate:0 calc(var(--topo-p,0) * -40px)}
}
/* três tiras de foto, alturas diferentes, cada uma com sua paralaxe (sobem mais rápido que a página, nunca descem sobre a seção de baixo) */
.faixas{display:flex;gap:clamp(8px,1.1vw,18px);align-items:flex-end;height:clamp(260px,44svh,420px)}
@media(min-width:900px){.faixas{height:100%;min-height:380px}}
.tira{flex:1;min-width:0}
.tira:nth-child(1){height:100%}
.tira:nth-child(2){height:80%}
.tira:nth-child(3){height:91%}
.faixas .slot{height:100%;aspect-ratio:auto}
/* faixa que corre com o que vem nas cestas */
.topo__marquee{padding-block:var(--s4) var(--s5);border-top:1px solid var(--linha)}
.marq-item{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border:1px solid var(--linha);border-radius:var(--r-pilula);font-weight:500;color:var(--ink);white-space:nowrap;background:#fff}
.marq-item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ouro)}

/* escada de valores: cada linha diz para quando serve; a barra fina cresce na proporção do preço (só ritmo) */
.escada{display:grid;align-content:center;padding-block:var(--s7)}
@media(min-width:760px){.escada{min-height:var(--sec-h)}}
.escada__cab{display:grid;gap:var(--s4);max-width:46rem}
.escada h2{font-size:clamp(2.25rem,1rem + 3.4vw,4.5rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.escada__lista{list-style:none;margin:var(--s6) 0 0;padding:0}
.degrau{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr) 6rem;align-items:center;gap:var(--s5);padding:clamp(10px,1.8svh,22px) 0;border-top:1px solid var(--linha);color:var(--ink);text-decoration:none}
.escada__lista li:last-child .degrau{border-bottom:1px solid var(--linha)}
.degrau__texto{display:grid;gap:4px}
.degrau__nome{font:500 clamp(1.125rem,.9rem + .7vw,1.5rem)/1.2 var(--serif)}
.degrau__momento{font-size:15px;line-height:1.45;color:var(--suave)}
.degrau__barra{display:block;height:4px;border-radius:var(--r-pilula);background:var(--fundo-suave);overflow:hidden}
.degrau__barra i{display:block;height:100%;width:var(--w);background:var(--ouro);border-radius:inherit}
@media(prefers-reduced-motion:no-preference){
  html.js .degrau__barra i{transform:scaleX(0);transform-origin:left;transition:transform 1200ms var(--mv-ease) calc(var(--i,0) * 90ms + 250ms)}
  html.js .degrau.mv-in .degrau__barra i{transform:none}
}
.degrau__preco{font:600 clamp(1.125rem,.9rem + .5vw,1.375rem)/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right}
@media(hover:hover){.degrau:hover .degrau__nome{text-decoration:underline;text-decoration-color:var(--ouro);text-decoration-thickness:2px;text-underline-offset:5px}}
@media(max-width:599px){
  .degrau{grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s4);padding:var(--s3) 0}
  .degrau__barra{grid-column:1 / -1;grid-row:2}
}

/* ---------- depoimentos: nota do Google e falas reais de clientes ---------- */
.prova{display:grid;align-content:center;padding-block:var(--s8);border-top:1px solid var(--linha)}
@media(min-width:760px){.prova{min-height:var(--sec-h)}}
.prova__grade{display:grid;gap:var(--s7)}
.prova__cab{display:grid;gap:var(--s5);align-items:end}
@media(min-width:760px){.prova__cab{grid-template-columns:minmax(0,1fr) auto;gap:var(--s7)}}
.prova h2{font-size:clamp(2.25rem,1rem + 3.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.prova__google{display:grid;gap:var(--s3);justify-items:start}
@media(min-width:760px){.prova__google{justify-items:end;text-align:right}}
.prova__nota{margin:0;display:flex;align-items:baseline;gap:var(--s3);color:var(--suave)}
.prova__num{font:500 clamp(3rem,2rem + 3vw,5rem)/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.prova__quotes{display:grid;gap:var(--s7);padding-top:var(--s7);border-top:1px solid var(--linha)}
@media(min-width:900px){.prova__quotes{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:start}}
.prova figure{margin:0}
.prova blockquote{margin:0}
.prova blockquote p{margin:0;font:500 clamp(1.25rem,1rem + .9vw,1.75rem)/1.35 var(--serif);text-wrap:pretty}
.prova blockquote p::before{content:"\201C"}
.prova blockquote p::after{content:"\201D"}
.prova__destaque blockquote p{font-size:clamp(1.5rem,1rem + 1.5vw,2.5rem);line-height:1.25;letter-spacing:-.01em}
.prova figcaption{margin-top:var(--s4);font-size:14px;color:var(--suave)}
.prova__outras{display:grid;gap:var(--s6)}
.prova__outras figure+figure{padding-top:var(--s6);border-top:1px solid var(--linha)}

/* ---------- empresas: a faixa escura da página (a única) ---------- */
.empresas{display:grid;align-content:center;padding-block:var(--s8)}
@media(min-width:760px){.empresas{min-height:var(--sec-h)}}
.empresas__in{display:grid;gap:var(--s6);align-items:end}
@media(min-width:900px){.empresas__in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,120px)}}
.empresas h2{font-size:clamp(2.5rem,.9rem + 4.6vw,6rem);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.empresas__corpo p{margin:0;font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.55;color:#e8dccf;max-width:52ch}
.empresas__acoes{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center;margin-top:var(--s6)}
.faixa .btn--pri{color:var(--choc)}
.faixa .link-seta{color:#fff}

/* ---------- texto próprio: faixa em tom de ouro (a única) ---------- */
.fecho{display:grid;align-content:center;padding-block:var(--s8)}
@media(min-width:760px){.fecho{min-height:var(--sec-h)}}
.fecho__grade{display:grid;gap:var(--s6);align-items:center}
@media(min-width:900px){.fecho__grade{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,120px)}}
.fecho__texto h2{margin-bottom:var(--s5);font-size:clamp(2.25rem,1rem + 3.2vw,4.5rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.fecho__texto p{margin:0 0 var(--s4);max-width:60ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6}

/* ---------- chamada final: centrada, com selo, título enorme, apoio e um botão grande (referência: HTMLmentor) ---------- */
.chamada{display:grid;align-content:center;padding-block:var(--s8)}
@media(min-width:760px){.chamada{min-height:min(80svh,760px)}}
.chamada__miolo{display:grid;justify-items:center;gap:var(--s6);text-align:center}
.chamada__selo{margin:0;padding:8px 18px;border:1px solid var(--linha);border-radius:var(--r-pilula);font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.chamada h2{max-width:14ch;color:var(--ink);font:500 clamp(2.75rem,.9rem + 6.4vw,8rem)/.96 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.chamada__apoio{margin:0;max-width:44ch;font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.55;color:var(--suave)}