/*
Theme Name: Oficina de Transmissão ao Vivo
Theme URI: https://vvideo.com.br
Author: V Vídeo — Estúdio e Produção Audiovisual
Author URI: https://vvideo.com.br
Description: Tema One Page para a Oficina de Transmissão ao Vivo. Todos os textos, imagens, ícones e links são editáveis em Aparência → Personalizar → Oficina de Transmissão ao Vivo.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oficina-transmissao
Tags: one-page, landing-page, custom-colors, custom-menu, responsive
*/

/* =========================================================================
   1. Variáveis
   ====================================================================== */

:root {
	--color-primary: #e31b23;
	--color-primary-hover: #bd1118;
	--color-primary-light: #fff0f1;

	--color-black: #111111;
	--color-black-soft: #1b1b1b;
	--color-text: #202020;
	--color-text-muted: #656565;

	--color-gray-50: #fafafa;
	--color-gray-100: #f5f5f5;
	--color-gray-200: #e8e8e8;
	--color-gray-300: #d6d6d6;

	--color-white: #ffffff;

	--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.07);
	--shadow-button: 0 8px 20px rgba(227, 27, 35, 0.22);

	--font-display: "Montserrat", "Arial Black", sans-serif;
	--font-body: "Inter", Arial, sans-serif;

	--container: 1180px;
	--header-altura: 82px;

	/* Tamanho do botão de play sobre as capas de vídeo. */
	--play-tamanho: 26%;
}

/* =========================================================================
   2. Base
   ====================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-altura) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-white);
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
	display: block;
}

a {
	color: var(--color-primary);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	color: var(--color-black);
	margin-top: 0;
}

h1 {
	font-size: clamp(40px, 5.2vw, 66px);
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	margin-bottom: 22px;
}

h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

h3 {
	font-size: clamp(17px, 1.6vw, 20px);
	font-weight: 700;
	line-height: 1.25;
}

p {
	margin: 0 0 16px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pular-para-conteudo {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	padding: 12px 20px;
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
	text-decoration: none;
}

.pular-para-conteudo:focus {
	left: 12px;
	top: 12px;
}

:focus-visible {
	outline: 3px solid rgba(227, 27, 35, 0.45);
	outline-offset: 3px;
}

/* =========================================================================
   3. Estruturas reutilizadas
   ====================================================================== */

.page-container {
	width: min(var(--container), calc(100% - 40px));
	margin-inline: auto;
}

.page-container--estreito {
	width: min(860px, calc(100% - 40px));
}

.section {
	padding-block: 88px;
}

.section--compacta {
	padding-block: 56px;
}

.card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: 14px;
	box-shadow: var(--shadow-card);
}

.eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.destaque {
	color: var(--color-primary);
}

.quebra {
	display: block;
}

.titulo-secao {
	margin: 0;
	text-align: center;
}

.titulo-secao--esquerda {
	text-align: left;
}

.risco {
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 14px;
	background: var(--color-primary);
	border-radius: 2px;
}

.risco--centro {
	margin-inline: auto;
	margin-bottom: 44px;
}

