/* =====================================================================
   LETO — layout global: stage/container e a escala contida em telas largas.
   ===================================================================== */
:root { --stage: 1280px; --mx: clamp(20px, 3.6vw, 46px); }

/* Frame 1280 centrado (reprodução fiel do design). */
.stage { width: 100%; max-width: var(--stage); margin-inline: auto; padding-inline: var(--mx); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }

/* Escala contida em telas largas: o design preenche a tela sem inflar fontes. */
@media (min-width: 1281px) {
	html { zoom: clamp(1, calc(100vw / 1680px), 1.05); }
}

/* Escala contida em telas mobile: o design preenche a tela sem inflar fontes. */
@media (max-width: 1280px) {
	.stage { padding-top: 100px; }
	.acad-tour-replay { max-width: 110px; }
	.cookie-banner { z-index: 99999!important; }
}


}

.section-dark { background: var(--leto-charcoal); color: #fff; }
.section-paper { background: var(--leto-paper); color: var(--leto-ink); }
.center { display: flex; justify-content: center; padding-block: clamp(2rem, 3vw, 40px); }

/* Barra gradiente reutilizável (elemento de marca: escuro -> verde). */
.grad-bar { display: block; height: 4px; background: linear-gradient(90deg, #2d2d2d 0%, #6b7a3a 55%, var(--leto-green) 100%); }