/* ============================================
   Agencia Kururu — Responsive
   Mobile-first breakpoints
   ============================================ */

/* ---- MOBILE (<768px) ---- */
@media (max-width: 767px) {
	:root {
		--text-hero: 2.5rem;
		--text-5xl: 2.25rem;
		--text-4xl: 2rem;
		--text-3xl: 1.75rem;
		--text-2xl: 1.5rem;
	}

	.section-padding {
		padding-block: var(--space-16);
	}

	/* Navbar */
	.navbar__links {
		position: fixed;
		top: 0;
		right: 0;
		width: 280px;
		height: 100vh;
		background: var(--color-dark);
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: var(--space-20) var(--space-6) var(--space-6);
		transform: translateX(100%);
		transition: transform var(--duration-base) var(--ease-out);
		z-index: var(--z-overlay);
		box-shadow: var(--shadow-xl);
	}

	.navbar__links.is-open {
		transform: translateX(0);
	}

	.navbar__link {
		width: 100%;
		padding: var(--space-4) 0;
		border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
	}

	.navbar__cta {
		width: 100%;
		justify-content: center;
		margin-top: var(--space-6);
	}

	.navbar__toggle {
		display: flex;
		z-index: calc(var(--z-overlay) + 1);
	}

	.mobile-overlay {
		position: fixed;
		inset: 0;
		background: hsla(0, 0%, 0%, 0.5);
		z-index: calc(var(--z-overlay) - 1);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--duration-base), visibility var(--duration-base);
	}

	.mobile-overlay.is-visible {
		opacity: 1;
		visibility: visible;
	}

	/* Hero */
	.hero {
		min-height: 100svh;
	}

	.hero__content {
		padding-top: var(--space-24);
		padding-bottom: var(--space-12);
	}

	.hero__description {
		font-size: var(--text-sm);
	}

	.hero__actions {
		flex-direction: column;
	}

	.hero__actions .btn {
		width: 100%;
	}

	/* Brands */
	.brands__logo {
		height: 24px;
	}

	/* About */
	.about__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.about__image-wrap img {
		aspect-ratio: 16 / 10;
	}

	/* Services */
	.services__grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.service-card {
		padding: var(--space-6);
	}

	/* Counters */
	.counters__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	.counter-item {
		padding: var(--space-6) var(--space-2);
	}

	.counter-item__value {
		font-size: var(--text-3xl);
	}

	/* Portfolio */
	.portfolio__grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.portfolio__filters {
		gap: var(--space-1);
	}

	.portfolio__filter {
		font-size: var(--text-xs);
		padding: var(--space-2) var(--space-3);
	}

	/* Testimonials */
	.testimonial-card {
		padding: 0 var(--space-2);
	}

	.testimonial-card__text {
		font-size: var(--text-base);
	}

	/* Contact */
	.contact__grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	.contact-form {
		padding: var(--space-6);
	}

	.contact-form__row {
		grid-template-columns: 1fr;
	}

	/* Footer */
	.footer__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.footer__bottom {
		flex-direction: column;
		gap: var(--space-3);
		text-align: center;
	}
}

/* ---- TABLET (768px — 1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
	.section-padding {
		padding-block: var(--space-20);
	}

	/* Navbar */
	.navbar__links {
		position: fixed;
		top: 0;
		right: 0;
		width: 320px;
		height: 100vh;
		background: var(--color-dark);
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: var(--space-20) var(--space-8) var(--space-8);
		transform: translateX(100%);
		transition: transform var(--duration-base) var(--ease-out);
		z-index: var(--z-overlay);
	}

	.navbar__links.is-open {
		transform: translateX(0);
	}

	.navbar__link {
		width: 100%;
		padding: var(--space-4) 0;
		border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
	}

	.navbar__cta {
		margin-top: var(--space-6);
	}

	.navbar__toggle {
		display: flex;
		z-index: calc(var(--z-overlay) + 1);
	}

	.mobile-overlay {
		position: fixed;
		inset: 0;
		background: hsla(0, 0%, 0%, 0.5);
		z-index: calc(var(--z-overlay) - 1);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--duration-base), visibility var(--duration-base);
	}

	.mobile-overlay.is-visible {
		opacity: 1;
		visibility: visible;
	}

	/* About */
	.about__grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	.about__image-wrap img {
		aspect-ratio: 16 / 9;
	}

	/* Services */
	.services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Counters */
	.counters__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Portfolio */
	.portfolio__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Contact */
	.contact__grid {
		grid-template-columns: 1fr;
	}

	/* Footer */
	.footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8);
	}
}

/* ---- DESKTOP MEDIUM (1024px — 1279px) ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
	.about__grid {
		gap: var(--space-10);
	}

	.services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer__grid {
		gap: var(--space-6);
	}
}

/* ---- LARGE DESKTOP (1280px+) ---- */
@media (min-width: 1280px) {
	:root {
		--container-pad: var(--space-8);
	}
}

/* ---- MOTION REDUCIDO ---- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}

	.brands__track {
		animation: none;
	}
}