/* Modelo F de /root/quilha-servicos.html — A com cor nos cards. */
.servicos-profundidade {
  --abissal: var(--color-abissal);
  --neve: var(--color-neve);
  --dourado: var(--color-dourado);
  --dourado-claro: var(--color-dourado-claro);
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --disp: var(--font-heading);
  --corpo: var(--font-body);
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", monospace;
  color: var(--color-espuma);
  font-family: var(--corpo);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1;
}
.servicos-profundidade h2,
.servicos-profundidade h3 {
  font-family: var(--disp);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.servicos-profundidade p { margin: 0; }
.servicos-profundidade a { color: inherit; text-decoration: none; }
.servicos-profundidade .mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.servicos-profundidade .ic {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.servicos-profundidade .va {
  scroll-margin-top: 72px;
  position: relative;
  z-index: 1;
  padding: 0 0 110px;
  overflow: hidden;
  background: none;
}
/* Só o fundo some no topo; o texto dos serviços fica opaco. */
.servicos-profundidade .va::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--color-mar-aberto) 0%, var(--color-mar-aberto) 300px, var(--color-mar-menu) 42%, var(--color-profundo) 66%, var(--abissal) 100%);
  /* Funde com a cor da faixa de cima e fecha ANTES do título — texto branco sobre a parte
     clara do degradê não tinha contraste. */
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.85) 110px, rgb(0 0 0 / 1) 190px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.85) 110px, rgb(0 0 0 / 1) 190px);
}
.servicos-profundidade .va-shafts {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.7) 150px, rgb(0 0 0 / 1) 260px, rgb(0 0 0 / 1) 760px, rgb(0 0 0 / 0) 1140px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.7) 150px, rgb(0 0 0 / 1) 260px, rgb(0 0 0 / 1) 760px, rgb(0 0 0 / 0) 1140px);
}
.servicos-profundidade .va-shafts::before,
.servicos-profundidade .va-shafts::after {
  content: "";
  position: absolute;
  top: -6%;
  height: 108%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-reflexo) 55%, transparent), color-mix(in srgb, var(--color-reflexo) 22%, transparent) 48%, color-mix(in srgb, var(--color-reflexo) 0%, transparent) 88%);
  filter: blur(26px);
  opacity: .5;
}
/* Feixes de luz: largura em `clamp` com `vw` — em % viravam manchas de 430px a 1265px de
   viewport (e 870px numa tela de 2560). O piso segura o feixe visível no celular e o teto
   impede a mancha na tela larga. */
.servicos-profundidade .va-shafts::before {
  left: 14%;
  width: clamp(110px, 18vw, 300px);
  transform: rotate(11deg);
}
.servicos-profundidade .va-shafts::after {
  left: 62%;
  width: clamp(80px, 12vw, 200px);
  transform: rotate(-8deg);
}
.servicos-profundidade .va-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grao);
  opacity: .05;
  pointer-events: none;
  mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 1) 420px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 1) 420px);
}
.servicos-profundidade .va .wrap {
  position: relative;
  z-index: 2;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--respiro);
}
.servicos-profundidade .va-head { padding-top: 210px; text-align: center; }
.servicos-profundidade .va-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: color-mix(in srgb, var(--color-abissal) 30%, transparent);
  color: var(--color-espuma);
  backdrop-filter: blur(6px);
}
.servicos-profundidade .va-head h2 {
  font-size: clamp(34px, 4.6vw, 54px);
  margin-top: 22px;
  letter-spacing: 0.02em; /* mesmo padrão do herói e do resto da página */
  color: #fff;
  line-height: 1.08;
}
.servicos-profundidade .va-head p {
  margin: 16px auto 0;
  max-width: 52ch;
  color: var(--color-bruma);
  font-size: 16px;
}

.servicos-profundidade .va-strata {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px 0 22px;
}
.servicos-profundidade .va-strata .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
}
.servicos-profundidade .va-strata span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-bruma);
}
.servicos-profundidade .va-strata.gold span { color: var(--dourado-claro); }
.servicos-profundidade .va-strata.gold .line {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-dourado) 50%, transparent), transparent);
}

