/* ═══════════════════════════════════════════════════════
   Lawtech — Design System 2026
   ═══════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────── */
:root {
	/* Surfaces */
	--bg:        #f2f6fb;
	--surface:   #ffffff;
	--surface-2: #edf2f8;
	--surface-3: #e3ebf4;

	/* Dark (hero/cta) */
	--dark:   #070f1d;
	--dark-2: #0b1930;

	/* Text */
	--text:     #0a1628;
	--text-2:   #2c445e;
	--text-3:   #52708a;
	--on-dark:  #ffffff;
	--on-dark-2: rgba(255,255,255,0.88);

	/* Brand (Executivo default) */
	--primary:   #2563eb;
	--primary-d: #1d4ed8;
	--accent:    #38bdf8;

	/* UI */
	--line:      rgba(11,25,41,0.10);
	--line-dark: rgba(255,255,255,0.13);

	/* Radii */
	--r-2xl: 26px;
	--r-xl:  18px;
	--r-lg:  12px;
	--r-full: 999px;

	/* Shadows */
	--sh-xs: 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.04);
	--sh-sm: 0 4px 14px rgba(11,25,41,0.08);
	--sh-md: 0 10px 32px rgba(11,25,41,0.11);
	--sh-lg: 0 20px 60px rgba(11,25,41,0.15);
	--sh-xl: 0 32px 96px rgba(11,25,41,0.20);

	/* Layout */
	--w: min(1180px, calc(100vw - 48px));
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p   { margin: 0; }

/* ── Typography ──────────────────────────────────────── */
h1, h2, h3 {
	margin: 0;
	font-family: "Outfit", sans-serif;
	line-height: 1.08;
	font-weight: 700;
}

h1 {
	font-size: clamp(2.5rem, 5.5vw, 4.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

h2 {
	font-size: clamp(1.8rem, 3.8vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.025em;
}

h3 {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.section-tag,
.panel-tag,
.card-tag {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 0.70rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent);
}

/* ── Layout ──────────────────────────────────────────── */
.container {
	width: var(--w);
	margin: 0 auto;
}

.site-shell { min-height: 100vh; }

/* ── Header ──────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(7,15,29,0.92);
	backdrop-filter: blur(22px) saturate(180%);
	border-bottom: 1px solid var(--line-dark);
	transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 8px 40px rgba(0,0,0,0.38);
}

.header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.brand-logo {
	width: clamp(128px, 13vw, 158px);
	height: auto;
	filter: brightness(0) invert(1);
}

.brand-note {
	font-size: 0.73rem;
	color: var(--on-dark-2);
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 2px;
}

.main-nav a {
	padding: 8px 16px;
	border-radius: var(--r-full);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--on-dark-2);
	transition: background 0.18s, color 0.18s;
}

.main-nav a:hover,
.main-nav a.is-active {
	background: rgba(255,255,255,0.10);
	color: var(--on-dark);
}

/* ── Buttons ─────────────────────────────────────────── */
.button,
.text-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 26px;
	border-radius: var(--r-full);
	font-weight: 700;
	font-size: 0.92rem;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
	background: linear-gradient(135deg, var(--primary), var(--primary-d));
	color: #fff;
	box-shadow: 0 8px 28px color-mix(in srgb, var(--primary) 40%, transparent);
}

.button-primary:hover {
	box-shadow: 0 14px 44px color-mix(in srgb, var(--primary) 55%, transparent);
}

.button-secondary {
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--on-dark);
}

.button-secondary:hover { background: rgba(255,255,255,0.17); }

.text-link {
	min-height: auto;
	padding: 0;
	color: var(--primary);
	font-weight: 700;
	gap: 5px;
}

.text-link::after {
	content: '→';
	transition: transform 0.2s ease;
}

.text-link:hover::after { transform: translateX(4px); }

/* ── OVERVIEW HERO ───────────────────────────────────── */
.overview-hero {
	padding: 104px 0 86px;
	background:
		/* overlay: mais escuro à esquerda (texto), abre à direita (imagem respira) */
		linear-gradient(
			to right,
			rgba(6,13,26,0.92) 0%,
			rgba(6,13,26,0.72) 45%,
			rgba(6,13,26,0.42) 100%
		),
		/* toque de accent no canto superior direito */
		radial-gradient(ellipse 60% 50% at 100% 0%,
			color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
		url('../img/hero-industrial.png') center / cover no-repeat;
	color: var(--on-dark);
}

.overview-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
	gap: 52px;
	align-items: start;
}

.hero-copy h1 {
	color: var(--on-dark);
	margin-bottom: 20px;
}

.hero-copy h1 em {
	font-style: normal;
	background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-text {
	font-size: 1.04rem;
	line-height: 1.72;
	color: var(--on-dark-2);
	margin-bottom: 32px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}

/* Right column — note cards */
.hero-notes { display: grid; gap: 14px; }

.hero-note-card {
	padding: 28px;
	border-radius: var(--r-xl);
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--line-dark);
	backdrop-filter: blur(14px);
}

.hero-note-card .panel-tag { color: var(--accent); }

.accent-card {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--primary) 28%, transparent),
		color-mix(in srgb, var(--accent)  16%, transparent)
	);
	border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.accent-card p {
	color: var(--on-dark-2);
	font-size: 0.96rem;
	line-height: 1.68;
}

