/* Prezyn, landing page. O desenho segue a página do Bling, a pedido do dono: fundo claro, título leve com parte em negrito, cápsulas,
   poucos blocos escuros e cartões soltos. As cores são só três, a pedido do dono (10/11/2026): preto, branco e o laranja da marca. Os cinzas são
   tons do preto; não entra marrom, creme, verde, vermelho nem azul. Os textos e as fotos são do Prezyn. */
:root {
  --laranja: #FF7A00;
  --laranja-forte: #FF8F26;
  --laranja-texto: #C45200; /* o laranja em letra pequena sobre o branco: mais fechado, para dar leitura */
  --laranja-claro: #FFF1E3; /* o fundo dos destaques */
  --tinta: #0A0A0A;
  --escuro: #0A0A0A;
  --escuro-alto: #1F1F1F;
  --texto: #525252;
  --no-escuro: #D4D4D4; /* o texto de apoio em cima do preto */
  --branco: #FFFFFF;
  --cinza: #F5F5F5;
  --cinza-claro: #FAFAFA;
  --linha: #E5E5E5;

  --fonte: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-peq: 0.9375rem;
  --t-titulo: clamp(1.875rem, 1.5rem + 1.5vw, 2.625rem);

  --margem: clamp(16px, 4vw, 56px);
  --largura: clamp(1120px, 90vw, 1600px);
  --vao: clamp(56px, 7vw, 100px);
  --sombra: 0 24px 60px -28px rgba(0, 0, 0, 0.3);
  --sombra-leve: 0 16px 40px -18px rgba(0, 0, 0, 0.28);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 96px; background: var(--branco); }
body { margin: 0; background: var(--branco); color: var(--tinta); font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
input, button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
h1, h2 { font-size: var(--t-titulo); font-weight: 400; letter-spacing: -0.015em; line-height: 1.14; text-wrap: balance; }
h1 b, h2 b { font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
::selection { background: var(--laranja); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--laranja-texto); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: var(--margem); top: -80px; z-index: 9; padding: 10px 16px; background: var(--laranja); color: var(--tinta); border-radius: 999px; }
.pular:focus { top: 8px; }
.dentro { max-width: var(--largura); margin-inline: auto; }
.centro { text-align: center; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.verde { color: inherit; font-weight: 600; }
.vermelho { color: var(--laranja-texto); font-weight: 600; }

/* ---------- Botões ---------- */
a, button, summary, label { touch-action: manipulation; }
button, .botao, .pilula, summary { -webkit-user-select: none; user-select: none; }
.chip:active, .abas button:active, .comp-menu button:active, .menu-botao:active, .carro-setas button:active { transform: scale(0.97); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--laranja); color: var(--tinta); font-size: var(--t-peq); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 180ms ease; }
.botao:active { transform: scale(0.97); }
.botao-contorno { padding-inline: 14px; background: none; font-weight: 500; }
.pilula { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--laranja); color: var(--tinta); font-size: 1.0625rem; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 180ms ease; }
.pilula:active { transform: scale(0.97); }
.pilula-alta { min-height: 56px; }
.pilula-cheia { width: 100%; }
.pilula-linha { background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .botao:hover, .pilula:hover { background: var(--laranja-forte); }
  .botao-contorno:hover { background: var(--cinza); }
  .pilula-linha:hover { background: var(--cinza-claro); }
}

/* ---------- O topo, igual em todas as páginas e em qualquer altura da rolagem, a pedido do dono (10/11/2026): a logo num cartão, uma ligação
   branca e o cartão do menu. A ligação é o ::before da barra, posto entre os dois pela ordem, sem mexer no HTML das três páginas. O conjunto leva
   uma sombra leve, para aparecer também em cima do branco; no cartão do menu ela acompanha o desenho inteiro, com o pescoço entre as duas cápsulas ---------- */
.barra { position: sticky; top: 12px; z-index: 5; padding-inline: var(--margem); }
/* A sombra é uma só, no desenho inteiro (os dois cartões e a ligação): assim não escurece onde as partes se encontram */
.barra-dentro { display: flex; align-items: center; max-width: calc(var(--largura) + 48px); margin-inline: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1)); }
/* A ligação entre o cartão da logo e o do menu tem o mesmo desenho do pescoço que une o menu aos botões (.pescoco), a pedido do dono ("tem que
   lembrar essa"): sai de cada cartão na altura toda, fecha na mesma curva até a cintura (22 px) e segue reta até o outro. Cada ponta tem 42 px, como
   meio pescoço: 26 ficam por baixo da ponta redonda do cartão e 16 aparecem. Quando o espaço é curto (celular), as pontas encolhem e se encontram no
   meio, sem a parte reta, e a ligação fica igual ao pescoço */
.barra-dentro::before { content: ''; order: 1; flex: 1 1 0; min-width: 62px; height: 52px; margin-inline: -26px; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 52' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0 0C21 0 21 15 42 15V37C21 37 21 52 0 52Z'/%3E%3C/svg%3E") left center / min(42px, 50.5%) 100% no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 52' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M42 0C21 0 21 15 0 15V37C21 37 21 52 42 52Z'/%3E%3C/svg%3E") right center / min(42px, 50.5%) 100% no-repeat,
  linear-gradient(var(--branco), var(--branco)) center / max(0px, calc(100% - 83px)) 22px no-repeat; }
/* O cartão da logo fica por cima da ligação, que entra por baixo dele: senão ela cobre o fim da logo */
.marca { position: relative; z-index: 1; order: 0; display: inline-flex; flex: none; align-items: center; min-height: 52px; padding-inline: 20px; background: var(--branco); border-radius: 999px; color: var(--tinta); text-decoration: none; }
.marca-logo { width: auto; height: 36px; }
.marca-logo-rodape { width: auto; height: 52px; }
.barra-pilulas { order: 2; display: flex; align-items: center; }
.barra-menu { position: relative; display: flex; align-items: center; min-height: 52px; padding-inline: 12px; background: var(--branco); border-radius: 999px; }
.menu { display: flex; gap: 4px; font-size: var(--t-peq); font-weight: 500; }
.menu a { padding: 8px 14px; border-radius: 999px; text-decoration: none; transition: background-color 150ms ease; }
.menu-entrar { display: none; }
.menu-botao { display: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--laranja); cursor: pointer; }
.menu-botao span { display: block; width: 16px; height: 2px; margin: 3px auto; border-radius: 2px; background: var(--tinta); }
.pescoco { flex: none; width: 84px; height: 52px; margin-inline: -26px; fill: var(--branco); }
.barra-acoes { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 6px; background: var(--branco); border-radius: 999px; }
/* Nos Termos e na Privacidade não há menu: o cartão da direita é só o dos botões */
.barra-dentro > .barra-acoes { order: 2; }
.botao-contorno .ic { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--cinza); } }

