/**
 * SemiConecta — Refuerzo responsive móvil.
 * Ajustes finos para pantallas pequeñas que se cargan en todo el sitio.
 */

@media (max-width: 768px) {
	/* Contenedores con menos padding lateral */
	.container { padding-inline: 18px; }

	/* Tipografía de secciones más contenida */
	.section { padding-block: 48px; }
	.section-head h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
	.eyebrow { font-size: .7rem; }

	/* Los "section-head" de dos columnas pasan a una */
	.section-head { grid-template-columns: 1fr !important; gap: 12px; }

	/* Hero */
	.hero-inner { grid-template-columns: 1fr !important; gap: 30px; }
	.hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
	.hero-copy { text-align: left; }

	/* Botones a ancho completo cuando van sueltos */
	.hero-actions, .group-hero-actions { flex-wrap: wrap; }
	.hero-actions .button { flex: 1 1 auto; }

	/* Dashboard: nav arriba en horizontal scroll, contenido debajo */
	.dash-layout { grid-template-columns: 1fr !important; gap: 20px; }
	.dash-nav { flex-direction: row; overflow-x: auto; gap: 4px; border-bottom: 1px solid var(--gray-200); padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.dash-nav-link { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 10px 14px; }
	.dash-nav-link.is-active { border-left: 0; border-bottom-color: var(--yellow); background: transparent; }
	.dash-nav-link--logout { margin-top: 0; }
	.dash-field-row { grid-template-columns: 1fr !important; }
	.dash-listing-row--full { flex-wrap: wrap; }
	.dash-listing-actions { width: 100%; }
	.dash-listing-actions .button { flex: 1; }

	/* Directorio: filtros y grid a una columna */
	.dir-stats { grid-template-columns: repeat(2, 1fr) !important; }

	/* Tarjetas de exploración de grupos: una columna */
	.dash-explore-grid { grid-template-columns: 1fr !important; }

	/* Footer: columnas apiladas */
	.footer-main { grid-template-columns: 1fr !important; gap: 30px; }
	.footer-funding { flex-direction: column; align-items: center; text-align: center; }

	/* Mega menú: ancho completo */
	.mega-panel { grid-template-columns: 1fr !important; }
	.mega-visual { display: none; }

	/* Recursos / spotlight a una columna */
	.feature-spotlight { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
	.dir-stats { grid-template-columns: 1fr !important; }
	.section-head h2 { font-size: 1.4rem; }
	.button { width: 100%; justify-content: center; }
	.header-actions .button--primary { width: auto; }
}

/* =========================================================
 * Franja intermedia 769–1100px (v0.44.0)
 *
 * Faltaba un escalón entre el diseño de escritorio y el de móvil: en tablet
 * horizontal y portátiles pequeños el mega-menú y las rejillas de tarjetas
 * quedaban apretados contra los bordes.
 * ========================================================= */
@media (min-width: 769px) and (max-width: 1100px) {
	:root {
		--container: min(1320px, calc(100vw - 56px));
		--container-narrow: min(1060px, calc(100vw - 56px));
	}

	/* Rejillas genéricas: de 4 a 3 columnas antes de saltar a móvil. */
	.grid-4 { grid-template-columns: repeat(3, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }

	/* El mega-menú a pantalla completa se queda sin aire a este ancho. */
	.mega-panel-inner { gap: 24px; }
	.mega-col { min-width: 0; }

	/* Tipografía de secciones: un punto menos para que no desborde. */
	.section-head h2 { font-size: clamp(24px, 3vw, 32px); }
}

/* Tablas del panel de gestión: scroll horizontal en vez de romper la página. */
@media (max-width: 1100px) {
	.dash-table-wrap,
	.dash-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.dash-content table { min-width: 620px; }
}