.bullet-list { display: grid; gap: 8px; }

.bullet-list li {
	padding: 9px 16px;
	border-radius: var(--r-full);
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	font-size: 0.88rem;
	color: rgba(255,255,255,0.78);
}

/* ── SIGNAL STRIP ────────────────────────────────────── */
.signal-strip {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.signal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.signal-grid > div {
	padding: 30px 28px;
	border-right: 1px solid var(--line);
	position: relative;
}

.signal-grid > div:last-child { border-right: none; }

.signal-grid > div::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
}

.signal-grid strong {
	display: block;
	font-family: "Outfit", sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 5px;
}

.signal-grid span {
	font-size: 0.87rem;
	color: var(--text-2);
}

/* ── OVERVIEW SECTIONS ───────────────────────────────── */
.overview-section { padding: 80px 0; }
.section-muted    { background: var(--surface-2); }

.section-head { margin-bottom: 44px; }
.section-head h2 { max-width: 22ch; }

.section-head-wide {
	display: grid;
	grid-template-columns: 1fr minmax(260px, 360px);
	gap: 40px;
	align-items: end;
	margin-bottom: 48px;
}

.section-side-copy {
	font-size: 0.97rem;
	line-height: 1.72;
	color: var(--text-2);
}

/* ── PROPOSAL CARDS (homepage) ───────────────────────── */
.proposal-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.proposal-grid-large { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.proposal-card {
	border-radius: var(--r-2xl);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sh-sm);
	display: flex;
	flex-direction: column;
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.proposal-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--sh-xl);
}

.proposal-media {
	height: 220px;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	transition: transform 0.42s ease;
}

.proposal-card:hover .proposal-media { transform: scale(1.04); }

.proposal-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 30%, rgba(7,15,29,0.68) 100%);
}

