/* =========================================================
   Hogar Construction – brand layer
   Logo, homepage preloader, footer and small layout fixes.
   Loaded after style.css so it can override template rules.
   ========================================================= */

:root {
	--hogar-navy: #1b2f55;
	--hogar-navy-deep: #0c1830;
	--hogar-gold: #d4a35a;
	--hogar-gold-soft: #f3c98a;
	--hogar-gold-deep: #b9812f;   /* gold dark enough to read on white */
	--hogar-cream: #f7f2e9;       /* warm off-white from the logo background */
	--hogar-sky: #73A5C6;

	/* Re-point the template's accent colour (was light blue) to logo gold.
	   Every template rule using var(--red)/var(--primary) follows. */
	--red: var(--hogar-gold-deep);
	--primary: var(--hogar-gold-deep);
}

/* =========================================================
   Logo colour theme
   ========================================================= */

/* Headings in navy, highlighted word in gold */
.custom-header-section .custom-title { color: var(--hogar-navy); }
.custom-header-section .custom-title.text-white { color: #fff; }
.custom-header-section .custom-title span { color: var(--hogar-gold-deep); }
.bg-dark .custom-header-section .custom-title span { color: var(--hogar-gold); }
.custom-h5 { color: var(--hogar-navy); }
.custom-h5.text-white { color: #fff; }

/* Icons gold */
.custom-fa { color: var(--hogar-gold); }

/* Navigation */
.navbar-light .navbar-nav .nav-link { color: var(--hogar-navy); opacity: .7; transition: color .2s ease, opacity .2s ease; }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .active > .nav-link { color: var(--hogar-navy); opacity: 1; }
.navbar-light .navbar-nav .active > .nav-link { box-shadow: inset 0 -2px 0 var(--hogar-gold); }

/* Primary button: gold with navy text, navy on hover */
.btn-red {
	color: var(--hogar-navy) !important;
	background-color: var(--hogar-gold) !important;
	font-weight: 600;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active {
	color: #fff !important;
	background-color: var(--hogar-navy) !important;
	box-shadow: 0 8px 22px rgba(12, 24, 48, .35) !important;
}

/* Hero: gold initials (no image tint – photo stays as is) */
.overlay { display: none; }
.hogar-hero-title, .custom-hero-subheading { text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45); }
.hogar-hero-title .accent { color: var(--hogar-gold-soft); }

/* Section backgrounds */
.bg-light-3 { background-color: var(--hogar-cream) !important; }
.bg-dark { background-color: var(--hogar-navy) !important; }
.bg-darker { background-color: #14254a !important; border: 1px solid rgba(212, 163, 90, .18); }
.bg-dark p { color: rgba(255, 255, 255, .75); }

/* About cards: soft navy shadow + gold top line */
.services-shadow-primary {
	box-shadow: 0 12px 34px rgba(27, 47, 85, .08) !important;
	border-top: 3px solid var(--hogar-gold);
}

/* Back-to-top: solid navy button, white arrow, gold progress ring */
.progress-wrap {
	background-color: var(--hogar-navy);
	box-shadow: 0 6px 18px rgba(12, 24, 48, .35), inset 0 0 0 2px rgba(255, 255, 255, .15);
}
.progress-wrap::after { color: #fff !important; font-size: 22px; }
.progress-wrap::before { color: var(--hogar-gold-soft) !important; font-size: 22px; }
.progress-wrap svg.progress-circle path { stroke: var(--hogar-gold) !important; }
.progress-wrap:hover { transform: translateY(-3px); }

/* Text selection */
::selection { background: var(--hogar-gold); color: var(--hogar-navy); }

/* ---------- Header logo ---------- */

.navbar-brand.hogar-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: auto !important;
	margin-right: 1rem;
	padding: 0;
	line-height: 1;
}
.navbar-brand.hogar-brand .hogar-brand__badge {
	width: 64px;
	height: 64px;
	display: block;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(12, 24, 48, 0.18);
	transition: width .3s ease-out, height .3s ease-out, transform .4s ease;
}
.navbar-brand.hogar-brand:hover .hogar-brand__badge {
	transform: rotate(-6deg) scale(1.04);
}
.cbp-af-header.cbp-af-header-shrink .navbar-brand.hogar-brand .hogar-brand__badge {
	width: 50px;
	height: 50px;
}
.hogar-brand__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hogar-brand__name {
	font-family: 'Poppins', sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--hogar-navy);
}
.hogar-brand__sub {
	font-family: 'Poppins', sans-serif;
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--hogar-gold);
}
@media (max-width: 1199px) {
	.navbar-brand.hogar-brand .hogar-brand__badge,
	.cbp-af-header.cbp-af-header-shrink .navbar-brand.hogar-brand .hogar-brand__badge {
		width: 48px;
		height: 48px;
	}
	.hogar-brand__name { font-size: 1.1rem; }
	.hogar-brand__sub { font-size: .55rem; letter-spacing: .2em; }
}

/* ---------- Hero title (replaces margin-right hack) ---------- */

.hogar-hero-title {
	margin: 0 0 1rem;
	text-align: center;
}
.hogar-hero-title__inner {
	display: inline-block;
	text-align: left;
}
.hogar-hero-title__line { display: block; }
@media (max-width: 575px) {
	.hogar-hero-title.display-1 {
		font-size: 9vw;
		letter-spacing: .05em;
	}
}

/* ---------- Contact links ---------- */

.hogar-contact-link {
	color: inherit;
	transition: color .2s ease;
	word-break: break-word;
}
.hogar-contact-link:hover,
.hogar-contact-link:focus {
	color: var(--hogar-gold-soft);
	text-decoration: none;
}

/* ---------- Footer ---------- */

.hogar-footer {
	background: var(--hogar-navy-deep);
	color: rgba(255, 255, 255, .65);
	padding: 36px 16px;
	text-align: center;
	font-size: 14px;
}
.hogar-footer img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin: 0 auto 14px;
	display: block;
}
.hogar-footer p { margin: 0; }
.hogar-footer a { color: var(--hogar-gold-soft); }
@media (max-width: 767px) {
	.hogar-footer { padding-bottom: 84px; }
}

