/*
  Identidade visual da LANDING do Instacreator.

  Esta folha é PRÓPRIA da landing — luxo editorial: branco, tinta e o
  dourado-oliva da marca (com champanhe sobre o escuro),
  tipografia Fraunces (display) + Inter (texto), só tema claro. Ela NÃO segue
  os tokens do painel (instacreator-front): a landing tem identidade de
  vitrine; o painel tem identidade de ferramenta. Nada aqui precisa ser
  sincronizado com outro repositório.

  As páginas de texto (termos, privacidade, 404) usam apenas o bloco `.texto`
  ao fim do arquivo, além da base.
*/

@font-face {
  font-family: "Inter";
  src: url("/fontes/inter-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fontes/fraunces-latin-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  src: url("/fontes/fraunces-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* fundo — branco puro; neutros sem nenhum viés quente. O único calor da
     página vem do champanhe e do brilho dourado sobre a tinta. */
  --marfim: #ffffff;
  --papel: #ffffff;
  --gelo: #f6f6f6;

  /* tinta — preto quase neutro (o marrom-chocolate dava véu sépia) */
  --tinta: #191817;
  --tinta-suave: #282624;
  --corpo: #454545;
  --mudo: #767676;
  --fraco: #999999;

  /* cor da marca — o dourado-oliva do "cada peça" do slide editorial:
     o "creator" do logo e todos os acentos (itálicos, filetes,
     marcadores, numerais, hovers). A variante escura é a mesma família
     com contraste AA para texto pequeno. Superfícies seguem pretas. */
  --marca: #9a7b34;
  --marca-escura: #7e6226;

  /* champanhe — NUNCA sobre branco (vira bege); só sobre superfícies
     escuras, onde lê como metal: selo, post do hero, mocks e CTA final */
  --champanhe: #7e6226;
  --ouro: #a8873f;
  --ouro-claro: #cbad72;

  /* estrutura */
  --linha: #e8e8e8;
  --linha-forte: #d7d7d7;
  --sombra-suave: 0 1px 2px rgba(20, 20, 20, 0.05),
    0 12px 32px -12px rgba(20, 20, 20, 0.14);
  --sombra-palco: 0 2px 4px rgba(20, 20, 20, 0.08),
    0 32px 64px -24px rgba(20, 20, 20, 0.28);
  --anel-foco: 0 0 0 3px rgba(154, 123, 52, 0.4);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --raio: 14px;
  --raio-grande: 24px;
  --pilula: 999px;

  color-scheme: light;
}

/* ---- Reset e base ------------------------------------------------------ */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--marfim);
  color: var(--corpo);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--marca-escura);
}

:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .tira,
  .tela-pontos::after,
  .aviso {
    animation: none !important;
  }

  /* .palco na frente para vencer o opacity: 0 base, declarado depois;
     todos os avisos compartilham o slot de base, então só um estático */
  .palco .aviso-1 {
    opacity: 1;
  }
}

/* ---- Tipografia -------------------------------------------------------- */
h1,
h2 {
  font-family: var(--serif);
  font-weight: 580;
  letter-spacing: -0.015em;
  color: var(--tinta);
  text-wrap: balance;
}

h1 em,
h2 em {
  font-style: italic;
  font-weight: 480;
  color: var(--marca);
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.03;
}

h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
}

h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--tinta);
}

.olho {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca-escura);
}

.olho::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--marca);
}

.chamada {
  margin: 0 0 28px;
  max-width: 34em;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--mudo);
}

.apoio {
  margin: 0;
  max-width: 36em;
  color: var(--mudo);
}

.miudo {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--mudo);
}

.centro {
  text-align: center;
}

/* ---- Estrutura --------------------------------------------------------- */
.secao {
  padding: 96px 24px;
}

.secao + .secao {
  border-top: 1px solid var(--linha);
}

.secao > .interno,
.faixa {
  max-width: 1120px;
  margin: 0 auto;
}

.secao-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px 72px;
  align-items: end;
  margin-bottom: 56px;
}

.secao-intro .apoio {
  padding-bottom: 8px;
}

