/* Cores tiradas do papodeintercambio.com: dourado #f8ae00 e teal #077881,
   com o azul do avião do logotipo como apoio. */
:root{
  --dourado:#f8ae00; --dourado-claro:#ffd76b; --teal:#077881; --teal-escuro:#045b62;
  --azul:#009fe3; --tinta:#0d2a2d; --tinta-fraca:#5c7477; --papel:#fff;
  --areia:#fdf8ef; --linha:#e7eceb;
  --sombra:0 1px 2px rgba(13,42,45,.06), 0 10px 30px rgba(13,42,45,.07);
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.6 var(--fonte);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2{line-height:1.15;letter-spacing:-.6px;margin:0 0 12px}
img{max-width:100%}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--linha);position:sticky;top:0;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:20}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.marca span{display:flex;flex-direction:column;line-height:1.15}
.marca b{font-size:15px}
.marca small{font-size:11px;color:var(--teal);font-weight:600}
.botao-topo{background:var(--teal);color:#fff;text-decoration:none;font-weight:700;
  font-size:13px;padding:9px 14px;border-radius:999px;white-space:nowrap}

/* capa */
.capa{padding:34px 18px 26px;text-align:center;background:
  radial-gradient(1200px 340px at 50% -60px, #fff6e0 0%, rgba(255,255,255,0) 70%), var(--papel)}
.chapeu{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--dourado)}
.capa h1{font-size:clamp(27px,7.4vw,46px);max-width:16ch;margin-inline:auto}
.capa h1 em{font-style:normal;color:var(--teal);
  background:linear-gradient(transparent 62%, var(--dourado-claro) 62%)}
.linha-fina{max-width:56ch;margin:14px auto 0;color:var(--tinta-fraca);font-size:15.5px}
.numeros{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.numeros div{background:var(--areia);border:1px solid var(--linha);border-radius:14px;
  padding:12px 18px;min-width:104px}
.numeros b{display:block;font-size:24px;color:var(--teal);line-height:1.1}
.numeros span{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--tinta-fraca)}

/* carrosseis: rodam sozinhos e nao aceitam clique nem pausa */
.faixa-carrossel{padding:12px 0 30px;overflow:hidden}
.carrossel{overflow:hidden;margin:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.trilho{display:flex;gap:14px;width:max-content;
  /* o carrossel e enfeite, nao controle: nao para no hover e nao se clica */
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  will-change:transform;animation:rolar var(--tempo,90s) linear infinite}
#carrossel-b .trilho{animation-direction:reverse}
@keyframes rolar{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.viajante{width:126px;flex:none;text-align:center;background:var(--papel);
  border:1px solid var(--linha);border-radius:16px;padding:12px 8px 10px;box-shadow:var(--sombra)}
.viajante img{width:66px;height:66px;border-radius:50%;object-fit:cover;
  background:var(--areia);border:2px solid var(--dourado-claro)}
.viajante b{display:block;font-size:13.5px;margin-top:8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.viajante span{display:block;font-size:11.5px;color:var(--teal);font-weight:600}

/* blocos */
.bloco{padding:34px 18px;max-width:1120px;margin:0 auto}
.fundo-claro{background:var(--areia);max-width:none}
.bloco h2{font-size:clamp(22px,5.2vw,32px);text-align:center}
.apoio{text-align:center;color:var(--tinta-fraca);max-width:60ch;margin:0 auto 22px;font-size:15px}

.depoimentos{display:grid;grid-template-columns:1fr;gap:14px;max-width:1120px;margin:0 auto}
.depoimento{background:var(--papel);border:1px solid var(--linha);border-radius:18px;
  padding:18px;box-shadow:var(--sombra);display:flex;flex-direction:column}
.depoimento p{margin:0 0 14px;font-size:15px;overflow-wrap:anywhere}
.depoimento p::before{content:"“";color:var(--dourado);font-size:30px;line-height:0;
  vertical-align:-8px;margin-right:4px}
.assina{display:flex;align-items:center;gap:10px;margin-top:auto;text-decoration:none;color:inherit}
.assina img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--areia)}
.assina b{display:block;font-size:14px}
.assina span{font-size:12px;color:var(--teal);font-weight:600}

.filtros-site{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.filtros-site button{border:1px solid var(--linha);background:var(--papel);color:var(--tinta);
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.filtros-site button.ativo{background:var(--teal);border-color:var(--teal);color:#fff}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;
  max-width:1120px;margin:0 auto}
.grade a{background:var(--papel);border:1px solid var(--linha);border-radius:16px;
  padding:14px 8px 12px;text-align:center;text-decoration:none;color:inherit;
  box-shadow:var(--sombra);min-width:0}
.grade img{width:62px;height:62px;border-radius:50%;object-fit:cover;background:var(--areia);
  border:2px solid var(--dourado-claro)}
.grade b{display:block;font-size:13.5px;margin-top:8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.grade span{display:block;font-size:11.5px;color:var(--teal);font-weight:600}

/* rodape */
.rodape{background:var(--teal-escuro);color:#eaf6f6;text-align:center;padding:36px 18px 44px}
.rodape img{background:#fff;border-radius:50%;padding:6px}
.rodape p{margin:8px auto}
.rodape b{font-size:18px}
.mini{font-size:12.5px;color:#b9dcdd;max-width:52ch}
.botao-rodape{display:inline-block;margin:14px 0 10px;background:var(--dourado);color:#3a2a00;
  font-weight:800;text-decoration:none;padding:12px 22px;border-radius:999px}

@media (min-width:720px){
  .depoimentos{grid-template-columns:1fr 1fr}
  .capa{padding:52px 20px 34px}
  .bloco{padding:48px 20px}
}
@media (min-width:1040px){ .depoimentos{grid-template-columns:1fr 1fr 1fr} }
@media (prefers-reduced-motion:reduce){ .trilho{animation-duration:400s} }