/*
 * Vindo — home, /esportes/ e /entrar/
 * Usa só as variáveis de vindo-tokens.css (carregado antes deste arquivo).
 * Nenhuma cor, tamanho de letra ou espaçamento fora da lista.
 */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alvo-minimo) + var(--e-6)); }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }
.secao { padding: var(--secao) 0; }
.secao--areia { background: var(--areia); }
.secao--sem-topo { padding-top: 0; }
.secao--noite { background: var(--noite); color: var(--sobre-noite); }
.secao-titulo { text-align: center; margin: 0 auto var(--e-7); }
.secao-apoio { font-size: var(--fs-apoio); color: var(--tinta-2); text-align: center; margin: calc(-1 * var(--e-6)) auto var(--e-7); }
.secao--noite .secao-apoio { color: var(--sobre-noite-apagado); }
.legenda { font-size: var(--fs-legenda); color: var(--apagado); }

.pular {
  position: absolute; left: var(--e-4); top: calc(-1 * var(--e-9));
  background: var(--sol); color: var(--noite); padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-p); font-weight: var(--peso-botao); z-index: 100;
}
.pular:focus { top: var(--e-4); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--noite); outline-offset: 3px; border-radius: var(--raio-p);
}
.secao--noite a:focus-visible { outline-color: var(--sol); }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--creme); border-bottom: 1px solid var(--linha);
}
.topo-inner {
  display: flex; align-items: center; gap: var(--e-5);
  min-height: calc(var(--alvo-minimo) + var(--e-5));
}
.topo-logo { display: flex; align-items: center; min-height: var(--alvo-minimo); flex-shrink: 0; }
.topo-logo img { height: var(--e-6); width: auto; }
.menu { display: flex; align-items: center; gap: var(--e-5); margin-left: auto; }
.menu-links { display: flex; gap: var(--e-5); }
.menu-links a {
  display: inline-flex; align-items: center; min-height: var(--alvo-minimo);
  font-size: var(--fs-legenda); font-weight: var(--peso-botao); text-decoration: none; color: var(--noite);
}
.menu-links a:hover { text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.menu-acoes { display: flex; align-items: center; gap: var(--e-3); }
.menu-acoes .botao { font-size: var(--fs-legenda); padding: 0 var(--e-5); }

.idioma { display: flex; align-items: center; gap: var(--e-1); }
.idioma button {
  min-height: var(--alvo-minimo); min-width: var(--alvo-minimo);
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-legenda); font-weight: var(--peso-botao); color: var(--apagado);
  border-radius: var(--raio-p);
}
.idioma button.active { color: var(--noite); text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.idioma .divider { color: var(--apagado); }

.menu-abrir {
  display: none; margin-left: auto;
  min-height: var(--alvo-minimo); min-width: var(--alvo-minimo);
  background: none; border: 2px solid var(--noite); border-radius: var(--raio-pilula);
  color: var(--noite); cursor: pointer; font: inherit; font-size: var(--fs-texto);
}

/* No desktop: logo · links · PT | EN · Entrar · Baixar o app */
@media (min-width: 1100px) {
  .menu { display: contents; }
  .menu-links { order: 1; margin-left: auto; }
  .idioma--topo { order: 2; }
  .menu-acoes { order: 3; }
}

@media (max-width: 1099px) {
  .topo-inner { gap: var(--e-2); }
  .menu-abrir { display: inline-flex; align-items: center; justify-content: center; }
  .idioma--topo { order: 2; }
  .menu-abrir { order: 3; margin-left: 0; }
  .topo-logo { margin-right: auto; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--e-4);
    background: var(--creme); border-bottom: 1px solid var(--linha);
    padding: var(--e-4) var(--margem) var(--e-6); box-shadow: var(--sombra);
    max-height: calc(100vh - var(--e-9)); overflow-y: auto;
  }
  .topo.aberto .menu { display: flex; }
  .menu-links { flex-direction: column; gap: 0; }
  .menu-links a { font-size: var(--fs-texto); border-bottom: 1px solid var(--linha); }
  .menu-acoes { flex-direction: column; align-items: stretch; }
  .menu-acoes .botao { font-size: var(--fs-texto); }
}

