/* ===========================================================
   Ana Paula Lellis Werneck
   Folha de estilo principal
   =========================================================== */

:root {
  /* Marca */
  --turquesa: #6DC7DA;
  --turquesa-claro: #A7DEE8;
  --nevoa: #EAF6F9;
  --gelo: #F3FAFC;
  --petroleo: #1E6E80;
  --petroleo-escuro: #175462;
  --noite: #103C48;
  --noite-2: #0C2F39;

  /* Neutros */
  --branco: #FFFFFF;
  --papel: #FBFDFE;
  --tinta: #17333B;
  --texto: #56686E;
  --texto-suave: #7E8E94;
  --linha: #E1EEF2;
  --linha-forte: #CDE3E9;

  /* Acento quente */
  --pessego: #F5D6BE;
  --pessego-nevoa: #FCEFE3;

  /* Tipografia */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --script: "Caveat", "Fraunces", cursive;

  /* Layout */
  --wrap: 1400px;
  --pad: clamp(1.25rem, 3.2vw, 2.75rem);
  --raio: 20px;
  --raio-g: 30px;
  --cabecalho-h: 84px;

  --sombra: 0 18px 50px -32px rgba(16, 60, 72, .35);
  --sombra-alta: 0 30px 70px -40px rgba(16, 60, 72, .5);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 720px) {
  :root { --cabecalho-h: 70px; --raio: 18px; --raio-g: 24px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

html.trava, html.trava body { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--tinta); letter-spacing: -.015em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--turquesa-claro); color: var(--noite); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--petroleo); color: #fff; padding: .8rem 1.2rem; z-index: 999;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--petroleo);
  outline-offset: 3px;
  border-radius: 6px;
}

/* -----------------------------------------------------------
   Tipografia de seção
   ----------------------------------------------------------- */
.rotulo {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--turquesa);
  margin: 0 0 1rem;
}
.rotulo--claro { color: var(--turquesa-claro); }

.secao-titulo {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.16;
  font-variation-settings: "SOFT" 40, "opsz" 100;
}

