/*! Desenvolvido por MTHBARROS · mthbarros.com.br | Agência Fellow Ship · agenciafellowship.com.br */
/* =====================================================================
   Agência Fellow Ship: componentes e páginas.
   Quebras: 640px (sm), 768px (md) e 1024px (lg).
   Hover só em @media (hover: hover), para não "grudar" no toque.
   ===================================================================== */

/* ---------- Estrutura e utilitários ---------- */
.pagina { background-color: var(--branco); }
.largura { margin-inline: auto; max-width: 80rem; padding-inline: 1.25rem; }
.largura-4xl { margin-inline: auto; max-width: 56rem; padding-inline: 1.25rem; }
.largura-3xl { margin-inline: auto; max-width: 48rem; padding-inline: 1.25rem; }
@media (min-width: 40rem) { .largura, .largura-4xl, .largura-3xl { padding-inline: 2rem; } }
.relativo { position: relative; }
.centro { text-align: center; }
.limite-2xl { max-width: 42rem; }
.limite-3xl { max-width: 48rem; }
.sumida { display: none; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-14 { margin-top: 3.5rem; }
.creme-25 { color: color-mix(in oklab, var(--creme) 25%, transparent); }
.creme-30 { color: color-mix(in oklab, var(--creme) 30%, transparent); }
.creme-40 { color: color-mix(in oklab, var(--creme) 40%, transparent); }
.creme-70 { color: color-mix(in oklab, var(--creme) 70%, transparent); }
.creme-80 { color: color-mix(in oklab, var(--creme) 80%, transparent); }
.azul-80 { color: color-mix(in oklab, var(--azul) 80%, transparent); }

.icone-4 { width: 1rem; height: 1rem; }
.icone-5 { width: 1.25rem; height: 1.25rem; }
.icone-6 { width: 1.5rem; height: 1.5rem; }
.icone-alinhado { margin-top: .125rem; }

/* Textos */
.texto-suave { color: var(--suave); }
.texto-claro { color: color-mix(in oklab, var(--creme) 75%, transparent); }
.texto-pequeno { font-size: .875rem; line-height: calc(1.25 / .875); color: var(--suave); }
.texto-grande { font-size: 1.125rem; line-height: 1.625; color: var(--suave); }
.texto-introducao { font-size: 1.125rem; line-height: 1.625; color: var(--texto); }
@media (min-width: 40rem) { .texto-introducao { font-size: 1.25rem; line-height: 1.625; } }

.sobretitulo { font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--oceano); }
.sobretitulo-claro { color: color-mix(in oklab, var(--creme) 60%, transparent); }

/* Títulos */
.titulo-secao { margin-top: .75rem; font-family: var(--fonte-titulo); font-size: 2.25rem; line-height: calc(2.5 / 2.25); font-weight: 600; }
.titulo-secao.azul { color: var(--azul); }
.titulo-secao-azul { font-family: var(--fonte-titulo); font-size: 2.25rem; line-height: calc(2.5 / 2.25); font-weight: 600; color: var(--azul); }
.titulo-bloco { margin-top: .75rem; font-family: var(--fonte-titulo); font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 600; color: var(--azul); }
.titulo-bloco-claro { margin-top: .75rem; font-family: var(--fonte-titulo); font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 600; }
.titulo-topico { font-family: var(--fonte-titulo); font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 600; color: var(--azul); }
.titulo-item { font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 600; }
@media (min-width: 40rem) {
  .titulo-secao, .titulo-secao-azul { font-size: 3rem; line-height: 1; }
  .titulo-bloco, .titulo-bloco-claro { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
  .titulo-topico { font-size: 1.875rem; line-height: calc(2.25 / 1.875); }
}

/* Marcas d'água (navio, farol, leme) */
.marca-dagua { pointer-events: none; position: absolute; }
.marca-diferenciais { left: -6rem; bottom: 0; width: 480px; opacity: .05; }
.marca-centro-grande { left: 50%; top: 50%; width: 680px; max-width: 90%; translate: -50% -50%; opacity: .06; }
.marca-centro { left: 50%; top: 50%; width: 560px; max-width: 90%; translate: -50% -50%; opacity: .06; }
.marca-canto { bottom: 0; right: 0; width: 420px; max-width: 65%; translate: 25% 25%; opacity: .05; }
.marca-abertura { right: 0; top: 50%; width: 480px; max-width: 70%; translate: 25% -50%; opacity: .05; }
.marca-abertura.sumida { display: none; }

/* ---------- Botões ---------- */
.botao-creme,
.botao-contorno-claro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9999px;
  padding: .875rem 1.75rem;
  font-weight: 600;
}
.botao-creme { background-color: var(--creme); color: var(--azul); transition: transform .15s var(--curva), translate .15s var(--curva), scale .15s var(--curva), rotate .15s var(--curva); }
.botao-contorno-claro { border: 1px solid color-mix(in oklab, var(--creme) 25%, transparent); color: var(--creme); transition: color .15s var(--curva), background-color .15s var(--curva), border-color .15s var(--curva); }
.botao-grande { margin-top: 2.5rem; gap: .75rem; padding: 1rem 2rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
.botao-cta { margin-top: 2.5rem; gap: .75rem; padding: 1rem 2.25rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
.botao-azul {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  background-color: var(--azul);
  padding: .75rem 1.5rem;
  font-weight: 600;
  color: var(--creme);
  transition: transform .15s var(--curva), translate .15s var(--curva), scale .15s var(--curva), rotate .15s var(--curva);
}
.botao-azul-pequeno {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  background-color: var(--azul);
  padding: .625rem 1.25rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 600;
  color: var(--creme);
  transition: transform .15s var(--curva), translate .15s var(--curva), scale .15s var(--curva), rotate .15s var(--curva);
}
.pilula {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--azul) 15%, transparent);
  background-color: var(--branco);
  padding: .625rem 1.25rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 600;
  color: var(--azul);
  transition: color .15s var(--curva), border-color .15s var(--curva);
}
.link-azul { font-weight: 600; color: var(--oceano); text-decoration-line: underline; text-underline-offset: 4px; }
@media (hover: hover) {
  .botao-creme:hover { scale: 1.03; }
  .botao-grande:hover, .botao-cta:hover { scale: 1.04; }
  .botao-contorno-claro:hover { background-color: color-mix(in oklab, var(--creme) 10%, transparent); }
  .botao-azul:hover, .botao-azul-pequeno:hover { scale: 1.03; }
  .pilula:hover { border-color: color-mix(in oklab, var(--oceano) 40%, transparent); color: var(--oceano); }
  .link-azul:hover { color: var(--azul); }
}

