/* ==========================================================================
   CTO site chrome (M4) — header + footer, Elementor-free, site-wide.
   Extracted from the frozen mockup styles.css (header .site-header + footer
   .cto-footer, Proposal A). Header renamed to .cto-site-header to avoid any
   collision with OceanWP. Values inlined (no CSS-var dependency) and scoped to
   .cto-site-header / .cto-footer so this never touches page content. Loaded
   globally (chrome is now site-wide, not template-gated). Font: system UI stack.
   ========================================================================== */

/* Self-hosted "Prompt" (contract: never remote fonts). The legacy Elementor
   header (.elementor-5736, style.css) styles its menu in Prompt; that font used
   to be pulled from fonts.googleapis.com in functions.php. woff2 copied from the
   site's own Elementor google-fonts cache into assets/fonts/, declared here
   (chrome CSS is enqueued site-wide) so the remote request is gone everywhere. */
@font-face {
	font-family: "Prompt";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/prompt-400.woff2") format("woff2");
}
@font-face {
	font-family: "Prompt";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/prompt-500.woff2") format("woff2");
}
@font-face {
	font-family: "Prompt";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/prompt-600.woff2") format("woff2");
}

.cto-site-header,
.cto-footer {
	--cto-accent:   #EF1C1C;   /* live-site red */
	--cto-ui:       system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	box-sizing: border-box;
}
.cto-site-header *,
.cto-footer * { box-sizing: border-box; }

/* ==========================================================================
   HEADER — black bar, white CTO logo left, 3 white social circles centered
   in the right third (pixel-matched to the live HFE header 5736).
   ========================================================================== */
.cto-site-header {
	background: #000;
	color: #f4f1ea;
	font-family: var(--cto-ui);
}
.cto-site-header .bar {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	padding: 8px 24px;
	max-width: 772px;
	margin: 0 auto;
}
.cto-site-header .brand {
	display: flex;
	align-items: center;
	justify-self: start;
	text-decoration: none;
	line-height: 0;
}
.cto-site-header .brand-logo {
	height: 66px;
	width: auto;
	max-width: 100%;
	display: block;
}
.cto-site-header .social {
	display: flex;
	gap: 16px;
	grid-column: 3;
	justify-self: center;
	margin: 0;
	padding: 0;
}
.cto-site-header .social a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	text-decoration: none;
	transition: background .15s ease;
}
.cto-site-header .social svg { width: 21px; height: 21px; fill: #000; transition: fill .15s ease; }
.cto-site-header .social a:hover { background: var(--cto-accent); }
.cto-site-header .social a:hover svg { fill: #fff; }
.cto-site-header .social a:focus-visible {
	outline: 3px solid var(--cto-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   FOOTER — black, brand block + CONTATO column + copyright legal bar.
   ========================================================================== */
.cto-footer {
	background: #111;
	color: #d8d3ca;
	font-family: var(--cto-ui);
}
.cto-footer .shell {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.cto-footer .cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	padding: 40px 24px 24px;
}
.cto-footer .brand-block {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.cto-footer .brand-block .mark {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: #fff;
	color: #111;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 15px;
}
.cto-footer .brand-block p {
	margin: 0;
	color: #b9b3aa;
	font-size: 14px;
	line-height: 1.6;
	max-width: 40ch;
}
.cto-footer h3 {
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #fff;
}
.cto-footer .contact-line {
	margin: 2px 0;
	font-size: 14px;
	color: #b9b3aa;
}
.cto-footer .mail {
	color: var(--cto-accent);
	text-decoration: none;
	font-weight: 700;
}
.cto-footer .mail:hover { text-decoration: underline; }
.cto-footer .socials {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
.cto-footer .socials a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	transition: background .15s ease;
}
.cto-footer .socials a:hover { background: var(--cto-accent); }
.cto-footer .socials a:focus-visible {
	outline: 3px solid var(--cto-accent);
	outline-offset: 2px;
}
.cto-footer .legal {
	border-top: 1px solid rgba(255, 255, 255, .10);
	padding: 16px 24px;
	font-size: 12px;
	color: #8f8a82;
	text-align: center;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 560px) {
	.cto-site-header .bar { grid-template-columns: 1fr auto; max-width: 100%; }
	.cto-site-header .social { grid-column: auto; justify-self: end; }
	.cto-site-header .brand-logo { height: 48px; }
	.cto-footer .cols { grid-template-columns: 1fr; }
}