/**
 * DC PROBUILD — Adaptación a pantallas.
 *
 * El CSS base está escrito para móvil en lo que importa (rejillas con
 * `auto-fit`, tipografía con `clamp`), así que aquí sólo se corrigen los
 * casos que no se resuelven solos: disposiciones de dos columnas, la línea
 * temporal del proceso y el menú de navegación.
 *
 * Puntos de corte: 1280, 1024, 768, 560, 400.
 */

/* =====================================================================
   ≤ 1280px — portátiles pequeños
   ===================================================================== */
@media (max-width: 1280px) {
	.dcpro-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.dcpro-footer__widgets {
		grid-column: span 2;
	}

	.portfolio-item--large {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* =====================================================================
   ≤ 1024px — tablets
   ===================================================================== */
@media (max-width: 1024px) {
	:root {
		--header-height: 72px;
	}

	/*
	 * A partir de aquí manda el panel lateral, que vive fuera de <header>.
	 * El menú de escritorio se retira del todo: dejarlo oculto con
	 * `visibility` seguiría ocupando espacio en el flex de la cabecera.
	 */
	.dcpro-nav {
		display: none;
	}

	.dcpro-nav-toggle {
		display: grid;
	}

	/* Sólo el icono del teléfono: el número no cabe junto al botón. */
	.dcpro-header__phone-text {
		display: none;
	}

	.about__grid,
	.contact__grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	.about__media {
		max-width: 34rem;
		margin-inline: auto;
	}

	/* La línea temporal se alinea a la izquierda y se ocultan las fotos:
	   en tablet no caben sin empequeñecer el texto hasta lo ilegible. */
	.process__timeline::before {
		left: 1.75rem;
	}

	.process__item {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		gap: var(--space-md);
	}

	.process__number {
		grid-column: 1;
		grid-row: 1;
	}

	.process__content,
	.process__item:nth-child(even) .process__content {
		grid-column: 2;
		grid-row: 1;
	}

	.process__media {
		display: none;
	}

	.dcpro-project__body,
	.dcpro-service-single__body,
	.dcpro-single__body:has(.dcpro-sidebar),
	.dcpro-page__body:has(.dcpro-sidebar),
	.dcpro-archive:has(.dcpro-sidebar) {
		grid-template-columns: 1fr;
	}

	.dcpro-project__facts,
	.dcpro-service-single__aside {
		position: static;
	}
}

/* =====================================================================
   ≤ 768px — móviles grandes
   ===================================================================== */
@media (max-width: 768px) {
	:root {
		--space-3xl: 3.5rem;
	}

	.dcpro-header__cta {
		display: none;
	}

	.hero {
		min-height: auto;
		padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xl);
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: var(--space-xl);
	}

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

	.hero__scroll {
		display: none;
	}

	.about__media {
		padding-right: 0;
		padding-bottom: 3rem;
	}

	/* La segunda imagen del bloque «sobre nosotros» se retira: superpuesta
	   en pantalla estrecha tapa la principal. */
	.about__image--second {
		display: none;
	}

	.about__image--main {
		aspect-ratio: 4 / 3;
	}

	.portfolio-grid {
		grid-auto-rows: 17rem;
	}

	.contact__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.dcpro-footer__top {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.dcpro-footer__widgets {
		grid-column: auto;
	}

	.dcpro-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.dcpro-search-result {
		grid-template-columns: 1fr;
	}

	.dcpro-search-result__media {
		max-height: 12rem;
	}

	.dcpro-post-nav {
		flex-direction: column;
	}

	.dcpro-single__media,
	.dcpro-page__media,
	.dcpro-service-single__media {
		margin-top: 0;
	}

	.dcpro-comments__list .children {
		margin-left: 0;
		padding-left: var(--space-sm);
	}

	/* Objetivos táctiles de al menos 44 px, como pide WCAG 2.5.5. */
	.filter-btn,
	.dcpro-pagination a,
	.dcpro-social a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* =====================================================================
   ≤ 560px — móviles
   ===================================================================== */
@media (max-width: 560px) {
	.hero__stats {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	.hero__stat {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 0.6rem;
		text-align: left;
	}

	.hero__stat-number {
		font-size: var(--text-2xl);
	}

	.hero__stat-label {
		margin-top: 0;
	}

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

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

	.contact__form {
		padding: var(--space-md);
	}

	.faq__question {
		font-size: var(--text-base);
		padding: var(--space-sm);
	}

	.faq__answer {
		padding: 0 var(--space-sm) var(--space-sm);
	}

	.dcpro-to-top {
		right: var(--space-sm);
		bottom: var(--space-sm);
	}
}

/* =====================================================================
   ≤ 400px — móviles pequeños
   ===================================================================== */
@media (max-width: 400px) {
	:root {
		--gutter: 1rem;
	}

	.stats-banner__grid {
		grid-template-columns: 1fr;
	}

	.btn {
		padding-inline: 1.25rem;
		font-size: var(--text-xs);
	}

	.dcpro-brand {
		font-size: 1.1rem;
	}
}

/* =====================================================================
   Impresión
   ===================================================================== */
@media print {
	.dcpro-header,
	.dcpro-footer,
	.dcpro-to-top,
	.hero__media,
	.hero__overlay,
	#dcpro-particles,
	.dcpro-cursor-dot,
	.dcpro-cursor-ring,
	.portfolio__filter,
	.contact__form {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.dcpro-section {
		padding-block: 1rem;
		background: none !important;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	/* Los enlaces internos no aportan nada en papel. */
	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}
}

/* =====================================================================
   Modo de alto contraste
   ===================================================================== */
@media (forced-colors: active) {
	.btn,
	.filter-btn,
	.service-card,
	.testimonial-card,
	.why-card {
		border: 1px solid CanvasText;
	}

	.dcpro-icon {
		forced-color-adjust: auto;
	}
}