/* ==========================================================================
   Cruzeiro do Sul — Polos — estilos base
   Paleta e tipografia seguindo o padrao de marca oficial (cruzeirodosulvirtual.com.br):
   azul-marinho + ciano de destaque + amarelo pontual, tipografia Work Sans.
   ========================================================================== */

:root {
	--cdsp-azul: #003B71;
	--cdsp-ciano: #009CDE;
	--cdsp-amarelo: #FFEB3B;
	--cdsp-chip-pira-bg: #E1F4FC;
	--cdsp-chip-pira-text: #007AB8;
	--cdsp-chip-padua-bg: #E7EEF4;
	--cdsp-chip-padua-text: #003B71;
	--cdsp-bg: #F2F4F7;
	--cdsp-card-bg: #FFFFFF;
	--cdsp-shadow: 0 1px 2px rgba(0, 59, 113, 0.08);
	--cdsp-radius: 12px;
	--cdsp-gap-desktop: 20px;
	--cdsp-gap-mobile: 12px;
	--font-heading: 'Work Sans', sans-serif;
	--font-body: 'Work Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--cdsp-bg);
	color: var(--cdsp-azul);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.5;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0 0 0.5em;
	color: var(--cdsp-azul);
}

a { color: inherit; }

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.section { padding: 64px 0; }

.eyebrow {
	color: var(--cdsp-ciano);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Botoes */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 8px;
	font-family: var(--font-heading);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
}
.btn-primary { background: var(--cdsp-ciano); color: #fff; }
.btn-secondary { background: transparent; border-color: var(--cdsp-azul); color: var(--cdsp-azul); }
.btn-sm { padding: 10px 18px; font-size: 14px; }

/* Header */
.site-header {
	padding: 20px 0;
	background: var(--cdsp-card-bg);
	position: sticky;
	top: 0;
	z-index: 40;
	box-shadow: var(--cdsp-shadow);
}
.site-header nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
}
.site-header nav a { text-decoration: none; font-weight: 600; }
.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 0 112px; /* recuo simetrico: logo e menu ficam pra dentro da linha do conteudo abaixo */
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 56px; width: auto; display: block; }
.site-header nav { display: flex; }

.header-fale-wrap { position: relative; list-style: none; }
.header-fale-toggle {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1em;
	color: inherit;
	cursor: pointer;
}
.header-fale-selector {
	display: none;
	position: absolute;
	top: calc(100% + 16px);
	right: 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	padding: 6px;
	min-width: 220px;
	z-index: 50;
}
.header-fale-selector.open { display: block; }
.header-fale-selector a {
	display: block;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--cdsp-azul);
	font-weight: 600;
	font-size: 14px;
	border-radius: 6px;
}
.header-fale-selector a:hover { background: var(--cdsp-bg); }

/* Hero */
.hero-section { padding: 32px 0 24px; }
.hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}
.hero-cta { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.hero img { width: 100%; border-radius: var(--cdsp-radius); }
.hero-graphic { box-shadow: 0 12px 32px rgba(0, 59, 113, 0.25); max-height: 280px; width: auto; margin: 0 auto; display: block; }

/* Nossos Polos */
.polos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cdsp-gap-desktop);
}
.polo-card {
	background: var(--cdsp-card-bg);
	border-radius: var(--cdsp-radius);
	box-shadow: var(--cdsp-shadow);
	overflow: hidden;
}
.polo-card { display: flex; flex-direction: column; }
.polo-card img,
.polo-card-foto-placeholder { width: 100%; height: 200px; object-fit: cover; display: block; }
.polo-card-foto-placeholder {
	background: var(--cdsp-bg);
	color: #8A97A6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.polo-card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.polo-card-body h3 { margin-bottom: 4px; }
.polo-card-body p { margin: 0; color: #3C4A5A; font-size: 15px; }
.polo-card-map { width: 100%; height: 200px; border: 0; border-radius: 8px; margin: 12px 0 4px; }
.polo-card-body .btn { align-self: flex-start; margin-top: 16px; }

/* Ofertas */
.ofertas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cdsp-gap-desktop);
}
.oferta-card {
	background: var(--cdsp-card-bg);
	border-radius: var(--cdsp-radius);
	box-shadow: var(--cdsp-shadow);
	padding: 20px;
}

/* Cursos */
.cursos-legenda { display: flex; gap: 20px; margin-bottom: 24px; align-items: center; }
.cursos-legenda .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot-pirapetinga { background: var(--cdsp-ciano); }
.dot-padua { background: var(--cdsp-azul); }