.titulo-coluna {
	margin: 0;
	font-size: clamp(21px, 2vw, 26px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* Botões ---------------------------------------------------------------- */

.btn {
	min-height: 50px;
	padding: 13px 24px;
	border: 0;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn--primary {
	color: var(--color-white);
	background: var(--color-primary);
	box-shadow: var(--shadow-button);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--color-primary-hover);
	color: var(--color-white);
	transform: translateY(-2px);
}

.btn--contorno {
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-gray-300);
}

.btn--contorno:hover,
.btn--contorno:focus-visible {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn--compacto {
	min-height: 44px;
	padding: 11px 20px;
	font-size: 13px;
}

.btn__seta {
	width: 17px;
	height: 17px;
	flex: none;
}

.btn--bloco {
	width: 100%;
	min-height: 74px;
	justify-content: space-between;
	text-align: left;
	padding: 16px 24px;
}

.btn--bloco strong {
	display: block;
	font-size: 17px;
	letter-spacing: 0.01em;
}

.btn__linha {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	opacity: 0.85;
}

/* Listas ---------------------------------------------------------------- */

.lista-check {
	display: grid;
	gap: 12px;
	margin: 0 0 32px;
}

.lista-check li {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: start;
	gap: 12px;
	font-size: 15px;
	color: var(--color-text);
}

.lista-check img {
	margin-top: 3px;
}

.lista-check--miuda li {
	grid-template-columns: 18px 1fr;
	gap: 10px;
	font-size: 14.5px;
	color: var(--color-text-muted);
}

.lista-icones {
	display: grid;
	gap: 16px;
}

.lista-icones li {
	display: grid;
	grid-template-columns: 26px 1fr;
	align-items: center;
	gap: 14px;
	font-size: 14.5px;
	color: var(--color-text);
}

.lista-icones--miuda li {
	grid-template-columns: 22px 1fr;
	gap: 12px;
	font-size: 13.5px;
	color: var(--color-text-muted);
}

/* Decorações ------------------------------------------------------------ */

.decor {
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* =========================================================================
   4. Cabeçalho
   ====================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	min-height: var(--header-altura);
	background: var(--color-black);
	color: var(--color-white);
	display: flex;
	align-items: center;
}

.site-header__container {
	width: min(var(--container), calc(100% - 40px));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-block: 12px;
}

.site-header__logo {
	display: block;
	flex: none;
	line-height: 0;
}

.site-header__logo img {
	width: auto;
	height: 46px;
}

.site-header__logo-texto {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 18px;
	color: var(--color-white);
	text-transform: uppercase;
	line-height: 1.05;
}

.site-nav__lista {
	display: flex;
	align-items: center;
	gap: 26px;
}

.site-nav__lista a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--color-white);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.site-nav__lista a:hover,
.site-nav__lista a:focus-visible {
	color: var(--color-primary);
}

.site-header__acoes {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.menu-toggle {
	display: none;
	width: 46px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	position: relative;
}

.menu-toggle__barras,
.menu-toggle__barras::before,
.menu-toggle__barras::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	background: var(--color-white);
	transform: translateX(-50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle__barras {
	top: 50%;
	margin-top: -1px;
}

.menu-toggle__barras::before,
.menu-toggle__barras::after {
	content: "";
	top: 0;
}

.menu-toggle__barras::before {
	transform: translate(-50%, -7px);
}

.menu-toggle__barras::after {
	transform: translate(-50%, 7px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barras {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barras::before {
	transform: translate(-50%, 0) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barras::after {
	transform: translate(-50%, 0) rotate(-45deg);
}

/* =========================================================================
   5. Hero
   ====================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	padding: 64px 0 40px;
	background: var(--color-white);
}

.hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: center;
	gap: 48px;
}

.hero__titulo {
	margin-bottom: 20px;
}

.hero__titulo-linha,
.hero__titulo-destaque {
	display: block;
}

.hero__titulo-destaque {
	color: var(--color-primary);
}

.hero__texto {
	max-width: 44ch;
	margin-bottom: 26px;
	font-size: clamp(15px, 1.2vw, 17px);
	color: var(--color-text-muted);
}

.hero__acoes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}

.hero__aviso {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: var(--color-text-muted);
}

.hero__aviso strong {
	display: block;
	color: var(--color-text);
	font-weight: 600;
}

.hero__chamada {
	margin: 24px 0 0;
	max-width: 46ch;
	font-size: 14px;
	color: var(--color-text-muted);
	border-left: 3px solid var(--color-primary);
	padding-left: 14px;
}

.hero__midia {
	position: relative;
}

.hero__imagem {
	position: relative;
	z-index: 2;
	margin: 0;
	overflow: hidden;
	min-height: 460px;
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 24%);
}

.hero__imagem img {
	width: 100%;
	height: 100%;
	min-height: 460px;
	object-fit: cover;
}

.hero__selo {
	position: absolute;
	right: -12px;
	bottom: -18px;
	z-index: 3;
	width: clamp(96px, 11vw, 132px);
	height: auto;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16));
}

.decor--ondas {
	left: -66px;
	top: 50%;
	width: 210px;
	height: 210px;
	transform: translateY(-50%);
	opacity: 0.5;
	background-image: url("assets/img/decor_circulos_concentricos.png");
}

.decor--circulo {
	right: 6%;
	bottom: -34px;
	width: 82px;
	height: 82px;
	z-index: 3;
	opacity: 0.55;
	background-image: url("assets/img/decor_circulo_aberto.png");
}

.decor--pontos {
	width: 108px;
	height: 108px;
	opacity: 0.75;
	background-image: url("assets/img/pattern_pontos.png");
}

.decor--pontos-esquerda {
	left: 14px;
	bottom: 26px;
}

.decor--pontos-direita {
	right: 22px;
	top: 46px;
}

/* =========================================================================
   6. Informações rápidas
   ====================================================================== */

.info-rapida {
	position: relative;
	z-index: 4;
	padding-block: 34px 12px;
	background: var(--color-white);
}

.info-rapida__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.info-card {
	min-height: 104px;
	padding: 22px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.info-card__icone {
	flex: none;
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.info-card__titulo {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.2;
}

.info-card__texto {
	margin: 0;
	font-size: 13px;
	color: var(--color-text-muted);
}

/* =========================================================================
   7. Benefícios, público e inclusão
   ====================================================================== */

.colunas {
	padding-block: 56px;
}

.colunas__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr 0.95fr;
	gap: 0;
	border-top: 1px solid var(--color-gray-200);
	border-bottom: 1px solid var(--color-gray-200);
}

.coluna {
	position: relative;
	padding: 52px 40px;
	overflow: hidden;
}

.coluna:first-child {
	padding-left: 0;
}

.coluna:last-child {
	padding-right: 0;
}

.coluna + .coluna {
	border-left: 1px solid var(--color-gray-200);
}

.coluna .risco {
	margin-bottom: 26px;
}

.coluna__texto {
	max-width: 34ch;
	font-size: 14px;
	color: var(--color-text-muted);
}

.coluna__mapa {
	position: absolute;
	right: 26px;
	top: 34px;
	width: 190px;
	height: 130px;
	opacity: 0.5;
	background: url("assets/img/mapa_rio_grande_do_norte.png") no-repeat center / contain;
	pointer-events: none;
}

.lista-reservas {
	display: grid;
	gap: 20px;
	margin-top: 24px;
}

.lista-reservas li {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: center;
	gap: 14px;
}

.lista-reservas__icone {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.lista-reservas__pre {
	display: block;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.lista-reservas strong {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.25;
	color: var(--color-black);
}

/* =========================================================================
   8. Módulos
   ====================================================================== */

.modulos {
	background: var(--color-white);
	padding-block: 72px;
}

.modulos__grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 12px;
}

.modulo-card {
	min-height: 186px;
	padding: 26px 14px;
	border: 1px solid var(--color-gray-200);
	border-radius: 12px;
	background: var(--color-white);
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.modulo-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-card);
	border-color: var(--color-gray-300);
}

.modulo-card__icone {
	width: 40px;
	height: 40px;
	margin: 0 auto 18px;
	object-fit: contain;
}

.modulo-card__titulo {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.2;
}

.modulo-card__texto {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--color-text-muted);
}

/* =========================================================================
   9. Prática final
   ====================================================================== */

.pratica {
	position: relative;
	overflow: hidden;
	color: var(--color-white);
	background:
		radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.14), transparent 24%),
		linear-gradient(120deg, #b80b13, #ee1822);
}

.pratica__grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	align-items: center;
	gap: 48px;
	padding-block: 56px;
}

.pratica__imagem {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.pratica__imagem img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.pratica__eyebrow {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-white);
}

.pratica__titulo {
	position: relative;
	margin: 0 0 20px;
	color: var(--color-white);
	font-size: clamp(28px, 3.4vw, 42px);
}

.pratica__titulo span {
	display: block;
}

.pratica__sinal {
	position: absolute;
	right: 0;
	top: 50%;
	width: 62px;
	height: 62px;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.9);
}

.pratica__texto,
.pratica__subtitulo {
	max-width: 52ch;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.92);
}

.pratica__subtitulo {
	font-weight: 600;
	margin-bottom: 18px;
}

.pratica__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	color: var(--color-white);
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.chip__icone {
	width: 16px;
	height: 16px;
	flex: none;
}

.pratica__encerramento {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
}

.decor--ondas-claras {
	right: -80px;
	top: 50%;
	width: 300px;
	height: 300px;
	transform: translateY(-50%);
	opacity: 0.16;
	background-image: url("assets/img/decor_circulos_concentricos.png");
	filter: brightness(0) invert(1);
}

/* =========================================================================
   10. Produções e instrutor
   ====================================================================== */

.producoes {
	background: var(--color-white);
	padding-block: 72px;
}

.producoes__grid {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 52px;
	align-items: start;
}

.producoes .risco {
	margin-bottom: 30px;
}

.videos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-bottom: 28px;
}

.video__capa {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--color-black);
	line-height: 0;
}

.video__capa img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.video__capa--ativa {
	cursor: pointer;
}

.video__capa--ativa:hover img,
.video__capa--ativa:focus-visible img {
	transform: scale(1.03);
	opacity: 0.92;
}

.video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--play-tamanho);
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease;
}

