/* O site do Lino.
 *
 * As cores são as do app, uma a uma, de `composeApp/.../ui/Theme.kt` — o site e o produto
 * precisam ser a mesma coisa à primeira vista. A fonte é servida daqui mesmo, e não do Google:
 * a política de privacidade diz que não há rastreamento, e uma fonte externa entrega o endereço
 * de cada visitante a terceiros.
 */

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 900;
  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 {
  --sol: #FFCC42;
  --mel: #FFB052;
  --manga: #FF8C33;
  --folha: #66C43D;
  --ceu: #4D8FFF;
  --uva: #6E5CF2;
  --coral: #F55C5C;
  --menta: #29B87A;
  --tinta: #5C3612;
  --tinta-suave: rgba(92, 54, 18, .66);
  --creme: #FFF7E5;
  --madeira: #6B4423;
  --chao: #F2D18C;
  --chao-fundo: #E0B56B;
  /* O verde do Lino comemorando, medido do WebP renderizado pelo navegador — é ele que faz a
     animação não parecer um quadrinho colado num fundo de outra cor. Ver `lino.js`. */
  --verde-festa: #1B3F33;  /* o canto de img/lino-festa.webp, medido no navegador */

  --raio: 26px;
  --sombra: 0 18px 50px rgba(92, 54, 18, .16);
  --sombra-leve: 0 8px 24px rgba(92, 54, 18, .10);
  --margem: clamp(20px, 5vw, 64px);
  --largura: 1180px;
  --suave: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font: 17px/1.6 "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.08; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }

.pular {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--tinta); color: var(--creme); padding: 10px 16px; border-radius: 12px;
  text-decoration: none; font-weight: 800; transition: top .2s;
}
.pular:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--uva); outline-offset: 3px; border-radius: 10px; }

/* ───────────── Aparições (ver lino.js) ─────────────
   Sem JavaScript, nada fica escondido. Com ele, o que entra animado começa invisível — e se o
   script não rodar em 2,5 s, tudo aparece mesmo assim: página escondida é pior que página parada. */
.js .revela, .js .entra, .js [data-placa], .js [data-bicho],
.js .celular, .js .heroi-lino, .js .flutua, .js .heroi-sol { opacity: 0; }
.js:not(.motion-pronto) .revela,
.js:not(.motion-pronto) .entra,
.js:not(.motion-pronto) [data-placa],
.js:not(.motion-pronto) [data-bicho],
.js:not(.motion-pronto) .celular,
.js:not(.motion-pronto) .heroi-lino,
.js:not(.motion-pronto) .heroi-sol { animation: aparece-ja .4s 2.5s forwards; }
/* Os adesivos já têm a animação de flutuar; a rede de segurança deles entra junto dela. */
.js:not(.motion-pronto) .flutua { animation: aparece-ja .4s 2.5s forwards, flutua 5s ease-in-out 2.9s infinite; }
@keyframes aparece-ja { to { opacity: 1; } }

