/* Limpa Já — cores medidas no logótipo e nos posts do cliente (12/10/2026): marinho #001634 / #0a1625, royal #0048a8 a
   #0060c0, celeste #0084cc / #0090d8, azul vivo #1878d8, gelo #e1e7ec. A voz vem dos posts: letra condensada, em
   itálico pesado (os rótulos «ANTES / DEPOIS»), brilho azul e as estrelas e bolhas do logótipo.
   Contrastes (WCAG): branco-gelo/noite 18:1 · névoa/noite 10:1 · celeste/noite 6,6:1 · branco/royal 6,4:1 ·
   tinta/gelo 15:1 · royal/gelo 6,0:1. Celeste sobre gelo NÃO (2,6:1): no claro, o destaque é o royal. */
:root {
  --noite: #04101f;
  --noite-2: #071a33;
  --marinho: #0a2550;
  --royal: #0b57c8;
  --royal-2: #1670e6;
  --celeste: #3aa2f2;
  --celeste-2: #7cc4ff;
  --gelo: #eef4fb;
  --tinta: #0b1a2e;
  --tinta-suave: #44566e;
  --branco: #f5f9fd;
  --nevoa: #aebfd6;
  --linha: rgba(150, 190, 255, .16);
  --linha-clara: rgba(11, 26, 46, .11);
  --titulo: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --curva: cubic-bezier(.16, 1, .3, 1);
  --raio: 1.25rem;
  --margem: clamp(1.25rem, 5vw, 4.5rem);
  --seccao: clamp(4.5rem, 10vw, 8.5rem);
  --topo: 5.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 1rem); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--noite); color: var(--nevoa); font: 400 1.0625rem/1.6 var(--texto); -webkit-font-smoothing: antialiased; }
::selection { background: var(--royal-2); color: var(--branco); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--titulo); font-style: italic; font-weight: 800; color: var(--branco); line-height: .96; letter-spacing: -.005em; }
h2 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.25rem); }
h3 { font-size: 1.6rem; font-weight: 700; line-height: 1.05; }
.nb { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; border-radius: 6px; }
.envolve { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--margem); }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 90; background: var(--royal); color: var(--branco); padding: .75rem 1.1rem; border-radius: .6rem; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 1rem; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* etiqueta: a estrela do logótipo + caixa alta espaçada */
.etiqueta { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; font: 600 .82rem/1.3 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--celeste); }
.etiqueta .ico { width: 1.15rem; height: 1.15rem; }

/* ---------- botões: pílula azul com brilho, como o «AGENDE JÁ» dos posts ---------- */
.accoes { display: flex; flex-wrap: wrap; gap: .8rem; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.4rem; border-radius: 999px; border: 1.5px solid transparent; font: 600 1.02rem/1 var(--texto); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .25s var(--curva), box-shadow .3s var(--curva), background-color .2s, border-color .2s, color .2s; }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.98); }
.botao-azul { color: var(--branco); background: linear-gradient(180deg, var(--royal-2), var(--royal)); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 14px 34px -14px rgba(22, 112, 230, .95); }
.botao-azul:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 20px 44px -14px rgba(58, 162, 242, .95); }
.botao-linha { color: var(--branco); border-color: rgba(174, 191, 214, .4); }
.botao-linha:hover { border-color: var(--celeste); color: var(--celeste-2); }
.botao-pequeno { min-height: 2.75rem; padding: 0 1.15rem; font-size: .95rem; }
.botao-grande { min-height: 3.75rem; padding: 0 2rem; font-size: 1.1rem; }