.secao-topo { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.secao-topo--centro {
  text-align: center;
  max-width: 880px;
  margin-inline: auto;
}
.secao-topo--centro .secao-titulo { margin-inline: auto; }

.secao-texto {
  font-size: 1rem;
  line-height: 1.72;
  max-width: 46rem;
  margin: 1.35rem auto 0;
}

.manuscrito {
  font-family: var(--script);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.4;
  color: var(--petroleo);
  letter-spacing: .01em;
}

/* -----------------------------------------------------------
   Botões
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
}
.btn--grande { padding: 1.02rem 1.9rem; font-size: 1rem; }

.btn--primario {
  background: var(--petroleo);
  color: #fff;
  box-shadow: 0 14px 32px -18px rgba(30, 110, 128, .9);
}
.btn--primario:hover {
  background: var(--petroleo-escuro);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -18px rgba(30, 110, 128, .95);
}

.btn--linha {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--petroleo);
  border-color: var(--linha-forte);
}
.btn--linha:hover {
  background: #fff;
  border-color: var(--turquesa);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -24px rgba(16, 60, 72, .7);
}

.btn--claro {
  background: #fff;
  color: var(--petroleo);
  box-shadow: 0 16px 36px -22px rgba(0, 0, 0, .6);
}
.btn--claro:hover { transform: translateY(-2px); background: var(--nevoa); }

.ic-zap { flex: none; }

/* -----------------------------------------------------------
   Cabeçalho
   ----------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--cabecalho-h);
  display: flex;
  align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              backdrop-filter .4s var(--ease), height .4s var(--ease);
}
.cabecalho.solido {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 rgba(205, 227, 233, .9), 0 10px 30px -26px rgba(16, 60, 72, .5);
}

.cabecalho-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marca { display: inline-flex; flex: none; }
.marca img {
  width: clamp(124px, 12vw, 152px);
  height: auto;
}

.nav {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  margin-left: auto;
}
.nav a {
  position: relative;
  font-size: .93rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  padding: .3rem 0;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--turquesa);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: var(--petroleo); }
.nav a:hover::after, .nav a.ativo::after { transform: scaleX(1); transform-origin: left; }
.nav a.ativo { color: var(--petroleo); }

.cabecalho-acoes { display: flex; align-items: center; gap: .75rem; margin-left: clamp(1rem, 3vw, 2.5rem); }
.btn--cabecalho { padding: .72rem 1.35rem; font-size: .9rem; }

.menu-botao {
  display: none;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.menu-botao span {
  position: absolute;
  left: 50%; width: 24px; height: 2px;
  background: var(--petroleo);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.menu-botao span:nth-child(1) { top: 14px; }
.menu-botao span:nth-child(2) { top: 21px; }
.menu-botao span:nth-child(3) { top: 28px; }
.menu-botao[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav { display: none; }
  .btn--cabecalho { display: none; }
  .menu-botao { display: block; }
  .cabecalho-acoes { margin-left: auto; }
}

/* Menu mobile */
.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 99;
  visibility: hidden;
  pointer-events: none;
}
.menu-movel.aberto { visibility: visible; pointer-events: auto; }
.menu-fundo {
  position: absolute; inset: 0;
  background: rgba(16, 60, 72, .35);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.menu-movel.aberto .menu-fundo { opacity: 1; }
.menu-painel {
  position: absolute;
  top: 0; right: 0;
  width: min(400px, 88vw);
  height: 100%;
  background: var(--branco);
  padding: calc(var(--cabecalho-h) + 1.5rem) clamp(1.5rem, 6vw, 2.5rem) 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: transform .55s var(--ease);
  overflow-y: auto;
}
.menu-movel.aberto .menu-painel { transform: translateX(0); }

/* em telas estreitas o painel ocupa tudo, senão o logo do header fica metade
   sobre o painel e metade sobre o fundo escurecido */
@media (max-width: 620px) {
  .menu-painel { width: 100%; }
}
.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links li { border-bottom: 1px solid var(--linha); }
.menu-links a {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--tinta);
  text-decoration: none;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.menu-links a:hover { color: var(--petroleo); padding-left: .4rem; }
.menu-rodape { padding-top: 2rem; }
.menu-rodape .btn { width: 100%; justify-content: center; }
.menu-endereco { margin-top: .75rem; font-size: .88rem; color: var(--texto-suave); }

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */
.hero {
  position: relative;
  /* acompanha a altura da tela: o banner cabe quase inteiro em qualquer monitor */
  min-height: clamp(600px, 92vh, 1000px);
  display: flex;
  align-items: center;
  padding: calc(var(--cabecalho-h) + 3rem) 0 5rem;
  overflow: hidden;
  isolation: isolate;
}

.hero-fundo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-fundo picture { display: block; width: 100%; height: 100%; }
.hero-fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* -----------------------------------------------------------
   Banner contínuo: a foto dissolve na cor do site

   A foto dela é retrato (901x1100) e o herói é panorâmico. Esticar
   distorceria e borraria. Em vez disso, a foto nítida ocupa um painel
   à direita e a borda esquerda dela dissolve por máscara direto na cor
   do site, que ocupa o lado do texto. Nada de imagem de fundo.

   Largura do painel escolhida para a proporção bater com a da foto:
   46% de 1440 = 662px sobre 800 de altura = 0,828, contra 0,819 da
   foto. Corte de 1%, ela cabe inteira. E como o painel é menor que a
   tela, a foto é REDUZIDA e não ampliada: fica mais nítida do que
   ficaria num banner de largura total.

   A especificidade .hero-fundo img.hero-retrato é necessária: só
   .hero-retrato perderia para .hero-fundo img acima, em silêncio.
   ----------------------------------------------------------- */
.hero-fundo img.hero-retrato {
  position: absolute;
  top: 0; right: 0;
  width: 46%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 28%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}
.hero-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(247, 252, 253, .99) 0%,
      rgba(247, 252, 253, .975) 34%,
      rgba(247, 252, 253, .90) 46%,
      rgba(247, 252, 253, .55) 57%,
      rgba(247, 252, 253, .12) 68%,
      rgba(247, 252, 253, 0) 78%),
    linear-gradient(to bottom, rgba(247, 252, 253, .45) 0%, rgba(247, 252, 253, 0) 18%),
    linear-gradient(to top, rgba(251, 253, 254, .95) 0%, rgba(251, 253, 254, 0) 26%);
}