/* ---------- Botões e lojas ---------- */
.botao { text-align: center; }
.botao--principal:hover { background: var(--sol); }
.secao--noite .botao--secundario { color: var(--sobre-noite); border-color: var(--sobre-noite); }
.link-seta {
  display: inline-block; padding: var(--e-3) 0;
  font-weight: var(--peso-botao); color: var(--noite);
  text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.lojas { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.lojas a { display: inline-flex; min-height: var(--alvo-minimo); align-items: center; border-radius: var(--raio-p); }
.lojas img { height: var(--alvo-minimo); width: auto; }
.lojas[hidden] { display: none; }

/* ---------- Hero ---------- */
.hero { padding: var(--e-8) 0 var(--secao); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: center; }
.hero h1 { margin-bottom: var(--e-5); }
.hero-apoio { font-size: var(--fs-apoio); font-weight: var(--peso-titulo); line-height: var(--lh-titulo); margin-bottom: var(--e-5); }
/* Frase de apoio: texto limpo, com um traço amarelo ao lado (o amarelo é forma, nunca fundo da letra) */
.hero-apoio { border-left: var(--e-2) solid var(--sol); border-radius: var(--e-1); padding-left: var(--e-4); }
.hero-texto { color: var(--tinta-2); margin-bottom: var(--e-6); }
.hero-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); }
.hero-acoes .lojas { margin-top: calc(-1 * var(--e-1)); }

.hero-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--raio-m); background: var(--areia); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-stage-fallback { position: relative; z-index: 1; height: 90%; width: auto; }
/* Formas da hero: um sol grande atrás do celular e um "sim" verde pequeno. Só decoração. */
.hero-stage::before, .hero-stage::after { content: ""; position: absolute; border-radius: var(--raio-pilula); }
.hero-stage::before { width: 72%; aspect-ratio: 1; background: var(--sol); right: -12%; bottom: -18%; }
.hero-stage::after { width: var(--e-8); height: var(--e-8); background: var(--verde); left: 12%; top: 14%; }

@media (max-width: 899px) {
  .hero { padding-top: var(--e-6); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--e-6); }
  .hero-stage { aspect-ratio: 1 / 1; }
}

/* ---------- Dois lados ---------- */
.lados { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); margin-bottom: var(--e-8); }
.lado { background: var(--creme); border-radius: var(--raio-m); padding: var(--e-6); }
.lado h3 { margin-bottom: var(--e-4); }
.lado p { color: var(--tinta-2); }
.frase-destaque {
  font-size: var(--fs-h2); font-weight: var(--peso-titulo); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo);
  text-align: center; margin: 0 auto var(--e-6); max-width: 24ch; text-wrap: balance;
}
.fecho { text-align: center; font-size: var(--fs-apoio); color: var(--tinta-2); margin: 0 auto; }
.fecho strong { color: var(--noite); font-weight: var(--peso-titulo); }
@media (max-width: 767px) {
  .lados { grid-template-columns: 1fr; gap: var(--e-5); margin-bottom: var(--e-7); }
  .lado { padding: var(--e-5); }
}

/* ---------- Conheça o Vin ---------- */
.vin { text-align: center; }
.vin .wrap > p { margin-left: auto; margin-right: auto; font-size: var(--fs-apoio); }
.vin .wrap > p + p { margin-top: var(--e-5); }
.vin p:last-child { color: var(--sobre-noite); }
.vin strong { color: var(--sol); font-weight: var(--peso-titulo); }

/* ---------- Antes, durante, depois ---------- */
.tempos { display: grid; gap: var(--e-6); }
.tempo {
  display: grid; grid-template-columns: 1fr auto; gap: var(--e-7); align-items: center;
  background: var(--areia); border-radius: var(--raio-m); padding: var(--e-7);
}
.tempo h3 { margin-bottom: var(--e-4); }
.tempo p { color: var(--tinta-2); }
.tempo--menor { grid-template-columns: 1fr; padding: var(--e-6) var(--e-7); }
.tempo-rotulo { display: block; font-size: var(--fs-legenda); font-weight: var(--peso-titulo); color: var(--ambar); margin-bottom: var(--e-2); }
.tempo-tela { width: calc(var(--e-10) * 2); }
.tempo-tela img { border-radius: var(--raio-m); box-shadow: var(--sombra); }
@media (max-width: 767px) {
  .tempo { grid-template-columns: 1fr; padding: var(--e-5); gap: var(--e-5); }
  .tempo--menor { padding: var(--e-5); }
  .tempo-tela { margin: 0 auto; width: min(100%, calc(var(--e-10) * 2)); }
}