/* ---------- cabeçalho ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--topo); border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s, height .35s var(--curva); }
.topo.rolou { --topo: 4.5rem; height: 4.5rem; background: rgba(4, 16, 31, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--linha); }
.topo-linha { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.marca { display: inline-flex; align-items: center; min-height: 2.75rem; flex: none; }
.marca-logo img { width: auto; height: 4.25rem; transition: height .35s var(--curva); }
.topo.rolou .marca-logo img { height: 3.25rem; }
.navegacao { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.nav-lista { display: flex; gap: .2rem; }
.nav-lista a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 .85rem; color: var(--branco); text-decoration: none; font-weight: 500; font-size: .98rem; border-radius: 999px; transition: color .2s, background-color .2s; }
.nav-lista a:hover { color: var(--celeste-2); background: rgba(58, 162, 242, .08); }
.lingua { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--linha); border-radius: 999px; color: var(--branco); font: 600 .82rem/1 var(--texto); letter-spacing: .1em; text-decoration: none; }
.lingua:hover { border-color: var(--celeste); color: var(--celeste-2); }
.botao-menu { display: none; margin-left: auto; width: 2.9rem; height: 2.9rem; border: 1px solid var(--linha); border-radius: 999px; background: transparent; color: var(--branco); align-items: center; justify-content: center; cursor: pointer; }

/* ---------- herói ---------- */
.heroi { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--topo) + clamp(2rem, 5vw, 4.5rem)) 0 clamp(4rem, 8vw, 6.5rem);
  background:
    radial-gradient(60rem 40rem at 82% 30%, rgba(22, 112, 230, .34), transparent 65%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(58, 162, 242, .12), transparent 70%),
    linear-gradient(180deg, #04101f 0%, #061a36 100%); }
.heroi-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.heroi h1 { font-size: clamp(3.4rem, 1.4rem + 6.2vw, 7.75rem); line-height: .88; }
.heroi h1 .h1-sobre { display: block; margin-bottom: .14em; font-size: .4em; line-height: 1.02; letter-spacing: .005em; color: var(--branco); }
.heroi h1 .destaque { display: block; padding-bottom: .06em; background: linear-gradient(100deg, var(--celeste-2) 0%, var(--celeste) 45%, var(--royal-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroi-sub { margin-top: 1.6rem; max-width: 34rem; font-size: 1.2rem; line-height: 1.55; color: var(--nevoa); }
.heroi .accoes { margin-top: 2.25rem; }
.provas { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); font-size: .98rem; color: var(--branco); }
.provas li { display: inline-flex; align-items: center; gap: .5rem; }
.provas .ico { width: 1.1rem; height: 1.1rem; color: var(--celeste); }

/* as bolhas do logótipo, poucas e lentas */
.heroi-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.heroi-luz span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .85) 0 7%, rgba(255, 255, 255, 0) 20%), radial-gradient(circle at 50% 50%, rgba(58, 162, 242, .04) 0 58%, rgba(124, 196, 255, .32) 70%, rgba(124, 196, 255, 0) 72%); box-shadow: inset -4px -6px 14px rgba(124, 196, 255, .18); opacity: .8; }
.heroi-luz span:nth-child(1) { width: 3.6rem; height: 3.6rem; top: 18%; left: 52%; }
.heroi-luz span:nth-child(2) { width: 1.6rem; height: 1.6rem; top: 12%; left: 58%; }
.heroi-luz span:nth-child(3) { width: 2.2rem; height: 2.2rem; top: 78%; left: 6%; }
.heroi-luz span:nth-child(4) { width: 1.1rem; height: 1.1rem; top: 7%; left: 40%; }
.heroi-luz span:nth-child(5) { width: 5rem; height: 5rem; top: 70%; right: 3%; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .heroi-luz span { animation: flutuar 11s ease-in-out infinite alternate; }
  .heroi-luz span:nth-child(2n) { animation-duration: 14s; animation-delay: -4s; }
  @keyframes flutuar { to { transform: translateY(-18px); } }
  .js .heroi .entra { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--curva), transform .9s var(--curva); }
  .js .heroi .entra.visto { opacity: 1; transform: none; }
}

/* díptico: antes à esquerda, depois à direita, e a costura de luz azul dos posts */
.diptico { justify-self: end; width: min(100%, 37rem); }
.diptico-fotos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 1.6rem; overflow: hidden; background: var(--celeste);
  box-shadow: 0 0 0 1px rgba(124, 196, 255, .3), 0 50px 110px -45px rgba(22, 112, 230, .9); }