/* ---------- Abertura ---------- */
.abre { position: relative; margin-top: -76px; padding: clamp(112px, 11vw, 148px) var(--margem) clamp(84px, 8vw, 116px); background: var(--cinza); overflow: hidden; }
.linhas { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(0, 0, 0, 0.13); stroke-width: 1.25; pointer-events: none; }
.abre-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 6vw, 88px); align-items: center; max-width: var(--largura); margin-inline: auto; }
.balao { position: relative; display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--escuro); color: var(--branco); font-size: 0.875rem; font-weight: 600; }
.balao::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 3px; background: inherit; transform: rotate(45deg); }
.abre h1 { margin-top: 20px; }
.vistos { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 22px; padding: 8px 16px; background: rgba(255, 255, 255, 0.75); border-radius: 22px; color: var(--laranja-texto); font-size: var(--t-peq); font-weight: 500; }
.vistos li { position: relative; padding-left: 20px; }
.vistos li::before { content: ''; position: absolute; left: 4px; top: 0.26em; width: 5px; height: 10px; border: solid currentColor; border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); }
.pega { display: flex; gap: 10px; margin-top: 28px; }
.pega .pilula { flex: none; }
.pega-email { flex: 1; min-width: 0; min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--branco); color: var(--tinta); font-size: 1rem; }
.pega-email::placeholder { color: var(--texto); opacity: 1; }
.pega-email:focus { outline: 2px solid var(--laranja-texto); outline-offset: 1px; }
.abre-nota { margin-top: 12px; font-size: 0.875rem; color: var(--texto); }
.abre-visual { position: relative; justify-self: end; width: 100%; max-width: 600px; }
.abre-foto { width: 100%; border-radius: 24px; }