/* Espaço reservado com proporção de tela de celular */
.tela-reservada {
  width: 100%; aspect-ratio: 9 / 19.5; border-radius: var(--raio-m);
  border: 2px dashed var(--borda); background: var(--creme);
  display: flex; align-items: center; justify-content: center;
  color: var(--borda); font-size: var(--fs-h1);
}
.secao--noite .tela-reservada { background: transparent; border-color: var(--sobre-noite-apagado); color: var(--sobre-noite-apagado); }

/* ---------- Na porta ---------- */
.porta-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--e-8); align-items: center; }
.porta h2 { margin-bottom: var(--e-5); }
.porta p { font-size: var(--fs-texto); }
.porta-tela { width: calc(var(--e-10) * 2); }
.porta-tela img { border-radius: var(--raio-m); box-shadow: var(--sombra); }
.pontos { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.pontos li {
  display: inline-flex; align-items: center; gap: var(--e-2);
  border: 1px solid var(--sobre-noite-apagado); border-radius: var(--raio-pilula);
  padding: var(--e-2) var(--e-4); font-size: var(--fs-legenda); font-weight: var(--peso-forte);
}
.pontos i { color: var(--sol); }
@media (max-width: 899px) {
  .porta-grid { grid-template-columns: 1fr; gap: var(--e-7); }
  .porta-tela { margin: 0 auto; width: min(100%, calc(var(--e-10) * 2)); }
}

/* ---------- O que muda ---------- */
.mudancas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-5); }
.mudanca {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--areia); border-radius: var(--raio-m); padding: var(--e-6);
  font-size: var(--fs-apoio); font-weight: var(--peso-forte); line-height: var(--lh-titulo);
}
@media (max-width: 899px) { .mudancas { grid-template-columns: 1fr; } }

/* ---------- Preços ---------- */
.periodo { display: flex; justify-content: center; margin-bottom: var(--e-6); }
.periodo[hidden] { display: none; }
.periodo-chave { display: inline-flex; background: var(--creme); border: 1px solid var(--borda); border-radius: var(--raio-pilula); padding: var(--e-1); }
.periodo-chave button {
  min-height: var(--alvo-minimo); padding: 0 var(--e-5); border: 0; border-radius: var(--raio-pilula);
  background: none; font: inherit; font-weight: var(--peso-botao); color: var(--tinta-2); cursor: pointer;
}
.periodo-chave button[aria-pressed="true"] { background: var(--noite); color: var(--sobre-noite); }

.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-5); align-items: stretch; }
.plano {
  position: relative; display: flex; flex-direction: column;
  background: var(--creme); border: 2px solid var(--linha); border-radius: var(--raio-m); padding: var(--e-6);
}
.plano--destaque { border: 3px solid var(--sol); box-shadow: var(--sombra); }
.plano-etiqueta {
  position: absolute; top: 0; left: var(--e-6); transform: translateY(-50%);
  background: var(--sol); color: var(--noite); font-size: var(--fs-legenda); font-weight: var(--peso-titulo);
  padding: var(--e-1) var(--e-3); border-radius: var(--raio-pilula);
}
.plano h3 { margin-bottom: var(--e-2); }
.plano-para { color: var(--tinta-2); margin-bottom: var(--e-5); }
.plano-preco { font-size: var(--fs-h2); font-weight: var(--peso-titulo); line-height: var(--lh-titulo); margin-bottom: var(--e-5); }
.plano-preco small { font-size: var(--fs-texto); font-weight: var(--peso-forte); color: var(--tinta-2); }
.plano-inclui { color: var(--tinta-2); margin-bottom: var(--e-6); flex-grow: 1; }
.plano-inclui p { font-size: var(--fs-texto); }
.plano-inclui ul { margin-top: var(--e-3); display: grid; gap: var(--e-2); }
.plano-inclui li { display: flex; gap: var(--e-2); align-items: baseline; }
.plano-inclui li i { color: var(--verde-escuro); flex-shrink: 0; }
.plano .botao { width: 100%; }
.plano:not(.plano--destaque) .botao--principal { background: transparent; border-color: var(--noite); }
.precos-notas { margin: var(--e-7) auto 0; display: grid; gap: var(--e-2); text-align: center; justify-items: center; }
.precos-notas p { font-size: var(--fs-legenda); color: var(--apagado); }
.precos-notas a { color: var(--noite); font-weight: var(--peso-botao); display: inline-block; padding: var(--e-3) 0; }
@media (max-width: 899px) {
  .planos { grid-template-columns: 1fr; gap: var(--e-6); max-width: calc(var(--e-10) * 4); margin: 0 auto; }
}

