:root {
  --azul: #0F1B4C;
  --azul-escuro: #0A1238;
  --rosa: #FF3D8B;
  --creme: #FFF7EA;   /* só no símbolo e no texto sobre azul */
  --branco: #FFFFFF;
  --gelo: #F5F7FB;
  --rosa-claro: #FFE9F1;

  --fundo: var(--azul);
  --texto: var(--creme);
  --texto-2: #D4D9EC;
  --linha: rgb(255 247 234 / .2);
  --clara-2: rgb(15 27 76 / .78);
  --linha-clara: rgb(15 27 76 / .14);
  --em: var(--rosa);

  --f-titulo: "Unbounded", "Arial Narrow", sans-serif;
  --f-texto: "DM Sans", system-ui, sans-serif;
  --f-frase: "Playfair Display", Georgia, serif;

  --lado: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 0; -webkit-text-size-adjust: 100%; background: var(--fundo); color-scheme: light; }
body { margin: 0; background: var(--branco); color: var(--azul); font: 400 1.0625rem/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--rosa); color: var(--azul); }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 4px; }

.so-leitores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--lado); top: -4rem; background: var(--branco); color: var(--azul); padding: .75rem 1rem; z-index: 20; }
.saltar:focus { top: .75rem; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .85rem 1.75rem;
  font: 700 1rem/1.2 var(--f-texto); text-decoration: none;
  border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .25s var(--ease), translate .35s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.botao--azul { background: var(--azul); color: var(--branco); }
.botao--azul:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem -.5rem rgb(15 27 76 / .45); }
.botao--creme { background: var(--branco); color: var(--azul); }
.botao--creme:hover { transform: translateY(-2px); }
.botao--rosa { background: var(--rosa); color: var(--azul); }
.botao--rosa:hover { transform: translateY(-2px); background: #ff5a9d; }
.botao--pequeno { min-height: 2.75rem; padding: .6rem 1.25rem; font-size: .9375rem; }

/* Topo: só a navegação, o logótipo vive no hero */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: flex-end;
  padding: .75rem var(--lado);
  background: color-mix(in srgb, var(--azul) 94%, transparent);
  backdrop-filter: blur(8px); color: var(--texto);
}
.topo__menu {
  display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: 0 .25rem;
  background: none; border: 0; color: var(--texto); font: 700 .9375rem var(--f-texto); cursor: pointer;
}
.topo__menu-barras, .topo__menu-barras::before { display: block; width: 1.5rem; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.topo__menu-barras { position: relative; }
.topo__menu-barras::before { content: ""; position: absolute; top: -7px; left: 0; }
.topo__menu[aria-expanded="true"] .topo__menu-barras { transform: rotate(45deg); }
.topo__menu[aria-expanded="true"] .topo__menu-barras::before { transform: translateY(7px) rotate(-90deg); }
.topo__nav {
  position: absolute; inset: 100% 0 auto 0; display: none; flex-direction: column; gap: .25rem;
  padding: 1rem var(--lado) 2rem; background: var(--azul-escuro);
}
.topo__nav.aberto { display: flex; }
.topo__nav a:not(.botao) {
  color: var(--texto); text-decoration: none; font: 600 1.25rem/1.2 var(--f-titulo);
  padding: 1rem 0; border-bottom: 1px solid var(--linha);
}
.topo__nav .botao { margin-top: 1.5rem; }

/* Hero: a marca entra, depois o botão */
.hero {
  position: relative; overflow: hidden;
  background: var(--azul); color: var(--creme);
  min-height: calc(100svh - 4.25rem - 3.75rem);
  display: grid; place-items: center;
  padding: 2rem var(--lado) 4rem;
}
.hero__palco { display: grid; justify-items: center; gap: clamp(2rem, 5vw, 3.5rem); width: 100%; }
.marca { width: min(100%, 44rem); max-height: 32svh; overflow: visible; }

.marca__m, .marca__j, .marca__gancho, .marca__ponto, .marca__cre, .marca__ative {
  transform-box: fill-box;
  opacity: 0;
  animation-duration: .9s;
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
}
.marca__m { transform-origin: 50% 100%; animation-name: sobe; animation-delay: .25s; }
.marca__j { transform-origin: 50% 0; animation-name: desce; animation-delay: .7s; }
.marca__gancho { transform-origin: 50% 0; animation-name: aparece; animation-delay: 1.05s; }
.marca__ponto { transform-origin: 50% 50%; animation-name: pinta; animation-duration: .7s; animation-delay: 1.25s; }
.marca__cre { animation-name: entra-lado; animation-delay: 1.55s; }
.marca__ative { animation-name: entra-lado; animation-delay: 1.85s; }
.hero__botao { opacity: 0; animation: sobe-botao .8s var(--ease) 2.5s forwards; }

@keyframes sobe { from { opacity: 0; transform: translateY(28%); } to { opacity: 1; transform: none; } }
@keyframes desce { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; transform: translateY(-10%); } to { opacity: 1; transform: none; } }
@keyframes pinta { 0% { opacity: 0; transform: translateY(-120%) scale(.4); } 60% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes entra-lado { from { opacity: 0; transform: translateX(-9%); } to { opacity: 1; transform: none; } }
@keyframes sobe-botao { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Faixa rosa com serviços */
.faixa { background: var(--rosa); color: var(--azul); overflow: hidden; }
.faixa__pista { display: flex; width: max-content; animation: corre 38s linear infinite; }
.faixa:hover .faixa__pista { animation-play-state: paused; }
.faixa__grupo { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; font: 600 1rem/1 var(--f-titulo); }
.faixa__grupo li { padding: 1.25rem 0; white-space: nowrap; }
.faixa__grupo .faixa__sep { display: flex; padding-inline: 1.75rem; }
.faixa__estrela { width: .9rem; height: .9rem; }
@keyframes corre { to { transform: translateX(-50%); } }

/* Slogan em movimento */
.slogan { overflow: hidden; background: var(--branco); padding: clamp(1rem, 2.4vw, 1.6rem) 0; border-block: 1px solid var(--linha-clara); }
.slogan__pista {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem); width: max-content;
  font: 600 clamp(.9375rem, 1.8vw, 1.25rem)/1 var(--f-titulo); letter-spacing: -.01em; color: var(--azul);
  animation: corre-volta 60s linear infinite;
}
.slogan__pista svg { width: .6em; height: .6em; flex: none; color: var(--rosa); }
@keyframes corre-volta { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Secções */
.miolo { max-width: 76rem; margin: 0 auto; }
section { color: var(--azul); }
.titulo-seccao { font-size: clamp(1.75rem, 4.6vw, 3.25rem); line-height: 1.12; letter-spacing: -.02em; max-width: 22ch; }
.titulo-seccao em { font: italic 500 1.1em/1 var(--f-frase); color: var(--em); letter-spacing: 0; }
.intro { margin-top: 1.5rem; max-width: 36rem; font-size: 1.1875rem; color: var(--clara-2); }
.momento, .servicos, .processo, .kanoa, .clientes, .quem, .perguntas { padding: clamp(4.5rem, 11vw, 8rem) var(--lado); }
.momento, .processo, .clientes, .perguntas { background: var(--branco); }
.servicos, .kanoa, .quem { background: var(--gelo); }

/* Momento da empresa */
.chips { border: 0; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 3rem; padding: .6rem 1.4rem;
  border: 2px solid var(--azul); border-radius: 999px; font-weight: 700;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.chip:hover span { transform: translateY(-2px); }
.chip input:checked + span { background: var(--azul); color: var(--branco); }
.chip input:focus-visible + span { outline: 3px solid var(--rosa); outline-offset: 3px; }
.momento__resposta { margin-top: 2rem; min-height: 5rem; }
.momento__texto { max-width: 38rem; font-size: clamp(1.125rem, 2.4vw, 1.5rem); line-height: 1.45; color: var(--clara-2); }
.momento__texto strong { color: var(--azul); }
.momento__resposta .entra { animation: entra-texto .6s var(--ease); }
@keyframes entra-texto { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.momento__servicos { margin-top: 1.5rem; animation: entra-texto .6s var(--ease); }
.momento__servicos[hidden] { display: none; }
.momento__servicos h3 { font-size: 1.125rem; }


/* Serviços */
.familias { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1.25rem; }
.familia {
  display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.75rem 2.25rem; border-radius: 1.5rem;
  background: var(--branco); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.familia:hover { transform: translateY(-6px); box-shadow: 0 1.5rem 2.5rem -1.25rem rgb(15 27 76 / .3); }
.familia--rosa { background: var(--rosa-claro); }
.familia__icone { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--azul); border-radius: 1rem; }
.familia__icone svg { width: 1.75rem; height: 1.75rem; }
.familia h3 { font-size: 1.375rem; line-height: 1.2; margin-top: .75rem; }
.familia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: 1rem; color: var(--clara-2); }

/* Como trabalhamos */
.processo { position: relative; overflow: hidden; }
.passos { list-style: none; margin: clamp(3rem, 7vw, 5rem) 0 0; padding: 0; display: grid; gap: 2.5rem; }
.passo { display: grid; gap: .5rem; max-width: 24rem; padding-top: 1.25rem; border-top: 1px solid var(--linha-clara); position: relative; }
.passo::before { content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 0; background: var(--rosa); transition: width 1.1s var(--ease) .2s; }
.passo.visivel::before { width: 100%; }
.passo__n { font: 600 clamp(3rem, 8vw, 4.5rem)/1 var(--f-titulo); color: var(--azul); }
.passo h3 { font-size: 1.25rem; line-height: 1.25; margin-top: .75rem; }
.passo p { color: var(--clara-2); }

/* Kanoa */
.kanoa__corpo { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 2rem; align-items: start; }
.janela { margin: 0; background: var(--azul); border-radius: 1rem; overflow: hidden; box-shadow: 0 1.5rem 3rem -1rem rgb(15 27 76 / .35); }
.janela__barra { display: flex; gap: .4rem; padding: .7rem .9rem; background: var(--azul-escuro); }
.janela__barra span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--creme); opacity: .5; }
.janela__imagem { position: relative; overflow: hidden; }
.janela__site { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease); }
.janela:hover .janela__site { transform: scale(1.04); }
.janela__logo { position: absolute; left: .5rem; bottom: .25rem; width: clamp(6.5rem, 17vw, 10.5rem); height: auto; filter: drop-shadow(0 .5rem 1rem rgb(0 0 0 / .35)); }
.feitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; font-size: 1.0625rem; }
.feitos li { padding-top: 1rem; border-top: 1px solid var(--linha-clara); }

/* Já trabalhámos com */
.clientes__grelha { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0; padding: 0; display: grid; gap: 1.25rem; }
.cliente {
  min-height: 11rem; padding: 1.75rem; border-radius: 1.5rem; background: var(--gelo);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.cliente:hover { transform: translateY(-6px); background: var(--azul); color: var(--branco); }
.cliente:hover p { color: var(--rosa-claro); }
.cliente--areia, .cliente--nevoa { background: var(--gelo); }
.cliente--rosa { background: var(--rosa-claro); }
.cliente h3 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.2; }
.cliente p { font-weight: 700; font-size: .9375rem; color: var(--clara-2); transition: color .35s var(--ease); }
.clientes .intro { color: var(--clara-2); }