.proposal-copy {
	padding: 24px 26px 28px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.proposal-topline {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.mini-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.mini-tags span {
	padding: 4px 10px;
	border-radius: var(--r-full);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--surface-2);
	border: 1px solid var(--line);
	color: var(--text-2);
}

.proposal-copy h3 { margin-bottom: 7px; }
.proposal-copy > p { color: var(--text-2); font-size: 0.92rem; line-height: 1.6; }

.proposal-fit {
	color: var(--text-3) !important;
	font-size: 0.83rem !important;
	margin: 10px 0 18px;
	flex: 1;
	line-height: 1.5;
}

/* Per-proposal card accents */
.proposal-executivo  { border-bottom: 3px solid #2563eb; }
.proposal-industrial { border-bottom: 3px solid #ea580c; }
.proposal-humano     { border-bottom: 3px solid #0f766e; }

.proposal-executivo  .text-link { color: #2563eb; }
.proposal-industrial .text-link { color: #ea580c; }
.proposal-humano     .text-link { color: #0f766e; }

/* ── PILLAR CARDS ────────────────────────────────────── */
.pillar-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.pillar-card {
	padding: 32px;
	border-radius: var(--r-xl);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--primary);
	box-shadow: var(--sh-xs);
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.pillar-card:hover {
	box-shadow: var(--sh-md);
	transform: translateY(-3px);
}

.pillar-card h3 { margin-bottom: 10px; }
.pillar-card p  { color: var(--text-2); font-size: 0.93rem; line-height: 1.65; }

/* ── PROPOSAL PAGE HERO ──────────────────────────────── */
.hero {
	position: relative;
	padding: 108px 0 92px;
	background-color: var(--dark);
	background-size: cover;
	background-position: center;
	color: var(--on-dark);
	isolation: isolate;
}

/* overlay escuro à esquerda, abre à direita — legibilidade + foto respirando */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to right,
			rgba(6,13,26,0.92) 0%,
			rgba(6,13,26,0.68) 50%,
			rgba(6,13,26,0.32) 100%
		),
		radial-gradient(ellipse 55% 60% at 100% 0%,
			color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%);
	z-index: -1;
}

.hero-split {
	display: grid;
	grid-template-columns: minmax(0, 0.6fr);
	gap: 0;
	align-items: center;
}

.hero-split .hero-copy h1 {
	color: var(--on-dark);
	font-size: clamp(2.1rem, 4.5vw, 3.9rem);
	margin-bottom: 18px;
	max-width: 18ch;
}

.hero-split .hero-text { margin-bottom: 28px; }

.hero-visual { display: none; }

.hero-mini-points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.hero-mini-points span {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: var(--r-full);
	font-size: 0.80rem;
	font-weight: 600;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.12);
	color: var(--on-dark-2);
}

.hero-banner-wrap {
	padding: 10px;
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--line-dark);
	border-radius: var(--r-2xl);
}

.hero-banner-wrap img {
	width: 100%;
	height: clamp(280px, 32vw, 460px);
	object-fit: cover;
	border-radius: 18px;
}

/* ── PROOF STRIP ─────────────────────────────────────── */
.proof-strip {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.proof-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.proof-card {
	padding: 36px 32px;
	border-right: 1px solid var(--line);
}

.proof-card:last-child { border-right: none; }

.proof-card strong {
	display: block;
	font-family: "Outfit", sans-serif;
	font-size: clamp(1.7rem, 3vw, 2.6rem);
	font-weight: 800;
	color: var(--primary);
	letter-spacing: -0.03em;
	margin-bottom: 6px;
}

.proof-card span { font-size: 0.87rem; color: var(--text-2); }

/* ── CONTENT SECTIONS ────────────────────────────────── */
.content-section  { padding: 80px 0; background: var(--surface); }   /* segmentos: branco */
#estrutura        { background: var(--bg); }                          /* spotlight: azul-cinza suave */
.process-section  { padding-top: 16px; }

/* Spotlight */
.spotlight-grid {
	display: grid;
	grid-template-columns: 1fr minmax(260px, 0.72fr);
	gap: 36px;
	align-items: start;
}

.spotlight-main {
	padding: 40px 44px;
	border-radius: var(--r-xl);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sh-md);
}

.spotlight-main h2 { max-width: 18ch; margin-bottom: 14px; }

.spotlight-main p {
	color: var(--text-2);
	font-size: 0.97rem;
	line-height: 1.72;
}

.spotlight-side { display: grid; gap: 14px; }

.side-card {
	padding: 26px 28px;
	border-radius: var(--r-xl);
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--sh-xs);
}

.side-card h3 { line-height: 1.4; margin-top: 6px; }

.side-card-ghost {
	background: var(--surface-2);
	box-shadow: none;
}

/* Feature layout */
.features-section {
	background: var(--surface-2);
	padding: 80px 0;
}

.features-header {
	max-width: 600px;
	margin-bottom: 48px;
}

.features-header h2 { margin: 6px 0 12px; }

.features-lead {
	font-size: 0.97rem;
	color: var(--text-2);
	line-height: 1.72;
}

/* Bento grid: hero card esquerda + stack direita */
.features-bento {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: stretch;
}

/* Card base */
.features-card {
	border-radius: var(--r-2xl);
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
}

/* Card hero (dark, esquerda) */
.features-card-hero {
	background: linear-gradient(145deg, var(--dark) 0%, var(--dark-2) 100%);
	border: 1px solid var(--line-dark);
	position: relative;
	overflow: hidden;
	justify-content: space-between;
	min-height: 360px;
}

/* textura sutil no card hero */
.features-card-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 70% 60% at 110% -10%,
			color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
		radial-gradient(ellipse 50% 40% at -10% 110%,
			color-mix(in srgb, var(--primary) 10%, transparent), transparent 55%);
	pointer-events: none;
}

.features-card-hero .card-tag { color: var(--accent); }

.features-card-hero h3 {
	font-size: clamp(1.25rem, 2vw, 1.7rem);
	color: var(--on-dark);
	line-height: 1.28;
	letter-spacing: -0.02em;
	margin: 4px 0 14px;
	max-width: 24ch;
}

.features-card-hero > p {
	font-size: 0.92rem;
	color: var(--on-dark-2);
	line-height: 1.7;
	flex: 1;
}

/* pílulas de serviço na base do card hero */
.hero-card-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.hero-card-bar span {
	padding: 6px 14px;
	border-radius: var(--r-full);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.13);
	color: rgba(255,255,255,0.75);
}

