/* Página de nicho — estilos específicos (reaproveita styles/app/sections) */

/* Breadcrumb */
.crumb { border-bottom: 1px solid var(--border); background: #fff; padding-top: 76px; }
.crumb .container { display: flex; align-items: center; gap: .5rem; padding-block: .9rem; font-size: .85rem; color: var(--text-muted); flex-wrap: wrap; }
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--accent); }
.crumb svg { width: 14px; height: 14px; color: var(--border-strong); }
.crumb span { color: var(--primary); font-weight: 600; }

/* Hero do nicho */
.nhero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.nhero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.nhero__h1 { font-size: clamp(2.3rem, 5vw, 4rem); margin: 1.3rem 0 0; }
.nhero__sub { margin-top: 1.3rem; max-width: 46ch; }
.nhero__art { position: relative; }
.nhero__photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 4.2; box-shadow: var(--shadow-lg); background: var(--bg-softer); display: grid; place-items: center; }
.nhero__photo img { width: 100%; height: 100%; object-fit: cover; }
.nhero__photo.ph { background: repeating-linear-gradient(135deg, #EDF1F7 0 14px, #E4EAF3 14px 28px); }
.nhero__photo .ph__txt { display: none; }
.nhero__photo.ph .ph__txt { display: block; }
.nhero__fine { margin-top: 1.2rem; font-size: .82rem; color: var(--on-dark-muted); }

/* Dores */
.pains__grid { grid-template-columns: repeat(4, 1fr); margin-top: clamp(2.2rem, 4vw, 3rem); }
.pains__card { padding: 1.6rem 1.5rem; position: relative; }
.pains__q { font-family: var(--font-display); font-size: 3rem; line-height: .6; color: var(--accent-soft); position: absolute; top: 1.1rem; right: 1.2rem; }
.pains__card h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.pains__foot { text-align: center; margin-top: 2.2rem; font-size: 1.05rem; color: var(--text-muted); }
.pains__foot a { color: var(--accent); font-weight: 600; }

@media (max-width: 980px) {
  .nhero__grid { grid-template-columns: 1fr; }
  .nhero__art { order: -1; max-width: 420px; }
  .pains__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pains__grid { grid-template-columns: 1fr; }
  body { padding-bottom: 0; }
}