/* Quem somos */
.angola { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; font-size: 1.125rem; color: var(--clara-2); }
.angola img { width: 1.75rem; height: auto; border-radius: 2px; flex: none; }
.duo { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 56rem; }
.pessoa { position: relative; overflow: hidden; background: #E7EAF3; border-radius: 0; cursor: default; }
.pessoa__foto { display: grid; place-items: start center; padding-top: 1.5rem !important; aspect-ratio: 4 / 5; font: 700 .75rem var(--f-texto); letter-spacing: .08em; text-align: center; padding: 1rem; color: var(--clara-2); }
.pessoa__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pessoa:hover .pessoa__foto img { transform: scale(1.04); }
.pessoa__texto {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .35rem;
  padding: 1rem; text-align: center; color: var(--branco);
  background: rgb(15 27 76 / .82); opacity: 0; transition: opacity .4s var(--ease);
}
.pessoa:hover .pessoa__texto, .pessoa:focus-visible .pessoa__texto, .pessoa:focus-within .pessoa__texto { opacity: 1; }
.pessoa h3 { font-size: clamp(1rem, 3.6vw, 1.5rem); line-height: 1.2; }
.pessoa__texto p { font-size: clamp(.8125rem, 2.8vw, 1rem); }
@media (hover: none) { .pessoa__texto { opacity: 1; inset: auto 0 0 0; padding: 2rem .75rem .75rem; background: linear-gradient(to top, rgb(15 27 76 / .92), rgb(15 27 76 / 0)); text-align: left; justify-items: start; align-content: end; } }

.historia { list-style: none; margin: clamp(3.5rem, 8vw, 6rem) 0 0; padding: 0; display: grid; gap: 2rem; }
.passo-h { position: relative; padding-top: 1.25rem; border-top: 1px solid var(--linha-clara); max-width: 30rem; }
.passo-h::before { content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 0; background: var(--rosa); transition: width 1.1s var(--ease) .2s; }
.passo-h.visivel::before { width: 100%; }
.passo-h h3 { font-size: 1.125rem; line-height: 1.3; margin-bottom: .5rem; }
.passo-h p { color: var(--clara-2); }

/* Perguntas */
.faq { margin-top: clamp(2.5rem, 6vw, 4rem); max-width: 48rem; border-top: 1px solid var(--linha-clara); }
.faq details { border-bottom: 1px solid var(--linha-clara); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; cursor: pointer; list-style: none; font: 600 1.125rem/1.35 var(--f-titulo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .75rem; height: .75rem; border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 0 1.75rem; max-width: 40rem; color: var(--clara-2); }

/* Contacto */
.contacto { position: relative; overflow: hidden; background: var(--azul); color: var(--creme); padding: clamp(4.5rem, 11vw, 8rem) var(--lado); }
.contacto .intro { color: var(--texto-2); }
.contacto__simbolo { position: absolute; width: min(80vw, 34rem); right: -16%; top: -4%; opacity: .07; pointer-events: none; will-change: transform; }
.contacto__miolo { position: relative; }
.caminhos { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1.5rem; align-items: start; }
.caminho { background: rgb(255 255 255 / .07); border: 1px solid var(--linha); border-radius: 1.5rem; padding: 2rem 1.75rem; display: grid; gap: 1rem; }
.caminho h3 { font-size: 1.375rem; }
.caminho p { color: var(--texto-2); }
.caminho--zap .botao { justify-self: start; }
.marcador { font-weight: 700; letter-spacing: .04em; color: var(--creme) !important; }
.campos { display: grid; gap: 1rem; }
.campo { display: grid; gap: .4rem; font-weight: 500; color: var(--creme); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"] {
  width: 100%; min-height: 3rem; padding: .7rem 1rem; font: 400 1rem var(--f-texto); color: var(--azul);
  background: var(--branco); border: 2px solid transparent; border-radius: .75rem;
}
.campo input::placeholder { color: rgb(15 27 76 / .6); }
.campo input:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.campo input:user-invalid { border-color: var(--rosa); }
.resumo { padding: 1rem 1.25rem; border-radius: .75rem; background: rgb(255 255 255 / .1); color: var(--creme) !important; }
.resumo a { color: var(--rosa); font-weight: 700; }
.nota { font-size: .9375rem; }
.estado { min-height: 1.5rem; font-weight: 700; color: var(--creme) !important; }
.estado.erro { color: #FFC2D9 !important; }


/* Aparecimento suave, com escalonamento */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.reveal.visivel { opacity: 1; transform: none; }

/* Com Motion ativo, o aparecimento é animado em JavaScript */
.motion-on .reveal, .motion-on .reveal.visivel { transition: none; }
.motion-on .reveal.visivel { opacity: 1; transform: none; }

@media (min-width: 52rem) {
  .topo__menu { display: none; }
  .topo__nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 1.75rem; padding: 0; background: none; }
  .topo__nav a:not(.botao) {
    color: var(--texto); font: 500 .9375rem var(--f-texto); padding: .25rem 0; border: 0;
    background: linear-gradient(var(--rosa), var(--rosa)) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease);
  }
  .topo__nav a:not(.botao):hover { background-size: 100% 2px; }
  .topo__nav .botao { margin: 0; }
  .familias { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .kanoa__corpo { grid-template-columns: 7fr 4fr; gap: 3rem; }
  .clientes__grelha { grid-template-columns: repeat(3, 1fr); }
  .duo { gap: .75rem; }
  .historia { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .passo-h { max-width: none; }
  .caminhos { grid-template-columns: 5fr 7fr; gap: 2rem; }
  .campos { grid-template-columns: 1fr 1fr; }
  .caminho { padding: 2.5rem; }
}
@media (min-width: 72rem) { .familias { grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marca__m, .marca__j, .marca__gancho, .marca__ponto, .marca__cre, .marca__ative, .hero__botao { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .slogan__pista { animation: none; transform: none; }
  .slogan__pista > :nth-child(n+3) { display: none; }
  .faixa__pista { animation: none; width: auto; }
  .faixa__grupo[aria-hidden] { display: none; }
  .faixa__grupo { flex-wrap: wrap; justify-content: center; padding-inline: var(--lado); }
  .botao, .topo__nav a, .familia, .cliente, .chip span, .janela__site { transition: none; }
  .passo::before, .passo-h::before { width: 100%; transition: none; }
  .contacto__simbolo { transform: none !important; }
}


/* ===== Serviços: imagem + detalhe ao passar o cursor ===== */
.servicos__grelha { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 1.5rem; perspective: 1200px; }
.servico {
  position: relative; display: flex; flex-direction: column; color: var(--azul); text-decoration: none; background: var(--branco);
  border-radius: 1.5rem; overflow: hidden; transition: translate .45s var(--ease), rotate .3s ease-out, box-shadow .45s var(--ease);
}
.servico:hover, .servico:focus-visible { translate: 0 -6px; box-shadow: 0 1.5rem 2.5rem -1.25rem rgb(15 27 76 / .35); }
.servico__imagem { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gelo); }
.servico__imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.servico:hover .servico__imagem img, .servico:focus-visible .servico__imagem img { transform: scale(1.12) translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px)); transition: transform .6s var(--ease); }
.servico__detalhe {
  position: absolute; inset: 0; display: grid; align-content: center; gap: .9rem; padding: 1.5rem 1.4rem;
  background: rgb(15 27 76 / .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--creme);
  opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.servico:hover .servico__detalhe, .servico:focus-visible .servico__detalhe { opacity: 1; transform: none; }
.servico__detalhe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9375rem; line-height: 1.35; }
.servico__detalhe li { position: relative; padding-left: 1.1rem; }
.servico__detalhe li::before { content: ""; position: absolute; left: 0; top: .5em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--rosa); }
.servico h3 { padding: 1.25rem 1.25rem .25rem; font-size: 1.375rem; line-height: 1.2; }
.servico__ver { padding: 0 1.25rem 1.5rem; font-weight: 700; }
.servico__ver span { display: inline-block; transition: transform .3s var(--ease); }
.servico:hover .servico__ver span { transform: translateX(6px); }
@media (hover: none) { .servico__detalhe { display: none; } }

/* ===== Kanoa: slider ===== */
.trabalho { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 2rem; align-items: center; }
.slider { width: 100%; max-width: 34rem; }
.slider__janela { background: var(--azul); border-radius: 1rem; overflow: hidden; box-shadow: 0 1rem 2rem -1rem rgb(15 27 76 / .3); }
.janela__barra { display: flex; gap: .4rem; padding: .7rem .9rem; background: var(--azul-escuro); }
.janela__barra span { width: .6rem; height: .6rem; border-radius: 50%; background: var(--creme); opacity: .5; }
.slider__vista { position: relative; overflow: hidden; aspect-ratio: 16 / 10; touch-action: pan-y; }
.slider__pista { display: flex; height: 100%; transition: transform .8s var(--ease); }
.slider__slide { flex: 0 0 100%; margin: 0; height: 100%; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.slider__logo { position: absolute; z-index: 2; left: .6rem; bottom: .6rem; width: clamp(4.25rem, 11vw, 7rem); height: auto; filter: drop-shadow(0 .4rem .9rem rgb(0 0 0 / .4)); pointer-events: none; }
.slider__seta {
  position: absolute; z-index: 2; top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--branco); color: var(--azul); cursor: pointer;
  box-shadow: 0 .5rem 1.25rem rgb(15 27 76 / .3); transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.slider__seta:hover { transform: scale(1.1); background: var(--rosa); }
.slider__seta svg { width: 1.4rem; height: 1.4rem; }
.slider__seta--ant { left: .75rem; } .slider__seta--ant svg { transform: rotate(180deg); }
.slider__seta--seg { right: .75rem; }
.slider__rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
.slider__pontos { display: flex; gap: .6rem; }
.slider__ponto { position: relative; width: .75rem; height: .75rem; padding: 0; border: 0; border-radius: 999px; background: rgb(15 27 76 / .25); cursor: pointer; transition: width .35s var(--ease), background-color .35s var(--ease); }
.slider__ponto::after { content: ""; position: absolute; inset: -.7rem -.3rem; }
.slider__ponto.ativo { width: 2.25rem; background: var(--rosa); }
.slider__conta { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Kanoa: o que fizemos */
.destaques { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; display: grid; gap: 1.25rem; perspective: 1200px; }
.destaque { position: relative; display: grid; align-content: start; gap: .75rem; padding: 2rem 1.75rem 2.25rem; border-radius: 1.5rem; transition: translate .45s var(--ease), rotate .3s ease-out; }
.destaque:hover { translate: 0 -6px; }
.destaque__icone { transition: transform .5s var(--ease); }
.destaque:hover .destaque__icone { transform: translate(calc(var(--mx, 0) * 7px), calc(var(--my, 0) * 7px)) scale(1.08); }
.destaque__icone { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; margin-bottom: .75rem; }
.destaque__icone svg { width: 2.15rem; height: 2.15rem; }
.destaque h3 { font-size: 1.25rem; line-height: 1.25; }
.destaque--azul { background: var(--azul); color: var(--creme); }
.destaque--azul .destaque__icone { background: var(--rosa); color: var(--azul); }
.destaque--claro { background: var(--rosa-claro); }
.destaque--claro .destaque__icone { background: var(--azul); color: var(--creme); }
.destaque--rosa { background: var(--rosa); color: var(--azul); }
.destaque--rosa .destaque__icone { background: var(--azul); color: var(--creme); }

/* ===== Já trabalhámos com: só logótipos ===== */
.logos { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2.5rem 3rem; align-items: center; justify-items: center; }
.logo img { width: min(100%, 13rem); height: 8rem; object-fit: contain; transition: transform .4s var(--ease); }
.logo--limpo img { filter: contrast(1.14) brightness(1.03); }
.logo:hover img { transform: scale(1.06); }
.logo__texto { font: 600 1.25rem/1.25 var(--f-titulo); text-align: center; color: var(--clara-2); }

/* ===== Quem somos (início) ===== */
a.pessoa { display: block; color: inherit; text-decoration: none; }
.quem__botao { margin-top: 2rem; }

/* ===== Páginas internas ===== */
body.pagina .topo { justify-content: space-between; }
.topo__logo img { width: 7rem; height: auto; }
.topo-pagina { background: var(--azul); color: var(--creme); padding: clamp(4rem, 10vw, 7rem) var(--lado) clamp(3.5rem, 8vw, 6rem); }
.topo-pagina h1 { font-size: clamp(2.25rem, 7vw, 4.75rem); line-height: 1.05; letter-spacing: -.025em; max-width: 16ch; }
.voltar { display: inline-block; margin-bottom: 2rem; color: var(--creme); text-decoration: none; font-weight: 700; opacity: .85; transition: opacity .25s, transform .25s var(--ease); }
.voltar:hover { opacity: 1; transform: translateX(-4px); }
.topo-pagina__texto { max-width: 36rem; margin: 1.75rem 0 2rem; font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.5; color: var(--texto-2); }
.topo-pagina__extra { max-width: 36rem; margin: -.75rem 0 2rem; font-weight: 700; color: var(--creme); }
.angola--clara { color: var(--texto-2); }

.inclui, .exemplos, .outros, .equipa, .historia-pagina, .chamada { padding: clamp(4.5rem, 11vw, 8rem) var(--lado); }
.inclui, .outros, .equipa { background: var(--branco); }
.exemplos, .historia-pagina { background: var(--gelo); }
.inclui__lista { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; border-top: 1px solid var(--linha-clara); }
.inclui__lista li { display: grid; gap: .5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--linha-clara); transition: transform .4s var(--ease); }
.inclui__lista li:hover { transform: translateX(8px); }
.inclui__lista h3 { font-size: 1.25rem; line-height: 1.25; }
.inclui__lista p { color: var(--clara-2); max-width: 34rem; }

.galeria { margin-top: clamp(2.5rem, 6vw, 4rem); columns: 22rem 3; column-gap: 1.5rem; }
.galeria figure { margin: 0 0 1.75rem; break-inside: avoid; }
.galeria__abrir { display: block; width: 100%; padding: 0; border: 0; border-radius: 1rem; overflow: hidden; background: var(--branco); cursor: zoom-in; box-shadow: 0 1rem 2rem -1.25rem rgb(15 27 76 / .4); }
.galeria__abrir img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.galeria__abrir:hover img { transform: scale(1.04); }
.galeria figcaption { padding: .85rem .25rem 0; font-weight: 700; font-size: .9375rem; }
.galeria__nota { margin-top: 2rem; color: var(--clara-2); font-size: .9375rem; }

.outros__lista { margin-top: 2.5rem; display: grid; gap: 1rem; }
.outro {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 1.75rem; border-radius: 1.25rem;
  background: var(--gelo); color: var(--azul); text-decoration: none; font: 600 1.125rem/1.3 var(--f-titulo);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.outro:hover { background: var(--azul); color: var(--branco); transform: translateY(-4px); }

.chamada { background: var(--azul); color: var(--creme); }
.chamada .intro { color: var(--texto-2); margin-bottom: 2rem; }

.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgb(10 18 56 / .92); }
.lightbox img { max-width: 94vw; max-height: 82vh; width: auto; height: auto; border-radius: .75rem; background: var(--branco); }
.lightbox__fechar { position: fixed; top: 1rem; right: 1rem; min-height: 2.75rem; padding: .5rem 1.25rem; border: 0; border-radius: 999px; background: var(--branco); color: var(--azul); font: 700 1rem var(--f-texto); cursor: pointer; }

.equipa__grelha { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 2.5rem; }
.socia-grande { display: grid; gap: .6rem; max-width: 30rem; }
.socia-grande .pessoa__foto { background: #E7EAF3; border-radius: 1.5rem; }
.socia-grande h3 { font-size: 1.5rem; margin-top: .75rem; }
.socia-grande__funcao { font-weight: 700; }
.socia-grande p:last-child { color: var(--clara-2); }
.historia-pagina .historia { margin-top: clamp(2.5rem, 6vw, 4rem); }

@media (min-width: 52rem) {
  .servicos__grelha { grid-template-columns: repeat(2, 1fr); }
  .destaques { grid-template-columns: repeat(3, 1fr); }
  .inclui__lista li { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: baseline; }
  .outros__lista { grid-template-columns: repeat(3, 1fr); }
  .equipa__grelha { grid-template-columns: repeat(2, minmax(0, 30rem)); gap: 3rem; }
  .topo__logo img { width: 8.5rem; }
}
@media (min-width: 72rem) { .servicos__grelha { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .servico, .servico__imagem img, .servico__detalhe, .destaque, .slider__pista, .slider__seta, .galeria__abrir img, .outro, .inclui__lista li, .logo img { transition: none; }
}

.servico__detalhe strong { font: 600 1.125rem/1.2 var(--f-titulo); }
.servico__ver-2 { font-weight: 700; color: var(--rosa); }
.logo__texto { font-size: 1.0625rem; }


/* ===== Animações avançadas (com Motion) ===== */
.motion-on .marca__m, .motion-on .marca__j, .motion-on .marca__gancho, .motion-on .marca__ponto,
.motion-on .marca__cre, .motion-on .marca__ative, .motion-on .hero__botao { animation: none; }
.aguarda-js .topo, .aguarda-js .topo-pagina .miolo > * { opacity: 0; }

/* Títulos por palavras: cada palavra sobe de dentro de uma máscara */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .06em .2em; margin: -.12em -.06em -.2em; }
.palavra__i { display: inline-block; will-change: transform; }
.feito .palavra { overflow: visible; }

/* Cartões de serviço e destaques: brilho que segue o cursor */
.servico::after, .destaque::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgb(255 255 255 / .18), transparent 55%);
  transition: opacity .4s var(--ease);
}
.servico:hover::after, .destaque:hover::after { opacity: 1; }
@media (hover: none) { .servico::after, .destaque::after { display: none; } }

/* Painel de serviço: título, itens e indicador entram em sequência */
.servico__detalhe strong, .servico__detalhe li, .servico__ver-2 { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.servico:hover .servico__detalhe strong, .servico:focus-visible .servico__detalhe strong,
.servico:hover .servico__detalhe li, .servico:focus-visible .servico__detalhe li,
.servico:hover .servico__ver-2, .servico:focus-visible .servico__ver-2 { opacity: 1; transform: none; }
.servico:hover .servico__detalhe strong { transition-delay: .05s; }
.servico:hover .servico__detalhe li:nth-child(1) { transition-delay: .12s; }
.servico:hover .servico__detalhe li:nth-child(2) { transition-delay: .18s; }
.servico:hover .servico__detalhe li:nth-child(3) { transition-delay: .24s; }
.servico:hover .servico__detalhe li:nth-child(4) { transition-delay: .30s; }
.servico:hover .servico__ver-2 { transition-delay: .36s; }
.servico__ver-2 { display: inline-block; }
.servico:hover .servico__ver-2 { translate: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .servico__detalhe strong, .servico__detalhe li, .servico__ver-2 { opacity: 1; transform: none; transition: none; }
  .servico, .destaque { rotate: none !important; }
}


/* Trabalho feito: versão minimalista */
.slider__seta { width: 2.5rem; height: 2.5rem; }
.slider__seta svg { width: 1.15rem; height: 1.15rem; }
.destaques--lado { margin: 0; gap: .75rem; }
.destaques--lado .destaque { grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .15rem; align-items: center; padding: 1rem 1.25rem; border-radius: 1.1rem; }
.destaques--lado .destaque__icone { grid-row: 1 / span 2; width: 3rem; height: 3rem; margin: 0; }
.destaques--lado .destaque__icone svg { width: 1.5rem; height: 1.5rem; }
.destaques--lado h3 { font-size: 1rem; }
.destaques--lado p { font-size: .9375rem; }
@media (min-width: 60rem) { .trabalho { grid-template-columns: minmax(0, 34rem) 1fr; gap: 4rem; } }

/* Rodapé completo */
.rodape { position: relative; overflow: hidden; display: block; background: var(--azul-escuro); color: var(--texto-2); padding: clamp(3.5rem, 8vw, 6rem) var(--lado) 1.5rem; font-size: .9375rem; }
.rodape > * { position: relative; z-index: 1; }
.rodape__chamada { max-width: 76rem; margin: 0 auto; display: grid; gap: 1.5rem; justify-items: start; padding-bottom: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--linha); }
.rodape__chamada h2 { font-size: clamp(1.5rem, 4vw, 2.75rem); line-height: 1.12; letter-spacing: -.02em; color: var(--creme); max-width: 20ch; }
.rodape__grelha { max-width: 76rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) 0; display: grid; gap: 2.25rem; }
.rodape__marca { display: grid; gap: .75rem; align-content: start; max-width: 20rem; }
.rodape__marca img { width: 9.5rem; height: auto; }
.rodape__frase { font: italic 500 1.25rem/1.3 var(--f-frase); color: var(--creme); }
.rodape__col h3 { font-size: .9375rem; color: var(--creme); margin-bottom: 1rem; }
.rodape__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.rodape address { font-style: normal; }
.rodape a { color: var(--texto-2); text-decoration: none; background: linear-gradient(var(--rosa), var(--rosa)) 0 100% / 0 1px no-repeat; transition: color .25s, background-size .35s var(--ease); }
.rodape a:hover { color: var(--creme); background-size: 100% 1px; }
.rodape__angola { display: flex; align-items: flex-start; gap: .6rem; }
.rodape__angola img { width: 1.375rem; height: auto; flex: none; margin-top: .3rem; border-radius: 2px; }
.rodape__fim { max-width: 76rem; margin: 0 auto; padding-top: 1.25rem; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: .875rem; }
.rodape__simbolo { position: absolute !important; z-index: 0 !important; width: min(70vw, 28rem); right: -10%; bottom: -22%; opacity: .05; pointer-events: none; }
@media (min-width: 52rem) {
  .rodape__chamada { grid-template-columns: 1fr auto; align-items: center; justify-items: start; gap: 3rem; }
  .rodape__grelha { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2.5rem; }
}

