/* ================================================================
   SERENO – RESPONSIVE.CSS
   Media queries organizadas por breakpoint (mobile-last approach,
   seguindo o layout desktop-first do PDF).

   Breakpoints:
     1024px  → Notebook / iPad landscape
      768px  → Tablet portrait
      480px  → Mobile grande
      390px  → iPhone 14 Pro
      375px  → iPhone SE 3ª geração
      320px  → Mobile menor
   ================================================================ */


/* ================================================================
   1024px – Notebook / iPad landscape
   ================================================================ */
@media (max-width: 1024px) {

	:root {
		--container-padding-x: 32px;
		--space-xl: 80px;
	}

	.features__grid {
		gap: var(--space-sm);
	}

	.gallery__grid {
		gap: 10px;
	}

	.about__content {
		padding-left: var(--space-sm);
	}

	.contact-form__inner {
		gap: var(--space-lg);
	}

	.slider__track {
		aspect-ratio: 16 / 7;
		min-height: 380px;
	}
}


/* ================================================================
   768px – Tablet portrait
   ================================================================ */
@media (max-width: 768px) {

	:root {
		--container-padding-x: 24px;
		--space-lg:  48px;
		--space-xl:  64px;
		--header-height: 64px;
	}

	/* ---- Header ---- */
	.site-header__hamburger {
		display: flex;
	}

	/* Menu mobile: painel lateral a partir da direita */
	.site-header__nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(300px, 82vw);
		background-color: var(--color-navy-dark);
		padding-top: calc(var(--header-height) + var(--space-lg));
		padding-inline: var(--space-md);
		padding-bottom: var(--space-lg);
		transform: translateX(110%);
		transition: transform var(--transition-md);
		overflow-y: auto;
		z-index: 999;
		box-shadow: -6px 0 24px rgba(0, 0, 0, 0.35);
	}

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

	.site-header__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
	}

	.site-header__menu a,
	.site-header__menu li > a {
		font-size: 1rem;
		letter-spacing: 0.08em;
	}

	/* Overlay escuro por trás do menu mobile */
	.site-header__overlay {
		display: block;
	}

	/* ---- Hero ---- */
	.hero {
		min-height: 75vh;
	}

	.hero__title {
		font-size: clamp(2.25rem, 7vw, 3.5rem);
	}

	/* ---- Features ---- */
	.features__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	/* ---- Gallery ---- */
	.gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	/* ---- Contact Form ---- */
	.contact-form__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.contact-form__heading {
		font-size: clamp(1.875rem, 5vw, 2.5rem);
	}

	/* ---- Slider ---- */
	.slider__track {
		aspect-ratio: 4 / 3;
		min-height: 300px;
	}

	.slider__heading {
		font-size: clamp(2rem, 6vw, 3rem);
	}

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

	.about__img {
		aspect-ratio: 16 / 9;
	}

	.about__content {
		padding-left: 0;
	}

	/* ---- CTA ---- */
	.cta__title {
		font-size: clamp(1.75rem, 5vw, 2.75rem);
	}

	/* ---- Footer ---- */
	.site-footer__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-sm);
	}

	.site-footer__contact {
		align-items: center;
	}
}


/* ================================================================
   480px – Mobile grande
   ================================================================ */
@media (max-width: 480px) {

	:root {
		--container-padding-x: 20px;
		--space-lg:  40px;
		--space-xl:  56px;
	}

	/* ---- Hero ---- */
	.hero {
		min-height: 68vh;
	}

	.hero__title {
		font-size: clamp(2rem, 8vw, 2.75rem);
		margin-bottom: var(--space-sm);
	}

	.hero__badge span {
		font-size: 0.625rem;
		letter-spacing: 0.15em;
		padding: 8px 20px;
	}

	/* ---- Features ---- */
	.features {
		padding-block: var(--space-md);
	}

	.features__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
	}

	.features__icon {
		width: 48px;
		height: 48px;
	}

	/* ---- Gallery ---- */
	.gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.gallery__title {
		font-size: clamp(1.375rem, 5.5vw, 2rem);
		margin-bottom: var(--space-md);
	}

	/* ---- Slider ---- */
	.slider__track {
		aspect-ratio: 1 / 1;
		min-height: 280px;
	}

	.slider__arrow {
		width: 38px;
		height: 38px;
	}

	.slider__arrow--prev { left: 12px; }
	.slider__arrow--next { right: 12px; }

	/* ---- Botões ---- */
	.btn {
		padding: 13px 40px;
	}

	.cta__buttons .btn {
		min-width: 0;
		width: 100%;
		max-width: 280px;
	}

	/* ---- WhatsApp float ---- */
	.whatsapp-float {
		width: 50px;
		height: 50px;
		bottom: 18px;
		right: 18px;
	}

	.whatsapp-float svg {
		width: 24px;
		height: 24px;
	}
}


/* ================================================================
   390px – iPhone 14 Pro
   ================================================================ */
@media (max-width: 390px) {

	:root {
		--container-padding-x: 16px;
	}

	.hero__title {
		font-size: 2rem;
	}

	.gallery__grid {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.gallery__caption {
		font-size: 0.55rem;
	}

	.slider__eyebrow {
		font-size: 0.65rem;
	}

	.slider__heading {
		font-size: 2rem;
	}
}


/* ================================================================
   375px – iPhone SE
   ================================================================ */
@media (max-width: 375px) {

	.features__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-xs);
	}

	.features__label {
		font-size: 0.625rem;
	}

	.btn {
		padding: 12px 32px;
		font-size: 0.75rem;
	}

	.btn--enviar {
		font-size: 0.75rem;
	}
}


/* ================================================================
   320px – Mobile menor
   ================================================================ */
@media (max-width: 320px) {

	:root {
		--container-padding-x: 12px;
	}

	.hero__title {
		font-size: 1.75rem;
	}

	.gallery__grid {
		grid-template-columns: 1fr;
	}

	.cta__title {
		font-size: 1.625rem;
	}
}