/* ---------- Topo ---------- */
.topo { position: fixed; left: 0; right: 0; top: 0; z-index: 50; background-color: transparent; transition: color .3s var(--curva), background-color .3s var(--curva), border-color .3s var(--curva); }
.topo-solido,
.topo.rolado { background-color: var(--azul); }
.topo.rolado { box-shadow: 0 10px 15px -3px color-mix(in oklab, var(--azul) 20%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--azul) 20%, transparent); }
.topo-conteudo { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.topo-marca { display: flex; align-items: center; }
.topo-logo { height: 2.25rem; width: auto; }
.topo-menu { display: none; align-items: center; gap: 2rem; }
.topo-link { font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 500; color: color-mix(in oklab, var(--creme) 85%, transparent); transition: color .15s var(--curva); }
.topo-link.ativo { color: var(--creme); }
.topo-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  background-color: var(--creme);
  padding: .625rem 1.25rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 600;
  color: var(--azul);
  transition: transform .15s var(--curva), translate .15s var(--curva), scale .15s var(--curva), rotate .15s var(--curva);
}
.topo-menu-botao { color: var(--creme); }
.menu-celular { border-top: 1px solid color-mix(in oklab, var(--creme) 10%, transparent); background-color: color-mix(in oklab, var(--azul) 98%, transparent); padding: 1rem 1.25rem; }
.menu-celular.no-blog { background-color: var(--azul); }
.menu-celular-lista { display: flex; flex-direction: column; gap: .25rem; }
.menu-celular-link { border-radius: 8px; padding: .75rem; color: color-mix(in oklab, var(--creme) 90%, transparent); }
.menu-celular-link.ativo { color: var(--creme); }
.menu-celular-cta {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9999px;
  background-color: var(--creme);
  padding: .75rem 1.25rem;
  font-weight: 600;
  color: var(--azul);
}
@media (hover: hover) {
  .topo-link:hover { color: var(--creme); }
  .topo-cta:hover, .menu-celular-cta:hover { scale: 1.05; }
  .menu-celular-link:hover { background-color: color-mix(in oklab, var(--creme) 10%, transparent); }
}
@media (min-width: 40rem) { .topo-logo { height: 2.5rem; } }
@media (min-width: 64rem) {
  .topo-menu { display: flex; }
  .topo-menu-botao, .menu-celular { display: none; }
}

/* ---------- Seções ---------- */
.secao { padding-block: 5rem; }
.secao-media { padding-block: 4rem; }
.secao-branca { background-color: var(--branco); }
.secao-alta { background-color: var(--branco); padding-block: 6rem; }
.secao-creme { background-color: var(--creme); padding-block: 6rem; }
.secao-azul { position: relative; overflow: hidden; background-color: var(--azul); padding-block: 6rem; color: var(--creme); }
.secao-azul-media { padding-block: 5rem; }
.secao-cta { padding-block: 7rem; }
.secao-planos { background-color: var(--azul); padding-block: 6rem; color: var(--creme); }
@media (min-width: 40rem) {
  .secao { padding-block: 6rem; }
  .secao-media { padding-block: 5rem; }
  .secao-alta, .secao-creme, .secao-azul, .secao-planos { padding-block: 7rem; }
  .secao-azul-media { padding-block: 6rem; }
  .secao-cta { padding-block: 8rem; }
}
:where(.pilha-12 > :not(:last-child)) { margin-bottom: 3rem; }

/* Abertura das páginas internas */
.abertura { position: relative; overflow: hidden; background-color: var(--azul); padding-top: 8rem; padding-bottom: 5rem; color: var(--creme); }
.abertura-titulo { max-width: 56rem; font-family: var(--fonte-titulo); font-size: 2.25rem; line-height: 1.25; font-weight: 600; }
.abertura-texto { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--creme) 80%, transparent); }
@media (min-width: 40rem) {
  .abertura { padding-top: 10rem; padding-bottom: 7rem; }
  .abertura-titulo { font-size: 3rem; line-height: 1.25; }
  .abertura-texto { font-size: 1.25rem; line-height: calc(1.75 / 1.25); }
}
@media (min-width: 64rem) { .abertura-titulo { font-size: 3.75rem; line-height: 1.25; } }
.trilha { margin-bottom: 1.5rem; }
.trilha-lista { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 60%, transparent); }
.trilha-atual { color: color-mix(in oklab, var(--creme) 90%, transparent); }
@media (hover: hover) { .trilha-link:hover { color: var(--creme); } }

