/* ==================================================
   COLOSO POST - Correcciones de diseño responsivo (oct 2026)
   Se carga DESPUÉS de responsive.css. Para revertir,
   basta con quitar el <link> a este archivo en index.html.
================================================== */

/* Evita que cualquier elemento haga la página más ancha que la pantalla */
html {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

/* La barra superior nunca debe exceder el ancho de la pantalla */
header .sticky-nav,
header .sticky-nav.stuck {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	max-width: 100vw;
}

/* --------------------------------------------------
   Escritorio (980 px o más): menú normal visible.
   Antes el menú se ocultaba hasta 1200 px, pero el
   botón móvil sólo funciona hasta 979 px, y tablets
   y laptops chicas se quedaban sin navegación.
-------------------------------------------------- */
@media (min-width: 980px) {
	#menu {
		display: block;
	}
	#mobile-nav,
	#navigation-mobile {
		display: none !important;
	}
	nav#menu #menu-nav li {
		margin-left: 32px;
	}
	header .sticky-nav,
	header .sticky-nav.stuck {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
	header .sticky-nav #logo,
	header .sticky-nav.stuck #logo {
		margin-left: 20px;
	}
	header .sticky-nav #menu,
	header .sticky-nav.stuck #menu {
		margin-right: 20px;
	}
}

/* --------------------------------------------------
   Celulares y tablets (hasta 979 px)
-------------------------------------------------- */
@media (max-width: 979px) {

	body {
		padding-left: 0;
		padding-right: 0;
	}

	/* Barra superior: logo a la izquierda, botón de menú a la derecha */
	header .sticky-nav,
	header .sticky-nav.stuck {
		position: relative;
		margin: 0;
		padding: 0 20px;
		height: auto;
		min-height: 60px;
	}
	header #logo,
	header .sticky-nav #logo,
	header .sticky-nav.stuck #logo {
		margin: 10px 0 0 0;
		padding: 0;
		background-size: contain;
		max-width: 60%;
	}
	header #logo a {
		background-size: contain;
	}
	#menu {
		display: none;
	}
	#mobile-nav,
	header .sticky-nav #mobile-nav,
	header .sticky-nav.stuck #mobile-nav {
		display: block;
		float: right;
		width: 16px;
		height: 16px;
		/* área de toque de 40x40 sin mostrar el otro estado del ícono */
		padding: 12px;
		margin: 10px -12px 0 0;
		background-origin: content-box;
		background-clip: content-box;
	}
	#navigation-mobile {
		clear: both;
		margin: 0 -20px;
		width: auto;
		float: none;
	}
	#navigation-mobile ul,
	#menu-nav-mobile {
		margin: 0;
		padding: 0;
	}

	/* Slider */
	#home-slider {
		margin-left: 0;
		margin-right: 0;
	}
	.slider-text,
	#slidecaption,
	.slide-content {
		left: 0 !important;
		right: 0 !important;
		margin-left: 0 !important;
		width: 100% !important;
	}

	/* Secciones a todo el ancho, con margen interior cómodo */
	.page,
	.page-alternate,
	footer {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: 20px;
		padding-right: 20px;
	}
	.container,
	.row,
	.rowlogo {
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	[class*="span"] {
		float: none;
		width: auto !important;
		margin-left: 0 !important;
	}

	/* OUR WORK: quitar el desplazamiento de 74 px que cortaba las miniaturas */
	.isotope,
	.isotope .isotope-item {
		margin-left: 0;
	}
	#projects {
		margin-left: 0;
		width: 100%;
	}
	.item-thumbs {
		width: 48% !important;
		margin-bottom: 4%;
	}

	/* Filtros: que se acomoden en varias líneas */
	.work-nav #filters {
		display: block;
		padding: 0;
		margin: 0 0 10px 0;
		line-height: 28px;
	}
	.work-nav #filters li {
		margin: 0 14px 0 0;
	}

	/* Equipo: tarjetas a dos columnas */
	#about .row:after {
		content: "";
		display: table;
		clear: both;
	}
	#about .row > .profile {
		float: left !important;
		width: 48% !important;
		margin: 0 0 28px 0 !important;
		min-height: 1px;
	}
	#about .row > .profile:nth-of-type(2n) {
		margin-left: 4% !important;
	}
	#about .row > .profile:nth-of-type(2n+1) {
		clear: left;
	}

	footer .credits {
		text-align: center;
		line-height: 22px;
	}
}

/* Celulares angostos: una columna de proyectos */
@media (max-width: 480px) {
	.item-thumbs {
		width: 100% !important;
	}
}