/* Ajustes: painel de serviço só sobre a imagem; destaques em coluna */
.destaques.destaques--lado { grid-template-columns: 1fr; }
@media (hover: hover) {
  .servico__imagem { aspect-ratio: 1 / 1; }
  .servico__detalhe { inset: 0 0 auto 0; aspect-ratio: 1 / 1; align-content: center; }
  .servico__detalhe strong, .servico__ver-2 { display: none; }
}
.rodape .botao { background: var(--rosa); color: var(--azul); }
.rodape .botao:hover { background: #ff5a9d; color: var(--azul); }

/* Trabalho feito: prévia mais pequena e botão */
.slider { max-width: 26rem; }
.trabalho__lado { display: grid; gap: 1.25rem; justify-items: start; }
.trabalho__cta { margin-top: .5rem; }
@media (min-width: 60rem) { .trabalho { grid-template-columns: minmax(0, 26rem) 1fr; } }


/* ===== Símbolo MJ no cabeçalho (volta sempre ao início) ===== */
.topo { justify-content: space-between; }
.topo__home { display: inline-flex; align-items: center; min-height: 2.75rem; transition: opacity .4s var(--ease), visibility .4s, transform .4s var(--ease); }
.topo__home img { height: 2.6rem; width: auto; }
.topo__home:hover { transform: scale(1.08); }
.topo--inicio .topo__home { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.topo--inicio.mostra-home .topo__home { opacity: 1; visibility: visible; transform: none; }

/* ===== Logótipos de clientes em rotação ===== */
.logos-faixa {
  margin-top: clamp(2.5rem, 6vw, 4rem); 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);
}
.logos-pista { display: flex; width: max-content; animation: corre 50s linear infinite; }
.logos-faixa:hover .logos-pista { animation-play-state: paused; }
.logos-grupo { display: flex; align-items: center; flex: none; gap: 3.5rem; padding: 0 1.75rem; margin: 0; list-style: none; }
.logos-grupo .logo img { width: 11rem; height: 7rem; }
@media (prefers-reduced-motion: reduce) { .logos-pista { animation: none; } }

/* ===== FAQ ===== */
.perguntas__grelha { display: grid; gap: 2rem; align-items: start; }
.perguntas .titulo-seccao { font-size: clamp(3rem, 10vw, 6.5rem); max-width: none; }
.perguntas__cabeca .intro { margin-top: .75rem; }
.perguntas .faq { margin-top: 0; max-width: none; }
@media (min-width: 52rem) {
  .perguntas__grelha { grid-template-columns: 4fr 8fr; gap: 4rem; }
  .perguntas__cabeca { position: sticky; top: 7rem; }
}


/* Momento da empresa: o botão final destaca-se das opções */
.momento__acao { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--linha-clara); display: grid; gap: 1rem; justify-items: start; }
.botao--grande { min-height: 3.6rem; padding: 1rem 2.4rem; font-size: 1.0625rem; box-shadow: 0 .9rem 1.6rem -.9rem rgb(255 61 139 / .8); }
.botao--grande span { display: inline-block; margin-left: .6rem; transition: transform .3s var(--ease); }
.botao--grande:hover span { transform: translateX(6px); }
.momento__aviso { padding: .6rem 1rem; border-radius: .75rem; background: var(--rosa-claro); font-weight: 700; }
.momento__aviso[hidden] { display: none; }
.chips--pedir .chip span { animation: pede-escolha .5s var(--ease); border-color: var(--rosa); }
@keyframes pede-escolha { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .chips--pedir .chip span { animation: none; } }


/* ===== Hero mais rica: produtos, CTA e faixa visível logo ===== */
.hero { padding: 2rem var(--lado) 2.5rem; }
.hero__palco { position: relative; z-index: 2; gap: clamp(1.5rem, 3.5vw, 2.25rem); }
.hero__simbolo { position: absolute; z-index: 0; width: min(60vw, 34rem); right: -9%; bottom: -34%; opacity: .05; pointer-events: none; }
.hero__cartao { position: absolute; z-index: 1; display: none; margin: 0; width: clamp(8rem, 15vw, 13rem); border-radius: 1rem; overflow: hidden; background: var(--creme); box-shadow: 0 1.5rem 2.5rem -1rem rgb(0 0 0 / .55); opacity: 0; animation: aparece-cartao 1s var(--ease) 2.2s forwards, flutua 7s ease-in-out 3.2s infinite alternate; }
.hero__cartao img { width: 100%; height: auto; }
.hero__cartao--esq { left: 6%; top: 50%; margin-top: -4rem; rotate: -6deg; }
.hero__cartao--alto { right: 7%; top: 9%; width: clamp(7rem, 12vw, 10.5rem); rotate: 5deg; animation-delay: 2.35s, 3.35s; }
.hero__cartao--baixo { right: 19%; bottom: 8%; width: clamp(8rem, 13vw, 11.5rem); rotate: -4deg; animation-delay: 2.5s, 3.5s; }
@keyframes aparece-cartao { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes flutua { from { translate: 0 0; } to { translate: 0 -12px; } }
.motion-on .hero__cartao { animation: flutua 7s ease-in-out 3.2s infinite alternate; }

.hero__cta { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.botao--cta { position: relative; min-height: 3.9rem; gap: .9rem; padding: .7rem .7rem .7rem 1.5rem; font-size: 1.125rem; box-shadow: 0 1rem 2rem -.8rem rgb(255 61 139 / .85); }
.botao__icone svg { width: 1.5rem; height: 1.5rem; }
.botao__seta { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--azul); color: var(--creme); font-size: 1.1rem; transition: transform .35s var(--ease); }
.botao--cta:hover .botao__seta { transform: translateX(4px) rotate(-45deg); }
.botao--cta::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--rosa); opacity: 0; animation: pulso 2.8s ease-out 3.4s infinite; pointer-events: none; }
@keyframes pulso { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14, 1.4); } }
.hero__secundario { color: var(--creme); font-weight: 700; text-decoration: none; padding: .25rem 0; background: linear-gradient(var(--rosa), var(--rosa)) 0 100% / 100% 2px no-repeat; transition: background-size .3s var(--ease), color .3s; }
.hero__secundario:hover { background-size: 100% 100%; color: var(--azul); }
.hero__nota { max-width: 24rem; font-size: .9375rem; color: var(--texto-2); }
.hero__mini { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; gap: .6rem; justify-content: center; }
.hero__mini img { width: 4.75rem; height: 4.75rem; object-fit: cover; border-radius: .85rem; }
@media (min-width: 52rem) { .hero__cartao { display: block; } .hero__mini { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__cartao { animation: none; opacity: 1; }
  .botao--cta::after { display: none; }
}

/* ===== Cartões de serviço: a imagem preenche o cartão todo ===== */
.servico { aspect-ratio: 4 / 5; background: var(--azul); color: var(--branco); }
.servico__imagem { position: absolute; inset: 0; aspect-ratio: auto; }
.servico::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(15 27 76 / .92) 0%, rgb(15 27 76 / .6) 26%, transparent 56%); }
.servico h3 { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 3.5rem; padding: 0; color: var(--branco); transition: opacity .3s; }
.servico__ver { position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem; padding: 0; color: var(--branco); transition: opacity .3s; }
.servico::after { z-index: 4; }
@media (hover: hover) {
  .servico__imagem { aspect-ratio: auto; }
  .servico__detalhe { z-index: 3; inset: 0; aspect-ratio: auto; align-content: center; gap: .9rem; padding: 1.5rem; background: rgb(15 27 76 / .7); }
  .servico__detalhe strong, .servico__ver-2 { display: block; }
  .servico:hover > h3, .servico:hover > .servico__ver, .servico:focus-visible > h3, .servico:focus-visible > .servico__ver { opacity: 0; }
}
@media (hover: none) { .servico { aspect-ratio: 4 / 4.4; } }