/* ---------- Início ---------- */
.hero { position: relative; display: flex; min-height: 100vh; align-items: center; overflow: hidden; background-color: var(--azul); color: var(--creme); }
.hero-farol { right: -4rem; top: 50%; width: 540px; max-width: 80%; translate: 0 -50%; opacity: .06; }
.hero-conteudo { position: relative; width: 100%; padding-top: 8rem; padding-bottom: 10rem; }
.hero-selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--creme) 20%, transparent);
  padding: .375rem 1rem;
  font-size: .75rem;
  line-height: calc(1 / .75);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: color-mix(in oklab, var(--creme) 80%, transparent);
}
.hero-titulo { margin-top: 1.75rem; font-family: var(--fonte-titulo); font-size: 3rem; line-height: 1.02; font-weight: 600; letter-spacing: -0.025em; }
.hero-texto { margin-top: 1.75rem; max-width: 36rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--creme) 80%, transparent); }
.hero-acoes { margin-top: 2.25rem; display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 40rem) {
  .hero-farol { opacity: .08; }
  .hero-titulo { font-size: 3.75rem; line-height: 1.02; }
  .hero-texto { font-size: 1.25rem; line-height: calc(1.75 / 1.25); }
  .hero-acoes { flex-direction: row; align-items: center; }
}
@media (min-width: 64rem) {
  .hero-farol { width: 720px; }
  .hero-titulo { font-size: 4.5rem; line-height: 1.02; }
}

/* Ondas animadas */
.onda { pointer-events: none; width: 100%; overflow: hidden; }
.onda-solta { color: var(--branco); }
.onda-svg { width: 100%; height: 100%; }

/* Serviços (início) */
.grade-servicos { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
.servico-card {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent);
  background-color: var(--branco);
  padding: 1.75rem;
  transition: all .3s var(--curva);
}
.servico-icone {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--azul);
  color: var(--creme);
  transition: background-color .15s var(--curva);
}
.servico-titulo { margin-top: 1.25rem; font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 600; color: var(--azul); }
.servico-mais { margin-top: 1rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; color: var(--oceano); opacity: 0; transition: opacity .15s var(--curva); }
/* Desenho grande no canto dos cartões */
.beneficio-desenho {
  pointer-events: none;
  position: absolute;
  bottom: -.5rem;
  right: -.5rem;
  width: 4rem;
  height: 4rem;
  rotate: -12deg;
  color: color-mix(in oklab, var(--oceano) 25%, transparent);
  transition: all .5s cubic-bezier(0, 0, 0.2, 1);
}
@media (hover: hover) {
  .servico-card:hover { translate: 0 -.375rem; border-color: color-mix(in oklab, var(--oceano) 30%, transparent); box-shadow: 0 20px 25px -5px color-mix(in oklab, var(--azul) 10%, transparent), 0 8px 10px -6px color-mix(in oklab, var(--azul) 10%, transparent); }
  .servico-card:hover .servico-icone { background-color: var(--oceano); }
  .servico-card:hover .servico-mais { opacity: 1; }
  .servico-card:hover .beneficio-desenho,
  .beneficio-icone:hover .beneficio-desenho { rotate: -3deg; scale: 1.1; color: color-mix(in oklab, var(--oceano) 60%, transparent); }
}
@media (min-width: 40rem) { .grade-servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade-servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Diferenciais */
.grade-diferenciais { margin-top: 3.5rem; display: grid; gap: 2rem; }
.diferencial { display: flex; gap: 1.25rem; }
.diferencial-icone { display: flex; width: 3rem; height: 3rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--creme) 20%, transparent); color: var(--creme); }
@media (min-width: 40rem) { .grade-diferenciais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Processo */
.processo { position: relative; margin-top: 4rem; }
.processo-linha { position: absolute; left: 0; right: 0; top: 1.75rem; display: none; height: 1px; background-image: linear-gradient(to right in oklab, color-mix(in oklab, var(--oceano) 20%, transparent) 0%, color-mix(in oklab, var(--oceano) 50%, transparent) 50%, color-mix(in oklab, var(--oceano) 20%, transparent) 100%); }
.grade-processo { display: grid; gap: 2.5rem; }
.processo-numero {
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--azul);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  line-height: calc(1.75 / 1.125);
  font-weight: 600;
  color: var(--creme);
  box-shadow: 0 0 0 8px var(--branco);
}
@media (min-width: 40rem) { .grade-processo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .processo-linha { display: block; }
  .grade-processo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Planos (início) */
.grade-planos { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
.plano {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--creme) 15%, transparent);
  background-color: color-mix(in oklab, var(--branco) 4%, transparent);
  padding: 2rem;
  transition: transform .15s var(--curva), translate .15s var(--curva), scale .15s var(--curva), rotate .15s var(--curva);
}
.plano-destaque { border-color: var(--creme); background-color: var(--creme); color: var(--azul); box-shadow: 0 25px 50px -12px color-mix(in oklab, #000 30%, transparent); }
.plano-selo { margin-bottom: 1rem; display: inline-flex; width: fit-content; border-radius: 9999px; background-color: var(--azul); padding: .25rem .75rem; font-size: .75rem; line-height: calc(1 / .75); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--creme); }
.plano-preco { margin-top: 1rem; font-family: var(--fonte-titulo); font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 600; color: var(--creme); }
.plano-preco-escuro { color: var(--azul); }
.plano-periodo { color: color-mix(in oklab, var(--creme) 60%, transparent); }
.plano-periodo-escuro { color: color-mix(in oklab, var(--azul) 70%, transparent); }
.plano-lista { margin-top: 1.5rem; margin-bottom: 2rem; }
:where(.plano-lista > :not(:last-child)) { margin-bottom: .75rem; }
.plano-item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); }
.check-claro { flex-shrink: 0; color: color-mix(in oklab, var(--creme) 70%, transparent); }
.check-azul { flex-shrink: 0; color: var(--oceano); }
.botao-plano {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 9999px;
  padding: .75rem 1.5rem;
  font-weight: 600;
  transition: transform .15s var(--curva), translate .15s var(--curva), scale .15s var(--curva), rotate .15s var(--curva);
}
.botao-plano-creme { background-color: var(--creme); color: var(--azul); }
.botao-plano-azul { background-color: var(--azul); color: var(--creme); }
.planos-nota { margin-top: 2rem; text-align: center; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 60%, transparent); }
@media (hover: hover) {
  .plano:hover, .pacote:hover { translate: 0 -.375rem; }
  .botao-plano:hover { scale: 1.03; }
}
@media (min-width: 64rem) {
  .grade-planos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plano-destaque { margin-top: -1rem; }
}