.diptico-lado { position: relative; aspect-ratio: 3 / 4.4; background: var(--noite-2); }
.diptico-lado:first-child img { object-position: 80% 50%; }
.diptico-lado > picture, .par-lado > picture { position: absolute; inset: 0; }
.diptico-lado img, .par-lado img { width: 100%; height: 100%; object-fit: cover; }
.diptico-costura { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--celeste-2) 18%, var(--celeste-2) 82%, transparent); box-shadow: 0 0 18px 2px rgba(58, 162, 242, .85); }
.selo { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #12408a, var(--noite)); border: 2px solid var(--celeste-2); color: var(--branco); box-shadow: 0 0 24px rgba(58, 162, 242, .9); }
.selo .ico { width: 1.6rem; height: 1.6rem; }
.diptico figcaption, .comparador figcaption { margin-top: 1rem; font-size: .92rem; color: var(--nevoa); }

/* os rótulos «ANTES / DEPOIS», na letra dos posts */
.chip { position: absolute; top: .9rem; z-index: 2; padding: .4rem .85rem .35rem; border-radius: .55rem; font: italic 800 1.05rem/1 var(--titulo); letter-spacing: .05em; text-transform: uppercase; color: var(--branco); }
.chip-antes { left: .9rem; background: rgba(4, 16, 31, .85); box-shadow: 0 0 0 1px rgba(174, 191, 214, .25); }
.chip-depois { right: .9rem; background: linear-gradient(180deg, var(--royal-2), var(--royal)); box-shadow: 0 6px 18px -6px rgba(22, 112, 230, .9); }
.diptico-lado .chip-depois, .par-lado .chip-depois { right: auto; left: .9rem; }

/* ---------- faixa ---------- */
.faixa { overflow: hidden; background: linear-gradient(90deg, var(--royal), var(--royal-2) 60%, var(--celeste)); color: var(--branco); }
.faixa ul { display: flex; width: max-content; gap: 2.5rem; padding: 1.05rem 0; animation: correr 48s linear infinite; }
.faixa li { display: inline-flex; align-items: center; gap: 2.5rem; font: italic 800 1.55rem/1 var(--titulo); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.faixa li::after { content: ""; width: .85rem; height: .85rem; background: var(--branco); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .faixa ul { animation: none; } }

/* ---------- secções ---------- */
.seccao-cabeca { max-width: 40rem; }
.seccao-cabeca > p:not(.etiqueta) { margin-top: 1.1rem; font-size: 1.15rem; }

/* ---------- antes e depois ---------- */
.antes { padding-block: var(--seccao); background: linear-gradient(180deg, #061a36 0%, var(--noite) 22%); }
.antes-topo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.antes .seccao-cabeca { align-self: center; }

/* comparador (colchão): a fotografia do antes recorta-se por cima do depois; o range é o controlo, invisível */
.comparador { justify-self: end; width: min(100%, 32rem); }
.comp-area { position: relative; aspect-ratio: 4 / 5; border-radius: 1.6rem; overflow: hidden; background: var(--noite-2); box-shadow: 0 0 0 1px rgba(124, 196, 255, .3), 0 50px 110px -45px rgba(22, 112, 230, .9); }
.comp-area > picture { position: absolute; inset: 0; }
.comp-area img { width: 100%; height: 100%; object-fit: cover; }
.comp-area .comp-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comp-area .chip-antes { left: .9rem; }
.comp-area .chip-depois { right: .9rem; }
.comp-linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; transform: translateX(-50%); pointer-events: none; background: var(--celeste-2); box-shadow: 0 0 18px 2px rgba(58, 162, 242, .85); }
.comp-pega { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #12408a, var(--noite)); border: 2px solid var(--celeste-2); color: var(--branco); box-shadow: 0 0 24px rgba(58, 162, 242, .9); }
.comp-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.comp-area:has(.comp-range:focus-visible) .comp-pega { outline: 3px solid var(--branco); outline-offset: 3px; }
.comp-dica { display: inline-flex; align-items: center; gap: .4rem; margin-left: .75rem; color: var(--celeste); font-weight: 600; }
.comp-dica .ico { width: 1.1rem; height: 1.1rem; }

.lista-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.par-fotos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: var(--raio); overflow: hidden; background: var(--celeste); box-shadow: 0 0 0 1px rgba(124, 196, 255, .22), 0 30px 70px -40px rgba(22, 112, 230, .8); }
.par-lado { position: relative; aspect-ratio: 4 / 5; background: var(--noite-2); }
.par-lado .chip { top: .7rem; font-size: .92rem; }
.par-lado:first-child .chip { left: .7rem; }
.par-lado:last-child .chip { left: .7rem; }
.par-costura { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--noite); border: 2px solid var(--celeste-2); color: var(--branco); box-shadow: 0 0 18px rgba(58, 162, 242, .8); }
.par-costura .ico { width: 1.2rem; height: 1.2rem; }
.par-legenda { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; margin-top: 1rem; }
.par-legenda strong { font: italic 700 1.45rem/1.1 var(--titulo); color: var(--branco); }
.par-legenda span { font-size: .98rem; }

/* ---------- serviços (claro) ---------- */
.servicos, .perguntas { background: var(--gelo); color: var(--tinta-suave); }
.servicos h2, .servicos h3, .perguntas h2 { color: var(--tinta); }
.servicos .etiqueta, .perguntas .etiqueta { color: var(--royal); }
.servicos { padding-block: var(--seccao); }
.servicos-grelha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.servicos-esq { position: sticky; top: calc(var(--topo) + 1.5rem); }
.servicos-foto { margin-top: 2.5rem; max-width: 26rem; border-radius: 1.6rem; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -45px rgba(11, 26, 46, .55); }
.servicos-foto img { width: 100%; height: 100%; object-fit: cover; }
.lista-servicos li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.4rem; align-items: start; padding: 2rem 0; border-top: 1px solid var(--linha-clara); }
.lista-servicos li:last-child { border-bottom: 1px solid var(--linha-clara); }
/* o ícone num anel, como no folheto */
.serv-ico { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #12408a, var(--noite)); color: var(--branco); box-shadow: 0 0 0 2px rgba(58, 162, 242, .55), 0 14px 30px -14px rgba(11, 87, 200, .9); }
.serv-ico .ico { width: 2.1rem; height: 2.1rem; stroke-width: 1.5; }
.lista-servicos h3 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); margin-top: .2rem; }
.lista-servicos p { margin-top: .5rem; font-size: 1.1rem; max-width: 32rem; color: var(--tinta-suave); }

