/* LP "Sistema para pizzaria" do SoftPay (04/11/2026).
   Clone da composição da página de pizzaria que mais anuncia no nicho, com a marca, a copy e as cores trocadas.
   Cores de pizzaria em tom nobre (pedido do Alexandre + correção do Victor): vinho-tomate fundo, creme de massa,
   carvão de forno e manjericão discreto. Contraste do texto medido >= 4,5:1. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fontes/softpay-montserrat-v1.woff2?v=1") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --carvao: #15110e;
  --carvao-2: #1f1915;
  --creme: #fbf7f0;
  --creme-2: #f3ebdf;
  --linha: #e4d9c8;
  --tinta: #1d1713;
  --tinta-2: #4f453d;        /* 8,3:1 no creme */
  --tinta-clara: #efe6d9;    /* texto no carvão */
  --tinta-clara-2: #c9bcab;  /* 9,4:1 no carvão */
  --vinho: #8f1d1d;          /* botão: branco dá 8,4:1 */
  --vinho-escuro: #721515;
  --vinho-texto: #9b2222;    /* rótulo no creme: 6,6:1 */
  --tomate-claro: #e79a7e;   /* rótulo no carvão: 7,9:1 */
  --manjericao: #46612f;     /* 6,6:1 no creme */
  --manjericao-claro: #a7c48a;
  --ouro: #c9a46a;
  --raio: 14px;
  --raio-g: 22px;
  --shell: 1120px;
  --nav-h: 72px;
  --sp-sec: clamp(3rem, 1.6rem + 6vw, 7rem);
  --f-h1: clamp(2.05rem, 1.2rem + 3.4vw, 3.6rem);
  --f-h2: clamp(1.55rem, 1.05rem + 2vw, 2.45rem);
  --f-h3: clamp(1.02rem, .95rem + .3vw, 1.15rem);
  --f-corpo: clamp(.95rem, .92rem + .15vw, 1.02rem);
  --curva: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--f-corpo);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--creme);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.01em; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.casca { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* grão sutil do corpo (acabamento) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.6rem; border-radius: 999px;
  font: 700 .82rem/1.1 "Montserrat", sans-serif; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva), background-color .18s;
}
.btn--acao { background: var(--vinho); color: #fff; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .45); }
.btn--linha { background: transparent; color: var(--tinta); border-color: currentColor; }
.btn--linha-clara { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .btn--acao:hover { background: var(--vinho-escuro); transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .5); }
  .btn--linha:hover, .btn--linha-clara:hover { transform: translateY(-2px); }
}
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.nota-cta { margin-top: .9rem; font-size: .82rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.nota-cta span::before { content: "✓ "; color: var(--manjericao); font-weight: 700; }
.escuro .nota-cta { color: var(--tinta-clara-2); }
.escuro .nota-cta span::before { color: var(--manjericao-claro); }

.rotulo {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vinho-texto);
}
.rotulo::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.escuro .rotulo, .heroi .rotulo, .faixa-cta .rotulo, .nada .rotulo { color: var(--tomate-claro); }

/* ---------- cabeçalho: estendido no alto, cápsula depois de rolar ----------
   05/11/2026 (portão das correções do Victor): era uma faixa carvão a 92% presa na casca de 1120px, igual no alto e
   rolado, com o menu 73px fora do centro. Agora segue as irmãs (açaiteria e hamburgueria): no alto a barra é
   transparente e vai de ponta a ponta; depois de 24px de rolagem vira cápsula carvão (pizzaria.js põe data-rolou).
   A altura no alto continua var(--nav-h), então a hero não se mexe. */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top); }