/* ---- Cabeçalho --------------------------------------------------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--marfim) 86%, transparent);
  border-bottom: 1px solid var(--linha);
}

.topo .faixa {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-decoration: none;
}

.marca .selo {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--tinta);
  color: var(--ouro-claro);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 560;
}

.marca-cor {
  color: var(--marca);
}

.topo nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- Botões ------------------------------------------------------------ */
.cta,
.cta-vazio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--pilula);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 160ms ease;
}

.cta {
  background: var(--tinta);
  color: var(--marfim);
  border: 1px solid var(--tinta);
}

.cta:hover {
  background: var(--tinta-suave);
  border-color: var(--tinta-suave);
}

.cta-vazio {
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  background: transparent;
}

.cta-vazio:hover {
  border-color: var(--marca);
  color: var(--marca-escura);
}

.topo .cta {
  padding: 10px 20px;
  font-size: 14px;
}

.topo .cta-vazio {
  padding: 10px 18px;
  font-size: 14px;
}

.linha-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  padding: 88px 24px 112px;
  overflow: hidden;
}

.hero .interno {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}

.lista-checagem {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lista-checagem li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--corpo);
  font-size: 15px;
}

.lista-checagem li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  transform: translateY(-1px) rotate(45deg);
  background: var(--marca);
}

/* palco de mockups (CSS puro, ilustrativo) */
.palco {
  position: relative;
  padding: 16px 0;
  /* item de grid: sem isso o min-content da tira de slides infla a coluna */
  min-width: 0;
}

.poste {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  padding: 24px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.poste-olho {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

.poste-titulo {
  margin-top: auto;
  font-size: 26px;
  line-height: 1.12;
}

.poste-rodape {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.78;
}

/* telefone com posts deslizando (CSS puro, sem JS) */
.telefone {
  position: relative;
  width: min(288px, 78%);
  margin: 0;
  background: var(--tinta);
  border-radius: 44px;
  padding: 10px;
  box-shadow: var(--sombra-palco);
  /* confina o z-index da ilha: sem isso ela pinta por cima dos .aviso */
  isolation: isolate;
}

.tela {
  position: relative;
  background: var(--papel);
  border-radius: 35px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ilha {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 21px;
  border-radius: var(--pilula);
  background: var(--tinta);
  z-index: 2;
}

.tela-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 42px 16px 12px;
}

.tela-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--marca), var(--ouro-claro));
}

.tela-conta strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--tinta);
}

.tela-conta small {
  font-size: 10.5px;
  color: var(--fraco);
}

.tela-mais {
  margin-left: auto;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--fraco);
}

.tela-post {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.tira {
  display: flex;
  height: 100%;
  animation: desliza 18s cubic-bezier(0.77, 0, 0.18, 1) infinite;
}

.tslide {
  flex: 0 0 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  padding: 20px;
}

.tslide .poste-titulo {
  font-size: 22px;
}

/* cinco janelas de 3,6s (3s parado + 0,6s de arrasto); o 6º slide repete o
   1º e divide com ele a espera (1,5s no fim + 1,5s no início) para o loop
   fechar sem pulo e sem o 1º slide ficar parado mais que os outros */
@keyframes desliza {
  0%, 8.35% { transform: translateX(0); }
  11.65%, 28.35% { transform: translateX(-100%); }
  31.65%, 48.35% { transform: translateX(-200%); }
  51.65%, 68.35% { transform: translateX(-300%); }
  71.65%, 88.35% { transform: translateX(-400%); }
  91.65%, 100% { transform: translateX(-500%); }
}

.tela-pontos {
  position: relative;
  display: flex;
  gap: 5px;
  justify-content: center;
  padding: 12px 0 4px;
}

.tela-pontos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--linha-forte);
}

.tela-pontos::after {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(50% - 22.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--marca);
  animation: ponto-ativo 18s cubic-bezier(0.77, 0, 0.18, 1) infinite;
}

@keyframes ponto-ativo {
  0%, 8.35% { transform: translateX(0); }
  11.65%, 28.35% { transform: translateX(10px); }
  31.65%, 48.35% { transform: translateX(20px); }
  51.65%, 68.35% { transform: translateX(30px); }
  71.65%, 88.35% { transform: translateX(40px); }
  91.65%, 100% { transform: translateX(0); }
}

.tela-legenda {
  display: grid;
  gap: 6px;
  padding: 4px 16px 20px;
}