/* Stack de cards (direita) */
.features-stack {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	gap: 16px;
}

/* Cards pequenos da stack */
.features-stack .features-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--primary);
	box-shadow: var(--sh-xs);
	padding: 24px 28px;
	border-radius: var(--r-xl);
	gap: 6px;
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.features-stack .features-card:hover {
	box-shadow: var(--sh-md);
	transform: translateY(-2px);
}

.features-stack .features-card .card-tag {
	margin-bottom: 4px;
	color: var(--primary);
}

.features-stack .features-card h4 {
	font-family: "Outfit", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 0 0 6px;
}

.features-stack .features-card p {
	font-size: 0.875rem;
	color: var(--text-2);
	line-height: 1.65;
	margin: 0;
}

/* Segment layout */
.segment-layout {
	display: grid;
	grid-template-columns: 1fr minmax(260px, 0.9fr);
	gap: 52px;
	align-items: center;
}

.segment-copy h2 { max-width: 18ch; margin-bottom: 14px; }

.segment-copy p {
	color: var(--text-2);
	font-size: 0.97rem;
	line-height: 1.72;
}

.segment-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.segment-tags span {
	padding: 10px 20px;
	border-radius: var(--r-full);
	font-size: 0.82rem;
	font-weight: 600;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--text-2);
	box-shadow: var(--sh-xs);
	transition: border-color 0.2s, color 0.2s;
}

.segment-tags span:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Process */
.process-section { padding: 0; }

.process-wrapper {
	background: linear-gradient(150deg, var(--dark) 0%, var(--dark-2) 100%);
	padding: 72px 0 80px;
	position: relative;
	overflow: hidden;
}

/* grade sutil de fundo */
.process-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.process-header {
	max-width: 580px;
	margin-bottom: 56px;
}

.process-header h2 {
	color: var(--on-dark);
	margin: 6px 0 12px;
}

.process-lead {
	font-size: 0.97rem;
	color: var(--on-dark-2);
	line-height: 1.65;
}

.process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
}

.process-card {
	position: relative;
	padding: 0 28px 0 0;
}

/* linha conectora entre cards */
.process-card:not(:last-child) .process-connector {
	position: absolute;
	top: 27px; /* metade do badge */
	left: calc(56px + 16px); /* após o badge */
	right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--accent) 50%, transparent),
		color-mix(in srgb, var(--accent) 15%, transparent)
	);
}

/* seta na ponta da linha */
.process-card:not(:last-child) .process-connector::after {
	content: '';
	position: absolute;
	right: -1px;
	top: -4px;
	width: 8px;
	height: 8px;
	border-top: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
	border-right: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
	transform: rotate(45deg);
}