/* ===== Página de FAQ ===== */
.perguntas--pagina { padding: clamp(3rem, 8vw, 6rem) var(--lado); background: var(--branco); }
.perguntas--pagina .faq { margin-top: 0; max-width: 52rem; }


/* ===== Hero: recortes PNG sem fundo e frase ===== */
.hero__cartao { background: none; border-radius: 0; overflow: visible; box-shadow: none; filter: drop-shadow(0 1.4rem 1.4rem rgb(0 0 0 / .4)); }
.hero__cartao--esq { width: clamp(8rem, 14vw, 12.5rem); left: 7%; margin-top: -5rem; rotate: -7deg; }
.hero__cartao--alto { width: clamp(6rem, 10vw, 9rem); right: 8%; top: 8%; rotate: 6deg; }
.hero__cartao--baixo { width: clamp(9rem, 15vw, 13.5rem); right: 17%; bottom: 7%; rotate: -5deg; }
.hero__mini img { width: auto; height: 4.75rem; object-fit: contain; border-radius: 0; filter: drop-shadow(0 .5rem .6rem rgb(0 0 0 / .4)); }
.hero__mini { gap: 1.1rem; align-items: center; }
.hero__frase { font: italic 500 clamp(1.25rem, 2.6vw, 1.75rem)/1.2 var(--f-frase); color: var(--creme); text-align: center; }
.hero__nota { display: none; }

/* ===== Cartão "Marca e identidade": logótipos de trabalhos feitos ===== */
.servico__imagem--logos { background: #E8ECF6; }
.logo-tile { position: absolute; width: 38%; aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--branco); border-radius: 1.1rem; box-shadow: 0 .8rem 1.5rem -.6rem rgb(15 27 76 / .35); overflow: hidden; }
.servico__imagem--logos .logo-tile img { width: 88%; height: 88%; object-fit: contain; transition: none; }
.logo-tile--a { left: 9%; top: 7%; }
.logo-tile--b { right: 9%; top: 15%; }
.logo-tile--c { left: 30%; top: 36%; }
.servico:hover .servico__imagem--logos .logo-tile img, .servico:focus-visible .servico__imagem--logos .logo-tile img { transform: none; }

/* ===== Trabalho feito: sem excesso de rosa ===== */
.destaque--azul, .destaque--claro, .destaque--rosa { background: var(--branco); color: var(--azul); box-shadow: 0 .6rem 1.2rem -.9rem rgb(15 27 76 / .5); }
.destaque--azul .destaque__icone, .destaque--claro .destaque__icone, .destaque--rosa .destaque__icone { background: var(--azul); color: var(--creme); }

/* ===== Movimento mais suave ===== */
.servico:hover, .servico:focus-visible { translate: 0 -4px; }
.destaque:hover { translate: 0 -3px; }
.servico__imagem img { transition-duration: 1.4s; }


/* Capa com imagem no topo de uma página de serviço */
.topo-pagina--capa .miolo { display: grid; gap: 2.5rem; align-items: center; }
.topo-pagina__capa { margin: 0; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 2rem 3rem -1.5rem rgb(0 0 0 / .6); }
.topo-pagina__capa img { width: 100%; height: auto; }
@media (min-width: 52rem) { .topo-pagina--capa .miolo { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }


/* Prova social: seguidores do Kanoa */
.prova { width: 100%; padding: 1.5rem 1.75rem; border-radius: 1.25rem; background: var(--azul); color: var(--creme); display: grid; gap: .35rem; }
.prova__numero { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; font-family: var(--f-titulo); font-weight: 600; line-height: 1; }
.prova__mais { font-size: 1rem; color: var(--texto-2); }
.prova__valor { font-size: clamp(3.25rem, 7vw, 4.75rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.prova__mil { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--rosa); }
.prova__texto { max-width: 26rem; color: var(--texto-2); }


/* ===== Prova social: sem fundo, a crescer ===== */
.prova { background: none; color: var(--azul); padding: 0; border-radius: 0; gap: .5rem; }
.prova__numero { align-items: flex-end; gap: .9rem; }
.prova__mais { font-size: 1.125rem; color: var(--clara-2); padding-bottom: .5rem; }
.prova__valor { display: inline-block; transform-origin: left bottom; font-size: clamp(4rem, 9vw, 6.5rem); color: var(--azul); }
.prova__mil { font-size: .5em; color: var(--rosa); }
.prova__texto { color: var(--clara-2); font-size: 1.125rem; max-width: 28rem; }

/* ===== CTAs ===== */
.botao--cta::after { animation: none; opacity: 0; }
.hero .botao--cta::after, .cta-flutuante::after { animation: pulso 2.8s ease-out 3.4s infinite; }
.cta-faixa { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--linha-clara); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.cta-faixa p { font: 600 clamp(1.125rem, 2.4vw, 1.5rem)/1.3 var(--f-titulo); max-width: 26rem; }
.cta-faixa--escura { border-top-color: var(--linha); color: var(--creme); }
.processo { background: var(--branco); }
.cta-flutuante {
  position: fixed; z-index: 15; right: 1.25rem; bottom: 1.25rem; min-height: 3.4rem; padding: .5rem 1.4rem .5rem 1.1rem; gap: .65rem; font-size: 1rem;
  box-shadow: 0 1rem 2rem -.6rem rgb(255 61 139 / .75), 0 .4rem .8rem rgb(0 0 0 / .18);
  opacity: 0; pointer-events: none; translate: 0 22px; transition: opacity .45s var(--ease), translate .45s var(--ease), transform .25s var(--ease), background-color .25s;
}
.cta-flutuante.visivel-cta { opacity: 1; pointer-events: auto; translate: 0 0; }
@media (max-width: 40rem) { .cta-flutuante { right: .9rem; bottom: .9rem; } }
@media (prefers-reduced-motion: reduce) { .cta-flutuante { transition: none; } }

/* ===== Funil de palavras ===== */
.funil { padding: clamp(4.5rem, 11vw, 8rem) var(--lado); background: var(--gelo); color: var(--azul); overflow: hidden; }
.funil__forma { margin: clamp(2rem, 5vw, 3.25rem) auto 0; max-width: 62rem; padding: .9rem 0 1.6rem; background: var(--azul); display: grid; gap: .3rem; clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%); }
.funil__linha { overflow: hidden; }
.funil__pista { display: flex; width: max-content; animation: corre 36s linear infinite; }
.funil__linha:nth-child(even) .funil__pista { animation-name: corre-volta; }
.funil__grupo { display: flex; align-items: center; flex: none; gap: 1.5rem; padding-right: 1.5rem; font: 600 clamp(1.05rem, 2.2vw, 1.55rem)/1.55 var(--f-titulo); color: var(--creme); white-space: nowrap; }
.funil__grupo i { width: .5rem; height: .5rem; border-radius: 50%; background: rgb(255 247 234 / .35); flex: none; }
.funil__destaque { color: var(--rosa); }
.funil__ponta { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: -1.1rem; }
@media (max-width: 40rem) { .funil__forma { clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%); } }
@media (prefers-reduced-motion: reduce) { .funil__pista { animation: none; } .funil__grupo[aria-hidden] { display: none; } }


/* ===== Frase do primeiro passo legível ===== */
.cta-faixa--escura { color: var(--azul); border-top-color: var(--linha-clara); }
.cta-faixa--escura p { font-size: clamp(1.375rem, 3vw, 2rem); max-width: 30rem; color: var(--azul); }

/* ===== "Em breve" ===== */
.breve { display: inline-block; margin-left: .5rem; padding: .15rem .65rem; border-radius: 999px; background: var(--gelo); color: var(--azul); border: 1px solid var(--linha-clara); font: 700 .75rem/1.4 var(--f-texto); vertical-align: middle; white-space: nowrap; }
.servico__detalhe .breve { background: rgb(255 247 234 / .16); color: var(--creme); border-color: rgb(255 247 234 / .35); }
.inclui__lista h3 .breve { margin-left: .75rem; }

/* ===== Botões mais leves ===== */
.botao:hover, .botao--azul:hover, .botao--rosa:hover, .botao--creme:hover { transform: translateY(-1px); }
.botao--cta:hover .botao__seta { transform: translateX(3px); }
.botao--cta { box-shadow: 0 .8rem 1.5rem -.9rem rgb(255 61 139 / .6); }
.botao--grande { box-shadow: 0 .7rem 1.3rem -.9rem rgb(255 61 139 / .55); }
.botao--cta::after { border-width: 1.5px; }
.hero .botao--cta::after, .cta-flutuante::after { animation: pulso-leve 4s ease-out 3.6s infinite; }
@keyframes pulso-leve { 0% { opacity: .45; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.05, 1.18); } }
.cta-flutuante { box-shadow: 0 .8rem 1.5rem -.8rem rgb(255 61 139 / .55), 0 .3rem .6rem rgb(0 0 0 / .14); }


/* =====================================================================
   Estética limpa, inspirada em garra.pt: cabeçalho em cápsula,
   hero clara com título a escrever, selo giratório, painel diagonal
   ===================================================================== */

/* ----- Cabeçalho flutuante em cápsula ----- */
html { scroll-padding-top: 6.5rem; }
.topo {
  position: fixed; top: .75rem; left: 50%; translate: -50% 0; z-index: 30;
  width: calc(100% - 2 * var(--lado) + 1rem); max-width: 80rem;
  padding: .45rem .6rem .45rem 1rem; border-radius: 1.25rem;
  background: rgb(255 255 255 / .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 .8rem 2.2rem -1rem rgb(15 27 76 / .4); color: var(--azul);
}
.topo__menu { color: var(--azul); }
.topo--inicio .topo__home { opacity: 1; visibility: visible; transform: none; }
.topo__nav { inset: calc(100% + .5rem) 0 auto 0; border-radius: 1.25rem; background: var(--branco); box-shadow: 0 1.2rem 2.5rem -1rem rgb(15 27 76 / .4); padding: .5rem 1.25rem 1.5rem; }
.topo__nav a:not(.botao) { color: var(--azul); border-bottom: 1px solid var(--linha-clara); }
.topo .botao--creme { background: var(--azul); color: var(--branco); }
@media (min-width: 52rem) {
  .topo__nav { inset: auto; box-shadow: none; padding: 0; background: none; border-radius: 0; }
  .topo__nav a:not(.botao) { color: var(--azul); font-weight: 600; border: 0; }
}

/* ----- Hero clara ----- */
.hero {
  background: var(--branco); color: var(--azul);
  min-height: calc(100svh - 3.75rem);
  padding: 6.5rem var(--lado) 2.5rem;
}
.marca { width: min(100%, 15rem); max-height: none; }
.marca__m, .marca__cre { fill: var(--azul); }
.hero__palco { gap: clamp(1rem, 2.2vw, 1.5rem); }
.hero__titulo { display: grid; gap: .2rem; text-align: center; font-family: var(--f-titulo); letter-spacing: -.03em; color: var(--azul); opacity: 0; animation: sobe-botao 1s var(--ease) 1.2s forwards; }
.hero__titulo-a { font-weight: 700; font-size: clamp(2rem, 6.2vw, 4.75rem); line-height: 1.05; }
.hero__titulo-b { font-weight: 300; font-size: clamp(1.75rem, 5.4vw, 4.1rem); line-height: 1.15; min-height: 1.25em; display: block; }
.cursor { display: inline-block; width: .06em; height: .95em; margin-left: .08em; background: var(--rosa); vertical-align: -.1em; animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.hero__sub { max-width: 34rem; text-align: center; font-size: clamp(1rem, 1.6vw, 1.1875rem); color: var(--clara-2); opacity: 0; animation: sobe-botao 1s var(--ease) 1.5s forwards; }
.hero__sub em { font: italic 500 1.1em/1.3 var(--f-frase); color: var(--azul); }
.hero__secundario { color: var(--azul); }
.hero__secundario:hover { color: var(--azul); }
.motion-on .hero__titulo, .motion-on .hero__sub { animation: none; }
.hero__cartao { filter: drop-shadow(0 1.1rem 1.1rem rgb(15 27 76 / .25)); }
.hero__mini img { filter: drop-shadow(0 .5rem .6rem rgb(15 27 76 / .25)); }
@media (prefers-reduced-motion: reduce) { .hero__titulo, .hero__sub { animation: none; opacity: 1; } .cursor { animation: none; } }

/* ----- Painel diagonal com selo giratório ----- */
.painel { position: relative; background: var(--branco); padding: 5rem 0 0; }
.painel__imagem { clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%); height: clamp(16rem, 44vw, 32rem); background: var(--gelo); }
.painel__imagem img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.selo { position: absolute; z-index: 3; left: 50%; top: 5rem; translate: -50% -50%; width: 7.5rem; height: 7.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--rosa); color: var(--azul); box-shadow: 0 1rem 2rem -.8rem rgb(255 61 139 / .7); transition: scale .35s var(--ease); }
.selo:hover { scale: 1.06; }
.selo__texto { position: absolute; inset: 0; width: 100%; height: 100%; animation: roda 20s linear infinite; }
.selo__texto text { font: 700 12.5px var(--f-texto); fill: var(--azul); }
.selo__centro { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--azul); color: var(--creme); }
.selo__centro svg { width: 1.35rem; height: 1.35rem; }
@keyframes roda { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .selo__texto { animation: none; } }