/* SEO local (início) */
.seo-local-texto { margin-top: 1.5rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--azul) 80%, transparent); }
:where(.seo-local-texto > :not(:last-child)) { margin-bottom: 1rem; }

/* Chamada final */
.cta-titulo { font-family: var(--fonte-titulo); font-size: 2.25rem; line-height: 1.25; font-weight: 600; }
.cta-titulo-grande { font-family: var(--fonte-titulo); font-size: 3rem; line-height: 1.25; font-weight: 600; }
.cta-texto { margin: 1.5rem auto 0; max-width: 36rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--creme) 80%, transparent); }
@media (min-width: 40rem) {
  .cta-titulo { font-size: 3rem; line-height: 1.25; }
  .cta-titulo-grande { font-size: 3.75rem; line-height: 1.25; }
}

/* ---------- Páginas de serviço e landing pages ---------- */
.grade-beneficios { margin-top: 3rem; display: grid; gap: 1.5rem; }
.beneficio { height: 100%; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent); background-color: var(--branco); padding: 1.5rem; }
.beneficio-icone { position: relative; overflow: hidden; }
.beneficio-titulo { font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 600; color: var(--azul); }
@media (min-width: 40rem) { .grade-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade-beneficios { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.grade-etapas { margin-top: 3rem; display: grid; gap: 1.5rem; }
.etapa { position: relative; height: 100%; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent); background-color: var(--branco); padding: 1.5rem; }
.etapa-numero { display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; background-color: var(--azul); font-family: var(--fonte-titulo); font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; color: var(--creme); }
.etapa-titulo { margin-top: 1rem; font-family: var(--fonte-titulo); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 600; color: var(--azul); }
@media (min-width: 40rem) { .grade-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade-etapas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Pacotes (preços) */
.grade-pacotes { margin-top: 3rem; display: grid; gap: 1.5rem; }
.grade-pacotes-2 { margin-inline: auto; max-width: 48rem; }
.pacote {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--creme) 15%, transparent);
  background-color: color-mix(in oklab, var(--branco) 4%, transparent);
  padding: 1.75rem;
  transition: transform .15s var(--curva), translate .15s var(--curva), scale .15s var(--curva), rotate .15s var(--curva);
}
.pacote-destaque { border-color: var(--creme); background-color: var(--creme); color: var(--azul); box-shadow: 0 25px 50px -12px color-mix(in oklab, #000 30%, transparent); }
.pacote-selos { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pacote-selo,
.pacote-selo-contorno { display: inline-flex; width: fit-content; border-radius: 9999px; padding: .25rem .75rem; font-size: .75rem; line-height: calc(1 / .75); font-weight: 600; text-transform: uppercase; letter-spacing: .025em; }
.pacote-selo { background-color: color-mix(in oklab, var(--creme) 10%, transparent); color: var(--creme); }
.pacote-selo-azul { background-color: var(--azul); }
.pacote-selo-contorno { border: 1px solid color-mix(in oklab, var(--azul) 20%, transparent); color: color-mix(in oklab, var(--azul) 70%, transparent); }
.pacote-nome { font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: 1.375; font-weight: 600; }
.pacote-sub { margin-top: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 70%, transparent); }
.pacote-sub-escuro { color: color-mix(in oklab, var(--azul) 70%, transparent); }
.pacote-divisor { margin-block: 1.25rem; height: 1px; width: 100%; background-color: color-mix(in oklab, var(--creme) 10%, transparent); }
.pacote-divisor-escuro { background-color: color-mix(in oklab, var(--azul) 10%, transparent); }
.pacote-preco { font-family: var(--fonte-titulo); font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 600; color: var(--creme); }
.pacote-preco-escuro { color: var(--azul); }
.pacote-nota { margin-top: .25rem; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 60%, transparent); }
.pacote-nota-escuro { color: color-mix(in oklab, var(--azul) 70%, transparent); }
.pacote-item { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); }
@media (min-width: 40rem) { .grade-pacotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade-pacotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grade-pacotes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Palavras-chave em pílulas */
.etiquetas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.etiqueta-clara { display: inline-flex; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--creme) 15%, transparent); background-color: color-mix(in oklab, var(--branco) 4%, transparent); padding: .625rem 1.25rem; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 80%, transparent); }

/* Caixa "serviço relacionado" */
.caixa-servico { border-radius: 16px; border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent); background-color: var(--branco); padding: 2rem; }
@media (min-width: 40rem) { .caixa-servico { padding: 2.5rem; } }

