/*
	puej.net — estilos propios sobre la plantilla Spectral.
	La paleta general está en assets/sass/libs/_vars.scss (compilada en main.css);
	aquí solo van los ajustes y componentes agregados para este sitio.
*/

/* Desplazamiento a secciones sin que la cabecera fija tape el título */

	section[id] {
		scroll-margin-top: 3em;
	}

/* Cabecera: logo y enlaces visibles en escritorio */

	#header h1 a {
		display: flex;
		align-items: center;
	}

	#header h1 img {
		display: block;
		height: 1.6em;
		width: auto;
	}

	#header nav > ul > li.enlace > a {
		padding: 0 1em;
	}

		#header nav > ul > li.enlace > a:hover {
			color: #2fd566;
		}

	#header nav > ul > li.special {
		display: none;
	}

	@media screen and (max-width: 980px) {

		#header nav > ul > li.enlace {
			display: none;
		}

		#header nav > ul > li.special {
			display: inline-block;
		}

	}

/* Inicio */

	#inicio {
		background-position: center;
		background-size: cover;
	}

		#inicio h2 {
			padding: 0.9em 1.25em;
		}

			#inicio h2 img {
				display: block;
				height: auto;
				max-width: 100%;
				width: 11em;
			}

		#inicio p {
			font-size: 0.95em;
			letter-spacing: 0.12em;
			line-height: 1.9;
			margin-left: auto;
			margin-right: auto;
			max-width: 46em;
			padding: 0 1.5em;
		}

		@media screen and (max-width: 736px) {

			#inicio p {
				font-size: 0.85em;
				letter-spacing: 0.08em;
				padding: 0;
			}

		}

/* Botón principal */

	.button.primary.icon:before {
		margin-right: 0.6em;
	}

	.button.icon:before {
		margin-right: 0.6em;
	}

/* Quiénes somos */

	#quienes-somos .features {
		margin-bottom: 3em;
	}

	#quienes-somos .features li:before {
		color: #ffffff;
	}

	#quienes-somos .cierre {
		margin-left: auto;
		margin-right: auto;
		max-width: 44em;
	}

/* Servicios */

	#servicios .spotlight {
		align-items: stretch;
	}

		#servicios .spotlight .image {
			background: linear-gradient(135deg, #24447c, #0d1730);
			overflow: hidden;
		}

			/* Fotos: cubren toda la columna */
			#servicios .spotlight .image img {
				display: block;
				height: 100%;
				object-fit: cover;
			}

			/* Ilustraciones SVG: se muestran completas y centradas */
			#servicios .spotlight .image img[src$=".svg"] {
				object-fit: contain;
				padding: 3em;
			}

		#servicios .spotlight .content {
			padding-bottom: 2em;
			padding-top: 4em;
		}

			#servicios .spotlight .content ul {
				text-align: left;
			}

			#servicios .spotlight .content .lista-titulo {
				margin-bottom: 1em;
			}

			#servicios .spotlight .content .mas-info {
				font-weight: 600;
			}

				#servicios .spotlight .content .mas-info a {
					color: #2fd566;
					overflow-wrap: anywhere;
				}

		@media screen and (max-width: 980px) {

			#servicios .spotlight .image img {
				height: 18em;
			}

			#servicios .spotlight .image img[src$=".svg"] {
				padding: 2em;
			}

			#servicios .spotlight .content ul {
				display: inline-block;
			}

		}

/* Proyectos */

	.proyectos {
		display: flex;
		flex-wrap: wrap;
		gap: 2em;
		justify-content: center;
		margin-bottom: 2em;
		text-align: left;
	}

		.proyecto {
			background: #ffffff;
			border: solid 1px #dfdfdf;
			border-radius: 6px;
			border-top: solid 4px #16a34a;
			flex: 1 1 22em;
			max-width: 32em;
			padding: 2.5em 2.5em 1em 2.5em;
		}

			.proyecto .antetitulo {
				color: #8e8892;
				font-size: 0.8em;
				letter-spacing: 0.15em;
				margin-bottom: 1.5em;
				text-transform: uppercase;
			}

			.proyecto .logo {
				display: block;
				margin-bottom: 1.5em;
			}

				.proyecto .logo img {
					display: block;
					height: 8em;
					object-fit: contain;
					width: auto;
				}

			.proyecto h3 {
				font-size: 1.1em;
				text-transform: none;
			}

			.proyecto .estado {
				background: #f7a13a;
				border-radius: 3px;
				color: #14213d;
				display: inline-block;
				font-size: 0.65em;
				letter-spacing: 0.1em;
				margin-left: 0.75em;
				padding: 0.2em 0.75em;
				vertical-align: middle;
			}

			.proyecto .enlaces a {
				color: #0c8f4f;
				display: inline-block;
				font-weight: 600;
				margin-right: 1em;
			}

				.proyecto .enlaces a:first-of-type:before {
					content: '';
					display: block;
				}

		@media screen and (max-width: 736px) {

			.proyecto {
				padding: 2em 1.5em 0.5em 1.5em;
			}

		}

/* Contacto */

	#contacto h3 {
		margin-bottom: 1.5em;
	}

	.correos {
		display: grid;
		gap: 1px;
		grid-template-columns: repeat(2, 1fr);
		list-style: none;
		margin: 0 auto 3em auto;
		max-width: 52em;
		padding: 0;
	}

		.correos li {
			background: rgba(0, 0, 0, 0.14);
			padding: 1.25em 1em;
		}

			.correos li .area {
				color: #ffffff;
				display: block;
				font-size: 0.8em;
				font-weight: 600;
				letter-spacing: 0.15em;
				text-transform: uppercase;
			}

			.correos li a {
				overflow-wrap: anywhere;
			}

		@media screen and (max-width: 736px) {

			.correos {
				grid-template-columns: 1fr;
			}

		}

	#contacto .actions .button {
		letter-spacing: 0.1em;
		text-transform: none;
	}

	/* La dirección conserva sus saltos de línea también en móvil */
	#contacto header.major br {
		display: inline;
	}