.video__play img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

.video__capa--ativa:hover .video__play {
	transform: translate(-50%, -50%) scale(1.07);
}

.video__incorporado {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 14px;
	background: #000;
}

.video__incorporado iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video__titulo {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
}

.video__texto {
	margin: 0;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

.instrutor__card {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 28px;
	padding: 32px;
	background: var(--color-gray-50);
	border: 1px solid var(--color-gray-200);
	border-radius: 18px;
}

.instrutor__foto {
	margin: 0;
}

.instrutor__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
}

.instrutor__nome {
	margin: 0 0 14px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.instrutor__texto {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.instrutor .lista-icones--miuda {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--color-gray-200);
}

/* =========================================================================
   11. Dúvidas
   ====================================================================== */

.duvidas {
	background: var(--color-gray-50);
	border-top: 1px solid var(--color-gray-200);
	padding-block: 72px;
}

.duvidas__lista {
	display: grid;
	gap: 12px;
}

.duvida {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: 12px;
	overflow: hidden;
}

.duvida__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-black);
	cursor: pointer;
	list-style: none;
}

.duvida__pergunta::-webkit-details-marker {
	display: none;
}

.duvida__sinal {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.duvida__sinal::before,
.duvida__sinal::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--color-primary);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.duvida__sinal::before {
	width: 14px;
	height: 2px;
}

