/* ===================================================================
   layout.css
   Reemplaza lo mínimo indispensable de Gantry5 (nucleus.css / helium*.css)
   que Bootstrap no trae: el sistema de grilla .g-grid/.g-block,
   el menú principal .g-toplevel, el offcanvas mobile y el botón "Ir Arriba".
   Cargar ANTES de custom.css.
   =================================================================== */

html { scroll-behavior: smooth; }

.hidden { display: none !important; }

/* Contenedor general (equivalente a .g-container) */
.g-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* Grilla simplificada (reemplaza nucleus.css) */
.g-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.g-block {
	box-sizing: border-box;
	padding: 0 15px;
	width: 100%;
}
.g-block.size-100 { width: 100%; }
.g-block.size-70  { width: 70%; }
.g-block.size-55  { width: 55%; }
.g-block.size-50  { width: 50%; }
.g-block.size-31  { width: 31%; }
.g-block.size-14  { width: 14%; }

@media (max-width: 768px) {
	.g-block.size-31,
	.g-block.size-55,
	.g-block.size-14 { width: 100%; }
}

/* Logo */
.g-logo { display: inline-block; }
.g-logo img { display: block; }

/* Menú principal (desktop) */
.g-main-nav { width: 100%; }
.g-toplevel {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.g-menu-item { margin: 0 0 0 1.8em; }
.g-menu-item-container {
	display: inline-block;
	padding: .6em 0;
	text-decoration: none;
}

/* Redes sociales del header */
.g-social { display: flex; gap: .75em; justify-content: flex-end; }
.g-social a { text-decoration: none; }

/* Botón hamburguesa: oculto en desktop, visible en mobile */
.g-offcanvas-toggle {
	display: none;
	border: 0;
	cursor: pointer;
}

/* Panel offcanvas (menú mobile deslizante) */
#g-offcanvas {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 280px;
	max-width: 80vw;
	background: #0c455e;
	transform: translateX(100%);
	transition: transform .3s ease;
	z-index: 1001;
	overflow-y: auto;
	padding: 5rem 1.5rem 2rem;
	box-shadow: -4px 0 20px rgba(0,0,0,.25);
}
#g-offcanvas.open { transform: translateX(0); }

#g-mobilemenu-container ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#g-mobilemenu-container ul > li {
	border-bottom: 1px solid rgba(255,255,255,.15);
}
#g-mobilemenu-container ul > li > a {
	display: block;
	padding: 1em .5em;
	color: #fff;
	text-decoration: none;
}

.g-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 1000;
}
.g-menu-overlay.open { display: block; }

@media (max-width: 768px) {
	.g-offcanvas-toggle { display: flex; align-items: center; justify-content: center; }
	.g-main-nav, .g-social-header { display: none; }
}

/* Botón "Ir Arriba" (flotante, fijo abajo a la derecha) */
.g-totop {
	position: fixed;
	right: 1.2rem;
	bottom: 1.2rem;
	z-index: 998;
}
.g-totop a {
	display: flex;
	align-items: center;
	gap: .4em;
	background: rgba(255,255,255,.1);
	padding: .6em 1.1em;
	border-radius: 30px;
	text-decoration: none;
	font-size: .85em;
}