.topo__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--nav-h); max-width: 100%; margin-inline: auto;
  padding-inline: clamp(1.25rem, .4rem + 2.6vw, 2.5rem);
  border: 1px solid transparent; border-radius: 999px;
  /* só cor e sombra transitam; largura e respiro trocam de uma vez e quem anima a troca é a entrada da cápsula,
     em transform e opacity (doutrina, seção 2: nada de animar largura nem padding) */
  transition: background-color .3s, box-shadow .3s, border-color .3s;
}
.topo[data-rolou="sim"] { padding-top: calc(env(safe-area-inset-top) + .6rem); }
.topo[data-rolou="sim"] .topo__barra {
  max-width: min(100% - 1.2rem, 68rem); height: 3.6rem; padding-inline: 1rem .5rem;
  background: rgba(21, 17, 14, .88); border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: no-preference) {
  .topo[data-rolou="sim"] .topo__barra { animation: capsula-entra .4s var(--curva) both; }
  @keyframes capsula-entra { from { opacity: .5; transform: translateY(-.6rem) scale(.98); } }
}
.topo__logo img { height: 34px; width: auto; }
.topo__nav { display: none; gap: 1.8rem; }
.topo__nav a { color: var(--tinta-clara); text-decoration: none; font-size: .85rem; font-weight: 600; padding-block: .75rem; }
.topo__nav a:hover { color: #fff; }
.topo__acoes { display: flex; gap: .5rem; }
.topo__acoes .btn { min-height: 44px; padding: .6rem 1rem; font-size: .72rem; }
@media (min-width: 64rem) {
  /* três colunas, as pontas iguais: o menu fica no centro da tela, e não puxado pela largura de "Entrar + Criar conta" */
  .topo__barra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .topo__logo { justify-self: start; }
  .topo__nav { display: flex; }
  .topo__acoes { justify-self: end; }
  .topo__acoes .btn { padding: .65rem 1.3rem; }
  /* a cápsula fica mais estreita que a barra do alto também em 1024 (lá 100% - 1,2rem dava cápsula mais larga) */
  .topo[data-rolou="sim"] .topo__barra { max-width: min(100% - 5rem, 68rem); }
}
@media (max-width: 22.49rem) {
  /* 320: a cápsula tem 300px; logo e botões menores para caber sem quebrar "Criar conta" */
  .topo__logo img { height: 28px; }
  .topo__acoes { gap: .35rem; }
  .topo__acoes .btn { padding-inline: .7rem; }
}

/* ---------- herói ---------- */
.heroi {
  position: relative; min-height: 100svh; display: grid; align-items: center; isolation: isolate;
  padding: calc(var(--nav-h) + 1.5rem) 0 2.5rem; color: #fff; background: var(--carvao); overflow: clip;
}
.heroi__foto { position: absolute; inset: 0; z-index: -2; }
.heroi__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
/* dois véus retos: o de cima segura o topo transparente (menu e "Entrar" sobre a foto), o da esquerda segura o texto */
.heroi::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(21,17,14,.72) 0, rgba(21,17,14,0) 9rem),
    linear-gradient(90deg, rgba(21,17,14,.96) 0%, rgba(21,17,14,.86) 34%, rgba(21,17,14,.25) 62%, rgba(21,17,14,0) 80%);
}
.heroi__texto { max-width: 36rem; }
.heroi h1 { font-size: var(--f-h1); letter-spacing: -.02em; }
.heroi h1 em { font-style: normal; color: #f0b49b; display: block; }
.heroi__sub { margin-top: 1.2rem; font-size: clamp(.98rem, .9rem + .35vw, 1.12rem); color: var(--tinta-clara); max-width: 33rem; }
.heroi__sub strong { color: #fff; }
.heroi .ctas { margin-top: 1.8rem; }
.heroi .nota-cta { color: var(--tinta-clara-2); }
.heroi .nota-cta span::before { color: var(--manjericao-claro); }
.heroi__selo {
  margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem;
  border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: var(--tinta-clara);
}
.heroi__selo b { color: #fff; }
@media (max-width: 47.99rem) {
  /* celular: o texto em cima e a foto do dono com o celular embaixo, de ponta a ponta, preenchendo o resto da tela.
     04/11/2026 (queixa do Victor, "tudo espremido no topo"): a foto saía com LARGURA 0 — o flex em coluna herdava
     align-items: center da grade do computador e a img é absoluta, então a caixa não tinha largura própria.
     Agora a coluna estica (align-items: stretch), o rótulo repetido sai (o h1 já diz "Sistema para pizzaria")
     e o par de botões fica lado a lado até 360. */
  .heroi { display: flex; flex-direction: column; align-items: stretch; padding: calc(var(--nav-h) + 1rem) 0 0; }
  /* 05/11/2026 (portão do Victor, fundo de ponta a ponta): aqui a foto não cobre a hero, então a parte do texto
     ganha luz própria de forno (o vinho da marca) como fundo da caixa; ela se apaga antes da foto começar */
  .heroi { background-image: radial-gradient(ellipse 85% 30% at 84% 14%, rgba(143, 29, 29, .46), rgba(143, 29, 29, 0) 70%); }
  .heroi::after { display: none; }
  .heroi .rotulo { display: none; }
  .heroi h1 { font-size: clamp(1.85rem, 10vw - .375rem, 2.15rem); }
  .heroi__foto { position: relative; inset: auto; z-index: 0; flex: 1 1 auto; align-self: stretch; width: 100%; min-height: 11rem; margin-top: 1.1rem; }
  .heroi__foto img { position: absolute; inset: 0; object-position: 50% 32%; }
  .heroi__foto::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; z-index: 1; background: linear-gradient(180deg, var(--carvao), rgba(21,17,14,0)); }
  .heroi__sub { font-size: .95rem; margin-top: .9rem; }
  .heroi .ctas { margin-top: 1.3rem; flex-wrap: nowrap; gap: .6rem; }
  .heroi .ctas .btn { flex: 0 0 auto; padding-inline: 1.1rem; }
  .heroi .ctas .btn--acao { flex: 1 1 auto; padding-inline: .8rem; }
  .heroi .nota-cta { margin-top: .8rem; font-size: .76rem; gap: .3rem .75rem; }
  .heroi__selo { display: none; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) and (max-aspect-ratio: 6/5) {
  /* tablet em pé (768x1024, 05/11/2026): o texto caía em cima do celular da foto e o h1 media 3,14:1 no pixel
     ("Meio a meio…" 1,17). Um véu que levasse o texto a 4,5:1 apagaria o celular, que é o sistema na mão; então a tela
     em pé usa a composição do celular (doutrina: tela em pé, a imagem na largura toda): texto em cima, a foto inteira
     embaixo, de ponta a ponta, preenchendo o resto da tela. Tablet deitado e computador não mudam. */
  .heroi { display: flex; flex-direction: column; align-items: stretch; padding: calc(var(--nav-h) + 2rem) 0 0; }
  /* a mesma luz de forno do celular (05/11/2026), apagada antes da foto */
  .heroi { background-image: radial-gradient(ellipse 80% 28% at 84% 14%, rgba(143, 29, 29, .46), rgba(143, 29, 29, 0) 70%); }
  .heroi::after { display: none; }
  .heroi__texto { max-width: 40rem; }
  .heroi__foto { position: relative; inset: auto; z-index: 0; flex: 1 1 auto; width: 100%; min-height: 20rem; margin-top: 2rem; }
  .heroi__foto img { position: absolute; inset: 0; object-position: 62% 38%; }
  .heroi__foto::before { content: ""; position: absolute; inset: 0 0 auto; height: 22%; z-index: 1; background: linear-gradient(180deg, var(--carvao), rgba(21,17,14,0)); }
}
@media (max-width: 22.49rem) {
  /* só abaixo de 360 px (320x568, 04/11/2026): o h1 ocupava 6 linhas e a foto só aparecia de 517 a 568, com a hero em
     693 px numa tela de 568. Letra, respiros e piso da foto menores: h1 em 5 linhas, hero em 100% da tela e a foto
     (pessoa com o celular e o print) com ~136 px dentro da 1ª tela. De 360 para cima nada muda. */
  .heroi { padding-top: calc(var(--nav-h) + .6rem); }
  .heroi h1 { font-size: 1.6rem; line-height: 1.12; }
  .heroi__foto { min-height: 8.5rem; margin-top: .8rem; }
  .heroi__sub { font-size: .88rem; margin-top: .6rem; }
  .heroi .ctas { margin-top: 1rem; }
  .heroi .nota-cta { margin-top: .6rem; }
}

/* ---------- selos e barra de recursos ---------- */
.selos { background: var(--creme); border-bottom: 1px solid var(--linha); }
.selos .casca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.2rem; padding-block: 1.6rem; }
.selos li { display: flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 600; color: var(--tinta-2); }
.selos svg { flex: none; width: 22px; height: 22px; color: var(--manjericao); }
@media (min-width: 48rem) { .selos .casca { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.barra { background: var(--creme-2); border-bottom: 1px solid var(--linha); }
.barra ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.barra li { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: 1rem .5rem; font-size: .8rem; font-weight: 700; text-align: center; }
.barra svg { flex: none; width: 18px; height: 18px; color: var(--vinho-texto); }
@media (min-width: 48rem) { .barra ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .barra li + li { border-left: 1px solid var(--linha); } }

/* ---------- seções ---------- */
.secao { padding-block: var(--sp-sec); }
.secao--cinza { background: var(--creme-2); }
.escuro { background: var(--carvao); color: var(--tinta-clara); }
.escuro h2, .escuro h3 { color: #fff; }
.centro { text-align: center; }
.centro .rotulo { justify-content: center; }
.titulo { font-size: var(--f-h2); }
.lead { margin-top: 1rem; color: var(--tinta-2); max-width: 40rem; }
.centro .lead { margin-inline: auto; }
.escuro .lead { color: var(--tinta-clara-2); }
.lead strong { color: var(--tinta); }
.escuro .lead strong, .escuro p strong { color: #fff; }

/* texto + imagem lado a lado (molde das seções alternadas da referência) */
.par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.par__texto > * + * { margin-top: 1rem; }
.par__texto p { color: var(--tinta-2); }
.escuro .par__texto p { color: var(--tinta-clara-2); }
.par__texto .ctas { margin-top: 1.6rem; }
.par__midia img { border-radius: var(--raio-g); width: 100%; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.par__midia--foto img { aspect-ratio: 4 / 3; object-fit: cover; }
.par__midia--tela { background: linear-gradient(160deg, #2a221d, #120e0b); padding: clamp(.6rem, .4rem + 1vw, 1rem); border-radius: calc(var(--raio-g) + 6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.par__midia--tela img { border-radius: 12px; box-shadow: none; }
@media (min-width: 48rem) {
  .par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .par--inv .par__midia { order: -1; }
}
@media (max-width: 47.99rem) { .so-pc { display: none; } .par__midia { order: -1; } }

.checks { display: grid; gap: .55rem; margin-top: 1.2rem; }
.checks li { position: relative; padding-left: 1.7rem; font-size: .92rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--manjericao) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 80% no-repeat;
}
.escuro .checks li::before { background-color: #5b7a3f; }

/* história: mídia grande + 4 cartões */
.historia__midia { margin: 2.5rem auto 0; max-width: 46rem; }
.historia__midia img { border-radius: var(--raio-g); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; box-shadow: 0 30px 70px -36px rgba(0,0,0,.5); }
.cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 2.5rem; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.3rem 1.1rem; text-align: left; height: 100%;
  transition: transform .2s var(--curva), box-shadow .2s var(--curva); }
.cartao__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #f6e7e2; color: var(--vinho-texto); margin-bottom: .9rem; }
.cartao__ico svg { width: 20px; height: 20px; }
.cartao h3 { font-size: var(--f-h3); }
.cartao p { margin-top: .5rem; font-size: .86rem; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) { .cartao:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); } }
@media (min-width: 48rem) { .cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
@media (max-width: 47.99rem) { .cartao p { font-size: .8rem; } }

/* cardápio digital: fileira de telas reais da loja */
.telas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 2.5rem; align-items: start; }
.telas figure { margin: 0; }
.telas figcaption { margin-top: .6rem; font-size: .78rem; font-weight: 600; color: var(--tinta-2); text-align: center; }
.telas figure:nth-child(2) { transform: translateY(-14px); }
@media (min-width: 48rem) { .telas { gap: 1.4rem; max-width: 52rem; margin-inline: auto; } }

/* comparativo */
.tabela { margin: 2.5rem auto 0; max-width: 54rem; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: clip; }
.tabela__linha { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.tabela__linha > * { padding: .85rem .9rem; font-size: .84rem; border-top: 1px solid var(--linha); text-align: left; }
.tabela__linha > :nth-child(2) { color: var(--tinta-2); }
.tabela__linha > :nth-child(3) { background: #fbefea; font-weight: 600; }
.tabela__linha > :first-child { font-weight: 700; }
.tabela__cab > * { border-top: 0; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.tabela__cab > :nth-child(3) { color: var(--vinho-texto); }
@media (max-width: 47.99rem) { .tabela__linha > * { padding: .7rem .55rem; font-size: .76rem; line-height: 1.4; } .tabela__cab > * { font-size: .6875rem; letter-spacing: .03em; } }

/* antes e depois */
.antes-depois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 2.5rem auto 0; max-width: 54rem; text-align: left; }
.lado { border-radius: var(--raio-g); padding: 1.3rem 1.1rem; border: 1px solid var(--linha); background: #fff; }
.lado--depois { background: #fbefea; border-color: #ecc9bd; }
.lado h3 { font-size: var(--f-h3); margin-bottom: .9rem; }
.lado--depois h3 { color: var(--vinho-texto); }
.lado li { position: relative; padding-left: 1.4rem; font-size: .84rem; margin-top: .55rem; color: var(--tinta-2); }
.lado li::before { content: "✕"; position: absolute; left: 0; color: #8a7d72; font-weight: 700; }
.lado--depois li { color: var(--tinta); }
.lado--depois li::before { content: "✓"; color: var(--manjericao); }
@media (max-width: 47.99rem) { .lado { padding: 1rem .8rem; } .lado li { font-size: .78rem; } }

/* planos: os 3 lado a lado, o do meio domina; no celular a lista do plano tocado abre numa faixa larga */
.planos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); gap: .5rem; margin: 3rem auto 0; max-width: 60rem; align-items: center; }
.plano { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 1.6rem 1.1rem 1.3rem; text-align: center; cursor: pointer;
  transition: transform .25s var(--curva), box-shadow .25s var(--curva), border-color .2s; }
.plano input { position: absolute; opacity: 0; pointer-events: none; }
.plano--destaque { padding-block: 2.2rem 1.7rem; border: 2px solid var(--vinho); box-shadow: 0 34px 70px -40px rgba(0,0,0,.4); }
.plano__selo { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--vinho); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 999px; white-space: nowrap; }
.plano h3 { font-size: 1rem; }
.plano__preco { margin-top: .5rem; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); font-weight: 800; color: var(--tinta); }
.plano__preco small { font-size: .78rem; font-weight: 600; color: var(--tinta-2); }
.plano__para { margin-top: .3rem; font-size: .8rem; color: var(--tinta-2); }
.plano .btn { margin-top: 1.1rem; width: 100%; padding-inline: .5rem; }
.plano__lista { text-align: left; margin-top: 1.1rem; }
.plano__lista li { position: relative; padding-left: 1.4rem; font-size: .84rem; margin-top: .45rem; }
.plano__lista li::before { content: "✓"; position: absolute; left: 0; color: var(--manjericao); font-weight: 800; }
.planos__faixa { display: none; }
@media (min-width: 48rem) {
  .planos { gap: 1rem; }
  .plano:not(.plano--destaque) { transform: scale(.965); }
}
@media (max-width: 47.99rem) {
  .plano { padding: 1.3rem .45rem 1rem; }
  .plano--destaque { padding-block: 1.7rem 1.2rem; }
  .plano__para, .plano__lista { display: none; }
  /* piso de 11px para texto que se toca ou se lê (antes 9,9 e 8,6px) */
  .plano .btn { min-height: 44px; font-size: .6875rem; letter-spacing: .01em; padding-inline: .3rem; }
  .plano__selo { font-size: .6875rem; letter-spacing: .02em; padding: .3rem .5rem; }
  .plano:has(input:checked) { border-color: var(--vinho); }
  .planos__faixa { display: block; grid-column: 1 / -1; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.1rem; margin-top: .4rem; }
  .planos__faixa h4 { font-size: .9rem; }
  .planos__faixa ul { margin-top: .4rem; }
  .planos__faixa li { position: relative; padding-left: 1.3rem; font-size: .84rem; margin-top: .35rem; }
  .planos__faixa li::before { content: "✓"; position: absolute; left: 0; color: var(--manjericao); font-weight: 800; }
}
.planos-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 60rem; margin: 1.2rem auto 0; }
.planos-extra a { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: var(--raio); background: #fff; border: 1px dashed var(--linha); text-decoration: none; text-align: left; font-size: .82rem; color: var(--tinta-2); }
.planos-extra b { color: var(--tinta); font-size: .9rem; }

/* guia rápido: 6 passos (3 + 3) */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 2.5rem; text-align: left; }
.passo { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.2rem 1rem; height: 100%; }
.passo .cartao__ico { margin-bottom: .7rem; }
.passo h3 { font-size: .98rem; }
.passo p { margin-top: .45rem; font-size: .84rem; color: var(--tinta-2); }
@media (min-width: 48rem) { .passos { gap: 1rem; } }
@media (max-width: 47.99rem) { .passo { padding: .9rem .6rem; } .passo h3 { font-size: .8rem; } .passo p { display: none; } .passo .cartao__ico { width: 32px; height: 32px; } }

/* perguntas */
.faq { margin: 2.5rem auto 0; max-width: 60rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; text-align: left; align-items: start; }
.faq details { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.1rem; font-weight: 700; font-size: .93rem; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.3rem; line-height: 1; color: var(--vinho-texto); transition: transform .25s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.1rem 1.1rem; color: var(--tinta-2); font-size: .9rem; }
.faq [data-escondida] { display: none; }
.faq.aberta [data-escondida] { display: block; }
.ver-mais { display: flex; justify-content: center; margin-top: 1.4rem; }
@media (min-width: 48rem) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* faixa escura de teste grátis (molde do cartão "guia grátis") */
.faixa-cta { background: var(--carvao); color: var(--tinta-clara); border-radius: var(--raio-g); padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.faixa-cta h2 { color: #fff; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); }
.faixa-cta p { margin-top: .6rem; color: var(--tinta-clara-2); font-size: .9rem; }
@media (min-width: 48rem) { .faixa-cta { grid-template-columns: minmax(0, 1.5fr) auto; } }

/* suporte */
.suporte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.suporte__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.suporte__lista li { border-top: 2px solid rgba(255,255,255,.14); padding-top: .9rem; font-size: .88rem; color: var(--tinta-clara-2); }
.suporte__lista b { display: block; color: #fff; font-size: .98rem; margin-bottom: .3rem; }
@media (min-width: 48rem) { .suporte { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }

/* recursos (no lugar do mural de avaliações da referência) */
.recursos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.resumo { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 1.5rem; align-self: start; }
.resumo__preco { font-size: 2.2rem; font-weight: 800; margin-top: .4rem; }
.resumo__preco small { font-size: .85rem; color: var(--tinta-2); font-weight: 600; }
.resumo p { margin-top: .5rem; font-size: .88rem; color: var(--tinta-2); }
/* o botão quebra em duas linhas quando a coluna é estreita: no tablet (768) "Testar 7 dias grátis" passava 17px da
   pílula e as letras brancas caíam no cartão branco (1,02:1 no portão, 05/11/2026) */
.resumo .btn { margin-top: 1.1rem; width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-inline: 1rem; }
.grade-recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.grade-recursos li { background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: .8rem .9rem; font-size: .84rem; }
.grade-recursos b { display: block; font-size: .9rem; margin-bottom: .2rem; }
@media (min-width: 48rem) { .recursos { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); } .grade-recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .grade-recursos li span { display: none; } .grade-recursos b { margin: 0; font-size: .82rem; } }

/* rodapé */
.rodape { background: var(--carvao); color: var(--tinta-clara-2); padding-top: 3.5rem; font-size: .86rem; }
.rodape__colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; }
.rodape h4 { color: #fff; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .8rem; }
.rodape li + li { margin-top: .45rem; }
.rodape a { text-decoration: none; color: var(--tinta-clara-2); display: inline-block; padding-block: .15rem; }
.rodape a:hover { color: #fff; }
.rodape__marca img { height: 32px; width: auto; margin-bottom: .8rem; }
.rodape__base { margin-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.3rem; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: center; font-size: .8rem; }
.rodape__visionx { display: inline-flex; align-items: center; gap: .5rem; }
.rodape__x { width: 16px; height: 16px; }
@media (min-width: 48rem) { .rodape__colunas { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }

/* barra de ação no celular depois do herói */
.cta-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: .5rem; padding: .6rem .8rem max(.6rem, env(safe-area-inset-bottom));
  background: rgba(21,17,14,.94); backdrop-filter: blur(8px); transform: translateY(110%); transition: transform .3s var(--curva); }
.cta-fixa .btn { flex: 1 1 0; min-height: 44px; font-size: .72rem; padding-inline: .5rem; }
.cta-fixa[data-visivel="sim"] { transform: none; }
@media (min-width: 48rem) { .cta-fixa { display: none; } }
/* celular: o rodapé não fica atrás da barra fixa */
@media (max-width: 47.99rem) { .rodape { padding-bottom: 4.6rem; } }

/* revelar ao entrar na tela (só depois que o script roda) */
.js-ok .revelar { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--curva), transform .5s var(--curva); transition-delay: var(--atraso, 0ms); }
.js-ok .revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-ok .revelar { transform: none; transition: opacity .2s linear; }
  .btn, .cartao, .plano, .cta-fixa { transition: none; }
  .plano:not(.plano--destaque) { transform: none; }
  .telas figure:nth-child(2) { transform: none; }
}

/* 09/11/2026: "Baixar para iPhone" na barra (app SoftPay PDV na App Store). Celular: só o ícone, 44x44, sem empurrar Entrar/Criar conta;
   600-1023: "iPhone"; 1200+: "Baixar para iPhone". */
.topo__acoes .topo__iphone { gap: .45rem; white-space: nowrap; align-items: center; }
.topo__acoes .topo__iphone svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topo__iphone .t-longo { display: none; }
@media (max-width: 37.4375rem) {
  .topo__acoes .topo__iphone { width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; justify-content: center; }
  .topo__iphone-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 75rem) { .topo__iphone .t-curto { display: none; } .topo__iphone .t-longo { display: inline; } }

/* 10/11/2026: simulador REAL no lugar do print solto: iPhone 16 Pro Max preto da extensão Mobile Simulator com a tela real da loja dentro
   (a tela entra pelos números do viewport da moldura, nunca de olho) */
.sim { position: relative; width: 100%; aspect-ratio: 481 / 991; filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .34)); }
.sim__moldura { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; }
.sim__tela { position: absolute; z-index: 1; overflow: clip; background: #fff; left: 4.3659%; top: 1.8163%; width: 91.4761%; height: 96.4682%; border-radius: 17.73% / 8.16%; }
.sim__tela img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sim__ilha { position: absolute; z-index: 4; left: 35.863%; top: 3.33%; width: 28.441%; height: 3.976%; border-radius: 99px; background: #050505; pointer-events: none; }

/* 10/11/2026: barra de status do iOS no topo da tela (hora 9:41, sinal, wi-fi, bateria), na altura da área segura do iPhone 16 Pro Max
   (62/956 = 6,5%); a ilha da câmera fica SOBRE ela e o print começa logo abaixo, sem esticar. A barra usa a cor do topo do próprio print. */
.sim__tela { container: tela / size; --barra: 6.5%; }
.sim__tela img { position: absolute; left: 0; top: var(--barra); width: 100%; height: calc(100% - var(--barra)); }
.sim__status { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: var(--barra); display: flex; align-items: center; justify-content: space-between; padding: 0 9.5cqw 0 12cqw; font-size: 3.7cqw; font-weight: 600; letter-spacing: -.01em; line-height: 1; color: #0b1b2c; background: #fff; pointer-events: none; }
.sim__status--roxo { color: #fff; background: linear-gradient(90deg, #6530bf, #693abf 50%, #7b52c2); }
.sim__status--gelo { background: #f6f8fa; }
.sim__sinais { display: inline-flex; align-items: center; gap: 1.1cqw; }
.sim__sinais svg { fill: currentColor; height: 2.7cqw; width: auto; }
.sim__sinais .sim__bat { height: 3cqw; }

/* 10/11/2026: telefone de 320 px: botão de texto longo quebra a linha em vez de passar da tela (rolagem lateral de 12 px) */
@media (max-width: 23.99rem) {
  .ctas .btn { max-width: 100%; white-space: normal; text-align: center; min-width: 0; }
  .heroi .ctas .btn--acao { flex: 1 1 0; }
}

.rodape__marca p a { display: inline; color: var(--tinta-clara-2); text-decoration: underline; text-underline-offset: .2em; padding-block: 0; }
.rodape__marca p a:hover { color: #fff; }