.process-num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Outfit", sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 70%, var(--primary)));
	box-shadow: 0 6px 24px color-mix(in srgb, var(--primary) 45%, transparent);
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.process-body { padding-right: 8px; }

.process-body h4 {
	font-family: "Outfit", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--on-dark);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.process-body p {
	font-size: 0.875rem;
	color: var(--on-dark-2);
	line-height: 1.68;
	margin: 0;
}

/* ── CTA SECTION ─────────────────────────────────────── */
.cta-section { padding: 80px 0; background: var(--surface-3); }  /* pausa suave antes do footer */

/* Mapa de localização */
.map-embed {
	margin-top: 32px;
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--sh-sm);
}

.map-embed iframe {
	display: block;
	width: 100%;
	height: 360px;
}

/* ── INDUSTRIAL — proof strip dark ──────────────────── */
.proof-strip-dark {
	background: var(--dark);
	border-bottom: 1px solid var(--line-dark);
}
.proof-strip-dark .proof-card   { border-right-color: var(--line-dark); }
.proof-strip-dark .proof-card strong { color: var(--accent); }
.proof-strip-dark .proof-card span   { color: var(--on-dark-2); }

/* ── INDUSTRIAL — spotlight impact panel ─────────── */
.ind-spotlight-section { padding: 80px 0; background: var(--bg); }

.ind-impact {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 0.52fr);
	border-radius: var(--r-2xl);
	overflow: hidden;
	background: linear-gradient(140deg, var(--dark) 0%, var(--dark-2) 100%);
	border: 1px solid var(--line-dark);
	box-shadow: var(--sh-xl);
	position: relative;
}
.ind-impact::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 60% 55% at 105% -5%,
			color-mix(in srgb, var(--primary) 16%, transparent), transparent 55%),
		radial-gradient(ellipse 40% 35% at -5% 105%,
			color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%);
	pointer-events: none;
}
.ind-impact-copy {
	padding: 52px 56px;
	border-right: 1px solid var(--line-dark);
	position: relative;
}
.ind-impact-copy .section-tag { color: var(--accent); }
.ind-impact-copy h2 {
	color: var(--on-dark);
	max-width: 22ch;
	margin: 6px 0 16px;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.ind-impact-copy > p { color: var(--on-dark-2); font-size: 0.97rem; line-height: 1.72; }
.ind-impact-aside {
	padding: 52px 36px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
}
.ind-impact-aside .side-card {
	background: rgba(255,255,255,0.05);
	border-color: var(--line-dark);
}
.ind-impact-aside .card-tag { color: var(--accent); }
.ind-impact-aside h3 { color: var(--on-dark); font-size: 1rem; line-height: 1.4; }
.ind-impact-aside .mini-tags span {
	background: rgba(255,255,255,0.07);
	border-color: rgba(255,255,255,0.14);
	color: var(--on-dark-2);
}

/* ── INDUSTRIAL — features wide card + row de 3 ──── */
.feat-ind-wrap { display: flex; flex-direction: column; gap: 16px; }

.feat-ind-top {
	border-radius: var(--r-2xl);
	background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
	border: 1px solid var(--line-dark);
	border-left: 5px solid var(--primary);
	padding: 48px 52px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
	overflow: hidden;
}
.feat-ind-top::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(ellipse 55% 80% at 100% 50%,
		color-mix(in srgb, var(--primary) 14%, transparent), transparent 55%);
	pointer-events: none;
}
.feat-ind-top-copy { position: relative; }
.feat-ind-top-copy .card-tag { color: var(--accent); margin-bottom: 8px; }
.feat-ind-top-copy h3 {
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	color: var(--on-dark);
	letter-spacing: -0.02em;
	line-height: 1.28;
	margin: 0 0 12px;
	max-width: 52ch;
}
.feat-ind-top-copy p { font-size: 0.95rem; color: var(--on-dark-2); line-height: 1.7; }
.feat-ind-top .hero-card-bar { position: relative; }