/* ----- Já trabalhámos com: títulos suaves e duas fiadas de logótipos ----- */
.clientes { text-align: center; }
.clientes .titulo-seccao { max-width: none; margin-inline: auto; text-transform: lowercase; font-weight: 700; font-size: clamp(2.5rem, 9vw, 6rem); letter-spacing: -.04em; color: #8590B3; }
.clientes__sub { margin-top: 1rem; font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 400; color: var(--azul); }
.clientes__sub strong { font-weight: 700; }
.logos-faixa + .logos-faixa { margin-top: 1.25rem; }
.logos-faixa--volta .logos-pista { animation-name: corre-volta; animation-duration: 60s; }
.logos-grupo .logo img { width: 12rem; height: 7.5rem; }

/* ----- Cortes diagonais nas secções escuras ----- */
.contacto { clip-path: polygon(0 clamp(1.5rem, 4vw, 3.5rem), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * clamp(1.5rem, 4vw, 3.5rem)); padding-top: calc(clamp(4.5rem, 11vw, 8rem) + clamp(1.5rem, 4vw, 3.5rem)); }

/* ----- Páginas internas: o título livra a cápsula ----- */
.topo-pagina { padding-top: calc(clamp(4rem, 10vw, 7rem) + 3.5rem); }


/* Ajustes da hero clara: título mais contido e produtos fora do caminho */
.hero__titulo-a { font-size: clamp(1.75rem, 4.6vw, 3.6rem); }
.hero__titulo-b { font-size: clamp(1.5rem, 4.1vw, 3.1rem); }
.hero__cartao--esq { width: clamp(7rem, 11vw, 10rem); left: 4%; top: auto; bottom: 14%; margin-top: 0; rotate: -7deg; }
.hero__cartao--alto { width: clamp(5.5rem, 8vw, 8rem); right: 5%; top: 9.5rem; rotate: 6deg; }
.hero__cartao--baixo { width: clamp(8rem, 12vw, 11rem); right: 6%; bottom: 10%; rotate: -5deg; }
.painel__imagem img { object-position: center 55%; }


/* ===== Hero azul, limpa, como a referência ===== */
.hero { background: var(--azul); color: var(--creme); min-height: 100svh; padding-bottom: 4rem; }
.marca__m, .marca__cre { fill: var(--creme); }
.hero__titulo { color: var(--creme); }
.hero__sub { max-width: none; color: var(--creme); }
.hero__sub em { font: italic 500 clamp(1.5rem, 3.4vw, 2.5rem)/1.25 var(--f-frase); color: var(--creme); }


/* =====================================================================
   Ronda de melhorias: cabeçalho, hero, colagem, trabalho feito, momento
   ===================================================================== */

/* ----- Cabeçalho: logótipo, ligações bem espaçadas e botão ----- */
@media (min-width: 52rem) {
  .topo { padding: .5rem .65rem .5rem 1.25rem; }
  .topo__nav { flex: 1; justify-content: space-between; gap: 0; margin-left: clamp(2rem, 7vw, 6rem); }
}

/* ----- Hero: informação com mais respiro e um indicador para descer ----- */
.hero { padding-top: 7rem; padding-bottom: 5.5rem; }
.marca { width: min(100%, 17rem); }
.hero__palco { gap: clamp(1.5rem, 3.6vw, 2.75rem); }
.hero__titulo { gap: .5rem; margin-top: .75rem; }
.hero__sub { margin-top: .25rem; }
.hero__cta { margin-top: .75rem; }
.hero__descer { position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid rgb(255 247 234 / .45); }
.hero__descer span { width: .6rem; height: .6rem; border-right: 2px solid var(--creme); border-bottom: 2px solid var(--creme); transform: rotate(45deg) translate(-2px, -2px); animation: desce-leve 2.2s ease-in-out infinite; }
@keyframes desce-leve { 50% { transform: rotate(45deg) translate(1px, 1px); } }
.hero__descer:hover { border-color: var(--creme); }
@media (prefers-reduced-motion: reduce) { .hero__descer span { animation: none; } }

/* ----- Painel: colagem simples de produtos ----- */
.painel__imagem.colagem { position: relative; background: #EEF1F8; height: clamp(17rem, 40vw, 29rem); }
.colagem__item { position: absolute; height: auto; max-width: none; filter: drop-shadow(0 1rem 1rem rgb(15 27 76 / .22)); object-fit: contain; }
.colagem__item--1 { left: 5%; top: 33%; width: 25%; rotate: -4deg; }
.colagem__item--2 { left: 27%; top: 24%; width: 15%; rotate: 5deg; }
.colagem__item--3 { left: 43%; top: 17%; width: 12%; rotate: -3deg; }
.colagem__item--4 { left: 55%; top: 27%; width: 14%; rotate: 4deg; }
.colagem__item--5 { left: 70%; top: 22%; width: 15%; rotate: -5deg; }
.colagem__item--6 { left: 80%; top: 44%; width: 16%; rotate: 3deg; }
@media (max-width: 40rem) {
  .colagem__item--2, .colagem__item--5 { display: none; }
  .colagem__item--1 { left: 3%; top: 36%; width: 34%; }
  .colagem__item--3 { left: 40%; top: 20%; width: 17%; }
  .colagem__item--4 { left: 58%; top: 30%; width: 19%; }
  .colagem__item--6 { left: 78%; top: 46%; width: 20%; }
}

/* ----- Cartões de serviço: só imagem e título ----- */
.servico__detalhe { display: none !important; }

/* ----- Trabalho feito: mais limpo e com mais desenho ----- */
.kanoa { background: var(--branco); }
.kanoa .titulo-seccao { max-width: none; text-align: center; text-transform: lowercase; font-weight: 700; font-size: clamp(2.5rem, 9vw, 6rem); letter-spacing: -.04em; color: #8590B3; }
.kanoa__sub { margin: 1rem auto 0; text-align: center; font-size: clamp(1.125rem, 2.4vw, 1.5rem); color: var(--azul); max-width: 40rem; }
.kanoa__sub strong { font-weight: 700; }
.kanoa .trabalho { margin-top: clamp(2.5rem, 6vw, 4.5rem); gap: 2.5rem; align-items: center; }
.kanoa .slider { max-width: 38rem; }
.kanoa .slider__janela { border-radius: 1.25rem; box-shadow: 0 2.2rem 3.5rem -1.5rem rgb(15 27 76 / .45); }
.kanoa .slider__rodape { margin-top: 1.5rem; }
.kanoa .trabalho__lado { display: grid; gap: 2rem; justify-items: start; }
.kanoa .prova { gap: .4rem; }
.kanoa .prova__valor { font-size: clamp(4.5rem, 9vw, 7.5rem); }
.kanoa .prova__mais { font-size: 1.25rem; }
.kanoa .prova__texto { max-width: 26rem; font-size: 1.0625rem; }
.feitos2 { list-style: none; margin: 0; padding: 0; width: 100%; border-bottom: 1px solid var(--linha-clara); }
.feitos2 li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1.25rem; align-items: center; padding: 1.35rem 0; border-top: 1px solid var(--linha-clara); transition: transform .45s var(--ease); }
.feitos2 li:hover { transform: translateX(6px); }
.feito__icone { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--azul); color: var(--creme); transition: background-color .35s, color .35s; }
.feito__icone svg { width: 1.65rem; height: 1.65rem; }
.feitos2 li:hover .feito__icone { background: var(--rosa); color: var(--azul); }
.feitos2 h3 { font-size: 1.1rem; line-height: 1.25; margin-bottom: .25rem; }
.feitos2 p { color: var(--clara-2); font-size: 1rem; }
@media (min-width: 60rem) { .kanoa .trabalho { grid-template-columns: minmax(0, 38rem) 1fr; gap: 5rem; } }

/* ----- Momento da empresa: opções bem visíveis ----- */
.momento__dica { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.0625rem; }
.momento__seta { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rosa); color: var(--azul); animation: salta 1.6s ease-in-out infinite; }
@keyframes salta { 50% { transform: translateY(4px); } }
.momento .chips { margin-top: 1rem; gap: .9rem; }
.momento .chip span { position: relative; overflow: hidden; min-height: 3.75rem; padding: .85rem 1.9rem; font-size: 1.0625rem; background: var(--gelo); border-width: 2px; box-shadow: 0 .6rem 1.1rem -.8rem rgb(15 27 76 / .6); cursor: pointer; }
.momento .chip span::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 61 139 / .28) 50%, transparent 70%); translate: -130% 0; animation: brilho 3.4s ease-in-out infinite; pointer-events: none; }
.momento .chip:nth-child(2) span::before { animation-delay: .3s; }
.momento .chip:nth-child(3) span::before { animation-delay: .6s; }
.momento .chip:nth-child(4) span::before { animation-delay: .9s; }
.momento .chip:nth-child(5) span::before { animation-delay: 1.2s; }
@keyframes brilho { 0% { translate: -130% 0; } 45%, 100% { translate: 130% 0; } }
.momento .chip:hover span { background: var(--azul); color: var(--branco); }
.momento .chip input:checked + span { background: var(--azul); color: var(--branco); }
.momento--feito .chip span::before, .momento--feito .momento__seta { animation: none; }
.momento--feito .momento__dica { opacity: .0; height: 0; margin: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .momento .chip span::before, .momento__seta { animation: none; } }


/* ----- Colagem: tamanhos dos produtos (mais específico que a regra geral das imagens do painel) ----- */
.painel__imagem.colagem .colagem__item { height: auto; object-fit: contain; }
.painel__imagem.colagem .colagem__item--1 { width: 25%; }
.painel__imagem.colagem .colagem__item--2 { width: 15%; }
.painel__imagem.colagem .colagem__item--3 { width: 12%; }
.painel__imagem.colagem .colagem__item--4 { width: 14%; }
.painel__imagem.colagem .colagem__item--5 { width: 15%; }
.painel__imagem.colagem .colagem__item--6 { width: 16%; }
@media (max-width: 40rem) {
  .painel__imagem.colagem .colagem__item--1 { width: 34%; }
  .painel__imagem.colagem .colagem__item--3 { width: 17%; }
  .painel__imagem.colagem .colagem__item--4 { width: 19%; }
  .painel__imagem.colagem .colagem__item--6 { width: 20%; }
}

/* ----- A nossa história: contada em capítulos ----- */
.conto__abertura { margin-top: 1.5rem; max-width: 36rem; font: italic 500 clamp(1.5rem, 3.2vw, 2.25rem)/1.3 var(--f-frase); color: var(--azul); }
.conto { margin-top: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--linha-clara); }
.capitulo { display: grid; gap: 1rem; padding: 2.25rem 0; border-top: 1px solid var(--linha-clara); }
.capitulo h3 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.2; letter-spacing: -.02em; }
.capitulo p { max-width: 38rem; font-size: 1.125rem; line-height: 1.7; color: var(--clara-2); }
.capitulo p + p { margin-top: 1rem; }
@media (min-width: 52rem) { .capitulo { grid-template-columns: 4fr 8fr; gap: 3rem; padding: 2.75rem 0; } }


/* ----- Momento: mais opções, mais bem arrumadas ----- */
.momento .chip:nth-child(6) span::before { animation-delay: 1.5s; }
.momento .chip:nth-child(7) span::before { animation-delay: 1.8s; }
.momento .chip:nth-child(8) span::before { animation-delay: 2.1s; }
.momento .chip:nth-child(9) span::before { animation-delay: 2.4s; }
.momento .chip:nth-child(10) span::before { animation-delay: 2.7s; }