.servicos-profundidade .va-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.servicos-profundidade .va-grid + .va-grid { margin-top: 20px; }
.servicos-profundidade .va-deep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

.servicos-profundidade .va-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 26px 24px 24px;
  isolation: isolate;
  background: linear-gradient(158deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .11);
  border-top-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(12px) saturate(125%);
  box-shadow: 0 26px 46px -28px color-mix(in srgb, var(--color-quase-preto) 95%, transparent);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), border-color .35s, box-shadow .35s;
}
.servicos-profundidade .va-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .20) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .85s ease;
}
.servicos-profundidade .va-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--color-dourado) 55%, transparent);
  box-shadow: 0 34px 54px -26px var(--color-quase-preto);
}
.servicos-profundidade .va-card:hover::after { transform: translateX(130%); }
.servicos-profundidade .va-card .num {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .30);
}
.servicos-profundidade .va-card .ic { color: var(--color-espuma); opacity: .92; }
.servicos-profundidade .va-card h3 { font-size: 19px; margin-top: 18px; color: #fff; }
.servicos-profundidade .va-card p {
  margin-top: 9px;
  font-size: 14px;
  color: var(--color-bruma);
  max-width: 34ch;
  min-height: 63px;
}
.servicos-profundidade .va-card .go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--dourado-claro);
  opacity: 1;
  transition: color .2s;
}
.servicos-profundidade .va-card .go:hover { color: #fff; }

.servicos-profundidade .va-card.deep {
  padding: 34px 32px 30px;
  background: linear-gradient(158deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015));
  border-color: color-mix(in srgb, var(--color-dourado) 24%, transparent);
  border-top-color: color-mix(in srgb, var(--color-dourado) 42%, transparent);
}
.servicos-profundidade .va-card.deep::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14%;
  bottom: -70%;
  width: 74%;
  height: 140%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-dourado) 34%, transparent), transparent 75%);
}
.servicos-profundidade .va-card.deep .ic {
  width: 42px;
  height: 42px;
  color: var(--dourado-claro);
}
.servicos-profundidade .va-card.deep h3 { font-size: 24px; margin-top: 22px; }
.servicos-profundidade .va-card.deep p {
  font-size: 15px;
  color: var(--color-bruma);
  max-width: 40ch;
}
.servicos-profundidade .va-card.deep .go {
  opacity: 1;
  transform: none;
  color: var(--dourado-claro);
}

.servicos-profundidade .va-card.tint::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -18%;
  bottom: -72%;
  width: 136%;
  height: 132%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  opacity: .66;
  transition: opacity .4s, transform .5s;
}
.servicos-profundidade .va-card.tint:hover::before {
  opacity: .95;
  transform: translateY(-7%);
}
.servicos-profundidade .va-card.tint .ic { color: #fff; }

@media (max-width: 1020px) {
  .servicos-profundidade .va-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .servicos-profundidade .va .wrap { padding: 0 18px; }
  .servicos-profundidade .va-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .servicos-profundidade .va-deep { grid-template-columns: 1fr; }
  .servicos-profundidade .va-card { backdrop-filter: blur(6px); padding: 22px 16px 20px; }
  .servicos-profundidade .va-card h3 { font-size: 16px; }
  .servicos-profundidade .va-card p { font-size: 13px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .servicos-profundidade * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Variante com o mar 3D: o degradê e o grão em CSS saem de cena — quem pinta é o canvas.
   O degradê fica como base, para o caso de o WebGL não iniciar. */
.servicos-profundidade.com-mar-3d { overflow: visible; }
.servicos-profundidade.com-mar-3d .va { overflow: visible; }
/* A base (degradê) só começa ABAIXO do vale das ondas. A linha d'água oscila em torno da
   borda de cima da seção e chega a ~30px abaixo dela; se o degradê nascer no topo, ele
   aparece entre uma crista e outra. Começando em 38px e entrando em mais 52px, o que se vê
   no vale é a areia (o fundo do `main`), que é o que deve estar ali. */
.servicos-profundidade.com-mar-3d .va::before {
  top: 38px;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 1) 52px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, rgb(0 0 0 / 1) 52px);
  opacity: 1;
}
.servicos-profundidade.com-mar-3d .va > .wrap { position: relative; z-index: 2; }