.tela-legenda span {
  height: 7px;
  border-radius: 4px;
  background: var(--linha);
}

.tela-legenda span:last-child {
  width: 52%;
}

/* avisos: pilha à direita do celular, de cima para baixo — 13
   exemplos. O ciclo dura DUAS voltas do carrossel (36s): o primeiro
   abre o ciclo e, a partir daí, TODA arrastada sobe um PAR, em
   sequência (arrastadas 0 a 5), até a pilha completar na 6ª; o
   carrossel segue girando com a lista cheia até o reset. As janelas de
   entrada são as fases de arrasto do desliza reescaladas para 36s —
   as pílulas sobem junto com o post. */
.aviso {
  position: absolute;
  left: 84%;
  /* compõe com o translate animado dos keyframes (propriedades separadas) */
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--pilula);
  background: var(--papel);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-suave);
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  opacity: 0;
}

.aviso::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.aviso-1 {
  top: 2%;
  animation: entra-1 36s ease infinite;
}

.aviso-1::before {
  background: #12a150; /* verde */
}

.aviso-2 {
  top: calc(2% + 38px);
  animation: entra-2 36s ease infinite;
}

.aviso-2::before {
  background: var(--marca); /* dourado */
}

.aviso-3 {
  top: calc(2% + 76px);
  animation: entra-3 36s ease infinite;
}

.aviso-3::before {
  background: #f59e0b; /* âmbar */
}

.aviso-4 {
  top: calc(2% + 114px);
  animation: entra-4 36s ease infinite;
}

.aviso-4::before {
  background: #d9469b; /* magenta */
}

.aviso-5 {
  top: calc(2% + 152px);
  animation: entra-5 36s ease infinite;
}

.aviso-5::before {
  background: #0e9bd8; /* ciano */
}

.aviso-6 {
  top: calc(2% + 190px);
  animation: entra-6 36s ease infinite;
}

.aviso-6::before {
  background: #f4573b; /* coral */
}

.aviso-7 {
  top: calc(2% + 228px);
  animation: entra-7 36s ease infinite;
}

.aviso-7::before {
  background: #7c5cec; /* roxo */
}

.aviso-8 {
  top: calc(2% + 266px);
  animation: entra-8 36s ease infinite;
}

.aviso-8::before {
  background: #0d9488; /* teal */
}

.aviso-9 {
  top: calc(2% + 304px);
  animation: entra-9 36s ease infinite;
}

.aviso-9::before {
  background: #e11d64; /* rosa */
}

.aviso-10 {
  top: calc(2% + 342px);
  animation: entra-10 36s ease infinite;
}

.aviso-10::before {
  background: #7ca11c; /* lima */
}

.aviso-11 {
  top: calc(2% + 380px);
  animation: entra-11 36s ease infinite;
}

.aviso-11::before {
  background: #6d28d9; /* violeta */
}

.aviso-12 {
  top: calc(2% + 418px);
  animation: entra-12 36s ease infinite;
}

.aviso-12::before {
  background: #ea580c; /* laranja */
}

.aviso-13 {
  top: calc(2% + 456px);
  animation: entra-13 36s ease infinite;
}

.aviso-13::before {
  background: #2563eb; /* azul, como a Meta */
}

