/**
 * Móvil — evitar scroll horizontal y ajustar ritmo en layouts Arkitect.
 */

/* overflow-x en html/body rompe position:sticky (home + hero scroll servicios) */
html:not(:has(body.home)):not(:has(.has-service-hero-scroll)) {
	overflow-x: clip;
}

body.orantes-service-page:not(:has(.has-service-hero-scroll)),
body.orantes-contact-page,
body.orantes-about-page:not(:has(.has-service-hero-scroll)) {
	overflow-x: clip;
	max-width: 100%;
}

.ark-root,
.orantes-service-ark,
.orantes-contact-ark,
.orantes-about-ark,
.wp-site-blocks,
.orantes-service-root,
.orantes-main,
.ark-viewport,
.ark-content-shell {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

.ark-root :where(img, video, iframe, svg) {
	max-width: 100%;
	height: auto;
}

.ark-root :where(table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.orantes-service-ark .ark-srv-logos-marquee {
	max-width: 100%;
	contain: paint;
	isolation: isolate;
}

.orantes-service-ark .ark-srv-sheet,
.orantes-service-ark .ark-srv-sheet-inner,
.orantes-about-ark .ark-about-sheet,
.orantes-about-ark .ark-about-sheet-inner {
	overflow-x: clip;
	max-width: 100%;
}

.orantes-megamenu {
	max-width: 100%;
	box-sizing: border-box;
}

/* Home: mismo alto de hero que páginas de servicio (móvil / tablet estrecha). */
@media (max-width: 839.98px) {
	body.home .ark-hero {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: calc(100dvh - 32px);
		max-height: calc(100dvh - 32px);
		overflow: hidden;
	}

	body.home .ark-hero-center {
		flex: 1 1 auto;
		min-height: 0;
		justify-content: center;
		padding: 24px 32px 120px;
	}

	body.home .ark-hero-sub {
		margin-top: 32px;
	}

	body.home .ark-viewport,
	body.home .ark-root.has-home-hero-scroll .ark-home-hero-scroll {
		overflow: visible !important;
	}

	/* Home: hero sticky + servicios blancos que suben (como páginas servicio). */
	body.home .ark-root.has-home-hero-scroll .ark-home-hero-scroll {
		position: relative;
		z-index: 1;
		min-height: 125vh;
	}

	body.home .ark-root.has-home-hero-scroll .ark-home-hero-scroll > .ark-hero {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1;
		align-self: flex-start;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: calc(100dvh - 32px);
		max-height: calc(100dvh - 32px);
	}

	body.home .ark-root.has-home-hero-scroll .ark-services {
		position: relative;
		z-index: 2;
		margin-top: -120px;
		border-radius: clamp(40px, 6vw, 60px) clamp(40px, 6vw, 60px) var(--ark-radius, 60px) var(--ark-radius, 60px);
		overflow: hidden;
		box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.18);
		padding-top: clamp(40px, 6vw, 56px);
	}
}

@media (prefers-reduced-motion: reduce) {
	@media (max-width: 839.98px) {
		body.home .ark-root.has-home-hero-scroll .ark-home-hero-scroll {
			min-height: 0;
		}

		body.home .ark-root.has-home-hero-scroll .ark-home-hero-scroll > .ark-hero {
			position: relative;
			top: auto;
		}

		body.home .ark-root.has-home-hero-scroll .ark-services {
			margin-top: -80px;
			box-shadow: none;
		}
	}
}

@media (max-width: 839.98px) {
	/* Silo reformas: hero H1 centrado (refuerzo sobre service-page.css). */
	body.orantes-reformas-silo.orantes-service-page .orantes-service-ark.has-service-hero-scroll .ark-service-hero-scroll > .ark-service-hero {
		display: flex;
		flex-direction: column;
		min-height: calc(100dvh - 32px);
		max-height: calc(100dvh - 32px);
	}

	body.orantes-reformas-silo.orantes-service-page .orantes-service-ark .ark-service-hero-center {
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}

	body.orantes-reformas-silo.orantes-service-page .orantes-service-ark .ark-service-hero-h1,
	body.orantes-reformas-silo.orantes-service-page .orantes-service-ark .ark-service-hero-h1 .ark-hero-line {
		width: 100%;
		max-width: 100%;
		text-align: center;
		margin-inline: auto;
		text-wrap: balance;
	}

	body.orantes-reformas-silo.orantes-service-page .orantes-service-ark .ark-service-hero-h1 .ark-hero-line.zodiak {
		font-size: clamp(3rem, 11vw, 7rem);
	}

	/* Franja decorativa Framer sin contenido — confunde en móvil */
	body.home .ark-project-bar {
		display: none;
	}

	/* Reset WP anula margin en <p> — separar eyebrow del grid de fotos */
	body.home .ark-team > .ark-eyebrow {
		margin-bottom: 40px;
	}

	body.home .ark-bold-title .satoshi {
		font-size: clamp(1.375rem, 5.5vw, 2rem);
		line-height: 1.1;
		letter-spacing: -0.02em;
	}

	body.home .ark-bold-services .ark-bold-services-title {
		padding-top: 32px;
		margin-bottom: 16px;
	}
}

@media (max-width: 781px) {
	.ark-root {
		--ark-gap: clamp(10px, 3vw, 16px);
		--ark-radius: clamp(24px, 8vw, 60px);
	}

	body.home .ark-hero-center {
		padding-left: 24px;
		padding-right: 24px;
	}

	body:not(.home) .ark-viewport:not(:has(.ark-service-hero-scroll)) {
		overflow-x: clip;
	}

	.ark-viewport {
		padding-left: max(var(--ark-gap), env(safe-area-inset-left, 0px));
		padding-right: max(var(--ark-gap), env(safe-area-inset-right, 0px));
	}

	body.home .ark-viewport,
	body.home .ark-projects-stack,
	body .has-home-hero-scroll .ark-home-hero-scroll,
	body .has-service-hero-scroll .ark-viewport,
	body .has-service-hero-scroll .ark-service-hero-scroll,
	body .has-service-hero-scroll .ark-case-hero-scroll {
		overflow: visible !important;
	}

	.ark-header {
		padding-left: 24px;
		padding-right: 24px;
	}

	.ark-team,
	.ark-bold,
	.ark-motion-inner,
	.ark-stats,
	.ark-project-top,
	.ark-services,
	.ark-footer {
		padding-left: 24px;
		padding-right: 24px;
	}

	.ark-contact {
		padding-left: 24px;
		padding-right: 24px;
	}

	.ark-project-view {
		right: 20px;
		bottom: calc(72px + 24px);
		width: 56px;
		height: 56px;
		font-size: 10px;
	}

	.ark-bold-title :is(.zodiak, .satoshi),
	.ark-project-h2 :is(.zodiak, .satoshi) {
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	.orantes-service-ark .ark-srv-faq-summary {
		min-width: 0;
	}

	.orantes-service-ark .ark-srv-faq-q {
		min-width: 0;
		font-size: clamp(17px, 4.5vw, 20px);
		line-height: 1.35;
	}

	.orantes-service-ark .ark-srv-sheet {
		padding-left: 16px;
		padding-right: 16px;
	}

	.orantes-header-bar {
		padding-left: max(1rem, env(safe-area-inset-left, 0px));
		padding-right: max(1rem, env(safe-area-inset-right, 0px));
	}

	.orantes-pill-nav {
		justify-content: flex-start;
		max-width: 100%;
	}

	.orantes-pill-nav > a,
	.orantes-nav-mega__trigger {
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
	}
}