/* Páginas relacionadas */
.grade-relacionados { margin-top: 2.5rem; display: grid; gap: 1rem; }
.relacionado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent);
  background-color: var(--branco);
  padding: 1.5rem;
  transition: all .15s var(--curva);
}
.relacionado-titulo { font-family: var(--fonte-titulo); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 600; color: var(--azul); }
.relacionado-texto { margin-top: .25rem; font-size: .875rem; line-height: calc(1.25 / .875); color: var(--suave); }
.relacionado-seta { color: color-mix(in oklab, var(--azul) 40%, transparent); transition: color .15s var(--curva); }
@media (hover: hover) {
  .relacionado:hover { translate: 0 -.25rem; border-color: color-mix(in oklab, var(--oceano) 30%, transparent); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
  .relacionado:hover .relacionado-seta { color: var(--oceano); }
}
@media (min-width: 40rem) { .grade-relacionados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade-relacionados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Perguntas frequentes */
.duvidas { margin-top: 2.5rem; }
:where(.duvidas > :not(:last-child)) { margin-bottom: 1rem; }
.duvida { border-radius: 16px; border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent); background-color: var(--branco); }
.duvida[open] { background-color: #fff; box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.duvida-pergunta { display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; font-family: var(--fonte-titulo); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 600; color: var(--azul); }
.duvida-icone { display: flex; width: 2rem; height: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background-color: var(--azul); color: var(--creme); transition: transform .15s var(--curva), rotate .15s var(--curva); }
.duvida[open] .duvida-icone { rotate: 180deg; }
.duvida-resposta { padding: 0 1.5rem 1.25rem; color: var(--suave); }

/* ---------- Página de serviços (lista) ---------- */
.servico-lista-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent);
  background-color: var(--branco);
  padding: 1.75rem;
  transition: all .15s var(--curva);
}
.servico-lista-titulo { margin-top: 1.25rem; font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 600; color: var(--azul); }
.servico-lista-texto { margin-top: .5rem; flex-grow: 1; color: var(--suave); }
.servico-lista-mais { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; color: var(--oceano); }
.seta-andar { transition: transform .15s var(--curva), translate .15s var(--curva); }
@media (hover: hover) {
  .servico-lista-card:hover { translate: 0 -.375rem; border-color: color-mix(in oklab, var(--oceano) 30%, transparent); box-shadow: 0 20px 25px -5px color-mix(in oklab, var(--azul) 10%, transparent), 0 8px 10px -6px color-mix(in oklab, var(--azul) 10%, transparent); }
  .servico-lista-card:hover .servico-icone { background-color: var(--oceano); }
  .servico-lista-card:hover .seta-andar { translate: .25rem 0; }
}

/* Linhas de onda decorativas (blog e serviços) */

/* ---------- Farol animado (abertura das páginas de serviço) ---------- */
.farol { pointer-events: none; position: absolute; right: 0; top: 50%; width: 900px; max-width: 110%; translate: 18% -50%; }