/* ---------- Tipos de evento ---------- */
.tipos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); margin-bottom: var(--e-7); }
.tipos li {
  background: var(--areia); border-radius: var(--raio-m); padding: var(--e-4) var(--e-5);
  font-weight: var(--peso-botao); display: inline-flex; align-items: center; gap: var(--e-2);
}
.tipos i { color: var(--ambar); }
.faixas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }
.faixa {
  display: flex; flex-direction: column; gap: var(--e-2);
  background: var(--sol-claro); border-radius: var(--raio-m); padding: var(--e-6);
  text-decoration: none; color: var(--noite);
  transition: transform var(--tempo) var(--curva), box-shadow var(--tempo) var(--curva);
}
.faixa:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.faixa strong { font-size: var(--fs-h3); font-weight: var(--peso-titulo); line-height: var(--lh-titulo); }
.faixa > span:not(.selo) { color: var(--tinta-2); }
.faixa > span:not(.selo) i { color: var(--ambar); margin-left: var(--e-1); }
@media (max-width: 767px) { .faixas { grid-template-columns: 1fr; } }

/* ---------- Carrossel (#showcase) ---------- */
.carousel-wrapper { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 var(--e-8); }
.carousel-container { position: relative; width: 100%; overflow: hidden; padding: var(--e-5) 0; }
.carousel-track { display: flex; transition: transform 500ms var(--curva); width: 100%; }
.phone-card {
  flex: 0 0 33.333%; max-width: 33.333%; display: flex; justify-content: center;
  padding: 0 var(--e-4); opacity: 0.45; transform: scale(0.9);
  transition: opacity var(--tempo), transform var(--tempo);
}
.phone-card.active { opacity: 1; transform: scale(1); }
.screen-img { width: 100%; max-width: calc(var(--e-10) * 2 + var(--e-6)); border-radius: var(--raio-m); box-shadow: var(--sombra); border: 1px solid var(--linha); }
.control-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: var(--alvo-minimo); height: var(--alvo-minimo); border-radius: var(--raio-pilula);
  background: var(--creme); border: 2px solid var(--noite); color: var(--noite);
  font: inherit; font-size: var(--fs-texto); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.control-btn.prev { left: 0; }
