/*
	SOSCode — extensões do tema Verti (main.css)
	Mantém a mesma linguagem visual: caixas brancas, raio 6px, sombra 0 3px 0,
	destaque rosa (#ff4486) da marca e azul (#0090c5) dos botões.
*/

:root {
	--sc-pink: #ff4486;
	--sc-pink-soft: #fff0f5;
	--sc-blue: #0090c5;
	--sc-blue-soft: #e8f6fb;
	--sc-ink: #444;
	--sc-text: #696969;
	--sc-line: #eee;
	--sc-radius: 6px;
	--sc-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05);
}

/* Botões nativos não herdam a fonte do tema */
	button, input[type="submit"], input[type="button"] { font-family: 'Open Sans', sans-serif; }

/* ---------- Correções do cabeçalho ---------- */

	/* O slogan invadia o menu em telas médias */
	@media screen and (max-width: 1600px) {
		#logo span { display: none; }
	}

	#nav ul li { padding-left: 0.6em; }
	#nav ul li a, #nav ul li span { padding: 0.5em 0.85em; }

	/* Ícone dos botões grandes do banner sobrepunha o texto */
	#banner .button.large { font-size: 1.5em; white-space: nowrap; padding: 0.85em 2.6em 0.85em 1em; }
	#banner .button.icon { text-align: left; }
	#banner .button.icon:before { right: 0.9em; }

/* ---------- Cabeçalho de página interna ---------- */

	.page-hero {
		position: relative;
		overflow: hidden;
		padding: 3.5em 4em;
		margin-bottom: 3em;
	}

		.page-hero:after {
			content: '';
			position: absolute;
			right: -4em;
			top: -4em;
			width: 16em;
			height: 16em;
			border-radius: 50%;
			background: var(--sc-pink-soft);
			z-index: 0;
		}

		.page-hero > * { position: relative; z-index: 1; }

		.eyebrow {
			display: inline-block;
			color: var(--sc-pink);
			font-weight: 800;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			font-size: 0.8em;
			margin-bottom: 0.25em;
		}

		.page-hero h2 {
			font-size: 2.6em;
			line-height: 1.2em;
			margin: 0 0 0.4em 0;
		}

		.page-hero p {
			font-size: 1.35em;
			line-height: 1.6em;
			margin: 0;
			max-width: 38em;
		}

		.page-hero p.meta { font-size: 0.9em; }

	.box h2, .section h2 { line-height: 1.3em; }

	.breadcrumb {
		list-style: none;
		padding: 0;
		margin: 0 0 1em 0;
		font-size: 0.85em;
	}

		.breadcrumb li { display: inline; padding: 0; }
		.breadcrumb li + li:before { content: '›'; margin: 0 0.5em; color: #bbb; }
		.breadcrumb a { color: var(--sc-text); text-decoration: none; }
		.breadcrumb a:hover { color: var(--sc-blue); }

/* ---------- Seções e grades ---------- */

	.content-band { padding: 5em 0 1em 0; }

	.section { margin-bottom: 3em; }

	.section-title {
		text-align: center;
		margin-bottom: 2em;
	}

		.section-title h2 { font-size: 2em; margin-bottom: 0.25em; }
		.section-title p { margin: 0 auto; max-width: 40em; }

	.card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
		gap: 1.5em;
	}

		.card-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(22em, 1fr)); }

		/* O tema aplica margin-bottom: 3em em article/section; dentro da grade o espaçamento é o gap */
		.card-grid > * { margin-bottom: 0 !important; }

	.card .tag, .card > span:not(.card-footer) { align-self: flex-start; }

	.card {
		background: #fff;
		border-radius: var(--sc-radius);
		box-shadow: var(--sc-shadow);
		padding: 2em;
		display: flex;
		flex-direction: column;
		transition: transform .2s ease, box-shadow .2s ease;
	}

		.card:hover {
			transform: translateY(-3px);
			box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
		}

		.card h3 { font-size: 1.2em; margin-bottom: 0.4em; line-height: 1.4em; }
		.card p { margin-bottom: 1em; line-height: 1.8em; }
		.card .card-footer { margin-top: auto; }

		.card .card-media {
			margin: -2em -2em 1.5em -2em;
			border-radius: var(--sc-radius) var(--sc-radius) 0 0;
			background: #fafafa;
			display: flex;
			align-items: center;
			justify-content: center;
			aspect-ratio: 4 / 3;
			overflow: hidden;
		}

			.card .card-media img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.card .card-media.contain img {
				object-fit: contain;
				padding: 1.5em;
			}

	.icon-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.2em;
		height: 3.2em;
		border-radius: 50%;
		background: var(--sc-pink-soft);
		color: var(--sc-pink);
		font-size: 1.1em;
		margin-bottom: 1em;
	}

		.icon-badge.blue { background: var(--sc-blue-soft); color: var(--sc-blue); }
		.icon-badge:before { line-height: 1 !important; }

	.tag {
		display: inline-block;
		font-size: 0.75em;
		font-weight: 600;
		line-height: 1.8em;
		padding: 0 0.8em;
		border-radius: 1em;
		background: var(--sc-blue-soft);
		color: var(--sc-blue);
		margin: 0 0.3em 0.5em 0;
	}

		.tag.pink { background: var(--sc-pink-soft); color: var(--sc-pink); }

