/*
 * Dentelier — responsive.css
 *
 * Mobile-first. Aquí van las media queries que afectan layout y
 * tipografía global; los bloques pueden agregar las suyas en su sección.
 */

/* ── Tablet ── */
@media (max-width: 992px) {
	:root {
		--dt-fs-h1: 2.5rem;
		--dt-fs-h2: 1.875rem;
		--dt-fs-h3: 1.5rem;
		--dt-fs-display: 3rem;
		--dt-section-pad-y: 4rem;
		--dt-header-height: 72px;
	}

	/* Mobile: ☰  ·  LOGO centrado  ·  (vacío para balance visual) */
	.site-header__inner {
		grid-template-columns: 1fr auto 1fr;
	}
	.site-header__actions { display: none; }
	.site-nav { justify-self: start; }
	.site-nav__lang--desktop { display: none; }
	.site-nav__toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }

	.site-nav__panel {
		display: none;
		position: absolute;
		top: var(--dt-header-height);
		left: 0; right: 0;
		padding: var(--dt-space-md) var(--dt-container-pad) var(--dt-space-xl);
		background-color: var(--dt-color-bg);
		border-bottom: 1px solid var(--dt-color-border);
		box-shadow: var(--dt-shadow-md);
		max-height: calc(100vh - var(--dt-header-height));
		overflow-y: auto;
	}
	.site-nav__panel.is-open { display: block; }

	.site-nav__menu {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 0;
		margin: 0 0 var(--dt-space-md);
	}
	.site-nav__menu li a {
		display: block;
		padding: var(--dt-space-sm) 0;
		border-bottom: 1px solid var(--dt-color-border);
		font-size: var(--dt-fs-lead);
	}
	.site-nav__menu li:last-child a { border-bottom: 0; }

	.site-nav__extras {
		display: flex;
		flex-direction: column;
		gap: var(--dt-space-md);
		padding-top: var(--dt-space-md);
		border-top: 1px solid var(--dt-color-border);
	}
	.site-nav__extras .site-nav__cta .btn { width: 100%; }

	.newsletter__inner { grid-template-columns: 1fr; gap: var(--dt-space-lg); }
	.form-grid--2 { grid-template-columns: 1fr; }

	/* Hero: image arriba (orden visual invertido) + texto debajo */
	.hero {
		min-height: auto;
	}
	.hero__inner {
		grid-template-columns: 1fr;
		gap: var(--dt-space-xl);
		min-height: auto;
		padding-top: 0;
	}
	.hero__media {
		order: -1;              /* image arriba */
		position: relative;
		height: 520px;
		margin-inline-end: 0;
		min-height: 0;
	}
	.hero__image {
		object-position: bottom center;
	}
	.hero__content {
		max-width: 100%;
		padding-block: var(--dt-space-xl) var(--dt-space-2xl);
		padding-inline-end: 0;
		text-align: left;
	}
}

/* ── Mobile ── */
@media (max-width: 640px) {
	:root {
		--dt-fs-h1: 2rem;
		--dt-fs-h2: 1.625rem;
		--dt-fs-h3: 1.375rem;
		--dt-fs-display: 2.5rem;
		--dt-fs-body: .9375rem;
		--dt-section-pad-y: 3rem;
		--dt-container-pad: 1rem;
	}

	/* Footer: brand row + meta row pasan a stack vertical */
	.site-footer__brand-row { grid-template-columns: 1fr; gap: var(--dt-space-xl); }
	.site-footer__nav { align-items: flex-start; gap: var(--dt-space-lg); }
	.site-footer__menu { flex-wrap: wrap; gap: var(--dt-space-lg); }
	.site-footer__meta { flex-direction: column; align-items: flex-start; }

	.newsletter__form { flex-direction: column; align-items: stretch; }
	.newsletter__input { width: 100%; }
	.newsletter__submit { width: 100%; justify-content: center; }

	/* Hero mobile: imagen más compacta + CTAs full width */
	.hero__media { height: 420px; }
	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { width: 100%; }

	.modal__dialog { padding: var(--dt-space-xl) var(--dt-space-md) var(--dt-space-md); border-radius: var(--dt-radius-md); }
	.modal__steps { gap: var(--dt-space-sm); flex-wrap: wrap; }
}

/* ── Small mobile ── */
@media (max-width: 380px) {
	html { font-size: 14px; }
}