/* ==========================================================================
   SAGA Uniformes — brand theme layer
   Loaded AFTER theme.css to recolor Mono's monochrome base with SAGA green.
   Brand color: #003b2e (logo green). Palette: green / navy / charcoal-green.
   ========================================================================== */

:root {
	--saga-green: #003b2e;
	--saga-green-2: #00513f;
	--saga-green-3: #0a261e;
	--saga-green-soft: #eef3f1;
	--saga-ink: #16201c;
	--saga-whatsapp: #25d366;
	--saga-gold: #d4a437;
	--saga-gold-2: #c08f24;
}

/* ---- Typography polish ------------------------------------------------ */
body { color: #4a534e; }
h1, h2, h3, h4, h5, h6 { color: var(--saga-ink); }

/* ---- Logo sizing (SAGA wordmark is wide; keep it tidy) --------------- */
.header .header-logo img { height: 42px; max-height: 42px; }
@media (max-width: 575px) {
	.header .header-logo img { height: 34px; max-height: 34px; }
}

/* ---- Color helpers ---------------------------------------------------- */
.text-saga { color: var(--saga-green) !important; }
.bg-saga { background-color: var(--saga-green) !important; color: #fff; }
.bg-saga-2 { background-color: var(--saga-green-2) !important; color: #fff; }
.bg-saga-soft { background-color: var(--saga-green-soft) !important; }
.border-saga { border-color: var(--saga-green) !important; }

/* ---- Buttons ---------------------------------------------------------- */
.button-saga { background: var(--saga-green); border-color: var(--saga-green); color: #fff; }
.button-saga:hover, .button-saga:focus { background: var(--saga-green-3); border-color: var(--saga-green-3); color: #fff; }

.button-outline-saga { background: transparent; border-color: var(--saga-green); color: var(--saga-green); }
.button-outline-saga:hover, .button-outline-saga:focus { background: var(--saga-green); border-color: var(--saga-green); color: #fff; }

/* Gold CTA accent — used for the header "Cotizar" button so it pops on both
   the transparent dark header and the solid white scrolled header. */
.button-gold { background: var(--saga-gold); border-color: var(--saga-gold); color: var(--saga-green); font-weight: 600; }
.button-gold:hover, .button-gold:focus { background: var(--saga-gold-2); border-color: var(--saga-gold-2); color: var(--saga-green); }

.button-whatsapp { background: var(--saga-whatsapp); border-color: var(--saga-whatsapp); color: #fff; }
.button-whatsapp:hover, .button-whatsapp:focus { background: #1da851; border-color: #1da851; color: #fff; }

/* ---- Feature box icons (services) ------------------------------------ */
.feature-box .feature-box-icon.bg-saga { background: var(--saga-green) !important; color: #fff; }
.feature-box:hover .feature-box-icon.bg-saga { background: var(--saga-green-3) !important; }

/* ---- Portfolio / gallery filter (filter-style-3 = underline indicator) -
   Override the theme's near-black active color so the selected tab reads as
   SAGA green with a green underline, instead of black text on a green pill. */
.filter.filter-style-3 ul li:hover,
.filter.filter-style-3 ul li.active,
.filter.filter-style-3 ul li.mixitup-control-active {
	color: var(--saga-green);
	background: transparent;
}
.filter.filter-style-3 ul li:after { background: var(--saga-green); }

/* ---- Process step numbers -------------------------------------------- */
.saga-step-num { color: var(--saga-green); font-weight: 300; }

/* ---- Content links ---------------------------------------------------- */
.content-link, .animate-links a:hover { color: var(--saga-green); }

/* ---- Form focus ------------------------------------------------------- */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	border-color: var(--saga-green);
	outline: none;
}
.contact-form select {
	width: 100%;
	background: #fff;
	border: 1px solid #e4e8ec;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
	color: #4a534e;
	font: 400 0.95em "Open Sans", sans-serif;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23003b2e' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}

/* ---- Floating WhatsApp button ---------------------------------------- */
.whatsapp-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 1040;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--saga-whatsapp);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
	transition: transform 0.16s ease-out, background 0.16s ease-out;
}
.whatsapp-float:hover { background: #1da851; color: #fff; transform: translateY(-3px) scale(1.05); }
@media (max-width: 575px) {
	.whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 27px; }
}

/* ---- Section accents -------------------------------------------------- */
.section-divider-saga { border-top: 3px solid var(--saga-green); }
.eyebrow {
	display: inline-block;
	color: var(--saga-green);
	font: 600 0.8rem "Poppins", sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

/* ---- Check list (services) ------------------------------------------- */
.list-check { list-style: none; padding-left: 0; margin: 0; }
.list-check li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.list-check li::before {
	content: "\F26E"; /* bootstrap-icons check-lg */
	font-family: "bootstrap-icons";
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--saga-green);
	font-weight: 700;
}

/* Hero overlay tuned to brand green for warmth over placeholder art */
.saga-hero-overlay { background: linear-gradient(120deg, rgba(0,42,32,0.78) 0%, rgba(0,42,32,0.45) 100%); }