/* ═══════════════════════════════════════════════════════════════════════
   Página de projeto (/projetos/<slug>): herói temático, ficha, recursos, FAQ
   A cor vem de --accent / --accent-2, definidas no <html> pelo layout.
   ═══════════════════════════════════════════════════════════════════════ */

.proj__hero { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem); }
@media (min-width: 960px) { .proj__hero { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.75rem; font: 500 .82rem/1.4 var(--mono); color: var(--ink-3); }
.crumbs a { transition: color .25s; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink-2); }

.proj__title { width: fit-content; font-size: clamp(2.4rem, 1rem + 5vw, 4.6rem); line-height: 1; letter-spacing: -.045em; }
.proj__tagline { margin: 1rem 0 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.proj__lead { max-width: 52ch; margin: 1.1rem 0 2rem; color: var(--ink-2); font-size: 1.1rem; }
.proj__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Palco onde mora o visual do projeto (views/visuals/<slug>.eta). Tudo dentro usa cqw para escalar. */
.proj__art { position: relative; perspective: 1100px; }
.stage {
	position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 5 / 4; container-type: inline-size;
	border-radius: 28px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
	background:
		radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
		linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015));
	box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 1px 0 rgb(255 255 255 / .08);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	transition: transform .25s ease-out; will-change: transform;
}

.about-proj { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .about-proj { grid-template-columns: 1.4fr 1fr; align-items: start; gap: 4rem; } }
.about-proj h2 { margin-bottom: 1.4rem; }
.prose { max-width: 62ch; color: var(--ink-2); font-size: 1.08rem; }

.spec { padding: 1.5rem; }
.spec dl { display: grid; gap: 1.1rem; margin: 0; }
.spec dl > div { display: grid; gap: .4rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.spec dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.spec dt { font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .15em; color: var(--ink-3); }
.spec dd { margin: 0; font-weight: 600; }

.features { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.feature { padding: 1.5rem; transition: transform .45s var(--ease), border-color .3s; }
.feature:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.feature__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.feature__icon .i { width: 22px; height: 22px; }
.feature h3 { margin: 1.1rem 0 .45rem; font-size: 1.12rem; letter-spacing: -.015em; }
.feature p { margin: 0; color: var(--ink-2); font-size: .96rem; }

.sources { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.source-group { padding: 1.4rem; }
.source-group h3 { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: 1.1rem; letter-spacing: -.015em; }
.source-group p { margin: .4rem 0 1rem; color: var(--ink-2); font-size: .92rem; }

.endpoints { padding: .4rem 0; }
.endpoint { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; align-items: center; padding: .95rem 1.2rem; border-bottom: 1px solid var(--line); }
.endpoint:last-child { border-bottom: 0; }
.endpoint code { padding: 0; background: none; font-size: .88rem; word-break: break-all; }
.endpoint__text { grid-column: 1 / -1; color: var(--ink-2); font-size: .92rem; }
@media (min-width: 800px) {
	.endpoint { grid-template-columns: 78px minmax(0, 1.2fr) 1fr; }
	.endpoint__text { grid-column: auto; }
}
.method { padding: .3rem .5rem; border-radius: 8px; text-align: center; font: 700 .72rem/1 var(--mono); background: rgb(255 255 255 / .06); }
.method--get { color: #4ade80; background: rgb(74 222 128 / .12); }
.method--post { color: #60a5fa; background: rgb(96 165 250 / .12); }
.method--delete { color: #f87171; background: rgb(248 113 113 / .12); }

.faq { display: grid; gap: .75rem; max-width: 820px; }
.faq__item { padding: 0 1.4rem; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .i { width: 1.25em; height: 1.25em; color: var(--accent); transition: transform .35s var(--ease); }
.faq__item[open] summary .i { transform: rotate(180deg); }
.faq__item p { margin: 0 0 1.25rem; color: var(--ink-2); }

.more { margin: 2rem 0 0; text-align: center; }