.hero-onda {
  position: absolute;
  left: -6%; top: -8%;
  width: min(560px, 48vw);
  color: var(--turquesa);
  opacity: .32;
  z-index: -1;
  pointer-events: none;
}
.hero-onda svg { width: 100%; height: auto; }

.hero-grade { position: relative; }

.hero-texto { max-width: 620px; }

.hero-titulo {
  font-size: clamp(2.35rem, 5.1vw, 4rem);
  line-height: 1.08;
  font-weight: 300;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  margin-bottom: 1.5rem;
}
.hero-titulo .linha { display: block; }
.hero-titulo em {
  font-style: italic;
  font-weight: 400;
  color: var(--petroleo);
}

.hero-titulo__kw {
  display: block;
  margin-top: .85rem;
  font-family: var(--sans);
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--petroleo);
  max-width: 34rem;
}

.hero-sub {
  font-size: clamp(.98rem, 1.2vw, 1.05rem);
  line-height: 1.68;
  max-width: 28rem;
  color: var(--texto);
  margin-bottom: .95rem;
}
.hero-sub:last-of-type { margin-bottom: 2.1rem; }

.hero-acoes { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.75rem; }

.hero-selos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0; padding: 0;
}
.hero-selos li { display: flex; align-items: center; gap: .7rem; }
.hero-selos span:last-child {
  display: flex; flex-direction: column;
  font-size: .84rem; line-height: 1.35; color: var(--texto-suave);
}
.hero-selos strong {
  font-size: .95rem; font-weight: 600; color: var(--tinta);
}
.selo-ic {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--linha);
  color: var(--petroleo);
  box-shadow: 0 8px 18px -14px rgba(16, 60, 72, .6);
}
.selo-ic svg { width: 20px; height: 20px; }

/* Notebooks de tela baixa: menos respiro vertical para o conteúdo caber */
@media (min-width: 901px) and (max-height: 800px) {
  .hero {
    padding-top: calc(var(--cabecalho-h) + 1.5rem);
    padding-bottom: 3rem;
  }
}

/* Tablet: o herói continua lado a lado, só reequilibrado. O herói fica menos
   alto para o painel não virar uma tira vertical estreita: a proporção ideal
   do painel é alturaDoHeroi x 0,819, então herói mais baixo pede painel mais
   estreito e sobra mais espaço para o texto. A foto segue encostada à direita. */
@media (min-width: 701px) and (max-width: 1100px) {
  .hero { min-height: clamp(560px, 74vh, 820px); }
  .hero-texto { max-width: 56%; }
  .hero-fundo img.hero-retrato { width: 58%; object-position: 30% 26%; }
  .hero-onda { width: min(320px, 34vw); opacity: .22; }
}

/* Mobile: banner vertical dedicado, texto sobreposto na área limpa do topo.
   O corte é 700px e não 900px de propósito: em tela de tablet (768, 820) ainda
   cabe o herói lado a lado, e empilhar ali cedo demais jogava a foto para o
   centro, deixando sobra à direita. */