/* =========================================================
   PRELOADER (homepage)
   ========================================================= */

html.hp-lock,
html.hp-lock body { overflow: hidden; }

/* The template's dot loader is not needed while ours is on screen */
body.has-hogar-preloader .animsition-loading { display: none !important; }

.hogar-preloader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background:
		radial-gradient(circle at 50% 42%, rgba(243, 201, 138, .22) 0%, rgba(243, 201, 138, 0) 38%),
		radial-gradient(ellipse at 50% 120%, #22406f 0%, var(--hogar-navy) 40%, var(--hogar-navy-deep) 100%);
	color: #fff;
	overflow: hidden;
	clip-path: circle(150% at 50% 42%);
	transition: clip-path 1s cubic-bezier(.77, 0, .18, 1), opacity .6s ease;
	will-change: clip-path;
}
.hogar-preloader.is-done {
	clip-path: circle(0% at var(--hp-exit-x, 50%) var(--hp-exit-y, 42%));
	pointer-events: none;
}
.hogar-preloader.is-gone { display: none; }

/* stage holds rays + ring + badge */
.hp-stage {
	position: relative;
	width: 230px;
	height: 230px;
	display: grid;
	place-items: center;
}

/* sun rays rotating behind the badge */
.hp-rays {
	position: absolute;
	inset: -70%;
	border-radius: 50%;
	background: repeating-conic-gradient(
		from 0deg,
		rgba(243, 201, 138, .16) 0deg 4deg,
		rgba(243, 201, 138, 0) 4deg 15deg
	);
	-webkit-mask: radial-gradient(circle, #000 18%, rgba(0,0,0,.6) 38%, transparent 66%);
	        mask: radial-gradient(circle, #000 18%, rgba(0,0,0,.6) 38%, transparent 66%);
	opacity: 0;
	transform: scale(.6);
	animation:
		hpRaysIn 1.2s .25s cubic-bezier(.2, .8, .2, 1) forwards,
		hpSpin 28s linear infinite;
}

/* soft sunrise glow pulse */
.hp-glow {
	position: absolute;
	width: 120%;
	height: 120%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(243, 201, 138, .45) 0%, rgba(243, 201, 138, 0) 65%);
	animation: hpPulse 2.4s ease-in-out infinite;
}

/* progress ring */
.hp-ring {
	position: absolute;
	inset: -14px;
	width: calc(100% + 28px);
	height: calc(100% + 28px);
	transform: rotate(-90deg);
}
.hp-ring circle {
	fill: none;
	stroke-width: 2.5;
}
.hp-ring .hp-ring__track { stroke: rgba(255, 255, 255, .1); }
.hp-ring .hp-ring__bar {
	stroke: var(--hogar-gold);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset .35s ease-out;
}

/* the logo badge itself */
.hp-badge {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 6px rgba(255, 255, 255, .06);
	clip-path: circle(0% at 50% 50%);
	transform: scale(.82);
	animation: hpBadgeIn 1.1s .1s cubic-bezier(.2, .9, .25, 1.15) forwards;
	z-index: 1;
}
.hp-badge img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}
/* light sweep across the badge */
.hp-badge::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
	background-size: 250% 100%;
	background-position: 150% 0;
	animation: hpShine 2.6s 1.1s ease-in-out infinite;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* wordmark under the badge */
