/* =====================================================================
   404 — página não encontrada (2026-06-24)
   Hero charcoal com "404" gigante decorativo + lede + 2 CTAs.
   Grid de atalhos pras seções principais embaixo.
   ===================================================================== */

.leto-404 { background: var(--leto-paper, #ECECEA); }

/* Hero escuro full-width */
.leto-404__hero {
	background: var(--leto-charcoal, #1f1f1d);
	color: #fff;
	padding-block: clamp(96px, 80px + 6vw, 200px) clamp(64px, 48px + 4vw, 140px);
	position: relative; overflow: hidden;
}
.leto-404__hero::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(159,180,94,.08), transparent 60%);
	pointer-events: none;
}
.leto-404__inner {
	max-width: 760px; margin: 0 auto;
	text-align: center; position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 0;
}
.leto-404__code {
	display: block;
	font-size: clamp(120px, 80px + 12vw, 220px);
	font-weight: 700; line-height: 1;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(159, 180, 94, .55);
	margin-bottom: clamp(.8rem, .5rem + 1vw, 1.2rem);
}
.leto-404__title {
	font-size: clamp(28px, 22px + 1.5vw, 44px);
	font-weight: 500; line-height: 1.1;
	color: #fff; margin: 0 0 1rem;
}
.leto-404__lede {
	max-width: 540px;
	font-size: clamp(15.5px, 14px + .4vw, 17.5px);
	line-height: 1.55;
	color: rgba(255,255,255,.72);
	margin: 0 0 clamp(1.6rem, 1rem + 1.5vw, 2.4rem);
}
.leto-404__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* CTA verde (reuso) */
.leto-404__actions .pill-green {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding-inline: 1.4rem;
	border-radius: 999px;
	background: var(--leto-green, #9FB45E);
	color: var(--leto-ink, #1a1a1a);
	font-size: 14.5px; font-weight: 500;
	text-decoration: none;
	transition: background .25s, transform .25s;
}
.leto-404__actions .pill-green:hover { background: #bccf85; transform: translateY(-1px); }

/* CTA secundário outline branco */
.leto-404__actions .pill-outline {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding-inline: 1.4rem;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,.4);
	font-size: 14.5px; font-weight: 500;
	text-decoration: none;
	transition: background .25s, color .25s, border-color .25s;
}
.leto-404__actions .pill-outline:hover { background: #fff; color: var(--leto-ink, #1a1a1a); border-color: #fff; }

/* Grid de atalhos */
.leto-404__atalhos { padding-block: clamp(48px, 32px + 3vw, 88px); }
.leto-404__atalhos-title {
	font-size: clamp(20px, 16px + .8vw, 24px); font-weight: 500;
	color: var(--leto-ink, #1a1a1a);
	margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.4rem);
}
.leto-404__grid {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 8px + 1vw, 18px);
}
.leto-404__card {
	display: flex; flex-direction: column; gap: 6px;
	padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
	background: #fff;
	border: 1px solid rgba(45,45,45,.10);
	border-radius: 8px;
	color: var(--leto-ink, #1a1a1a);
	text-decoration: none;
	position: relative;
	transition: border-color .25s, transform .25s, box-shadow .25s;
}
.leto-404__card:hover {
	border-color: rgba(45,45,45,.32);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -16px rgba(0,0,0,.18);
}
.leto-404__card-title {
	font-size: clamp(16px, 14px + .4vw, 18px); font-weight: 600;
	color: var(--leto-ink, #1a1a1a);
}
.leto-404__card-desc {
	font-size: 13px; line-height: 1.4;
	color: var(--leto-gray, #666);
}
.leto-404__card-arrow {
	position: absolute; right: clamp(1rem, .7rem + .8vw, 1.4rem); top: clamp(1.1rem, .8rem + 1vw, 1.6rem);
	font-size: 18px; color: var(--leto-green-deep, #4a5a32);
	transition: transform .25s;
}
.leto-404__card:hover .leto-404__card-arrow { transform: translateX(4px); }

@media (max-width: 880px) { .leto-404__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .leto-404__grid { grid-template-columns: 1fr; } }