.control-btn.next { right: 0; }
.showcase .lojas { justify-content: center; margin-top: var(--e-6); }
@media (max-width: 900px) { .phone-card { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 600px) {
  .carousel-wrapper { padding: 0 var(--e-7); }
  .phone-card { flex-basis: 100%; max-width: 100%; }
}

/* ---------- Perguntas ---------- */
.perguntas { max-width: calc(var(--e-10) * 6); margin: 0 auto; display: grid; gap: var(--e-3); }
.pergunta { background: var(--creme); border-radius: var(--raio-m); border: 1px solid var(--linha); }
.pergunta summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  min-height: var(--alvo-minimo); padding: var(--e-4) var(--e-5); font-weight: var(--peso-botao);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary i { transition: transform var(--tempo) var(--curva); color: var(--ambar); flex-shrink: 0; }
.pergunta[open] summary i { transform: rotate(180deg); }
.pergunta p { padding: 0 var(--e-5) var(--e-5); color: var(--tinta-2); }

/* ---------- Chamada final ---------- */
.final { text-align: center; }
.final h2 { margin-bottom: var(--e-4); }
.final p { margin: 0 auto var(--e-6); font-size: var(--fs-apoio); color: var(--tinta-2); }
.final .lojas { justify-content: center; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--areia); border-top: 1px solid var(--linha); padding: var(--e-7) 0; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1) var(--e-5); margin-bottom: var(--e-4); }
.rodape-links a {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo-minimo);
  font-size: var(--fs-legenda); font-weight: var(--peso-forte); color: var(--noite); text-decoration: none;
}
.rodape-links a:hover { text-decoration: underline; }
.rodape-links .fa-whatsapp { color: var(--verde-escuro); }
.rodape .copyright { text-align: center; margin: 0 auto; font-size: var(--fs-legenda); color: var(--apagado); max-width: none; }

/* ---------- /esportes/ ---------- */
.pagina-topo { padding: var(--e-8) 0 var(--e-7); text-align: center; }
.pagina-topo h1 { font-size: var(--fs-h2); margin-bottom: var(--e-4); }
.pagina-topo p { margin: 0 auto; font-size: var(--fs-apoio); color: var(--tinta-2); }
.recursos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-5); }
.recurso { background: var(--areia); border-radius: var(--raio-m); padding: var(--e-5); }
.recurso i { color: var(--ambar); font-size: var(--fs-h3); margin-bottom: var(--e-3); display: block; }
.recurso h3 { font-size: var(--fs-apoio); margin-bottom: var(--e-2); }
.recurso p { color: var(--tinta-2); font-size: var(--fs-texto); }
.caso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: center; }
.caso h2 { margin-bottom: var(--e-4); }
.caso p { color: var(--tinta-2); }
.caso-lista { margin-top: var(--e-5); display: grid; gap: var(--e-2); }
.caso-lista li { display: flex; gap: var(--e-2); align-items: baseline; }
.caso-lista i { color: var(--verde-escuro); }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--raio-m); overflow: hidden; background: var(--noite); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.depoimentos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); margin-top: var(--e-7); }
.depoimento { background: var(--creme); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: var(--e-6); }
.depoimento-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); margin-bottom: var(--e-4); }
.depoimento-pessoa { display: flex; align-items: center; gap: var(--e-3); }
.depoimento-pessoa img { width: var(--e-8); height: var(--e-8); border-radius: var(--raio-pilula); object-fit: cover; }
.depoimento-nome { font-size: var(--fs-texto); font-weight: var(--peso-titulo); margin: 0; }
.depoimento-papel { font-size: var(--fs-legenda); color: var(--apagado); }
.depoimento-clube { height: var(--e-8); width: auto; max-width: calc(var(--e-10) + var(--e-6)); object-fit: contain; }
.depoimento > p { color: var(--tinta-2); font-style: italic; }
@media (max-width: 899px) {
  .recursos { grid-template-columns: 1fr 1fr; }
  .caso-grid, .depoimentos { grid-template-columns: 1fr; }
}
@media (max-width: 559px) { .recursos { grid-template-columns: 1fr; } }

/* ---------- /entrar/ ---------- */
.entrar { min-height: 60vh; display: flex; align-items: center; text-align: center; }
.entrar h1 { font-size: var(--fs-h2); margin-bottom: var(--e-4); }
.entrar p { margin: 0 auto var(--e-6); font-size: var(--fs-apoio); color: var(--tinta-2); }
.entrar .lojas { justify-content: center; }

/* ---------- Ícones e formas ---------- */
/* Selo: ícone dentro de um círculo. O ícone é sempre noite (ou creme na versão verde), nunca amarelo sobre claro. */
.selo {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--e-8); height: var(--e-8); border-radius: var(--raio-pilula);
  background: var(--sol-claro); color: var(--noite); font-size: var(--fs-h3);
  margin-bottom: var(--e-4);
}
.tempo .selo, .mudanca .selo { background: var(--creme); }
.selo--sol, .tempo .selo.selo--sol { background: var(--sol); color: var(--noite); }
.selo--verde { background: var(--verde); color: var(--noite); }
.selo--grande { width: var(--e-9); height: var(--e-9); font-size: var(--fs-h2); margin-bottom: var(--e-5); }
.faixa .selo { margin-bottom: var(--e-2); }

