/* ============================================================
   PIMENTA ROSA — HOME
   Sete blocos. Camadas de fundo por dobra + composições de página.
   ============================================================ */

/* ---------- Estrutura ---------- */
html,body{overflow-x:clip;max-width:100%}
.wrap{width:min(100% - 2.5rem, var(--container));margin-inline:auto}
.wrap--largo{width:min(100% - 2.5rem, 1320px)}

.pular{
  position:absolute;left:-9999px;top:0;z-index:99;background:var(--gr-acao);color:#fff;
  padding:11px 18px;border-radius:var(--rd-pill);font-size:var(--fs-02);font-weight:700;text-decoration:none;
}
.pular:focus{left:12px;top:12px}

.dobra{position:relative;isolation:isolate;overflow:hidden;padding:var(--sp-10) 0}
.dobra > .wrap{position:relative;z-index:2}
.dobra--creme{background:linear-gradient(180deg,var(--sf-creme),#FBF4E6)}

/* ---------- Camadas ---------- */
.camada{position:absolute;inset:0;z-index:0;pointer-events:none}
.camada--damasco{
  background-image:var(--pt-damasco);background-size:60px 90px;opacity:.09;
  -webkit-mask-image:radial-gradient(110% 78% at 78% 0%,#000,transparent 72%);
          mask-image:radial-gradient(110% 78% at 78% 0%,#000,transparent 72%);
}
.camada--damasco-claro{
  background-image:var(--pt-damasco-claro);background-size:60px 90px;opacity:.07;
  -webkit-mask-image:radial-gradient(100% 80% at 10% 100%,#000,transparent 70%);
          mask-image:radial-gradient(100% 80% at 10% 100%,#000,transparent 70%);
}
.camada--grade{
  background-image:
    linear-gradient(rgba(72,4,17,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,4,17,.04) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent 78%);
}
.camada--luz-rosa{background:radial-gradient(720px 460px at 82% 6%,rgba(252,147,185,.30),transparent 62%)}
.camada--luz-lima{background:radial-gradient(560px 380px at -6% 84%,rgba(218,223,10,.16),transparent 64%)}
.camada--luz-vinho{background:radial-gradient(620px 420px at 12% 0%,rgba(163,14,80,.10),transparent 60%)}

/* faixa grega ancorando a dobra */
.grega-borda{position:absolute;left:0;right:0;height:20px;background:var(--pt-grega) repeat-x center;opacity:.20;z-index:1;pointer-events:none}
.grega-borda--topo{top:0}
.grega-borda--base{bottom:0}
.grega-borda--claro{background-image:var(--pt-grega-claro);opacity:.28}

/* ---------- Cabeçalho de dobra ---------- */
.cab-dobra{max-width:64ch}
.cab-dobra--centro{margin-inline:auto;text-align:center}
.over-t{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-mono);
  font-variation-settings:var(--fv-mono);font-size:var(--fs-01);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac-primaria);font-weight:600;
}
.over-t::before{content:"";width:24px;height:1px;background:var(--pr-rose)}
.cab-dobra--centro .over-t::after{content:"";width:24px;height:1px;background:var(--pr-rose)}
.cab-dobra h2{font-size:clamp(1.9rem,3.6vw,var(--fs-08));margin:var(--sp-3) 0;letter-spacing:-.03em}
.cab-dobra p{font-size:var(--fs-05);color:var(--tx-corpo);max-width:58ch}
.cab-dobra--centro p{margin-inline:auto}

/* ---------- Barra utilitária + cabeçalho ---------- */
.topo{background:var(--gr-vinho);color:var(--tx-invertido);font-size:var(--fs-02)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:9px 0;flex-wrap:wrap}
.topo__in span{display:inline-flex;align-items:center;gap:8px}
.topo svg{width:15px;height:15px;color:var(--pr-rose-clara);flex:0 0 auto}
.topo a{color:inherit;text-decoration:none}
.topo a:hover{color:#fff}
.topo b{color:var(--pr-lima)}

.cab{position:sticky;top:0;z-index:60;background:rgba(253,250,244,.82);backdrop-filter:blur(16px) saturate(140%);transition:var(--mo-padrao)}
.cab.is-fixa{background:rgba(253,250,244,.94);box-shadow:var(--sh-1)}
/* fio em gradiente para o cabeçalho não se fundir com a hero clara */
.cab::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--pr-rose-clara) 12%,
    var(--ac-primaria) 38%,
    var(--pr-rosa) 50%,
    var(--ac-primaria) 62%,
    var(--pr-rose-clara) 88%,
    transparent 100%);
  opacity:.72;transition:opacity var(--mo-padrao);
}
.cab.is-fixa::after{opacity:1}
.cab__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-5);padding:12px 0}
.cab__logo{width:104px;transition:var(--mo-padrao)}
.cab.is-fixa .cab__logo{width:86px}
/* menu centralizado numa cápsula creme; o item ativo é uma pastilha branca com texto em gradiente */
.nav{
  justify-self:center;display:flex;gap:2px;padding:4px;border-radius:var(--rd-pill);
  background:linear-gradient(rgba(253,246,236,.82),rgba(253,246,236,.82)) padding-box,var(--gr-borda) border-box;
  border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(72,4,17,.04);
}
.nav a{
  position:relative;padding:8px 16px;border-radius:var(--rd-pill);font-size:var(--fs-02);font-weight:700;letter-spacing:.01em;
  color:var(--tx-corpo);text-decoration:none;transition:color var(--mo-rapido),background var(--mo-rapido),box-shadow var(--mo-rapido);
}
.nav a:hover{color:var(--ac-primaria);background:rgba(255,255,255,.7)}
.nav a.on{
  background:var(--sf-branco);box-shadow:0 1px 3px rgba(72,4,17,.10),0 0 0 1px rgba(210,143,168,.35);
  background-image:none;color:var(--ac-primaria);
}
.nav a.on::after{
  content:"";position:absolute;left:50%;bottom:4px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--gr-acao);
}
.cab__acoes{display:flex;align-items:center;gap:10px;justify-self:end}
.menu-btn{display:none;border:1px solid var(--br-media);background:var(--sf-branco);border-radius:var(--rd-sm);width:44px;height:44px;cursor:pointer;color:var(--tx-forte);place-items:center}
.menu-btn svg{width:22px;height:22px}

