/* Página de serviços. Complementa styles.css */

.phero { min-height: 82dvh; display: grid; align-items: end; padding: 9rem 0 5rem; position: relative; isolation: isolate; overflow: hidden; }
.phero .hero-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(800px 520px at 85% 30%, rgba(226, 212, 187, .85), transparent 70%), radial-gradient(600px 400px at 5% 95%, rgba(112, 122, 100, .16), transparent 70%); }
.phero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.phero h1 { color: var(--terracota); margin: 1.5rem 0 1.5rem; }
.phero .ph { aspect-ratio: 4 / 5; border-radius: 240px 240px var(--raio) var(--raio); }
.crumb { display: flex; gap: .6rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--salvia-escuro); }
.crumb a:hover { color: var(--terracota); }
.idx { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.25rem; }
.idx a { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: .6rem 1rem; border: 1px solid var(--linha); border-radius: 99px; background: rgba(255, 255, 255, .55); transition: background .3s, color .3s, transform .4s var(--ease); }
.idx a:hover { background: var(--salvia-escuro); color: var(--off-white); transform: translateY(-3px); }

/* seletor "qual serviço combina comigo" */
.guia { background: var(--fundo-secao); }
.guia-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.guia h2 { color: var(--terracota); margin: 1.25rem 0 1.25rem; }
.opts { display: grid; gap: .6rem; margin-top: 2rem; }
.opt { text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.3rem; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--branco); font-size: 1.05rem; transition: all .4s var(--ease); }
.opt::after { content: "→"; color: var(--terracota); transition: transform .4s var(--ease); }
.opt:hover { transform: translateX(6px); }
.opt[aria-pressed="true"] { background: var(--salvia); color: var(--off-white); border-color: var(--salvia); }
.opt[aria-pressed="true"]::after { color: var(--off-white); transform: translateX(4px); }
.resp { position: sticky; top: 7rem; }
.resp-card { background: var(--branco); border-radius: calc(var(--raio) + 6px); padding: 2.25rem; box-shadow: 0 30px 60px -34px rgba(75, 84, 64, .4), 0 0 0 1px var(--linha); min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; transition: opacity .35s, transform .35s var(--ease); }
.resp-card.swap { opacity: 0; transform: translateY(12px); }
.resp-card small { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--salvia-escuro); }
.resp-card h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--terracota); margin: .8rem 0 1rem; }
.resp-card p { line-height: 1.6; max-width: 46ch; }
.resp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.guia-nota { margin-top: 1rem; font-size: .85rem; color: var(--salvia-escuro); }

/* serviços: índice lateral + blocos */
.svc-wrap { display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.svc-nav { position: sticky; top: 7rem; display: grid; gap: .2rem; }
.svc-nav small { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--salvia-escuro); margin-bottom: .8rem; }
.svc-nav a { display: grid; grid-template-columns: 2rem 1fr; padding: .85rem 0; border-top: 1px solid var(--linha); font-size: .98rem; color: #2b2f26; transition: color .3s, padding .4s var(--ease); }
.svc-nav a span { font-size: .75rem; letter-spacing: .1em; color: var(--salvia-escuro); padding-top: .2rem; }
.svc-nav a.on { color: var(--terracota); padding-left: .6rem; font-weight: 500; }
.svc-nav a.on span { color: var(--terracota); }
.svc { padding-bottom: clamp(4rem, 8vw, 7rem); scroll-margin-top: 6rem; }
.svc + .svc { border-top: 1px solid var(--linha); padding-top: clamp(4rem, 8vw, 7rem); }
.svc h2 { color: var(--terracota); margin: 1rem 0 1.25rem; }
.svc .ph { aspect-ratio: 16 / 9; margin: 2rem 0; }
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; margin-top: 2rem; }
.svc-cols h3 { font: 500 .78rem var(--fonte-corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--terracota); margin-bottom: .75rem; }
.svc-cols p, .svc-cols li { line-height: 1.6; }
.svc-cols li { position: relative; padding: .55rem 0 .55rem 1.5rem; border-bottom: 1px solid var(--linha); }
.svc-cols li::before { content: "✦"; position: absolute; left: 0; top: .6rem; font-size: .7rem; color: var(--terracota); }
.svc .aviso { margin-top: 1.5rem; font-size: .9rem; color: var(--salvia-escuro); border-left: 2px solid var(--terracota); padding-left: .9rem; max-width: 56ch; }
.svc .btn { margin-top: 2rem; }

/* formatos de acompanhamento */
.fmt { background: var(--areia); }
.fmt-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
.fmt h2 { color: var(--terracota-escuro); margin-top: 1.25rem; }
.fmt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fcard { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; min-height: 340px; padding: 1.75rem; background: var(--off-white); border-radius: var(--raio); transition: transform .5s var(--ease), box-shadow .5s; }
.fcard:hover { transform: translateY(-8px); box-shadow: 0 26px 40px -26px rgba(111, 63, 53, .5); }
.fcard .cod { font: 500 .78rem var(--fonte-corpo); letter-spacing: .14em; color: var(--terracota); }
.fcard h3 { font-size: 1.9rem; line-height: 1.05; color: var(--terracota); margin: 0 0 .8rem; }
.fcard p { font-size: .95rem; line-height: 1.55; }
.fcard em { display: block; margin-top: 1rem; font: 500 .72rem var(--fonte-corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--salvia-escuro); font-style: normal; }
.fmt-nota { margin-top: 2rem; font-size: .95rem; max-width: 70ch; line-height: 1.6; }

/* compromissos */
.comp-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.comp h2 { color: var(--terracota); margin: 1.25rem 0 1.25rem; }
.comp ul li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--linha); }
.comp ul li:last-child { border-bottom: 1px solid var(--linha); }
.comp ul li b { font: 400 1.7rem/1 var(--fonte-titulo); color: var(--terracota); }
.comp ul li strong { display: block; font-weight: 500; margin-bottom: .25rem; }
.comp ul li p { line-height: 1.55; color: #2b2f26; }

@media (max-width: 960px) {
  .phero { padding-top: 7rem; min-height: 0; }
  .phero-grid, .guia-grid, .fmt-head, .comp-grid, .svc-wrap { grid-template-columns: 1fr; }
  .phero .ph { aspect-ratio: 5 / 4; border-radius: 180px 180px var(--raio) var(--raio); }
  .svc-nav { position: static; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .svc-nav small { grid-column: 1 / -1; }
  .resp { position: static; }
  .fmt-grid { grid-template-columns: 1fr 1fr; }
  .svc-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fmt-grid, .svc-nav { grid-template-columns: 1fr; }
}

/* fotos dos serviços */
.svc .ph.shot { display: block; padding: 0; aspect-ratio: 16 / 9; }
.svc .ph.shot::before, .svc .ph.shot::after { content: none; }
.svc .ph.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc .ph.shot:hover img { transform: scale(1.04); }
.phero .ph.hero-fig { display: block; padding: 0; }
.phero .ph.hero-fig::before, .phero .ph.hero-fig::after { content: none; }
.phero .ph.hero-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }