/* /servicos/ — página própria (hub dos 5 formatos de pintura ao vivo) */

.servicos-featured {
  padding: 100px 7% 96px;
  background: #faf8f1;
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 56px;
  align-items: center;
}

.servicos-featured-frame { max-width: 420px }

.servicos-featured-body .eyebrow { color: var(--gold) }

.servicos-featured-body h2 { margin-bottom: 22px }

/* Texto mais estreito, no padrão de leitura da home (~60ch), com respiro entre parágrafos */
.servicos-featured-body p { max-width: 60ch; margin: 0 0 18px }

.servicos-featured-body .link-arrow { margin-top: 28px }

@media (max-width: 1050px) {
  .servicos-featured { padding: 78px 6% 74px; gap: 40px }
}

@media (max-width: 800px) {
  .servicos-featured { grid-template-columns: 1fr }
  .servicos-featured-frame { max-width: 340px; margin: 0 auto }
}

.servicos-grid-section { padding: 98px 7% 100px; background: var(--cream) }

/* Seção clara: mesmo tom de em/nota do .section-top da home (.process/.services), não o tom pálido usado em fundo escuro */
.servicos-grid-section .section-top h2 em { color: #758365 }

.servicos-grid-section .section-top > p { color: #7b7c6d }

.servicos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  margin-top: 52px;
}

.servicos-grid-item { display: flex; flex-direction: column }

.servicos-grid-item .gold-frame {
  margin-bottom: 18px;
  transition: box-shadow .3s ease, transform .3s ease;
}

/* Numeral dourado sequencial, mesmo padrão do .service-number da home */
.servicos-grid-item .service-number { display: block; margin-bottom: 10px }

/* Hover/foco eleva a moldura com leve zoom + sombra dourada (a foto em si já ganha o zoom padrão do fx-hover.css) */
.servicos-grid-item .artwork-window {
  transition: transform .3s ease, box-shadow .3s ease;
}

.servicos-grid-item:hover .artwork-window,
.servicos-grid-item:focus-within .artwork-window {
  transform: scale(1.015);
  box-shadow: 0 16px 36px rgba(176, 154, 106, .32);
}

@media (prefers-reduced-motion: reduce) {
  .servicos-grid-item .artwork-window { transition: none }
}

.servicos-grid-item h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--ink);
  margin-bottom: 8px;
}

/* Grade: todas as molduras com a mesma proporção (galeria, não cards de template) */
.servicos-grid-item .artwork-window { height: auto; aspect-ratio: 3 / 4 }

.servicos-grid-item .artwork-window .servicos-grid-img { object-position: 50% 50% }

/* Enquadramento individual de cada foto dentro da moldura fixa */
.servicos-grid-img--aniversario { object-position: 25% 42% }
.servicos-grid-img--corporativo { object-position: 58% 32% }
.servicos-grid-img--encomenda { object-position: 50% 30% }
.servicos-grid-img--aquarela { object-position: 50% 58% }

.servicos-grid-item p { font-size: 0.96rem; line-height: 1.55 }

.servicos-grid-item .link-arrow { margin-top: 14px; font-size: 0.92rem }

@media (max-width: 1050px) {
  .servicos-grid-section { padding: 76px 6% 78px }
  .servicos-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 28px }
}

@media (max-width: 550px) {
  .servicos-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto }
}

.servicos-compare {
  padding: 100px 7% 104px;
  background: radial-gradient(ellipse at 45% 10%, #334938 0, #1c3027 65%, #1b2d24 100%);
  color: #eae6d8;
}

.servicos-compare .eyebrow { color: #c6bc98 }

.servicos-compare .section-top h2 { color: #fdfbf4 }

.servicos-compare .section-top h2 em { color: #d8cba3 }

.servicos-compare .section-top > p { color: #cdd2c4 }

.servicos-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 56px;
}

.servicos-compare-col {
  background: #24352a;
  border: 1px solid #46583f;
  padding: 34px 28px 30px;
  transition: opacity .3s ease;
}

/* Momento memorável: ao passar o mouse numa coluna, as outras esmaecem para reforçar a comparação */
.servicos-compare-grid:has(.servicos-compare-col:hover) .servicos-compare-col:not(:hover),
.servicos-compare-grid:has(.servicos-compare-col:focus-within) .servicos-compare-col:not(:focus-within) {
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  .servicos-compare-col { transition: none }
}

/* Traço fino dourado por coluna, no mesmo espírito de linha do design system */
.compare-icon { display: block; width: 26px; height: 26px; margin-bottom: 16px }

.compare-icon--vivo {
  background: linear-gradient(135deg, transparent 44%, var(--gold) 47%, var(--gold) 53%, transparent 56%);
}

.compare-icon--atelie { border: 1.5px solid var(--gold) }

.compare-icon--digital { border: 1.5px solid var(--gold); transform: rotate(45deg) }

.servicos-compare-col .compare-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a88c58;
  margin-bottom: 14px;
}

.servicos-compare-col h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  color: #fdfbf4;
  margin-bottom: 16px;
}

.servicos-compare-col ul { margin: 0; padding: 0; list-style: none }

.servicos-compare-col li {
  position: relative;
  padding-left: 20px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #d8dccc;
}

.servicos-compare-col li + li { margin-top: 12px }

.servicos-compare-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--gold);
}

.servicos-compare-col .compare-formats {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #46583f;
  font-size: 0.82rem;
  color: #a3ab97;
}

@media (max-width: 1050px) {
  .servicos-compare { padding: 78px 6% 80px }
  .servicos-compare-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 44px }
}

.servicos-links { padding: 88px 7% 96px; background: #faf8f1; text-align: center }

.servicos-links .eyebrow { display: block; margin-bottom: 22px }

.servicos-links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
}

@media (max-width: 700px) {
  .servicos-links { padding: 66px 6% 70px }
  .servicos-links-list { flex-direction: column; gap: 16px }
}

.contact .servicos-secondary {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  font-size: 0.9rem;
}

/* Revisão do coordenador: h2 do destaque no mesmo tamanho dos demais títulos de seção. */
.servicos-featured-body h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -1.1px; margin-top: 16px }
@media (max-width: 700px) { .servicos-featured-body h2 { font-size: 38px } }