@media (max-width: 700px) {
  /* banner vertical único: texto na parede limpa do topo, ela embaixo sem nada por cima.

     A altura aqui não é estética, é o que mantém a faixa de selos fora do rosto.
     O topo do cabelo dela está na fração 0,559 da altura do banner, e o cover é
     limitado pela altura (a sobra vertical é zero), então object-position não
     desloca nada: quem controla a posição da cabeça é a altura do herói.
     Com o banner contínuo isso mudou: quem posiciona ela é o CSS, não uma
     fração da imagem, então a altura pôde voltar de 1390px para 1160px. A
     foto fica ancorada embaixo e o topo dela dissolve na cor do site, bem
     depois da faixa de selos. Se o texto do herói crescer muito, conferir
     de novo a folga entre a base da faixa e o topo da foto. */
  .hero {
    min-height: max(1240px, 100svh);
    align-items: flex-start;
    padding: calc(var(--cabecalho-h) + 2.25rem) 0 0;
  }
  /* No mobile o campo borrado sai. Em cima fica a cor do site, que desce e
     dissolve dentro da foto: o mesmo princípio do desktop, na vertical. Como
     o fundo é o do próprio site, o banner acompanha claro e escuro sozinho.
     A dissolução é mais longa que a do desktop porque aqui a foto encosta em
     cor chapada, e não em outra imagem: passagem curta viraria borda. */

  /* A altura manda, a largura segue. Antes isto era width:132%, que funciona
     em 375px mas em 768px vira 994px de largura e 1213px de altura: mais alta
     que o herói inteiro, cobrindo o texto. Dimensionando pela altura, a foto
     ocupa sempre a mesma fatia do banner em qualquer tela. */
  .hero-fundo img.hero-retrato {
    top: auto; right: auto;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: auto;
    max-width: none;          /* senão o img { max-width: 100% } trava */
    height: 48%;
    object-fit: contain;
    /* Duas máscaras cruzadas: uma dissolve o topo na cor do site, a outra
       dissolve as laterais no campo borrado. Em tablet a foto é mais estreita
       que a tela, e sem a segunda sobrava uma borda vertical dura de cada
       lado. O composite precisa ser interseção; o padrão soma as máscaras e
       anularia o degradê do topo. */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 16%, #000 34%),
      linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 16%, #000 34%),
      linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%);
    mask-composite: intersect;
  }
  .hero-veu {
    background:
      linear-gradient(to bottom,
        rgba(247, 252, 253, .9) 0%,
        rgba(247, 252, 253, .82) 22%,
        rgba(247, 252, 253, .46) 36%,
        rgba(247, 252, 253, .1) 48%,
        rgba(247, 252, 253, 0) 60%);
  }
  .hero-onda { display: none; }
  .hero-texto { max-width: none; }

  .hero .rotulo { font-size: .68rem; letter-spacing: .16em; margin-bottom: .85rem; }
  .hero-titulo { font-size: 2.05rem; line-height: 1.12; margin-bottom: 1rem; }
  .hero-titulo__kw { font-size: .97rem; margin-top: .7rem; max-width: none; }
  .hero-sub {
    font-size: .94rem;
    line-height: 1.6;
    max-width: none;
    margin-bottom: .7rem;
  }
  .hero-sub:last-of-type { margin-bottom: 1.5rem; }

  .hero-acoes {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.6rem;
  }
  .hero-acoes .btn {
    width: auto;
    padding: .82rem 1.5rem;
    font-size: .93rem;
  }

  /* selos em linha única com divisórias, sobre placa translúcida para garantir contraste */
  .hero-selos {
    flex-wrap: nowrap;
    gap: 0;
    padding: .7rem .85rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .7);
  }
  .hero-selos li {
    flex: 1 1 0;
    min-width: 0;
    gap: .45rem;
    padding-inline: .45rem;
    border-left: 1px solid var(--linha);
  }
  .hero-selos li:first-child { border-left: 0; padding-left: 0; }
  .selo-ic {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
  }
  .selo-ic svg { width: 16px; height: 16px; }
  .hero-selos strong { font-size: .72rem; line-height: 1.22; }
  .hero-selos span:last-child { font-size: .64rem; line-height: 1.25; }
}

/* -----------------------------------------------------------
   Dores
   ----------------------------------------------------------- */
.dores {
  position: relative;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--gelo) 0%, rgba(243, 250, 252, 0) 70%),
    var(--papel);
}

.dores-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.dores-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.dor {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.6rem 1.4rem;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.dor:hover {
  transform: translateY(-5px);
  border-color: var(--turquesa-claro);
  box-shadow: var(--sombra);
}
.dor p { font-size: .95rem; line-height: 1.62; margin: 0; }
.dor-ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  background: var(--nevoa);
  color: var(--petroleo);
}
.dor-ic svg { width: 26px; height: 26px; }

.dores-nota {
  border-left: 1px solid var(--linha-forte);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: .5rem;
}
.dores-nota .manuscrito { margin-bottom: 1.25rem; display: block; }
.dores-fecho {
  font-size: .95rem;
  color: var(--texto-suave);
  margin: 0;
}