.feat-ind-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.feat-ind-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 4px solid var(--primary);
	border-radius: var(--r-xl);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: var(--sh-xs);
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.feat-ind-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.feat-ind-card .card-tag { color: var(--primary); margin-bottom: 4px; }
.feat-ind-card h4 {
	font-family: "Outfit", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.015em;
	margin: 0 0 6px;
}
.feat-ind-card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; margin: 0; }

/* ── INDUSTRIAL — segments dark strip ───────────── */
.ind-segments-section {
	padding: 80px 0;
	background: var(--dark);
}
.ind-segments-section .section-tag { color: var(--accent); }
.ind-segments-section .segment-copy h2 { color: var(--on-dark); }
.ind-segments-section .segment-copy p  { color: var(--on-dark-2); }
.ind-segments-section .segment-tags span {
	background: rgba(255,255,255,0.07);
	border-color: rgba(255,255,255,0.15);
	color: var(--on-dark-2);
}

/* ── HUMANO — spotlight centralizado ───────────────── */
.spotlight-centered {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}
.spotlight-centered h2  { margin: 6px 0 16px; }
.spotlight-centered-lead {
	font-size: 1.03rem;
	color: var(--text-2);
	line-height: 1.72;
	margin-bottom: 36px;
}
.spotlight-meta-row {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.spotlight-meta-row .side-card {
	flex: 1;
	min-width: 200px;
	max-width: 300px;
	text-align: left;
}

/* ── HUMANO — features lista horizontal ───────────── */
.features-list-h { display: flex; flex-direction: column; }

.flist-intro {
	padding: 4px 0 28px;
	border-bottom: 2px solid var(--primary);
	margin-bottom: 8px;
}
.flist-intro .card-tag    { color: var(--primary); }
.flist-intro-text {
	font-size: 1.03rem;
	color: var(--text);
	font-weight: 500;
	line-height: 1.55;
	max-width: 62ch;
	margin: 8px 0 16px;
}

.flist-item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 28px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
	align-items: start;
}

.flist-num {
	font-family: "Outfit", sans-serif;
	font-size: 2.6rem;
	font-weight: 800;
	color: var(--primary);
	opacity: 0.18;
	letter-spacing: -0.05em;
	line-height: 1;
	padding-top: 4px;
}

.flist-body .card-tag { color: var(--primary); margin-bottom: 4px; }
.flist-body h4 {
	font-family: "Outfit", sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.015em;
	margin: 0 0 8px;
}
.flist-body p { font-size: 0.9rem; color: var(--text-2); line-height: 1.68; margin: 0; }

/* ── HUMANO — process timeline vertical ──────────── */
.process-steps-v {
	display: flex;
	flex-direction: column;
	max-width: 620px;
}

.process-step-v {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 24px;
	align-items: start;
}

.psv-track {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.psv-dot {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--primary-d));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Outfit", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
	flex-shrink: 0;
}

.psv-line {
	width: 2px;
	flex: 1;
	min-height: 40px;
	background: linear-gradient(to bottom, rgba(37,99,235,0.35), rgba(37,99,235,0.04));
	margin: 6px 0;
}

.process-step-v .process-body {
	padding: 10px 0 40px;
}

.cta-panel {
	display: grid;
	grid-template-columns: 1fr minmax(260px, 0.65fr);
	border-radius: var(--r-2xl);
	overflow: hidden;
	background: linear-gradient(140deg, var(--dark) 0%, var(--dark-2) 100%);
	border: 1px solid var(--line-dark);
	box-shadow: var(--sh-xl);
}

.cta-copy { padding: 56px 52px; }

.cta-copy .section-tag { color: var(--accent); }

.cta-copy h2 {
	color: var(--on-dark);
	max-width: 20ch;
	margin-bottom: 16px;
}

.cta-copy p {
	color: var(--on-dark-2);
	font-size: 0.97rem;
	line-height: 1.72;
	margin-bottom: 30px;
}

.contact-card {
	background: rgba(255,255,255,0.04);
	border-left: 1px solid var(--line-dark);
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}

.contact-card > div {
	padding: 16px 20px;
	border-radius: var(--r-lg);
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
}