/* ============ 1 · HERO ============ */
.hero{
  padding:var(--sp-8) 0 calc(var(--sp-8) + 20px);
  background:linear-gradient(178deg,var(--sf-base) 0%,#FDF8EE 42%,var(--sf-creme) 100%);
  min-height:70vh;display:flex;align-items:center;
}
.camada--foto{background:url("../img/hero-temperos.jpg") right bottom/cover no-repeat}
.camada--veu{
  background:linear-gradient(96deg,
    var(--sf-base) 0%,
    rgba(253,250,244,.98) 28%,
    rgba(253,250,244,.86) 42%,
    rgba(253,250,244,.42) 58%,
    rgba(253,250,244,0) 74%);
}
.hero__in{width:min(100% - 2.5rem,1320px);position:relative;z-index:2}
.hero__texto{max-width:min(58%,660px)}
.hero h1{
  font-size:clamp(1.95rem,5.4vw,4rem);letter-spacing:-.035em;margin:var(--sp-4) 0;
  font-weight:600;line-height:1.05;
}
.hero h1 em{font-style:italic;font-weight:400;white-space:nowrap}
@media (max-width:360px){.hero h1 em{white-space:normal}}
.hero__lead{font-size:var(--fs-05);color:var(--tx-corpo);max-width:48ch}
.hero__acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--sp-6)}

/* ============ 2 · A EMPRESA ============ */
.sobre__in{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--sp-9);align-items:center}
.sobre__texto h2{font-size:clamp(1.9rem,3.6vw,var(--fs-08));margin:var(--sp-3) 0 var(--sp-5);letter-spacing:-.03em}
.sobre__texto p{font-size:var(--fs-04);color:var(--tx-corpo);max-width:56ch}
.sobre__texto p + p{margin-top:var(--sp-4)}
.sobre__abre{
  font-family:var(--ff-display);font-variation-settings:var(--fv-display);
  font-size:var(--fs-05);color:var(--tx-forte);line-height:1.45;
}
.sobre__acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--sp-6)}

/* a marca emoldurada, na outra metade */
.marca{
  position:relative;margin:0;display:grid;justify-items:center;gap:var(--sp-3);
  padding:var(--sp-9) var(--sp-7);border-radius:var(--rd-xl);
  background:linear-gradient(158deg,#FFFFFF 0%,#FFFBF3 52%,var(--sf-creme) 100%);
  border:1px solid var(--br-rosa);box-shadow:var(--sh-3);overflow:hidden;
}
.marca::before{
  content:"";position:absolute;inset:0;background-image:var(--pt-damasco);background-size:60px 90px;opacity:.12;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 50%,transparent 38%,#000 92%);
          mask-image:radial-gradient(78% 78% at 50% 50%,transparent 38%,#000 92%);
}
.marca > *{position:relative;z-index:1}
.marca .logo{width:min(78%,300px)}
.marca .divisor{margin:var(--sp-2) 0 0;width:70%}
.marca__slogan{
  font-family:var(--ff-display);font-variation-settings:var(--fv-display);font-style:italic;
  font-size:var(--fs-05);color:var(--tx-forte);text-align:center;line-height:1.3;
}
.marca__firma{display:grid;gap:2px;text-align:center;margin-top:var(--sp-3)}
.marca__firma b{font-family:var(--ff-mao);font-size:var(--fs-06);color:var(--ac-primaria);font-weight:700;line-height:1}
.marca__firma span{font-size:var(--fs-02);color:var(--tx-suave)}

/* faixa de fatos, fecha a dobra */
.fatos{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--sp-7);
  border:1px solid transparent;border-radius:var(--rd-lg);overflow:hidden;
  background:linear-gradient(var(--sf-branco),var(--sf-branco)) padding-box,var(--gr-borda) border-box;
  box-shadow:var(--sh-2);
}
.fato{display:flex;flex-direction:column;gap:4px;padding:var(--sp-6) var(--sp-5);text-align:center;align-items:center;justify-content:center}
.fato__ico{
  width:56px;height:56px;margin-bottom:10px;border-radius:var(--rd-pill);display:grid;place-items:center;color:var(--ac-primaria);
  background:linear-gradient(var(--sf-branco),var(--sf-branco)) padding-box,var(--gr-borda) border-box;border:1px solid transparent;
  box-shadow:0 6px 16px rgba(163,14,80,.08);
}
.fato__ico svg{width:30px;height:30px}
.fato:hover .fato__ico{background:var(--gr-acao);color:#fff;transition:var(--mo-padrao)}
.fato + .fato{border-left:1px solid var(--br-rosa)}
.fato__n{
  font-family:var(--ff-display);font-variation-settings:var(--fv-display);font-size:var(--fs-06);
  font-weight:600;letter-spacing:-.02em;line-height:1.1;
  background-image:linear-gradient(100deg,#7E0A3E 0%,#B71862 25%,#F06AA8 45%,#B71862 65%,#7E0A3E 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:flui-gradiente 3.6s ease-in-out infinite;
}
.fato__d{font-size:var(--fs-03);color:var(--tx-corpo)}
.fato--vago{background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(163,14,80,.045) 7px,rgba(163,14,80,.045) 14px)}
.fato--vago .fato__n{-webkit-text-fill-color:var(--tx-suave);color:var(--tx-suave);background-image:none}
.fato--vago .fato__d{color:var(--tx-suave)}
.fato__q{font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-01);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-primaria);margin-top:6px}
.fatos__fecho{
  margin:var(--sp-6) auto 0;max-width:64ch;text-align:center;font-size:var(--fs-05);
  font-family:var(--ff-display);font-variation-settings:var(--fv-display);color:var(--tx-forte);line-height:1.4;
}

