/* ═══ A PÁGINA DA ORQUESDRA ═══
 *
 * Escrita de raiz (22/10/2026): as medidas e os tempos são os da página que o
 * Miguel aprovou. Os tamanhos crescem com o
 * ecrã entre os 320 e os 1440 px de largura (o «clamp» de cada um vai do
 * tamanho do telemóvel ao do computador) e param aí.
 *
 * Partes: a base; o cabeçalho; o herói; as marcas; o produto; os passos; o
 * túnel; as perguntas; as redes; os planos; o convite; o rodapé. */

@font-face { font-family: Geist; src: url("/assets/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: BricolageWordmark; src: url("/assets/bricolage-grotesque.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: BoldonseWordmark; src: url("/assets/boldonse-skuader.woff") format("woff"); font-weight: 400; font-display: swap; }

:root {
  --tinta: #0f1218;
  --tinta-2: #4b5262;
  --azul: #1857f2;
  --azul-escuro: #1446dc;
  --fundo-2: #f3f6fc;
  --linha: rgba(15, 18, 24, .1);
  --letra: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* as margens e os espaços */
  --margem: clamp(24px, calc(24px + 72 * (100vw - 320px) / 1120), 96px);
  --calha: clamp(16px, calc(16px + 8 * (100vw - 320px) / 1120), 24px);
  --e-8: clamp(6px, calc(6px + 2 * (100vw - 320px) / 1120), 8px);
  --e-4: clamp(3.2px, calc(3.2px + .8 * (100vw - 320px) / 1120), 4px);
  --e-5: clamp(4px, calc(4px + 2 * (100vw - 320px) / 1120), 6px);
  --e-6: clamp(6px, calc(6px + 2 * (100vw - 320px) / 1120), 8px);
  --e-48: clamp(36px, calc(36px + 12 * (100vw - 320px) / 1120), 48px);
  --e-16: clamp(14px, calc(14px + 2 * (100vw - 320px) / 1120), 16px);
  --e-24: clamp(20px, calc(20px + 4 * (100vw - 320px) / 1120), 24px);
  --e-32: clamp(28px, calc(28px + 4 * (100vw - 320px) / 1120), 32px);
  --e-64: clamp(40px, calc(40px + 24 * (100vw - 320px) / 1120), 64px);
  --e-96: clamp(48px, calc(48px + 48 * (100vw - 320px) / 1120), 96px);
  --e-120: clamp(60px, calc(60px + 60 * (100vw - 320px) / 1120), 120px);
  --e-144: clamp(72px, calc(72px + 72 * (100vw - 320px) / 1120), 144px);
  --r-24: clamp(16px, calc(16px + 8 * (100vw - 320px) / 1120), 24px);
  --r-48: clamp(32px, calc(32px + 16 * (100vw - 320px) / 1120), 48px);
  --r-64: clamp(32px, calc(32px + 32 * (100vw - 320px) / 1120), 64px);
  /* as letras */
  --t-corpo: clamp(15.2px, calc(15.2px + .8 * (100vw - 320px) / 1120), 16px);
  --t-display: clamp(34px, calc(34px + 26 * (100vw - 320px) / 1120), 60px);
  --t-display-md: clamp(28px, calc(28px + 20 * (100vw - 320px) / 1120), 48px);
  --t-sub: clamp(16px, calc(16px + 3.2 * (100vw - 320px) / 1120), 19.2px);
  --t-sep: clamp(19.1px, calc(19.1px + 4.1 * (100vw - 320px) / 1120), 23.2px);
  --t-eyebrow: clamp(12.8px, calc(12.8px + 1.2 * (100vw - 320px) / 1120), 14px);
}

/* ═══ A BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--tinta); font-family: var(--letra); font-size: var(--t-corpo); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.contentor { width: min(1440px, calc(100% - 2 * var(--margem))); margin-inline: auto; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 8px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--linha); transform: translateY(-150%); transition: transform .2s ease; }
.saltar:focus { transform: none; }

/* os títulos grandes têm .15em a mais de altura (.05 por cima, .1 por baixo), como na página aprovada */
.t-display { padding: .05em 0 .1em; font-size: var(--t-display); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; text-wrap: pretty; }
.t-display-md { padding: .05em 0 .1em; font-size: var(--t-display-md); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.t-sub { font-size: var(--t-sub); line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; }
.t-eyebrow { font-size: var(--t-eyebrow); font-weight: 500; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
/* O aparo: a caixa do texto corta o ar da linha por cima e por baixo das letras, como a página de antes
   fazia em todos os textos (.6em em cima, .65em em baixo). */
.t-eyebrow, .t-sub, .convite-nota, .orq-rodape-sub, .produto-item h3, .produto-item p, .carrossel-item h3, .carrossel-item p, .faq-lista summary > span:first-child, .faq-lista details > p { display: flow-root; }
:is(.t-eyebrow, .t-sub, .convite-nota, .orq-rodape-sub, .produto-item h3, .produto-item p, .carrossel-item h3, .carrossel-item p, .faq-lista summary > span:first-child, .faq-lista details > p)::before { content: ""; display: table; margin-bottom: calc(-.5lh + .6em); }
:is(.t-eyebrow, .t-sub, .convite-nota, .orq-rodape-sub, .produto-item h3, .produto-item p, .carrossel-item h3, .carrossel-item p, .faq-lista summary > span:first-child, .faq-lista details > p)::after { content: ""; display: table; margin-bottom: calc(-.5lh + .65em); }

/* O texto que sobe ao passar o rato e entra um duplicado por baixo. */
.rola { position: relative; display: inline-grid; margin: -3px 0; padding: 3px 0; overflow: hidden; vertical-align: top; }
.rola > span { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.25, .46, .45, .94); }
.rola > span + span { transform: translateY(150%); }
a:hover > .rola > span:first-child, button:hover > .rola > span:first-child { transform: translateY(-150%); }
a:hover > .rola > span + span, button:hover > .rola > span + span { transform: none; }

/* O botão principal: uma pílula azul. */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--e-48); padding: 0 20px; border: 1.5px solid transparent; border-radius: 48px; font-size: var(--t-corpo); font-weight: 500; line-height: 1.5; white-space: nowrap; transition: background-color .3s ease, transform .3s ease; }
/* o texto do botão vem aparado como os outros (.15em em cima, .1em em baixo) */
.botao > .rola { margin-block: calc(-3px - .15em) calc(-3px - .1em); }
@media (max-width: 991px) { .botao { height: auto; padding-block: 13.86px; } }
.botao-azul { border-color: var(--azul); background: var(--azul); color: #fff; }
.botao-azul:hover { border-color: var(--azul-escuro); background: var(--azul-escuro); }
.botao-ic { display: grid; place-items: center; margin: -8px 0; }
.botao-ic svg { width: 18px; height: 18px; transition: transform .3s ease; }
.botao:hover .botao-ic svg { transform: translateX(3px); }

/* A seta redonda (o carrossel dos passos). */
.seta-redonda { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 16px; background: var(--linha); color: var(--tinta); transition: background-color .2s ease, opacity .2s ease; }
.seta-redonda:disabled { opacity: .5; cursor: default; }
.seta-redonda:hover { background: rgba(15, 18, 24, .16); }
.seta-redonda svg { width: 14px; height: 14px; }
.seta-redonda .vira { transform: scaleX(-1); }

/* Os pontinhos (o fundo do herói e do convite): no computador desenha-os o
   site.js num <canvas>, e fogem do rato; sem ele, ou no telemóvel, são fixos. */
.pontos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ═══ O CABEÇALHO ═══
   Uma pílula clara e translúcida, presa ao topo, afastada das margens. */
.cab { position: fixed; inset: 0 0 auto; z-index: 1000; pointer-events: none; }
.cab > * { pointer-events: auto; }
.cab-barra { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 366fr) auto minmax(0, 401fr); align-items: center; width: min(1424px, calc(100% - 2 * var(--margem) - 16px)); height: 60px; margin: 24px auto 0; padding: 8px; border-radius: 999px; background: rgba(243, 246, 252, .6); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.cab-logo { justify-self: start; display: flex; align-items: center; margin-left: 14px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
/* o desenho do catavento tem 15% de margem transparente de cada lado: a margem negativa tira-a */
.logo img { width: 46px; height: auto; margin: 0 -7px; }
.cab-secoes ul { display: flex; }
.cab-secoes a { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; font-size: 16px; font-weight: 500; white-space: nowrap; transition: opacity .2s ease; }
.cab-secoes a:hover { opacity: .65; }
.cab-acoes { justify-self: end; display: flex; align-items: center; gap: 16px; }
.cab-entrar { display: flex; align-items: center; height: 44px; padding: 0 16px; font-size: 16px; font-weight: 500; transition: opacity .2s ease; }
.cab-entrar:hover { opacity: .65; }
.cab-comecar { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 48px; background: var(--azul); color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; box-shadow: 0 8px 18px rgba(24, 87, 242, .2); transition: background-color .3s ease, transform .3s ease; }
.cab-comecar:hover { background: #1349d6; transform: translateY(-2px); }
.cab-menu-botao { display: none; }
/* o menu dos Recursos: um painel branco que nasce por trás da barra */
.cab-veu { position: fixed; inset: 0; z-index: 0; background: rgba(30, 34, 40, .3); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.cab-aberto-menu .cab-veu { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.cab-menu { display: none; }
@media (min-width: 992px) and (max-width: 1199px) {
  .cab .logo { gap: 7px; font-size: 21px; }
  .cab .logo img { width: 40px; margin: 0 -6px; }
  .cab-comecar { padding: 0 16px; font-size: 14px; }
  .cab-secoes a { padding: 0 12px; }
}
@media (max-width: 991px) {
  .cab-barra { display: flex; justify-content: space-between; width: calc(100% - 2 * var(--margem) - 12px); height: 48px; margin-top: 16.5px; padding: 0 6px; }
  .cab-logo { margin: 4px 0 4px 8px; }
  .cab .logo { gap: 7px; font-size: 21px; }
  .cab .logo img { width: 40px; margin: 0 -6px; }
  .cab-secoes, .cab-acoes { display: none; }
  .cab-menu-botao { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 48px; }
  .cab-menu-botao span { display: block; width: 20px; height: 1.5px; border-radius: 2px; background: var(--tinta); transition: transform .3s ease, opacity .2s ease; }
  .cab-aberto-menu .cab-menu-botao span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .cab-aberto-menu .cab-menu-botao span:nth-child(2) { opacity: 0; }
  .cab-aberto-menu .cab-menu-botao span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* o menu: um cartão branco que começa por trás da barra e desce, com as secções em grande e os dois
     botões no fundo; abre de cima para baixo, recortado, como na página de antes */
  .cab-menu { position: absolute; top: 16.5px; left: 50%; z-index: 1; display: flex; flex-direction: column; width: calc(100% - 2 * var(--margem)); max-height: calc(100svh - 32px); padding: 68px calc(20px + var(--e-6)) calc(20px + var(--e-6)); overflow-y: auto; border-radius: 28px; background: #fff; transform: translateX(-50%); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .4s ease-in-out, visibility 0s linear .4s; }
  .cab-aberto-menu .cab-menu { clip-path: inset(0); visibility: visible; transition: clip-path .4s ease-in-out; }
  .cab-aberto-menu .cab-barra { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .cab-veu { background: rgba(15, 18, 24, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .cab-menu-principal a { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; border-bottom: 1px solid #eef1f6; font-size: 21px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
  .cab-menu-principal svg { width: 18px; height: 18px; color: #9aa3b2; }
  .cab-menu-principal a:active { color: var(--azul); }
  .cab-menu-botoes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 22px; }
  .cab-menu-entrar, .cab-menu-comecar { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
  .cab-menu-entrar { padding: 0 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 18, 24, .14); }
  .cab-menu-comecar { padding: 0 14px; background: var(--azul); color: #fff; box-shadow: 0 8px 18px rgba(24, 87, 242, .22); }
}

/* ═══ O HERÓI ═══
   A secção tem 2,25 ecrãs; o miolo fica preso ao ecrã enquanto as três ondas
   se abrem (site.js). As ondas são camadas do tamanho do ecrã, com os elementos
   ao centro e deslocados em vw/vh (as posições de partida estão aqui, para a
   página já estar certa antes de o JavaScript chegar). */
.heroi { position: relative; height: 225vh; background: var(--fundo-2); }
.heroi-fixo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.heroi-tela { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.onda { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.onda-1 { z-index: 3; }
.onda-2 { z-index: 2; }
.onda-3 { z-index: 1; }
.ep { position: absolute; }
.ep-fila { position: relative; }
/* a moldura de cada fotografia */
.ep-foto { position: relative; z-index: 0; padding: 6.93px; border: .56px solid #dadce0; border-radius: 13.86px; background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .2); }
.ep-foto img { display: block; border-radius: 6.93px; object-fit: cover; }
.ep-alta img { width: 172px; height: 216px; }
.ep-mais img { width: 165px; height: 248px; }
.ep-quad img { width: 216px; height: 216px; }
/* onda 1 */
.ep-1-1 { z-index: 3; transform: translate(-35vw, -20vh); }
.ep-1-2 { z-index: 3; transform: translate(-25vw, 27vh); }
.ep-1-3 { z-index: 3; inset: 23% auto auto -49%; }
.ep-1-4 { z-index: 4; inset: auto auto -10% -55%; }
.ep-1-5 { z-index: 10; transform: translate(2vw, 35vh); }
.ep-1-6 { z-index: 2; transform: translate(28vw, 40vh); }
.ep-1-7 { z-index: 3; transform: translate(23vw, 15vh); }
.ep-1-8 { z-index: 3; inset: -38% -63% auto auto; }
.ep-1-9 { z-index: 3; transform: translate(47vw, -20vh); }
/* onda 2 */
.ep-2-1 { z-index: 2; opacity: .25; transform: translate(-15vw, -15vh) scale(.35); }
.ep-2-2 { z-index: 2; opacity: .1; transform: translate(-10vw, 15vh) scale(.2); }
.ep-2-3 { z-index: 1; inset: -18% auto auto -54%; transform: scale(1.35); }
.ep-2-4 { z-index: 2; opacity: .25; transform: translate(14vw, 8vh) scale(.5); }
.ep-2-5 { z-index: 2; opacity: .05; transform: translate(12vw, -10vh) scale(.3); }
.ep-2-6 { z-index: 3; inset: auto auto -40% -34%; }
/* onda 3 */
.ep-3-1 { z-index: 10; opacity: 0; transform: translate(-7vw, 10vh) scale(.2); }
.ep-3-2 { z-index: 1; inset: -41% -23% auto auto; }
.ep-3-4 { z-index: 10; opacity: 0; transform: translateY(20vh) scale(.2); }
.ep-3-5 { z-index: 10; opacity: 0; transform: translate(10vw, 10vh) scale(.2); }
.ep-3-6 { z-index: 10; opacity: 0; transform: translate(10vw, -5vh) scale(.2); }
.ep-3-7 { z-index: 4; inset: auto 0 -20% -11%; }
.ep-3-8 { z-index: 4; inset: -10% -10% auto auto; }
.ep-3-8 .oh-rede { border-radius: 13px; }
.ep-3-10 { z-index: 10; opacity: 0; transform: translate(5vw, -5vh) scale(.2); }
.ep-3-11 { z-index: 10; opacity: 0; transform: translate(-2vw, -5vh) scale(.2); }
@media (max-width: 991px) { .ep-2-5 { transform: translate(12vw, -10vh) scale(.2); } }
/* o desfoque em degraus no fundo do herói */
.desfoque { position: absolute; inset: auto 0 0; z-index: 40; height: 80px; pointer-events: none; }
.desfoque i { position: absolute; inset: 0; }
.desfoque-1 { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask: linear-gradient(transparent 50%, #000 62.5% 75%, transparent 87.5%); mask: linear-gradient(transparent 50%, #000 62.5% 75%, transparent 87.5%); }
.desfoque-2 { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask: linear-gradient(transparent 62.5%, #000 75% 87.5%, transparent); mask: linear-gradient(transparent 62.5%, #000 75% 87.5%, transparent); }
.desfoque-3 { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask: linear-gradient(transparent 75%, #000 87.5%); mask: linear-gradient(transparent 75%, #000 87.5%); }
.desfoque-4 { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask: linear-gradient(transparent 82%, #000 92%); mask: linear-gradient(transparent 82%, #000 92%); }
.desfoque-5 { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); -webkit-mask: linear-gradient(transparent 88%, #000); mask: linear-gradient(transparent 88%, #000); }
/* o texto ao centro */
.heroi-conteudo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-32); min-height: 100%; padding-block: var(--e-96); text-align: center; pointer-events: none; }
.heroi-conteudo > * { pointer-events: auto; }
/* no computador o bloco não existe para a grelha; no telemóvel junta a pílula, os títulos e a caixa */
.heroi-bloco { display: contents; }
.pilula { display: flex; align-items: center; height: var(--e-32); padding: 0 var(--e-8); border-radius: 999px; background: #fff; font-size: clamp(10.4px, calc(10.4px + 1.6 * (100vw - 320px) / 1120), 12px); font-weight: 500; line-height: 1.5; white-space: nowrap; }
.pilula-ponto { display: block; width: var(--e-6); height: var(--e-6); margin: 0 4px; border-radius: 50%; background: var(--azul); }
.pilula > span:first-of-type { padding-left: var(--e-4); }
.pilula-mais { padding: 4px var(--e-6) 4px var(--e-4); color: rgba(15, 18, 24, .4); transition: color .2s ease; }
.pilula:hover .pilula-mais { color: var(--tinta); }
.heroi-textos { display: flex; flex-direction: column; align-items: center; gap: var(--e-24); }
.heroi-titulo { max-width: 8.15em; }
.heroi-sub { max-width: 26.84em; }
.palavra { display: inline-block; }
.heroi-caixa { display: flex; flex-direction: column; align-items: center; gap: var(--e-24); width: 100%; }
/* a caixa para colar o site da marca (à maneira do tryholo.ai) */
.site-caixa { position: relative; display: flex; align-items: center; gap: 12px; width: 560px; max-width: 100%; height: 62px; padding: 7px 7px 7px 22px; border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(15, 18, 24, .1), 0 1px 2px rgba(15, 18, 24, .04), 0 14px 36px rgba(23, 44, 97, .12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: box-shadow .25s ease; }
.site-caixa:focus-within { box-shadow: inset 0 0 0 1.5px var(--azul), 0 0 0 5px rgba(24, 87, 242, .12), 0 14px 36px rgba(23, 44, 97, .14); }
.site-caixa-icone { display: grid; flex: none; place-items: center; width: 22px; height: 22px; }
.site-caixa-icone svg { width: 22px; height: 22px; }
.site-caixa-campo { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.site-caixa-campo::placeholder { color: #8b92a3; }
.site-caixa-enviar { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 20px; border-radius: 999px; background: var(--azul); color: #fff; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -.01em; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 4px 12px rgba(24, 87, 242, .18); transition: background-color .2s ease, transform .2s ease; }
.site-caixa-enviar:hover { background: var(--azul-escuro); }
.site-caixa-enviar:active { transform: scale(.98); }
.site-caixa-seta { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: transform .25s ease; }
.site-caixa-enviar:hover .site-caixa-seta { transform: rotate(45deg); }
.site-caixa-seta svg { width: 16px; height: 16px; }
.site-caixa-erro { margin: 12px 0 0; color: #b4001f; font-size: 14px; line-height: 20px; }
.site-caixa-erro a { text-decoration: underline; text-underline-offset: 3px; }
.site-caixa-vistos { display: flex; justify-content: center; gap: 28px; margin: 18px 0 0; color: var(--tinta-2); font-size: 15px; line-height: 20px; }
.site-caixa-vistos li { display: inline-flex; align-items: center; gap: 7px; }
.site-caixa-vistos svg { width: 16px; height: 16px; color: #626a7a; }
.heroi-fila { display: none; }
/* a entrada ao carregar: o site.js mostra tudo; sem JavaScript, fica visível */
.js [data-heroi-entra], .js .onda { opacity: 0; }
.js.sem-movimento [data-heroi-entra], .js.sem-movimento .onda { opacity: 1; }

@media (max-width: 767px) {
  /* sem ondas: o texto no topo e uma fila de três fotografias por baixo */
  .heroi { height: auto; }
  .heroi-fixo { position: relative; height: auto; min-height: 100svh; background: radial-gradient(circle, #e5eaf4 1px, transparent 1px) 0 0 / 16px 16px; }
  .heroi-tela { display: none; }
  /* como na página de antes: o bloco e a fila repartem o espaço em três folgas iguais */
  .heroi-conteudo { justify-content: space-evenly; min-height: 100svh; padding-block: var(--e-96); gap: 0; }
  .heroi-bloco { display: flex; flex-direction: column; align-items: center; gap: var(--e-32); width: max(100%, min(560px, 100vw - 48px)); }
  .site-caixa { height: 56px; gap: 8px; padding: 6px 6px 6px 16px; }
  .site-caixa-icone, .site-caixa-icone svg { width: 20px; height: 20px; }
  .site-caixa-campo { font-size: 16px; }
  .site-caixa-enviar { height: 44px; gap: 8px; padding: 0 5px 0 15px; font-size: 15px; }
  .site-caixa-seta { width: 34px; height: 34px; }
  .site-caixa-vistos { gap: 18px; font-size: 14px; }
  .heroi-fila { position: relative; display: flex; justify-content: space-around; align-items: flex-start; gap: var(--e-48); width: 125vw; height: 128px; pointer-events: none; }
  .hf { position: relative; flex: none; }
  .hf .ep-foto { transform: scale(.8); }
  .hf .ep-alta img { width: 130px; height: 216px; }
  .hf-2 .ep-alta img { width: 122px; height: 202px; }
  .hf .ep-mais img { width: 118px; height: 234px; }
  .hf .ep { z-index: 3; }
  .hf .ep-m-8 { top: 10%; right: -48%; transform: scale(.5); }
  .hf .ep-m-3 { top: 23%; left: -23%; }
  .hf .ep-m-3 .oh-rede { width: 2.5rem !important; height: 2.5rem !important; border-radius: 10px; }
  .hf .ep-m-4 { z-index: 4; bottom: -17%; left: -54%; transform: scale(.5); }
}

/* ═══ AS MARCAS ═══ */
.marcas { position: relative; padding-block: var(--e-24) var(--e-144); background: var(--fundo-2); }
.marcas-cab { display: flex; align-items: center; justify-content: center; gap: var(--e-32); padding-inline: var(--e-24); }
.marcas-cab i { flex: 1; height: 1.5px; background: var(--linha); }
.marcas-cab p { font-size: var(--t-sub); line-height: 1.5; white-space: nowrap; }
.faixa { position: relative; margin-top: var(--e-24); padding-block: var(--e-6); overflow: hidden; }
.faixa-rolo { display: flex; width: 120%; margin-left: -10%; }
.faixa-lista { display: flex; flex: none; gap: clamp(40px, calc(40px + 24 * (100vw - 320px) / 1120), 64px); padding: 0 clamp(24px, calc(24px + 8 * (100vw - 320px) / 1120), 32px); }
.faixa-lista li { display: flex; align-items: center; height: 80px; }
.faixa-esbate { position: absolute; inset: 0 auto 0 -2px; z-index: 5; width: 15%; background: linear-gradient(90deg, var(--fundo-2), rgba(243, 246, 252, 0)); }
.faixa-esbate--dir { inset: 0 -2px 0 auto; transform: scaleX(-1); }
.marca { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; color: #101114; line-height: 1; white-space: nowrap; opacity: .55; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }
.marca:hover { opacity: .9; filter: grayscale(0); }
.marca img { width: auto; max-width: none; object-fit: contain; }
.marca--bauss img { height: 24px; }
.marca--velto { font-size: 24px; font-weight: 700; letter-spacing: -.045em; }
.marca--velto img { width: 28px; height: 28px; }
.marca--hit img { height: 28px; }
.marca--comunello img { height: 26px; }
.marca--odonly { font-family: BricolageWordmark, var(--letra); font-size: 25px; font-weight: 700; letter-spacing: -.055em; }
.marca--ymoki img { height: 22px; }
.marca--skuader { font-family: BoldonseWordmark, var(--letra); font-size: 19px; letter-spacing: -.04em; }
.marca-ponto { color: var(--azul); -webkit-text-stroke: 1.3px #101114; }
.marca--inove img { height: 22px; }

/* ═══ O PRODUTO ═══ */
.produto { position: relative; z-index: 1; margin-top: -96px; padding-top: var(--e-96); border-radius: var(--r-64) var(--r-64) 0 0; background: #fff; }
/* a sobreposição sobre as marcas anda aos saltos, como na página de antes */
@media (max-width: 991px) { .produto { margin-top: -64px; } }
@media (max-width: 479px) { .produto { margin-top: -32px; } }
.produto-cab { display: flex; flex-direction: column; gap: var(--e-32); }
.produto-cab h2 { max-width: 13.6em; }
.produto-cab p { max-width: 38.25em; }
/* no computador: preso ao ecrã enquanto se desce 3,6 ecrãs */
.produto-pista { position: relative; min-height: 360vh; margin-top: var(--e-64); }
.produto-fixo { position: sticky; top: 12.5vh; }
.produto-caixa { position: relative; height: 80vh; min-height: 560px; }
.produto-paineis { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-24); background: #f3f5f9; }
.produto-painel, .produto-painel-dentro { position: absolute; inset: 0; }
.produto-separadores { position: absolute; inset: 0 auto auto 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 64px; }
.produto-sep { display: flex; flex-direction: column; width: 400px; max-width: 100%; padding: 24px 32px; border-radius: var(--r-24); background: rgba(15, 18, 24, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='overlay'/%3E%3C/filter%3E%3Crect width='300' height='300' fill='%23fff' filter='url(%23g)' opacity='.4'/%3E%3C/svg%3E") 0 0 / 300px 300px; color: #222; text-align: left; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .3s ease; }
.produto-sep:hover { background-color: rgba(15, 18, 24, .14); }
.produto-sep-titulo { font-size: var(--t-sep); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.produto-sep-texto { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .45s cubic-bezier(.65, 0, .35, 1); }
.produto-sep-texto > span { min-height: 0; font-size: 14px; line-height: 20px; }
/* o espaço por cima do texto fica dentro do que se corta, para a aba fechada medir só o título */
.produto-sep-texto > span::before { content: ""; display: block; height: 8px; }
.produto-sep[aria-selected="true"] .produto-sep-texto { grid-template-rows: 1fr; }
.produto-lista { display: none; }
@media (max-width: 991px) {
  .produto-pista { display: none; }
  .produto-lista { display: grid; gap: clamp(32px, calc(32px + 8 * (100vw - 320px) / 1120), 40px); padding-block: var(--e-96); }
  .produto-item-cena { overflow: hidden; border-radius: var(--r-24); }
  .produto-item h3 { margin: 0; padding: calc(var(--e-32) + var(--e-24)) var(--e-16) 0; font-size: clamp(18.4px, calc(18.4px + 15.2 * (100vw - 320px) / 1120), 33.6px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
  .produto-item p { padding: var(--e-16) var(--e-16) 0; }
}

/* ═══ OS PASSOS ═══ */
.passos { position: relative; background: #fff; }
.passos-pista { position: relative; min-height: 400vh; min-height: 400svh; }
.passos-fixo { position: sticky; top: var(--e-120); }
.passos-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding-block: var(--e-96); }
.roda-caixa { aspect-ratio: 1; max-height: 612px; }
.roda { position: relative; }
.roda-item { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-24); background: #f3f5f9; }
.roda-item + .roda-item { opacity: .5; transform: translateY(calc(var(--i, 1) * 100%)) scale(.85); }
.passos-coluna { display: flex; flex-direction: column; gap: var(--e-24); padding: 24px 0 24px 24px; }
.passos-cab { display: flex; flex-direction: column; gap: var(--e-32); }
.passos-cab p { max-width: 40.26em; }
.passos-lista { display: flex; flex-direction: column; margin-top: calc(var(--e-32) + var(--e-24)); }
.passo { margin-bottom: -1px; }
.passo-botao { display: flex; gap: 32px; width: 100%; text-align: left; }
.passo-linha { position: relative; flex: none; width: 4px; }
.passo-linha::before { content: ""; position: absolute; inset: 0 auto 0 1px; width: 2px; background: var(--linha); }
.passo-linha i { position: absolute; inset: 0; background: var(--azul); transform: scaleY(0); transform-origin: top; transition: transform .25s cubic-bezier(.45, 0, .55, 1); }
.passo:first-child .passo-linha::before, .passo:first-child .passo-linha i { border-radius: 99px 99px 0 0; }
.passo:last-child .passo-linha::before, .passo:last-child .passo-linha i { border-radius: 0 0 99px 99px; }
.passo.feito .passo-linha i { transform: scaleY(1); }
.passo-texto { display: flex; flex-direction: column; padding: 16px 0; }
.passo-titulo { font-size: var(--t-sub); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.passo-mais { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows .25s cubic-bezier(.45, 0, .55, 1), opacity .25s ease; }
.passo-mais > span { min-height: 0; color: var(--tinta); font-size: 16px; line-height: 22px; }
.passo-mais > span::before { content: ""; display: block; height: 16px; }
.passo.ativo .passo-mais { grid-template-rows: 1fr; opacity: 1; }
.passos-movel { display: none; }
@media (max-width: 991px) {
  .passos-pista { display: none; }
  .passos-movel { display: block; padding-bottom: var(--e-96); }
  .passos-movel .passos-cab { gap: var(--e-32); }
  .carrossel { margin-top: var(--e-48); }
  .carrossel-lista { display: flex; gap: calc(2 * var(--e-5)); margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); scrollbar-width: none; }
  .carrossel-lista::-webkit-scrollbar { display: none; }
  /* um cartão e um décimo à vista: a largura de cada um é a da lista (com o recuo dos dois lados) a dividir por 1,1 */
  .carrossel-item { flex: none; width: calc((100% + 2 * var(--e-5)) / 1.1 - 2 * var(--e-5)); margin-bottom: -1px; scroll-snap-align: start; }
  .carrossel-cena { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-24); background: #f3f5f9; }
  .carrossel-item h3 { padding: var(--e-16) var(--e-6) 0; font-size: clamp(18.4px, calc(18.4px + 4.8 * (100vw - 320px) / 1120), 23.2px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
  .carrossel-item p { padding: var(--e-16) var(--e-6); }
  .carrossel-setas { display: flex; justify-content: flex-end; gap: var(--e-6); margin-top: var(--e-24); }
}

/* ═══ O TÚNEL ═══
   A secção é comprida e o miolo fica preso ao ecrã; o site.js põe cada
   peça na sua parede e anda com a câmara conforme o scroll. */
.orq-tunel { position: relative; height: 560vh; }
.orq-tunel-fixo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #fff; }
.orq-tunel-moldura { position: absolute; inset: 0; overflow: hidden; }
/* a perspetiva vive numa camada sem recorte: no Safari, perspetiva e recorte no mesmo elemento achatam o 3D */
.orq-tunel-perspetiva { position: absolute; inset: 0; perspective-origin: 50% 50%; }
.orq-tunel-mundo { position: absolute; top: 50%; left: 50%; width: 0; height: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.orq-tunel-cartao { position: absolute; top: 0; left: 0; overflow: hidden; border-radius: 22px; background: #fff; transform-origin: 0 0; box-shadow: 0 0 0 1px rgba(15, 18, 24, .06); }
.orq-tunel-cartao img { width: 100%; height: 100%; object-fit: cover; }
.orq-tunel-cab { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; justify-items: center; gap: 14px; width: min(640px, calc(100% - 48px)); text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.orq-tunel-cab p { max-width: 30rem; }
.orq-tunel-fim { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; transform-origin: 50% 50%; }
.orq-tunel-convite { display: grid; place-items: center; width: min(1248px, calc(100% - 64px)); min-height: 480px; padding: 72px 40px; border-radius: 24px; background: radial-gradient(circle, #d4dbe8 1px, transparent 1.3px) 0 0 / 22px 22px, #f3f5f9; color: var(--tinta); }
.orq-tunel-convite .convite-conteudo { gap: var(--e-32); }
.orq-tunel-convite .t-sub { max-width: 40rem; }
@media (max-width: 767px) {
  .orq-tunel-cartao { border-radius: 12px; }
  .orq-tunel-convite { width: calc(100% - 32px); min-height: 0; padding: 56px 20px; }
}

/* ═══ AS PERGUNTAS ═══ */
.faq { --faq-sinal: clamp(28px, calc(28px + 4 * (100vw - 320px) / 1120), 32px); padding-block: var(--e-96); }
.faq-grelha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--calha); min-height: 50vh; }
.faq-cab { grid-column: span 4; }
.faq-cab .t-eyebrow { margin-bottom: var(--e-32); }
.faq-cab h2 { max-width: 6.8em; margin-bottom: var(--e-32); }
.faq-lista { grid-column: span 8; margin-top: calc(-1 * var(--e-24)); padding-top: 1px; }
.faq-lista details { border-bottom: 1.5px solid var(--linha); }
.faq-lista summary { display: flex; list-style: none; cursor: pointer; align-items: center; justify-content: space-between; gap: var(--e-16); width: 100%; padding: var(--e-24) 0 var(--e-16); text-align: left; font-size: var(--t-sub); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-sinal { position: relative; display: grid; flex: none; place-items: center; width: var(--faq-sinal); height: var(--faq-sinal); border-radius: 8px; background: rgba(15, 18, 24, .08); transition: background-color .2s ease; }
.faq-lista summary:hover .faq-sinal { background: rgba(15, 18, 24, .14); }
.faq-sinal i { position: absolute; width: clamp(10px, calc(10px + 2 * (100vw - 320px) / 1120), 12px); height: 1.75px; border-radius: 99px; background: var(--tinta); transition: transform .3s ease, opacity .3s ease; }
.faq-sinal i + i { height: 2px; transform: rotate(90deg); }
.faq-lista details.aberta .faq-sinal i + i, html:not(.js) .faq-lista details[open] .faq-sinal i + i { transform: rotate(0deg); opacity: 0; }
.faq-lista details > p { padding-bottom: var(--e-32); font-size: var(--t-corpo); line-height: 1.5; }
@media (max-width: 991px) {
  .faq-cab, .faq-lista { grid-column: 1 / -1; }
}

/* ═══ AS REDES: a roda do orquesdra.com ═══
   Os anéis giram em CSS; os ícones entram um a um quando a roda aparece
   (.orq-visto, do site.js) e pulsam uns contra os outros. */
.redes { padding-block: var(--e-96); }
.redes .contentor { display: flex; flex-direction: column; align-items: center; text-align: center; }
.redes-sub { margin-top: var(--e-32); }
.orq-integra { position: relative; width: 100%; max-width: 920px; aspect-ratio: 920 / 615; margin: var(--e-64) auto 0; overflow: hidden; }
.orq-integra-roda { position: relative; width: 100%; aspect-ratio: 1; margin-top: -16.6%; transform: translateY(26%); }
/* os anéis têm um buraco redondo ao centro, onde só fica o catavento */
.orq-integra-aneis { --furo: 57px; position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--furo), #000 calc(var(--furo) + 1px)); mask-image: radial-gradient(circle at 50% 50%, transparent var(--furo), #000 calc(var(--furo) + 1px)); animation: orq-gira 24s linear infinite; }
@keyframes orq-gira { to { transform: rotate(360deg); } }
.orq-integra-ic { position: absolute; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; color: #232323; border-radius: 50%; background: #fff; box-shadow: 0 0 24px rgba(60, 86, 255, .25); opacity: 0; transition: opacity .6s ease calc(1.1s + var(--i) * .1s); animation: orq-pulsa 1s ease-in-out infinite alternate; }
.orq-integra-ic:nth-child(odd) { animation-direction: alternate-reverse; }
.orq-integra.orq-visto .orq-integra-ic { opacity: 1; }
@keyframes orq-pulsa { from { transform: scale(1); } to { transform: scale(.8); } }
.orq-integra-ic svg { width: 28px; height: 28px; }
.orq-integra-sombra { position: absolute; z-index: 3; inset: auto 0 0; height: 30%; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .45) 32%, #fff 74%); pointer-events: none; }
.orq-integra-centro { position: absolute; z-index: 4; top: 88.86%; left: 50%; display: grid; place-items: center; width: 114px; height: 114px; margin: -57px 0 0 -57px; }
.orq-integra-centro svg { width: 66px; height: 66px; fill: var(--azul); }
@media (max-width: 991px) {
  .orq-integra-ic { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .orq-integra-ic svg { width: 24px; height: 24px; }
  .orq-integra-centro { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
  .orq-integra-aneis { --furo: 42px; }
  .orq-integra-centro svg { width: 46px; height: 46px; }
}
@media (max-width: 767px) {
  .orq-integra-ic.is-extra { display: none; }
  .orq-integra-ic { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .orq-integra-ic svg { width: 16px; height: 16px; }
  .orq-integra-centro { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .orq-integra-aneis { --furo: 29px; }
  .orq-integra-centro svg { width: 32px; height: 32px; }
}

/* ═══ OS PLANOS: os do orquesdra.com ═══ */
.orq-planos { --pl-azul: var(--azul); --pl-grad: linear-gradient(90deg, #1446dc 0%, #2a74ff 55%, #3f9dff 100%); --pl-borda: #e8e8ed; --pl-borda-2: rgba(0, 0, 0, .1); padding-top: var(--e-96); }
.orq-planos .pricing-heading { display: grid; justify-items: center; gap: var(--e-32); text-align: center; }
.orq-planos .pricing-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: calc(40px - var(--e-32)); padding: 6px; border: 1px solid var(--pl-borda-2); border-radius: 48px; background: #fff; isolation: isolate; }
.orq-planos .pricing-toggle::before { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 8px); border-radius: 48px; background: #e9ecf1; content: ""; transition: transform .38s cubic-bezier(.2, .82, .2, 1); }
.orq-planos[data-pricing-billing="annual"] .pricing-toggle::before { transform: translateX(calc(100% + 4px)); }
.orq-planos .pricing-toggle button { position: relative; z-index: 1; min-height: 44px; padding: 0 24px; color: #323232; border-radius: 48px; font-size: 15px; font-weight: 500; line-height: 1; }
.orq-planos .pricing-toggle button:focus { outline: none; }
.orq-planos .pricing-toggle button:focus-visible { outline: 2px solid rgba(24, 87, 242, .55); outline-offset: -3px; }
.orq-planos .pricing-toggle button span { margin-left: 4px; color: var(--pl-azul); }
.orq-planos .pricing-toggle button.is-active span { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; color: #fff; border-radius: 999px; background: var(--pl-azul); font-size: 11px; }
.orq-planos .pricing-details { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 32px; margin-top: 60px; }
.orq-planos .pricing-detail-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--pl-borda-2); border-radius: 24px; background: #fff; }
.orq-planos .pricing-detail-card.is-destaque { border: 12px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #a9c6ff 0%, #a9ccff 100%) border-box; transform: translateY(-12px); }
.orq-planos .pricing-detail-head { display: flex; align-items: center; gap: 14px; }
.orq-planos .pricing-detail-name > strong { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 16px; color: #1a1a1a; border-radius: 48px; background: linear-gradient(90deg, #e1ecff, #e6f1ff); font-size: 16px; font-weight: 500; }
.orq-planos .pricing-detail-card.is-destaque .pricing-detail-name > strong { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--pl-grad) border-box; }
.orq-planos .pricing-badge { color: #323232; font-size: 16px; font-weight: 500; }
.orq-planos .pricing-one-liner { margin-top: 20px; color: #1a1a1a; font-size: 17px; line-height: 1.47; }
.orq-planos .pricing-price { display: grid; grid-template-columns: max-content max-content; grid-template-rows: auto auto; align-items: end; column-gap: 10px; row-gap: 4px; margin-top: 20px; }
.orq-planos .pricing-price strong { grid-column: 1; grid-row: 2; color: #232323; font-size: 52px; font-weight: 500; line-height: 1; letter-spacing: -2px; }
.orq-planos .pricing-price > span:last-child { grid-column: 2; grid-row: 2; padding-bottom: 6px; color: #323232; font-size: 16px; }
.orq-planos .pricing-old-price { grid-column: 1 / -1; grid-row: 1; align-self: start; color: #656a75; font-size: 14px; }
.orq-planos .pricing-old-price s { color: #9297a1; text-decoration: line-through; }
.orq-planos .pricing-vat { color: #656a75; font-size: 13px; font-weight: 500; white-space: nowrap; }
.orq-planos[data-pricing-billing="monthly"] .pricing-old-price { visibility: hidden; }
.orq-planos .pricing-price--custom strong { grid-column: 1 / -1; font-size: 44px; }
.orq-planos .pricing-cycle { min-height: 22px; margin-top: 10px; padding-bottom: 24px; color: #656a75; font-size: 14px; line-height: 22px; border-bottom: 1px solid var(--pl-borda); }
.orq-planos .pricing-highlights { margin-top: 24px; }
.orq-planos .pricing-highlights h3 { margin-bottom: 18px; color: #000; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.orq-planos .pricing-highlights ul { display: grid; gap: 12px; }
.orq-planos .pricing-highlights li { position: relative; display: grid; gap: 2px; padding-left: 30px; }
.orq-planos .pricing-highlights li::before { position: absolute; top: 2px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #6aa9f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; content: ""; }
.orq-planos .pricing-highlights li span { color: #232323; font-size: 16px; line-height: 22px; }
.orq-planos .pricing-note { display: grid; grid-template-columns: 16px 1fr; gap: 9px; margin: 22px 0 0; color: #5f6470; font-size: 12.5px; line-height: 1.5; }
.orq-planos .pricing-note > span { display: grid; place-items: center; width: 16px; height: 16px; color: #fff; border-radius: 50%; background: #343943; font-size: 9px; font-weight: 700; }
.orq-planos .pricing-cta { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: auto; padding: 14px 24px; color: #000; border: 1px solid transparent; border-radius: 48px; background: linear-gradient(#fff, #fff) padding-box, var(--pl-grad) border-box; font-size: 16px; font-weight: 500; transition: transform .3s ease, box-shadow .3s ease; }
.orq-planos .pricing-note + .pricing-cta { margin-top: 28px; }
.orq-planos .pricing-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24, 87, 242, .15); }
.orq-planos .pricing-cta:focus-visible { outline: 3px solid rgba(24, 87, 242, .45); outline-offset: 3px; }
.orq-planos .pricing-cta--azul { color: #fff; background: linear-gradient(var(--pl-azul), var(--pl-azul)) padding-box, var(--pl-grad) border-box; }
/* a entrada: o da esquerda vem da esquerda, o da direita da direita, o do meio de baixo */
.orq-planos .pricing-detail-card { transition: opacity .6s ease-out, translate .6s ease-out; }
/* os cartões entram de lado: o que passa da borda do ecrã antes de entrarem não pode alargar a página */
.orq-planos { overflow-x: clip; }
.orq-planos.orq-espera:not(.orq-visto) .pricing-detail-card { opacity: 0; }
.orq-planos.orq-espera:not(.orq-visto) #pricing-panel-studio { translate: -60px 0; }
.orq-planos.orq-espera:not(.orq-visto) #pricing-panel-brand { translate: 0 60px; }
.orq-planos.orq-espera:not(.orq-visto) #pricing-panel-custom { translate: 60px 0; }
.orq-planos.orq-visto #pricing-panel-brand { transition-delay: .1s; }
@media (max-width: 1240px) {
  .orq-planos .pricing-details { grid-template-columns: 1fr; gap: 20px; max-width: 920px; margin-right: auto; margin-left: auto; }
  .orq-planos .pricing-detail-card { display: grid; grid-template-areas: "cab vant" "frase vant" "preco vant" "ciclo vant" "cta nota"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 48px; align-items: start; padding: 32px; }
  .orq-planos .pricing-detail-card.is-destaque { transform: none; }
  .orq-planos .pricing-detail-head { grid-area: cab; }
  .orq-planos .pricing-one-liner { grid-area: frase; }
  .orq-planos .pricing-price { grid-area: preco; }
  .orq-planos .pricing-cycle { grid-area: ciclo; border-bottom: 0; padding-bottom: 0; }
  .orq-planos .pricing-highlights { grid-area: vant; margin-top: 0; padding-left: 40px; border-left: 1px solid var(--pl-borda); }
  .orq-planos .pricing-note { grid-area: nota; align-self: end; margin: 0 0 0 40px; }
  .orq-planos .pricing-cta { grid-area: cta; align-self: end; margin-top: 24px; }
  .orq-planos .pricing-note + .pricing-cta { margin-top: 24px; }
}
@media (max-width: 767px) {
  /* empilhados, o mais escolhido primeiro */
  .orq-planos .pricing-toggle { display: grid; width: 100%; margin-top: calc(24px - var(--e-32)); }
  .orq-planos .pricing-details { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .orq-planos .pricing-detail-card { display: flex; padding: 24px; border-radius: 22px; }
  .orq-planos .pricing-detail-head { flex-wrap: wrap; gap: 6px 12px; }
  .orq-planos .pricing-detail-name > strong { min-height: 34px; padding: 5px 14px; font-size: 15px; white-space: nowrap; }
  .orq-planos .pricing-badge { font-size: 15px; white-space: nowrap; }
  .orq-planos .pricing-detail-card.is-destaque { order: -1; border-width: 6px; transform: none; }
  .orq-planos .pricing-price strong { font-size: 44px; letter-spacing: -1.5px; }
  .orq-planos .pricing-price--custom strong { font-size: 36px; }
  .orq-planos .pricing-cycle { border-bottom: 1px solid var(--pl-borda); padding-bottom: 20px; }
  .orq-planos .pricing-highlights { margin-top: 20px; padding-left: 0; border-left: 0; }
  .orq-planos .pricing-note { align-self: stretch; margin: 20px 0 0; }
  .orq-planos .pricing-cta { align-self: stretch; margin-top: 24px; }
}

/* ═══ O CONVITE ═══
   O cartão claro com os pontinhos que fogem do rato, e duas peças inclinadas
   a sair pelas pontas, a flutuar devagar. */
.convite { padding-block: var(--e-96) var(--e-64); }
.convite-caixa { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 540px; padding: var(--e-64); overflow: hidden; border-radius: var(--r-24); background: var(--fundo-2); }
.convite-caixa > .pontos { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.convite-conteudo { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--e-32); max-width: 650px; text-align: center; }
.convite-conteudo .t-eyebrow { margin-bottom: var(--e-32); }
.convite-conteudo .t-sub { max-width: 28.33em; }
/* o título mede 650,5px numa linha e a caixa 650px: na página de antes transbordava meio píxel em vez de partir */
.convite-caixa .t-display-md { margin-inline: -1px; }
.convite-conteudo .botao { margin-top: 8px; }
.convite-caixa .botao { margin-block: var(--e-6); }
.convite-nota { margin-top: -8px; color: #7a8394; font-size: 14px; line-height: 20px; }
.convite-peca { position: absolute; z-index: 2; top: 50%; width: 230px; animation: flutua 7s ease-in-out infinite; pointer-events: none; }
.convite-peca--esq { left: -22px; --roda: -6deg; }
.convite-peca--dir { right: -22px; --roda: 6deg; animation-delay: -3.5s; }
.convite-cartao { padding: 7px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 18, 24, .07), 0 1px 2px rgba(15, 18, 24, .04), 0 18px 40px rgba(23, 44, 97, .12); }
.convite-cartao img { width: 100%; height: auto; border-radius: 9px; }
@keyframes flutua { 0%, 100% { transform: translateY(-50%) rotate(var(--roda)); } 50% { transform: translateY(calc(-50% - 12px)) rotate(var(--roda)); } }
@media (max-width: 1100px) {
  .convite-peca { width: 180px; }
  .convite-peca--esq { left: -70px; }
  .convite-peca--dir { right: -70px; }
}
@media (max-width: 767px) {
  .convite-caixa { min-height: 0; }
  .convite-peca { display: none; }
}

/* ═══ O RODAPÉ: o do orquesdra.com ═══ */
.orq-rodape { width: 100%; max-width: 1440px; margin: 0 auto; padding: 20px; background: #fff; }
.orq-rodape-painel { position: relative; overflow: hidden; color: #030b1d; border: 1px solid #e4eafa; border-radius: 60px; background: radial-gradient(ellipse 60% 70% at 100% 100%, rgba(120, 165, 255, .32), transparent 65%), radial-gradient(ellipse 55% 60% at 0% 0%, rgba(215, 230, 255, .9), transparent 70%), linear-gradient(170deg, #fbfcff 0%, #f3f6ff 50%, #e9f0ff 100%); }
.orq-rodape-dentro { width: min(1116px, calc(100% - 48px)); margin: 0 auto; }
.orq-rodape-topo { padding: 100px 0 32px; }
.orq-rodape-principal { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 40px; }
.orq-rodape-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 600; letter-spacing: -.04em; }
.orq-rodape-logo svg { width: 42px; height: 42px; fill: url(#mg-grad-marca); }
.orq-rodape-sub { margin-top: 74px; color: #62697d; font-size: 16px; font-weight: 500; line-height: 24px; }
.orq-rodape-redes { display: flex; gap: 10px; margin-top: 12px; }
.orq-rodape-redes a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(24, 87, 242, .08), 0 4px 12px rgba(40, 80, 170, .08); transition: transform .3s ease; }
.orq-rodape-redes a:hover, .orq-rodape-redes a:focus-visible { transform: translateY(-3px); }
.orq-rodape-redes svg { width: 18px; height: 18px; }
.orq-rodape-ligacoes { display: flex; justify-content: space-between; gap: 40px; padding-left: 70px; }
.orq-rodape-grupo > strong { display: block; margin-bottom: 24px; font-size: 20px; font-weight: 600; line-height: 25px; }
.orq-rodape-colunas { display: grid; grid-auto-columns: max-content; grid-auto-flow: column; gap: 16px 28px; }
.orq-rodape-colunas span { display: grid; align-content: start; gap: 16px; }
.orq-rodape-ligacoes a { width: max-content; color: #3d4455; font-size: 16px; line-height: 20px; transition: color .2s ease, transform .3s ease; }
.orq-rodape-ligacoes a:hover { color: var(--azul); transform: translateX(3px); }
.orq-rodape-convite { padding: 32px 0 64px; }
.orq-rodape-frase { max-width: 520px; font-size: 36px; font-weight: 600; line-height: 45px; letter-spacing: -.02em; }
.orq-rodape-fundo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 8px 0 44px; color: #62697d; font-size: 16px; font-weight: 500; }
.orq-rodape-fundo a { color: #030b1d; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991px) {
  .orq-rodape-painel { border-radius: 40px; }
  .orq-rodape-topo { padding-top: 64px; }
  .orq-rodape-principal { grid-template-columns: 1fr; }
  .orq-rodape-sub { margin-top: 28px; }
  .orq-rodape-ligacoes { justify-content: flex-start; gap: 64px; padding-left: 0; }
}
@media (max-width: 767px) {
  .orq-rodape { padding: 8px; }
  .orq-rodape-painel { border-radius: 24px; }
  .orq-rodape-dentro { width: calc(100% - 40px); }
  .orq-rodape-topo { padding: 44px 0 20px; }
  .orq-rodape-logo { font-size: 22px; }
  .orq-rodape-logo svg { width: 34px; height: 34px; }
  .orq-rodape-sub { margin-top: 20px; font-size: 15px; }
  .orq-rodape-ligacoes { flex-direction: column; gap: 26px; }
  .orq-rodape-grupo > strong { margin-bottom: 14px; font-size: 17px; }
  .orq-rodape-ligacoes a { font-size: 15px; }
  .orq-rodape-colunas, .orq-rodape-colunas span { gap: 14px 24px; }
  .orq-rodape-convite { padding: 12px 0 28px; }
  .orq-rodape-frase { font-size: 24px; line-height: 1.25; }
  .orq-rodape-frase br { display: none; }
  .orq-rodape-fundo { justify-content: center; padding-bottom: 28px; font-size: 14px; text-align: center; }
}

/* ═══ POUCO MOVIMENTO ═══ */
@media (prefers-reduced-motion: reduce) {
  .orq-integra-aneis, .orq-integra-ic, .convite-peca { animation: none; }
  .orq-integra-ic { opacity: 1; transition: none; }
  .convite-peca { transform: translateY(-50%) rotate(var(--roda)); }
  .orq-planos .pricing-detail-card { transition: none; }
  .orq-tunel { height: auto; }
  .orq-tunel-fixo { position: relative; }
  .heroi { height: auto; }
}

/* ═══ AS QUEBRAS DE LINHA ═══
   Como na página de antes: os títulos pequenos repartem as palavras pelas linhas, os textos corridos não
   deixam uma palavra sozinha na última linha. */
.produto-sep-titulo, .passo-titulo, .produto-item h3, .carrossel-item h3, .faq-lista summary > span:first-child,
.pricing-heading .t-sub, .pricing-highlights h3, .convite-caixa .t-sub { text-wrap: balance; }
.produto-sep-texto > span, .passo-mais > span, .produto-item p, .carrossel-item p, .faq-lista details > p { text-wrap: pretty; }

/* ═══ OS CANTOS ═══
   Onde o navegador sabe desenhar cantos «squircle» (o Chrome), os cartões levam o dobro do raio com esse
   desenho, como na página de antes; nos outros (o Safari do iPhone) ficam com o raio simples. As peças das
   cenas vêm do orquesdra-cenas.css, que carrega depois desta folha: o :root dá-lhes a força para ganhar. */
@supports (corner-shape: squircle) {
  .saltar, .seta-redonda { border-radius: 32px; corner-shape: squircle; }
  .faq-sinal { border-radius: 16px; corner-shape: squircle; }
  .ep-foto { border-radius: 27.72px; corner-shape: squircle; }
  .ep-foto img { border-radius: 13.86px; corner-shape: squircle; }
  .produto-paineis, .produto-sep, .produto-item-cena, .roda-item, .carrossel-cena, .convite-caixa { border-radius: var(--r-48); corner-shape: squircle; }
  .orq-tunel-convite { border-radius: 48px; corner-shape: squircle; }
  :root :is(.oc-cartao, .oc-bloco, .oc-moldura, .oc-rede-linha, .oc-ideia) { border-radius: 24px; corner-shape: squircle; }
  :root :is(.oc-foto, .oc-gera, .oc-ideia-n, .oc-carrossel i, .oc-dia, .oc-agenda > img, .oh-amostras i, .oh-post img) { border-radius: 16px; corner-shape: squircle; }
  :root :is(.oc-logo-bokari, .oc-dia-peca img, .oh-logo-mare) { border-radius: 12px; corner-shape: squircle; }
}