/* Traço amarelo sob os títulos de seção */
.secao-titulo::after, .porta h2::after, .final h2::after {
  content: ""; display: block; width: var(--e-7); height: var(--e-2);
  margin: var(--e-4) auto 0; border-radius: var(--raio-pilula); background: var(--sol);
}
.porta h2::after { margin-left: 0; }

/* Formas de fundo nas seções escuras */
.secao--noite { position: relative; overflow: hidden; }
.secao--noite > .wrap { position: relative; z-index: 1; }
.forma { position: absolute; border-radius: var(--raio-pilula); pointer-events: none; }
.forma--anel { width: calc(var(--e-10) * 3); aspect-ratio: 1; border: var(--e-6) solid var(--sol); opacity: 0.12; }
.forma--ponto { width: var(--e-9); aspect-ratio: 1; background: var(--verde); opacity: 0.35; }
.forma--canto-dir { top: calc(-1 * var(--e-10)); right: calc(-1 * var(--e-10)); }
.forma--canto-esq { bottom: calc(-1 * var(--e-5)); left: calc(-1 * var(--e-5)); }
.forma--canto-esq-baixo { bottom: calc(-1 * var(--e-10)); left: calc(-1 * var(--e-10)); }
.forma--canto-dir-alto { top: calc(-1 * var(--e-7)); right: 40%; }
@media (max-width: 767px) {
  .forma--anel { width: calc(var(--e-10) * 2); border-width: var(--e-5); }
  .forma--ponto { width: var(--e-8); }
  .forma--canto-dir-alto { right: calc(-1 * var(--e-6)); }
}

/* ---------- /support/ ---------- */
.suporte-topo { text-align: center; margin: 0 auto var(--e-7); }
.suporte-topo h1 { font-size: var(--fs-h2); margin-bottom: var(--e-4); }
.suporte-topo p { margin: 0 auto var(--e-4); font-size: var(--fs-apoio); color: var(--tinta-2); }
.suporte-wa {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo-minimo);
  font-weight: var(--peso-botao); color: var(--verde-escuro);
}
.formulario {
  max-width: calc(var(--e-10) * 5); margin: 0 auto; display: grid; gap: var(--e-5);
  background: var(--areia); border-radius: var(--raio-m); padding: var(--e-7);
}
.campo { display: grid; gap: var(--e-2); }
.campo label { font-size: var(--fs-legenda); font-weight: var(--peso-botao); color: var(--noite); }
.campo input, .campo select, .campo textarea {
  min-height: var(--alvo-minimo); padding: var(--e-3) var(--e-4);
  font: inherit; font-size: var(--fs-texto); color: var(--noite);
  background: var(--creme); border: 1px solid var(--borda); border-radius: var(--raio-p);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--apagado); }
.campo textarea { min-height: calc(var(--e-10) + var(--e-6)); resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--sol); outline-offset: 1px; border-color: var(--noite); }
.formulario .botao { width: 100%; margin-top: var(--e-2); }
.formulario .botao:disabled { opacity: 0.6; cursor: wait; }
.formulario-aviso {
  margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--raio-p);
  background: var(--verde-claro); color: var(--verde-escuro); font-weight: var(--peso-forte); text-align: center;
}
.formulario-aviso--erro { background: var(--creme); color: var(--recusa); border: 1px solid var(--recusa); }
.formulario-aviso[hidden] { display: none; }
@media (max-width: 559px) { .formulario { padding: var(--e-5); } }

/* ---------- /parceiros/ ---------- */
.nowrap { white-space: nowrap; }
.parceiros .botao .fa-whatsapp { font-size: var(--fs-apoio); }
.menu-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.sobretitulo--hero { margin-bottom: var(--e-5); }