@media (max-width: 980px) {
  .dores-grade { grid-template-columns: 1fr; }
  .dores-lista { grid-template-columns: repeat(2, 1fr); }
  .dores-nota {
    border-left: 0;
    border-top: 1px solid var(--linha-forte);
    padding-left: 0; padding-top: 1.5rem;
    text-align: center;
  }
}
@media (max-width: 620px) {
  .dores-lista { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   Serviços
   ----------------------------------------------------------- */
.servicos {
  position: relative;
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(5rem, 9vw, 7.5rem);
  background:
    linear-gradient(180deg, var(--gelo) 0%, rgba(243, 250, 252, .35) 60%, var(--papel) 100%);
  overflow: hidden;
}

.grafismo {
  position: absolute;
  color: var(--turquesa);
  opacity: .28;
  pointer-events: none;
  z-index: 0;
}
.grafismo svg { width: 100%; height: auto; }
.grafismo--servicos { right: -8%; top: 4%; width: min(360px, 34vw); }

.servicos .wrap { position: relative; z-index: 1; }

.servicos-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.servico {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 2rem 1.6rem 2.1rem;
  box-shadow: 0 10px 30px -28px rgba(16, 60, 72, .5);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
  overflow: hidden;
}
.servico::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% -30%;
  height: 130px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(109, 199, 218, .22), transparent 70%);
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.servico:hover {
  transform: translateY(-8px);
  border-color: var(--turquesa-claro);
  box-shadow: var(--sombra-alta);
}
.servico:hover::before { opacity: 1; }

.servico-num {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--texto-suave);
  letter-spacing: .08em;
}
.servico-ic {
  position: absolute;
  top: 1.75rem; right: 1.5rem;
  color: var(--turquesa);
  transition: transform .6s var(--ease), color .5s var(--ease);
}
.servico-ic svg { width: 34px; height: 34px; }
.servico:hover .servico-ic { transform: translateY(-3px) rotate(-4deg); color: var(--petroleo); }

.servico h3 {
  font-size: 1.32rem;
  line-height: 1.24;
  margin: 2.4rem 0 .85rem;
  font-variation-settings: "SOFT" 40, "opsz" 60;
}
.servico p { font-size: .93rem; line-height: 1.65; margin: 0; }

@media (max-width: 1000px) { .servicos-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .servicos-grade { grid-template-columns: 1fr; } }

/* Fases da vida */
.fases { margin-top: clamp(3rem, 6vw, 4.5rem); text-align: center; }
.fases-titulo {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.fases-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.85rem, 1.5vw, 1.25rem);
}
.fases-lista li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--raio);
  padding: 2.4rem 1rem 1.9rem;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  background: var(--petroleo-escuro);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* foto em duotone entra como textura, não como retrato */
.fases-lista li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease);
}
.fases-lista .fase--criancas::before { background-image: url("../fase-criancas.webp?v=4"); }
.fases-lista .fase--adolescentes::before { background-image: url("../fase-adolescentes.webp?v=3"); }
.fases-lista .fase--adultos::before { background-image: url("../fase-adultos.webp?v=4"); }
.fases-lista .fase--idosos::before { background-image: url("../fase-idosos.webp?v=3"); }
.fases-lista li::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(12, 47, 57, .9) 0%, rgba(16, 60, 72, .58) 42%, rgba(30, 110, 128, .2) 100%);
}
.fases-lista li:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}
.fases-lista li:hover::before { transform: scale(1.09); }

/* com foto real, o ícone vira ruído e ainda cai em cima do rosto */
.fases-lista li > span[aria-hidden="true"] { display: none; }
.fases-lista strong { font-size: 1.02rem; font-weight: 600; color: #fff; }
.fases-lista em {
  font-style: normal;
  font-size: .78rem;
  color: rgba(255, 255, 255, .72);
  margin-top: -.3rem;
}

@media (max-width: 700px) { .fases-lista { grid-template-columns: repeat(2, 1fr); } }

/* -----------------------------------------------------------
   Frase
   ----------------------------------------------------------- */
.frase {
  position: relative;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: linear-gradient(150deg, var(--noite) 0%, var(--noite-2) 100%);
  overflow: hidden;
  isolation: isolate;
}
.frase::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  left: -220px; top: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 199, 218, .18), transparent 68%);
  pointer-events: none;
}