/* ───────────── Botões ───────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: inherit; font-weight: 800; font-size: 16px; text-decoration: none;
  transition: transform .2s var(--suave), box-shadow .2s, background .2s;
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.98); }
.botao-escuro { background: var(--tinta); color: var(--creme); box-shadow: 0 6px 18px rgba(92,54,18,.25); }
.botao-sol { background: var(--sol); color: var(--tinta); box-shadow: 0 8px 22px rgba(255,204,66,.35); }
.botao-contorno { border: 2px solid rgba(255,247,229,.5); color: var(--creme); }
.botao-contorno:hover { border-color: var(--creme); }
.botao-pequeno { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* ───────────── Topo ───────────── */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding: 12px var(--margem);
  transition: background .3s, box-shadow .3s, padding .3s;
}
.topo.rolou {
  background: rgba(255, 247, 229, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(92,54,18,.08), 0 10px 30px rgba(92,54,18,.06);
  padding-top: 8px; padding-bottom: 8px;
}
.topo-nav { max-width: var(--largura); margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.marca img:first-child { border-radius: 50%; box-shadow: 0 3px 10px rgba(92,54,18,.2); }
.marca-nome { width: 74px; height: auto; }
.topo-links { display: flex; gap: 26px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.topo-links a { text-decoration: none; font-weight: 700; font-size: 15px; color: var(--tinta-suave); transition: color .2s; }
.topo-links a:hover { color: var(--tinta); }

/* ───────────── Herói ───────────── */
.heroi {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 120px var(--margem) 90px;
  min-height: min(100svh, 940px);
  display: flex; align-items: center;
  background: linear-gradient(180deg, #FFE9B0 0%, var(--sol) 34%, var(--mel) 68%, var(--manga) 100%);
}
.heroi-ceu { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.heroi-sol { position: absolute; right: 8%; top: 92px; width: clamp(110px, 13vw, 170px); filter: drop-shadow(0 0 40px rgba(255,255,255,.55)); }
.heroi-colinas { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 220px; }

.heroi-conteudo {
  width: 100%; max-width: var(--largura); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr 1fr; gap: 40px; align-items: center;
}

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 247, 229, .72); font-weight: 800; font-size: 14px;
  box-shadow: var(--sombra-leve);
}
.heroi h1 {
  margin: 22px 0 20px;
  font-size: clamp(44px, 5.5vw, 84px); font-weight: 900; letter-spacing: -.025em;
}
.destaque { position: relative; display: inline-block; padding: 0 .14em; margin: 0 -.04em; }
.destaque::before {
  content: ""; position: absolute; inset: .1em -.02em .02em; z-index: -1;
  background: var(--creme); border-radius: .2em; transform: rotate(-2.2deg);
  box-shadow: 0 6px 0 rgba(92, 54, 18, .12);
}
.destaque em { font-style: italic; color: var(--manga); }
.heroi-sub { max-width: 34ch; font-size: clamp(17px, 1.5vw, 20px); color: rgba(92,54,18,.82); }

.lojas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.loja {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 56px; padding: 6px 20px; border-radius: 16px;
  background: var(--tinta); color: var(--creme); text-decoration: none;
  box-shadow: 0 8px 22px rgba(92,54,18,.25);
  transition: transform .2s var(--suave);
}
.loja:hover { transform: translateY(-2px); }
.loja-quando { font-size: 12px; font-weight: 700; opacity: .7; line-height: 1.1; }
.loja-nome { font-size: 19px; font-weight: 900; line-height: 1.15; }

.fatos { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 28px 0 0; font-size: 15px; color: rgba(92,54,18,.8); }
.fatos strong { color: var(--tinta); font-weight: 900; }

/* O palco: o Lino, o celular e os adesivos que flutuam em volta. */
.heroi-palco { position: relative; display: grid; place-items: center end; min-height: 620px; padding-right: 3%; }
.heroi-lino {
  position: absolute; left: 0; bottom: -18px; z-index: 1;
  width: clamp(190px, 21vw, 280px);
  filter: drop-shadow(0 18px 30px rgba(92,54,18,.28));
}

.celular {
  position: relative; z-index: 2;
  width: 292px; aspect-ratio: 9 / 19.2; padding: 11px;
  border-radius: 46px; background: #2A1A0C;
  box-shadow: 0 40px 80px rgba(92,54,18,.38), inset 0 0 0 2px rgba(255,255,255,.08);
}
.celular-tela {
  position: relative; height: 100%; overflow: hidden; border-radius: 36px;
  background: #1a1a1a;
}
.cena {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, #7A4AC8 0%, #E0688A 48%, #FFB052 100%);
}
.cena-sol { position: absolute; left: 50%; top: 30%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); }
.cena-emoji { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-size: 96px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.25)); animation: respira 6s ease-in-out infinite; }
@keyframes respira { 50% { transform: translate(-50%, -50%) scale(1.07) rotate(-3deg); } }