/* Os cartões soltos sobre a foto */
.flut { position: absolute; padding: 12px 16px; background: var(--branco); border-radius: 16px; box-shadow: var(--sombra-leve); font-size: 0.8125rem; line-height: 1.35; }
.flut small { display: block; font-size: 0.75rem; color: var(--texto); }
.flut b { font-weight: 600; }
.flut em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flut-titulo { display: block; margin-bottom: 6px; font-size: 0.875rem; }
.flut-peca { left: -6%; top: 52%; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.flut-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--laranja); color: var(--tinta); }
.flut-peca b { display: block; font-size: 0.875rem; }
.flut-valor { display: inline-block; margin-top: 4px; padding: 1px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flut-pedidos { left: -12%; bottom: -5%; display: grid; gap: 6px; }
.flut-pedidos p { display: grid; grid-template-columns: 92px 84px 72px; align-items: center; gap: 4px; }
.flut-pedidos em { text-align: right; }
.flut-mes { right: -7%; bottom: -9%; display: grid; gap: 4px; min-width: 176px; }
.flut-mes p { display: flex; justify-content: space-between; gap: 14px; }
.st { justify-self: start; padding: 1px 10px; border-radius: 999px; font-style: normal; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.st-prod { background: var(--laranja-claro); color: var(--laranja-texto); }
.st-pronto { background: var(--tinta); color: var(--branco); }
.st-fazer { background: var(--cinza); color: var(--texto); }
.st-entregue { background: var(--branco); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha); }

/* ---------- A faixa branca em onda ---------- */
.faixa { position: relative; z-index: 1; padding-block: 18px; background: var(--branco); }
.onda { position: absolute; left: 0; width: 100%; height: 34px; fill: var(--branco); pointer-events: none; }
.onda-topo { bottom: calc(100% - 1px); }
.onda-baixo { top: calc(100% - 1px); }
.faixa-janela { display: flex; width: min(var(--largura), 100%); margin-inline: auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.faixa-trilho { display: flex; flex: none; align-items: center; gap: clamp(32px, 4vw, 56px); padding-right: clamp(32px, 4vw, 56px); animation: passa 40s linear infinite; }
.faixa-trilho li { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.faixa-trilho .ic { color: var(--laranja-texto); }
.faixa-janela:hover .faixa-trilho { animation-play-state: paused; }
@keyframes passa { to { transform: translateX(-100%); } }

/* ---------- A tela do sistema na moldura ---------- */
.tela { padding: calc(var(--vao) + 16px) var(--margem) var(--vao); background: linear-gradient(var(--cinza-claro), var(--branco) 82%); overflow: hidden; }
.tela h2 { max-width: 20em; margin-inline: auto; }
.tela-lead { max-width: 36em; margin: 14px auto 0; color: var(--texto); }
.moldura-area { position: relative; max-width: 1200px; margin: clamp(32px, 4vw, 52px) auto 0; }
.moldura-formas { position: absolute; left: -12%; right: -12%; top: 6%; width: 124%; max-width: none; fill: var(--laranja); opacity: 0.85; pointer-events: none; }
.moldura { position: relative; padding: clamp(8px, 1.2vw, 16px); background: rgba(255, 255, 255, 0.65); border-radius: clamp(20px, 2.6vw, 32px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 40px 110px -30px rgba(255, 122, 0, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* A imagem é cortada embaixo, onde começa um bloco que não coube inteiro */
.moldura img { width: 100%; aspect-ratio: 1920 / 962; object-fit: cover; object-position: top; border-radius: clamp(14px, 1.8vw, 22px); }
.moldura-pilulas { position: absolute; right: clamp(-104px, calc((100vw - 1320px) / -2), -8px); top: 14%; display: grid; justify-items: end; gap: 10px; }
.moldura-pilulas li { padding: 8px 24px; border-radius: 999px; background: var(--laranja); box-shadow: var(--sombra-leve); font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.25rem); font-weight: 500; }
.moldura-pilulas li:nth-child(2) { margin-right: 28px; background: var(--branco); }
.moldura-pilulas li:nth-child(3) { background: var(--escuro); color: var(--branco); }
.nota-plano { margin-top: 20px; font-size: 0.875rem; color: var(--texto); }

/* ---------- O bloco escuro com a foto de ponta a ponta ---------- */
.divide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--escuro); color: var(--branco); }
.divide-foto { position: relative; min-height: clamp(380px, 38vw, 520px); }
.divide-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 24% 60%; }
.foto-faixa { left: 24px; bottom: 24px; display: grid; gap: 1px; max-width: calc(100% - 96px); color: var(--tinta); }
.foto-faixa span { font-size: 0.8125rem; color: var(--texto); }
.foto-faixa b { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.divide-texto { align-self: center; padding: clamp(40px, 5vw, 64px) var(--margem) clamp(40px, 5vw, 64px) clamp(32px, 5vw, 72px); }
.divide-texto h2 b { color: var(--laranja); }
.divide-texto p { max-width: 30em; margin-top: 16px; color: var(--no-escuro); }
.divide-texto .pilula { margin-top: 24px; }
.divide { position: relative; }
.divide-texto { position: static; }
.divide-curva { position: absolute; left: calc(50% - 43px); top: 0; width: 44px; height: 100%; fill: var(--escuro); }

/* ---------- Os recursos (redesenhados em 10/11/2026, o dono achou a versão anterior ruim): à esquerda as três partes, cada uma com o ícone num
   círculo e ligadas por uma linha, do preço ao estoque; à direita a tela da parte aberta, num palco preto. No celular vira uma lista que abre ---------- */
.bl { padding: var(--vao) var(--margem); background: var(--branco); }
.titulo-secao { max-width: 21em; margin-inline: auto; }
.acordeao { max-width: 1280px; margin: clamp(32px, 4vw, 56px) auto 0; }
.ac-item { border-top: 1px solid var(--linha); }
.ac-item:last-child { border-bottom: 1px solid var(--linha); }
.ac-item h3 { font-size: inherit; font-weight: inherit; }
.ac-cab { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; width: 100%; padding: 16px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ac-ic { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cinza); color: var(--texto); transition: background-color 200ms ease, color 200ms ease; }
.ac-ic .ic { width: 22px; height: 22px; }
.ac-item.aberto .ac-ic { background: var(--escuro); color: var(--laranja); }
.selo { display: inline-block; padding: 2px 14px; border-radius: 999px; background: var(--cinza); color: var(--texto); font-size: 0.8125rem; font-weight: 600; }
.selo-laranja { background: var(--laranja); color: var(--tinta); }
/* Na lista, o nome da parte é uma legenda em cima do título, não uma etiqueta */
.ac-cab .selo { grid-column: 2; align-self: end; padding: 0; background: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: color 200ms ease; }
.ac-item.aberto .ac-cab .selo { color: var(--laranja-texto); }
.ac-titulo { grid-column: 2; align-self: start; font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); font-weight: 600; line-height: 1.3; color: var(--texto); transition: color 200ms ease; }
.ac-item.aberto .ac-titulo { color: var(--tinta); }
/* A seta de abrir só existe na lista do celular e do tablet */
.acordeao.ligado .ac-cab { grid-template-columns: 44px minmax(0, 1fr) 20px; }
.acordeao.ligado .ac-cab::after { content: ''; grid-column: 3; grid-row: 1 / span 2; place-self: center; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--texto); border-bottom: 2px solid var(--texto); transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
.acordeao.ligado .ac-item.aberto .ac-cab::after { margin-top: 4px; transform: rotate(-135deg); }
@media (hover: hover) and (pointer: fine) {
  .ac-item:not(.aberto) .ac-cab:hover .ac-titulo { color: var(--tinta); }
  .ac-item:not(.aberto) .ac-cab:hover .ac-ic { background: var(--linha); color: var(--tinta); }
}
.ac-corpo { padding-bottom: 18px; }
.ac-corpo[hidden], .ac-visual[hidden] { display: none; }
.ac-corpo > p:first-child { max-width: 36em; color: var(--texto); font-size: 1rem; }
/* O que entra em cada parte, em cápsulas com o visto */
.ac-corpo .rec-itens { gap: 8px; margin-top: 16px; }
.ac-corpo .rec-itens li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px 5px 10px; border: 1px solid var(--linha); border-radius: 999px; }
.ac-corpo .rec-itens li::before { position: static; width: 14px; height: 14px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23C45200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 7.4l2.8 2.8 5.6-6.2'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ac-corpo .rec-plano { margin-top: 14px; font-size: 0.8125rem; font-weight: 500; }
.rec-itens { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: var(--t-peq); font-weight: 500; }
.rec-itens li { position: relative; padding-left: 14px; }
.rec-itens li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--laranja); }
.rec-plano { margin-top: 10px; font-size: 0.875rem; font-weight: 600; color: var(--texto); }
/* A barra do tempo só aparece no computador, onde as partes passam sozinhas: são três traços no pé do palco, como num carrossel */
.ac-barra { display: none; }
.ac-barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--laranja); }
.ac-item.aberto .ac-barra i, .ac-item:has(~ .ac-item.aberto) .ac-barra i { width: 100%; }
.acordeao.auto .ac-item.aberto .ac-barra i { animation: enche 9s linear both paused; }
.acordeao.auto.visivel:not(:hover):not(:focus-within) .ac-item.aberto .ac-barra i { animation-play-state: running; }
@keyframes enche { from { width: 0; } to { width: 100%; } }
/* O palco: preto liso, para a tela branca e o laranja dela aparecerem */
.ac-visual { position: relative; display: grid; place-items: center; margin-bottom: 20px; padding: clamp(10px, 3vw, 48px); background: var(--escuro); border-radius: 28px; overflow: hidden; }
.ac-visual .mock { position: relative; z-index: 1; width: 100%; max-width: 540px; border-radius: 20px; animation: surge 320ms var(--ease-out); }
@keyframes surge { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 1001px) {
  /* A lista fica na primeira coluna; a segunda só guarda o lugar do palco, que é posto por cima dela. (Com padding em porcentagem a conta saía
     pela largura da seção, não a da lista, e na tela grande a lista ficava espremida) */
  .acordeao.ligado { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 54%; column-gap: clamp(32px, 4vw, 64px); align-content: center; min-height: 580px; }
  /* A linha que liga uma parte à seguinte sai de baixo do círculo e para antes do próximo */
  .acordeao.ligado .ac-item { grid-column: 1; padding-bottom: 30px; border: 0; }
  .acordeao.ligado .ac-item:not(:last-child) { background: linear-gradient(var(--linha), var(--linha)) 23px 58px / 2px calc(100% - 68px) no-repeat; }
  .acordeao.ligado .ac-item:last-child { padding-bottom: 0; }
  .acordeao.ligado .ac-cab { grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; padding: 0; }
  .acordeao.ligado .ac-cab::after { content: none; }
  .acordeao.ligado .ac-ic { align-self: start; width: 48px; height: 48px; }
  .acordeao.ligado .ac-corpo { padding: 10px 0 0 68px; }
  .acordeao.ligado .ac-visual { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; margin: 0; }
  /* No palco a tela fica um pouco maior, para dar leitura */
  .acordeao.ligado .ac-visual .mock { max-width: 580px; padding: 28px; font-size: 1rem; }
  .acordeao.ligado .ac-visual .ml { min-height: 54px; }
  /* As cápsulas em contorno do fundo, as mesmas da abertura da página */
  .acordeao.ligado .ac-visual::before, .acordeao.ligado .ac-visual::after { content: ''; position: absolute; border: 1.5px solid rgba(255, 255, 255, 0.13); border-radius: 999px; pointer-events: none; }
  .acordeao.ligado .ac-visual::before { top: -56px; right: -96px; width: 340px; height: 136px; }
  .acordeao.ligado .ac-visual::after { bottom: -64px; left: -120px; width: 380px; height: 150px; }
  /* Os três traços ficam no meio do pé do palco (o palco vai de 46% a 100% da largura: o meio é 73%) */
  .acordeao.ligado .ac-barra { position: absolute; z-index: 2; bottom: 24px; left: calc(73% - 74px); display: block; width: 44px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
  .acordeao.ligado .ac-item:nth-child(2) .ac-barra { left: calc(73% - 22px); }
  .acordeao.ligado .ac-item:nth-child(3) .ac-barra { left: calc(73% + 30px); }
}

/* Os painéis lembram o sistema sem ser a captura da tela */
.mock { display: flex; flex-direction: column; min-width: 0; padding: clamp(16px, 2vw, 24px); background: var(--branco); border-radius: 18px; box-shadow: var(--sombra); color: var(--tinta); font-size: var(--t-peq); font-variant-numeric: tabular-nums; }
.mock small { color: var(--texto); font-size: 0.8125rem; }
.mock-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.mock-topo b { font-size: 1.0625rem; font-weight: 600; }
.mock-topo span { color: var(--texto); font-size: 0.875rem; }
.mock-linhas { display: grid; grid-auto-rows: 1fr; }
.ml { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(78px, auto); align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--linha); }
.ml:last-child { border-bottom: 0; }
.ml > b { font-weight: 600; text-align: right; white-space: nowrap; }
.ml .st { justify-self: center; }
.mock-nota { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-top: 1px solid var(--linha); color: var(--texto); }
.mock-nota b { font-weight: 600; white-space: nowrap; }
.mock-fim { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-radius: 12px; background: var(--laranja); font-weight: 500; }
.mock-fim b { font-size: 1.375rem; font-weight: 700; white-space: nowrap; }
.ml-est { grid-template-columns: minmax(0, 1fr) minmax(72px, auto); }
.nivel { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.nivel i { display: block; height: 100%; border-radius: inherit; background: var(--tinta); }
.nivel.baixo i { background: var(--laranja); }
.mock-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-block: 14px; }
.mock-numeros small { display: block; }
.mock-numeros b { font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.0625rem); font-weight: 600; white-space: nowrap; }
.mock-grafico { display: flex; gap: clamp(6px, 1vw, 14px); height: 150px; }
.col { display: flex; flex: 1; flex-direction: column; }
.col u { display: block; }
.col i { display: block; border-radius: 6px 6px 0 0; background: #FFE3C6; }
.col.atual i { background: var(--laranja); }
.col em { padding-top: 6px; font-style: normal; font-size: 0.8125rem; color: var(--texto); text-align: center; }
.col.atual em { color: var(--tinta); font-weight: 600; }

/* ---------- Os cartões que passam de lado ---------- */
.carro-sec { position: relative; padding: calc(var(--vao) * 0.9) 0 var(--vao); background: var(--cinza); }
.carro-sec > .dentro { padding-inline: var(--margem); box-sizing: content-box; }
.dente { position: absolute; left: 50%; top: -1px; width: 96px; height: 24px; margin-left: -48px; fill: var(--branco); }
.carro { --recuo: max(var(--margem), calc((100vw - var(--largura)) / 2)); display: flex; gap: 20px; margin-top: clamp(28px, 3.5vw, 44px); padding: 4px var(--recuo) 24px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--recuo); scrollbar-width: none; }
.carro::-webkit-scrollbar { display: none; }
.carro li { flex: 0 0 clamp(272px, 28vw, 344px); scroll-snap-align: start; padding: 28px 24px; background: var(--branco); border-radius: 20px; box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.35); }
.carro .ic { width: 24px; height: 24px; color: var(--laranja-texto); }
.carro h3 { margin-top: 14px; }
.carro p { margin-top: 8px; color: var(--texto); font-size: var(--t-peq); }
.carro-setas { display: flex; gap: 8px; }
.carro-setas[hidden] { display: none; }
.carro-setas button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--laranja); cursor: pointer; transition: background-color 150ms ease, opacity 150ms ease; }
.carro-setas button:disabled { background: var(--branco); opacity: 0.7; cursor: default; }
.carro-setas button:first-child .ic { transform: scaleX(-1); }
.carro-setas .ic { width: 18px; height: 18px; }