/* ----- O que inclui: explicado, com problema, solução e ganho ----- */
.inclui__intro { margin-top: 1.25rem; max-width: 36rem; font-size: 1.125rem; color: var(--clara-2); }
.inclui__item { display: grid; gap: 1.25rem; padding: 2.5rem 0 !important; border-bottom: 1px solid var(--linha-clara); transform: none; }
.inclui__item:hover { transform: none; }
.inclui__item > h3 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; }
.inclui__oque { max-width: 40rem; font-size: 1.25rem; line-height: 1.5; color: var(--azul); }
.inclui__blocos { margin-top: 1.5rem; display: grid; gap: 1rem; }
.bloco { padding: 1.5rem 1.6rem; border-radius: 1.1rem; }
.bloco h4 { margin: 0 0 .6rem; font: 700 .9375rem/1.2 var(--f-texto); letter-spacing: .02em; }
.bloco p { color: inherit; font-size: 1.0625rem; line-height: 1.6; max-width: none; }
.bloco--dor { background: var(--gelo); color: var(--azul); }
.bloco--dor h4 { color: var(--clara-2); }
.bloco--solucao { background: var(--azul); color: var(--creme); }
.bloco--solucao h4 { color: var(--rosa); }
.bloco--ganho { margin-top: 1rem; padding: 0; }
.bloco--ganho h4 { color: var(--azul); font-size: 1rem; }
.bloco--ganho ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.bloco--ganho li { position: relative; padding-left: 2rem; font-size: 1.0625rem; line-height: 1.5; color: var(--azul); }
.bloco--ganho li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--rosa); }
.bloco--ganho li::after { content: ""; position: absolute; left: .42rem; top: .42rem; width: .35rem; height: .6rem; border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(40deg) translate(-1px, -1px); }
@media (min-width: 52rem) {
  .inclui__item { grid-template-columns: 4fr 8fr; gap: 3rem; align-items: start; }
  .inclui__item > h3 { position: sticky; top: 7rem; }
  .inclui__blocos { grid-template-columns: 1fr 1fr; }
}

/* a lista "O que ganha" não herda o estilo das linhas da lista principal */
.inclui__lista .bloco--ganho li { display: block; grid-template-columns: none; padding: 0 0 0 2rem; border: 0; gap: 0; transform: none; transition: none; }
.inclui__lista .bloco--ganho li:hover { transform: none; }

/* =====================================================================
   v2: cabeçalho sem fundo no topo, WhatsApp, hero com movimento,
   passagem, cartões escuros, títulos iguais, opções que abanam
   ===================================================================== */

.topo { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .4s var(--ease), box-shadow .4s var(--ease); }
.topo.rolou { background: rgb(10 18 56 / .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 .8rem 2rem -1rem rgb(10 18 56 / .6); }
.topo.rolou .topo__menu { color: var(--creme); }
.topo.rolou .topo__home img { background: var(--creme); border-radius: .6rem; padding: .25rem .35rem; box-sizing: content-box; }
.topo__nav { background: var(--azul-escuro); box-shadow: 0 1.2rem 2.5rem -1rem rgb(10 18 56 / .6); }
.topo__nav a:not(.botao) { color: var(--creme); border-bottom-color: rgb(255 247 234 / .15); }
.topo .botao--creme { background: var(--rosa); color: var(--branco); }
@media (min-width: 52rem) {
  .topo__nav { background: none; box-shadow: none; }
  .topo__nav a:not(.botao) { color: var(--creme); border: 0; }
  .topo__nav a:not(.botao):hover { color: var(--rosa); }
}

.hero { position: relative; overflow: hidden; padding: 8rem var(--lado) 5rem; }
.hero__palco { gap: clamp(1.75rem, 4vw, 3rem); }
.marca { width: min(100%, 20rem); }
.hero__fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orbe { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: deriva 14s ease-in-out infinite alternate; }
.orbe--1 { width: 26rem; height: 26rem; left: -8rem; top: 10%; background: rgb(255 61 139 / .22); }
.orbe--2 { width: 30rem; height: 30rem; right: -10rem; top: 30%; background: rgb(15 27 76 / .14); animation-duration: 18s; animation-delay: -4s; }
.orbe--3 { width: 16rem; height: 16rem; left: 40%; bottom: -5rem; background: rgb(255 61 139 / .16); animation-duration: 11s; }
@keyframes deriva { to { transform: translate(4rem, -3rem) scale(1.15); } }
.marca__onda { transform-box: fill-box; transform-origin: center; opacity: 0; animation: onda 3.2s ease-out 1.6s infinite; }
.marca__onda--2 { animation-delay: 2.4s; }
@keyframes onda { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.hero__descer { position: relative; z-index: 2; }

.passagem { position: relative; background: var(--branco); height: clamp(11rem, 22vw, 15rem); display: grid; place-items: center; }
.passagem::before { content: ""; position: absolute; inset: 0; background: var(--azul); clip-path: polygon(0 22%, 100% 0, 100% 78%, 0 100%); }
.passagem .selo { position: relative; left: auto; top: auto; translate: none; z-index: 2; }

.whats { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .6rem; height: 3.75rem; min-width: 3.75rem; padding: 0 1.1rem 0 1rem; border-radius: 2rem; background: #25D366; color: #fff; font: 700 .9375rem var(--f-texto); text-decoration: none; box-shadow: 0 1rem 2rem -.8rem rgb(37 211 102 / .8), 0 .3rem .7rem rgb(0 0 0 / .2); animation: whats-pula 3.6s ease-in-out 2s infinite; }
.whats svg { width: 1.85rem; height: 1.85rem; flex: none; }
.whats__legenda { white-space: nowrap; }
.whats__anel { position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25D366; opacity: 0; animation: whats-anel 2.4s ease-out infinite; pointer-events: none; }
.whats__anel--2 { animation-delay: 1.2s; }
@keyframes whats-anel { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6, 1.9); opacity: 0; } }
@keyframes whats-pula { 0%, 60%, 100% { transform: none; } 66% { transform: translateY(-.7rem) rotate(-6deg); } 72% { transform: translateY(0) rotate(5deg); } 78% { transform: translateY(-.3rem) rotate(-3deg); } 84% { transform: none; } }
@media (max-width: 40rem) { .whats { right: .9rem; bottom: .9rem; padding: 0; justify-content: center; width: 3.75rem; } .whats__legenda { display: none; } }
@media (prefers-reduced-motion: reduce) { .whats, .orbe, .marca__onda { animation: none; } .whats__anel { display: none; } }

.momento .chip span::before { display: none; animation: none; }
.chip.abana span { animation: abana .9s var(--ease); border-color: var(--rosa); }
@keyframes abana { 0%, 100% { transform: none; } 15% { transform: translateX(-6px) rotate(-3deg); } 30% { transform: translateX(6px) rotate(3deg); } 45% { transform: translateX(-5px) rotate(-2deg); } 60% { transform: translateX(5px) rotate(2deg); } 75% { transform: translateX(-2px); } }
.momento--feito .chip.abana span { animation: none; }

.titulo-seccao, .clientes .titulo-seccao, .kanoa .titulo-seccao { max-width: 22ch; margin-inline: 0; text-align: left; text-transform: none; font-weight: 600; font-size: clamp(1.75rem, 4.6vw, 3.25rem); letter-spacing: -.02em; color: var(--azul); }
.kanoa__sub { margin: 1rem 0 0; text-align: left; max-width: 36rem; }
.clientes, .kanoa { text-align: left; }

.servicos__grelha { gap: 1rem; }
.servico { aspect-ratio: auto; min-height: 15rem; background: var(--azul-escuro); display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 1.5rem; }
.servico::before { background: linear-gradient(to top, rgb(10 18 56 / .95) 10%, rgb(10 18 56 / .55)); z-index: 1; }
.servico__imagem { opacity: .35; filter: grayscale(.6) brightness(.7); }
.servico__texto { position: relative; z-index: 2; display: grid; gap: .35rem; }
.servico .servico__texto h3 { position: static; padding: 0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--creme); }
.servico__nota { color: rgb(255 247 234 / .7); font-size: .9375rem; }
.servico__seta { position: relative; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--rosa); color: #fff; font-size: 1.25rem; transition: transform .35s var(--ease); }
.servico:hover .servico__seta, .servico:focus-visible .servico__seta { transform: translateX(4px); }
@media (min-width: 48rem) { .servicos__grelha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .servicos__grelha { grid-template-columns: repeat(4, 1fr); } .servico { min-height: 19rem; } }
.sobre-curto { margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.55; color: var(--clara-2); }
.historia-pagina { padding-block: clamp(4rem, 9vw, 7rem); }
.inclui__item { display: block; }
.inclui__item details { border: 0; }
.inclui__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; }
.inclui__item summary::-webkit-details-marker { display: none; }
.inclui__item summary h3 { grid-column: 1; }
.inclui__item summary .inclui__oque { grid-column: 1; font-size: 1.0625rem; }
.inclui__mais { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--rosa); color: #fff; font-size: 1.5rem; line-height: 1; transition: transform .3s var(--ease); }
.inclui__item details[open] .inclui__mais { transform: rotate(45deg); }
.inclui__item .inclui__corpo { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .inclui__item { display: block; } .inclui__item > h3 { position: static; } }

