/*
 * Publiqueme — página inicial (computador, tablet e celular). Conceito "Estúdio Violeta": a página tem a luz do
 * set da apresentação (parede lavanda, luz violeta, abajur laranja). Cenas de noite (vídeo, emoção)
 * se alternam com cenas de dia (papel lilás, informação); cada passagem é um corte de cinema.
 */
:root {
  --fonte-titulo: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --fonte-texto: "Plus Jakarta Sans", system-ui, sans-serif;
  --fonte-acento: "Instrument Serif", Georgia, serif;

  /* noite */
  --noite-0: #0a0714; --noite-1: #120a24; --noite-2: #1b1233; --noite-3: #261a47;
  --linha-noite: rgba(233, 228, 255, 0.12); --linha-noite-forte: rgba(233, 228, 255, 0.22);
  --luz-1: #f7f5ff; --luz-2: #c9c3dc; --luz-3: #9c96b0;
  /* dia */
  --papel-0: #ffffff; --papel-1: #f7f4ff; --papel-2: #eee8ff; --papel-3: #e3daff;
  --linha-papel: rgba(18, 10, 36, 0.1); --linha-papel-forte: rgba(18, 10, 36, 0.18);
  --tinta-1: #120a24; --tinta-2: #4b4560; --tinta-3: #6b6580;
  /* violeta */
  --violeta-50: #f4f0ff; --violeta-100: #e8e0ff; --violeta-200: #d2c4ff; --violeta-300: #b7a2ff; --violeta-400: #9a80fa;
  --violeta-500: #7b5ef0; --violeta-600: #5b3fd0; --violeta-700: #4c31b8; --violeta-800: #3a2491; --violeta-900: #24165e;
  /* laranja (pontuação) e verde (só "pagamento protegido") */
  --laranja-300: #ffb27a; --laranja-500: #f97316; --laranja-700: #b23b0a; --verde-300: #5ee0a8; --verde-600: #087a4f;
  /* gradientes, brilhos e véus */
  --grad-marca: linear-gradient(135deg, #9d2cff 0%, #7547f5 52%, #486dff 100%);
  --grad-texto-noite: linear-gradient(100deg, #e8e0ff 0%, #b7a2ff 50%, #93a6ff 100%);
  --halo-violeta: radial-gradient(45% 45% at 50% 50%, rgba(123, 94, 240, 0.28), transparent 70%);
  --halo-laranja: radial-gradient(35% 35% at 50% 50%, rgba(249, 115, 22, 0.22), transparent 70%);
  --brilho-violeta: 0 24px 80px -16px rgba(123, 94, 240, 0.55);
  --veu-esquerda: linear-gradient(90deg, rgba(10, 7, 20, 0.94) 0%, rgba(10, 7, 20, 0.88) 40%, rgba(10, 7, 20, 0.5) 52%, rgba(10, 7, 20, 0) 62%);
  --veu-topo: linear-gradient(180deg, rgba(10, 7, 20, 0.72) 0, rgba(10, 7, 20, 0) 160px);
  --veu-base: linear-gradient(0deg, rgba(10, 7, 20, 0.9) 0%, rgba(10, 7, 20, 0) 30%);
  --vinheta: radial-gradient(130% 100% at 68% 42%, transparent 50%, rgba(10, 7, 20, 0.5) 100%);
  --veu-cartao: linear-gradient(0deg, rgba(10, 7, 20, 0.72) 0%, rgba(10, 7, 20, 0) 48%);
  /* sombras (só no dia) */
  --sombra-1: 0 1px 2px rgba(18, 10, 36, 0.05), 0 6px 16px -6px rgba(18, 10, 36, 0.08);
  --sombra-2: 0 2px 6px rgba(18, 10, 36, 0.05), 0 24px 48px -16px rgba(18, 10, 36, 0.18);
  --sombra-3: 0 40px 100px -30px rgba(36, 22, 94, 0.4), 0 16px 40px -20px rgba(18, 10, 36, 0.22);
  --sombra-folha: 0 -30px 80px rgba(10, 7, 20, 0.35);
  /* movimento */
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cena: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* grade */
  --margem: clamp(40px, 5vw, 96px);
  --calha: clamp(20px, 1.67vw, 32px);
  --secao-y: clamp(128px, 10vw, 192px);
  --topo: 72px;
}

body { background: var(--noite-0); color: var(--tinta-1); font: 400 clamp(1rem, calc(0.156vw + 14px), 1.0625rem) / 1.6 var(--fonte-texto); }
::selection { background: var(--violeta-600); color: #fff; }
:focus-visible { outline: 2px solid var(--violeta-600); outline-offset: 3px; border-radius: 6px; }
.noite :focus-visible, .hero :focus-visible, .final :focus-visible, .rodape :focus-visible, .teatro :focus-visible { outline-color: #cdbeff; }
.envoltorio { width: 100%; max-width: calc(1600px + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.dia { background: var(--papel-1); color: var(--tinta-1); }
.noite { background: var(--noite-1); color: var(--luz-1); }

/* ------------------------------------------------------------ tipografia */
.h2, .h3, .letreiro, .final-titulo, .lancamento-titulo { font-family: var(--fonte-titulo); font-optical-sizing: auto; text-wrap: balance; }
.h2 { font-weight: 650; font-stretch: 90%; font-size: clamp(3rem, 3.75vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.h3 { font-weight: 600; font-stretch: 95%; font-size: clamp(1.75rem, calc(1.875vw + 4px), 2.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.h4 { font: 700 clamp(1.25rem, calc(0.625vw + 12px), 1.5rem) / 1.25 var(--fonte-texto); letter-spacing: -0.01em; }
.abertura-texto { font-size: clamp(1.125rem, calc(0.47vw + 12px), 1.3125rem); line-height: 1.5; letter-spacing: -0.005em; color: var(--tinta-2); text-wrap: pretty; max-width: 34em; }
.noite .abertura-texto, .final .abertura-texto { color: var(--luz-2); }
.legenda { font: 500 13px/1.45 var(--fonte-texto); letter-spacing: 0.005em; color: var(--tinta-3); }
.noite .legenda { color: var(--luz-3); }
.acento { font-family: var(--fonte-acento); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -0.01em; font-size: 1.08em; }
.ponto { color: var(--laranja-500); }
.olho { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 700 12px/1.2 var(--fonte-texto); letter-spacing: 0.18em; text-transform: uppercase; color: var(--violeta-600); }
.olho::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--laranja-500); flex: none; }
.noite .olho { color: var(--violeta-300); }
.olho--laranja, .noite .olho--laranja { color: var(--laranja-300); }
.olho--laranja-dia { color: var(--laranja-700); }

/* ------------------------------------------------------------ botões e pílulas */
.botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; font: 700 16px/1 var(--fonte-texto); letter-spacing: -0.005em; white-space: nowrap; transition: background-color 0.28s var(--ease-ui), border-color 0.28s var(--ease-ui), box-shadow 0.28s var(--ease-ui), transform 0.28s var(--ease-ui), color 0.16s; }
.botao:active { transform: scale(0.98); }
.botao .seta { width: 16px; height: 16px; flex: none; }
.botao:hover .seta, .link-discreto:hover .seta { animation: seta-troca 0.5s var(--ease-ui); }
@keyframes seta-troca { 0% { transform: none; } 45% { transform: translateX(14px); opacity: 0; } 46% { transform: translateX(-14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.botao--primario { color: #fff; background: var(--violeta-600); box-shadow: 0 10px 30px -8px rgba(91, 63, 208, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.botao--primario:hover { background: var(--violeta-700); box-shadow: 0 16px 40px -8px rgba(91, 63, 208, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.botao--noite { color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(233, 228, 255, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.botao--noite:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(233, 228, 255, 0.32); }
.botao--dia { color: var(--tinta-1); background: #fff; border: 1px solid var(--linha-papel-forte); }
.botao--dia:hover { border-color: rgba(123, 94, 240, 0.45); background: var(--violeta-50); }
.botao--branco { color: var(--tinta-1); background: #fff; box-shadow: 0 16px 40px -12px rgba(10, 7, 20, 0.5); }
.botao--branco:hover { background: var(--violeta-50); }
.botao--p { height: 40px; padding: 0 18px; font-size: 14px; }
.botao:not([data-magnetico]):hover { transform: translateY(-2px); }
.link-discreto { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1.3 var(--fonte-texto); color: var(--violeta-600); background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 calc(100% + 1px); background-size: 0% 2px; padding-bottom: 5px; transition: background-size 0.45s var(--ease-ui); }
.link-discreto:hover { background-size: 100% 2px; }
.link-discreto .seta { width: 16px; height: 16px; }
.noite .link-discreto, .hero .link-discreto { color: var(--violeta-300); }
.link-discreto--laranja { color: var(--laranja-700); }
.noite .link-discreto--laranja, .hero .link-discreto--laranja, .final .link-discreto--laranja { color: var(--laranja-300); }
.botao-icone { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(233, 228, 255, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 0.28s var(--ease-ui), transform 0.28s var(--ease-ui); }
.botao-icone:hover { background: rgba(255, 255, 255, 0.16); }
.botao-icone svg { width: 18px; height: 18px; }
.botao-icone--dia { color: var(--tinta-1); background: #fff; border-color: var(--linha-papel-forte); box-shadow: var(--sombra-1); }
.botao-icone--dia:hover { background: var(--violeta-50); }
.botao-icone .icone-tocar, .botao-icone.pausado .icone-pausar { display: none; }
.botao-icone.pausado .icone-tocar { display: block; }
.chip--vidro { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font: 700 11.5px/1 var(--fonte-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.etiqueta { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font: 800 11px/1 var(--fonte-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(10, 7, 20, 0.45); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.selo-breve { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 800 10.5px/1 var(--fonte-texto); letter-spacing: 0.12em; text-transform: uppercase; color: var(--laranja-700); background: rgba(249, 115, 22, 0.12); border: 1px solid rgba(249, 115, 22, 0.3); }
.noite .selo-breve { color: var(--laranja-300); background: rgba(249, 115, 22, 0.16); }
.escudo { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--fonte-texto); color: var(--verde-600); }
.noite .escudo { color: var(--verde-300); }
.escudo svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------ menu fixo (nunca se esconde) */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 80; color: #fff; border-bottom: 1px solid transparent; transition: background-color 0.35s var(--ease-ui), color 0.35s var(--ease-ui), border-color 0.35s, opacity 0.3s; }
.topo[data-tema="dia"] { color: var(--tinta-1); background: rgba(251, 250, 255, 0.78); border-bottom-color: var(--linha-papel); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.topo[data-tema="noite"], .topo[data-tema="violeta"] { background: rgba(10, 7, 20, 0.6); border-bottom-color: rgba(233, 228, 255, 0.08); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.topo-barra { max-width: calc(1600px + 2 * var(--margem)); margin: 0 auto; height: var(--topo); padding: 0 var(--margem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.topo-esquerda { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca-icone { width: 32px; height: 32px; flex: none; }
.marca-nome { font: 800 22px/1 var(--fonte-texto); letter-spacing: -0.035em; }
.marca-ponto { color: var(--laranja-500); }
.topo[data-tema="dia"] .marca-icone { --anel-marca: var(--papel-1); }
.topo:not([data-tema="dia"]) .marca-icone, .rodape .marca-icone { --anel-marca: #0a0714; }
.topo-menu { display: flex; gap: 30px; }
.topo-menu a { position: relative; font: 600 15px/1 var(--fonte-texto); opacity: 0.82; transition: opacity 0.16s; padding: 8px 0; }
.topo-menu a::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--laranja-500); transform: scale(0); transition: transform 0.4s var(--ease-mola); }
.topo-menu a:hover, .topo-menu a.ativo { opacity: 1; }
.topo-menu a.ativo::after { transform: scale(1); }
.topo-acoes { justify-self: end; display: flex; align-items: center; gap: 22px; }
.topo-entrar { font: 600 15px/1 var(--fonte-texto); opacity: 0.85; }
.topo-entrar:hover { opacity: 1; }
body.com-teatro .topo { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ 1. topo: os criadores em fileiras atrás do texto */
.hero { position: relative; height: 100svh; min-height: 720px; max-height: 1000px; background: var(--noite-0); color: #fff; overflow: hidden; }
.cena { position: relative; height: 100%; transform-origin: 50% 100%; }
.hero .cena { position: absolute; inset: 0; }
/* véu LEVE (dono, 03/10/2026: "estranho, escuro, os criadores quase não aparecem"): só um gradiente atrás do bloco de
   texto, no máximo 60%; quem garante a leitura é a sombra larga do texto */
.hero-veus { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 7, 20, 0.3) 0, rgba(10, 7, 20, 0) 120px), linear-gradient(90deg, rgba(10, 7, 20, 0.6) 0%, rgba(10, 7, 20, 0.55) 40%, rgba(10, 7, 20, 0.2) 50%, rgba(10, 7, 20, 0) 58%); }
.hero-conteudo { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 49vw; max-width: none; margin: 0; padding-top: var(--topo); padding-right: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-titulo { margin: 26px 0 24px; font: 700 clamp(3.625rem, calc(4.6875vw - 2px), 5.5rem) / 0.96 var(--fonte-titulo); font-stretch: 88%; letter-spacing: -0.035em; text-wrap: balance; }
.hero-titulo .acento { background: var(--grad-texto-noite); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.05em; }
.hero-titulo { text-shadow: 0 2px 24px rgba(10, 7, 20, 0.85), 0 1px 3px rgba(10, 7, 20, 0.7); }
/* "profissional" é texto recortado no degradê: a sombra comum apareceria por dentro da letra; vai por filtro */
.hero-titulo .acento { text-shadow: none; filter: drop-shadow(0 1px 2px rgba(10, 7, 20, 0.85)) drop-shadow(0 2px 12px rgba(10, 7, 20, 0.7)); }
.hero-texto { max-width: 33em; font-size: clamp(1.0625rem, calc(0.4vw + 12px), 1.25rem); line-height: 1.55; color: #fff; text-wrap: pretty; text-shadow: 0 1px 14px rgba(10, 7, 20, 0.95), 0 0 3px rgba(10, 7, 20, 0.85); }
.hero-acoes { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .link-discreto { margin-top: 22px; text-shadow: 0 1px 10px rgba(10, 7, 20, 0.95), 0 0 3px rgba(10, 7, 20, 0.85); }
.hero .chip--vidro { background: rgba(10, 7, 20, 0.45); }
.cortina-veu { position: absolute; inset: 0; z-index: 5; background: var(--noite-0); opacity: 0; pointer-events: none; }

/* As fileiras (dono, 04/10/2026, escolhida entre três provas): uma parede inclinada de cartões 9:16 andando em
   sentidos opostos, de borda a borda, sem nome. Movimento só por transform (CSS); o app.js monta o laço, mede a
   velocidade e toca TODOS os vídeos à vista. Sem pausa: nunca param (só fora da tela, coberto ou com o teatro). */
.tm { position: absolute; inset: 0; overflow: hidden; contain: paint; background: radial-gradient(60% 70% at 72% 40%, rgba(91, 63, 208, 0.22), transparent 70%), var(--noite-0); }
.tm-parede { position: absolute; left: -12%; right: -12%; top: 50%; display: flex; flex-direction: column; gap: 18px; transform: translateY(-50%) rotate(-8deg); }
.tm-trilho { display: flex; width: max-content; will-change: transform; animation: tm-andar var(--dur, 60s) linear infinite; }
.tm-fileira:nth-child(2) { margin-left: -140px; }
.tm-fileira[data-sentido="direita"] .tm-trilho { animation-direction: reverse; }
.tm-fileira[data-parada] .tm-trilho { animation: none; margin-inline: auto; }
.tm.parado .tm-trilho { animation-play-state: paused; }
.tm-cartao { position: relative; flex: none; height: min(41vh, 400px); width: auto; aspect-ratio: 9 / 16; margin: 0 18px 0 0; border-radius: 20px; overflow: hidden; background: var(--noite-2); isolation: isolate; }
.tm-cartao::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(233, 228, 255, 0.12); pointer-events: none; }
.tm-cartao img, .tm-cartao video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.tm-cartao video { opacity: 0; transition: opacity 0.6s var(--ease-ui); }
.tm-cartao video.tocando { opacity: 1; }
@keyframes tm-andar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* "Como a plataforma funciona? · Veja o vídeo": abre a apresentação com som (teatro) */
.como-funciona { --play: 46px; margin-top: 30px; display: inline-flex; align-items: center; gap: 14px; padding: 7px 24px 7px 7px; border-radius: 999px; color: #fff; text-align: left; cursor: pointer; background: rgba(10, 7, 20, 0.4); border: 1px solid rgba(233, 228, 255, 0.24); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background-color 0.3s var(--ease-ui), border-color 0.3s var(--ease-ui); }
.como-funciona:hover { background: rgba(10, 7, 20, 0.55); border-color: rgba(233, 228, 255, 0.4); }
.como-funciona .disco-miolo { width: var(--play); height: var(--play); }
.como-funciona .disco-ponto { box-shadow: 0 0 0 2px #fff; }
.como-funciona-texto { display: grid; gap: 4px; }
.como-funciona-texto b { font: 700 16px/1.2 var(--fonte-texto); }
.como-funciona-texto span { font: 600 13.5px/1.2 var(--fonte-texto); color: var(--violeta-300); }
.como-funciona:hover .disco-miolo, .como-funciona:focus-visible .disco-miolo { transform: scale(1.08); }
.como-funciona:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 999px; }
.hero.coberto .disco-miolo::before, .hero.coberto .disco-miolo::after { animation-play-state: paused; }

/* Celular e tablet em pé (dono, 03/10/2026: "no celular ficaram tímidas"): três fileiras atravessando o topo
   INTEIRO atrás do texto; o véu escurece só a faixa do texto (--texto: do pé do topo até o alto do título, medido
   pelo app.js, porque a barra do Safari muda a altura da tela). */
@media (max-width: 767px), (hover: none) and (max-height: 540px), (max-width: 1099px) and (orientation: portrait) {
  .hero .hero-veus { background: linear-gradient(180deg, rgba(10, 7, 20, 0.3) 0, rgba(10, 7, 20, 0) 110px), linear-gradient(0deg, rgba(10, 7, 20, 0.6) 0, rgba(10, 7, 20, 0.55) calc(var(--texto, 58svh) - 80px), rgba(10, 7, 20, 0.3) var(--texto, 58svh), rgba(10, 7, 20, 0) calc(var(--texto, 58svh) + 90px)); }
  .tm-parede { left: -35%; right: -35%; gap: 12px; }
  .tm-fileira:nth-child(2) { margin-left: -90px; }
  .tm-fileira:nth-child(3) { margin-left: -40px; }
  /* a parede cobre o topo INTEIRO, inclusive os cantos que a inclinação deixa vazios (dono, 04/10/2026): três fileiras
     de 34svh + 12 px passam da altura do topo o bastante para a borda de cima, inclinada, sair da tela nos dois lados */
  .tm-cartao { height: calc(34svh + 12px); margin-right: 12px; border-radius: 16px; }
}

/* ------------------------------------------------------------ cortes de cena */
[data-cortina] { position: relative; z-index: 2; border-radius: 48px 48px 0 0; box-shadow: var(--sombra-folha); }
[data-iris] { position: relative; z-index: 2; background: var(--papel-1); }
.iris-miolo { position: relative; overflow: hidden; }
.regua { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; margin-bottom: clamp(40px, 4vw, 64px); }
.regua::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linha-papel-forte); transform-origin: 0 50%; }
.noite .regua::after { background: var(--linha-noite-forte); }
.regua .olho { margin-bottom: 0; }
.regua-num { font: 700 12px/1 var(--fonte-texto); letter-spacing: 0.12em; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.noite .regua-num { color: var(--luz-3); }
.cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: end; margin-bottom: clamp(48px, 4.5vw, 80px); }
.cabeca-titulo { grid-column: 1 / 8; }
.cabeca > .abertura-texto { grid-column: 9 / 13; }
.cabeca > .faixa-pausa { grid-column: 12; justify-self: end; }

/* ------------------------------------------------------------ 2. segmentos */
.segmentos { padding: var(--secao-y) 0; overflow: hidden; }
.faixa { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(90deg, transparent, #000 120px, #000 calc(100% - 120px), transparent); }
.faixa + .faixa { margin-top: 16px; }
.faixa-trilho { display: flex; gap: 16px; width: max-content; will-change: transform; }
.segmento { position: relative; flex: none; width: 264px; aspect-ratio: 3 / 4; margin: 0; border-radius: 24px; overflow: hidden; background: var(--papel-2); }
.segmento img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-saida); }
.segmento::after { content: ""; position: absolute; inset: 0; background: var(--veu-cartao); pointer-events: none; }
.segmento figcaption { position: absolute; left: 20px; bottom: 18px; z-index: 1; color: #fff; font: 700 15px/1.2 var(--fonte-texto); transition: transform 0.5s var(--ease-ui); }
.segmento:hover img { transform: scale(1.06); }
.segmento:hover figcaption { transform: translateY(-4px); }

/* ------------------------------------------------------------ 3. produtos */
.produtos-intro .iris-miolo { background: var(--noite-0); color: var(--luz-1); padding: var(--secao-y) 0 clamp(48px, 5vw, 80px); }
.letreiro { margin: 0 0 clamp(36px, 3.5vw, 64px); padding-left: var(--margem); white-space: nowrap; font-weight: 800; font-stretch: 75%; font-size: clamp(16rem, 20vw, 24rem); line-height: 0.8; letter-spacing: -0.055em; color: var(--luz-1); }
.letreiro-palavra { display: inline-block; }
.produtos-intro .cabeca { margin-bottom: 0; }
.produtos-intro .abertura-texto { color: var(--luz-2); }
.produtos { position: relative; height: 100vh; min-height: 740px; background: var(--noite-0); padding: calc(var(--topo) + 28px) 0 32px; }
.produtos-grade { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(22px, 3.2vh, 40px); }
.produtos-trilho { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--calha); }
.produto-item { position: relative; text-align: left; padding: 16px 0 0; display: grid; gap: 6px; align-content: start; color: var(--luz-3); transition: color 0.16s; }
.produto-item::before, .produto-item::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; }
.produto-item::before { background: rgba(233, 228, 255, 0.12); }
.produto-item::after { background: var(--grad-marca); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.produto-item .num { font: 700 13px/1 var(--fonte-texto); letter-spacing: 0.06em; color: var(--violeta-300); font-variant-numeric: tabular-nums; }
.produto-item .nome { font: 600 15px/1.3 var(--fonte-texto); }
.produto-item:hover, .produto-item.ativo { color: #fff; }
.produto-item .selo-breve { justify-self: start; margin-top: 2px; color: var(--laranja-300); background: rgba(249, 115, 22, 0.16); }
.produtos-corpo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); min-height: 0; }
.produtos-paineis { grid-column: 1 / 6; position: relative; min-height: 0; color: var(--luz-1); }
.produtos-midias { grid-column: 6 / 13; position: relative; align-self: center; width: 100%; aspect-ratio: 16 / 10; max-height: 100%; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--linha-noite), 0 60px 140px -40px rgba(123, 94, 240, 0.35); }
.produto-painel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
.produto-painel.ativo { opacity: 1; visibility: visible; }
.produto-nome { display: grid; gap: 14px; font: 600 clamp(2rem, calc(2.2vw + 4px), 3rem) / 1.04 var(--fonte-titulo); font-stretch: 92%; letter-spacing: -0.028em; color: #fff; text-wrap: balance; }
.produto-nome .num { font: 700 13px/1 var(--fonte-texto); letter-spacing: 0.12em; color: var(--violeta-300); }
.produto-desc { margin-top: 16px; font-size: clamp(1.0625rem, calc(0.4vw + 11px), 1.1875rem); line-height: 1.5; color: var(--luz-2); max-width: 30em; text-wrap: pretty; }
.produto-beneficios { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linha-noite); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.produto-beneficios li { display: grid; gap: 4px; align-content: start; }
.produto-beneficios strong { font: 700 15px/1.25 var(--fonte-texto); color: #fff; }
.produto-beneficios span { font-size: 13.5px; line-height: 1.35; color: var(--luz-3); }
.produto-onde { margin-top: 20px; }
.produto-onde-rotulo { font: 700 11.5px/1 var(--fonte-texto); letter-spacing: 0.18em; text-transform: uppercase; color: var(--laranja-300); margin-bottom: 11px; }
.produto-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.produto-acoes { margin-top: 26px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.produto-acoes .botao { height: 48px; padding: 0 22px; font-size: 15px; }
.produto-acoes .link-discreto { color: var(--violeta-300); }
.produto-seguro { margin-top: 16px; color: var(--verde-300); }
.produto-painel .selo-breve { margin-left: 10px; vertical-align: middle; color: var(--laranja-300); background: rgba(249, 115, 22, 0.16); }
.produto-midia { position: absolute; inset: 0; clip-path: inset(0 0 100% 0 round 28px); }
.produto-midia.ativo, .produto-midia.anterior { clip-path: inset(0 0 0 0 round 28px); }
.produto-midia.ativo { z-index: 2; }
.produto-midia.anterior { z-index: 1; }
.produto-midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.produto-midia-base { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(10, 7, 20, 0.55), transparent); pointer-events: none; }
.produto-stat-cartao { position: absolute; left: 18px; bottom: 18px; z-index: 4; width: min(380px, 54%); padding: 20px 22px 18px; border-radius: 20px; color: #fff; background: rgba(10, 7, 20, 0.62); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.produto-stat-rotulo { font: 700 11px/1 var(--fonte-texto); letter-spacing: 0.18em; text-transform: uppercase; color: var(--violeta-300); }
.produto-stat { margin-top: 10px; font: 700 clamp(3rem, calc(3.4vw + 8px), 4.75rem) / 0.9 var(--fonte-titulo); font-stretch: 80%; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; background: var(--grad-texto-noite); -webkit-background-clip: text; background-clip: text; color: transparent; }
.produto-stat-texto { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--luz-1); }
.produto-fonte { margin-top: 7px; font: 500 12.5px/1.4 var(--fonte-texto); font-style: italic; color: var(--luz-3); }
.produtos-aviso { display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 13px/1.45 var(--fonte-texto); color: var(--luz-3); }
.produtos-aviso svg { width: 15px; height: 15px; flex: none; }

/* ------------------------------------------------------------ 4. na prática */
.pratica { background: var(--noite-0); padding: clamp(96px, 8vw, 150px) 0 var(--secao-y); }
.cenarios-lista { display: flex; gap: 16px; height: min(72vh, 660px); }
.cenario { position: relative; flex: 1 1 0; min-width: 0; border-radius: 24px; overflow: hidden; background: #000; color: #fff; border: 1px solid var(--linha-noite); cursor: pointer; transition: flex-grow 1s var(--ease-saida); }
.cenario.aberto { flex-grow: 2.3; }
.cenario video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.7s; }
.cenario:not(.aberto) video { filter: brightness(0.55) saturate(0.8); }
.cenario::after { content: ""; position: absolute; inset: 0; background: var(--veu-cartao); pointer-events: none; }
.cenario .etiqueta { position: absolute; top: 18px; left: 18px; z-index: 2; }
.cenario-legenda { position: absolute; left: 24px; right: 24px; bottom: 32px; z-index: 2; font: 500 17px/1.45 var(--fonte-texto); color: var(--luz-1); max-width: 24em; opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.7s var(--ease-saida); }
.cenario.aberto .cenario-legenda { opacity: 1; transform: none; transition-delay: 0.25s; }
.cenario-barra { position: absolute; left: 24px; right: 24px; bottom: 16px; z-index: 2; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; opacity: 0; transition: opacity 0.4s; }
.cenario.aberto .cenario-barra { opacity: 1; }
.cenario-barra b { position: absolute; inset: 0; background: var(--violeta-400); transform-origin: 0 50%; transform: scaleX(var(--progresso, 0)); }
.legenda-aviso { margin-top: 28px; text-align: center; font: 500 13px/1.45 var(--fonte-texto); color: var(--tinta-3); }
.noite .legenda-aviso { color: var(--luz-3); }

/* ------------------------------------------------------------ 5. para empresas */
.empresas { padding: var(--secao-y) 0; }
.empresas-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: center; }
.empresas-texto { grid-column: 1 / 6; }
.empresas-texto .h2 { font-size: clamp(2.5rem, 3.2vw, 3.75rem); }
.itens { margin: 36px 0 34px; display: grid; }
.itens li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--linha-papel); }
.itens li:last-child { border-bottom: 1px solid var(--linha-papel); }
.itens strong { display: block; font: 700 17px/1.3 var(--fonte-texto); }
.itens p span { display: block; margin-top: 4px; color: var(--tinta-2); font-size: 15.5px; }
.item-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--violeta-50); color: var(--violeta-600); }
.item-icone svg { width: 22px; height: 22px; }
.item-icone--verde { background: rgba(8, 122, 79, 0.08); color: var(--verde-600); }
.item-icone--laranja { background: rgba(249, 115, 22, 0.14); color: var(--laranja-300); }
.itens--noite li { border-color: var(--linha-noite) !important; }
.itens--noite p span { color: var(--luz-2); }
.itens--noite .item-icone { background: rgba(123, 94, 240, 0.16); color: var(--violeta-300); }
.empresas-filme { grid-column: 6 / 13; position: relative; aspect-ratio: 1080 / 806; border-radius: 28px; overflow: hidden; background: var(--papel-2); box-shadow: var(--sombra-3); }
.empresas-filme video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ 6. por que a Publiqueme */
.comparativo { padding: clamp(40px, 4vw, 72px) 0 var(--secao-y); }
.comparar { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr); margin-top: 24px; background: #fff; border-radius: 24px; box-shadow: var(--sombra-1); padding: 0 28px; }
.comparar > * { position: relative; z-index: 1; }
.comparar > .comparar-coluna-destaque { position: absolute; grid-column: 2 / 3; grid-row: 1 / span var(--linhas); inset: -24px 0; z-index: 0; border-radius: 24px; background: var(--noite-1); box-shadow: var(--brilho-violeta); }
.comparar-cabeca { padding: 28px 12px 22px; text-align: center; display: grid; justify-items: center; align-content: end; gap: 6px; }
.comparar-cabeca strong { font: 700 17px/1.2 var(--fonte-texto); }
.comparar-cabeca span { font: 500 13px/1.4 var(--fonte-texto); color: var(--tinta-3); }
.comparar-cabeca--publiqueme { color: #fff; gap: 14px; }
.comparar-cabeca--publiqueme .marca-nome { font-size: 20px; }
.comparar-cabeca--publiqueme .marca-icone { width: 28px; height: 28px; --anel-marca: var(--noite-1); }
.chip--recomendado { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 999px; font: 800 10.5px/1 var(--fonte-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--violeta-600); }
.comparar-item { padding: 20px 28px 20px 0; border-top: 1px solid var(--linha-papel); }
.comparar-item strong { display: block; font: 700 16.5px/1.3 var(--fonte-texto); letter-spacing: -0.01em; }
.comparar-item span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.comparar-celula { display: grid; place-items: center; border-top: 1px solid var(--linha-papel); }
.comparar-celula--publiqueme { border-top-color: var(--linha-noite); }
.marca-sim { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--violeta-500); color: #fff; }
.marca-sim svg { width: 15px; height: 15px; }
.marca-sim path { stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.marca-traco { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(18, 10, 36, 0.35); display: grid; place-items: center; }
.marca-traco::before { content: ""; width: 10px; height: 2px; border-radius: 2px; background: rgba(18, 10, 36, 0.55); }
.marca-x { color: rgba(18, 10, 36, 0.45); display: grid; place-items: center; }
.marca-x svg { width: 18px; height: 18px; }
.comparar-pe { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr); padding: 18px 0 8px; border-top: 1px solid var(--linha-papel); }
.comparar-pe .botao { grid-column: 2; justify-self: center; }
.legenda-clara { margin-top: 56px; display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.legenda-clara div { display: grid; grid-template-columns: 28px auto; column-gap: 12px; align-items: center; max-width: 360px; }
.legenda-clara div > span:first-child { grid-row: 1 / 3; }
.legenda-clara strong { font: 700 14px/1.3 var(--fonte-texto); }
.legenda-clara div > span:last-child { font-size: 13px; color: var(--tinta-2); line-height: 1.4; }
.marca-sim--p { width: 24px; height: 24px; }
.marca-sim--p svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------ 7. quem já está aqui */
.criadores .iris-miolo { padding: var(--secao-y) 0; }
/* duas fileiras andando como a faixa dos segmentos (03/10/2026), sem botão de pausa e sem parar nunca (dono, 03/10/2026); a folga de cima e de baixo deixa o cartão subir sob o cursor sem cortar a borda */
.faixa--criadores { padding: 8px 0; }
.faixa--criadores + .faixa--criadores { margin-top: 0; }
.faixa--criadores[data-parada] .faixa-trilho { margin-inline: auto; }
.faixa--criadores .criador { flex: none; width: 340px; }
/* cartões maiores (dono, 03/10/2026): 340 no computador, 280 no tablet, 230 no celular */
@media (min-width: 768px) and (max-width: 1099px) { .faixa--criadores .criador { width: 280px; } }
/* TODOS OS VÍDEOS DO MESMO TAMANHO (dono, 03/10/2026): o cartão tem largura fixa, a mídia tem proporção fixa e o texto
   tem altura fixa (nome em 1 linha + cidade em 1 linha). Quem se ajusta é o texto: o nome comprido diminui a letra até
   caber (ajustarNomes, public/inicio/app.js) e, se nem no mínimo couber, termina em "…". O nome fica logo abaixo do
   vídeo e a cidade logo abaixo do nome, com os mesmos espaços em todos os cartões. */
.criador { display: flex; flex-direction: column; padding: 12px 12px 10px; border-radius: 24px; background: var(--noite-2); border: 1px solid var(--linha-noite); transition: transform 0.5s var(--ease-ui), border-color 0.3s; }
.criador:hover { transform: translateY(-6px); border-color: rgba(154, 128, 250, 0.4); }
.criador-midia { position: relative; flex: none; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--noite-3); }
.criador-midia video, .criador-midia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.criador-midia--imagem::before { content: ""; position: absolute; inset: -20%; background: var(--fundo) center / cover; filter: blur(40px); transform: scale(1.2); opacity: 0.7; }
.criador-midia--imagem img { object-fit: contain; object-position: 50% 50%; }
.criador-info { --linha-nome: 28px; padding: 10px 6px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; text-align: left; }
/* nome em UMA linha com altura fixa: a letra diminui sem mudar a altura do cartão; o que sobrar vira "…" */
.criador-info .h4 { height: var(--linha-nome); line-height: var(--linha-nome); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.criador-cidade { display: flex; align-items: center; gap: 6px; min-width: 0; height: 18px; font: 500 13px/18px var(--fonte-texto); color: var(--luz-3); }
.criador-cidade svg { flex: none; width: 14px; height: 14px; }
.criador-cidade span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ 8. para criadores */
.criar { position: relative; padding: clamp(40px, 4vw, 72px) 0 var(--secao-y); overflow: hidden; }
.criar-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: center; }
.criar-celular { grid-column: 1 / 6; position: relative; display: grid; place-items: center; perspective: 1200px; }
.halo { position: absolute; width: 680px; height: 680px; pointer-events: none; }
.halo--laranja { background: var(--halo-laranja); transform: translate(-18%, 14%); }
.halo--violeta { background: var(--halo-violeta); transform: translate(16%, -10%); }
.criar-texto { grid-column: 7 / 13; }
.criar-texto .abertura-texto { margin-top: 22px; }
.cartoes-2 { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cartao-noite { padding: 22px; border-radius: 24px; background: var(--noite-2); border: 1px solid var(--linha-noite); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); display: grid; gap: 10px; align-content: start; transition: border-color 0.3s; }
.cartao-noite:hover { border-color: var(--linha-noite-forte); }
.cartao-noite .h4 { font-size: 18px; }
.cartao-noite p { color: var(--luz-2); font-size: 15px; }
.quanto { margin-top: 14px; padding: 32px; border-radius: 24px; background: var(--noite-2); border: 1px solid var(--linha-noite); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.quanto ul { margin-top: 18px; display: grid; gap: 12px; }
.quanto li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--luz-1); }
.quanto li svg { width: 20px; height: 20px; margin-top: 3px; color: var(--laranja-300); }
.quanto .legenda { margin-top: 16px; }
.quanto .legenda a { color: var(--laranja-300); text-decoration: underline; text-underline-offset: 3px; }
.quanto hr { border-top: 1px solid var(--linha-noite); margin: 20px 0; }
.quanto-entrar { color: var(--luz-1); font-size: 16px; }
.quanto-nota { margin-top: 8px; color: var(--luz-2); font-size: 15px; }
.criar-acoes { margin-top: 30px; display: grid; gap: 12px; justify-items: start; }
.celular { position: relative; width: 360px; border-radius: 56px; padding: 12px; background: linear-gradient(145deg, #2c2545, #0c0917); box-shadow: var(--brilho-violeta), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 2px rgba(255, 255, 255, 0.05); transform-style: preserve-3d; }
.celular-tela { position: relative; border-radius: 45px; overflow: hidden; background: #f4f1fb; color: var(--tinta-1); padding: 58px 18px 26px; display: grid; gap: 12px; font-size: 12.5px; font-family: var(--fonte-texto); }
.celular-ilha { position: absolute; top: 13px; left: 50%; width: 108px; height: 31px; margin-left: -54px; border-radius: 20px; background: #0c0917; }
.celular-hora { position: absolute; top: 19px; left: 32px; font-weight: 700; font-size: 13px; }
.cel-ola { display: flex; align-items: center; gap: 10px; }
.cel-ola img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.cel-ola p { display: grid; }
.cel-ola small { color: var(--tinta-3); font-size: 11px; }
.cel-ola strong { font-size: 15px; }
.cel-cartao { border-radius: 18px; padding: 14px 16px; background: #fff; box-shadow: 0 6px 18px rgba(18, 10, 36, 0.06); }
.cel-ganhos { background: linear-gradient(135deg, #7b5ef0, #5b3fd0); color: #fff; }
.cel-ganhos small { opacity: 0.85; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10.5px; font-weight: 700; }
.cel-ganhos strong { display: block; margin: 6px 0 8px; font: 700 28px/1 var(--fonte-titulo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cel-ganhos em { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--verde-600); }
.cel-titulo { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.cel-barras { margin-top: 12px; height: 72px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; align-items: end; }
.cel-barras i { display: block; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #6ee7b7, #a7f3d0); transform-origin: 50% 100%; }
.cel-barras i:last-child { background: linear-gradient(180deg, #10b981, #34d399); }
.cel-meses { margin-top: 6px; display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; font-size: 10.5px; color: var(--tinta-3); }
.cel-meses span:last-child { color: var(--verde-600); font-weight: 700; }
.cel-linha { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha-papel); display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tinta-2); }
.cel-linha b { color: var(--verde-600); }
.cel-receber { display: flex; justify-content: space-between; align-items: center; }
.cel-receber p { display: grid; }
.cel-receber small { color: var(--verde-600); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.cel-receber strong { font: 700 19px/1.1 var(--fonte-titulo); }
.cel-receber span { padding: 8px 12px; border-radius: 10px; background: #10b981; color: #fff; font-weight: 700; font-size: 11.5px; }
.cel-pedido { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 11px; color: var(--tinta-2); }
.cel-pedido strong { color: var(--tinta-1); font-size: 12.5px; }
.cel-pedido b { grid-row: 1 / 4; grid-column: 2; align-self: center; color: var(--violeta-600); }

/* ------------------------------------------------------------ 9. lançamento */
.lancamento { padding: var(--secao-y) 0; }
.lancamento-titulo { max-width: 16.5em; font-weight: 700; font-stretch: 88%; font-size: clamp(3.625rem, calc(4.6875vw - 2px), 5.5rem); line-height: 0.98; letter-spacing: -0.035em; }
.lancamento-titulo .acento { color: var(--violeta-600); }
.lancamento-grade { margin-top: clamp(56px, 5vw, 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: start; }
.lancamento-grade > .abertura-texto { grid-column: 1 / 5; }
.lancamento-cartoes { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cartao-dia { padding: 28px 26px 30px; border-radius: 24px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--linha-papel); box-shadow: var(--sombra-1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; gap: 12px; align-content: start; transition: transform 0.28s var(--ease-ui), box-shadow 0.28s var(--ease-ui); }
.cartao-dia:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.cartao-dia p { color: var(--tinta-2); font-size: 15.5px; }
.cartao-num { font: 700 13px/1 var(--fonte-texto); letter-spacing: 0.12em; color: var(--violeta-600); margin-bottom: 18px; }

/* ------------------------------------------------------------ 10. aplicativos */
.apps .iris-miolo { padding: var(--secao-y) 0; }
.aurora { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.apps .aurora { opacity: 0.8; }
.apps-grade { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: center; }
.apps-texto { grid-column: 1 / 7; }
.apps-texto .abertura-texto { margin-top: 22px; }
.apps .itens { margin: 30px 0 28px; }
.lojas { display: flex; gap: 12px; flex-wrap: wrap; }
.loja { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px 0 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linha-noite); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
/* loja no ar (Google Play, 07/10/2026): a pílula é link para a página do app */
a.loja:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.1); }
a.loja:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* loja ainda fora do ar (App Store, de volta a "Em breve" em 07/10/2026, decisão do dono): não é link */
.loja--breve { cursor: default; }
.loja--breve .selo-breve { margin-left: auto; }
.loja svg { width: 26px; height: 26px; flex: none; }
.loja p { display: grid; }
.loja small { font: 700 10px/1.2 var(--fonte-texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--luz-3); }
.loja strong { font: 700 18px/1.15 var(--fonte-texto); }
.apps-nota { margin-top: 18px; }
.apps-imagem { grid-column: 7 / 13; margin-right: calc(var(--margem) * -1); }
.apps-imagem img { width: 112%; max-width: none; height: auto; filter: drop-shadow(0 60px 90px rgba(0, 0, 0, 0.55)); }

/* ------------------------------------------------------------ 11. chamada final + rodapé revelado */
main { position: relative; z-index: 1; }
.final { position: relative; min-height: 100svh; display: grid; place-items: center; padding: var(--secao-y) 0; overflow: hidden; color: #fff; background: var(--noite-1); border-radius: 0 0 48px 48px; text-align: center; }
.final .aurora { opacity: 0; }
.final-veu { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 50% 50%, rgba(10, 7, 20, 0.55), rgba(10, 7, 20, 0.15) 70%, rgba(10, 7, 20, 0.45) 100%); }
.final-conteudo { position: relative; display: grid; justify-items: center; gap: 28px; }
.final-titulo { font-weight: 700; font-stretch: 88%; font-size: clamp(3.625rem, calc(5.4vw - 2px), 6.5rem); line-height: 0.96; letter-spacing: -0.035em; max-width: 11em; }
.final-titulo .acento { color: var(--violeta-200); }
.final .abertura-texto { max-width: 36em; margin: 0 auto; }
.final-acoes { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.rodape { position: sticky; bottom: 0; z-index: 0; background: var(--noite-0); color: var(--luz-1); padding: 120px 0 0; overflow: hidden; margin-top: -48px; }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.redes { margin-top: 26px; display: flex; gap: 10px; }
.redes a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linha-noite); transition: background-color 0.28s, transform 0.28s var(--ease-ui); }
.redes a:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.redes svg { width: 18px; height: 18px; }
.rodape h3 { font: 700 11.5px/1 var(--fonte-texto); letter-spacing: 0.18em; text-transform: uppercase; color: var(--luz-3); margin-bottom: 20px; }
.rodape ul { display: grid; gap: 13px; }
.rodape li a { color: var(--luz-2); font-size: 15px; transition: color 0.16s; }
.rodape li a:hover { color: #fff; }
.rodape-base { margin-top: 64px; padding: 24px 0 28px; border-top: 1px solid var(--linha-noite); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--luz-3); font-size: 13.5px; line-height: 1.6; }
.rodape-base a { color: var(--violeta-300); }
.rodape-gigante { margin: 8px 0 0; text-align: center; white-space: nowrap; font: 800 13.4vw/0.78 var(--fonte-texto); letter-spacing: -0.06em; color: rgba(247, 245, 255, 0.06); transform: translateY(18%); user-select: none; }
.rodape-gigante .letra { display: inline-block; }

/* ------------------------------------------------------------ teatro (vídeo com som) */
.teatro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.teatro[hidden] { display: none; }
.teatro-fundo { position: absolute; inset: 0; background: rgba(10, 7, 20, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.teatro-fechar { position: absolute; top: 24px; right: 28px; z-index: 3; width: 48px; height: 48px; }
.teatro-palco { position: relative; z-index: 2; width: min(1280px, 86vw, calc((100svh - 180px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 60px 160px rgba(123, 94, 240, 0.22); }
.teatro-video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.teatro-controles { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 60px 20px 18px; background: linear-gradient(0deg, rgba(10, 7, 20, 0.85), transparent); color: #fff; transition: opacity 0.35s var(--ease-ui), transform 0.35s var(--ease-ui); }
.teatro.ocioso .teatro-controles { opacity: 0; transform: translateY(8px); pointer-events: none; }
.teatro.ocioso .teatro-video { cursor: none; }
.teatro-tempo { font: 600 13px/1 var(--fonte-texto); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8); min-width: 88px; }
.teatro-progresso { position: relative; flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; }
.teatro-progresso::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); transition: height 0.2s; }
.teatro-progresso:hover::before, .teatro-progresso:hover .teatro-progresso-cheio { height: 6px; }
.teatro-progresso-cheio { position: absolute; left: 0; width: 0%; height: 4px; border-radius: 4px; background: var(--violeta-400); transition: height 0.2s; }
.teatro-progresso-cheio i { position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--laranja-500); box-shadow: 0 0 0 2px #fff; }
.teatro .icone-mudo, .teatro.mudo .icone-som { display: none; }
.teatro.mudo .icone-mudo { display: block; }
.teatro [data-teatro-tocar] .icone-tocar { display: none; }
.teatro.pausado [data-teatro-tocar] .icone-pausar { display: none; }
.teatro.pausado [data-teatro-tocar] .icone-tocar { display: block; }
.teatro-fim { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(10, 7, 20, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.teatro-fim[hidden] { display: none; }

/* ------------------------------------------------------------ gaveta: tudo sobre um produto */
.gaveta { position: fixed; inset: 0; z-index: 99; }
.gaveta[hidden] { display: none; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(10, 7, 20, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gaveta-painel { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(700px, 54vw); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; background: var(--papel-1); color: var(--tinta-1); box-shadow: -40px 0 120px rgba(10, 7, 20, 0.35); }
.gaveta-fechar { position: absolute; top: 20px; right: 20px; z-index: 2; width: 48px; height: 48px; }
.gaveta-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 56px 52px 60px; display: grid; gap: 28px; align-content: start; }
.g-cabeca { display: grid; gap: 14px; padding-right: 60px; }
.g-cabeca p { color: var(--tinta-2); font-size: 17px; }
.g-num { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--fonte-texto); letter-spacing: 0.12em; color: var(--violeta-600); }
.g-cabeca .titulo-m { font: 650 clamp(2rem, 2.6vw, 2.75rem)/1.04 var(--fonte-titulo); font-stretch: 90%; letter-spacing: -0.03em; }
.g-etapas { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.g-etapas::before { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 1px; background: var(--linha-papel-forte); }
.g-etapas li { position: relative; padding-top: 26px; font: 700 14.5px/1.35 var(--fonte-texto); }
.g-etapas li::before { content: ""; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--violeta-600); box-shadow: 0 0 0 4px var(--papel-1); }
.g-etapas li span { display: block; color: var(--violeta-600); font-size: 12px; letter-spacing: 0.1em; margin-bottom: 6px; }
.g-blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.g-bloco { padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--linha-papel); display: grid; gap: 10px; align-content: start; }
.g-bloco:last-child { grid-column: 1 / -1; background: var(--papel-2); border-color: transparent; }
.g-bloco p { font-size: 15.5px; color: var(--tinta-2); }
.g-bloco--alerta .g-titulo { color: var(--laranja-700); }
.g-titulo { font: 700 11.5px/1.3 var(--fonte-texto); letter-spacing: 0.16em; text-transform: uppercase; color: var(--violeta-600); }
.g-acoes { display: grid; gap: 14px; justify-items: start; padding-top: 4px; }

.regua::after { transform: scaleX(var(--regua, 1)); }

/* ajustes da revisão 2 */
.junto { white-space: nowrap; }
main > section { position: relative; z-index: 1; }
main > [data-cortina], main > [data-iris] { z-index: 2; }
.comparar-cabeca .chip--recomendado { color: #fff; }
.comparar-cabeca--publiqueme .marca-nome { color: #fff; }
.comparar-cabeca--publiqueme .marca-ponto { color: var(--laranja-500); }

/* ============================================================ CELULAR (até 767 px) ============================================================ */
.menu-botao { display: none; }
.menu-movel { position: fixed; inset: 0; z-index: 79; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--topo) + 36px) var(--margem) calc(28px + env(safe-area-inset-bottom)); color: #fff; background: rgba(10, 7, 20, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.menu-movel[hidden] { display: none; }
.menu-movel-lista { display: grid; gap: 4px; }
.menu-movel-lista a { font: 650 clamp(2.25rem, 10vw, 2.75rem)/1.12 var(--fonte-titulo); font-stretch: 90%; letter-spacing: -0.03em; padding: 6px 0; }
.menu-movel-pe { display: grid; gap: 18px; justify-items: start; }
.menu-movel-pe .botao { width: 100%; }
.menu-movel-pe .topo-entrar { font-size: 17px; }
.produtos-movel { display: none; }

@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  :root { --margem: 20px; --calha: 14px; --secao-y: 88px; --topo: 60px; }
  body { font-size: 16px; }
  .h2 { font-size: clamp(2.125rem, 9.4vw, 2.75rem); line-height: 1.02; }
  .abertura-texto { font-size: 17px; }
  .olho { font-size: 11px; margin-bottom: 16px; }
  .botao { height: 52px; padding: 0 22px; font-size: 15.5px; }
  .cabeca { display: block; margin-bottom: 36px; }
  .cabeca > .abertura-texto { margin-top: 16px; }
  .cabeca > .faixa-pausa { margin-top: 18px; }
  .regua { margin-bottom: 30px; padding-bottom: 16px; }
  [data-cortina] { border-radius: 28px 28px 0 0; }

  /* menu */
  .topo-barra { grid-template-columns: 1fr auto; gap: 12px; }
  .topo-menu, .topo-acoes > .topo-entrar { display: none; }
  .marca-icone { width: 28px; height: 28px; }
  .marca-nome { font-size: 19px; }
  .topo-acoes { gap: 8px; }
  .topo-acoes > .botao--p { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .topo-acoes > .botao--p .seta { display: none; }
  .menu-botao { display: inline-grid; place-items: center; align-content: center; gap: 5px; width: 40px; height: 40px; border-radius: 50%; color: inherit; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(233, 228, 255, 0.18); }
  .menu-botao i { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease-ui); }
  .topo[data-tema="dia"] .menu-botao { background: #fff; border-color: var(--linha-papel-forte); }
  body.menu-aberto .topo { color: #fff; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.menu-aberto .menu-botao { background: rgba(255, 255, 255, 0.1); border-color: rgba(233, 228, 255, 0.2); }
  body.menu-aberto .menu-botao i:first-child { transform: translateY(3.25px) rotate(45deg); }
  body.menu-aberto .menu-botao i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  body.menu-aberto .topo-acoes > .botao--p { opacity: 0; pointer-events: none; }

  /* 1. topo: vídeo em pé ocupando a tela, texto embaixo */
  .hero { height: 100svh; min-height: 640px; max-height: none; }
  .hero-conteudo { inset: auto 0 0 0; width: 100%; padding: 0 var(--margem) calc(26px + env(safe-area-inset-bottom)); justify-content: flex-end; }
  .hero .chip--vidro { height: auto; padding: 8px 12px; font-size: 10px; letter-spacing: 0.1em; }
  .hero-titulo { margin: 12px 0 10px; font-size: clamp(2.25rem, 10.2vw, 2.875rem); line-height: 0.98; }
  .hero-texto { font-size: 15.5px; line-height: 1.5; }
  /* os dois botões dividem a linha quando cabem; se o texto for longo ("Entrar na lista de espera"), cada um ganha a linha inteira */
  .hero-acoes { margin-top: 16px; width: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-acoes .botao { flex: 1 1 0; min-width: max-content; padding: 0 12px; }
  .hero .link-discreto { margin-top: 12px; font-size: 14px; }
  /* o bloco de texto mais baixo (dono, 04/10/2026): sobra mais vídeo em cima */
  .como-funciona { --play: 40px; margin-top: 12px; width: 100%; gap: 12px; padding: 5px 16px 5px 5px; background: rgba(10, 7, 20, 0.55); }
  .como-funciona-texto b { font-size: 15px; }
  .como-funciona-texto span { font-size: 13px; }

  /* 2. segmentos */
  .segmento { width: 200px; border-radius: 20px; }
  .faixa { -webkit-mask-image: none; mask-image: none; }
  .faixa + .faixa { margin-top: 12px; }
  .faixa-trilho { gap: 12px; }

  /* 3. produtos: letreiro, faixa de números presa no alto e cartões que passam com o dedo */
  .produtos-intro .iris-miolo { padding: 88px 0 28px; }
  .letreiro { font-size: 30vw; margin-bottom: 26px; }
  .produtos { height: auto; min-height: 0; padding: 6px 0 var(--secao-y); }
  .produtos-grade { display: block; height: auto; }
  .produtos-trilho, .produtos-corpo { display: none; }
  .produtos-movel { display: block; }
  .pm-trilho { position: sticky; top: var(--topo); z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--margem) * -1) 18px; padding: 12px var(--margem); background: rgba(10, 7, 20, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .pm-trilho::-webkit-scrollbar, .pm-carrossel::-webkit-scrollbar, .cenarios-lista::-webkit-scrollbar { display: none; }
  .pm-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha-noite); background: rgba(255, 255, 255, 0.04); color: var(--luz-2); font: 600 13.5px/1 var(--fonte-texto); white-space: nowrap; transition: background-color 0.28s, color 0.28s, border-color 0.28s; }
  .pm-chip .num { font-size: 12px; font-weight: 700; color: var(--violeta-300); }
  .pm-chip.ativo { background: #fff; border-color: #fff; color: var(--tinta-1); }
  .pm-chip.ativo .num { color: var(--violeta-600); }
  .pm-chip .selo-breve { height: 18px; padding: 0 6px; font-size: 9px; color: var(--laranja-300); background: rgba(249, 115, 22, 0.16); }
  .pm-chip.ativo .selo-breve { color: var(--laranja-700); }
  .pm-carrossel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--margem) * -1); padding: 0 var(--margem) 4px; scroll-padding: 0 var(--margem); overscroll-behavior-x: contain; }
  .pm-slide { flex: 0 0 calc(100vw - 2 * var(--margem) - 26px); scroll-snap-align: start; display: grid; align-content: start; color: var(--luz-1); }
  .pm-midia { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--linha-noite); }
  .pm-midia video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pm-prova { margin-top: 12px; padding: 16px 18px; border-radius: 18px; background: var(--noite-2); border: 1px solid var(--linha-noite); }
  .pm-slide .produto-stat { font-size: 50px; }
  .pm-slide .produto-nome { margin-top: 24px; font-size: 28px; gap: 10px; }
  .pm-slide .produto-desc { font-size: 16px; margin-top: 12px; }
  .pm-slide .produto-beneficios { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; padding-top: 14px; }
  .pm-slide .produto-beneficios li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .pm-slide .produto-acoes { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 22px; }
  .pm-slide .produto-acoes .botao { width: 100%; height: 50px; }
  .pm-slide .produto-acoes .link-discreto { align-self: flex-start; color: var(--violeta-300); }
  .pm-slide .produto-seguro { color: var(--verde-300); }
  .produtos-aviso { margin-top: 22px; justify-content: flex-start; align-items: flex-start; text-align: left; }
  .produtos-aviso svg { margin-top: 2px; }

  /* 4. na prática: cartões em pé que passam com o dedo, um vídeo por vez */
  .pratica { padding: 72px 0 var(--secao-y); }
  .cenarios-lista { height: auto; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--margem) * -1); padding: 0 var(--margem); scroll-padding: 0 var(--margem); overscroll-behavior-x: contain; }
  .cenario { flex: 0 0 72vw; aspect-ratio: 9 / 16; scroll-snap-align: start; transition: none; }
  .cenario.aberto { flex-grow: 0; }
  .cenario-legenda { left: 18px; right: 18px; bottom: 28px; font-size: 15px; }
  .cenario-barra { left: 18px; right: 18px; }

  /* 5. para empresas */
  .empresas-grade { display: block; }
  .empresas-texto .h2 { font-size: clamp(2.125rem, 9.4vw, 2.75rem); }
  .itens { margin: 28px 0 28px; }
  .itens li { grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; }
  .item-icone { width: 40px; height: 40px; }
  .empresas-texto .botao { width: 100%; }
  .empresas-filme { margin-top: 36px; border-radius: 22px; }

  /* 6. comparativo: cada linha vira um cartão com as três marcas embaixo */
  .comparar { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; padding: 0 12px 4px; }
  .comparar > .comparar-coluna-destaque { display: none; }
  .comparar-cabeca--vazia { display: none; }
  .comparar-cabeca { padding: 18px 4px 14px; gap: 4px; }
  .comparar-cabeca strong { font-size: 13.5px; }
  .comparar-cabeca span { font-size: 11px; }
  .comparar-cabeca--publiqueme { margin: 12px 4px 10px; padding: 12px 4px; border-radius: 16px; background: var(--noite-1); gap: 8px; }
  .comparar-cabeca--publiqueme .marca-nome { font-size: 13.5px; }
  .comparar-cabeca--publiqueme .marca-icone { width: 20px; height: 20px; }
  .comparar-cabeca .chip--recomendado { height: 20px; padding: 0 7px; font-size: 8.5px; letter-spacing: 0.08em; }
  .comparar-item { grid-column: 1 / -1; padding: 18px 4px 12px; }
  .comparar-item strong { font-size: 15.5px; }
  .comparar-item span { font-size: 14px; }
  .comparar-celula { border-top: 0; padding: 2px 0 16px; }
  .comparar-celula--publiqueme > span { box-shadow: 0 0 0 6px var(--noite-1); }
  .comparar-pe { grid-template-columns: 1fr; padding: 16px 0 12px; }
  .comparar-pe .botao { grid-column: 1; width: 100%; height: 50px; font-size: 15px; }
  .legenda-clara { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 32px; }

  /* 7. quem já está aqui */
  .criadores .iris-miolo { padding: var(--secao-y) 0; }
  .faixa--criadores { padding: 6px 0; }
  .faixa--criadores + .faixa--criadores { margin-top: 0; }
  .faixa--criadores .criador { width: 230px; }
  .criador { padding: 8px 8px 8px; border-radius: 18px; }
  .criador-midia { border-radius: 12px; aspect-ratio: 3 / 4; }
  .criador-info { --linha-nome: 20px; padding: 6px 4px 0; gap: 2px; }
  .criador .h4 { font-size: 15px; }

  /* 8. para criadores: o texto conduz e o celular aparece no meio */
  .criar { padding-bottom: var(--secao-y); }
  .criar-grade { display: flex; flex-direction: column; align-items: stretch; }
  .criar-texto { display: contents; }
  .criar-texto > .h2 { order: 1; }
  .criar-texto > .abertura-texto { order: 2; margin-top: 18px; }
  .criar-celular { order: 3; margin: 44px 0 36px; }
  .cartoes-2 { order: 4; grid-template-columns: 1fr; margin-top: 0; gap: 12px; }
  .quanto { order: 5; padding: 24px 20px; }
  .criar-acoes { order: 6; }
  .criar-acoes .botao { width: 100%; }
  .celular { width: 290px; border-radius: 46px; padding: 10px; }
  .celular-tela { border-radius: 37px; padding: 50px 14px 20px; gap: 10px; }
  .halo { width: 440px; height: 440px; }

  /* 9. lançamento */
  .lancamento-titulo { font-size: clamp(2.25rem, 10.2vw, 2.875rem); }
  .lancamento-grade { display: block; margin-top: 32px; }
  .lancamento-cartoes { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .cartao-dia { padding: 22px 20px 24px; }
  .cartao-num { margin-bottom: 8px; }

  /* 10. aplicativos */
  .apps-grade { display: block; }
  .lojas { flex-direction: column; }
  .loja { width: 100%; }
  .apps-imagem { margin: 44px calc(var(--margem) * -1) 0 0; }
  .apps-imagem img { width: 108%; }

  /* 11. chamada final e rodapé */
  .final { min-height: 92svh; border-radius: 0 0 28px 28px; }
  .final-titulo { font-size: clamp(2.5rem, 11.4vw, 3.25rem); }
  .final-acoes { flex-direction: column; width: 100%; gap: 18px; }
  .final-acoes .botao { width: 100%; }
  .rodape { padding-top: 84px; margin-top: -28px; }
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .rodape-marca { grid-column: 1 / -1; }
  .rodape-base { flex-direction: column; margin-top: 40px; gap: 12px; }
  .rodape-gigante { font-size: 20.5vw; }

  /* teatro e gaveta */
  .teatro-palco { width: calc(100vw - 16px); border-radius: 14px; }
  .teatro-controles { padding: 36px 8px 8px; gap: 6px; }
  .teatro-controles .botao-icone { width: 34px; height: 34px; }
  .teatro-tempo { min-width: 0; font-size: 11px; }
  .teatro-fechar { top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; }
  .teatro-fim { flex-direction: column; gap: 10px; }
  .gaveta-painel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88svh; border-radius: 24px 24px 0 0; }
  .gaveta-painel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--linha-papel-forte); }
  .gaveta-fechar { top: 14px; right: 14px; width: 40px; height: 40px; }
  .gaveta-corpo { padding: 36px 20px calc(36px + env(safe-area-inset-bottom)); gap: 22px; }
  .g-cabeca { padding-right: 44px; }
  .g-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .g-etapas::before { display: none; }
  .g-blocos { grid-template-columns: 1fr; }
  .g-acoes .botao { width: 100%; }
}

/* "Onde usar": cada rede numa ficha redonda da cor da marca, encaixada na ponta da pílula */
.produto-chips { gap: 8px; }
.produto-chips .canal { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--linha-noite); background: rgba(255, 255, 255, 0.06); font: 600 13px/1 var(--fonte-texto); color: var(--luz-1); white-space: nowrap; }
.moeda { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.moeda svg { width: 14px; height: 14px; }
.moeda--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.moeda--tiktok { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.moeda--tiktok svg { width: 13px; height: 13px; }
.moeda--whatsapp { background: #25d366; }
.moeda--whatsapp svg { width: 15px; height: 15px; }
.moeda--facebook { background: #1877f2; align-items: end; }
.moeda--facebook svg { width: 17px; height: 17px; margin-bottom: -1px; }
.moeda--youtube { background: #ff0000; }
.moeda--google { background: #fff; }
.moeda--uso { background: rgba(183, 162, 255, 0.16); color: var(--violeta-200); }
.moeda--uso svg { width: 13px; height: 13px; }


/* ============================================================ revisão do especialista de design mobile */
[data-cortina] { clip-path: inset(-100px 0 0 0); } /* a sombra da folha não vinca a seção de baixo */
@media (hover: none) {
  .botao:hover, .botao--primario:hover, .botao--dia:hover, .botao--branco:hover, .criador:hover, .cartao-dia:hover, .redes a:hover { transform: none; }
  .segmento:hover img, .segmento:hover figcaption { transform: none; }
  .criador:hover { border-color: var(--linha-noite); }
}
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .grao { display: none; } /* pesa em Android intermediário */

  /* topo em "capa de revista": rosto inteiro, selo no alto, play legível acima do título */
  .hero-conteudo { inset: 0; pointer-events: none; }
  .hero-conteudo > * { pointer-events: auto; }
  .hero .chip--vidro { position: absolute; top: calc(var(--topo) + 16px); left: var(--margem); height: 30px; padding: 0 12px; white-space: nowrap; letter-spacing: 0.06em; }

  /* produtos: cartão com moldura; o de fora de foco fica apagado */
  .produtos { padding-bottom: 56px; }
  .pratica { padding-top: 56px; }
  .produtos-aviso { display: none; }
  .pm-trilho { background: rgba(10, 7, 20, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pm-slide { display: flex; flex-direction: column; flex-basis: calc(100vw - 2 * var(--margem) - 36px); padding: 8px 8px 22px; border-radius: 24px; background: var(--noite-1); border: 1px solid var(--linha-noite); opacity: 0.45; transition: opacity 0.4s var(--ease-ui); }
  .pm-slide.ativo { opacity: 1; }
  .pm-slide > :not(.pm-midia) { margin-inline: 12px; }
  .pm-midia { border-radius: 16px; }
  .pm-slide .produto-nome { margin-top: 20px; }
  .pm-prova { margin-top: 18px; margin-inline: 12px; padding: 16px; background: var(--noite-2); }
  .pm-slide .produto-stat { font-size: 44px; }
  .pm-aviso { margin-top: 10px; font: 500 12px/1.45 var(--fonte-texto); color: var(--luz-3); }
  .pm-fim { margin-top: auto; padding-top: 22px; }
  .pm-fim .produto-acoes { margin-top: 0; }

  /* tabela: cabeçalho preso, logo inteiro, check sem anel pesado */
  .comparar-cabeca { position: sticky; top: var(--topo); z-index: 3; background: #fff; box-shadow: 0 1px 0 var(--linha-papel); }
  .comparar-cabeca--publiqueme { margin: 0; padding: 22px 4px 12px; background: #fff; border-radius: 0; }
  .comparar-cabeca--publiqueme .marca { flex-direction: column; gap: 6px; padding: 10px 12px 8px; border-radius: 14px; background: var(--noite-1); }
  .comparar-cabeca--publiqueme .marca-nome { font-size: 12.5px; }
  .comparar-cabeca .chip--recomendado { position: absolute; top: 10px; left: 50%; translate: -50% 0; }
  .comparar-celula--publiqueme > span { box-shadow: 0 6px 14px -6px rgba(91, 63, 208, 0.6); }

  /* menu: lista perto do polegar e seção atual marcada */
  .menu-movel { justify-content: flex-end; gap: 40px; }
  .menu-movel-lista a { display: flex; align-items: center; gap: 14px; }
  .menu-movel-lista a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja-500); transform: scale(0); transition: transform 0.4s var(--ease-mola); }
  .menu-movel-lista a.ativo::before { transform: scale(1); }

  /* segmentos: a pausa na linha do título */
  .segmentos .cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .cabeca > .faixa-pausa { margin-top: 0; }

  /* teatro: controles embaixo do vídeo, X logo acima do player */
  .teatro-palco { aspect-ratio: auto; overflow: visible; background: transparent; box-shadow: none; }
  .teatro-video { aspect-ratio: 16 / 9; height: auto; border-radius: 14px; background: #000; }
  .teatro-controles { position: static; padding: 12px 2px 0; background: none; }
  .teatro.ocioso .teatro-controles { opacity: 1; transform: none; pointer-events: auto; }
  .teatro-fechar { top: auto; bottom: calc(50% + (100vw - 16px) * 0.28125 + 40px); right: 10px; }
  .teatro-fim { border-radius: 14px; }
  .teatro-fim .botao { min-width: 220px; }

  /* gaveta: topo fixo com a alça, etapas em linha do tempo vertical */
  .gaveta-corpo { margin-top: 52px; padding-top: 8px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px); mask-image: linear-gradient(180deg, transparent 0, #000 24px); }
  .g-etapas { grid-template-columns: 1fr; row-gap: 0; padding-left: 4px; }
  .g-etapas::before { display: block; left: 9px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .g-etapas li { padding: 0 0 16px 30px; }
  .g-etapas li::before { top: 3px; left: 3px; }
  .g-etapas li span { display: inline; margin: 0 8px 0 0; }

  /* criadores: o espaço entre o nome e a cidade não estica mais; quem absorve a sobra é o vídeo (dono, 03/10/2026) */

  /* rodapé: Legal em largura inteira e links fáceis de tocar */
  .rodape-grade > div:last-child { grid-column: 1 / -1; }
  .rodape ul { gap: 0; }
  .rodape li a { display: block; padding: 10px 0; }
}
@media (max-width: 380px) {
  .hero-titulo { font-size: 2.125rem; }
  .hero-texto { font-size: 15px; line-height: 1.45; }
}

/* ============================================================ revisão do especialista Android */
@media (hover: none) {
  .grao { display: none; }
  .topo[data-tema="dia"] { background: rgba(251, 250, 255, 0.97); }
  .topo[data-tema="noite"], .topo[data-tema="violeta"] { background: rgba(10, 7, 20, 0.95); }
  .topo[data-tema], .pm-trilho, .cartao-dia, .menu-movel { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cartao-dia { background: #fff; }
  a, button, .canal, .pm-chip, .cenario { -webkit-tap-highlight-color: transparent; }
}
.marca-traco { border-color: rgba(18, 10, 36, 0.55); }
.marca-traco::before { background: rgba(18, 10, 36, 0.7); }
.marca-x { color: rgba(18, 10, 36, 0.62); }
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .rodape { position: relative; } /* o rodapé do celular é mais alto que a tela: preso embaixo, a parte de cima nunca aparecia */
  .pm-trilho { overscroll-behavior-x: contain; }
  .pm-chip, .topo-acoes > .botao--p { height: 44px; }
  .menu-botao, .faixa-pausa, .link-discreto { position: relative; } /* a pausa do topo e o X da gaveta já são absolutos */
  .menu-botao::after, .faixa-pausa::after, .gaveta-fechar::after { content: ""; position: absolute; inset: -6px; }
  .link-discreto::after { content: ""; position: absolute; inset: -12px -4px; }
  .rodape li a { padding: 12px 0; }
  .hero .chip--vidro { font-size: 11px; letter-spacing: 0.04em; }
  .pm-chip .selo-breve { font-size: 10px; height: 20px; }
  .teatro-controles .botao-icone { width: 44px; height: 44px; }
  .teatro-progresso { margin-left: 6px; }
}
@media (max-width: 400px) {
  .comparar { grid-template-columns: 1.4fr 1fr 1fr; }
  .comparar-cabeca .chip--recomendado { font-size: 10px; }
}
@media (max-width: 359px) {
  .topo-acoes > .botao--p { display: none; }
}
/* celular deitado: continua no desenho do celular */
@media (hover: none) and (max-height: 540px) and (orientation: landscape) {
  .teatro-palco { width: min(100vw, calc(100svh * 16 / 9)); }
  .teatro-video { border-radius: 0; }
  .pm-slide { flex-basis: min(calc(100vw - 66px), 440px); }
  .cenario { flex-basis: 34vw; }
}

/* ============================================================ revisão do especialista iOS */
html { -webkit-tap-highlight-color: transparent; }
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } /* modo Pouca Energia: sem o play nativo por cima */
@media (hover: none) {
}
@media (max-width: 1099px) {
  .topo-menu, .topo-acoes > .topo-entrar { display: none; }
  .topo-barra { grid-template-columns: 1fr auto; }
  .menu-botao { display: inline-grid; place-items: center; align-content: center; gap: 5px; width: 44px; height: 44px; border-radius: 50%; color: inherit; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(233, 228, 255, 0.18); }
  .menu-botao i { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease-ui); }
  .topo[data-tema="dia"] .menu-botao { background: #fff; border-color: var(--linha-papel-forte); }
  body.menu-aberto .topo { color: #fff; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* menu aberto por cima de uma seção clara: o topo segue com data-tema="dia" e o fundo branco do botão
     vencia, deixando o X branco sobre branco (dono, 09/10/2026) */
  body.menu-aberto .topo .menu-botao { background: rgba(255, 255, 255, 0.1); border-color: rgba(233, 228, 255, 0.2); }
  body.menu-aberto .menu-botao i:first-child { transform: translateY(3.25px) rotate(45deg); }
  body.menu-aberto .menu-botao i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .menu-movel { overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .hero { min-height: 0; }
  .envoltorio, .topo-barra { padding-left: max(var(--margem), env(safe-area-inset-left)); padding-right: max(var(--margem), env(safe-area-inset-right)); }
  .comparar { grid-template-columns: 1.3fr 1fr 1fr; }
  .teatro-controles .botao-icone, .menu-botao, .gaveta-fechar { width: 44px; height: 44px; }
  .pm-slide .link-discreto { min-height: 44px; }
  .quanto .legenda a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
@media (max-width: 767px) and (max-height: 620px) {
  .hero-titulo { font-size: 2rem; margin: 12px 0 10px; }
  .hero-texto { font-size: 14.5px; line-height: 1.42; }
  .hero-acoes { margin-top: 16px; }
}

.menu-movel { background: var(--noite-0); } /* sólido: nada da página aparece por trás */

/* ============================================================ EmitaAI: indicação dentro de "Para empresas" (cores da marca dela) */
.emita-envoltorio { margin-top: clamp(56px, 6vw, 96px); }
.emita { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 3.4vw, 52px); border-radius: 28px; color: #f3f6fa; background: #0b1b31; box-shadow: 0 40px 100px -40px rgba(11, 27, 49, 0.6); transition: transform 0.5s var(--ease-ui), box-shadow 0.5s var(--ease-ui); }
.emita::before { content: ""; position: absolute; z-index: -1; right: -12%; bottom: -70%; width: 70%; height: 150%; background: radial-gradient(closest-side, rgba(255, 154, 82, 0.28), transparent); pointer-events: none; }
.emita::after { content: ""; position: absolute; z-index: -1; left: -10%; top: -60%; width: 50%; height: 120%; background: radial-gradient(closest-side, rgba(72, 109, 255, 0.16), transparent); pointer-events: none; }
.emita-selo { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font: 800 10.5px/1 var(--fonte-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #ffb27a; background: rgba(255, 154, 82, 0.12); border: 1px solid rgba(255, 154, 82, 0.32); }
.emita-logo { display: block; width: 156px; height: auto; margin-top: 20px; }
.emita-titulo { margin-top: 18px; font: 650 clamp(1.75rem, 2.4vw, 2.5rem) / 1.05 var(--fonte-titulo); font-stretch: 90%; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.emita-desc { margin-top: 12px; max-width: 36em; font-size: 15.5px; line-height: 1.55; color: #c3cedb; text-wrap: pretty; }
.emita-cta { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; background: #ff9a52; color: #0b1b31; font: 700 15px/1 var(--fonte-texto); box-shadow: 0 12px 30px -10px rgba(255, 154, 82, 0.6); }
.emita-cta .seta { width: 16px; height: 16px; }
.emita-docs-rotulo { font: 700 11px/1.2 var(--fonte-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #9fb0c3; margin-bottom: 14px; }
.emita-docs { display: grid; gap: 10px; }
.emita-docs li { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(217, 225, 234, 0.14); }
.emita-docs b { font: 700 16px/1 var(--fonte-titulo); font-stretch: 90%; letter-spacing: 0.01em; color: #ff9a52; }
.emita-docs span { font-size: 14.5px; line-height: 1.35; color: #d9e1ea; }
@media (hover: hover) {
  .emita:hover { transform: translateY(-4px); box-shadow: 0 50px 120px -40px rgba(11, 27, 49, 0.75); }
  .emita:hover .emita-cta .seta { animation: seta-troca 0.5s var(--ease-ui); }
}
.emita:focus-visible { outline: 3px solid #ff9a52; outline-offset: 4px; }
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .emita { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px 24px; border-radius: 24px; }
  .emita-logo { width: 132px; margin-top: 16px; }
  .emita-titulo { font-size: 1.75rem; }
  .emita-desc { font-size: 15px; }
  .emita-cta { width: 100%; justify-content: center; height: 50px; }
  .emita-docs-caixa { order: 2; }
  .emita-docs li { grid-template-columns: 62px 1fr; padding: 12px 14px; }
  .emita-docs span { font-size: 14px; }
}

/* ============================================================ celular: produtos presos na tela, cartões passando para o lado */
.produtos.pm-preso { height: 100svh; min-height: 0; padding: calc(var(--topo) + 2px) 0 8px; overflow: hidden; }
.produtos.pm-preso .produtos-grade { display: flex; flex-direction: column; height: 100%; }
.produtos.pm-preso .produtos-movel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.produtos.pm-preso .pm-trilho { position: static; margin: 0 calc(var(--margem) * -1) 10px; padding: 6px var(--margem); background: none; }
.produtos.pm-preso .pm-janela { flex: 1; min-height: 0; overflow: hidden; margin: 0 calc(var(--margem) * -1); }
.produtos.pm-preso .pm-carrossel { height: 100%; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0 var(--margem); will-change: transform; }
.produtos.pm-preso .pm-slide { flex: 0 0 calc(100vw - 2 * var(--margem) - 24px); height: 100%; overflow: hidden; padding: 8px 8px 14px; }
.produtos.pm-preso .pm-midia { flex: none; height: clamp(120px, 19svh, 210px); aspect-ratio: auto; }
.produtos.pm-preso .pm-slide .produto-nome { margin-top: 14px; font-size: 22px; gap: 6px; }
.produtos.pm-preso .pm-slide .produto-desc { margin-top: 8px; font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.produtos.pm-preso .pm-prova { margin-top: 12px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; }
.produtos.pm-preso .pm-prova .produto-stat-rotulo { grid-column: 1 / -1; margin-bottom: 6px; }
.produtos.pm-preso .pm-prova .produto-stat { grid-row: 2 / 4; margin: 0; font-size: 34px; }
.produtos.pm-preso .pm-prova .produto-stat-texto { margin: 0; font-size: 13px; line-height: 1.35; }
.produtos.pm-preso .pm-prova .produto-fonte { grid-column: 2; margin-top: 2px; font-size: 11px; }
.produtos.pm-preso .pm-aviso, .produtos.pm-preso .pm-slide .produto-beneficios, .produtos.pm-preso .pm-slide .produto-seguro { display: none; }
.produtos.pm-preso .pm-slide .produto-onde { margin-top: 12px; }
.produtos.pm-preso .pm-slide .produto-onde-rotulo { margin-bottom: 8px; font-size: 10.5px; }
.produtos.pm-preso .pm-slide .produto-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.produtos.pm-preso .pm-slide .produto-chips::-webkit-scrollbar { display: none; }
.produtos.pm-preso .pm-fim { padding-top: 12px; }
.produtos.pm-preso .pm-fim .produto-acoes { flex-direction: row; align-items: center; gap: 14px; }
.produtos.pm-preso .pm-fim .produto-acoes .botao { flex: 1; height: 46px; padding: 0 14px; font-size: 14.5px; }
.produtos.pm-preso .pm-fim .produto-acoes .link-discreto { flex: none; min-height: 44px; font-size: 14px; }
.produtos.pm-preso .produtos-aviso { display: flex; margin-top: 8px; font-size: 11px; line-height: 1.35; }
.produtos.pm-preso .produtos-aviso svg { width: 13px; height: 13px; }
@media (max-height: 720px) {
  .produtos.pm-preso .pm-slide .produto-desc { -webkit-line-clamp: 2; }
}
@media (min-height: 800px) {
  .produtos.pm-preso .pm-slide .produto-seguro { display: flex; margin-top: 10px; font-size: 12.5px; }
}

/* ============================================================ PClip: indicação dentro de "Para criadores" (cores da marca dele), selo "Em breve" */
.pclip { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 72px); align-items: center; margin-top: clamp(64px, 6vw, 104px); padding: clamp(28px, 3.4vw, 52px) clamp(28px, 4.4vw, 72px); border-radius: 28px; color: #eef2ff; background: radial-gradient(120% 140% at 0% 0%, #16235e 0%, #070b16 58%); border: 1px solid rgba(120, 140, 255, 0.18); box-shadow: 0 40px 100px -40px rgba(40, 70, 200, 0.45); transition: transform 0.5s var(--ease-ui), box-shadow 0.5s var(--ease-ui); }
.pclip::before { content: ""; position: absolute; z-index: -1; right: -8%; top: -40%; width: 60%; height: 150%; background: radial-gradient(closest-side, rgba(46, 168, 255, 0.22), transparent); pointer-events: none; }
.pclip::after { content: ""; position: absolute; z-index: -1; left: 30%; bottom: -70%; width: 50%; height: 120%; background: radial-gradient(closest-side, rgba(106, 92, 255, 0.25), transparent); pointer-events: none; }
.pclip-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pclip-selo { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font: 800 10.5px/1 var(--fonte-texto); letter-spacing: 0.14em; text-transform: uppercase; color: #a9c6ff; background: rgba(90, 140, 255, 0.12); border: 1px solid rgba(90, 140, 255, 0.32); }
.pclip .selo-breve { height: 26px; padding: 0 11px; }
.pclip-marca { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.pclip-marca img { width: 34px; height: auto; }
.pclip-marca span { font: 800 26px/1 var(--fonte-texto); letter-spacing: -0.03em; color: #fff; }
.pclip-olho { margin-top: 18px; font: 700 12px/1.2 var(--fonte-texto); letter-spacing: 0.16em; text-transform: uppercase; color: #8fb3ff; }
.pclip-titulo { margin-top: 10px; font: 650 clamp(1.75rem, 2.4vw, 2.5rem) / 1.05 var(--fonte-titulo); font-stretch: 90%; letter-spacing: -0.03em; color: #fff; text-wrap: balance; max-width: 18em; }
.pclip-desc { margin-top: 12px; max-width: 36em; font-size: 15.5px; line-height: 1.55; color: #b9c3de; text-wrap: pretty; }
.pclip-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.pclip-chips li { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(143, 179, 255, 0.22); background: rgba(255, 255, 255, 0.04); font: 600 13px/1 var(--fonte-texto); color: #dbe4ff; }
.pclip-cta { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; background: linear-gradient(90deg, #6a5cff, #2ea8ff); color: #fff; font: 700 15px/1 var(--fonte-texto); box-shadow: 0 12px 30px -10px rgba(46, 168, 255, 0.6); }
.pclip-cta .seta { width: 16px; height: 16px; }
.pclip-celular { width: clamp(180px, 16vw, 230px); aspect-ratio: 9 / 16; padding: 7px; border-radius: 32px; background: linear-gradient(145deg, #2a3354, #0a0f1f); box-shadow: 0 30px 80px -20px rgba(46, 168, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08); transform: rotate(4deg); transition: transform 0.6s var(--ease-ui); animation: pclip-flutua 6s ease-in-out infinite; }
.pclip-celular video { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; background: #0a0f1f; }
@keyframes pclip-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (hover: hover) {
  .pclip:hover { transform: translateY(-4px); box-shadow: 0 50px 120px -40px rgba(40, 70, 200, 0.6); }
  .pclip:hover .pclip-celular { transform: rotate(0deg); }
  .pclip:hover .pclip-cta .seta { animation: seta-troca 0.5s var(--ease-ui); }
}
.pclip:focus-visible { outline: 3px solid #8fb3ff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .pclip-celular { animation: none; } }
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .criar-grade + .pclip { margin-top: 56px; }
  .pclip { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px 24px; border-radius: 24px; }
  .pclip-celular { order: -1; justify-self: center; width: 176px; }
  .pclip-titulo { font-size: 1.75rem; }
  .pclip-desc { font-size: 15px; }
  .pclip-cta { width: 100%; justify-content: center; height: 50px; }
}

/* cartão preso: nada encolhe até sumir; "Ver detalhes" vira uma pílula sobre o vídeo */
.pm-detalhes { display: none; }
.produtos.pm-preso .pm-slide > * { flex-shrink: 0; }
.produtos.pm-preso .pm-midia { position: relative; }
.produtos.pm-preso .pm-detalhes { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; font: 700 12.5px/1 var(--fonte-texto); color: #fff; background: rgba(10, 7, 20, 0.55); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.produtos.pm-preso .pm-detalhes::after { content: ""; position: absolute; inset: -8px -6px; }
.produtos.pm-preso .pm-fim .produto-acoes .link-discreto { display: none; }
.produtos.pm-preso .pm-fim .produto-acoes .botao { width: 100%; }
@media (max-height: 720px) {
  .produtos.pm-preso .pm-midia { height: clamp(104px, 17svh, 150px); }
  .produtos.pm-preso .pm-slide .produto-nome { margin-top: 12px; font-size: 20px; }
  .produtos.pm-preso .pm-prova { margin-top: 10px; padding: 10px 12px; }
  .produtos.pm-preso .pm-prova .produto-stat { font-size: 30px; }
  .produtos.pm-preso .pm-slide .produto-onde { margin-top: 10px; }
  .produtos.pm-preso .pm-fim { padding-top: 10px; }
}
/* gaveta: benefícios no alto */
.g-beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.g-beneficios li { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--linha-papel); display: grid; gap: 3px; }
.g-beneficios strong { font: 700 14.5px/1.25 var(--fonte-texto); }
.g-beneficios span { font-size: 13px; color: var(--tinta-2); }
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .g-beneficios { grid-template-columns: 1fr; }
  .g-beneficios li { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
}

/* ============================================================ nada encolhe e se sobrepõe (Safari encolhia itens de coluna flexível) */
.hero-conteudo > *, .produto-painel > *, .pm-slide > * { flex-shrink: 0; }

/* cartão preso do celular: cabe até no iPhone SE com as barras do Safari */
.produtos.pm-preso .pm-slide .produto-desc { -webkit-line-clamp: 2; }
.produtos.pm-preso .pm-prova .produto-stat-texto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 370px) {
  .produtos.pm-preso .pm-prova .produto-stat-texto { font-size: 12.5px; }
  .produtos.pm-preso .pm-prova .produto-stat { font-size: 30px; }
}
@media (max-height: 600px) {
  .produtos.pm-preso .pm-midia { height: 88px; }
  .produtos.pm-preso .pm-slide { padding: 6px 6px 10px; }
  .produtos.pm-preso .pm-slide .produto-nome { margin-top: 8px; font-size: 18px; gap: 4px; }
  .produtos.pm-preso .pm-slide .produto-nome .num { display: none; }
  .produtos.pm-preso .pm-slide .produto-desc { margin-top: 4px; font-size: 13.5px; }
  .produtos.pm-preso .pm-prova { margin-top: 8px; padding: 8px 10px; }
  .produtos.pm-preso .pm-prova .produto-stat-rotulo { margin-bottom: 4px; font-size: 10px; }
  .produtos.pm-preso .pm-prova .produto-stat { font-size: 26px; }
  .produtos.pm-preso .pm-slide .produto-onde { margin-top: 8px; }
  .produtos.pm-preso .pm-slide .produto-onde-rotulo { display: none; }
  .produtos.pm-preso .pm-fim { padding-top: 8px; }
  .produtos.pm-preso .pm-fim .produto-acoes .botao { height: 44px; }
  .produtos.pm-preso .pm-trilho { margin-bottom: 6px; padding-top: 4px; padding-bottom: 4px; }
  .produtos.pm-preso .produtos-aviso { margin-top: 4px; font-size: 10.5px; }
}
/* a fonte do número ocupa a largura toda do bloco (uma linha só) */
.produtos.pm-preso .pm-prova .produto-fonte { grid-column: 1 / -1; margin-top: 6px; }
@media (max-height: 720px) {
  .produtos.pm-preso .pm-midia { height: clamp(92px, 15svh, 130px); }
  .produtos.pm-preso .pm-slide .produto-nome .num { display: none; }
}
@media (max-height: 600px) {
  .produtos.pm-preso .pm-midia { height: 72px; }
  .produtos.pm-preso .pm-prova .produto-fonte { margin-top: 4px; font-size: 10.5px; }
}

/* cartão preso: o vídeo cede espaço (o JS iguala a altura em todos os cartões) */
.produtos.pm-preso .pm-midia { flex: 1 1 0; height: auto; min-height: 64px; max-height: 210px; }

/* ============================================================ comparativo no celular: a mesma tabela do computador, com o pilar escuro */
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .comparar { grid-template-columns: minmax(0, 1fr) 70px 56px 56px; margin: 44px -12px 0; padding: 0 6px 0 12px; border-radius: 20px; }
  .comparar > .comparar-coluna-destaque { display: block; grid-row: 1 / span var(--corpo); inset: -14px 0 -10px; border-radius: 18px; }
  .comparar-cabeca, .comparar-cabeca--vazia { display: grid; position: sticky; top: var(--topo); z-index: 3; margin: 0; padding: 14px 2px 12px; gap: 3px; border-radius: 0; background: #fff; box-shadow: 0 1px 0 var(--linha-papel); }
  .comparar-cabeca strong { font-size: 10.5px; line-height: 1.15; letter-spacing: -0.01em; }
  .comparar-cabeca span { font-size: 9.5px; line-height: 1.25; }
  .comparar-cabeca--publiqueme { gap: 7px; background: var(--noite-1); box-shadow: 0 1px 0 var(--linha-noite); }
  .comparar-cabeca--publiqueme .marca { flex-direction: column; gap: 5px; padding: 0; background: none; border-radius: 0; }
  .comparar-cabeca--publiqueme .marca-icone { width: 22px; height: 22px; }
  .comparar-cabeca--publiqueme .marca-nome { font-size: 11.5px; }
  .comparar-cabeca .chip--recomendado { position: static; translate: none; height: 16px; padding: 0 4px; font-size: 7px; letter-spacing: 0.03em; }
  .comparar-item { grid-column: auto; padding: 14px 10px 14px 0; }
  .comparar-item strong { font-size: 13.5px; line-height: 1.28; }
  .comparar-item span { margin-top: 3px; font-size: 12px; line-height: 1.42; }
  .comparar-celula { padding: 0; border-top: 1px solid var(--linha-papel); }
  .comparar-celula--publiqueme { border-top-color: var(--linha-noite); }
  .comparar-celula--publiqueme > span { box-shadow: none; }
  .comparar .marca-sim { width: 24px; height: 24px; }
  .comparar .marca-sim svg { width: 13px; height: 13px; }
  .comparar .marca-traco { width: 20px; height: 20px; }
  .comparar .marca-traco::before { width: 8px; }
  .comparar .marca-x svg { width: 15px; height: 15px; }
  .comparar-pe { grid-template-columns: 1fr; padding: 24px 0 14px; }
  .comparar-pe .botao { grid-column: 1; width: 100%; height: 50px; font-size: 15px; }
  /* legenda: uma linha discreta para cada símbolo */
  .legenda-clara { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 22px; padding: 0 4px; }
  .legenda-clara div { display: block; position: relative; max-width: none; padding-left: 24px; font-size: 11.5px; line-height: 1.4; color: var(--tinta-2); }
  .legenda-clara div > span:first-child { position: absolute; left: 0; top: 0; width: 16px; height: 16px; }
  .legenda-clara .marca-sim svg { width: 9px; height: 9px; }
  .legenda-clara .marca-traco { border-width: 1.25px; }
  .legenda-clara .marca-traco::before { width: 7px; height: 1.5px; }
  .legenda-clara .marca-x svg { width: 12px; height: 12px; }
  .legenda-clara strong { display: inline; margin-right: 5px; font-size: 11.5px; color: var(--tinta-1); }
  .legenda-clara div > span:last-child { display: inline; font-size: 11.5px; }
  .comparativo .legenda-aviso { margin-top: 14px; padding: 0 4px; font-size: 11px; text-align: left; }
}
@media (max-width: 370px) {
  .comparar { grid-template-columns: minmax(0, 1fr) 70px 54px 54px; margin-inline: -14px; padding: 0 4px 0 12px; }
  .comparar-cabeca strong { font-size: 10px; }
  .comparar-item strong { font-size: 13px; }
  .comparar-item span { font-size: 11.5px; }
}

/* tela muito baixa (o JS liga): o vídeo já está no mínimo e o texto compacta um pouco */
.produtos.pm-preso.pm-apertado .pm-slide .produto-nome { margin-top: 8px; }
.produtos.pm-preso.pm-apertado .pm-slide .produto-desc { margin-top: 4px; font-size: 13px; line-height: 1.4; }
.produtos.pm-preso.pm-apertado .pm-prova { margin-top: 8px; padding-top: 8px; padding-bottom: 8px; }
.produtos.pm-preso.pm-apertado .pm-prova .produto-stat-texto { font-size: 12px; }
.produtos.pm-preso.pm-apertado .pm-slide .produto-onde { margin-top: 8px; }
.produtos.pm-preso.pm-apertado .pm-slide .produto-onde-rotulo { display: none; }
.produtos.pm-preso.pm-apertado .pm-fim { padding-top: 8px; }

/* criador com perfil publicado mas ainda sem arquivo: a moldura fica fixa, com o aviso no meio */
.criador-midia--vazia { aspect-ratio: 3 / 4; display: grid; place-items: center; padding: 16px; text-align: center; font: 700 12px/1.3 var(--fonte-texto); color: var(--luz-3); background: var(--noite-2); }

/* recado de manutenção da gestão (o mesmo do layout raiz): faixa fixa embaixo, acima de tudo */
.aviso-manutencao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); text-align: center; font: 700 14px/1.4 var(--fonte-texto); color: #1b1300; background: #fbbf24; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25); }

/* ============================================================ achados da auditoria de colisão (30/09) */
/* A entrada do GSAP mexe no transform; com transição de CSS no transform os dois brigam e o elemento para fora
   do lugar (os botões do topo ficavam 20 px abaixo, em cima do "Sou criador"; os cartões, 32 px). A transição
   do transform só vale ao passar o mouse ou tocar. */
.botao { transition: background-color 0.28s var(--ease-ui), border-color 0.28s var(--ease-ui), box-shadow 0.28s var(--ease-ui), color 0.16s; }
.botao:not([data-magnetico]):hover, .botao:active { transition: background-color 0.28s var(--ease-ui), border-color 0.28s var(--ease-ui), box-shadow 0.28s var(--ease-ui), color 0.16s, transform 0.28s var(--ease-ui); }
.criador { transition: border-color 0.3s; }
.criador:hover { transition: transform 0.5s var(--ease-ui), border-color 0.3s; }
.cartao-dia { transition: box-shadow 0.28s var(--ease-ui); }
.cartao-dia:hover { transition: transform 0.28s var(--ease-ui), box-shadow 0.28s var(--ease-ui); }
/* menu do celular deitado: o que não cabe rola, em vez de sumir pelo alto da tela */
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .menu-movel { justify-content: flex-start; }
  .menu-movel-lista { margin-top: auto; }
}
/* tabela em tela de 1024 (tablet deitado, notebook pequeno): a coluna escura cabe o selo e a marca */
@media (min-width: 768px) and (max-width: 1199px) and (min-height: 541px) {
  .comparar, .comparar-pe { grid-template-columns: minmax(0, 5fr) minmax(0, 2.6fr) minmax(0, 2fr) minmax(0, 2fr); }
  .comparar { padding: 0 20px; }
  .comparar-cabeca--publiqueme .marca-nome { font-size: 17px; }
  .comparar-cabeca .chip--recomendado { padding: 0 9px; font-size: 10px; letter-spacing: 0.1em; }
}
/* capítulo de produtos em notebook de tela baixa ou em tela de 1024: a página inteira cabe na tela e o painel
   fica mais justo, sem os três benefícios (continuam em "Ver detalhes") */
@media (min-width: 768px) and (min-height: 541px) and (max-height: 820px), (min-width: 768px) and (max-width: 1199px) and (min-height: 541px) {
  .produtos { min-height: 0; }
  .produto-painel .produto-nome { gap: 10px; font-size: clamp(1.75rem, calc(1.6vw + 8px), 2.5rem); }
  .produto-painel .produto-desc { margin-top: 10px; font-size: 1rem; line-height: 1.45; }
  .produto-painel .produto-beneficios { display: none; }
  .produto-painel .produto-onde { margin-top: 14px; }
  .produto-painel .produto-acoes { margin-top: 16px; }
  .produto-painel .produto-seguro { margin-top: 10px; }
}

/* ============================================================ o play do "Como a plataforma funciona?" (01/10/2026,
   "pulso + brilho"): o círculo branco com o play violeta, duas ondas saindo dele e o ponto laranja. */
.disco-miolo { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; transition: transform 0.45s var(--ease-mola); }
.disco-miolo svg { width: 18px; height: 18px; margin-left: 3px; color: var(--violeta-600); }
.disco-miolo::before, .disco-miolo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); animation: disco-onda 2.4s ease-out infinite; pointer-events: none; }
.disco-miolo::after { animation-delay: 1.2s; }
.disco-ponto { position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--laranja-500); box-shadow: 0 0 0 2px var(--violeta-600); }
@keyframes disco-onda { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.85); opacity: 0; } }
@media (hover: none) {
  .como-funciona:hover .disco-miolo { transform: none; }
}
/* celular: o anel violeta em volta do círculo, com o brilho correndo nele */
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .disco-miolo { width: var(--play); height: var(--play); border: 3px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(100deg, var(--violeta-600) 38%, #8a70ff 50%, var(--violeta-600) 62%); background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 260% 100%; background-position: 0 0, 120% 0; box-shadow: 0 10px 26px -6px rgba(91, 63, 208, 0.85); animation: play-brilho-anel 3.2s ease-in-out infinite; }
  .disco-miolo::before, .disco-miolo::after { inset: -3px; }
  .disco-miolo svg { width: calc(var(--play) * 0.36); height: calc(var(--play) * 0.36); }
  .disco-ponto { top: -3px; right: -3px; }
}
@keyframes play-brilho-anel { 0% { background-position: 0 0, 120% 0; } 55%, 100% { background-position: 0 0, -20% 0; } }
@media (prefers-reduced-motion: reduce) {
  .disco-miolo, .disco-miolo::before, .disco-miolo::after { animation: none; }
  .disco-miolo::before, .disco-miolo::after { opacity: 0; }
}
/* (aqui sobrava uma "}" sem par: inofensiva no fim do arquivo, mas engolia a primeira regra escrita depois dela) */

/* ============================================================ "a partir de" (dono, aprovado em 04/10/2026; conta em lib/preco-a-partir-de.ts) */
/* topo: uma linha curta abaixo dos botões, numa pílula de vidro escuro (o fundo anda; o vidro garante a leitura) */
.hero-precos { margin-top: 18px; display: grid; gap: 4px; padding: 10px 16px; border-radius: 16px; color: #fff; background: rgba(10, 7, 20, 0.55); border: 1px solid rgba(233, 228, 255, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* um serviço por linha (15/10/2026: cada linha leva o preço de uma unidade e, depois, o do pacote) */
.hero-precos ul { display: grid; gap: 2px; font: 500 15px/1.35 var(--fonte-texto); }
.hero-precos strong { font-weight: 800; color: var(--laranja-300); }
/* o pacote é o complemento: mesma linha, tom mais apagado */
.hero-precos-pacote { color: var(--luz-2); }
.hero-precos p { font: 500 12.5px/1.35 var(--fonte-texto); color: var(--luz-2); }
/* cartão do produto: o valor de uma unidade em destaque, o do pacote logo abaixo ("no pacote de 12, R$ 77 cada") */
.produto-preco { margin-top: 22px; }
.produto-preco-valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font: 500 15px/1.2 var(--fonte-texto); color: var(--luz-2); }
.produto-preco-valor strong { font: 700 clamp(1.875rem, calc(1.2vw + 14px), 2.375rem) / 1 var(--fonte-titulo); font-stretch: 88%; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.produto-preco-unidade { color: var(--luz-1); }
.produto-preco-nota { margin-top: 6px; font: 600 13px/1.3 var(--fonte-texto); color: var(--laranja-300); }
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .hero-precos { margin-top: 12px; width: 100%; padding: 9px 12px; }
  .hero-precos ul { font-size: 13.5px; column-gap: 14px; }
  .hero-precos p { font-size: 12px; }
  .pm-slide .produto-preco { margin: 0 0 14px; }
  .pm-slide .produto-preco-valor strong { font-size: 28px; }
}
/* cartão preso do celular: valor e "no pacote" na mesma linha, logo acima do botão */
.produtos.pm-preso .pm-slide .produto-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 10px; }
.produtos.pm-preso .pm-slide .produto-preco-valor { font-size: 13.5px; gap: 0 6px; }
.produtos.pm-preso .pm-slide .produto-preco-valor strong { font-size: 24px; }
.produtos.pm-preso .pm-slide .produto-preco-nota { margin: 0; font-size: 12.5px; }

/* ============================================================ celular: o vídeo "Como a plataforma funciona?" sobe (dono, 04/10/2026)
   Ficava no pé da tela, colado na barra do Safari e difícil de tocar. Agora vem logo abaixo de "Criar conta / Ver os
   produtos", antes da linha de preços e do "Sou criador"; largura toda e pelo menos 48 px de toque. Só a ORDEM visual
   muda no celular (o computador fica como está). Provado em 390x844 e 375x667 (tests/preco-a-partir-de.test.ts). */
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .hero-conteudo .como-funciona { order: 1; margin-top: 12px; width: 100%; min-height: 48px; }
  .hero-conteudo .hero-precos { order: 2; }
  .hero-conteudo .link-discreto { order: 3; }
}

/* ============================================================ celular: o bloco do topo enxuto (dono, 04/10/2026)
   "Subir o carrossel e aproveitar a tela": os criadores ocupam o topo inteiro e o texto fica mais compacto no pé — menos
   espaço entre título, parágrafo, botões, o vídeo e os preços; nada cortado; o vídeo inteiro na primeira tela, 48 px. */
@media (max-width: 767px), (hover: none) and (max-height: 540px) {
  .hero-conteudo { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .hero-titulo { margin: 8px 0 8px; }
  .hero-texto { font-size: 15px; line-height: 1.42; }
  .hero-acoes { margin-top: 12px; gap: 8px; }
  .hero-acoes .botao { height: 48px; }
  .hero-conteudo .como-funciona { order: 1; margin-top: 8px; width: 100%; min-height: 48px; padding: 3px 14px 3px 3px; }
  .hero-precos { margin-top: 8px; padding: 6px 12px; gap: 1px; border-radius: 14px; }
  .hero-precos ul { font-size: 13px; line-height: 1.3; column-gap: 12px; }
  .hero-precos p { font-size: 11.5px; line-height: 1.3; }
  .hero .link-discreto { margin-top: 8px; padding-bottom: 2px; }
}