/*
	Molde de GG Innovations sobre iLanding. Se carga despues de main.css.
	Regla de la casa: ninguna seccion encajonada; el respiro es uno solo y
	el largo de linea se limita en el parrafo, no en el contenedor.
*/

:root {
	--respiro: clamp(16px, 3.5vw, 56px);
}

/* La paleta de GG Innovations: oro elite + azul marino profundo.
   El azul de fabrica de la plantilla queda fuera; todo el color
   entra por estas variables, jamas por hex sueltos en las pantallas. */
:root {
	--accent-color: #16A34A;
	--heading-color: #1E2A3A;
	--nav-hover-color: #16A34A;
	--nav-dropdown-hover-color: #16A34A;
}
.light-background {
	--background-color: #F3F8F4;
}
.dark-background {
	--background-color: #1E2A3A;
	--surface-color: #2C3D54;
}

/* Los bloques grandes de acento van en marino: el acento es para detalles,
   no para paredes completas */
.contact .info-box,
.experience-badge {
	background-color: #1E2A3A;
}

/* Cada captura del quienes somos lleva el nombre de su sistema encima,
   para que nadie confunda de quien es cada pantalla */
.about .images .nombre-captura {
	position: absolute;
	background: #1E2A3A;
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 5px 15px;
	border-radius: 50px;
	box-shadow: 0 3px 10px rgba(30, 42, 58, 0.25);
	z-index: 2;
}
.about .images .nombre-principal {
	right: 14px;
	top: 14px;
}
.about .images .nombre-flotante {
	left: calc(-10% + 12px);
	top: calc(20% + 12px);
}
@media (max-width: 992px) {
	.about .images .nombre-captura {
		display: none;
	}
}

/* Cabecera: barra completa y asentada, no pastilla flotante */
.header {
	padding: 0;
	background: var(--surface-color);
	box-shadow: 0 1px 14px rgba(30, 42, 58, 0.08);
}
.header .header-container {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding-top: 12px;
	padding-bottom: 12px;
}
.scrolled .header {
	box-shadow: 0 2px 18px rgba(30, 42, 58, 0.14);
}
.header .logo .marca-gg {
	margin-right: 11px;
	flex-shrink: 0;
}
.header .sitename {
	color: #1E2A3A;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.container,
.container-xl,
.container-lg {
	max-width: 100% !important;
	padding-left: var(--respiro) !important;
	padding-right: var(--respiro) !important;
}

/* El largo de linea se controla en el parrafo (centrado donde el titulo lo es) */
.section-title p {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
}
.about-description,
.hero-content > p {
	max-width: 62ch;
}