body.p-home .hero{min-height:clamp(600px,92vh,880px)}
body.p-home .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.p-home .hero h1{font-size:clamp(36px,5.2vw,66px);max-width:13ch}
body.p-home .palco{position:relative;justify-content:center;margin-right:clamp(-70px,-4vw,-10px)}
body.p-home .bloco{
  position:absolute;right:clamp(-60px,-3vw,0px);bottom:0;z-index:0;
  width:66%;height:58%;border-radius:8px 8px 0 0;
}
body.p-home .recorte{position:relative;z-index:2;height:clamp(360px,74vh,760px)}
body.p-home .recorte{
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
}
@media(max-width:880px){
  body.p-home .hero-grid{grid-template-columns:1fr;gap:0}
  body.p-home .palco{margin-right:0;justify-content:center}
  /* a foto deixa de ser cortada pelo pe do hero: ela termina
     junto com a secao, e o bloco fica atras dos ombros */
  body.p-home .recorte{
    height:auto;width:min(84%,330px);max-width:none;
    /* no celular ela termina na virada escuro-claro: sem uma
       dissolucao mais longa, o corte lê como foto cortada */
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.45) 90%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.45) 90%,transparent 100%);
  }
  body.p-home .bloco{width:72%;height:44%;right:auto;left:50%;transform:translateX(-50%);border-radius:8px 8px 0 0}
}
@media(max-width:560px){
  body.p-home .recorte{width:min(92%,300px)}
}

.areas{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px);margin-top:clamp(34px,4vw,56px)}
/* com auto-fit os quatro blocos caiam 3 + 1, e o texto de cada
   um tem tamanho bem diferente; em 2x2 as colunas ficam largas
   o bastante e nao sobra orfao */
@media(min-width:760px){ .areas{grid-template-columns:repeat(2,1fr)} }
.area{border-top:1px solid var(--nude);padding-top:26px;display:flex;flex-direction:column}
.area h3{font-size:clamp(21px,2.3vw,27px);margin-bottom:14px;max-width:22ch}
.area p{font-size:15.5px;color:var(--tinta-2);line-height:1.75;margin-bottom:12px}
.area .destaque-linha{font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.9vw,21px);color:var(--tinta);line-height:1.4}
.area .ir{margin-top:auto;padding-top:18px;padding-bottom:8px;min-height:44px;align-items:center}
.ir{margin-top:8px;font:500 15px/1 var(--sans);color:var(--argila-texto);display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.ir i{display:block;width:18px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.area:hover .ir i,.ferramenta:hover .ir i{width:40px}
.nota-legal{font-size:14px;color:var(--tinta-2);margin-top:26px;max-width:62ch}
.rotulo-claro{font-size:12.5px;font-weight:500;color:var(--argila-texto);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}

/* ---- carrossel ---- */
.carrossel-caixa{
  display:flex;justify-content:center;align-items:center;
  margin-top:clamp(22px,3vw,40px);
  min-height:470px;overflow:hidden;
}
.car{position:relative;font-family:var(--sans);flex:none}
.car-track{position:absolute;inset:0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.car-track[data-held="true"]{cursor:grabbing}
.car-track:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--linho), 0 0 0 4px rgba(42,33,26,.4);
  border-radius:12px;
}
/* o encaixe carrega ONDE no anel e o ângulo de repouso da
   carta, escritos por quadro pelo script, então não carrega
   transição nenhuma: a suavização e o arrasto se
   reinterpolariam um contra o outro e o que se veria seria a
   transição, não o dedo */
.car-slot{position:absolute;left:50%;top:50%;transform-origin:center}
/* a perspectiva mora AQUI, não no trilho: no trilho, uma
   carta da beirada inclinaria na direção do meio do palco em
   vez de na direção do dedo que está nela */
.car-float{width:100%;height:100%;perspective:760px;animation:car-bob 5s ease-in-out infinite}
.car-card{
  position:relative;display:block;width:100%;height:100%;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  background-size:cover;background-position:center;
  border-radius:18px;overflow:hidden;text-decoration:none;color:var(--linho);
  box-shadow:0 12px 28px -10px rgba(47,37,28,.42);
}
.car-sheen{position:absolute;inset:0;display:block;pointer-events:none}
.car-legenda{
  position:absolute;left:0;right:0;bottom:0;padding:70px 24px 24px;
  display:block;pointer-events:none;
  background:linear-gradient(to top,rgba(26,20,15,.9) 0%,rgba(26,20,15,.55) 46%,rgba(26,20,15,0) 100%);
}
.car-legenda b{display:block;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.14}
.car-legenda em{display:block;font-style:normal;font-size:14.5px;line-height:1.5;color:rgba(246,241,234,.8);margin-top:8px}
.car-dica{
  text-align:center;font-size:14.5px;color:var(--tinta-2);
  margin-top:clamp(14px,2vw,26px);
}
@keyframes car-bob{
  0%,100%{transform:translateY(calc(var(--lift,4px) * -1)) rotate(calc(var(--sway,1deg) * -1))}
  50%{transform:translateY(var(--lift,4px)) rotate(var(--sway,1deg))}
}
@media (prefers-reduced-motion: reduce){ .car-float{animation:none} }
/* o anel tem 648px de largura fixa, escritos pelo script. A
   escala nao da para calcular em CSS, porque dividir
   comprimento por comprimento nao existe em calc(). Entao os
   degraus abaixo foram conferidos um a um: em cada largura o
   anel escalado cabe com pelo menos 32px de folga. */
@media(max-width:760px){ .carrossel-caixa{--f:.82} }
@media(max-width:560px){ .carrossel-caixa{--f:.72} }
@media(max-width:480px){ .carrossel-caixa{--f:.66} }
@media(max-width:420px){ .carrossel-caixa{--f:.58} }
@media(max-width:380px){ .carrossel-caixa{--f:.52} }
@media(max-width:340px){ .carrossel-caixa{--f:.46} }
@media(max-width:760px){
  .carrossel-caixa{
    align-items:flex-start;
    min-height:0;height:calc(462px * var(--f));overflow:visible;
    margin-top:clamp(20px,4vw,34px);
  }
  .car{transform:scale(var(--f));transform-origin:top center}
}
/* lista de texto por baixo: serve a quem usa teclado, leitor
   de tela e ao buscador, que nao arrastam carta nenhuma */
.frentes-texto{
  margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;
}
.frentes-texto a{
  font-size:15px;color:var(--tinta-2);text-decoration:none;
  padding:9px 18px;border:1px solid rgba(156,123,98,.5);border-radius:100px;
  transition:border-color .24s var(--ease),color .24s var(--ease),background-color .24s var(--ease);
}
.frentes-texto a:hover{border-color:var(--marrom);color:var(--tinta);background:var(--areia)}

.ferramentas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.4vw,28px);margin-top:42px}
.ferramenta{
  border:1px solid var(--nude);border-radius:12px;padding:clamp(24px,2.8vw,34px);
  text-decoration:none;color:inherit;display:block;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.ferramenta:hover{background:var(--areia);border-color:var(--argila);transform:translateY(-4px)}
.ferramenta h3{margin-bottom:10px}
.ferramenta .ir{margin-top:16px}
.ferramenta p{font-size:15.5px;color:var(--tinta-2);line-height:1.7}