/* ---------- Passo a passo ---------- */

	.steps {
		list-style: none;
		padding: 0;
		counter-reset: step;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
		gap: 1.5em;
	}

		.steps li {
			counter-increment: step;
			background: #fff;
			border-radius: var(--sc-radius);
			box-shadow: var(--sc-shadow);
			padding: 2.5em 1.75em 1.75em 1.75em;
			position: relative;
		}

			.steps li:before {
				content: counter(step);
				position: absolute;
				top: -0.9em;
				left: 1.25em;
				width: 1.9em;
				height: 1.9em;
				line-height: 1.9em;
				text-align: center;
				border-radius: 50%;
				background: var(--sc-pink);
				color: #fff;
				font-weight: 800;
				font-size: 1.2em;
			}

			.steps li h3 { font-size: 1.1em; margin-bottom: 0.4em; }
			.steps li p { margin: 0; line-height: 1.8em; }

/* ---------- Conteúdo longo (artigos, políticas) ---------- */

	.prose { max-width: 48em; }
		.prose h2 { font-size: 1.6em; margin: 1.8em 0 0.6em 0; }
		.prose h3 { font-size: 1.2em; margin: 1.5em 0 0.4em 0; }
		.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
		.prose p, .prose ul, .prose ol { margin-bottom: 1.25em; }
		.prose li { margin-bottom: 0.3em; }
		.prose strong { color: var(--sc-ink); }

	.toc {
		position: sticky;
		top: 2em;
		font-size: 0.9em;
	}

		.toc h3 { font-size: 1em; }
		.toc ol { padding-left: 1.2em; margin: 0; }
		.toc a { color: var(--sc-text); text-decoration: none; }
		.toc a:hover { color: var(--sc-blue); }

	.callout {
		border-left: 4px solid var(--sc-blue);
		background: var(--sc-blue-soft);
		border-radius: 0 var(--sc-radius) var(--sc-radius) 0;
		padding: 1em 1.5em;
		margin: 0 0 1.5em 0;
		line-height: 1.8em;
	}

		.callout.pink { border-color: var(--sc-pink); background: var(--sc-pink-soft); }
		.callout p:last-child { margin-bottom: 0; }

	.meta { font-size: 0.85em; color: #999; }

/* ---------- Tabelas ---------- */

	.table-wrap { overflow-x: auto; margin-bottom: 1.5em; }

	table.data {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.95em;
		line-height: 1.6em;
	}

		table.data th, table.data td {
			text-align: left;
			padding: 0.75em 1em;
			border-bottom: 1px solid var(--sc-line);
			vertical-align: top;
		}

		table.data th { color: var(--sc-ink); font-weight: 800; background: #fafafa; }

/* ---------- FAQ (acordeão nativo) ---------- */

	.faq details {
		background: #fff;
		border-radius: var(--sc-radius);
		box-shadow: var(--sc-shadow);
		margin-bottom: 0.75em;
	}

		.faq summary {
			cursor: pointer;
			list-style: none;
			padding: 1.1em 3em 1.1em 1.5em;
			font-weight: 600;
			color: var(--sc-ink);
			position: relative;
			line-height: 1.6em;
		}

			.faq summary::-webkit-details-marker { display: none; }

			.faq summary:after {
				content: '+';
				position: absolute;
				right: 1.2em;
				top: 50%;
				transform: translateY(-50%);
				font-size: 1.5em;
				font-weight: 300;
				color: var(--sc-pink);
			}

		.faq details[open] summary:after { content: '–'; }

		.faq .answer {
			padding: 0 1.5em 1.25em 1.5em;
			line-height: 1.9em;
		}

			.faq .answer p:last-child { margin-bottom: 0; }

	.faq-group h3 {
		margin: 2em 0 0.8em 0;
		font-size: 1.15em;
	}

/* ---------- Formulários ---------- */

	.form label {
		display: block;
		font-weight: 600;
		color: var(--sc-ink);
		font-size: 0.9em;
		margin-bottom: 0.2em;
	}

	.form input[type="text"],
	.form input[type="email"],
	.form input[type="tel"],
	.form input[type="url"],
	.form input[type="file"],
	.form select,
	.form textarea {
		width: 100%;
		border: 1px solid #ddd;
		border-radius: var(--sc-radius);
		background: #fafafa;
		padding: 0.4em 0.9em;
		margin-bottom: 1.1em;
		transition: border-color .2s ease, background .2s ease;
	}

		.form select {
			background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%);
			background-position: calc(100% - 1.2em) 50%, calc(100% - 0.85em) 50%;
			background-size: 0.35em 0.35em;
			background-repeat: no-repeat;
			padding-right: 2.5em;
		}

		.form input[type="text"], .form input[type="email"], .form input[type="tel"],
		.form input[type="url"], .form select { height: 2.9em; line-height: normal; }

		.form input[type="file"] { height: auto; padding: 0.6em 0.9em; line-height: 1.5em; }

		.form textarea { min-height: 9em; line-height: 1.7em; padding-top: 0.6em; }

		.form input:focus, .form select:focus, .form textarea:focus {
			outline: 0;
			border-color: var(--sc-blue);
			background: #fff;
		}

	.form .hint { font-size: 0.8em; color: #999; margin: -0.9em 0 1em 0; line-height: 1.5em; }

	.form .check {
		display: flex;
		gap: 0.6em;
		align-items: flex-start;
		font-weight: 300;
		line-height: 1.6em;
		margin-bottom: 1.2em;
	}

		.form .check input {
			-webkit-appearance: checkbox;
			appearance: checkbox;
			margin-top: 0.35em;
		}

	/* Campo-armadilha anti-spam: invisível para pessoas */
	.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

	.flash {
		border-radius: var(--sc-radius);
		padding: 0.9em 1.25em;
		margin-bottom: 1.5em;
		line-height: 1.6em;
		background: var(--sc-blue-soft);
		color: #05618a;
	}

		.flash.error { background: #fdecec; color: #b3261e; }
		.flash.success { background: #e9f7ef; color: #1e7b45; }

/* ---------- Faixa de chamada ---------- */

	.cta-band {
		background: var(--sc-pink);
		color: #fff;
		border-radius: var(--sc-radius);
		padding: 2.5em 3em;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1.5em;
	}

		.cta-band h2 { color: #fff; margin: 0 0 0.2em 0; font-size: 1.7em; line-height: 1.3em; }
		.cta-band p { margin: 0; opacity: 0.92; line-height: 1.7em; }
		.cta-band .button { background: #fff; color: var(--sc-pink); white-space: nowrap; }
		.cta-band .button:hover { background: #fff0f5; }

	.button.small { font-size: 1em; padding: 0.45em 1.2em; }
	.button.pink { background: var(--sc-pink); }
	.button.pink:hover { background: #ff5e98; }
	.button.whatsapp { background: #25d366; }
	.button.whatsapp:hover { background: #2fe476; }

	.actions-row { display: flex; flex-wrap: wrap; gap: 0.75em; align-items: center; }

/* ---------- Lista com ícones ---------- */

	ul.checks { list-style: none; padding: 0; }
		ul.checks li { padding: 0 0 0 1.9em; position: relative; margin-bottom: 0.4em; line-height: 1.8em; }
		ul.checks li:before {
			content: '\f00c';
			font-family: 'Font Awesome 5 Free';
			font-weight: 900;
			position: absolute;
			left: 0;
			top: 0.05em;
			color: var(--sc-pink);
		}

/* ---------- Rodapé ---------- */

	.footer-contact { list-style: none; padding: 0; margin: 0; }

		/* O tema transforma todo link de .widget.contact em ícone quadrado de rede social */
		.widget.contact ul.footer-contact { left: 0; top: 0; overflow: visible; }
		.widget.contact ul.footer-contact li { display: flex; margin-right: 0; }
		.widget.contact ul.footer-contact li a {
			display: inline; width: auto; height: auto; line-height: inherit;
			background: none; opacity: 1; border-radius: 0; text-decoration: underline;
		}
		.footer-contact li { display: flex; align-items: center; gap: 0.75em; padding: 0; margin-bottom: 0.5em; line-height: 1.7em; }
		.footer-contact .icon:before { width: 1.2em; text-align: center; color: var(--sc-pink); }

/* ---------- Página de erro ---------- */

	.error-code {
		font-family: 'Kosugi Maru', sans-serif;
		font-size: 6em;
		line-height: 1em;
		color: var(--sc-pink);
		margin-bottom: 0.2em;
	}

/* ---------- Responsivo ---------- */

	@media screen and (max-width: 980px) {
		.page-hero { padding: 2.5em 2em; }
		.page-hero h2 { font-size: 2em; }
		.page-hero p { font-size: 1.15em; }
		.toc { position: static; margin-bottom: 2em; }
		#banner .button.icon { padding-right: 1.2em; text-align: center; }
	}

	@media screen and (max-width: 736px) {
		.page-hero { padding: 2em 1.5em; margin-bottom: 2em; }
		.page-hero h2 { font-size: 1.6em; }
		.page-hero p { font-size: 1em; }
		.page-hero:after { width: 9em; height: 9em; }
		.cta-band { padding: 2em 1.5em; }
		.card { padding: 1.5em; }
		.card .card-media { margin: -1.5em -1.5em 1.25em -1.5em; }
		.error-code { font-size: 4em; }
	}