.hp-title {
	margin: 46px 0 0;
	font-family: 'Poppins', sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	line-height: 1.4;
	padding-left: .42em; /* optical centering for letter-spacing */
}
.hp-title span {
	display: inline-block;
	opacity: 0;
	transform: translateY(14px);
	animation: hpLetter .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.hp-tagline {
	margin: 12px 0 0;
	font-family: 'Muli', 'Poppins', sans-serif;
	font-size: 12px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--hogar-gold-soft);
	opacity: 0;
	animation: hpFadeUp .8s 1.3s ease forwards;
	text-align: center;
}
.hp-tagline i {
	display: inline-block;
	width: 26px;
	height: 1px;
	margin: 0 12px;
	vertical-align: middle;
	background: currentColor;
	opacity: .6;
}

/* exit: content lifts away as the circle closes */
.hogar-preloader.is-leaving .hp-stage {
	transition: transform .7s cubic-bezier(.7, 0, .3, 1), opacity .5s ease;
	transform: scale(1.08);
}
.hogar-preloader.is-leaving .hp-title,
.hogar-preloader.is-leaving .hp-tagline {
	transition: opacity .35s ease, transform .5s ease;
	opacity: 0;
	transform: translateY(-10px);
}

@keyframes hpBadgeIn {
	to { clip-path: circle(50% at 50% 50%); transform: scale(1); }
}
@keyframes hpRaysIn {
	to { opacity: 1; transform: scale(1); }
}
@keyframes hpSpin {
	from { rotate: 0deg; }
	to { rotate: 360deg; }
}
@keyframes hpPulse {
	0%, 100% { transform: scale(.92); opacity: .75; }
	50% { transform: scale(1.06); opacity: 1; }
}
@keyframes hpShine {
	0% { background-position: 150% 0; }
	55%, 100% { background-position: -60% 0; }
}
@keyframes hpLetter {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes hpFadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: .9; transform: translateY(0); }
}

@media (max-width: 575px) {
	.hp-stage { width: 168px; height: 168px; }
	.hp-title { font-size: 15px; letter-spacing: .3em; margin-top: 38px; }
	.hp-tagline { font-size: 10px; letter-spacing: .24em; }
	.hp-tagline i { width: 16px; margin: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-rays, .hp-glow, .hp-badge::after { animation: none; }
	.hp-rays { opacity: 1; transform: none; }
	.hp-badge { animation: none; clip-path: none; transform: none; }
	.hp-title span, .hp-tagline { animation: none; opacity: 1; transform: none; }
	.hogar-preloader { transition: opacity .4s ease; }
	.hogar-preloader.is-done { clip-path: none; opacity: 0; }
}