/* Oculta los íconos de redes que no tienen link real (href="http://") */
.social-icons a[href="http://"],
.social-icons a[href="#"] {
	display: none;
}
.profile .image-wrap img {
	width: 100%;
}

/* .page usaba width:100% + padding, lo que generaba 20 px de scroll horizontal también en escritorio */
.page,
.page-alternate {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Títulos gráficos (WHAT WOULD IT BE?, OUR WORK, ODD GANG): tenían margen
   fijo de 111 px y ancho mínimo de 372 px, que en celular se salían */
@media (max-width: 979px) {
	.rowlogo img {
		display: block;
		margin: 0 auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.rowlogo {
		margin-bottom: 30px;
	}
}

/* ==================================================
   Ajustes de diseño solicitados (27 oct 2026)
================================================== */

/* 1) Barra superior con más aire y logo centrado verticalmente (escritorio) */
@media (min-width: 980px) {
	header .sticky-nav,
	header .sticky-nav.stuck {
		height: 76px;
	}
	header #logo,
	header .sticky-nav #logo,
	header .sticky-nav.stuck #logo {
		padding: 0;
		margin-top: 18px;   /* (76 - 39) / 2 */
		margin-bottom: 0;
		height: 39px;
	}
	nav#menu #menu-nav li a {
		line-height: 76px;
	}
}

/* 2) Filtros de OUR WORK: acompañan a las miniaturas al hacer scroll,
      alineados arriba, justo debajo de la barra del menú (sólo escritorio) */
@media (min-width: 980px) {
	#work .row.work-grid {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: stretch;
		align-items: stretch;
	}
	#work .row.work-grid:before,
	#work .row.work-grid:after {
		display: none;
	}
	#work .row.work-grid > .span3 {
		float: none;
	}
	#work .work-nav {
		position: -webkit-sticky;
		position: sticky;
		top: 106px;              /* 76 px de la barra + 30 px de aire */
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* ==================================================
   Ajustes de diseño (27 oct 2026, segunda ronda) - sólo escritorio
================================================== */
@media (min-width: 980px) {

	/* ---- OUR WORK: columna de filtros + rejilla de miniaturas ---- */
	#work .row.work-grid {
		margin-left: 0;
		margin-right: 0;
		gap: 40px;                      /* espacio entre filtros y miniaturas */
	}
	#work .row.work-grid > .span3 {
		-webkit-flex: 0 0 170px;
		flex: 0 0 170px;
		width: 170px;
		margin-left: 0;
	}
	#work .row.work-grid > .span9 {
		-webkit-flex: 1 1 auto;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		margin-left: 0;
	}
	#work .row.work-grid > .span9 > .row {
		margin-left: 0;
		margin-right: 0;
	}
	/* sin el desplazamiento de 74 px; 4 columnas que llenan el ancho disponible */
	#work .isotope,
	#work .isotope .isotope-item {
		margin-left: 0;
	}
	#work #projects {
		margin-left: 0 !important;
		margin-right: -30px;
		width: auto !important;
	}
	#work .item-thumbs {
		width: calc(25% - 30.1px) !important;
		margin: 0 30px 30px 0 !important;
		float: left;
	}

	/* Título OUR WORK centrado sobre la rejilla de miniaturas (no sobre toda la página) */
	#work .rowlogo {
		margin-left: 0;
		margin-right: 0;
		padding-left: 210px;            /* 170 px de filtros + 40 px de espacio */
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: auto;
		min-width: 0;
	}
	#work .rowlogo > [class*="span"] {
		float: none;
		width: auto;
		margin-left: 0;
	}
	#work .rowlogo img {
		display: block;
		width: 960px;
		margin: 0 auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
	#work .row.work-grid {
		clear: both;
	}

	/* ---- EQUIPO: 5 columnas, centradas ---- */
	#about .row.team-grid {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
		column-gap: 30px;
		row-gap: 20px;
		margin-left: 0;
		margin-right: 0;
	}
	#about .row.team-grid:before,
	#about .row.team-grid:after {
		display: none;
	}
	#about .row.team-grid > .profile {
		float: none;
		width: calc((100% - 120px) / 5) !important;
		margin: 0 !important;
	}
}

/* Miniaturas de OUR WORK siempre a todo el ancho del cuadro.
   El estilo original sólo las estiraba si tenían link (.item-thumbs a + img);
   los trabajos sin link desde el panel quedaban más chicos. */
.item-thumbs > img {
	width: 100%;
}