/* ============ 4 · COMO FUNCIONA ============ */
.fluxo{background:var(--gr-vinho);color:var(--tx-invertido);padding:calc(var(--sp-10) + 20px) 0}
/* foto de pimentas como fundo: véu vinho por cima, com uma "janela" arredondada à direita
   onde a foto aparece mais (o gradiente radial abre um buraco no véu) */
.fluxo .camada--foto-pimentas{
  background:url(../img/fundo-pimentas.jpg) center 40%/cover no-repeat;opacity:.9;
  filter:saturate(.95);
}
.fluxo .camada--veu-vinho{
  background:
    radial-gradient(520px 420px at 78% 42%,rgba(72,4,17,.12) 0%,rgba(72,4,17,.45) 46%,rgba(72,4,17,.86) 74%,rgba(72,4,17,.9) 100%),
    linear-gradient(150deg,rgba(99,16,38,.55) 0%,rgba(72,4,17,.35) 50%,rgba(51,2,12,.75) 100%);
}
.fluxo .camada--veu-vinho::after{
  /* escurece a base, onde ficam os cards das paradas, para o texto continuar legível */
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(51,2,12,.75) 100%);
}
@media (max-width:680px){
  /* no mobile a dobra é alta (cards empilhados): a foto fica só no topo, com a janela ao lado do título */
  .fluxo .camada--foto-pimentas{background:url(../img/fundo-pimentas-sm.jpg) 64% 0/auto 620px no-repeat;opacity:.95;filter:none}
  .fluxo .camada--veu-vinho{background:
    radial-gradient(300px 260px at 74% 210px,rgba(72,4,17,.08) 0%,rgba(72,4,17,.4) 50%,rgba(72,4,17,.85) 80%),
    linear-gradient(100deg,rgba(72,4,17,.55) 0%,rgba(72,4,17,.35) 45%,rgba(72,4,17,.1) 100%),
    linear-gradient(180deg,rgba(72,4,17,.45) 0%,rgba(72,4,17,.6) 320px,rgba(51,2,12,.96) 620px,#33020C 100%)}
  .fluxo .camada--veu-vinho::after{background:none}
}
.fluxo .cab-dobra h2{color:#fff}
.fluxo .cab-dobra p{color:rgba(253,246,236,.78)}
.fluxo .over-t{color:var(--pr-rose-clara)}
.fluxo .over-t::before,.fluxo .over-t::after{background:var(--pr-rose)}
/* ---- estrada: o caminhão vai de parada em parada ---- */
.fluxo__apoio{
  font-size:var(--fs-05);color:rgba(253,246,236,.82);max-width:56ch;margin-top:var(--sp-3);
}
.estrada{position:relative;margin-top:var(--sp-9)}
.estrada__pista{position:relative;height:84px;margin:0 0 var(--sp-3)}
.estrada__linha{
  position:absolute;left:0;right:0;bottom:3px;height:0;
  border-top:2px dashed rgba(233,195,210,.42);
}
.caminhao{
  --p1:0px; --p2:50%; --p3:100%;   /* o JS mede o centro de cada parada */
  position:absolute;left:0;bottom:0;width:132px;
  animation:anda 5.4s steps(1) both;
}
.caminhao__tremor{animation:tremor .3s steps(2) infinite}
.caminhao svg{display:block;filter:drop-shadow(0 8px 14px rgba(46,2,9,.45))}
.caminhao__roda{animation:roda .55s steps(6) infinite;transform-box:view-box}

@keyframes anda{
  0%,10%{transform:translateX(var(--p1))}
  14%{transform:translateX(calc(var(--p1) + (var(--p2) - var(--p1)) * 0.14))}
  18%{transform:translateX(calc(var(--p1) + (var(--p2) - var(--p1)) * 0.28))}
  22%{transform:translateX(calc(var(--p1) + (var(--p2) - var(--p1)) * 0.42))}
  26%{transform:translateX(calc(var(--p1) + (var(--p2) - var(--p1)) * 0.57))}
  30%{transform:translateX(calc(var(--p1) + (var(--p2) - var(--p1)) * 0.71))}
  34%{transform:translateX(calc(var(--p1) + (var(--p2) - var(--p1)) * 0.86))}
  38%,52%{transform:translateX(var(--p2))}
  56%{transform:translateX(calc(var(--p2) + (var(--p3) - var(--p2)) * 0.14))}
  60%{transform:translateX(calc(var(--p2) + (var(--p3) - var(--p2)) * 0.28))}
  64%{transform:translateX(calc(var(--p2) + (var(--p3) - var(--p2)) * 0.42))}
  68%{transform:translateX(calc(var(--p2) + (var(--p3) - var(--p2)) * 0.57))}
  72%{transform:translateX(calc(var(--p2) + (var(--p3) - var(--p2)) * 0.71))}
  76%{transform:translateX(calc(var(--p2) + (var(--p3) - var(--p2)) * 0.86))}
  80%,100%{transform:translateX(var(--p3))}
}
@keyframes roda{to{transform:rotate(360deg)}}
@keyframes corre-chao{to{background-position:-26px 0}}
@keyframes tremor{
  0%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(.7px,-.7px) rotate(.5deg)}
  100%{transform:translate(-.5px,.5px) rotate(-.4deg)}
}

/* a animação só roda quando a dobra aparece, e roda uma vez */
.estrada .caminhao,.estrada .caminhao__tremor,.estrada .caminhao__roda,.estrada .parada{animation-play-state:paused}
.estrada.is-visible .caminhao,.estrada.is-visible .caminhao__tremor,
.estrada.is-visible .caminhao__roda,.estrada.is-visible .parada{animation-play-state:running}

.paradas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.parada{
  position:relative;padding:var(--sp-5) var(--sp-5) var(--sp-6);border-radius:var(--rd-lg);
  background:rgba(253,246,236,.06);border:1px solid rgba(233,195,210,.22);
  animation:acende 5.4s steps(1) both;
}
.parada--1{animation-delay:0s}
.parada--2{animation-delay:2.05s}
.parada--3{animation-delay:4.3s}
@keyframes acende{
  0%{opacity:.34;transform:translateY(4px)}
  6%,100%{opacity:1;transform:none}
}
.parada__ico{
  position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:var(--rd-pill);
  background:var(--gr-acao);color:#fff;box-shadow:var(--sh-acao);margin-bottom:var(--sp-4);
}
.parada__ico svg{width:26px;height:26px}
.parada__n{
  position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:var(--rd-pill);
  display:grid;place-items:center;background:var(--pr-lima);color:var(--tx-forte);
  font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-01);font-weight:700;
}
.parada h3{color:#fff;font-size:var(--fs-06);margin-bottom:8px;letter-spacing:-.01em}
.parada p{font-size:var(--fs-03);color:rgba(253,246,236,.82);line-height:1.6}

.fluxo__pe{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-7)}
/* no desktop a frase à mão ganha corpo, junto com a pimenta */
@media (min-width:861px){
  .fluxo__pe .nota{font-size:clamp(1.5rem,2.1vw,1.9rem);gap:14px;color:#F6DEE8}
  .fluxo__pe .nota svg{width:34px;height:34px;margin-top:0;color:var(--pr-rose)}
}

/* ============ 5 · CATEGORIAS ============ */
.cats-dobra{background:linear-gradient(180deg,var(--sf-branco),var(--sf-base))}
.cats-topo{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
  padding-bottom:var(--sp-6);border-bottom:1px solid var(--br-rosa);
}
.cats-topo .cab-dobra h2{margin-bottom:0}
.cats-topo__lado{display:flex;align-items:center;gap:var(--sp-4)}
.carrossel__setas{display:flex;gap:8px}
.carrossel__setas .carrossel__seta{position:static;width:42px;height:42px}
.carrossel--solto{padding:0;margin-top:var(--sp-6)}
.carrossel--solto .carrossel__seta{position:static;top:auto;width:42px;height:42px}

.cats{gap:var(--sp-4)}
.cat-card{
  flex:0 0 calc((100% - var(--sp-4) * 3) / 4);   /* quatro por tela */
  scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;
  text-decoration:none;color:inherit;border-radius:var(--rd-lg);
  border:1px solid var(--br-suave);background:var(--sf-branco);
  transition:transform var(--mo-padrao),box-shadow var(--mo-padrao),border-color var(--mo-padrao);
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--br-rose)}
.cat-card__foto{
  position:relative;aspect-ratio:1;overflow:hidden;display:block;
  background:
    radial-gradient(circle at 50% 30%,#FFFFFF,transparent 68%),
    linear-gradient(155deg,var(--sf-rosa-veu) 0%,var(--sf-creme) 62%,var(--sf-creme-2) 100%);
}
.cat-card__foto::after{
  content:"";position:absolute;inset:0;background-image:var(--pt-damasco);background-size:60px 90px;opacity:.10;
  -webkit-mask-image:radial-gradient(64% 64% at 50% 50%,transparent 34%,#000 92%);
          mask-image:radial-gradient(64% 64% at 50% 50%,transparent 34%,#000 92%);
}
.cat-card__foto img{
  position:absolute;inset:var(--sp-4);margin:auto;width:auto;height:auto;
  max-width:calc(100% - var(--sp-6));max-height:calc(100% - var(--sp-6));object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(72,4,17,.16));transition:transform var(--mo-padrao);
}
.cat-card:hover .cat-card__foto img{transform:scale(1.06)}
.cat-card__marca{
  position:absolute;left:12px;top:12px;z-index:2;
  font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);
  font-size:var(--fs-01);letter-spacing:.08em;padding:4px 10px;border-radius:var(--rd-pill);
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  border:1px solid var(--br-rosa);color:var(--pr-magenta);
}
.cat-card__pe{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:var(--sp-4);border-top:1px solid var(--br-rosa);
}
.cat-card__nome{
  font-family:var(--ff-display);font-variation-settings:var(--fv-display);
  font-size:var(--fs-04);font-weight:600;color:var(--tx-forte);line-height:1.2;letter-spacing:-.01em;
}
.cat-card__pe svg{width:18px;height:18px;flex:0 0 auto;color:var(--pr-rose);transition:var(--mo-rapido)}
.cat-card:hover .cat-card__pe svg{color:var(--ac-primaria);transform:translateX(3px)}

/* ============ 6 · PROVA ============ */
.vazio{max-width:760px;margin:0 auto}
.vazio__depo{
  position:relative;margin:0;padding:var(--sp-7);border-radius:var(--rd-lg);
  border:1.5px dashed var(--br-rose);background:rgba(255,255,255,.6);
}
.vazio__aspas{
  position:absolute;top:-4px;right:22px;font-family:var(--ff-display);font-size:5rem;line-height:1;
  color:var(--pr-rose-clara);opacity:.7;
}
.vazio__depo blockquote{
  margin:0;font-family:var(--ff-display);font-variation-settings:var(--fv-display);font-style:italic;
  font-size:var(--fs-05);color:var(--tx-suave);line-height:1.42;max-width:52ch;
}
.vazio__depo figcaption{margin-top:var(--sp-4);font-size:var(--fs-02);color:var(--tx-suave);letter-spacing:.04em}
.vazio__nota{
  margin-top:var(--sp-3);font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);
  font-size:var(--fs-01);letter-spacing:.06em;color:var(--ac-primaria);text-align:center;
}
.logos{max-width:760px;margin:var(--sp-8) auto 0;text-align:center}
.logos__rot{font-size:var(--fs-01);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-suave);font-weight:700}
.logos__linha{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);margin-top:var(--sp-4);align-items:center}
.logos__logo{width:100%;height:auto;filter:grayscale(1);opacity:.6;transition:var(--mo-padrao)}
.logos__logo:hover{filter:none;opacity:1}
.logos__vaga{
  height:72px;display:grid;place-items:center;border:1px dashed var(--br-media);border-radius:var(--rd-md);
  font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-01);color:var(--tx-suave);
  letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.5);
}