.canal {
  position: absolute; left: 16px; top: 40px; z-index: 2;
  color: #fff; font-weight: 800; font-size: 14px; text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.trilho { position: absolute; right: 10px; bottom: 132px; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.trilho-botao { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.trilho-botao svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(0,0,0,.42); fill: #fff; }
.trilho-botao b { font-size: 10px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

.legenda {
  position: absolute; left: 12px; right: 58px; bottom: 54px; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ficha {
  appearance: none; border: 0; cursor: pointer;
  padding: 6px 10px; border-radius: 10px;
  background: #FFF4DE; color: var(--tinta);
  font: inherit; font-weight: 800; font-size: 18px; line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: background .18s, transform .18s var(--suave), color .18s;
}
.ficha.dita { background: var(--sol); transform: translateY(-2px); }
.ficha.tocada { background: var(--manga); color: #fff; }
.ficha:hover { transform: translateY(-2px); }
span.ficha { cursor: default; }            /* a legenda parada, de quem está sem JavaScript */
span.ficha:hover { transform: none; }

.balao {
  position: absolute; z-index: 4; left: 0; bottom: 0;
  padding: 10px 14px; border-radius: 16px;
  background: var(--creme); color: var(--tinta);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; white-space: nowrap;
  transform-origin: 50% 100%;
}
.balao::after {
  content: ""; position: absolute; left: var(--bico, 50%); bottom: -7px;
  width: 14px; height: 14px; margin-left: -7px; background: var(--creme); transform: rotate(45deg); border-radius: 3px;
}
.balao small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.balao strong { font-size: 18px; font-weight: 900; }

.pontinhos { position: absolute; left: 16px; bottom: 26px; z-index: 2; display: flex; gap: 5px; }
.pontinhos i { width: 8px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); }
.pontinhos i.ativo { width: 22px; background: var(--sol); }

.flutua {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 16px;
  background: var(--creme); box-shadow: var(--sombra);
  font-weight: 800; font-size: 14px; white-space: nowrap;
  animation: flutua 5s ease-in-out infinite;
}
.flutua b { color: var(--manga); }
.flutua-ofensiva { right: 0; top: 74px; animation-delay: -1.2s; }
.flutua-salva { left: 4%; top: 120px; }
.flutua-salva img { border-radius: 50%; }
.flutua-salva span { display: flex; flex-direction: column; line-height: 1.15; }
.flutua-salva b { font-size: 13px; color: var(--tinta-suave); font-weight: 700; }
/* `translate` e `rotate` individuais, e não `transform`: o Motion anima o `transform` na
   entrada, e os dois na mesma propriedade fariam um apagar o outro. */
@keyframes flutua { 50% { translate: 0 -9px; rotate: -1deg; } }

/* ───────────── Seções ───────────── */
.secao { padding: clamp(80px, 11vw, 140px) var(--margem); max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; }
.sobretitulo { font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--manga); }
.secao h2 { margin-top: 12px; font-size: clamp(34px, 4.6vw, 58px); font-weight: 900; max-width: 18ch; }
.secao h2 em { font-style: italic; color: var(--manga); }
.secao-sub { margin-top: 18px; max-width: 56ch; font-size: 18px; color: var(--tinta-suave); }

/* Como funciona */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 54px 0 0; }
.passo {
  position: relative; padding: 26px; border-radius: var(--raio);
  background: #fff; box-shadow: var(--sombra-leve);
}
.passo-num {
  position: absolute; top: -16px; left: 22px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--tinta); color: var(--sol); font-weight: 900;
}
.passo h3 { margin-top: 18px; font-size: 26px; font-weight: 900; }
.passo p { margin-top: 8px; color: var(--tinta-suave); }
.passo-arte {
  position: relative; height: 150px; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #7A4AC8, #E0688A 55%, #FFB052);
}
.mini-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 0 14px; }
.mini-legenda span { padding: 4px 8px; border-radius: 8px; background: #FFF4DE; font-weight: 800; font-size: 15px; }
.mini-legenda .acesa { background: var(--sol); }
.mini-legenda .tocada { background: var(--manga); color: #fff; }
.mini-balao { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 12px; background: var(--creme); font-weight: 900; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.mini-cartao { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 34px; border-radius: 18px; background: var(--creme); box-shadow: 0 12px 24px rgba(0,0,0,.22); transform: rotate(-3deg); }
.mini-cartao-en { font-size: 28px; font-weight: 900; }
.mini-cartao-pt { font-size: 15px; font-weight: 700; color: var(--tinta-suave); }

/* ───────────── O safári ───────────── */
.safari { max-width: none; padding-left: 0; padding-right: 0; background: linear-gradient(180deg, var(--creme) 0%, var(--chao) 14%, var(--chao) 62%, var(--chao-fundo) 84%, var(--creme) 100%); }
.safari-cabeca { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); text-align: center; }
.safari-cabeca h2 { margin-left: auto; margin-right: auto; }
.safari-cabeca .secao-sub { margin-left: auto; margin-right: auto; }

.estrada { position: relative; max-width: 1040px; margin: 70px auto 0; padding: 0 var(--margem); }
.estrada-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }

/* Cada parada é uma linha de três colunas: placa, estrada, bicho — e nas pares o contrário. A
   estrada corre pela coluna do meio, que fica vazia de propósito: assim ela nunca passa por
   cima de uma placa ou de um bicho, em qualquer largura de tela. */
.paradas { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; display: grid; gap: 46px; }
.parada { display: grid; grid-template-columns: 1fr 170px 1fr; align-items: center; min-height: 150px; }
.placa {
  grid-column: 1; justify-self: end; width: min(100%, 360px);
  padding: 20px 24px; border-radius: 22px;
  background: var(--madeira); color: #fff;
  box-shadow: 0 16px 34px rgba(92,54,18,.28), inset 0 -4px 0 rgba(0,0,0,.18);
}
.bicho {
  grid-column: 3; justify-self: start; margin-left: 10%;
  height: clamp(84px, 10vw, 132px); width: auto;
  filter: drop-shadow(0 10px 12px rgba(92,54,18,.25));
}
.parada:nth-child(even) .placa { grid-column: 3; grid-row: 1; justify-self: start; }
.parada:nth-child(even) .bicho { grid-column: 1; grid-row: 1; justify-self: end; margin: 0 10% 0 0; scale: -1 1; }
.placa .nivel { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sol); color: var(--tinta); font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.placa h3 { margin-top: 10px; font-size: 24px; font-weight: 900; }
.placa p { margin-top: 4px; color: rgba(255,255,255,.78); font-size: 15px; }
.parada-fim .placa { background: linear-gradient(135deg, var(--madeira), #4A2E14); }
.parada-fim .placa .nivel { background: var(--folha); color: #fff; }
.parada-fim .bicho { height: clamp(120px, 14vw, 180px); }

/* ───────────── Números ───────────── */
.numeros { padding-top: 70px; padding-bottom: 70px; }
.numeros-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.numero { padding: 26px 22px; border-radius: var(--raio); background: #fff; box-shadow: var(--sombra-leve); text-align: center; }
.numero strong { display: block; font-size: clamp(38px, 4.4vw, 56px); font-weight: 900; color: var(--manga); font-variant-numeric: tabular-nums; line-height: 1; }
.numero span { display: block; margin-top: 8px; font-weight: 700; color: var(--tinta-suave); }

/* ───────────── Por que ───────────── */
.sublinha { position: relative; white-space: nowrap; }
.sublinha::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .22em; z-index: -1; background: var(--sol); border-radius: .1em; transform-origin: 0 50%; }
.principios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 54px; }
.principio { padding: 30px 28px; border-radius: var(--raio); background: linear-gradient(180deg, #fff, #FFFBF1); box-shadow: var(--sombra-leve); }
.principio-icone { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: rgba(255, 204, 66, .3); font-size: 28px; }
.principio h3 { margin-top: 18px; font-size: 22px; font-weight: 900; }
.principio p { margin-top: 10px; color: var(--tinta-suave); }

/* ───────────── Seu dia ───────────── */
.dia-grade { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 34px; align-items: center; margin-top: 54px; }
.tela-app { margin: 0; }
.moldura { padding: 9px; border-radius: 38px; background: #2A1A0C; box-shadow: var(--sombra); max-width: 280px; margin: 0 auto; }
.moldura img { border-radius: 30px; width: 100%; }
.tela-app figcaption { margin: 16px auto 0; max-width: 280px; font-size: 15px; color: var(--tinta-suave); text-align: center; }
.tela-app figcaption strong { display: block; color: var(--tinta); font-size: 17px; }
.dia-linha { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 3px dashed rgba(255, 140, 51, .45); display: grid; gap: 34px; }
.dia-linha li { position: relative; }
.dia-linha li::before { content: ""; position: absolute; left: -36px; top: 6px; width: 17px; height: 17px; border-radius: 50%; background: var(--manga); box-shadow: 0 0 0 5px var(--creme); }
.hora { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--manga); }
.dia-linha h3 { margin-top: 4px; font-size: 21px; font-weight: 900; }
.dia-linha p { margin-top: 4px; color: var(--tinta-suave); font-size: 16px; }

/* ───────────── Recursos ───────────── */
.recursos-grade { list-style: none; margin: 54px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.recurso { padding: 26px; border-radius: var(--raio); background: #fff; box-shadow: var(--sombra-leve); transition: transform .3s var(--suave), box-shadow .3s; }
.recurso:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.recurso svg { width: 50px; height: 50px; padding: 12px; border-radius: 16px; fill: #fff; background: var(--cor); }
.recurso h3 { margin-top: 16px; font-size: 20px; font-weight: 900; }
.recurso p { margin-top: 6px; color: var(--tinta-suave); font-size: 16px; }

/* ───────────── Perguntas ───────────── */
.faq { margin-top: 44px; display: grid; gap: 12px; max-width: 820px; }
.faq details { border-radius: 20px; background: #fff; box-shadow: var(--sombra-leve); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 22px; font-weight: 800; font-size: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,204,66,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2zM5 11h14v2H5z' fill='%235C3612'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform .3s var(--suave), background-color .3s;
}
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--sol); }
.faq details p { padding: 0 22px 20px; color: var(--tinta-suave); }
.faq details a { color: var(--manga); font-weight: 800; }

/* ───────────── Convite ───────────── */
.convite { padding: 40px var(--margem) clamp(80px, 10vw, 120px); }
.convite-cartao {
  max-width: var(--largura); margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px); border-radius: 40px;
  background: var(--verde-festa); color: var(--creme);
  box-shadow: 0 30px 70px rgba(28, 63, 51, .35);
  overflow: hidden;
}
.convite-lino { width: clamp(180px, 24vw, 300px); }
.convite h2 { font-size: clamp(32px, 4.2vw, 54px); font-weight: 900; }
.convite p { margin-top: 14px; max-width: 42ch; font-size: 18px; color: rgba(255,247,229,.78); }
.convite-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ───────────── Rodapé ───────────── */
.rodape { background: #3A220E; color: rgba(255,247,229,.8); padding: 48px var(--margem) 36px; }
.rodape-topo { max-width: var(--largura); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }
.rodape .marca-nome { filter: brightness(0) invert(.96) sepia(.2); }
.rodape nav ul, .rodape-redes { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.rodape nav { margin-left: auto; }
.rodape a { text-decoration: none; font-weight: 700; font-size: 15px; transition: color .2s; }
.rodape a:hover { color: var(--sol); }
.rodape-redes { padding-left: 22px; border-left: 1px solid rgba(255,247,229,.18); }
.rodape-legal { max-width: var(--largura); margin: 30px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,247,229,.12); font-size: 13px; color: rgba(255,247,229,.55); }

/* ───────────── Telas menores ───────────── */
@media (max-width: 1020px) {
  .heroi-conteudo { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .heroi-texto { display: flex; flex-direction: column; align-items: center; }
  .heroi-sub { margin: 0 auto; }
  .lojas, .fatos { justify-content: center; }
  .heroi-palco { min-height: 620px; place-items: center; padding-right: 0; }
  .heroi-lino { left: max(0px, calc(50% - 300px)); }
  .passos, .principios { grid-template-columns: 1fr; max-width: 560px; }
  .recursos-grade { grid-template-columns: repeat(2, 1fr); }
  .numeros-lista { grid-template-columns: repeat(2, 1fr); }
  .dia-grade { grid-template-columns: 1fr 1fr; }
  .dia-linha { grid-column: 1 / -1; grid-row: 1; max-width: 560px; }
  /* Abaixo de ~1000px as redes não cabem na linha do menu; numa linha própria o divisor
     sobraria sozinho no começo dela. */
  .rodape-redes { flex-basis: 100%; justify-content: flex-end; padding-left: 0; border-left: 0; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .topo-links { display: none; }
  .topo-nav .botao { margin-left: auto; }
  .heroi { padding-top: 104px; padding-bottom: 60px; min-height: auto; }
  .heroi-sol { right: -20px; top: 70px; width: 110px; opacity: .85; }
  .heroi h1 { margin-top: 16px; }
  .heroi-palco { min-height: 560px; margin-top: 10px; }
  .celular { width: 258px; }
  /* Não cabe ao lado do celular: ficaria atrás dele, com só a orelha e as patas de fora. Ele
     aparece de novo no fim do safári e no convite. */
  .heroi-lino { display: none; }
  .flutua { font-size: 12px; padding: 8px 11px; }
  .flutua-ofensiva { right: -6px; top: 30px; }
  .flutua-salva { left: -6px; top: 60px; }
  .ficha { font-size: 16px; padding: 5px 8px; }

  .recursos-grade { grid-template-columns: 1fr; }
  .dia-grade { grid-template-columns: 1fr; }
  .dia-linha { grid-row: auto; }

  /* No celular a estrada corre pela esquerda e as placas ficam todas à direita dela. */
  .estrada { margin-top: 50px; }
  .paradas { gap: 26px; }
  .parada { grid-template-columns: 62px 1fr; min-height: 0; }
  .placa, .parada:nth-child(even) .placa { grid-column: 2; grid-row: 1; justify-self: stretch; width: 100%; }
  .bicho, .parada:nth-child(even) .bicho { display: none; }

  .convite-cartao { grid-template-columns: 1fr; text-align: center; justify-items: center; border-radius: 32px; }
  .convite p { margin-left: auto; margin-right: auto; }
  .convite-botoes { justify-content: center; }

  .rodape nav { margin-left: 0; }
  .rodape-redes { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .flutua, .cena-emoji { animation: none; }
  .botao, .loja, .recurso, .ficha { transition: none; }
}