.sobretitulo { font-size: var(--fs-legenda); font-weight: var(--peso-titulo); color: var(--ambar); margin: 0 0 var(--e-3); max-width: none; }
.sobretitulo--centro { text-align: center; }
.secao--noite .sobretitulo { color: var(--sol); }


.titulo-traco::after {
  content: ""; display: block; width: var(--e-7); height: var(--e-2);
  margin-top: var(--e-4); border-radius: var(--raio-pilula); background: var(--sol);
}

.parceiros .hero h1 { margin-bottom: var(--e-5); }
@media (min-width: 900px) { .parceiros .hero-grid { grid-template-columns: 1.25fr 1fr; } }
.canais { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.canais li {
  display: inline-flex; align-items: center; gap: var(--e-2);
  background: var(--areia); border-radius: var(--raio-pilula); padding: var(--e-2) var(--e-4);
  font-size: var(--fs-legenda); font-weight: var(--peso-botao); color: var(--noite);
}
.canais i { color: var(--verde-escuro); }
.parceiros .hero-acoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e-5); margin-bottom: var(--e-5); }
.parceiros .botao { gap: var(--e-2); }
.dica-preco { display: flex; align-items: center; gap: var(--e-3); font-weight: var(--peso-forte); color: var(--tinta-2); margin: 0; }
.selo--pequeno { width: var(--e-7); height: var(--e-7); font-size: var(--fs-texto); margin: 0; }

/* Vitrine da hero: as duas telas sobre um fundo areia com formas */
.vitrine {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: calc(var(--e-10) * 4 + var(--e-6));
  margin-left: auto; border-radius: var(--raio-m); background: var(--areia); overflow: hidden;
}
.vitrine::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: var(--raio-pilula); background: var(--sol); right: -14%; bottom: -16%; }
.vitrine::after { content: ""; position: absolute; width: var(--e-8); height: var(--e-8); border-radius: var(--raio-pilula); background: var(--verde); left: 8%; top: 40%; }
.tela { position: absolute; margin: 0; z-index: 1; border-radius: var(--raio-m); overflow: hidden; box-shadow: var(--sombra); border: 1px solid var(--linha); background: var(--creme); }
.tela img { width: 100%; }
.tela--web { right: 8%; top: 8%; width: 54%; }
.tela--wa { left: 8%; bottom: 8%; width: 40%; background: var(--noite); }
.aviso-flutuante {
  position: absolute; z-index: 2; left: 8%; top: 8%;
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4); border-radius: var(--raio-p);
  background: var(--creme); border: 1px solid var(--linha); box-shadow: var(--sombra);
  font-size: var(--fs-legenda); color: var(--noite); white-space: nowrap;
}
.ponto-vivo { width: var(--e-3); height: var(--e-3); border-radius: var(--raio-pilula); background: var(--verde); box-shadow: 0 0 0 var(--e-1) var(--verde-claro); flex: none; }
@media (max-width: 899px) { .vitrine { margin: 0 auto; } }
@media (max-width: 479px) { .aviso-flutuante { left: var(--e-3); right: var(--e-3); top: var(--e-3); white-space: normal; } }

/* Cartões genéricos */
.cartoes-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-5); }
.cartoes-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }
.cartao { background: var(--creme); border-radius: var(--raio-m); padding: var(--e-6); }
.cartao--areia { background: var(--areia); }
.cartao--areia .selo { background: var(--creme); }
.cartao h3 { margin-bottom: var(--e-3); }
.cartao p { color: var(--tinta-2); }
@media (max-width: 899px) { .cartoes-3 { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .cartoes-2 { grid-template-columns: 1fr; } .cartao { padding: var(--e-5); } }
.lista-ok { display: grid; gap: var(--e-3); }
.lista-ok li { display: flex; gap: var(--e-3); align-items: baseline; color: var(--tinta-2); }
.lista-ok i { color: var(--verde-escuro); flex-shrink: 0; }
.fluxo { margin: 0 0 var(--e-7); padding: 0; list-style: none; }
.selo--numero { font-weight: var(--peso-titulo); }

/* Como funciona (seção escura) */
.como-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-8); align-items: center; }
.como-grid h2 { margin-bottom: var(--e-6); }
.passos { counter-reset: passo; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-5); }
.passos li { counter-increment: passo; position: relative; padding-left: calc(var(--e-7) + var(--e-4)); }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  width: var(--e-7); height: var(--e-7); border-radius: var(--raio-pilula);
  background: var(--sol); color: var(--noite); font-weight: var(--peso-titulo);
  display: flex; align-items: center; justify-content: center;
}
.passos h3 { font-size: var(--fs-apoio); margin-bottom: var(--e-2); }
.passos p { color: var(--sobre-noite-apagado); }