/* ---------- A faixa escura com as pílulas ---------- */
.todos { padding: var(--vao) var(--margem); background: var(--escuro); color: var(--branco); }
.todos h2 b { color: var(--laranja); }
.abas { display: inline-flex; margin-top: 24px; border-bottom: 2px solid rgba(255, 255, 255, 0.85); }
.abas[hidden] { display: none; }
.abas button { position: relative; padding: 10px clamp(14px, 2vw, 24px); border: 0; background: none; color: var(--branco); font-size: 1.0625rem; font-weight: 600; cursor: pointer; }
.abas button[aria-selected="true"] { color: var(--laranja); }
.abas button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--laranja); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px auto 0; }
.chips[hidden] { display: none; }
.chips li { display: contents; }
.chips p { order: 1; flex: 0 0 100%; min-height: 3em; margin-top: 8px; color: var(--no-escuro); font-size: 1rem; }
.chips p[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--escuro-alto); color: var(--branco); font-size: var(--t-peq); font-weight: 600; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.chip .ic { color: var(--laranja); }
.chip[aria-expanded="true"] { background: var(--laranja); color: var(--tinta); }
.chip[aria-expanded="true"] .ic { color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .chip[aria-expanded="false"]:hover { background: #2E2E2E; } }

/* ---------- A conta da peça ---------- */
.conta-sec { padding: var(--vao) var(--margem); background: var(--cinza-claro); }
.conta-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 64px); align-items: end; }
.conta-topo h2 { margin-top: 12px; }
.conta-topo > p { padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.18); color: var(--texto); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 44px); margin-top: clamp(28px, 3.5vw, 40px); padding: clamp(16px, 3vw, 36px); background: var(--branco); border-radius: 28px; box-shadow: var(--sombra); }
.calc-res { display: grid; gap: 12px; align-content: start; min-width: 0; }
.visor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 16px 20px; background: var(--escuro); border-radius: 16px; }
.visor span { display: block; font-size: 0.8125rem; color: var(--no-escuro); }
.visor b { display: block; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--branco); }
.visor .destaque { color: var(--laranja); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.campo { display: grid; gap: 4px; align-content: end; min-width: 0; font-size: var(--t-peq); font-weight: 500; }
.caixa { display: flex; align-items: baseline; gap: 6px; min-height: 48px; padding: 11px 16px; background: var(--cinza); border-radius: 14px; cursor: text; color: var(--texto); }
.caixa:focus-within { outline: 2px solid var(--laranja-texto); }
.caixa input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: none; outline: 0; font-size: 1.0625rem; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.caixa i { font-style: normal; flex: none; font-size: var(--t-peq); }
.teclas { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.teclas:first-child { margin-top: 0; }
.teclas legend { padding: 0; margin-bottom: 6px; font-size: var(--t-peq); font-weight: 500; }
.teclas div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.teclas-duas div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.teclas label { position: relative; cursor: pointer; }
.teclas input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.teclas span { display: grid; place-items: center; min-height: 46px; border-radius: 999px; background: var(--cinza); font-weight: 500; transition: background-color 150ms ease; }
.teclas input:checked + span { background: var(--laranja); font-weight: 600; }
.teclas input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .teclas input:not(:checked):hover + span { background: var(--linha); } }
.res-nota { font-size: 0.875rem; color: var(--texto); }
.trilho { display: flex; gap: 2px; height: 10px; }
.trilho i { display: block; height: 100%; border-radius: 2px; transition: width 280ms var(--ease-out); }
.s-lucro { background: var(--laranja); }
.s-material { background: var(--escuro); }
.s-maquina { background: #737373; }
.s-embalagem { background: #BDBDBD; }
.legenda { font-size: var(--t-peq); color: var(--texto); }
.legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.legenda li[hidden] { display: none; }
.legenda i { display: block; width: 10px; height: 10px; border-radius: 2px; }
.legenda b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- O orçamento ---------- */
.orc-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.orc-midia { position: relative; padding: clamp(16px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px) clamp(48px, 5vw, 72px); background: linear-gradient(var(--cinza-claro), #FFE3C6); border-radius: 28px; }
.p-folha { width: 92%; border-radius: 14px; box-shadow: var(--sombra); }
.p-resumo { position: absolute; right: -12px; bottom: 20px; width: 62%; border-radius: 14px; box-shadow: var(--sombra); }
.orc-texto > p { margin-top: 16px; color: var(--texto); }
.orc-texto .pilula { margin-top: 24px; }

/* ---------- O financeiro: cartão escuro com a parte laranja ---------- */
.fin-sec { padding: 0 var(--margem) var(--vao); background: var(--branco); }
.fin-cartao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; background: var(--escuro); color: var(--branco); border-radius: 28px; }
.fin-texto { align-self: center; padding: clamp(28px, 5vw, 56px) clamp(28px, 6vw, 72px) clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px); }
.fin-texto h2 b { color: var(--laranja); }
.fin-texto > p:not(.rec-plano) { margin-top: 16px; color: var(--no-escuro); }
.fin-texto .rec-itens li::before { background: var(--laranja); }
.fin-texto .rec-plano { color: var(--no-escuro); }
.fin-texto .pilula { margin-top: 20px; }
.fin-visual { position: relative; display: grid; align-items: center; padding: clamp(24px, 4vw, 48px); background: var(--laranja); }
.fin-curva { position: absolute; right: 100%; top: 0; width: 40px; height: 100%; margin-right: -1px; fill: var(--laranja); }

/* ---------- Planos: três cartões da mesma altura, com contorno fino. O recomendado é o preto, um pouco mais alto que os vizinhos, com a etiqueta
   laranja na borda de cima. Em cada um, de cima para baixo: o selo e o nome, o preço grande, o teste grátis numa cápsula, a frase, a lista com os
   vistos e, no pé, o botão e o link do comparativo ---------- */
.planos-sec { padding: var(--vao) var(--margem); background: var(--branco); }
.texto { margin-top: 12px; color: var(--texto); }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: clamp(48px, 5vw, 68px) auto 0; }
.plano { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 34px); background: var(--branco); border: 1px solid var(--linha); border-radius: 24px; }
.plano h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 600; }
/* Os selos dos planos: os mesmos do sistema (public/marca/planos) */
.plano-selo { flex: none; width: 32px; height: 32px; object-fit: contain; }
.plano-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 20px; color: var(--texto); font-size: var(--t-peq); }
.plano-preco b { font-size: clamp(2.5rem, 2rem + 1.4vw, 3.125rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--tinta); white-space: nowrap; }
.plano > p:not(.plano-preco) { margin-top: 14px; color: var(--texto); }
/* O teste grátis dos planos pagos, logo abaixo do preço */
.plano > p.plano-teste { align-self: flex-start; margin-top: 14px; padding: 4px 12px; border-radius: 999px; background: var(--laranja-claro); color: var(--laranja-texto); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.marcados { display: grid; gap: 12px; margin: 24px 0 30px; padding-top: 24px; border-top: 1px solid var(--linha); font-size: var(--t-peq); }
.marcados li { position: relative; padding-left: 30px; }
.marcados li::before { content: ''; position: absolute; left: 0; top: 0.1em; width: 20px; height: 20px; border-radius: 50%; background: var(--laranja-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23C45200' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 10.4l3 3 5.9-6.6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.plano .pilula { margin-top: auto; width: 100%; }
.plano-comparar { display: block; margin-top: 14px; color: var(--tinta); font-size: var(--t-peq); font-weight: 500; text-align: center; text-decoration-color: var(--laranja); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
/* O recomendado: preto, com o laranja nos vistos, na cápsula do teste e no botão */
.plano-escuro { background: var(--escuro); border-color: var(--escuro); color: var(--branco); box-shadow: var(--sombra); }
.plano-escuro .plano-preco, .plano-escuro > p:not(.plano-preco) { color: var(--no-escuro); }
.plano-escuro .plano-preco b { color: var(--branco); }
.plano-escuro > p.plano-teste { background: rgba(255, 122, 0, 0.18); color: var(--laranja); }
.plano-escuro .marcados { border-top-color: rgba(255, 255, 255, 0.16); }
.plano-escuro .marcados li::before { background-color: var(--laranja); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230A0A0A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 10.4l3 3 5.9-6.6'/%3E%3C/svg%3E"); }
.plano-escuro .plano-comparar { color: var(--branco); }
.plano-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 5px 16px; border-radius: 999px; background: var(--laranja); color: var(--tinta); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 721px) { .plano-escuro { margin-block: -16px; padding-block: calc(clamp(26px, 2.6vw, 34px) + 16px); } }

/* ---------- A comparação dos planos: o menu à esquerda escolhe o grupo, e a tabela mostra as linhas dele. A tabela é um cartão branco de contorno
   fino; o grupo aberto vem escrito em maiúsculas, com uma linha preta embaixo; o que o plano tem leva o visto no círculo laranja, e o que não tem, um traço ---------- */
.comparar-sec { position: relative; padding: calc(var(--vao) * 0.9) var(--margem) var(--vao); background: var(--cinza-claro); }
.comp-grade { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1200px; margin: clamp(28px, 3.5vw, 44px) auto 0; }
.comp-menu { position: relative; display: grid; gap: 4px; margin-top: 148px; transition: transform 420ms var(--ease-out); }
.comp-menu[hidden] { display: none; }
.comp-menu button { position: relative; min-height: 46px; padding: 8px 14px; border: 0; border-radius: 12px; background: none; color: var(--texto); font-size: var(--t-peq); font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.comp-menu button[aria-pressed="true"] { background: var(--tinta); color: var(--branco); font-weight: 600; }
.comp-cartao { min-width: 0; overflow: hidden; padding: 0 clamp(12px, 1.8vw, 24px) 10px; background: var(--branco); border: 1px solid var(--linha); border-radius: 24px; }
.comp-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
.comp-tabela thead td { width: 34%; }
.comp-tabela thead th { padding: 26px 8px 22px; font-weight: 400; vertical-align: top; }
.comp-nome { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.comp-nome .plano-selo { width: 26px; height: 26px; }
.comp-preco { display: block; margin-top: 4px; color: var(--texto); font-size: var(--t-peq); }
.comp-preco b { color: var(--tinta); font-weight: 700; white-space: nowrap; }
.pilula-p { width: 100%; max-width: 220px; min-height: 40px; margin-top: 14px; padding: 4px 10px; font-size: 0.875rem; line-height: 1.15; }
.comp-grupo th { padding: 16px 10px 10px; border-bottom: 1.5px solid var(--tinta); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.comp-tabela tbody[hidden] { display: none; }
.comp-tabela tbody tr:not(.comp-grupo) { border-bottom: 1px solid var(--linha); }
.comp-tabela tbody tr:last-child { border-bottom: 0; }
.comp-tabela tbody th[scope="row"] { padding: 15px 10px; font-size: var(--t-peq); font-weight: 400; line-height: 1.35; text-align: left; }
.comp-tabela tbody td { padding: 15px 6px; font-size: var(--t-peq); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.comp-tabela .sim::after { content: ''; display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230A0A0A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 10.4l3 3 5.9-6.6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.comp-tabela .nao::after { content: '—'; color: #BDBDBD; font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  .comp-menu button[aria-pressed="false"]:hover { background: var(--linha); color: var(--tinta); }
  .comp-tabela tbody tr:not(.comp-grupo):hover { background: var(--cinza-claro); }
}

/* ---------- Perguntas frequentes ---------- */
.duvidas { max-width: 1040px; }
.lista-duvidas { display: grid; gap: 8px; margin-top: clamp(24px, 3vw, 36px); }
.lista-duvidas details { background: var(--cinza); border-radius: 18px; }
.lista-duvidas summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 10px 22px; font-weight: 500; cursor: pointer; list-style: none; }
.lista-duvidas summary::-webkit-details-marker { display: none; }
.lista-duvidas summary::after { content: '+'; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--laranja-texto); }
.lista-duvidas details[open] summary::after { content: '−'; }
.lista-duvidas details p { padding: 0 44px 18px 22px; color: var(--texto); font-size: 1rem; }

/* ---------- O banner final ---------- */
.fim-area { padding: 0 var(--margem) var(--vao); background: var(--branco); }
.fim-bloco { position: relative; overflow: hidden; background: var(--escuro); color: var(--branco); border-radius: 28px; }
.fim-formas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fim-cheia { fill: var(--laranja); }
.fim-linha { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.25; }
.fim-texto { position: relative; max-width: 620px; padding: clamp(32px, 5vw, 64px); }
.fim-texto h2 b { color: var(--laranja); }
.fim-texto > p { margin-top: 12px; color: var(--no-escuro); }
.fim-texto .pega { margin-top: 24px; }

/* ---------- Rodapé ---------- */
.rodape { padding: 44px var(--margem) 0; background: var(--cinza); color: var(--texto); font-size: var(--t-peq); }
.rodape-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-bottom: 24px; border-bottom: 1px solid var(--linha); }
.rodape-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr) minmax(0, 1.3fr); gap: 28px; padding-block: 28px; }
.rodape h3 { margin-bottom: 12px; font-size: 1.0625rem; font-weight: 500; color: var(--tinta); }
.rodape ul { display: grid; gap: 8px; }
.rodape a { color: var(--texto); text-decoration: none; transition: color 150ms ease; }
.rodape-pag { display: flex; flex-wrap: wrap; gap: 8px; }
.pag { display: inline-grid; place-items: center; width: 62px; height: 34px; border-radius: 8px; background: var(--branco); }
.pag svg { width: 54px; height: 24px; }
.rodape-contato a { display: inline-flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
.rodape-contato .ic { width: 18px; height: 18px; margin-top: 3px; }
.rodape-fim { padding-block: 20px; border-top: 1px solid var(--linha); font-size: 0.8125rem; text-align: center; }
@media (hover: hover) and (pointer: fine) { .rodape a:hover { color: var(--tinta); } }

/* ---------- Tablet e celular ---------- */
@media (max-width: 1100px) {
  /* O cartão da direita vira um só, com o botão de começar e o menu. A logo continua no cartão dela, com a ligação entre os dois.
     Os dois cartões têm sempre os 52 px da ligação, para ela não passar da altura deles */
  .barra-pilulas { gap: 4px; min-height: 52px; padding: 4px 4px 4px 6px; background: var(--branco); border-radius: 999px; }
  .marca { min-height: 52px; padding-inline: 16px; }
  .pescoco { display: none; }
  .barra-menu { order: 2; min-height: 0; padding: 0; background: none; }
  .barra-acoes { min-height: 0; padding: 0; background: none; }
  .barra-dentro > .barra-acoes { min-height: 52px; padding: 6px; background: var(--branco); }
  .abre { margin-top: -64px; }
  .menu-botao { display: block; width: 44px; height: 44px; background: none; }
  .menu-botao span { width: 20px; margin-block: 4px; transition: transform 200ms var(--ease-out), opacity 150ms ease; }
  .barra.menu-aberto .menu-botao span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .barra.menu-aberto .menu-botao span:nth-child(2) { opacity: 0; }
  .barra.menu-aberto .menu-botao span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .menu { position: absolute; right: 0; top: calc(100% + 8px); display: none; flex-direction: column; min-width: 220px; padding: 8px; background: var(--branco); border-radius: 20px; box-shadow: var(--sombra-leve); }
  .barra.menu-aberto .menu { display: flex; }
  .menu a { padding: 12px 16px; }
  .menu-entrar { display: block; }
  .barra-pilulas .botao-contorno { display: none; }
}
@media (max-width: 1000px) {
  .abre-grade, .divide, .orc-grade, .fin-cartao, .conta-topo, .calc { grid-template-columns: minmax(0, 1fr); }
  .abre-visual { justify-self: center; max-width: 520px; margin: 0 auto 48px; }
  .flut-peca { left: 8px; }
  .flut-pedidos { left: 8px; }
  .flut-mes { right: 8px; }
  .moldura-formas { display: none; }
  .moldura-pilulas { display: none; }
  .divide-foto { min-height: 0; aspect-ratio: 16 / 10; }
  .divide-curva, .fin-curva { display: none; }
  .divide-texto { padding-inline: var(--margem); }
  .conta-topo > p { border-top: 0; padding-top: 0; }
  .comp-grade { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .comp-menu { display: flex; gap: 8px; margin-top: 0; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); overflow-x: auto; scrollbar-width: none; }
  .comp-menu::-webkit-scrollbar { display: none; }
  /* Sobra espaço depois do último, para ele também chegar ao primeiro lugar */
  .comp-menu::after { content: ''; flex: 0 0 calc(100vw - 2 * var(--margem) - 90px); }
  .comp-menu button { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); }
  .comp-menu button[aria-pressed="true"] { box-shadow: none; }
  .comp-menu button[aria-pressed="true"]::after { display: none; }
  .rodape-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape-lado { grid-column: span 3; }
}
@media (max-width: 720px) {
  :root { --vao: 48px; }
  .marca-logo { height: 30px; }
  .barra { top: calc(8px + env(safe-area-inset-top, 0px)); }
  .barra-acoes .botao { min-height: 38px; padding-inline: 14px; font-size: 0.875rem; }
  .abre { padding-top: 88px; padding-bottom: 40px; }
  .abre-visual { margin-bottom: 20px; }
  .vistos { gap: 4px 14px; padding: 0; background: none; }
  .balao { padding-inline: 14px; font-size: 0.8125rem; }
  .onda { display: none; }
  .faixa { padding-block: 14px; }
  /* O Dashboard não cabe legível na largura do celular: fica maior, e a pessoa arrasta para o lado */
  .moldura { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .moldura::-webkit-scrollbar { display: none; }
  .moldura img { width: 200%; max-width: none; }
  .ac-visual { padding: 8px; border-radius: 24px; }
  .ac-visual .mock { border-radius: 16px; }
  .carro { padding-bottom: 8px; overscroll-behavior-x: contain; }
  .carro-setas { display: none; }
  .teclas span { min-height: 48px; }
  .pega { flex-direction: column; }
  .pega .pilula { width: 100%; }
  .abre-texto { display: grid; justify-items: start; }
  .abre-texto .pega { width: 100%; }
  .abre-nota { justify-self: center; }
  .flut { padding: 8px 12px; font-size: 0.75rem; }
  .flut-peca { top: 6%; left: 8px; }
  .flut-ic { width: 34px; height: 34px; border-radius: 10px; }
  .flut-pedidos { display: none; }
  .flut-mes { right: 8px; bottom: -6%; min-width: 156px; }
  .ml { grid-template-columns: minmax(0, 1fr) minmax(70px, auto); gap: 2px 12px; padding-block: 8px; }
  .ml > small, .ml > .st { grid-row: 2; grid-column: 1; justify-self: start; }
  .ml > b { grid-row: 1 / span 2; grid-column: 2; }
  .ml-est > b { grid-row: 1; }
  .mock-numeros b { font-size: 0.8125rem; }
  .mock-nota { font-size: 0.875rem; }
  /* A folha e o resumo, um embaixo do outro: por cima, o resumo escondia o total */
  .orc-midia { padding: 12px; }
  .p-folha { width: 100%; }
  .p-resumo { position: static; width: 100%; margin-top: 10px; }
  .plano-comparar { margin-top: 4px; padding-block: 10px; }
  .planos { grid-template-columns: minmax(0, 1fr); }
  /* No celular, a linha vira o nome do recurso em cima e os três planos embaixo, cada valor com o próprio rótulo. Os botões de assinar ficam nos cartões, logo acima */
  .comp-tabela, .comp-tabela tbody, .comp-grupo, .comp-grupo th { display: block; }
  .comp-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comp-cartao { padding-block: 12px; }
  .comp-tabela tbody tr:not(.comp-grupo) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-block: 12px; }
  .comp-tabela tbody th[scope="row"] { grid-column: 1 / -1; padding: 0 4px 6px; font-weight: 500; }
  .comp-tabela tbody td { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; min-height: 42px; padding: 0 2px; font-weight: 500; }
  .comp-tabela tbody td::before { color: var(--texto); font-size: 0.75rem; font-weight: 400; }
  .comp-tabela tbody td:nth-of-type(1)::before { content: 'Start'; }
  .comp-tabela tbody td:nth-of-type(2)::before { content: 'Growth'; }
  .comp-tabela tbody td:nth-of-type(3)::before { content: 'Scale'; }
  .abas button { padding-inline: 10px; font-size: 1rem; }
  .chip { padding-inline: 14px; }
  .lista-duvidas details p { padding-right: 22px; }
  .fim-formas { display: none; }
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .rodape-lado { grid-column: 1 / -1; }
  .marca-logo-rodape { height: 40px; }
  /* Os links do rodapé com altura para o dedo */
  .rodape ul { gap: 0; }
  .rodape nav a { display: inline-block; padding-block: 7px; }
  .rodape-contato a { padding-block: 7px; }
  .rodape nav[aria-label="Sua conta"] { grid-column: 1 / -1; }
  .rodape nav[aria-label="Sua conta"] ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
}
/* Nos celulares de 360 a 380 px o topo não cabia: o cartão da direita passava da margem. A logo, as folgas e o botão do menu cedem um pouco */
@media (max-width: 380px) {
  .marca-logo { height: 26px; }
  .marca { padding-inline: 12px; }
  .barra-acoes .botao { padding-inline: 12px; }
  .menu-botao { width: 40px; height: 40px; }
}
@media (max-width: 350px) {
  .marca-logo { height: 22px; }
  .barra-acoes .botao { padding-inline: 9px; font-size: 0.8125rem; }
  .campos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  .comp-menu { transition: none; }
  .faixa-trilho { animation: none; }
  .faixa-janela { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .faixa-trilho { flex-wrap: wrap; flex: 0 1 auto; justify-content: center; gap: 8px 24px; padding: 0; }
  .faixa-trilho[aria-hidden="true"] { display: none; }
  .ac-visual .mock { animation: none; }
}

/* ---------- Termos de uso e política de privacidade: texto corrido, na largura de leitura ---------- */
.legal { max-width: calc(46rem + 2 * var(--margem)); margin-inline: auto; padding: clamp(40px, 6vw, 64px) var(--margem) clamp(56px, 7vw, 88px); }
.legal-data { font-size: 0.8125rem; color: var(--texto); }
.legal h1 { margin-top: 8px; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 600; line-height: 1.12; }
.legal h2 { margin-top: 36px; font-size: 1.25rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.legal p:not(.legal-data), .legal ul { margin-top: 10px; color: var(--texto); }
.legal ul { display: grid; gap: 8px; padding-left: 22px; list-style: disc; }
/* As cláusulas: o número em negrito abre o parágrafo, e as listas dentro delas seguem o recuo do texto */
.legal p > b:first-child { margin-right: 4px; }
.legal b { color: var(--tinta); }
.legal a { color: var(--tinta); overflow-wrap: anywhere; }
.legal h2[id] { scroll-margin-top: 110px; }
/* As tabelas: uma informação por coluna; no celular, elas rolam de lado sem empurrar a página */
.legal-tabela { margin-top: 14px; overflow-x: auto; border: 1px solid var(--linha); border-radius: 12px; }
.legal-tabela table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; }
.legal-tabela th, .legal-tabela td { padding: 10px 14px; text-align: left; vertical-align: top; color: var(--texto); }
.legal-tabela th { background: var(--cinza); color: var(--tinta); font-weight: 600; }
.legal-tabela tr + tr td, .legal-tabela tbody tr:first-child td { border-top: 1px solid var(--linha); }
.rodape-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding-bottom: 20px; }
.rodape-legal + .rodape-fim { display: grid; justify-content: center; gap: 4px; text-align: center; }

/* Nos Termos e na Privacidade o texto corre por baixo do topo: um véu branco, que some para baixo, apaga o texto ali, para ele não cruzar com a linha e os cartões */
.barra:has(+ .legal)::before { content: ''; position: absolute; inset: -12px 0 -18px; z-index: -1; background: linear-gradient(var(--branco) 72%, transparent); pointer-events: none; }