@keyframes entra-1 {
  0% { opacity: 0; translate: 0 12px; }
  0.80%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-2 {
  0%, 4.17% { opacity: 0; translate: 0 12px; }
  5.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-3 {
  0%, 4.17% { opacity: 0; translate: 0 12px; }
  5.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-4 {
  0%, 14.18% { opacity: 0; translate: 0 12px; }
  15.83%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-5 {
  0%, 14.18% { opacity: 0; translate: 0 12px; }
  15.83%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-6 {
  0%, 24.18% { opacity: 0; translate: 0 12px; }
  25.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-7 {
  0%, 24.18% { opacity: 0; translate: 0 12px; }
  25.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-8 {
  0%, 34.17% { opacity: 0; translate: 0 12px; }
  35.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-9 {
  0%, 34.17% { opacity: 0; translate: 0 12px; }
  35.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-10 {
  0%, 44.17% { opacity: 0; translate: 0 12px; }
  45.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-11 {
  0%, 44.17% { opacity: 0; translate: 0 12px; }
  45.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-12 {
  0%, 54.17% { opacity: 0; translate: 0 12px; }
  55.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

@keyframes entra-13 {
  0%, 54.17% { opacity: 0; translate: 0 12px; }
  55.82%, 99.3% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 12px; }
}

/* ---- Vitrine de estilos de posts --------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  /* isola o layout interno: sem isso, o scroller horizontal do mobile vaza
     largura fantasma para a raiz da página no Chromium */
  contain: layout;
}

.galeria figure {
  margin: 0;
}

.galeria .poste {
  width: 100%;
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-suave);
}

.galeria figcaption {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  color: var(--mudo);
}

.galeria figcaption .estilo-nome {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 560;
  color: var(--tinta);
}

.galeria figcaption .estilo-numero {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marca-escura);
}

.legenda-galeria {
  margin: 40px 0 0;
  font-size: 13px;
  color: var(--mudo);
  max-width: 46em;
}

/* os seis estilos — mocks ilustrativos, um vocabulário por peça */
.estilo-editorial {
  background: #f6f1e6;
  color: #221c14;
}

.estilo-editorial .poste-titulo {
  font-family: var(--serif);
  font-weight: 540;
  font-size: 28px;
}

.estilo-editorial .poste-titulo em {
  font-style: italic;
  font-weight: 420;
  color: #9a7b34;
}

.estilo-editorial .poste-olho {
  border-bottom: 1px solid rgba(34, 28, 20, 0.25);
  padding-bottom: 10px;
}

.estilo-minimal {
  background: #fdfdfb;
  color: #2e2e2b;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.estilo-minimal .poste-olho {
  position: absolute;
  top: 24px;
}

.estilo-minimal .poste-titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 11em;
}

.estilo-minimal .poste-titulo::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: 16px auto 0;
  background: #2e2e2b;
}

.estilo-minimal .poste-rodape {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
}

.estilo-statement {
  background: #1d35c8;
  color: #f4f4ef;
}

.estilo-statement .poste-titulo {
  font-size: 34px;
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.estilo-statement .poste-titulo em {
  font-style: normal;
  color: #ffd84d;
}

.estilo-noturno {
  background: #16130e;
  color: #efe6d2;
  border: 1px solid #16130e;
  position: relative;
}

.estilo-noturno::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(203, 173, 114, 0.45);
  border-radius: 8px;
  pointer-events: none;
}

.estilo-noturno .poste-titulo {
  font-family: var(--serif);
  font-weight: 480;
  font-size: 26px;
  color: #cbad72;
}

.estilo-degrade {
  background: linear-gradient(150deg, #ffe4d0 0%, #f3d3e4 52%, #cfd4f4 100%);
  color: #3a2f42;
}

.estilo-degrade .poste-titulo {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.estilo-degrade .poste-titulo em {
  font-style: normal;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 6px;
  padding: 0 6px;
}

.estilo-foto {
  background: radial-gradient(
      130% 90% at 78% 12%,
      rgba(255, 224, 178, 0.35),
      transparent 55%
    ),
    linear-gradient(180deg, rgba(16, 22, 20, 0) 34%, rgba(10, 14, 13, 0.82) 78%),
    linear-gradient(160deg, #2e4a41 0%, #1b2f29 58%, #101c18 100%);
  color: #f2ede2;
}

.estilo-foto .poste-titulo {
  font-size: 23px;
  font-weight: 650;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ---- Capacidades ------------------------------------------------------- */
.capacidades {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
}

.capacidade {
  background: var(--marfim);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.capacidade .rotulo {
  order: 3;
  margin-top: auto;
  padding-top: 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marca-escura);
}

.capacidade h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.capacidade p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mudo);
}

/* ---- Como funciona ----------------------------------------------------- */
.passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.passo {
  border-top: 1px solid var(--linha-forte);
  padding-top: 24px;
}

.passo .numero {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 44px;
  font-weight: 420;
  line-height: 1;
  color: var(--marca);
  margin-bottom: 16px;
}

.passo h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 560;
  margin: 0 0 8px;
}

.passo p {
  margin: 0;
  font-size: 14.5px;
  color: var(--mudo);
}

/* ---- Para quem é ------------------------------------------------------- */
.publicos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.publico {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 28px;
}

.publico h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 560;
  margin: 0 0 8px;
}

.publico p {
  margin: 0;
  font-size: 14.5px;
  color: var(--mudo);
}

/* ---- FAQ ---------------------------------------------------------------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--linha);
}

.faq details {
  border-bottom: 1px solid var(--linha);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 4px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 560;
  color: var(--tinta);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  color: var(--marca);
  transition: transform 160ms ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq p {
  margin: 0;
  padding: 0 4px 24px;
  max-width: 42em;
  font-size: 15px;
  color: var(--mudo);
}

/* ---- CTA final ---------------------------------------------------------- */
.final {
  background: var(--tinta);
  border-radius: var(--raio-grande);
  padding: 88px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    110% 90% at 50% -10%,
    rgba(203, 173, 114, 0.22),
    transparent 60%
  );
  pointer-events: none;
}

.final > * {
  position: relative;
}

.final .olho {
  color: var(--ouro-claro);
}

.final h2 {
  color: var(--marfim);
  max-width: 15em;
  margin: 0 auto 20px;
}

.final h2 em {
  color: var(--ouro-claro);
}

.final .chamada {
  margin: 0 auto 36px;
  color: rgba(250, 246, 238, 0.66);
}

.final .linha-cta {
  justify-content: center;
}

.final .cta {
  background: var(--marfim);
  border-color: var(--marfim);
  color: var(--tinta);
}

.final .cta:hover {
  background: var(--ouro-claro);
  border-color: var(--ouro-claro);
}

.final .cta-vazio {
  color: var(--marfim);
  border-color: rgba(250, 246, 238, 0.34);
}

.final .cta-vazio:hover {
  border-color: var(--ouro-claro);
  color: var(--ouro-claro);
}

.final .miudo {
  color: rgba(250, 246, 238, 0.45);
}

/* ---- Rodapé ------------------------------------------------------------ */
.rodape {
  border-top: 1px solid var(--linha);
  padding: 36px 24px;
}

.rodape .faixa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--mudo);
  font-size: 13px;
}

.rodape .marca {
  font-size: 17px;
}

.rodape nav {
  display: flex;
  gap: 20px;
}

.rodape a {
  color: var(--mudo);
  text-decoration: none;
}

.rodape a:hover {
  color: var(--marca-escura);
}

/* ---- Responsivo -------------------------------------------------------- */
@media (max-width: 1260px) {
  /* telas médias: recua a pilha para não estourar a borda direita */
  .aviso {
    left: 76%;
  }
}

@media (max-width: 960px) {
  .secao {
    padding: 72px 20px;
  }

  .secao-intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
    margin-bottom: 40px;
  }

  .secao-intro .apoio {
    padding-bottom: 0;
  }

  .hero {
    padding: 56px 20px 72px;
  }

  .hero .interno {
    grid-template-columns: 1fr;
    gap: 72px;
  }

  .palco {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  .capacidades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .passos {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .publicos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .galeria {
    display: flex;
    gap: 20px;
    margin: 0 -20px;
    padding: 4px 20px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .galeria figure {
    flex: none;
    width: min(72vw, 300px);
    scroll-snap-align: center;
  }
}

@media (max-width: 560px) {
  .capacidades {
    grid-template-columns: 1fr;
  }

  .tslide .poste-titulo {
    font-size: 20px;
  }

  .aviso {
    font-size: 11.5px;
    padding: 8px 13px;
  }

  /* tela estreita não tem largura para a pilha fora do aparelho:
     ela volta a passar por cima, compacta */
  .aviso {
    left: 58%;
  }

  .final {
    padding: 64px 20px;
  }

  .topo .cta-vazio {
    display: none;
  }
}

/* ---- Páginas de texto (termos, privacidade, 404) ------------------------ */
.texto {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 20px 88px;
}

.texto h1 {
  max-width: none;
  margin: 0 0 8px;
  font-size: 2rem;
}

.texto h2 {
  margin: 32px 0 10px;
  font-size: 1.25rem;
}

.texto p,
.texto li {
  color: var(--corpo);
  font-size: 15px;
  line-height: 1.7;
}

.texto .atualizado {
  color: var(--mudo);
  font-size: 13px;
  margin: 0 0 28px;
}