/* aviso de conteúdo de exemplo — apagar junto com os depoimentos falsos */
.aviso-exemplo{
  display:block;text-align:center;margin-bottom:var(--sp-5);
  font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);
  font-size:var(--fs-01);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-primaria);
}
.aviso-exemplo::before{content:"⚠ ";opacity:.7}

/* carrossel manual: sem autoplay, como manda o design system */
.carrossel{position:relative;padding:0 var(--sp-7)}
.carrossel__pista{
  display:flex;gap:var(--sp-4);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:var(--sp-2) 4px var(--sp-5);margin:0 -4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carrossel__pista::-webkit-scrollbar{display:none}
.carrossel__pista:focus-visible{outline:3px solid var(--pr-lima);outline-offset:4px;border-radius:var(--rd-lg)}
.carrossel .depo{
  scroll-snap-align:start;margin:0;display:flex;flex-direction:column;
  flex:0 0 calc((100% - var(--sp-4) * 2) / 3);   /* três por tela, sem encolher */
}
.carrossel .depo blockquote{flex:1}
/* o damasco do componente entra como camada, senão apaga o texto */
.carrossel .depo{background:linear-gradient(158deg,#FFFFFF 0%,#FFFCF6 55%,var(--sf-creme) 100%) padding-box,var(--gr-borda) border-box}
.carrossel .depo::after{
  content:"";position:absolute;inset:0;background-image:var(--pt-damasco);background-size:60px 90px;
  opacity:.10;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(80% 100% at 100% 0%,#000,transparent 66%);
          mask-image:radial-gradient(80% 100% at 100% 0%,#000,transparent 66%);
}
.carrossel .depo blockquote,.carrossel .depo footer{position:relative;z-index:1}
.carrossel .depo__quem b{font-size:var(--fs-05);color:var(--tx-forte);line-height:1.15}
.carrossel .depo__quem span{display:block;line-height:1.45}
.carrossel .depo__cidade{color:var(--pr-rose);font-weight:700;letter-spacing:.02em}
.carrossel .depo footer{align-items:flex-start}
.carrossel .depo__av{margin-top:4px}

.carrossel__seta{
  position:absolute;top:calc(50% - 26px);z-index:2;width:44px;height:44px;border-radius:var(--rd-pill);
  display:grid;place-items:center;cursor:pointer;transition:var(--mo-rapido);
  border:1px solid var(--br-rose);background:var(--sf-branco);color:var(--ac-primaria);box-shadow:var(--sh-2);
}
.carrossel__seta svg{width:20px;height:20px}
.carrossel__seta:hover{background:var(--gr-acao);color:#fff;border-color:transparent}
.carrossel__seta:disabled{opacity:.3;pointer-events:none}
.carrossel__seta--ant{left:0}
.carrossel__seta--prox{right:0}

.carrossel__pontos{display:flex;justify-content:center;gap:8px;margin-top:var(--sp-2)}
.carrossel__ponto{
  width:9px;height:9px;padding:0;border:0;border-radius:var(--rd-pill);cursor:pointer;
  background:var(--br-rose);transition:var(--mo-rapido);
}
.carrossel__ponto:hover{background:var(--pr-rose)}
.carrossel__ponto[aria-selected="true"]{width:26px;background:var(--gr-acao)}

/* ============ 7 · CONTATO ============ */
.contato{background:linear-gradient(170deg,var(--sf-creme) 0%,var(--sf-base) 46%,#FFFBF3 100%)}
.contato__in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}
.contato__ap{display:flex;flex-direction:column}
.contato__ap h2{font-size:clamp(1.9rem,3.4vw,var(--fs-08));letter-spacing:-.03em;margin:var(--sp-3) 0 var(--sp-4)}
.contato__ap p{font-size:var(--fs-05);max-width:46ch;color:var(--tx-corpo)}
.vias{display:grid;gap:10px;margin-top:var(--sp-6)}
.via{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--rd-md);background:rgba(255,255,255,.7);border:1px solid var(--br-suave);text-decoration:none;color:inherit;transition:var(--mo-rapido);backdrop-filter:blur(6px)}
a.via:hover{background:#fff;border-color:var(--br-rose);transform:translateX(3px)}
.via svg{width:22px;height:22px;color:var(--ac-primaria);flex:0 0 auto}
.via b{display:block;font-size:var(--fs-03);color:var(--tx-forte)}
.via span span{font-size:var(--fs-02);color:var(--tx-suave)}
.via--vaga{border-style:dashed;background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(163,14,80,.04) 7px,rgba(163,14,80,.04) 14px)}
.via--vaga b{color:var(--tx-suave)}
.via--vaga span span{color:var(--ac-primaria);font-family:var(--ff-mono);font-variation-settings:var(--fv-mono);font-size:var(--fs-01);letter-spacing:.1em;text-transform:uppercase}

.form{
  background:var(--sf-branco);border-radius:var(--rd-xl);padding:var(--sp-7);box-shadow:var(--sh-3);
  border:1px solid var(--br-suave);
}
.form h3{font-size:var(--fs-06);margin-bottom:6px}
.form__lead{font-size:var(--fs-03);color:var(--tx-suave);margin-bottom:var(--sp-5)}
.form__dupla{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
select.campo__ctrl{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ac-primaria) 50%),linear-gradient(135deg,var(--ac-primaria) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.form__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-2)}
.form__acoes .btn{flex:1 1 200px;white-space:nowrap}
.form__ajuda{font-size:var(--fs-01);color:var(--tx-suave);text-align:center;margin-top:var(--sp-3)}

/* ---------- Rodapé ---------- */
.rodape{position:relative;background:linear-gradient(180deg,#3F0310,#26010A);color:rgba(253,246,236,.72);padding:calc(var(--sp-9) + 20px) 0 var(--sp-6);font-size:var(--fs-02)}
.rodape::before{
  content:"";position:absolute;inset:0;background-image:var(--pt-damasco-claro);background-size:60px 90px;opacity:.06;
  -webkit-mask-image:radial-gradient(80% 90% at 88% 0%,#000,transparent 70%);
          mask-image:radial-gradient(80% 90% at 88% 0%,#000,transparent 70%);
}
.rodape > .wrap{position:relative;z-index:1}
.rodape__grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.2fr;gap:var(--sp-7)}
.rodape__placa{display:inline-block}
.rodape .logo{width:170px;aspect-ratio:900/669;background-image:url(../img/logo-sf.png);filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.rodape__marca p{margin-top:var(--sp-4);max-width:36ch;line-height:1.7}
.rodape h5{color:var(--pr-rose);font-family:var(--ff-corpo);font-size:var(--fs-01);letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}
.rodape a{display:block;color:rgba(253,246,236,.72);text-decoration:none;padding:3px 0;transition:var(--mo-rapido)}
.rodape a:hover{color:#fff}
.rodape__fecho{display:grid;place-items:center;gap:var(--sp-3);margin-top:var(--sp-8);text-align:center}
.rodape__fecho .orn{height:30px;width:auto;color:var(--pr-rose)}
.rodape__fecho p{font-family:var(--ff-display);font-variation-settings:var(--fv-display);font-style:italic;font-size:var(--fs-06)}
.rodape__petri{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;opacity:.85;transition:var(--mo-rapido)}
.rodape__petri img{width:22px;height:22px;border-radius:6px}
.rodape__petri b{font-weight:700;color:#fff}
.rodape__petri:hover{opacity:1;color:var(--pr-rose-clara)}
.rodape__bar{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid rgba(253,246,236,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-01)}

/* WhatsApp flutuante */
.zap-fixo{
  position:fixed;right:20px;bottom:20px;z-index:70;width:56px;height:56px;border-radius:var(--rd-pill);
  display:grid;place-items:center;background:var(--gr-zap);color:#fff;box-shadow:var(--sh-3);transition:var(--mo-padrao);
}
.zap-fixo:hover{transform:translateY(-3px) scale(1.04);box-shadow:var(--sh-4)}
.zap-fixo svg{width:28px;height:28px}

/* (gradiente em movimento dos botões: ver base.css) */
}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity var(--mo-lento),transform var(--mo-lento)}

/* ---- entra e sai no scroll (classes do cliente): esquerda/direita/topo/base/escala ---- */
.scroll-txt{letter-spacing:-1.2em!important;filter:blur(5px);opacity:0;transition:1.8s cubic-bezier(.25,.46,.45,.94)!important}
.ativo7.scroll-txt{letter-spacing:0!important;filter:blur(0);opacity:1;transition:1.2s cubic-bezier(.25,.46,.45,.94)!important;transition-delay:0s!important}
.perspectivax{transition:5s!important;transform:perspective(100rem) translate3d(0,0,-5rem) rotateX(-90deg) scale(1,1)}
.ativo7.perspectivax{transition:5s!important;transform:perspective(100rem) translate3d(0,0,-5rem) rotateX(0) scale(1,1)}
.scroll-left{opacity:0;transition:1s!important;filter:blur(10px);transform:translate(-30px,0)}
.scroll-left2{opacity:0;transition:.3s!important;transform:translate(-30px,0)}
.scroll-right{opacity:0;transition:1s!important;filter:blur(10px);transform:translate(30px,0)}
.scroll-right2{opacity:0;transition:.3s!important;transform:translate(30px,0)}
.scroll-bottom{opacity:0;transition:1s!important;filter:blur(10px);transform:translate(0,-30px)}
.scroll-bottom2{opacity:0;transition:.3s!important;transform:translate(0,-30px)}
.scroll-top{opacity:0;transition:1s!important;filter:blur(5px);transform:translate(0,30px)}
.scroll-top2{opacity:0;transition:.3s!important;transform:translate(0,30px)}
.scroll-escala{opacity:0;transition:1s!important;filter:blur(10px);transform:scale(2)}
.ativo7{opacity:1;transition:1s;filter:blur(0);transform:translate(0,0) scale(1);transition-delay:0s!important}
/* a hero já está na tela ao abrir: entra sem esperar o scroll */
.hero__texto.ativo7{transition-delay:.1s!important}

/* ---------- Responsivo ---------- */
@media (max-width:1080px){
  .hero__texto{max-width:64%}
  .carrossel .depo{flex-basis:calc((100% - var(--sp-4)) / 2)}
  .cat-card{flex-basis:calc((100% - var(--sp-4) * 2) / 3)}
  .contato__in{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .rodape__grid{grid-template-columns:1fr 1fr}
  .fatos{grid-template-columns:repeat(3,1fr)}
  .fato:nth-child(3){border-left:0}
  .fato:nth-child(n+3){border-top:1px solid var(--br-rosa)}
}
@media (max-width:860px){
  /* a foto cobre a dobra inteira e já aparece na primeira tela; o véu segura só o topo, atrás do texto */
  .hero{min-height:min(88svh,760px);padding-bottom:min(58vw,360px);display:flex;align-items:flex-start}
  .hero__texto{max-width:none}
  .camada--foto{background:url("../img/hero-temperos-sm.jpg") 80% 55%/cover no-repeat}
  /* a foto se dissolve no creme da dobra seguinte, em vez de cortar na grega */
  .hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:170px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(248,241,225,0) 0%,rgba(248,241,225,.55) 45%,rgba(248,241,225,.92) 78%,#F8F1E1 100%);
  }
  .hero .grega-borda--base{z-index:2;opacity:.14}
  .camada--veu{background:linear-gradient(165deg,
    rgba(253,250,244,.97) 0%,
    rgba(253,250,244,.9) 40%,
    rgba(253,250,244,.55) 58%,
    rgba(253,250,244,.1) 76%,
    rgba(253,250,244,0) 100%)}
  .nav{display:none}
  .nav.is-aberta{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    background:var(--sf-branco);border-bottom:1px solid var(--br-suave);padding:var(--sp-3);gap:2px;box-shadow:var(--sh-3);
  }
  .nav.is-aberta a{padding:12px 14px;font-size:var(--fs-03)}
  .nav.is-aberta a.on::after{display:none}
  .menu-btn{display:grid}
  .cab__in{display:flex;position:relative;justify-content:space-between}
  .cab__acoes{margin-left:auto}
  .nav.is-aberta{border:0;border-radius:0;background:var(--sf-branco);box-shadow:var(--sh-3);padding:var(--sp-3)}
  .nav.is-aberta a.on{box-shadow:none;background:var(--sf-rosa-veu)}
  .cab__acoes .btn{display:none}
  .sobre__in{grid-template-columns:1fr;gap:var(--sp-7)}
  .marca{padding:var(--sp-7) var(--sp-5)}
  .carrossel{padding:0}
  .carrossel__pista + .carrossel__pontos ~ .carrossel__seta,
  .carrossel:not(.carrossel--solto) .carrossel__seta{display:none}
  .cat-card{flex-basis:calc((100% - var(--sp-4)) / 2)}
  .cats-topo{align-items:flex-start;flex-direction:column;gap:var(--sp-4)}
  .carrossel__pista{scroll-padding-inline:4px}
  .carrossel .depo{flex-basis:86%}
  .cat-card{flex-basis:72%}
  .cats-topo__lado{width:100%;justify-content:space-between}
  .paradas{grid-template-columns:1fr}

  /* sem espaço para o caminhão atravessar: ele fica parado no alto,
     com as rodas girando e a estrada correndo por baixo, enquanto
     as paradas acendem uma a uma */
  .estrada__pista{height:92px;display:grid;place-items:center}
  .caminhao{position:static;animation:none}
  .estrada__linha{
    bottom:6px;border-top:0;height:2px;
    background-image:repeating-linear-gradient(90deg,
      rgba(233,195,210,.5) 0 12px, transparent 12px 26px);
    background-size:26px 2px;
    animation:corre-chao .5s linear infinite;
  }
  .parada--1{animation-delay:.2s}
  .parada--2{animation-delay:1.5s}
  .parada--3{animation-delay:2.8s}
}
@media (max-width:680px){
  .dobra{padding:var(--sp-9) 0}
  .hero{padding-bottom:min(62vw,380px)}
  .cab-dobra h2,.contato__ap h2{font-size:clamp(1.6rem,7vw,2rem)}
  .cats,.form__dupla{grid-template-columns:1fr}
  .logos__linha{grid-template-columns:repeat(2,1fr);gap:var(--sp-4) var(--sp-5)}
  .fatos{grid-template-columns:1fr}
  .fato + .fato{border-left:0;border-top:1px solid var(--br-rosa)}
  .rodape__grid{grid-template-columns:1fr}
  .form{padding:var(--sp-5)}
  .form__acoes .btn{flex:1 1 100%}
  .topo__in{justify-content:center;text-align:center;font-size:var(--fs-01);gap:var(--sp-2)}
  .topo__in span{flex-wrap:wrap;justify-content:center}
  .marca .logo{width:min(86%,230px)}
}

/* ---------- No celular tudo se alinha ao centro ---------- */
@media (max-width:680px){
  .hero__texto,.cab-dobra,.sobre__texto,.contato__ap,.parada,.fluxo__apoio{text-align:center}
  .hero__texto .over-t,.sobre__texto .over-t,.contato__ap .over-t,.cab-dobra .over-t{justify-content:center}
  .over-t::after{content:"";width:24px;height:1px;background:var(--pr-rose)}
  .hero__lead,.cab-dobra p,.sobre__texto p,.contato__ap p,.fluxo__apoio,.fatos__fecho{margin-inline:auto}
  .hero__acoes,.sobre__acoes,.fluxo__pe,.cats-topo__lado,.form__acoes{justify-content:center}
  .fluxo__pe{flex-direction:column;align-items:center}

  .parada__ico{margin-inline:auto}
  .parada__n{right:calc(50% - 33px)}

  .cats-topo{align-items:center;text-align:center}
  .cat-card__pe{justify-content:center;gap:8px}

  .carrossel .depo{text-align:center}
  .carrossel .depo blockquote{margin-inline:auto}
  .carrossel .depo footer{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .carrossel .depo__av{margin-top:0}

  .via{justify-content:center;text-align:left}
  .form h3,.form__lead{text-align:center}

  .rodape__grid{text-align:center}
  .rodape__marca p{margin-inline:auto}
  .rodape__marca{display:grid;justify-items:center}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .scroll-left,.scroll-left2,.scroll-right,.scroll-right2,.scroll-top,.scroll-top2,.scroll-bottom,.scroll-bottom2,.scroll-escala,.scroll-txt,.perspectivax{opacity:1;filter:none;transform:none;transition:none!important}
  .hero__acoes .btn,.fluxo__pe .btn,.cats__link .btn,.form__acoes .btn,.cab__acoes .btn{animation:none}
  .carrossel__pista{scroll-behavior:auto}
  .caminhao,.caminhao__tremor,.caminhao__roda,.parada,.estrada__linha{animation:none!important;opacity:1}
  .caminhao{left:auto;right:0}
}