/* IDSR · páginas por nicho (/sites-para-saloes/, -imobiliarias/, -confeitarias/, -psicologos/)
   Reaproveita site.css e tokens.css (planos, FAQ em chat, final, rodapé, modal). Aqui só o que é próprio do nicho.
   Sem preloader: a página entra direto. Gerado por site/scripts/gerar_nichos.py. */

/* hero */
.nh { padding-top: calc(var(--hud) + clamp(48px, 9vw, 128px)); padding-bottom: clamp(56px, 8vw, 112px); }
.nh-grade { display: grid; gap: clamp(20px, 2.4vw, 32px); justify-items: start; }
.nh .rotulo { color: var(--creme-50); }
.nh .t1 { font-size: clamp(34px, 6.4vw, 100px); max-width: 15em; }
.nh .t1 .l { text-wrap: balance; }
.nh .corpo-g { color: var(--creme-70); max-width: 38ch; }
.nh-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 8px; }
.nh-acoes .link-seta { font-size: 16px; }

/* demos do nicho */
.nd { padding-block: clamp(56px, 8vw, 128px); }
.nd .cab { margin-bottom: clamp(32px, 4vw, 64px); }
.nd-grade { display: grid; gap: clamp(28px, 3vw, 40px); }
@media (min-width: 900px) { .nd-grade { grid-template-columns: 1.55fr 1fr; align-items: start; } }
.nd-card { display: grid; gap: 18px; align-content: start; }
.nd-img { overflow: hidden; border-radius: var(--imagem-raio); background: var(--roxo); aspect-ratio: 16 / 10; }
.nd-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform var(--dur-entrada) var(--ease-padrao); }
.nd-card:hover .nd-img img, .nd-card:focus-visible .nd-img img { transform: scale(1.035); }
.nd-txt { display: grid; gap: 10px; justify-items: start; }
.nd-txt .rotulo { font: 11px/1.5 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--creme-50); }
.nd-nome { font: var(--peso-titulo) clamp(22px, 2vw, 30px)/1.05 var(--font-titulo); text-transform: uppercase; letter-spacing: -.01em; }
.nd-nome small { font: 400 12px var(--font-mono); letter-spacing: .1em; color: var(--creme-50); text-transform: none; }
.nd-txt p { color: var(--creme-70); font-size: 16px; line-height: 1.5; max-width: 52ch; }
.nd-txt .link-seta { margin-top: 4px; font-size: 15px; }
.nd-card--grande .nd-nome { font-size: clamp(26px, 2.6vw, 40px); }
.nd-nota { margin-top: clamp(28px, 4vw, 48px); font: 12px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--creme-50); max-width: 70ch; }

/* 3 dores (seção creme) */
.nr { padding-block: clamp(72px, 9vw, 150px); }
.nr-lista { display: grid; gap: clamp(28px, 3vw, 40px); }
@media (min-width: 900px) { .nr-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); } }
.nr-lista li { display: grid; gap: 14px; align-content: start; padding-top: 18px; border-top: 1.5px solid var(--noite); }
.nr-n { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; color: rgba(39, 32, 29, .6); }
.nr-lista p { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; font-weight: 600; }

/* o que entra */
.ne { padding-block: clamp(72px, 9vw, 150px); }
.ne-grade { display: grid; gap: clamp(8px, 2vw, 32px); }
@media (min-width: 900px) { .ne-grade { grid-template-columns: 1fr 1.1fr; align-items: start; gap: clamp(32px, 5vw, 96px); } .ne .cab { margin-bottom: 0; } }
.ne-lista { border-top: 1px solid var(--linha-forte); }
.ne-lista li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--linha-forte); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; }
.ne-lista li::before { content: ""; position: absolute; left: 0; top: 1.4em; width: 8px; height: 8px; border-radius: 50%; background: var(--brasa); }
.ne-nota { margin-top: 24px; padding: 16px 18px; border: 1.5px dashed var(--linha-forte); border-radius: var(--raio-card); font-size: 15px; line-height: 1.5; color: var(--creme-70); }

/* planos: a rolagem para #planos e #contato não fica colada no HUD */
.planos, .final { scroll-margin-top: var(--hud); }