/* ---------- Blog ---------- */
.blog-pagina { min-height: 100vh; background-color: var(--branco); }
.blog-abertura { position: relative; overflow: hidden; background-color: var(--azul); padding-top: 10rem; padding-bottom: 10rem; color: var(--creme); }
.blog-abertura-conteudo { position: relative; width: 100%; margin-inline: auto; max-width: 64rem; padding-inline: 1rem; }
.blog-selo { display: inline-block; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--creme) 25%, transparent); background-color: color-mix(in oklab, var(--creme) 5%, transparent); padding: .25rem 1rem; font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: .2em; color: color-mix(in oklab, var(--creme) 80%, transparent); }
.blog-titulo { margin-top: 1.25rem; font-family: var(--fonte-titulo); font-size: 3rem; line-height: 1.25; font-weight: 700; }
.blog-intro { margin-top: 1rem; max-width: 42rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--creme) 80%, transparent); }
.blog-filtros { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-filtro { border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--creme) 25%, transparent); padding: .375rem 1rem; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 80%, transparent); transition: all .15s var(--curva); }
.blog-filtro.ativo { border-color: var(--creme); background-color: var(--creme); color: var(--azul); }
.blog-lista { padding-block: 5rem; }
.blog-lista-conteudo { width: 100%; margin-inline: auto; max-width: 72rem; padding-inline: 1rem; }
.destaque {
  margin-bottom: 4rem;
  display: grid;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid color-mix(in oklab, #000 5%, transparent);
  background-color: var(--branco);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  transition: all .15s var(--curva);
}
.destaque-capa { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--ardosia-100); }
.destaque-img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--curva), scale .7s var(--curva); }
.destaque-texto { display: flex; flex-direction: column; justify-content: center; padding: 2rem; }
.destaque-rotulo { font-size: .75rem; line-height: calc(1 / .75); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; }
.destaque-meta { margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .75rem; line-height: calc(1 / .75); color: var(--ardosia-500); }
.chip { border-radius: 9999px; background-color: color-mix(in oklab, var(--azul) 10%, transparent); padding: .125rem .5rem; color: var(--azul); }
.chip-largo { padding-inline: .625rem; }
.destaque-titulo { margin-top: .75rem; font-family: var(--fonte-titulo); font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 700; color: var(--azul); transition: color .15s var(--curva); }
.destaque-resumo { margin-top: 1rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; color: var(--ardosia-600); }
.destaque-ler { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; color: var(--azul); transition: all .15s var(--curva); }
.blog-grade { display: grid; gap: 2rem; }
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, #000 5%, transparent);
  background-color: var(--branco);
  transition: all .15s var(--curva);
}
.blog-card-capa,
.post-card-capa { aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--ardosia-100); }
.blog-card-img,
.post-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--curva), scale .5s var(--curva); }
.blog-card-texto { display: flex; flex: 1 1 0%; flex-direction: column; padding: 1.5rem; }
.blog-card-meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; line-height: calc(1 / .75); color: var(--ardosia-500); }
.blog-card-titulo { margin-top: .75rem; font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 700; color: var(--azul); }
.blog-card-resumo { margin-top: .5rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: .875rem; line-height: calc(1.25 / .875); color: var(--ardosia-600); }
.blog-card-ler { margin-top: 1rem; display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 600; color: var(--azul); transition: all .15s var(--curva); }
@media (hover: hover) {
  .blog-filtro:not(.ativo):hover { border-color: var(--creme); color: var(--creme); }
  .destaque:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
  .destaque:hover .destaque-img,
  .blog-card:hover .blog-card-img,
  .post-card:hover .post-card-img { scale: 1.05; }
  .destaque:hover .destaque-titulo,
  .blog-card:hover .blog-card-titulo,
  .post-card:hover .post-card-titulo { color: color-mix(in oklab, var(--azul) 80%, transparent); }
  .destaque:hover .destaque-ler { gap: .75rem; }
  .blog-card:hover { translate: 0 -.25rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
  .blog-card:hover .blog-card-ler { gap: .625rem; }
}
@media (min-width: 48rem) {
  .blog-titulo { font-size: 3.75rem; line-height: 1.25; }
  .destaque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destaque-capa { aspect-ratio: auto; height: 100%; }
  .destaque-texto { padding: 2.5rem; }
  .destaque-titulo { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
  .blog-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .blog-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Post */
.post-pagina { min-height: 100vh; background-color: var(--branco); padding-block: 6rem; }
.post { width: 100%; margin-inline: auto; max-width: 48rem; padding-inline: 1rem; }
.post-voltar { margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); color: var(--ardosia-600); }
.post-cabecalho { margin-bottom: 2rem; }
.post-meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; line-height: calc(1 / .75); text-transform: uppercase; letter-spacing: .025em; color: var(--ardosia-500); }
.post-categoria { border-radius: 9999px; background-color: color-mix(in oklab, var(--azul) 10%, transparent); padding: .125rem .5rem; text-transform: none; letter-spacing: normal; color: var(--azul); }
.post-titulo { margin-top: .5rem; font-family: var(--fonte-titulo); font-size: 2.25rem; line-height: 1.25; font-weight: 700; color: var(--azul); }
.post-resumo { margin-top: 1rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: var(--ardosia-600); }
.post-capa { margin-bottom: 2.5rem; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; object-fit: cover; }
/* O conteúdo do post vem do editor do painel; a tipografia dele fica em
   "Blog: tipografia do conteúdo", no fim do arquivo. */
.post-conteudo { max-width: none; }
/* Imagens e links que o editor do painel coloca no texto (como no original) */
.post-conteudo img { margin-block: 1rem; border-radius: 8px; }
.post-conteudo a { color: var(--azul); text-decoration-line: underline; }
.post-tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem; border-top: 1px solid color-mix(in oklab, #000 10%, transparent); padding-top: 1.5rem; }
.post-tag { border-radius: 9999px; background-color: var(--ardosia-100); padding: .25rem .75rem; font-size: .75rem; line-height: calc(1 / .75); color: var(--ardosia-700); }
.post-relacionados { width: 100%; margin-inline: auto; margin-top: 5rem; max-width: 64rem; padding-inline: 1rem; }
.post-relacionados-titulo { margin-bottom: 1.5rem; font-family: var(--fonte-titulo); font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 700; color: var(--azul); }
.post-relacionados-grade { display: grid; gap: 1.5rem; }
.post-card { overflow: hidden; border-radius: 16px; border: 1px solid color-mix(in oklab, #000 5%, transparent); background-color: var(--branco); transition: box-shadow .15s var(--curva); }
.post-card-texto { padding: 1.25rem; }
.post-card-data { margin-bottom: .25rem; font-size: .75rem; line-height: calc(1 / .75); color: color-mix(in oklab, var(--azul) 80%, transparent); }
.post-card-titulo { font-family: var(--fonte-titulo); font-size: 1.125rem; line-height: calc(1.75 / 1.125); font-weight: 700; color: var(--azul); }
@media (hover: hover) {
  .post-voltar:hover { color: var(--azul); }
  .post-categoria:hover { background-color: color-mix(in oklab, var(--azul) 20%, transparent); }
  .post-card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
}
@media (min-width: 48rem) {
  .post-titulo { font-size: 3rem; line-height: 1.25; }
  .post-relacionados-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Estados que só aparecem às vezes: blog sem posts, post sem capa e post que não existe */
.blog-vazio { border-radius: 20px; border: 1px dashed color-mix(in oklab, var(--azul) 20%, transparent); background-color: color-mix(in oklab, var(--branco) 60%, transparent); padding: 4rem; text-align: center; }
.blog-vazio-titulo { font-family: var(--fonte-titulo); font-size: 1.5rem; line-height: calc(2 / 1.5); color: var(--azul); }
.blog-vazio-texto { margin-top: .5rem; color: var(--ardosia-600); }
.capa-vazia { width: 100%; height: 100%; background-image: linear-gradient(to bottom right in oklab, color-mix(in oklab, var(--azul) 10%, transparent) 0%, color-mix(in oklab, var(--azul) 5%, transparent) 100%); }
.post-sumido { min-height: 100vh; background-color: #f4f4f4; padding-top: 8rem; padding-bottom: 6rem; }
.post-sumido-caixa { width: 100%; margin-inline: auto; max-width: 42rem; padding-inline: 1rem; text-align: center; }
.post-sumido-titulo { font-family: var(--fonte-titulo); font-size: 1.875rem; line-height: calc(2.25 / 1.875); font-weight: 700; color: var(--azul); }
.post-sumido-link { margin-top: 1rem; display: inline-block; color: var(--azul); text-decoration-line: underline; }

/* ---------- Mapa do site (/sitemap) ---------- */
.pagina-mapa { min-height: 100vh; background-color: var(--branco); }
.mapa-abertura { position: relative; overflow: hidden; background-color: var(--azul); padding-block: 5rem; color: var(--creme); }
.mapa-farol { right: -4rem; top: 50%; width: 420px; translate: 0 -50%; opacity: .06; }
.mapa-largura { margin-inline: auto; max-width: 64rem; padding-inline: 1.5rem; }
.mapa-sobretitulo { margin-bottom: .75rem; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in oklab, var(--creme) 60%, transparent); }
.mapa-titulo { font-family: var(--fonte-serifa); font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
.mapa-conteudo { margin-inline: auto; max-width: 64rem; padding: 4rem 1.5rem; }
.mapa-secao-titulo { font-family: var(--fonte-serifa); font-size: 1.5rem; line-height: calc(2 / 1.5); color: var(--azul); }
.mapa-atalhos { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.mapa-atalho {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--azul) 15%, transparent);
  background-color: var(--branco);
  padding: .625rem 1.25rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 500;
  color: var(--azul);
  transition: all .15s var(--curva);
}
.mapa-atalho-seta, .mapa-seta { transition: all .15s var(--curva); }
.mapa-grupo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mapa-contagem { font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--azul) 50%, transparent); }
.mapa-grade { margin-top: 1.5rem; display: grid; gap: 1rem; }
.mapa-card { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent); background-color: var(--branco); padding: 1.25rem; transition: all .15s var(--curva); }
.mapa-card-titulo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-weight: 500; color: var(--azul); }
.mapa-seta { flex-shrink: 0; color: color-mix(in oklab, var(--azul) 40%, transparent); }
.mapa-descricao { margin-top: .5rem; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--azul) 60%, transparent); }
@media (hover: hover) {
  .mapa-atalho:hover { border-color: var(--azul); background-color: var(--azul); color: var(--creme); }
  .mapa-atalho:hover .mapa-atalho-seta, .mapa-card:hover .mapa-seta { translate: .125rem 0; }
  .mapa-card:hover { border-color: color-mix(in oklab, var(--azul) 40%, transparent); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
  .mapa-card:hover .mapa-seta { color: var(--azul); }
}
@media (min-width: 40rem) { .mapa-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .mapa-titulo { font-size: 3rem; line-height: 1; } }

/* ---------- Rodapé ---------- */
.rodape { background-color: var(--azul); padding-top: 3.5rem; padding-bottom: 2rem; color: var(--creme); }
.rodape-logo { height: 2.5rem; width: auto; }
.rodape-descricao { margin-top: 1rem; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 70%, transparent); }
.rodape-coluna { display: flex; flex-direction: column; gap: .75rem; }
.rodape-titulo { font-size: .75rem; line-height: calc(1 / .75); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: color-mix(in oklab, var(--creme) 50%, transparent); }
.rodape-link { font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 80%, transparent); transition: color .15s var(--curva); }
.rodape-direitos { margin-top: 2rem; text-align: center; font-size: .875rem; line-height: calc(1.25 / .875); color: color-mix(in oklab, var(--creme) 50%, transparent); }
@media (hover: hover) {
  .rodape-link:hover { color: var(--creme); }
}

