/* ==========================================================================
   Soluciones Constructivas Núcleo - tema de marca
   --------------------------------------------------------------------------
   Aplica la paleta y la tipografia del "Manual de marca" sobre el tema Porto.
   Paleta: azul obra, naranja avance, verde terminado, cemento, arena,
   blanco estuco y carbon.

   Este archivo se carga DESPUES del skin del tema, asi que todo lo que
   este aqui gana. El skin original queda intacto para poder revertir.
   ========================================================================== */

:root {
	/* --- Colores de marca --- */
	--azul-obra: #1e3a5f;
	--naranja-avance: #e07a2e;
	--verde-terminado: #2e7d4f;
	--cemento: #5f6670;
	--arena: #e8e0d0;
	--blanco-estuco: #faf8f4;
	--carbon: #1a1a1a;

	/* --- Variables del tema Porto, sobrescritas con la marca --- */
	--primary: var(--naranja-avance);
	--secondary: var(--azul-obra);
	--tertiary: var(--verde-terminado);
	--quaternary: var(--cemento);
	--default: var(--cemento);
	--dark: var(--carbon);
	--light: var(--blanco-estuco);
	--primary-inverse: var(--carbon);
	--secondary-inverse: var(--blanco-estuco);
}

/* --------------------------------------------------------------------------
   Tipografia
   Montserrat para titulos, Inter para texto (segun el manual de marca).
   -------------------------------------------------------------------------- */

body {
	background-color: var(--blanco-estuco);
	color: var(--carbon);
	font-family: "Inter", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.75;
}

h1,
h2,
h3,
h4,
h5,
h6,
.custom-font-secondary,
.marca-nombre,
.marca-apellido {
	font-family: "Montserrat", Arial, sans-serif;
	letter-spacing: -0.02em;
}

a {
	color: var(--azul-obra);
}

.text-color-dark {
	color: var(--carbon) !important;
}

/* --------------------------------------------------------------------------
   Botones
   El naranja de avance siempre lleva texto carbon, nunca blanco.
   -------------------------------------------------------------------------- */