.frase-arco {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, 46vw);
  color: rgba(167, 222, 232, .3);
  z-index: -1;
  pointer-events: none;
}
.frase-arco svg { width: 100%; height: auto; }

.frase-grade {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, max-content) minmax(180px, 260px);
  justify-content: center;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.5rem);
}

.frase-marca { display: block; }
.frase-marca img {
  width: clamp(66px, 6.5vw, 96px);
  filter: brightness(0) saturate(100%) invert(88%) sepia(12%) saturate(420%) hue-rotate(150deg) brightness(101%);
  opacity: .85;
}

.frase-citacao {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.7vw, 3.05rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #fff;
  font-variation-settings: "SOFT" 60, "opsz" 144;
}
.frase-linha { display: block; }
.frase-citacao em {
  font-style: italic;
  color: var(--turquesa-claro);
}

.frase-apoio {
  font-size: .93rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid rgba(167, 222, 232, .3);
}

@media (max-width: 1000px) {
  .frase-grade { grid-template-columns: auto minmax(0, 1fr); }
  .frase-apoio {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid rgba(167, 222, 232, .3);
    padding-left: 0;
    padding-top: 1.4rem;
    max-width: 44rem;
  }
}
@media (max-width: 620px) {
  .frase-grade { grid-template-columns: 1fr; gap: 1.5rem; }
  .frase-apoio { padding-top: 1.2rem; }
}

/* -----------------------------------------------------------
   Formação
   ----------------------------------------------------------- */
.formacao {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: linear-gradient(180deg, var(--papel) 0%, var(--gelo) 100%);
}
.formacao-grade {
  display: grid;
  /* Quatro cartões em bloco 2x2, não em fileira de quatro. A largura é
     limitada de propósito: numa tela de 1440px, duas colunas livres dariam
     640px cada e as listas curtas ficariam nadando em espaço vazio. Em
     1180px cada cartão fica com ~577px, que é a proporção que funciona. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
  max-width: 1180px;
  margin-inline: auto;
}
.cartao-cred {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.cartao-cred:hover {
  transform: translateY(-5px);
  border-color: var(--turquesa-claro);
  box-shadow: var(--sombra);
}
.cred-ic {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 15px;
  background: var(--nevoa);
  color: var(--petroleo);
  margin-bottom: 1.1rem;
}
.cred-ic svg { width: 27px; height: 27px; }
.cartao-cred h3 { font-size: 1.24rem; margin-bottom: 1.1rem; }
.cartao-cred ul { list-style: none; margin: 0; padding: 0; }
.cartao-cred li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: .8rem;
}
.cartao-cred li:last-child { margin-bottom: 0; }
.cartao-cred li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--turquesa);
}

.cartao-cred--nota {
  background: var(--nevoa);
  border-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.cred-marca { width: 62px; height: auto; opacity: .85; }
.cartao-cred--nota .manuscrito { margin: 0; }

@media (max-width: 720px) {
  .formacao-grade { grid-template-columns: 1fr; }
  .cartao-cred--nota { padding: 2rem; }
}

/* -----------------------------------------------------------
   Galeria
   ----------------------------------------------------------- */
.espaco {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: var(--gelo);
  overflow: hidden;
}
.espaco-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}

/* A foto é retrato (941x1672). Em cima do cartão ela obrigaria a cortar
   mais da metade, ou deixaria o cartão com mais de 1200px de altura e o
   mapa esticado e vazio ao lado. Ao lado das informações ela cabe inteira,
   sem recorte, que é o certo para uma foto que a cliente escolheu. */
.espaco-cartao {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  box-shadow: var(--sombra);
}
/* a foto abre no lightbox, então é botão, mas não pode parecer botão */
.espaco-foto {
  display: block;
  padding: 0; border: 0; margin: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.espaco-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.espaco-foto:hover img { transform: scale(1.04); }

.espaco-info {
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
}
.espaco-info h3 { font-size: 1.32rem; margin-bottom: 1.25rem; }

.espaco-dados { margin: 0; display: grid; gap: 1.1rem; }
.espaco-dados div { margin: 0; }
.espaco-dados dt {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--turquesa);
  margin-bottom: .35rem;
}
.espaco-dados dd { margin: 0; font-size: .94rem; line-height: 1.6; }
.espaco-dados a {
  color: var(--petroleo);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--linha-forte);
}
.espaco-dados a:hover { border-color: var(--turquesa); }