/* ---------- Página não encontrada (404) ---------- */
.nao-encontrada { display: flex; min-height: 100vh; align-items: center; justify-content: center; background-color: var(--branco); padding-inline: 1rem; }
.nao-encontrada-caixa { max-width: 28rem; text-align: center; }
.nao-encontrada-codigo { font-size: 4.5rem; line-height: 1; font-weight: 700; color: var(--texto); }
.nao-encontrada-titulo { margin-top: 1rem; font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 600; color: var(--texto); }
.nao-encontrada-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: var(--azul);
  padding: .5rem 1rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
  font-weight: 500;
  color: var(--branco);
  transition: background-color .15s var(--curva);
}
@media (hover: hover) { .nao-encontrada-botao:hover { background-color: color-mix(in oklab, var(--azul) 90%, transparent); } }

/* H1 da home com o visual do selo; endereço no rodapé */
h1.hero-selo { font-family: inherit; }
.rodape-endereco { font-style: normal; }

/* ---------- Quem somos ---------- */
.texto-introducao a, .secao a.link-texto { color: var(--oceano); text-decoration-line: underline; text-underline-offset: 3px; }
.grade-equipe { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .grade-equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.membro { display: flex; flex-direction: column; }
.membro-foto { display: flex; width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; align-items: center; justify-content: center; overflow: hidden; border-radius: 9999px; background-color: var(--azul); color: var(--creme); font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 600; }
.membro-foto img { width: 100%; height: 100%; object-fit: cover; }
.membro-cargo { margin-top: .25rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--oceano); }
.membro-link { margin-top: auto; padding-top: 1rem; font-size: .875rem; font-weight: 600; color: var(--oceano); }
.grade-onde { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 64rem) { .grade-onde { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.onde-endereco { margin-top: 1.25rem; font-style: normal; font-size: 1.125rem; line-height: 1.6; color: var(--texto); }
.onde-acoes { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.onde-whats { font-size: .875rem; font-weight: 600; color: var(--oceano); text-decoration-line: underline; text-underline-offset: 4px; }
.onde-mapa { width: 100%; height: 22rem; border: 0; border-radius: 16px; background-color: color-mix(in oklab, var(--azul) 6%, transparent); }

/* ---------- Fotos ---------- */
.foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 64rem) {
  .galeria { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .galeria-destaque { grid-row: span 2; }
  .galeria-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
}
.galeria-item { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; background-color: var(--azul); }
@media (min-width: 64rem) { .galeria-destaque { aspect-ratio: auto; } }
.galeria-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem; font-size: .875rem; font-weight: 500; color: #fff; background-image: linear-gradient(to top, rgb(0 0 0 / .65), transparent); }
.galeria-link { display: inline-block; margin-top: 1.75rem; }
.secao-foto { padding-bottom: 1rem; }
.foto-larga { overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 7; background-color: var(--azul); }
.foto-banner { aspect-ratio: auto; }
.foto-banner .foto { height: auto; }
.foto-introducao { margin-top: 2.5rem; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; background-color: var(--azul); }

/* ---------- Projetos recentes (home) ---------- */
.secao-projetos { background-color: color-mix(in oklab, var(--azul) 3%, var(--branco)); }
.projetos-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.grade-projetos { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .grade-projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade-projetos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.projeto { height: 100%; }
.projeto-link { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent); background-color: var(--branco); transition: translate .2s var(--curva), box-shadow .2s var(--curva), border-color .2s var(--curva); }
.projeto-imagem { aspect-ratio: 16 / 10; overflow: hidden; background-color: color-mix(in oklab, var(--azul) 6%, transparent); }
.projeto-imagem img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale .4s var(--curva); }
.projeto-corpo { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.projeto-tipo { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--oceano); }
.projeto-nome { margin-top: .375rem; font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 600; color: var(--azul); }
.projeto-ver { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 600; color: var(--oceano); }
@media (hover: hover) {
  .projeto-link:hover { translate: 0 -.375rem; border-color: color-mix(in oklab, var(--oceano) 30%, transparent); box-shadow: 0 20px 25px -5px color-mix(in oklab, var(--azul) 10%, transparent); }
  .projeto-link:hover .projeto-imagem img { scale: 1.04; }
}

/* ---------- Blog: pontos principais e CTA do molde .md ---------- */
.post-pontos { margin-top: 3rem; border-radius: 20px; border: 1px solid color-mix(in oklab, var(--azul) 10%, transparent); background-color: color-mix(in oklab, var(--azul) 3%, var(--branco)); padding: 1.5rem; }
@media (min-width: 64rem) { .post-pontos { padding: 2rem; } }
.post-pontos-titulo { font-family: var(--fonte-titulo); font-size: 1.125rem; font-weight: 600; color: var(--azul); }
.post-pontos ul { margin-top: 1rem; display: grid; gap: .75rem; }
.post-pontos li { display: flex; gap: .75rem; color: color-mix(in oklab, var(--azul) 80%, transparent); }
.post-pontos li svg { flex-shrink: 0; margin-top: .2rem; color: var(--oceano); }
.post-cta { margin-top: 2.5rem; border-radius: 20px; background-color: var(--oceano); padding: 2rem; text-align: center; color: var(--branco); }
.post-cta-texto { font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
@media (min-width: 64rem) { .post-cta-texto { font-size: 1.5rem; } }
.post-cta-botao { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background-color: var(--branco); padding: .75rem 1.5rem; font-size: .875rem; font-weight: 600; color: var(--oceano); transition: opacity .2s var(--curva); }
@media (hover: hover) { .post-cta-botao:hover { opacity: .9; } }

/* ---------- Blog: serviço relacionado no fim do post ---------- */
.post-servico { margin-top: 3rem; border-radius: 20px; background-color: var(--azul); padding: 2rem; color: var(--creme); }
.post-servico-rotulo { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: color-mix(in oklab, var(--creme) 65%, transparent); }
.post-servico-nome { margin-top: .5rem; font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.post-servico-nome a { color: inherit; text-decoration: none; }
.post-servico-texto { margin-top: .75rem; color: color-mix(in oklab, var(--creme) 80%, transparent); }
.post-servico-acoes { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.post-servico-botao { display: inline-flex; border-radius: 9999px; background-color: var(--creme); padding: .75rem 1.5rem; font-size: .875rem; font-weight: 600; color: var(--azul); }
.post-servico-link { font-size: .875rem; font-weight: 600; color: var(--creme); text-decoration-line: underline; text-underline-offset: 4px; }

/* ---------- Blog: tipografia do conteúdo ---------- */
.post-conteudo { font-size: 1.0625rem; line-height: 1.75; color: color-mix(in oklab, var(--azul) 88%, transparent); }
.post-conteudo > * + * { margin-top: 1.25rem; }
.post-conteudo h2 { margin-top: 2.75rem; font-family: var(--fonte-titulo); font-size: 1.625rem; line-height: 1.25; font-weight: 600; color: var(--azul); }
.post-conteudo h3 { margin-top: 2rem; font-family: var(--fonte-titulo); font-size: 1.25rem; line-height: 1.3; font-weight: 600; color: var(--azul); }
.post-conteudo h2 + *, .post-conteudo h3 + * { margin-top: .75rem; }
.post-conteudo ul, .post-conteudo ol { padding-left: 1.5rem; }
.post-conteudo ul { list-style: disc; }
.post-conteudo ol { list-style: decimal; }
.post-conteudo li + li { margin-top: .5rem; }
.post-conteudo li::marker { color: var(--oceano); }
.post-conteudo li > p { margin: 0; }
.post-conteudo strong { font-weight: 600; color: var(--azul); }
.post-conteudo hr { margin-block: 2.5rem; border: 0; border-top: 1px solid color-mix(in oklab, var(--azul) 12%, transparent); }
.post-conteudo blockquote { border-left: 3px solid var(--oceano); padding-left: 1.25rem; font-style: italic; }
.post-conteudo a { color: var(--oceano); text-underline-offset: 3px; }
@media (min-width: 40rem) { .post-conteudo h2 { font-size: 1.875rem; } }