.duvida__sinal::after {
	width: 2px;
	height: 14px;
}

.duvida[open] .duvida__sinal::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.duvida__resposta {
	padding: 0 22px 20px;
	font-size: 14.5px;
	color: var(--color-text-muted);
}

.duvida__resposta p {
	margin: 0;
}

/* =========================================================================
   12. Faixa de inscrição
   ====================================================================== */

.faixa-cta {
	background: var(--color-black);
	color: var(--color-white);
}

.faixa-cta__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.faixa-cta__item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 28px 34px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.faixa-cta__item + .faixa-cta__item {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.faixa-cta__item:hover,
.faixa-cta__item:focus-visible {
	background: rgba(255, 255, 255, 0.06);
}

.faixa-cta__icone {
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.faixa-cta__texto {
	flex: 1;
	line-height: 1.35;
}

.faixa-cta__texto strong {
	display: block;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.faixa-cta__texto span {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.7);
}

.faixa-cta__seta {
	flex: none;
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.6);
	transition: transform 0.2s ease, color 0.2s ease;
}

.faixa-cta__item:hover .faixa-cta__seta {
	transform: translateX(4px);
	color: var(--color-white);
}

/* =========================================================================
   13. Marcas institucionais
   ====================================================================== */

.marcas {
	background: var(--color-gray-50);
	padding-block: 48px;
	border-bottom: 1px solid var(--color-gray-200);
}

.marcas__titulo {
	margin: 0 0 28px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.marcas__grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr 0.95fr;
	align-items: center;
	gap: 40px;
}

.marcas__texto {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.marcas__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 28px;
}

.marcas__logos img {
	max-height: 62px;
	width: auto;
	object-fit: contain;
}

.marcas__vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 148px;
	min-height: 62px;
	padding: 10px;
	border: 1px dashed var(--color-gray-300);
	border-radius: 8px;
	font-size: 10.5px;
	line-height: 1.3;
	text-align: center;
	color: var(--color-text-muted);
}

.marcas__regras-titulo {
	margin: 0 0 6px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-black);
}

.marcas__regras-texto {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* =========================================================================
   14. Rodapé
   ====================================================================== */

.site-footer {
	background: var(--color-black);
	color: rgba(255, 255, 255, 0.72);
	font-size: 13.5px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 0.8fr 0.85fr 1.05fr 1.15fr;
	gap: 36px;
	padding-block: 58px 44px;
}

.site-footer__logo {
	width: auto;
	height: 52px;
	margin-bottom: 18px;
}

.site-footer__descricao {
	max-width: 30ch;
	font-size: 13px;
	line-height: 1.6;
}

.site-footer__redes {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.site-footer__redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 8px;
	color: var(--color-white);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-footer__redes a:hover,
.site-footer__redes a:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.site-footer__redes svg {
	width: 18px;
	height: 18px;
}

.site-footer__titulo {
	margin: 0 0 16px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white);
}

.site-footer__lista {
	display: grid;
	gap: 10px;
}

.site-footer__lista a,
.site-footer__contato a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer__lista a:hover,
.site-footer__lista a:focus-visible,
.site-footer__contato a:hover,
.site-footer__contato a:focus-visible {
	color: var(--color-white);
}

.site-footer__contato {
	display: grid;
	gap: 12px;
}

.site-footer__contato li {
	display: grid;
	grid-template-columns: 18px 1fr;
	align-items: start;
	gap: 12px;
	line-height: 1.45;
}

.site-footer__contato svg {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--color-primary);
}