.espaco-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: auto;
  padding-top: 1.75rem;
}

.espaco-lado { display: grid; grid-template-rows: 1fr auto; gap: clamp(1.25rem, 2vw, 1.5rem); }

@media (max-width: 900px) {
  .espaco-grade { grid-template-columns: 1fr; }
}
/* Faixa medida: entre 901px e 1240px a grade tem duas colunas e o cartão
   também, então a coluna de texto cai para 202-221px e "Agendar conversa"
   quebra em duas linhas, engordando o botão. Abaixo de 900 a grade vira uma
   coluna só, o cartão fica largo e o problema some sozinho. Nessa faixa do
   meio o cartão empilha: a foto sobe e o texto fica com a largura inteira. */
@media (min-width: 901px) and (max-width: 1240px) {
  .espaco-cartao { grid-template-columns: 1fr; }
  .espaco-foto img { aspect-ratio: 4 / 3.2; }
}

/* no celular a foto volta para cima, aí sim recortada, porque lado a lado
   em 375px nenhuma das duas metades sobra legível */
@media (max-width: 560px) {
  .espaco-cartao { grid-template-columns: 1fr; }
  .espaco-foto img { aspect-ratio: 4 / 3.2; }
}

/* -----------------------------------------------------------
   FAQ
   ----------------------------------------------------------- */
.faq {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: var(--papel);
}
.faq-colunas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.8rem, 1.4vw, 1.1rem);
  align-content: start;
}
.faq-item {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 16px;
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
  height: fit-content;
}
.faq-item:hover { border-color: var(--turquesa-claro); box-shadow: var(--sombra); }
.faq-item[open] { border-color: var(--turquesa-claro); box-shadow: var(--sombra); }

.faq-item summary {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  list-style: none;
  font-size: .98rem;
  font-weight: 500;
  color: var(--tinta);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ic { color: var(--turquesa); display: flex; flex: none; }
.faq-ic svg { width: 20px; height: 20px; }
.faq-pergunta { flex: 1; line-height: 1.4; }

.faq-mais {
  position: relative;
  width: 20px; height: 20px;
  flex: none;
}
.faq-mais::before,
.faq-mais::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--petroleo);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.faq-mais::before { width: 13px; height: 1.6px; }
.faq-mais::after { width: 1.6px; height: 13px; }
.faq-item[open] .faq-mais::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-resposta {
  padding: 0 1.35rem 1.35rem 3.55rem;
  font-size: .94rem;
  line-height: 1.68;
  color: var(--texto);
}
.faq-resposta ul { margin: .6rem 0 1rem; padding-left: 1.1rem; }
.faq-resposta li { margin-bottom: .35rem; }

@media (max-width: 860px) {
  .faq-colunas { grid-template-columns: 1fr; }
  .faq-resposta { padding-left: 1.35rem; }
}

/* -----------------------------------------------------------
   Contato
   ----------------------------------------------------------- */
.contato {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  background: linear-gradient(180deg, var(--papel) 0%, var(--gelo) 100%);
}
/* A seção virou uma faixa de chamada só, centralizada. O endereço, o mapa
   e a nota do Google passaram para a seção do espaço. */
.contato-faixa {
  position: relative;
  background: linear-gradient(150deg, var(--petroleo) 0%, var(--noite) 100%);
  color: rgba(255, 255, 255, .82);
  border-radius: var(--raio-g);
  padding: clamp(2rem, 4vw, 3.25rem);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.contato-faixa::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -160px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 199, 218, .3), transparent 68%);
}
.contato-faixa > * { position: relative; }
.contato-faixa { text-align: center; }
.contato-titulo { color: #fff; margin-bottom: 1.1rem; }
.contato-desc { max-width: 34rem; margin: 0 auto 2rem; }
.contato-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
}