/* Trabalho feito: mosaicos coloridos com título ao passar o rato (inspirado em bydas.com) */
.kanoa__topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.kanoa__mais { font-weight: 700; color: var(--azul); text-decoration: none; padding-bottom: .4rem; }
.kanoa__mais span { display: inline-block; transition: transform .3s var(--ease); }
.kanoa__mais:hover span { transform: translateX(5px); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.75rem 0 1.5rem; }
.filtro { background: none; border: 0; padding: .35rem 0; font: 600 .9375rem var(--f-texto); color: var(--clara-2); cursor: pointer; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.filtro:hover { color: var(--azul); }
.filtro.ativo { color: var(--rosa); border-color: var(--rosa); }
.casos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 52rem) { .casos { grid-template-columns: repeat(3, 1fr); } }
.caso { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: .25rem; background: var(--fundo); text-decoration: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.caso[hidden] { display: none; }
.caso img { width: 72%; height: 72%; object-fit: contain; transition: transform .8s var(--ease); filter: drop-shadow(0 1.2rem 1.2rem rgb(0 0 0 / .22)); }
.caso--foto img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.caso:hover img, .caso:focus-visible img { transform: scale(1.06); }
.caso__veu { position: absolute; inset: 0; display: grid; align-content: end; gap: .2rem; padding: 1.5rem; background: rgb(10 18 56 / .72); color: var(--creme); opacity: 0; transition: opacity .4s var(--ease); }
.caso__veu strong { font: 600 1.125rem/1.2 var(--f-texto); }
.caso__veu span { font-size: .875rem; opacity: .75; }
.caso:hover .caso__veu, .caso:focus-visible .caso__veu { opacity: 1; }
@media (hover: none) { .caso__veu { opacity: 1; background: linear-gradient(to top, rgb(10 18 56 / .85), transparent 55%); } }
.caso__seta { position: absolute; top: 1rem; right: 1rem; color: #fff; font-size: 1.1rem; opacity: 0; transition: opacity .3s; }
.caso:hover .caso__seta { opacity: 1; }
.kanoa__prova { margin-top: 2rem; font-size: 1.0625rem; color: var(--clara-2); }
.kanoa__prova strong { color: var(--azul); font-size: 1.25rem; }
@media (max-width: 52rem) { .caso__veu { padding: .9rem; } .caso__veu strong { font-size: .9rem; } .caso__veu span { font-size: .75rem; line-height: 1.3; } .caso img { width: 62%; height: 62%; } .caso--foto img { width: 100%; height: 100%; } }

/* =====================================================================
   v3: logo só no centro da hero, projetos em mockups, serviços ao estilo garra
   ===================================================================== */
.topo--inicio .topo__home { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.topo--inicio.mostra-home .topo__home { opacity: 1; visibility: visible; transform: none; }
.topo { justify-content: flex-end; }
.topo--inicio.mostra-home { justify-content: space-between; }
@media (max-width: 51.99rem) { .topo { justify-content: space-between; } }

/* Projetos: mosaico com formatos diferentes */
.kanoa { background: var(--branco); }
.casos { grid-auto-rows: clamp(13rem, 24vw, 19rem); grid-auto-flow: dense; gap: 1rem; }
.caso { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1.25rem; border-radius: .5rem; }
.caso--alto { grid-row: span 2; }
.caso--largo { grid-column: span 2; }
@media (max-width: 51.99rem) { .caso--largo { grid-column: span 2; } .caso--alto { grid-row: span 2; } .casos { grid-auto-rows: 11rem; } }
.caso__logo { position: absolute; top: 1.1rem; left: 1.1rem; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fff; box-shadow: 0 .5rem 1rem -.5rem rgb(0 0 0 / .3); overflow: hidden; z-index: 2; }
.caso__logo img { width: 78%; height: 78%; object-fit: contain; }
.caso__rotulo { position: absolute; top: 1.2rem; left: 1.3rem; font: 700 .8125rem var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); z-index: 2; }
.caso img.corte { width: auto; height: auto; max-width: 78%; max-height: 72%; object-fit: contain; margin-top: 2.2rem; }
.mock { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 78%; margin-top: 2rem; }
.pc { position: relative; display: block; width: 100%; max-width: 21rem; filter: drop-shadow(0 1rem 1rem rgb(0 0 0 / .25)); }
.pc__ecra { display: block; aspect-ratio: 16 / 10; border: .35rem solid #17181f; border-bottom-width: .45rem; border-radius: .6rem .6rem 0 0; overflow: hidden; background: #fff; }
.pc__ecra img, .tel__ecra img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pc__base { display: block; height: .55rem; margin: 0 -4%; border-radius: 0 0 .9rem .9rem; background: linear-gradient(#dfe1e8, #b9bcc8); }
.tel { position: relative; display: block; width: 28%; min-width: 4.5rem; filter: drop-shadow(0 1rem 1rem rgb(0 0 0 / .3)); }
.tel__ecra { display: block; aspect-ratio: 9 / 19; border: .3rem solid #111218; border-radius: 1.3rem; overflow: hidden; background: #fff; }
.tel__ecra::before { content: ""; position: absolute; top: .5rem; left: 50%; translate: -50% 0; width: 32%; height: .45rem; border-radius: 1rem; background: #111218; z-index: 2; }
.mock--pc-tel { gap: 0; }
.mock--pc-tel .pc { max-width: 72%; margin-right: -6%; }
.mock--pc-tel .tel { margin-bottom: -.2rem; z-index: 1; transform: rotate(4deg); }
.mock--dois-pc .pc { width: 52%; max-width: 15rem; }
.mock--dois-pc .pc:first-child { transform: rotate(-3deg) translateX(8%); }
.mock--dois-pc .pc:last-child { transform: rotate(2deg) translate(-8%, -8%); }
.mock--cartoes { flex-direction: column; align-items: center; justify-content: center; gap: .6rem; height: 80%; }
.flut { width: min(82%, 25rem); height: auto; border-radius: .6rem; box-shadow: 0 1rem 1.6rem -.6rem rgb(0 0 0 / .35); }
.flut--1 { transform: rotate(-2deg); }
.flut--2 { transform: rotate(1.5deg) translateX(6%); }
.caso--foto img { width: 100%; height: 100%; }
.caso:hover .mock { transform: scale(1.04); }
.mock, .caso img.corte { transition: transform .8s var(--ease); }
.caso:hover img.corte { transform: scale(1.06); }
.caso__veu { z-index: 3; align-content: end; }

/* Serviços: secção escura com corte diagonal (como garra.pt) */
.servicos { position: relative; background: var(--azul-escuro); color: var(--creme); padding-top: clamp(9rem, 17vw, 13rem); }
.servicos::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: clamp(5rem, 11vw, 9rem); background: var(--branco); clip-path: polygon(0 0, 100% 0, 0 100%); }
.servicos .titulo-seccao { color: var(--creme); max-width: 20ch; }
.sv__grelha { margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 6vw, 5rem); }
@media (min-width: 52rem) { .sv__grelha { grid-template-columns: repeat(2, 1fr); } }
.sv { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.sv__icone { display: grid; place-items: center; width: clamp(3.75rem, 7vw, 5.5rem); height: clamp(3.75rem, 7vw, 5.5rem); border-radius: 1.1rem; background: var(--creme); color: var(--azul); transition: transform .4s var(--ease), background .3s; }
.sv__icone svg { width: 55%; height: 55%; }
.sv:hover .sv__icone { transform: rotate(-6deg) scale(1.06); background: var(--rosa); color: #fff; }
.sv h3 { font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -.02em; }
.sv h3 a { color: var(--creme); text-decoration: none; }
.sv ul { margin: 1.1rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; color: rgb(255 247 234 / .85); font-size: clamp(1rem, 1.5vw, 1.1875rem); }
.sv li::marker { color: var(--rosa); }
.sv__ver { display: inline-block; margin-top: 1.25rem; font-weight: 700; color: var(--rosa); text-decoration: none; }
.sv__ver span { display: inline-block; transition: transform .3s var(--ease); }
.sv__ver:hover span { transform: translateX(5px); }
.mock--tel-so .tel { width: 46%; max-width: 11rem; margin-bottom: -4rem; transform: rotate(-3deg); }
.caso__logo img[src$=".svg"] { width: 46%; height: 64%; }

/* v4: mosaicos com imagens reais, fundo igual ao da imagem */
.caso img.corte { max-width: 92%; max-height: 88%; margin: 0; }
.caso--foto img.corte { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.caso .caso__logo ~ img.corte { margin-top: 3rem; max-height: 76%; }
.caso { justify-content: center; }
.mock--pc-tel .pc { max-width: 62%; }
.mock--dois-pc-v { flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 85%; margin-top: 3rem; }
.mock--dois-pc-v .pc { width: 78%; }
.mock--dois-pc-v .pc:first-child { transform: rotate(-3deg) translateX(-6%); }
.mock--dois-pc-v .pc:last-child { transform: rotate(2.5deg) translate(8%, -14%); }
.caso img.corte { filter: none; }

/* Kanoa: o site a passar dentro do portátil */
.pc__ecra--roda { position: relative; }
.pc__ecra--roda img { position: absolute; inset: 0; opacity: 0; animation: passa-site 16s infinite; }
.pc__ecra--roda img:nth-child(1) { opacity: 1; animation-delay: 0s; }
.pc__ecra--roda img:nth-child(2) { animation-delay: 4s; }
.pc__ecra--roda img:nth-child(3) { animation-delay: 8s; }
.pc__ecra--roda img:nth-child(4) { animation-delay: 12s; }
@keyframes passa-site { 0% { opacity: 0; } 4%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pc__ecra--roda img { animation: none; } .pc__ecra--roda img:not(:first-child) { display: none; } }
.pc__ecra--roda { background: #0e1a22; }
.projeto-campo { display: grid; gap: .6rem; margin-top: 1.75rem; max-width: 38rem; font: 700 1.0625rem var(--f-texto); color: var(--azul); }
.projeto-campo span { font-weight: 400; color: var(--clara-2); }
.projeto-campo textarea { width: 100%; padding: .9rem 1rem; border: 2px solid var(--linha-clara); border-radius: .85rem; font: 400 1rem/1.5 var(--f-texto); color: var(--azul); background: var(--branco); resize: vertical; }
.projeto-campo textarea:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; border-color: var(--rosa); }
.projeto-campo b { font-weight: 700; } .projeto-campo b span { font-weight: 400; color: var(--clara-2); }

/* v6: mosaicos iguais, como na referência; logótipo sem borda */
.combos { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
@media (min-width: 40rem) { .combos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .combos { grid-template-columns: repeat(3, 1fr); } }
.combo { position: relative; overflow: hidden; border-radius: .25rem; background: var(--fundo); aspect-ratio: 4 / 5.1; color: var(--azul); }
.combo__logo { position: absolute; top: 7%; left: 50%; translate: -50% 0; height: 15%; width: auto; max-width: 62%; object-fit: contain; z-index: 3; }
.combo__logo--mult { mix-blend-mode: multiply; }
.combo__logo--mj { height: 8%; top: 8%; }
.combo__palco { position: absolute; inset: 0; }
.cp { position: absolute; display: block; filter: drop-shadow(0 1.2rem 1.4rem rgb(15 27 76 / .25)); transition: transform .8s var(--ease); }
img.cp { height: auto; border-radius: .5rem; }
.combo:hover .cp { transform: translateY(-.5rem) scale(1.03); }
.combo__veu { position: absolute; inset: 0; z-index: 4; display: grid; align-content: end; gap: .25rem; padding: 1.5rem; background: rgb(10 18 56 / .72); color: var(--creme); opacity: 0; transition: opacity .4s var(--ease); }
.combo__veu strong { font: 600 1.125rem/1.2 var(--f-texto); }
.combo__veu span { font-size: .875rem; opacity: .85; line-height: 1.4; }
.combo:hover .combo__veu, .combo:focus-within .combo__veu { opacity: 1; }
@media (hover: none) { .combo__veu { opacity: 1; background: linear-gradient(to top, rgb(10 18 56 / .85), transparent 40%); padding: 1rem; } .combo__veu strong { font-size: .95rem; } .combo__veu span { display: none; } }
/* Kanoa */
.combo--kanoa .cp--pc { width: 88%; left: 6%; top: 27%; z-index: 1; }
.combo--kanoa .cp--folheto { left: 3%; bottom: -3%; height: 44%; width: auto; rotate: -5deg; z-index: 2; }
.combo--kanoa .cp--tel { right: 5%; bottom: -3%; height: 50%; width: auto; aspect-ratio: 9 / 19; rotate: 4deg; z-index: 3; }
/* Ministério das Pescas */
.combo--pescas .cp--a { left: 5%; bottom: -2%; height: 52%; width: auto; rotate: -4deg; }
.combo--pescas .cp--b { left: 31%; bottom: -4%; height: 66%; width: auto; rotate: 2deg; z-index: 2; }
.combo--pescas .cp--c { right: 4%; top: 30%; width: 50%; rotate: 3deg; z-index: 3; }
/* Sol de Luanda */
.combo--sol .cp--logo { left: 50%; top: 50%; translate: -50% -50%; width: 112%; max-width: none; height: auto; clip-path: circle(35.6%); filter: none; border-radius: 0; }
.combo--sol:hover .cp { transform: scale(1.04); }
/* MJ */
.combo--ident .cp--kit { left: 50%; top: 52%; translate: -50% -50%; width: 94%; border-radius: 0; filter: none; }
.combo--site .cp--pc { width: 90%; left: 5%; top: 30%; }
.combo--site .cp--tel { left: 38%; bottom: -3%; height: 46%; width: auto; aspect-ratio: 9 / 19; rotate: 3deg; z-index: 3; }
.combo .tel { min-width: 0; }

/* v7: informação sempre visível; mosaicos com legenda */
.combo { aspect-ratio: 4 / 5.6; }
.combo__palco { inset: 0 0 5.75rem 0; }
.combo__logo { top: 5%; height: 13%; }
.combo__logo--mj { height: 7%; top: 6%; }
.combo__veu { display: none; }
.combo__texto { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; z-index: 4; display: grid; gap: .2rem; }
.combo__texto strong { font: 600 1.0625rem/1.2 var(--f-texto); color: var(--azul); }
.combo__texto span { font-size: .875rem; line-height: 1.4; color: var(--azul); opacity: .8; }
.combo--kanoa .cp--pc { width: 86%; left: 5%; top: 25%; }
.combo--kanoa .cp--tel { right: 4%; bottom: -2%; height: 58%; z-index: 3; }
.combo--pescas .cp--a { left: 4%; bottom: 2%; height: 50%; }
.combo--pescas .cp--b { left: 28%; bottom: -2%; height: 64%; }
.combo--pescas .cp--c { right: 3%; top: 26%; width: 48%; }
/* v8: Kanoa com cartão; Pescas só agendas e sacos; Sol de Luanda com identidade; Legend's */
.combo--kanoa .cp--pc { width: 84%; left: 4%; top: 24%; }
.combo--kanoa .cp--cartao { left: 3%; bottom: 3%; width: 56%; rotate: -4deg; z-index: 2; }
.combo--kanoa .cp--tel { right: 4%; bottom: -3%; height: 56%; z-index: 3; }
.combo--pescas .cp--a { left: 6%; bottom: 3%; height: 56%; width: auto; rotate: -4deg; }
.combo--pescas .cp--b { left: 34%; top: 20%; height: 78%; width: auto; rotate: 2deg; z-index: 2; }
.badge { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; }
.badge img { position: absolute; left: 50%; top: 50%; width: 140%; max-width: none; translate: -50% -50%; }
.ident { position: absolute; inset: 7% 5% 0 5%; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto 1fr; gap: .75rem; align-content: start; }
.ident__a, .ident__b, .ident__c { display: grid; place-items: center; border-radius: .6rem; padding: .9rem; }
.ident__a { grid-row: 1 / 3; background: #F8BF06; }
.ident__b { background: #151408; }
.ident__c { background: #FFFFFF; }
.ident__a .badge { width: 88%; }
.ident__b .badge, .ident__c .badge { width: 78%; }
.ident__paleta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.ident__paleta i { display: grid; align-items: end; aspect-ratio: 1 / 1.1; border-radius: .5rem; padding: .4rem; border: 1px solid rgb(21 20 8 / .12); }
.ident__paleta b { font: 600 .68rem/1 var(--f-texto); letter-spacing: .02em; color: #151408; }
.ident__paleta i:nth-child(3) b { color: #fff; }
.combo--legends .cp--logo { left: 3%; top: 8%; width: 40%; height: auto; border-radius: 0; filter: none; }
.combo--legends .cp--cartao { right: 3%; top: 8%; width: 58%; rotate: 2deg; border-radius: .9rem; }
@media (min-width: 64rem) { .combo--legends { grid-column: 1 / -1; aspect-ratio: auto; min-height: 30rem; } .combo--legends .cp--logo { width: 28%; left: 5%; top: 6%; } .combo--legends .cp--cartao { width: 55%; right: 5%; top: 8%; } }
@media (max-width: 63.99rem) { .combo--legends .cp--logo { width: 52%; left: 24%; top: 3%; } .combo--legends .cp--cartao { width: 90%; right: 5%; top: auto; bottom: 4%; } }
.combo__palco { inset: 0 0 6.5rem 0; overflow: hidden; }
.ident { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); inset: 3% 5% 0 5%; gap: .6rem; }
.ident > * { min-width: 0; }
.ident__a, .ident__b, .ident__c { padding: .6rem; }
.ident__paleta i { aspect-ratio: 1 / .75; }
.ident__paleta { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Logótipo: M claro sobre azul; versão a cores só sobre creme */
.topo__home img { height: 2.6rem; width: auto; }
.topo__home .logo-cor { display: none; }
.topo.rolou .topo__home .logo-cor { display: block; }
.topo.rolou .topo__home .logo-claro { display: none; }

/* Contraste: texto sobre azul sempre claro */
.rodape__chamada h2, .rodape__chamada h2 .palavra, .rodape__chamada h2 .palavra__i { color: var(--creme); }
.rodape__chamada h2 em, .rodape__chamada h2 em .palavra__i { color: var(--rosa); }
.whats { background: #128C4A; box-shadow: 0 1rem 2rem -.8rem rgb(18 140 74 / .8), 0 .3rem .7rem rgb(0 0 0 / .2); }
.whats__anel { border-color: #128C4A; }

/* Fundos escuros: títulos e textos sempre claros, destaque a rosa */
:is(.chamada, .contacto, .rodape, .topo-pagina, .servicos) :is(h1, h2, h3, .titulo-seccao, .palavra__i) { color: var(--creme); }
:is(.chamada, .contacto, .rodape, .topo-pagina, .servicos) :is(em, em .palavra__i) { color: var(--rosa); }
:is(.chamada, .contacto, .topo-pagina) :is(p, .intro) { color: #D4D9EC; }
.topo .botao--creme { color: var(--azul); }
html { scroll-padding-top: 0; scroll-behavior: auto; }
.ident__b { background: #D59E26; }
.ident__paleta { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* v9: Pescas como uma secretária; Legend's só com o flyer */
.combo--pescas { background: linear-gradient(#ECE6DD 0 58%, #DCCBAF 58% 100%); }
.combo--pescas .combo__palco { overflow: visible; }
.pescas-agenda { left: 4%; bottom: 14%; width: 56%; height: auto; rotate: -8deg; border-radius: 0; filter: drop-shadow(0 .8rem .8rem rgb(40 30 10 / .35)); z-index: 1; }
.pescas-saco { right: 6%; bottom: 20%; height: 66%; width: auto; border-radius: 0; filter: drop-shadow(0 1rem 1rem rgb(40 30 10 / .3)); z-index: 2; }
.pescas-caneta { left: 18%; bottom: 36%; width: 40%; height: auto; rotate: -24deg; z-index: 3; filter: drop-shadow(0 .3rem .3rem rgb(0 0 0 / .35)); border-radius: 0; }
.sombra { position: absolute; border-radius: 50%; background: rgb(60 40 10 / .22); filter: blur(10px); z-index: 0; }
.sombra--saco { right: 7%; bottom: 17%; width: 36%; height: 5%; }
.sombra--agenda { left: 6%; bottom: 11%; width: 54%; height: 5%; }
.combo--pescas:hover .cp { transform: none; }
.combo--legends .cp--flyer { inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: none; border-radius: 0; }
@media (min-width: 64rem) { .combo--legends .combo__palco { inset: 0 0 5rem 0; } }
.combo--pescas img.pescas-saco { height: 64%; width: auto; }
.combo--pescas img.pescas-agenda { width: 54%; height: auto; }
.combo--pescas .combo__palco { inset: 0 0 5.75rem 0; }

/* Texto de apoio firme, sem aspeto apagado */
.passo p, .momento__texto, .combo__texto span, .clientes .intro, .kanoa .intro, .sobre-curto { color: #26346A; opacity: 1; }
.cta-faixa--escura p { color: var(--azul); opacity: 1; font-weight: 700; }

/* Instagram: mais CTAs */
.ico { width: 1.25rem; height: 1.25rem; flex: none; }
.botao--ig { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .75rem 1.4rem; border: 2px solid currentColor; border-radius: 999px; background: transparent; font: 700 1rem var(--f-texto); text-decoration: none; color: inherit; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .3s var(--ease); }
.botao--ig:hover { background: var(--rosa); border-color: var(--rosa); color: #fff; transform: translateY(-2px); }
.botoes { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.rodape .botao--ig, .chamada .botao--ig, .contacto .botao--ig { color: var(--creme); }
.redes-cta { margin-top: clamp(2rem, 5vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding: 1.5rem clamp(1.25rem, 3vw, 2rem); border-radius: 1rem; background: var(--azul); }
.redes-cta p { font: 600 clamp(1.125rem, 2.4vw, 1.5rem)/1.3 var(--f-titulo); color: var(--creme); max-width: 24rem; }
.redes-cta p em { font: italic 500 1.1em/1 var(--f-frase); color: var(--rosa); }
.topo__ig { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 2.6rem; height: 2.6rem; border: 2px solid currentColor; border-radius: 50%; color: var(--creme); transition: background .3s, border-color .3s, color .3s; }
.topo__ig:hover { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.topo__ig-t { display: none; }
@media (max-width: 51.99rem) { .topo__ig { width: auto; height: auto; border: 0; border-radius: 0; justify-content: flex-start; padding: 1rem 0; border-bottom: 1px solid rgb(255 247 234 / .15); } .topo__ig-t { display: inline; font-weight: 700; } .topo__ig:hover { background: none; color: var(--rosa); } }
@media (min-width: 52rem) { .topo__nav { align-items: center; gap: 1.5rem; } }
.redes-cta .botao--ig { color: var(--creme); }

/* Autorização de emails e subscrição de novidades */
.consentimento { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; font-size: .9375rem; line-height: 1.45; }
.consentimento input { width: 1.4rem; height: 1.4rem; flex: none; margin-top: .1rem; accent-color: var(--rosa); cursor: pointer; }
.consentimento a { text-decoration: underline; }
.contacto .consentimento { color: var(--creme); margin-top: .5rem; }
.rodape__novidades { max-width: 76rem; margin: 0 auto clamp(2rem, 5vw, 3rem); padding-bottom: clamp(2rem, 5vw, 3rem); border-bottom: 1px solid var(--linha); }
.subscrever { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .subscrever { grid-template-columns: 1fr 1.4fr; align-items: center; gap: 1rem 3rem; } .subscrever .consentimento, .subscrever .estado { grid-column: 2; } }
.subscrever h3 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); color: var(--creme); }
.subscrever p { color: #D4D9EC; margin-top: .35rem; }
.subscrever__campos { display: flex; flex-wrap: wrap; gap: .75rem; }
.subscrever__email { flex: 1 1 14rem; }
.subscrever__email input { width: 100%; min-height: 3rem; padding: .75rem 1.1rem; border: 2px solid rgb(255 247 234 / .35); border-radius: 999px; background: rgb(255 247 234 / .08); color: var(--creme); font: 400 1rem var(--f-texto); }
.subscrever__email input::placeholder { color: #B9C0DC; }
.subscrever__email input:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.rodape .consentimento { color: var(--creme); }
.subscrever .estado { min-height: 1.2rem; color: var(--creme); font-size: .9375rem; }
.subscrever .estado.erro { color: #FFB3D0; }
.texto-legal { padding: clamp(3rem, 8vw, 6rem) var(--lado); background: var(--branco); }
.texto-legal .miolo { max-width: 44rem; }
.texto-legal h2 { font-size: clamp(1.25rem, 2.6vw, 1.625rem); margin: 2rem 0 .6rem; color: var(--azul); }
.texto-legal p { line-height: 1.65; color: #26346A; }
.texto-legal a { color: var(--rosa); text-decoration: underline; }
.rodape__fim a { text-decoration: underline; }
.logo--limpo img { filter: none; }

/* Sol de Luanda: só formas redondas */
.ident--redondo { position: absolute; inset: 6% 8% 0; display: grid; grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 1.25rem; }
.ident--redondo .badge--grande { width: min(68%, 14rem); box-shadow: 0 .8rem 1.4rem -.6rem rgb(120 80 0 / .35); }
.ident--redondo .badge--grande img { width: 140%; }
.pontos { display: flex; gap: 1.1rem; justify-content: center; }
.ponto { display: grid; justify-items: center; gap: .4rem; }
.ponto i { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgb(21 20 8 / .15); }
.ponto b { font: 600 .68rem/1 var(--f-texto); color: #26346A; letter-spacing: .02em; }

/* Galerias por produto, com setas */
.galeria--grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.5rem; }
.carro { margin: 0; }
.carro__vista { position: relative; border-radius: .75rem; overflow: hidden; background: var(--gelo); aspect-ratio: 1; }
.carro__abrir { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.carro__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s var(--ease); }
.carro__img.ativa { opacity: 1; }
.carro__seta { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgb(15 27 76 / .82); color: var(--creme); font: 400 1.75rem/1 var(--f-texto); display: grid; place-items: center; cursor: pointer; transition: background .3s, transform .3s var(--ease); }
.carro__seta:hover { background: var(--rosa); color: #fff; }
.carro__seta--ant { left: .75rem; }
.carro__seta--seg { right: .75rem; }
.carro figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .75rem; }
.carro__titulo { font: 600 1.125rem/1.2 var(--f-texto); color: var(--azul); }
.carro__conta { font-size: .875rem; color: #26346A; }

/* Caso real: Kanoa do Kwanza */
.caso-real { margin-top: 2rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52rem) { .caso-real { grid-template-columns: 1fr 1.3fr; gap: 4rem; } }
.caso-real__num { font: 700 clamp(3rem, 9vw, 6rem)/1 var(--f-titulo); letter-spacing: -.04em; color: var(--azul); }
.caso-real__num span { font: 600 clamp(1.25rem, 3vw, 2rem)/1 var(--f-titulo); color: var(--rosa); letter-spacing: -.02em; margin-left: .35rem; }
.caso-real__frase { margin-top: 1rem; font-size: clamp(1.125rem, 2.2vw, 1.4rem); line-height: 1.5; color: var(--azul); max-width: 32rem; }
.caso-real__mais { margin-top: 1rem; font-size: 1rem; line-height: 1.55; color: #26346A; max-width: 30rem; }
.caso-real__telas { display: flex; gap: 1.25rem; justify-content: center; align-items: flex-start; }
.caso-real__telas figure { margin: 0; text-align: center; }
.caso-real__telas figcaption { margin-top: .75rem; font-weight: 600; font-size: .9375rem; color: var(--azul); }
.caso-real__telas figure:last-child { margin-top: 2rem; }
.tel--grande { width: clamp(9.5rem, 22vw, 14rem); }
.tel--grande .tel__ecra video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tel--grande .tel__ecra { aspect-ratio: 9 / 19.2; }
.carro__vista { aspect-ratio: 4 / 3; }
.carro__img { object-fit: cover; object-position: center 40%; }
.carro--contem .carro__vista { aspect-ratio: 1; }
.carro--contem .carro__img { object-fit: contain; object-position: center; }
.caso-real__num { font-size: clamp(2.5rem, 7vw, 4.25rem); white-space: nowrap; } .caso-real__num span { font-size: clamp(1.1rem, 2.4vw, 1.6rem); }

/* Fotos inteiras, sem cortes */
.carro__vista { aspect-ratio: 4 / 3; background: var(--gelo); }
.carro__img, .carro--contem .carro__img { object-fit: contain; object-position: center; }
.caso-real__etiqueta { font: 700 .8125rem/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--rosa); margin-top: 1.5rem; }
.processo__caso { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.processo__caso .caso-real { margin-top: 1rem; }
.carro .carro__abrir .carro__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; }

/* Hero da página inicial: frase com fundo rosa e letra escura */
.hero__titulo-a { justify-self: center; width: fit-content; max-width: 100%; background: var(--rosa); color: var(--azul); padding: .04em .22em .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Rodapé só com as opções da MJ Creative */
@media (min-width: 52rem) { .rodape__grelha { grid-template-columns: 1.4fr 1fr; } }

/* Heróis das páginas de serviço: objetos interativos */
.hero-obj { position: relative; width: min(100%, 30rem); aspect-ratio: 1; margin-inline: auto; cursor: pointer; perspective: 900px; }
.hero-obj__halo { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgb(255 61 139 / .38), rgb(255 61 139 / .08) 55%, transparent 72%); filter: blur(6px); animation: halo-respira 5s ease-in-out infinite alternate; }
@keyframes halo-respira { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
.hero-obj__palco { position: absolute; inset: 0; transform-style: preserve-3d; transform: translate(var(--tx, 0), var(--ty, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease); }
.hero-obj__img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; opacity: 0; transform: translateY(2.5rem) rotate(-9deg) scale(.82); transition: opacity .7s var(--ease), transform .9s cubic-bezier(.2, 1.5, .35, 1); filter: drop-shadow(0 1.6rem 1.6rem rgb(0 0 0 / .45)); pointer-events: none; }
.hero-obj__img.ativo { opacity: 1; transform: none; animation: obj-flutua 6s ease-in-out .9s infinite alternate; }
.hero-obj__img.saindo { opacity: 0; transform: translateY(-2.5rem) rotate(9deg) scale(.82); }
@keyframes obj-flutua { from { translate: 0 -.6rem; rotate: -1.5deg; } to { translate: 0 .8rem; rotate: 1.8deg; } }
.hero-obj__pontos { position: absolute; left: 0; right: 0; bottom: -.25rem; display: flex; gap: .6rem; justify-content: center; }
.hero-obj__ponto { width: .7rem; height: .7rem; padding: 0; border-radius: 50%; border: 0; background: rgb(255 247 234 / .35); cursor: pointer; transition: background .3s, transform .3s var(--ease), width .3s var(--ease); }
.hero-obj__ponto.ativo { background: var(--rosa); width: 1.6rem; border-radius: .4rem; }
@media (prefers-reduced-motion: reduce) { .hero-obj__halo, .hero-obj__img.ativo { animation: none; } .hero-obj__img { transition: opacity .3s; transform: none; } .hero-obj__img.saindo { transform: none; } }
.hero-obj { width: min(100%, 34rem); aspect-ratio: 1 / 1.08; min-width: 16rem; }
.hero-obj__img { inset: 3%; width: 94%; height: 94%; }
.hero-obj__halo { inset: 10% 6%; }