.site-footer__cta .btn {
	box-shadow: none;
}

.site-footer__base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.site-footer__base p {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.site-footer__legal a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	color: var(--color-white);
}

/* =========================================================================
   15. Páginas internas (blog, páginas comuns, 404)
   ====================================================================== */

.pagina-interna {
	padding-block: 72px;
}

.pagina-interna__titulo {
	margin-bottom: 28px;
}

.pagina-interna__conteudo {
	font-size: 16px;
}

.pagina-interna__conteudo h2,
.pagina-interna__conteudo h3 {
	margin-top: 32px;
}

.pagina-interna__conteudo ul,
.pagina-interna__conteudo ol {
	margin: 0 0 18px 22px;
	padding: 0;
	list-style: disc;
}

.pagina-interna__conteudo ol {
	list-style: decimal;
}

.lista-posts {
	display: grid;
	gap: 26px;
}

.lista-posts article {
	padding-bottom: 26px;
	border-bottom: 1px solid var(--color-gray-200);
}

.lista-posts h2 {
	font-size: 22px;
	margin-bottom: 8px;
	text-transform: none;
}

.lista-posts h2 a {
	color: var(--color-black);
	text-decoration: none;
}

.lista-posts h2 a:hover {
	color: var(--color-primary);
}

/* =========================================================================
   16. Responsivo
   ====================================================================== */

@media (max-width: 1140px) {
	.site-nav__lista {
		gap: 18px;
	}

	.site-nav__lista a {
		font-size: 12.5px;
	}

	.modulos__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.hero__grid {
		gap: 32px;
	}

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

	.coluna {
		padding: 40px 32px;
	}

	.coluna:nth-child(2) {
		padding-right: 0;
	}

	.coluna:nth-child(3) {
		grid-column: 1 / -1;
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
		border-top: 1px solid var(--color-gray-200);
	}

	.producoes__grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.pratica__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.pratica__sinal {
		display: none;
	}

	.marcas__grid {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 28px;
	}

	.marcas__texto {
		max-width: 60ch;
		margin-inline: auto;
	}

	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.site-footer__cta {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	:root {
		--header-altura: 72px;
	}

	.menu-toggle {
		display: block;
	}

	.site-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		padding: 8px 20px 22px;
		background: var(--color-black);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
	}

	.site-nav.aberto {
		display: block;
	}

	.site-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__lista li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.site-nav__lista a {
		display: block;
		padding: 14px 4px;
		font-size: 14px;
	}

	.site-header__container {
		position: static;
		gap: 12px;
	}

	.site-header__logo img {
		height: 38px;
	}

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

	.hero__midia {
		order: -1;
	}

	.hero__imagem,
	.hero__imagem img {
		min-height: 300px;
	}

	.hero__imagem {
		clip-path: none;
		border-radius: 18px;
	}

	.decor--ondas,
	.decor--pontos-direita {
		display: none;
	}

	.info-rapida__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.instrutor__card {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.instrutor__foto img {
		aspect-ratio: 3 / 2;
	}

	.faixa-cta__grid {
		grid-template-columns: 1fr;
	}

	.faixa-cta__item + .faixa-cta__item {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}
}

@media (max-width: 767px) {
	.section,
	.modulos,
	.producoes,
	.duvidas {
		padding-block: 52px;
	}

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

	.coluna {
		padding: 34px 0;
	}

	.coluna + .coluna {
		border-left: 0;
		border-top: 1px solid var(--color-gray-200);
	}

	.coluna__mapa {
		width: 130px;
		height: 92px;
		right: 0;
		opacity: 0.35;
	}

	.hero {
		padding-top: 40px;
	}

	.hero__acoes {
		gap: 18px;
	}

	.hero__acoes .btn {
		width: 100%;
	}

	.pratica__grid {
		padding-block: 44px;
	}

	.pratica__eyebrow {
		font-size: 11px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}

	.site-footer__marca {
		grid-column: 1 / -1;
	}

	.site-footer__base {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	.modulos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.info-rapida__grid {
		grid-template-columns: 1fr;
	}

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

	.btn {
		width: 100%;
	}

	.btn--compacto {
		width: auto;
	}

	.site-header__acoes .btn {
		padding: 11px 14px;
		font-size: 12px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.marcas__vazio {
		width: 100%;
	}
}

/* =========================================================================
   17. Movimento reduzido e impressão
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media print {
	.site-header,
	.site-footer__cta,
	.menu-toggle,
	.decor {
		display: none !important;
	}

	body {
		color: #000;
	}
}