.contact-card > div > span {
	font-size: 0.67rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

.contact-card > div > strong {
	display: block;
	margin-top: 4px;
	font-size: 0.97rem;
	color: var(--on-dark);
}

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer {
	background: #04080e;
	border-top: 1px solid rgba(255,255,255,0.05);
	padding: 36px 0;
}

.footer-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 24px;
}

.footer-title {
	font-family: "Outfit", sans-serif;
	font-size: 0.97rem;
	font-weight: 700;
	color: var(--on-dark);
	margin-bottom: 5px;
}

.footer-row > div > p {
	font-size: 0.84rem;
	color: rgba(255,255,255,0.34);
	margin: 0;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 2px; }

.footer-links a {
	padding: 8px 14px;
	border-radius: var(--r-full);
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255,255,255,0.4);
	transition: color 0.18s, background 0.18s;
}

.footer-links a:hover {
	color: var(--on-dark);
	background: rgba(255,255,255,0.08);
}

/* ── PROPOSAL THEMES ─────────────────────────────────── */

/* 1. Executivo — Electric Blue + Cyan */
.page-executivo {
	--primary:   #2563eb;
	--primary-d: #1d4ed8;
	--accent:    #38bdf8;
	--dark:      #07101e;
	--dark-2:    #0c1a30;
}

/* 2. Industrial — Deep Orange + Amber */
.page-industrial {
	--primary:   #ea580c;
	--primary-d: #c2410c;
	--accent:    #fbbf24;
	--dark:      #0d0805;
	--dark-2:    #1b0f06;
}

.page-industrial .pillar-card { border-left-color: #ea580c; }

/* 3. Humano — Teal + Emerald */
.page-humano {
	--primary:   #0f766e;
	--primary-d: #0e6b63;
	--accent:    #34d399;
	--dark:      #040f0d;
	--dark-2:    #071916;
}

.page-humano .pillar-card { border-left-color: #0f766e; }

/* ── SCROLL ANIMATIONS ───────────────────────────────── */
.fade-up {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-up.visible { opacity: 1; transform: none; }
.fade-up.d1 { transition-delay: 0.10s; }
.fade-up.d2 { transition-delay: 0.20s; }
.fade-up.d3 { transition-delay: 0.30s; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 980px) {
	.overview-grid,
	.hero-split,
	.section-head-wide,
	.spotlight-grid,
	.feature-layout,
	.segment-layout,
	.cta-panel {
		grid-template-columns: 1fr;
	}

	.signal-grid { grid-template-columns: 1fr; }
	.signal-grid > div { border-right: none; border-bottom: 1px solid var(--line); }
	.signal-grid > div:last-child { border-bottom: none; }

	.proposal-grid,
	.proposal-grid-large { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

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

	.proof-grid { grid-template-columns: 1fr; }
	.proof-card { border-right: none; border-bottom: 1px solid var(--line); }
	.proof-card:last-child { border-bottom: none; }

	.process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.process-card { padding: 0; }
	.process-card:not(:last-child) .process-connector { display: none; }

	.feature-panel-grid { grid-template-columns: 1fr; }
	.feature-panel-large { grid-column: auto; }
	.features-bento { grid-template-columns: 1fr; }
	.features-stack { grid-template-rows: auto; }

	.cta-copy { padding: 40px 32px; }
	.contact-card {
		border-left: none;
		border-top: 1px solid var(--line-dark);
	}
}

@media (max-width: 640px) {
	:root { --w: min(1180px, calc(100vw - 32px)); }

	.overview-hero,
	.hero { padding: 68px 0 52px; }

	h1 { font-size: 2.4rem; }
	h2 { font-size: 1.8rem; }

	.main-nav { gap: 0; }
	.main-nav a { padding: 7px 11px; font-size: 0.81rem; }

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

	.footer-row { grid-template-columns: 1fr; }

	.cta-copy { padding: 32px 24px; }
	.contact-card { padding: 28px 24px; }

	.hero-split { grid-template-columns: 1fr; }
	.hero::before {
		background: linear-gradient(
			to right,
			rgba(6,13,26,0.94) 0%,
			rgba(6,13,26,0.82) 100%
		);
	}
}