.cursos-filtros { display: flex; gap: 8px; margin-bottom: 24px; }
.filtro-btn {
	padding: 8px 16px;
	border-radius: 20px;
	border: 1px solid var(--cdsp-azul);
	background: transparent;
	color: var(--cdsp-azul);
	font-family: var(--font-heading);
	font-weight: 600;
	cursor: pointer;
}
.filtro-btn.active { background: var(--cdsp-azul); color: #fff; }

.cursos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cdsp-gap-desktop);
}
.curso-card {
	background: var(--cdsp-card-bg);
	border-radius: var(--cdsp-radius);
	box-shadow: var(--cdsp-shadow);
	padding: 24px;
	display: flex;
	flex-direction: column;
}
.curso-card .meta {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6B7A8C;
	margin-bottom: 4px;
}
.curso-card h3 { font-size: 19px; margin-bottom: 8px; }
.curso-objetivo {
	font-size: 14px;
	color: #4E5D6C;
	margin: 0 0 12px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.curso-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.curso-duracao {
	margin-top: 12px;
	margin-bottom: auto;
	font-size: 13px;
	color: #6B7A8C;
}
.chip {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
}
.chip-pirapetinga { background: var(--cdsp-chip-pira-bg); color: var(--cdsp-chip-pira-text); }
.chip-padua { background: var(--cdsp-chip-padua-bg); color: var(--cdsp-chip-padua-text); }
.curso-vermais {
	margin-top: 16px;
	text-align: right;
	color: var(--cdsp-ciano);
	font-weight: 700;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1em;
	display: block;
	width: 100%;
}
.curso-vermais-wrap { position: relative; margin-top: 16px; }
.curso-vermais-selector {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	padding: 6px;
	min-width: 220px;
	z-index: 10;
}
.curso-vermais-selector.open { display: block; }
.curso-vermais-selector a {
	display: block;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--cdsp-azul);
	font-weight: 600;
	font-size: 14px;
	border-radius: 6px;
}
.curso-vermais-selector a:hover { background: var(--cdsp-bg); }
.cursos-vertodos { text-align: center; margin-top: 32px; }
.curso-extra { display: none; }
.cursos-grid.show-all .curso-extra { display: flex; }

/* Diferenciais / Motivos */
.motivos-intro {
	max-width: 720px;
	color: #3C4A5A;
	margin-bottom: 32px;
}
.motivos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 980px;
	margin: 0 auto;
}
.motivo-tile {
	background: linear-gradient(135deg, #0B5A9C 0%, var(--cdsp-azul) 60%, #00284F 100%);
	border-radius: var(--cdsp-radius);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 140px;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
}
.motivo-icone { font-size: 28px; }
.motivo-texto {
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}
.motivo-tile-foto { padding: 0; justify-content: flex-end; }
.motivo-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.motivo-tile-foto::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,40,79,0.88) 0%, rgba(0,40,79,0.35) 55%, rgba(0,40,79,0.05) 100%);
	z-index: 1;
}
.motivo-texto-sobre-foto {
	position: relative;
	z-index: 2;
	padding: 16px 20px;
}

/* FAQ */
.faq-item { border-bottom: 1px solid #DDE3EA; }
.faq-question {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 20px 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 17px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
}
.faq-answer { display: none; padding: 0 0 20px; color: #3C4A5A; }
.faq-item.open .faq-answer { display: block; }

/* Footer */
.site-footer {
	background: var(--cdsp-azul);
	color: #fff;
	padding: 48px 0 24px;
}
.site-footer a { color: #fff; }
.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 32px;
}

/* Topbar CTA (acima do header) */
.cta-topbar {
	position: relative;
	height: 60px;
	background:
		radial-gradient(ellipse 620px 200px at 50% 50%, rgba(19, 60, 110, 0.55) 0%, transparent 75%),
		linear-gradient(90deg, #0B1B30 0%, #142B47 50%, #0B1B30 100%);
	display: flex;
	align-items: center;
}
.cta-topbar-inner {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 0 20px;
}
.cta-topbar-star-wrap {
	height: 100%;
	width: auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.cta-topbar-star {
	height: 74px;
	width: auto;
	max-width: none;
	filter: drop-shadow(0 0 14px rgba(95, 212, 255, 0.4));
}
.cta-topbar-text {
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
}
.cta-topbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #34E07A 0%, #17B866 100%);
	box-shadow: 0 2px 10px rgba(23, 184, 102, 0.45);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 8px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
}
.cta-topbar-btn svg { width: 18px; height: 18px; }
.cta-topbar-wrap { position: relative; }
.cta-topbar-selector {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	padding: 6px;
	min-width: 220px;
	z-index: 50;
}
.cta-topbar-selector.open { display: block; }
.cta-topbar-selector a {
	display: block;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--cdsp-azul);
	font-weight: 600;
	font-size: 14px;
	border-radius: 6px;
}
.cta-topbar-selector a:hover { background: var(--cdsp-bg); }

@media (max-width: 768px) {
	.cta-topbar { height: auto; padding: 12px 0; }
	.cta-topbar-star { height: 52px; width: auto; }
	.cta-topbar-text { font-size: 14px; text-align: center; }
}

/* Elementos flutuantes */
.cdsp-float-wrap {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}
.cdsp-whatsapp-float {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	cursor: pointer;
	border: none;
}
.cdsp-polo-selector {
	position: absolute;
	bottom: 68px;
	right: 0;
	background: #fff;
	border-radius: var(--cdsp-radius);
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	padding: 8px;
	display: none;
	min-width: 220px;
}
.cdsp-polo-selector.open { display: block; }
.cdsp-polo-selector a {
	display: block;
	padding: 12px;
	text-decoration: none;
	color: var(--cdsp-azul);
	font-weight: 600;
	border-radius: 8px;
}
.cdsp-polo-selector a:hover { background: var(--cdsp-bg); }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
	.hero,
	.polos-grid,
	.ofertas-grid,
	.cursos-grid,
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--cdsp-gap-mobile);
	}
	.motivos-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--cdsp-gap-mobile);
	}
	.site-header nav { display: none; }
	.section { padding: 40px 0; }
}