/**
 * 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; }
}