/* ---------- como funciona ---------- */
.como { padding-block: var(--seccao); background: radial-gradient(50rem 36rem at 90% 60%, rgba(22, 112, 230, .2), transparent 70%), var(--noite); }
.como-grelha { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.lista-passos { margin-top: 2.75rem; }
.lista-passos li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1.25rem; padding: 1.6rem 0; border-top: 1px solid var(--linha); }
.passo-n { font: italic 800 3.4rem/.9 var(--titulo); background: linear-gradient(180deg, var(--celeste-2), var(--royal-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lista-passos h3 { font-size: 1.9rem; }
.lista-passos p { margin-top: .45rem; font-size: 1.08rem; }
.como-cta { margin-top: 2.25rem; }
.como-video { justify-self: center; width: min(100%, 21rem); }
.video-moldura { position: relative; aspect-ratio: 9 / 16; border-radius: 1.6rem; overflow: hidden; background: var(--noite-2); box-shadow: 0 0 0 1px rgba(124, 196, 255, .3), 0 50px 110px -45px rgba(22, 112, 230, .9); }
.video-moldura video { width: 100%; height: 100%; object-fit: cover; }
.video-moldura video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.video-moldura video::-webkit-media-controls { display: none !important; }
.video-pausa { position: absolute; right: .9rem; bottom: .9rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--branco); background: rgba(4, 16, 31, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video-pausa svg { width: 1.1rem; height: 1.1rem; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.video-pausa .i-pausa { fill: none; }
.video-pausa .i-tocar, .video-pausa.parado .i-pausa { display: none; }
.video-pausa.parado .i-tocar { display: block; }
.como-video figcaption { margin-top: 1rem; font-size: .95rem; text-align: center; }

/* ---------- v3: vídeos do trabalho (pedido de 13/10): cinco na mesma linha no computador, carrossel no telemóvel ---------- */
.videos { padding-block: var(--seccao); background: radial-gradient(44rem 30rem at 8% 0%, rgba(22, 112, 230, .24), transparent 70%), linear-gradient(180deg, #061a36, var(--noite) 40%); }
.lista-videos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.video-cartao { margin: 0; }
.video-cartao .video-moldura { border-radius: 1.1rem; box-shadow: 0 0 0 1px rgba(124, 196, 255, .28), 0 30px 70px -40px rgba(22, 112, 230, .9); }
.video-cartao .video-pausa { right: .6rem; bottom: .6rem; }
.video-cartao figcaption { margin-top: .85rem; font: italic 700 1.3rem/1.1 var(--titulo); color: var(--branco); }
.deslizar { display: none; }

/* ---------- faixa azul (os argumentos do folheto) ---------- */
.faixa-azul { padding-block: clamp(3rem, 6vw, 4.5rem); background: linear-gradient(120deg, var(--royal) 0%, var(--royal-2) 55%, #2a8be6 100%); color: var(--branco); }
.faixa-destaque { display: flex; align-items: center; justify-content: center; gap: .9rem; width: fit-content; max-width: 100%; margin: 0 auto 2.5rem; padding: .7rem 1.4rem; border-radius: 999px; background: var(--branco); color: var(--noite); font: italic 800 clamp(1.15rem, .9rem + 1vw, 1.6rem)/1.1 var(--titulo); text-transform: uppercase; letter-spacing: .03em; text-align: center; box-shadow: 0 18px 40px -20px rgba(4, 16, 31, .8); }
.faixa-destaque .ico { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--royal); color: var(--branco); stroke-width: 2.6; }
.lista-beneficios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.lista-beneficios li { display: flex; align-items: center; gap: .9rem; font-weight: 600; font-size: 1.08rem; line-height: 1.3; }
.lista-beneficios .ico { width: 3rem; height: 3rem; padding: .7rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }

/* ---------- v2 (13/10): sete pares, a galeria «Mais trabalhos», empresas, 6 vantagens, pagamento e redes ---------- */
.lista-pares > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% - 1rem)); }
.galeria-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.25rem; margin: clamp(3.5rem, 7vw, 5.5rem) 0 1.75rem; padding-top: 2rem; border-top: 1px solid var(--linha); }
.galeria-cabeca h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.obra { position: relative; }
.obra picture { aspect-ratio: 4 / 5; border-radius: var(--raio); overflow: hidden; background: var(--noite-2); box-shadow: 0 0 0 1px rgba(124, 196, 255, .2), 0 26px 60px -38px rgba(22, 112, 230, .8); }
.obra img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.obra:hover img { transform: scale(1.035); }
.obra figcaption { margin-top: .7rem; font-size: .95rem; line-height: 1.4; }

.empresas { padding-block: var(--seccao); background: var(--gelo); color: var(--tinta-suave); }
.empresas h2, .empresas h3 { color: var(--tinta); }
.empresas .etiqueta { color: var(--royal); }
.lista-empresas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.lista-empresas li { padding: 1.75rem 1.5rem; border-radius: var(--raio); background: #fff; box-shadow: 0 0 0 1px var(--linha-clara), 0 26px 50px -40px rgba(11, 26, 46, .45); }
.lista-empresas .serv-ico { width: 3.75rem; height: 3.75rem; }
.lista-empresas .serv-ico .ico { width: 1.75rem; height: 1.75rem; }
.lista-empresas h3 { margin-top: 1.25rem; font-size: 1.75rem; }
.lista-empresas p { margin-top: .5rem; font-size: 1.02rem; }
.empresas-cta { margin-top: 2.25rem; }

.lista-beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.75rem; }

.fecho-pagamento, .fecho-redes { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.fecho-pagamento h3, .fecho-redes h3, .rodape-sub { margin-bottom: .8rem; font: 600 .8rem/1.3 var(--texto); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--celeste); }
.rodape-sub { margin-top: 1.5rem; }
.pagamentos { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagamentos li { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 999px; background: rgba(58, 162, 242, .12); border: 1px solid var(--linha); color: var(--branco); font-size: .95rem; font-weight: 500; }
.pagamentos .ico { width: 1.05rem; height: 1.05rem; color: var(--celeste); }
.redes { display: flex; gap: .5rem; }
.redes a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--linha); color: var(--branco); }
.redes a:hover { border-color: var(--celeste); color: var(--celeste-2); }

/* ---------- v2.1: avaliações do Google (escuro, entre a faixa azul e as perguntas) ---------- */
.avaliacoes { padding-block: var(--seccao); background: radial-gradient(46rem 30rem at 85% 0%, rgba(22, 112, 230, .22), transparent 70%), var(--noite); }
.avaliacoes-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; }
.avaliacoes-nota { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; font-weight: 600; color: var(--branco); }
.estrelas { color: #ffc83d; letter-spacing: .12em; }
.avaliacoes-accoes { display: flex; flex-wrap: wrap; gap: .8rem; }
.lista-avaliacoes { columns: 3 18rem; column-gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.lista-avaliacoes li { break-inside: avoid; margin-bottom: 1.25rem; }
.lista-avaliacoes blockquote { margin: 0; padding: 1.5rem 1.5rem 1.35rem; border-radius: var(--raio); background: linear-gradient(160deg, rgba(22, 112, 230, .14), rgba(7, 26, 51, .65)); border: 1px solid var(--linha); }
.lista-avaliacoes p { margin-top: .7rem; font-size: 1.08rem; line-height: 1.55; color: var(--branco); }
.lista-avaliacoes cite { display: block; margin-top: .9rem; font-style: normal; font-size: .9rem; color: var(--nevoa); }
.avaliacoes-traducao { margin-top: .5rem; font-size: .85rem; color: var(--nevoa); }

/* ---------- perguntas (claro) ---------- */
.perguntas { padding-block: var(--seccao); }
.perguntas-grelha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.perguntas .seccao-cabeca { position: sticky; top: calc(var(--topo) + 1.5rem); }
.lista-perguntas details { border-bottom: 1px solid var(--linha-clara); }
.lista-perguntas details:first-child { border-top: 1px solid var(--linha-clara); }
.lista-perguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 3.75rem; padding: 1.35rem 0; font: italic 700 1.55rem/1.15 var(--titulo); color: var(--tinta); }
.lista-perguntas summary::-webkit-details-marker { display: none; }
.lista-perguntas summary::after { content: ""; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--royal) no-repeat center; background-image: linear-gradient(var(--branco), var(--branco)), linear-gradient(var(--branco), var(--branco)); background-size: 14px 2px, 2px 14px; transition: transform .3s var(--curva); }
.lista-perguntas details[open] summary::after { transform: rotate(45deg); }
.lista-perguntas details p { padding: 0 3.5rem 1.5rem 0; font-size: 1.1rem; color: var(--tinta-suave); }

/* ---------- fecho ---------- */
.fecho { position: relative; isolation: isolate; overflow: clip; padding-block: var(--seccao); background: radial-gradient(50rem 34rem at 20% 20%, rgba(22, 112, 230, .3), transparent 70%), linear-gradient(180deg, var(--noite), #061a36); }
.fecho .heroi-luz span:nth-child(1) { top: 14%; left: 64%; }
.fecho .heroi-luz span:nth-child(3) { top: 80%; left: 40%; }
.fecho-grelha { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.fecho h2 { font-size: clamp(3rem, 1.4rem + 5vw, 6.5rem); }
.fecho-texto { margin: 1.25rem 0 2.25rem; max-width: 30rem; font-size: 1.2rem; }
.fecho-cartao { padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: 1.6rem; background: linear-gradient(160deg, rgba(22, 112, 230, .16), rgba(7, 26, 51, .7)); border: 1px solid var(--linha); }
.fecho-logo img { width: 12rem; height: auto; margin-bottom: 1.75rem; }
.fecho-contactos { display: grid; gap: .5rem; }
.fecho-contactos li { display: flex; align-items: center; gap: .9rem; min-height: 2.75rem; color: var(--branco); font-weight: 500; font-size: 1.08rem; }
.fecho-contactos a { display: flex; align-items: center; gap: .9rem; min-height: 2.75rem; color: inherit; text-decoration: none; word-break: break-word; }
.fecho-contactos a:hover { color: var(--celeste-2); }
.fecho-contactos .ico { width: 2.6rem; height: 2.6rem; padding: .65rem; border-radius: 50%; background: rgba(58, 162, 242, .14); color: var(--celeste); }
.fecho-contactos strong { display: block; font: italic 800 1.9rem/1 var(--titulo); letter-spacing: .02em; }
.fecho-contactos small { display: block; margin-top: .3rem; font-size: .82rem; color: var(--nevoa); font-weight: 400; }

/* ---------- rodapé ---------- */
.rodape { background: #030a15; padding-block: 4rem 2.5rem; font-size: .95rem; border-top: 1px solid var(--linha); }
.rodape-grelha { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.rodape-logo img { width: 10rem; height: auto; }
.rodape-marca p { margin-top: 1rem; max-width: 20rem; }
.rodape h2 { font: 600 .8rem/1.3 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--celeste); margin-bottom: .9rem; }
.rodape-lista a { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; color: var(--branco); text-decoration: none; }
.rodape-lista a:hover { color: var(--celeste-2); }
.rodape-lista .ico { width: 1.05rem; height: 1.05rem; color: var(--celeste); }
.rodape-lista small { display: block; margin: -.45rem 0 .3rem 1.6rem; font-size: .8rem; color: var(--nevoa); }
.rodape-lista .zona { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; color: var(--branco); }
.rodape-fim { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); color: var(--nevoa); }
.rodape-fim a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: .25em; }
.pe-fixo { display: none; }

/* ---------- 404 ---------- */
.pagina-404 { min-height: 75svh; display: grid; place-items: center; padding: calc(var(--topo) + 3rem) 0 4rem; }
.pagina-404 h1 { font-size: clamp(2.8rem, 1.5rem + 4vw, 5rem); }
.pagina-404 p:not(.etiqueta) { margin-top: 1rem; font-size: 1.15rem; }
.pagina-404 .accoes { margin-top: 2rem; }

/* ---------- v3: no telemóvel e no tablet, vídeos e avaliações deslizam para o lado (menos rolar para baixo) ---------- */
@media (max-width: 900px) {
  .lista-videos, .lista-avaliacoes {
    display: flex; columns: auto; gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--margem) * -1); padding: .25rem var(--margem) 1rem; scroll-padding-inline: var(--margem); scrollbar-width: none;
  }
  .lista-videos::-webkit-scrollbar, .lista-avaliacoes::-webkit-scrollbar { display: none; }
  .lista-videos > li { flex: 0 0 min(62vw, 16.5rem); scroll-snap-align: start; }
  .lista-avaliacoes > li { flex: 0 0 min(84vw, 21rem); scroll-snap-align: start; margin-bottom: 0; }
  .lista-avaliacoes blockquote { height: 100%; }
  .deslizar { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .92rem; color: var(--nevoa); }
  .deslizar .ico { width: 1.15rem; height: 1.15rem; }
}

/* ---------- entradas ao rolar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .revela { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--curva), transform .8s var(--curva); }
  .js .revela.visto { opacity: 1; transform: none; }
}

/* ---------- ecrãs médios ---------- */
@media (max-width: 1100px) {
  .nav-lista a { padding: 0 .55rem; font-size: .92rem; }
  .lista-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-empresas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- telemóvel e tablet ---------- */
@media (max-width: 900px) {
  :root { --topo: 4.75rem; }
  .marca-logo img { height: 3.4rem; }
  .topo.rolou .marca-logo img { height: 2.7rem; }
  .botao-menu { display: inline-flex; }
  .navegacao { position: fixed; inset: var(--topo) 0 auto; flex-direction: column; align-items: stretch; gap: 1rem; margin: 0; padding: 1.25rem var(--margem) 2rem; background: var(--noite); border-bottom: 1px solid var(--linha); transform: translateY(-110%); visibility: hidden; transition: transform .4s var(--curva), visibility .4s; }
  .menu-aberto .navegacao { transform: none; visibility: visible; }
  .menu-aberto .topo { background: var(--noite); }
  .nav-lista { flex-direction: column; }
  .nav-lista a { min-height: 3.25rem; padding: 0; font: italic 700 1.7rem/1 var(--titulo); }
  .lingua { align-self: flex-start; }
  .navegacao .botao { min-height: 3.25rem; }
  .heroi-grelha, .antes-topo, .servicos-grelha, .como-grelha, .perguntas-grelha, .fecho-grelha { grid-template-columns: minmax(0, 1fr); }
  .heroi .accoes .botao { flex: 1 1 100%; min-height: 3.5rem; }
  .heroi-luz span:nth-child(1), .heroi-luz span:nth-child(2), .heroi-luz span:nth-child(4) { display: none; }
  .diptico, .comparador { justify-self: stretch; width: 100%; }
  .servicos-esq, .perguntas .seccao-cabeca { position: static; }
  .servicos-foto { max-width: none; aspect-ratio: 4 / 3; }
  .lista-pares { grid-template-columns: minmax(0, 1fr); }
  .lista-pares > li:last-child:nth-child(odd) { grid-column: auto; width: auto; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-perguntas details p { padding-right: 0; }
  .fecho .botao-grande { width: 100%; }
  .rodape-grelha { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pe-fixo { display: flex; position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 50; align-items: center; justify-content: center; gap: .6rem; min-height: 3.4rem; border-radius: 999px; background: linear-gradient(180deg, var(--royal-2), var(--royal)); color: var(--branco); font: 600 1.05rem/1 var(--texto); text-decoration: none; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .8); transform: translateY(160%); transition: transform .4s var(--curva); }
  .pe-fixo.mostra { transform: none; }
  :root.pe-visivel { --aviso-cookies-acima: 4.6rem; }
  .rodape { padding-bottom: 6.5rem; }
}
@media (max-width: 560px) {
  body { font-size: 1.1rem; }
  .heroi h1 { font-size: clamp(3.3rem, 1rem + 12vw, 4.6rem); }
  .heroi h1 .h1-sobre { font-size: .46em; }
  .etiqueta { letter-spacing: .12em; font-size: .78rem; }
  .lista-beneficios { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .lista-empresas { grid-template-columns: minmax(0, 1fr); }
  .lista-empresas li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem; }
  .lista-empresas .serv-ico { grid-row: span 2; width: 3.25rem; height: 3.25rem; }
  .lista-empresas h3 { margin-top: .2rem; font-size: 1.55rem; }
  .galeria { gap: .75rem; }
  .obra figcaption { font-size: .85rem; }
  .faixa-destaque { border-radius: 1.2rem; }
  .lista-servicos li { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.1rem; }
  .serv-ico { width: 3.5rem; height: 3.5rem; }
  .serv-ico .ico { width: 1.7rem; height: 1.7rem; }
  .lista-passos li { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .passo-n { font-size: 2.8rem; }
  .comp-dica { display: flex; margin: .4rem 0 0; }
}