.contato-lado { display: grid; grid-template-rows: 1fr auto; gap: clamp(1.25rem, 2vw, 1.5rem); }
.contato-mapa {
  border-radius: var(--raio-g);
  overflow: hidden;
  border: 1px solid var(--linha);
  min-height: 280px;
  box-shadow: var(--sombra);
  background: var(--nevoa);
}
.contato-mapa iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; filter: saturate(.9); }

.google-cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  padding: 1.6rem 1.75rem;
  box-shadow: var(--sombra);
}
.google-topo { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.google-nota { display: flex; align-items: baseline; gap: .55rem; }
.google-nota strong { font-family: var(--serif); font-size: 1.7rem; color: var(--tinta); font-weight: 500; }
.google-estrelas { color: #E6A93C; letter-spacing: .1em; font-size: .95rem; }
.google-cartao p { font-size: .92rem; line-height: 1.6; margin-bottom: 1.1rem; }
.google-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--petroleo); text-decoration: none;
}
.google-link:hover { gap: .7rem; }
.google-link svg { transition: transform .4s var(--ease); }



/* -----------------------------------------------------------
   Rodapé
   ----------------------------------------------------------- */
.rodape {
  position: relative;
  background: linear-gradient(165deg, var(--noite) 0%, var(--noite-2) 100%);
  color: rgba(255, 255, 255, .72);
  padding: clamp(3.25rem, 6vw, 4.75rem) 0 4.5rem;
  overflow: hidden;
}
.rodape::before {
  content: "";
  position: absolute;
  width: 560px; height: 560px;
  left: -200px; bottom: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 199, 218, .16), transparent 70%);
}
.rodape .wrap { position: relative; }

.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.rodape-marca img {
  width: 168px; height: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  margin-bottom: 1.1rem;
}
.rodape-marca p, .rodape-col p { font-size: .87rem; line-height: 1.65; margin: 0 0 .75rem; }
.rodape-papel { color: rgba(255, 255, 255, .85); }
.rodape-desc { max-width: 26rem; }

.rodape-col { display: flex; flex-direction: column; align-items: flex-start; }
.rodape-titulo {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--turquesa-claro);
  margin-bottom: 1rem;
}
.rodape-col a {
  font-size: .87rem;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  padding: .18rem 0;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.rodape-col a:hover { color: #fff; transform: translateX(3px); }

.rodape-manuscrito {
  font-family: var(--script);
  font-size: 1.35rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .9);
  margin: 0;
  align-self: center;
}

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}
.rodape-credito { margin-right: 3.75rem; }
.rodape-credito a { color: rgba(255, 255, 255, .82); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.rodape-credito a:hover { color: #fff; }

@media (max-width: 980px) {
  .rodape-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rodape-grade { grid-template-columns: 1fr; }
  .rodape-base { justify-content: center; text-align: center; }
  .rodape-credito { margin-right: 0; }
}

/* -----------------------------------------------------------
   WhatsApp flutuante e lightbox
   ----------------------------------------------------------- */
.zap-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 16px 34px -16px rgba(37, 211, 102, .85);
  opacity: 0;
  transform: translateY(20px) scale(.85);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.zap-flutuante.aparece { opacity: 1; transform: none; pointer-events: auto; }
.zap-flutuante:hover { transform: translateY(-3px) scale(1.05); }
.zap-flutuante::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .6);
  animation: pulso 2.6s var(--ease) infinite;
}
@keyframes pulso {
  0% { transform: scale(1); opacity: .7; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(10, 38, 46, .92);
  backdrop-filter: blur(6px);
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.lightbox.aberto { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(560px, 92vw);
  max-height: 86vh;
  width: auto;
  border-radius: var(--raio);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
  transform: scale(.94);
  transition: transform .5s var(--ease);
}
.lightbox.aberto img { transform: scale(1); }
.lightbox-fechar {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox-fechar:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }

/* -----------------------------------------------------------
   Animações de entrada
   ----------------------------------------------------------- */
.js [data-anim],
.js [data-stagger] > * {
  opacity: 0;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js [data-anim],
  .js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .zap-flutuante::after { display: none; }
}