.btn {
	font-family: "Montserrat", Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.btn-primary {
	background-color: var(--naranja-avance);
	border-color: var(--naranja-avance);
	color: var(--carbon);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: #c96a22;
	border-color: #c96a22;
	color: var(--carbon);
}

.btn-dark.btn-outline {
	background: transparent;
	border-color: var(--azul-obra);
	color: var(--azul-obra);
}

.btn-dark.btn-outline:hover,
.btn-dark.btn-outline:focus {
	background: var(--azul-obra);
	color: #fff;
}

.btn-light {
	background: var(--arena);
	border-color: var(--arena);
	color: var(--carbon);
}

.btn-light:hover {
	background: #ddd3bf;
	border-color: #ddd3bf;
	color: var(--carbon);
}

/* --------------------------------------------------------------------------
   Barra superior y encabezados de pagina
   --------------------------------------------------------------------------
   La barra del tema es flotante (position:absolute), asi que el contenido
   arranca por debajo de ella con un espacio igual a su alto. Sin esto, el
   titulo y las migas de pan de las paginas internas quedan tapados.

   --alto-cabecera debe medir la barra real: con la marca en tres niveles
   son 90px. Si cambia el logotipo, se mide de nuevo y se ajusta aqui.
   -------------------------------------------------------------------------- */

:root {
	--alto-cabecera: 90px;
}

.inner-page .main {
	padding-top: var(--alto-cabecera);
}

/* --------------------------------------------------------------------------
   Encabezado de pagina (migas de pan + titulo)
   --------------------------------------------------------------------------
   El tema lo deja como section-height-3, que son 74px de padding arriba y
   abajo: el titulo queda flotando en una franja de 213px de alto. Aqui la
   banda va ceñida al contenido.
   -------------------------------------------------------------------------- */

section.section.page-header {
	padding: 30px 0;
}

/* --------------------------------------------------------------------------
   Marca (logotipo provisional: el logo lo disena el equipo)
   --------------------------------------------------------------------------
   Nombre en tres niveles: "Soluciones" y "Constructivas" en versalitas
   blancas arriba, "Nucleo" en grande y en naranja abajo. Los tres niveles
   van apretados para que la barra no quede alta.
   -------------------------------------------------------------------------- */

.marca {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
	text-decoration: none;
}

.marca-nombre {
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.marca-apellido {
	color: var(--naranja-avance);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Boton de WhatsApp
   -------------------------------------------------------------------------- */

.whatsapp-flotante {
	align-items: center;
	background: #25d366;
	border-radius: 50px;
	bottom: 18px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	color: #fff;
	display: inline-flex;
	font-family: "Montserrat", Arial, sans-serif;
	font-weight: 600;
	gap: 10px;
	padding: 12px 20px 12px 16px;
	position: fixed;
	right: 18px;
	text-decoration: none;
	z-index: 1030;
}

.whatsapp-flotante i {
	font-size: 26px;
}

.whatsapp-flotante span {
	display: none;
}

.whatsapp-flotante:hover,
.whatsapp-flotante:focus {
	background: #1eb457;
	color: #fff;
}

@media (min-width: 576px) {
	.whatsapp-flotante span {
		display: inline;
	}
}

.whatsapp-topo {
	color: #fff !important;
	text-decoration: none;
}

.whatsapp-topo i {
	color: #25d366;
}

/* --------------------------------------------------------------------------
   Datos pendientes de completar
   Todo lo que este marcado con [corchetes] en el contenido sigue pendiente.
   Se muestra resaltado para que se note y se pueda buscar con "pendiente".
   -------------------------------------------------------------------------- */

.dato-pendiente {
	background: rgba(224, 122, 46, 0.14);
	border-bottom: 1px dashed var(--naranja-avance);
	color: var(--azul-obra);
	padding: 0 3px;
}

/* --------------------------------------------------------------------------
   Imagenes de las tarjetas
   Todas las tarjetas de servicios y proyectos usan la misma proporcion, para
   que los titulos y los botones queden alineados en la fila.
   -------------------------------------------------------------------------- */

.img-tarjeta {
	aspect-ratio: 5 / 6;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Desplegable de "Servicios" en el menu lateral
   El tema lo abre con la clase .open, pero tiene un manejador de resize que
   quita esa clase cien milisegundos despues de cualquier redimensionado de
   la ventana, y el submenu se abria y se volvia a esconder solo. Aqui el
   control lo lleva el script propio con la clase .abierto, que el tema no
   toca, y :focus-within para que tambien funcione con el teclado.
   -------------------------------------------------------------------------- */

html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown.abierto > .dropdown-menu,
html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li.dropdown:focus-within > .dropdown-menu {
	display: block !important;
	opacity: 1 !important;
	position: static !important;
	top: auto !important;
	transform: none !important;
}

/* El tema deja el menu en la mitad de la pantalla, y con el desplegable de
   "Servicios" abierto las ultimas entradas quedan fuera de vista (en la demo
   del tema ya se pierde la octava). El area se mantiene en el 50% de la
   pantalla, como en la demo, y lo que se ajusta es el espacio entre las
   entradas para que quepan el menu y el desplegable. */
html.side-header-overlay-full-screen #header .side-header-scrollable {
	height: 100% !important;
}

/* El menu queda centrado en la pantalla, como en la demo del tema (con el
   area al 50% el tema lo dejaba pegado arriba y recortado). */
html.side-header-overlay-full-screen #header .scrollable-content {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}

html.side-header-overlay-full-screen #header .header-nav {
	justify-content: center;
}

html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a {
	padding: 7px 0 !important;
}

/* Los enlaces del menu van siempre en claro: en celular el tema los pinta
   con el color oscuro (--dark) sobre el fondo oscuro del menu y no se leen.
   Con la clase header-nav-main-mobile-dark queda la variante clara, y aqui se
   fijan los dos colores para que sean los mismos en todos los tamanos. */
html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a {
	color: var(--blanco-estuco);
}

html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a.active,
html.side-header-overlay-full-screen #header .header-nav-main nav > ul > li > a.current-page-active {
	color: var(--naranja-avance) !important;
}

/* --------------------------------------------------------------------------
   Franja de diferenciales
   -------------------------------------------------------------------------- */

.diferencial {
	height: 100%;
	text-align: center;
}

.diferencial img,
.diferencial svg {
	height: 56px;
	margin-bottom: 18px;
	width: 56px;
}

.diferencial h3 {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 8px;
}

.diferencial p {
	color: var(--cemento);
	font-size: 15px;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Tablas de contenido (pagos, paquetes, servicios juridicos)
   -------------------------------------------------------------------------- */

.tabla-marca {
	border-collapse: collapse;
	width: 100%;
}

.tabla-marca th {
	background: var(--azul-obra);
	color: #fff;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}

.tabla-marca td {
	border-bottom: 1px solid rgba(95, 102, 112, 0.2);
	padding: 14px 16px;
	vertical-align: top;
}

.tabla-marca tbody tr:nth-child(even) {
	background: rgba(232, 224, 208, 0.35);
}

.tabla-marca tbody tr:hover {
	background: rgba(232, 224, 208, 0.6);
}

/* --------------------------------------------------------------------------
   Pasos numerados (proceso de trabajo, construccion desde cero)
   -------------------------------------------------------------------------- */

.pasos {
	counter-reset: paso;
}

.paso {
	counter-increment: paso;
	margin-bottom: 30px;
	padding-left: 68px;
	position: relative;
}

.paso::before {
	align-items: center;
	background: var(--naranja-avance);
	border-radius: 50%;
	color: var(--carbon);
	content: counter(paso);
	display: flex;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	height: 46px;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 46px;
}

.paso h3 {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 6px;
}

.paso p {
	color: var(--cemento);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Portada
   Una sola foto a pantalla completa con el texto encima. Sin JavaScript: la
   mayoria de los visitantes llega desde un QR en el celular y con datos.
   -------------------------------------------------------------------------- */

.portada {
	align-items: center;
	display: flex;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	position: relative;
}

.portada-fondo {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	position: absolute;
}

.portada-velo {
	background: linear-gradient(180deg, rgba(16, 31, 51, 0.72) 0%, rgba(16, 31, 51, 0.5) 45%, rgba(16, 31, 51, 0.75) 100%);
	inset: 0;
	position: absolute;
}

.portada-contenido {
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.portada-titulo {
	color: var(--blanco-estuco);
	font-size: clamp(38px, 6vw, 76px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 18px;
}

.portada-bajada {
	color: var(--arena);
	font-size: clamp(16px, 1.6vw, 21px);
	line-height: 1.6;
	margin: 0 auto 30px;
	max-width: 720px;
}

.portada-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

@media (max-width: 575px) {
	.portada {
		height: auto;
		min-height: 78vh;
		padding-bottom: 60px;
		padding-top: 60px;
	}

	.portada-botones .btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Fotos antes y despues
   -------------------------------------------------------------------------- */

.antes-despues {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	position: relative;
}

.antes-despues img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.etiqueta-foto {
	background: rgba(26, 26, 26, 0.78);
	color: var(--blanco-estuco);
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	left: 14px;
	padding: 6px 12px;
	position: absolute;
	text-transform: uppercase;
	top: 14px;
}

/* --------------------------------------------------------------------------
   Etiqueta de seccion
   -------------------------------------------------------------------------- */

.etiqueta {
	color: var(--naranja-avance);
	display: block;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.bg-arena {
	background-color: var(--arena);
}

/* --------------------------------------------------------------------------
   Pie de pagina
   -------------------------------------------------------------------------- */

#footer a {
	color: rgba(250, 248, 244, 0.8);
	text-decoration: none;
}

#footer a:hover {
	color: var(--naranja-avance);
}

.footer-enlace {
	display: inline-block;
	padding: 3px 0;
}

.footer-dato {
	color: rgba(250, 248, 244, 0.72);
	font-size: 15px;
	margin-bottom: 6px;
}