.painel { margin: 0; background: var(--creme); color: var(--noite); border-radius: var(--raio-m); padding: var(--e-5); box-shadow: var(--sombra); }
.painel-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.ao-vivo { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-legenda); font-weight: var(--peso-botao); color: var(--verde-escuro); background: var(--verde-claro); padding: var(--e-1) var(--e-3); border-radius: var(--raio-pilula); }
.painel-titulo { font-weight: var(--peso-titulo); }
.painel-colunas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
.coluna { background: var(--areia); border-radius: var(--raio-p); padding: var(--e-2); display: grid; gap: var(--e-2); align-content: start; }
.coluna-nome { font-size: var(--fs-legenda); font-weight: var(--peso-botao); color: var(--tinta-2); margin: 0; display: flex; justify-content: space-between; gap: var(--e-1); }
.coluna-nome b { color: var(--noite); }
.coluna--ok { background: var(--verde-claro); }
.coluna--ok .coluna-nome, .coluna--ok .coluna-nome b { color: var(--verde-escuro); }
.ficha { background: var(--creme); border-radius: var(--raio-p); padding: var(--e-2); font-size: var(--fs-legenda); font-weight: var(--peso-botao); line-height: var(--lh-titulo); }
.ficha small { display: block; font-size: var(--fs-legenda); font-weight: var(--peso-texto); color: var(--apagado); margin-top: var(--e-1); }
.painel figcaption { font-size: var(--fs-legenda); color: var(--apagado); margin-top: var(--e-4); }
@media (max-width: 899px) { .como-grid { grid-template-columns: 1fr; gap: var(--e-7); } }
@media (max-width: 559px) { .painel-colunas { grid-template-columns: 1fr 1fr; } }

/* Vantagens */
.vantagens { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-5); }
.vantagem { background: var(--creme); border-radius: var(--raio-m); padding: var(--e-5); }
.vantagem h3 { font-size: var(--fs-apoio); margin-bottom: var(--e-2); }
.vantagem h3 i { display: block; color: var(--verde-escuro); margin-bottom: var(--e-2); }
.vantagem p { color: var(--tinta-2); font-size: var(--fs-texto); }
.vantagem a { color: var(--noite); font-weight: var(--peso-botao); }
.vantagem--forte { background: var(--sol); }
.vantagem--forte p { color: var(--noite); }
.vantagem .vantagem-grande { font-size: var(--fs-h3); font-weight: var(--peso-titulo); line-height: var(--lh-titulo); margin-bottom: var(--e-2); }
@media (max-width: 1099px) { .vantagens { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .vantagens { grid-template-columns: 1fr; } }

/* Selo oficial */
.oficial-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--e-8); align-items: center; }
.oficial-selo { width: calc(var(--e-10) * 2 + var(--e-8)); }
.oficial-grid h2 { margin-bottom: var(--e-5); }
.oficial-texto { color: var(--tinta-2); margin-bottom: var(--e-5); }
@media (max-width: 899px) {
  .oficial-grid { grid-template-columns: 1fr; gap: var(--e-6); }
  .oficial-selo { margin: 0 auto; width: min(70%, calc(var(--e-10) * 2)); }
}

/* Chamada final (seção escura) */
.chamada { text-align: center; }
.chamada h2 { margin: 0 auto var(--e-4); max-width: 24ch; }
.chamada p { margin: 0 auto var(--e-6); font-size: var(--fs-apoio); color: var(--sobre-noite-apagado); }

/* Rodapé com as lojas */
.rodape-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-4); margin-bottom: var(--e-5); }
.rodape-app p { margin: 0; font-weight: var(--peso-forte); }