/* Passo Theme — Main Styles */

/* ══════════════════════════════════════════════════════════════════
   FONTS
══════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: 'Sorgath';
	src: url('SorgathRegular.woff2') format('woff2'),
	     url('SorgathRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════════════════════ */

:root {
	--preto:  #060606;
	--branco: #ffffff;
	--cinza-claro: #f5f5f5;

	--font-titulo: 'Impact', 'Arial Narrow', Arial, sans-serif;
	--font-corpo:  'Arial Nova', Arial, sans-serif;

	--max-width: 1280px;
	--max-width-texto: 1200px; /* medida de leitura para blocos de texto (título+parágrafo) */
	--pad-h: clamp(1.5rem, 5vw, 5rem);
	--pad-v: clamp(4rem, 8vw, 8rem);

	/* ── Escala tipográfica ────────────────────────────────────────
	   fs-h2 (h1/h2/h3) continua fluido por vw — intocado.
	   fs-sub e fs-body agora são fixos por media query (não por vw):
	   desktop (>900px) = 18px | tablet/mobile (≤900px) = 14px.
	   .passo-nav a tem clamp próprio, também intocado.
	   ─────────────────────────────────────────────────────────── */
	--fs-h2:   clamp(2rem, 4.17vw, 5rem);
	--fs-sub:  1.125rem; /* 18px */
	--fs-body: 1.125rem; /* 18px */
}

@media (max-width: 900px) {
	:root {
		--fs-sub:  0.875rem; /* 14px */
		--fs-body: 0.875rem; /* 14px */
	}
}

/* ══════════════════════════════════════════════════════════════════
   BRAND LOCK — anula o azul padrão do tema pai Kadence
   As vars --global-palette1..15 já nascem preto/branco na origem via
   filtro em functions.php (option `kadence_global_palette`) — não
   precisam ser redefinidas aqui. --global-palette-btn-* vem de OUTRA
   configuração do Kadence (buttons_background), por isso continua
   sendo redefinida abaixo.
══════════════════════════════════════════════════════════════════ */

:root {
	--global-palette-btn-bg:         var(--preto);
	--global-palette-btn-bg-hover:   #333333;
	--global-palette-btn-color:      var(--branco);
	--global-palette-btn-color-hover: var(--branco);
	--global-palette-highlight:        var(--preto);
	--global-palette-highlight-alt:    #4d4d4d;
	--global-palette-highlight-alt2:   #808080;
	--global-palette-highlight-alt3:   #b3b3b3;
}

/* Rede de segurança: global.min.css do Kadence tem "a:hover, a:focus,
   a:active { color: var(--global-palette-highlight-alt) }" — essa var
   não vem da option filtrada acima (é de outra configuração do Kadence,
   tipo Link/Accent Color) e o Kadence injeta um <style> inline dinâmico
   no wp_head que pode redeclará-la DEPOIS deste arquivo, vencendo o
   empate de especificidade só por ordem de carregamento. Em vez de
   depender da variável, resetamos a propriedade direto: mesma
   especificidade do seletor do Kadence (a:hover = 0,1,1), mas esta folha
   carrega depois (passo-main depende de kadence-parent-style), então
   ganha por ordem — sem !important. */
a:hover, a:focus, a:active {
	color: inherit;
}

/* Rede de segurança para elementos que não usam as vars acima
   (blocos nativos do WP, campos de formulário, foco do navegador) */
input:focus, textarea:focus, select:focus, button:focus {
	outline-color: var(--preto) !important;
	box-shadow: none !important;
	border-color: var(--preto) !important;
}

/* Reset forte: qualquer <button>/input-botão nativo do Kadence nasce sem
   cor/fundo próprios (transparente, herda a cor do texto ao redor). Os
   componentes do tema (.passo-btn, .passo-acesso__btn etc.) usam classe
   própria + !important, então continuam ganhando por especificidade —
   isso aqui é só o "chão" pra nenhum botão nativo nascer azul. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	background-color: transparent !important;
	background-image: none !important;
	color: inherit !important;
	border-color: currentColor !important;
	box-shadow: none !important;
}

.wp-block-button__link,
.kb-button,
.kt-button {
	background-color: var(--preto) !important;
	color: var(--branco) !important;
}

mark { background-color: var(--preto); color: var(--branco); }

/* ══════════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════════ */

html { font-size: 16px; overflow-x: hidden; scroll-behavior: smooth; }

/* Compensa o header fixo/sticky no scroll nativo do navegador para os links
   de âncora do menu (que usam .scroll-ignore para não passar pelo Kadence). */
#quem-somos, #manifesto, #experiencias, #rodape { scroll-margin-top: 100px; }

body {
	overflow-x: hidden;
	background-color: var(--preto);
	color: var(--branco);
	font-family: var(--font-corpo);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.3;
}

h1, h2, h3, h4, h5, h6,
body h1, body h2, body h3,
body h4, body h5, body h6 {
	font-family: var(--font-titulo) !important;
	font-weight: 400 !important;
	line-height: 1.08;
	letter-spacing: 0.01em;
}

/* Impact é uma fonte "black" sem peso bold de verdade — se um <strong>/<b>
   (ex.: texto em negrito colado de um editor WYSIWYG) aparecer dentro de um
   título, o navegador sintetiza um bold falso que borra a letra. */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
	font-weight: inherit !important;
}

h2, body h2 {
	font-size: var(--fs-h2);
	color: var(--preto);
}

/* ── Word-by-word reveal (injetado por animations.js) ─────────── */

.pw-wrap {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.07em;
	margin-bottom: -0.07em;
}
.pw { display: inline-block; }

/* ══════════════════════════════════════════════════════════════════
   HOVER GLOBAL
══════════════════════════════════════════════════════════════════ */

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.22s ease, color 0.22s ease;
}
a:hover { opacity: 0.7; }

/* Kadence injeta cor azul em a:active/a:focus/a:visited (Customizer > Link Color).
   `a:active` etc tem especificidade maior que uma classe só — força herdar aqui. */
a:active, a:focus, a:visited { color: inherit !important; }

/* Sem azul em nenhum estado */
*:focus { outline: none; }
*:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background-color: var(--preto); color: var(--branco); }

img { transition: transform 0.4s ease, opacity 0.4s ease; }

button, [type="submit"] {
	transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}
button:hover, [type="submit"]:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT HELPERS
══════════════════════════════════════════════════════════════════ */

.container {
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--pad-h);
}

/* ══════════════════════════════════════════════════════════════════
   BOTÃO PRIMÁRIO
══════════════════════════════════════════════════════════════════ */

.passo-btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	padding: 1rem 2.75rem;
	background-color: var(--preto) !important;
	color: var(--branco) !important;
	font-family: var(--font-corpo);
	font-weight: 400;
	font-size: var(--fs-sub);
	letter-spacing: 0.06em;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--preto);
	border-radius: 6px;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.passo-btn:hover {
	opacity: 1;
	background-color: transparent !important;
	color: var(--preto) !important;
	transform: translateY(-2px);
}
/* Kadence injeta a:active/a:focus com cor azul do tema — força marca aqui */
.passo-btn:active,
.passo-btn:focus,
.passo-btn:visited {
	color: var(--branco) !important;
}
.passo-btn:hover:active,
.passo-btn:hover:focus,
.passo-btn:hover:visited {
	color: var(--preto) !important;
}

/* Em colunas centradas o botão se centraliza */
#quem-somos .passo-feature__content .passo-btn,
.passo-feature--img-right .passo-feature__content .passo-btn {
	align-self: center;
}

/* ══════════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════════ */

.passo-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 1.25rem var(--pad-h);
	background-color: transparent;
	transition: background-color 0.35s ease, backdrop-filter 0.35s ease, padding 0.35s ease;
}

/* Sticky — branco ao passar do hero */
.passo-site-header.is-sticky {
	position: fixed;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.97);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* Logo — dual (branco no hero, preto no sticky) */
.passo-site-header__logo {
	justify-self: center;
	display: flex;
	align-items: center;
	align-self: center;
	line-height: 0;
}
.passo-site-header__logo .logo-dark  { display: none; }
.passo-site-header__logo .logo-light { display: block; }

.passo-site-header.is-sticky .logo-light { display: none; }
.passo-site-header.is-sticky .logo-dark  { display: block; }

.passo-site-header__logo img {
	height: 176px;
	width: auto;
	display: block;
	transition: height 0.35s ease;
}
.passo-site-header.is-sticky .passo-site-header__logo img {
	height: 88px;
}

/* Nav esquerda e direita */
.passo-nav {
	display: flex;
	align-items: center;
	align-self: center;
}
.passo-nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
    margin: 0;
}
.passo-nav--left  { justify-self: start; }
.passo-nav--right { justify-self: end; }

.passo-nav a,
.passo-nav a:visited {
	font-family: var(--font-corpo);
	font-weight: 400;
	font-size: clamp(1rem, 1.5625vw, 1.875rem); /* 30px @ 1920 */
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--branco) !important;
	transition: opacity 0.2s ease, color 0.2s ease, font-size 0.35s ease;
}
.passo-nav a:hover,
.passo-nav a:focus,
.passo-nav a:active {
	opacity: 0.6;
	color: var(--branco) !important;
	background: transparent !important;
	text-decoration: none !important;
}

/* Nav muda de cor e tamanho no sticky */
.passo-site-header.is-sticky .passo-nav a,
.passo-site-header.is-sticky .passo-nav a:visited {
	color: var(--preto) !important;
	font-size: 1.25rem;
}
.passo-site-header.is-sticky .passo-nav a:hover,
.passo-site-header.is-sticky .passo-nav a:focus,
.passo-site-header.is-sticky .passo-nav a:active {
	opacity: 0.5;
	color: var(--preto) !important;
	background: transparent !important;
}

.passo-nav__plus {
	font-size: 1.25rem;
	line-height: 1;
	font-family: var(--font-corpo) !important;
	font-weight: 300;
}

/* ── Hamburger button ───────────────────────────────────────────── */
.passo-hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 20px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
}
.passo-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--branco);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.passo-hamburger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.passo-hamburger.is-open span:nth-child(2) { opacity: 0; }
.passo-hamburger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── Mobile nav drawer ──────────────────────────────────────────── */
.passo-mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 998;
	background: var(--preto);
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 6rem var(--pad-h) 3rem;
}
.passo-mobile-nav.is-open { transform: translateX(0); }
.passo-mobile-nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	text-align: left;
	padding: 0;
}
.passo-mobile-nav a,
.passo-mobile-nav a:visited {
	font-family: var(--font-corpo);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--branco) !important;
	letter-spacing: 0.02em;
}
.passo-mobile-nav a:hover { opacity: 0.6; }
.passo-mobile-nav__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	background: transparent !important;
	border: none !important;
	color: var(--branco) !important;
	font-size: 3rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.5rem;
	z-index: 10;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
}

@media (max-width: 768px) {
	/* Header */
	.passo-site-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.passo-nav--left, .passo-nav--right { display: none; }
	.passo-hamburger { display: flex; }
	.passo-site-header__logo img { height: 67px; }
	.passo-site-header.is-sticky .passo-site-header__logo img { height: 53px; }

	/* Sticky mobile: fundo preto, logo branca */
	.passo-site-header.is-sticky {
		display: flex;
		justify-content: space-between;
		background-color: var(--preto);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
	}
	.passo-site-header.is-sticky .logo-light { display: block; }
	.passo-site-header.is-sticky .logo-dark  { display: none; }
	.passo-site-header.is-sticky .passo-hamburger span { background: var(--branco); }

	/* Mobile nav visível */
	.passo-mobile-nav { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════ */

.passo-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	background-color: var(--preto);
}

/* height:100% (porcentagem "de verdade", não o atalho top+bottom) só resolve
   de forma confiável em elemento substituído (<video>/<img>); em <div>
   comum, com o pai só tendo min-height (não height), a cadeia trava em 0.
   Por isso vh/dvh fixo em cada nível, igual ao .passo-hero, sem depender
   de porcentagem nenhuma. Slick também força position:relative no slide
   (não dá pra sobrescrever sem quebrar a matemática do fade). */
.passo-hero__slider,
.passo-hero__slider .slick-list,
.passo-hero__slider .slick-track,
.passo-hero__slide {
	height: 100vh;
	height: 100dvh;
}

.passo-hero__slider,
.passo-hero__slider .slick-list,
.passo-hero__slider .slick-track {
	position: absolute;
	inset: 0;
}

.passo-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	pointer-events: none;
	background-color: var(--preto);
}

.passo-hero__media--img {
	background-size: cover;
	background-position: center;
}

.passo-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(6,6,6,.45) 0%, transparent 35%);
	pointer-events: none;
}

/* Bullets do hero: círculo 1px branco, preenchido só quando ativo */
.passo-hero .slick-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(1.5rem, 4vw, 2.5rem);
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.passo-hero .slick-dots li {
	margin: 0;
	padding: 0;
	line-height: 0;
}
.passo-hero .slick-dots button {
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--branco) !important;
	border-radius: 50%;
	background-color: transparent !important;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.25s ease;
}
.passo-hero .slick-dots li.slick-active button {
	background-color: var(--branco) !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIFE EXPERIENCE — carrossel
══════════════════════════════════════════════════════════════════ */

.passo-exp {
	padding: var(--pad-v) 0;
	background-color: var(--branco);
	color: var(--preto);
}

.passo-exp__header {
	max-width: var(--max-width-texto);
	margin-inline: auto;
	padding: 0 var(--pad-h) 2.5rem;
	width: 100%;
	text-align: left;
}

.passo-exp__titulo {
	font-size: var(--fs-h2);
	color: var(--preto);
	margin-bottom: 0.75rem;
}

.passo-exp__subtitulo,
.passo-exp__wysiwyg {
	font-family: var(--font-corpo);
	font-weight: 400;
	font-size: var(--fs-sub);
	letter-spacing: 0;
	text-transform: none;
	color: var(--preto);
}

.passo-exp__subtitulo p,
.passo-exp__wysiwyg p { margin: 0; }
.passo-exp__subtitulo p + p,
.passo-exp__wysiwyg p + p { margin-top: 0.75rem; }

/* Track: scroll horizontal com snap — full bleed */
.passo-exp__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--pad-h);
	/* padding lateral alinha com o container */
	padding: 0.25rem var(--pad-h) 1.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}
.passo-exp__track:active        { cursor: grabbing; }
.passo-exp__track.zone-left     { cursor: w-resize; }
.passo-exp__track.zone-right    { cursor: e-resize; }
.passo-exp__track::-webkit-scrollbar { display: none; }

/* Card — 4 por tela em desktop, fluido em mobile
   % resolve contra o content-box do track (sem scrollbar),
   evitando o card-1 maior causado por 100vw incluir scrollbar no Windows */
.passo-exp__card {
	flex: none;
	width: calc(25% - 0.75rem); /* (100% - 3*1rem) / 4 */
	scroll-snap-align: start;
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: #1a1a1a;
	cursor: pointer;
	transition: transform 0.3s ease;
}
.passo-exp__card:hover { transform: none; opacity: 1; }

@media (max-width: 900px) {
	.passo-exp__card { width: calc(50% - 0.5rem); }
}
@media (max-width: 540px) {
	.passo-exp__card { width: 100%; }
}

.passo-exp__card-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	/* placeholder diagonal stripe */
	background-image: repeating-linear-gradient(
		-45deg,
		#1c1c1c 0px, #1c1c1c 2px,
		#141414 2px, #141414 24px
	);
	transition: transform 0.5s ease;
}
.passo-exp__card:hover .passo-exp__card-img { transform: scale(1.04); }

.passo-exp__card-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2.5rem 1.75rem 1.75rem;
	background: linear-gradient(transparent, rgba(0,0,0,.9) 40%);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.passo-exp__card-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.passo-exp__card-titulo {
	font-size: clamp(1.3rem, 2.1vw, 1.875rem);
	color: var(--branco);
	text-transform: none;
	line-height: 1.15;
	flex: 1;
}

.passo-exp__card-plus {
	flex-shrink: 0;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--branco);
	font-size: 2rem;
	line-height: 1;
	font-family: var(--font-corpo);
	font-weight: 300;
	cursor: pointer;
	padding: 0 0 2px 0;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.passo-exp__card-plus:hover,
.passo-exp__card-plus:focus,
.passo-exp__card-plus:active,
.passo-exp__card-plus:visited {
	outline: none;
	background: transparent !important;
	color: var(--branco) !important;
	text-decoration: none !important;
	box-shadow: none;
}
.passo-exp__card-plus:hover {
	transform: scale(1.3);
}

.passo-exp__card-desc {
	font-family: var(--font-corpo);
	font-size: clamp(0.875rem, 1.05vw, 1.0625rem);
	font-weight: 400;
	color: rgba(255,255,255,.85);
	line-height: 1.45;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(8px);
	transition: max-height 0.45s ease, opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s;
}

.passo-exp__card:hover .passo-exp__card-desc {
	max-height: 200px;
	opacity: 1;
	transform: translateY(0);
}

/* Navegação: bullets centrados + setas à direita */
.passo-exp__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: 1.5rem;
	padding-inline: var(--pad-h);
}

/* Bullets — traços horizontais, centralizados */
.passo-exp__bullets {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 7px;
}

.passo-exp__bullet {
	width: 22px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background-color: rgba(6, 6, 6, 0.18);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	transition: width 0.35s ease, background-color 0.35s ease;
	flex-shrink: 0;
}
.passo-exp__bullet:hover { background-color: rgba(6,6,6,.4); }
.passo-exp__bullet:focus-visible { outline: 2px solid var(--preto); }

.passo-exp__bullet.is-active {
	width: 44px;
	background-color: var(--preto);
}

/* Setas — canto direito */
.passo-exp__arrows {
	grid-column: 3;
	justify-self: end;
	display: flex;
	gap: 6px;
}

.passo-exp__btn {
	width: 42px;
	height: 42px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--preto) !important;
	border-radius: 6px;
	background: transparent !important;
	color: var(--preto) !important;
	font-size: 1.25rem;
	line-height: 1;
	font-family: var(--font-corpo);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.passo-exp__btn:hover {
	background-color: var(--preto) !important;
	color: var(--branco) !important;
	transform: none;
	opacity: 1;
}

/* Texto WYSIWYG abaixo do carrossel — mesma largura/CSS do passo-exp__subtitulo */
.passo-exp__wysiwyg {
	max-width: var(--max-width-texto);
	margin-inline: auto;
	width: 100%;
	padding: 0 var(--pad-h);
	padding-top: clamp(2rem, 4vw, 3.5rem);
	text-align: left;
}
/* H2 dentro de qualquer editor WYSIWYG: mesma escala do passo-exp__coluna-titulo.
   Cor não é fixada aqui — herda do contexto de cada seção (ex.: branco no Manifesto). */
.passo-exp__wysiwyg h2,
.passo-crew__subtitulo h2,
.passo-crew__bio-content h2,
.passo-manifesto__texto h2 {
	font-size: clamp(1.375rem, 1.9vw, 1.875rem);
	color: inherit;
	margin-bottom: 0.75rem;
}

/* 3 colunas dinâmicas abaixo do texto */
.passo-exp__colunas {
	max-width: var(--max-width-texto);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
}
.passo-exp__coluna-titulo {
	font-size: clamp(1.375rem, 1.9vw, 1.875rem);
	color: var(--preto);
	margin-bottom: 0.75rem;
}
.passo-exp__coluna p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.3;
	color: rgba(6, 6, 6, .75);
	margin: 0;
}
.passo-exp__coluna p + p { margin-top: 0.75rem; }

@media (max-width: 768px) {
	.passo-exp__colunas { grid-template-columns: 1fr; gap: 2rem; }
}

/* ══════════════════════════════════════════════════════════════════
   FEATURE SECTIONS (alternando imagem / texto)
══════════════════════════════════════════════════════════════════ */

.passo-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 65vh;
}

.passo-feature__img {
	background-size: cover;
	background-position: center;
	overflow: hidden;
	/* placeholder */
	background-image: repeating-linear-gradient(
		-45deg,
		#161616 0px, #161616 2px,
		#0f0f0f 2px, #0f0f0f 24px
	);
}

.passo-feature__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem);
	background-color: var(--branco);
	color: var(--preto);
}

.passo-feature__content h2 {
	font-size: var(--fs-h2);
	color: var(--preto);
}

.passo-feature__content p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.3;
	color: var(--preto);
	max-width: 42ch;
}

/* Feature sections: texto centrado */
#quem-somos .passo-feature__content,
.passo-feature--img-right .passo-feature__content {
	text-align: center;
	align-items: center;
}
#quem-somos .passo-feature__content p {
	max-width: 36ch;
}

@media (max-width: 768px) {
	.passo-feature { grid-template-columns: 1fr; }
	.passo-feature--img-left  .passo-feature__img { min-height: 55vw; }
	.passo-feature--img-right .passo-feature__img { order: -1; min-height: 55vw; }

}

/* ── Wrapper das duas FEATURE + frase animada centralizada na divisa ── */
.passo-feature-wrap {
	position: relative;
	isolation: isolate; /* escopa o mix-blend-mode da frase às 2 sections abaixo */
}

.passo-feature-frase {
	position: relative;
	height: 0;   /* fica "deitada" na linha de junção entre as duas sections */
	overflow: visible;
	z-index: 5;
	pointer-events: none;
}

.passo-feature-frase__text {
	position: absolute;
	top: 0;
	left: 50%;
	width: 75%;
	transform: translate(-50%, -50%) rotate(-3deg);
	display: block;
	white-space: nowrap;
	line-height: 1;
	text-align: center;
	font-family: 'Sorgath', var(--font-titulo);
	color: #f50707;
	opacity: 0.7;
	mix-blend-mode: color-burn;
}

/* ══════════════════════════════════════════════════════════════════
   THE CREW
══════════════════════════════════════════════════════════════════ */

.passo-crew {
	padding: var(--pad-v) 0;
	background-color: var(--branco);
	color: var(--preto);
}

.passo-crew__header {
	max-width: var(--max-width-texto);
	margin-inline: auto;
	text-align: left;
	padding-inline: var(--pad-h);
	margin-bottom: 3.5rem;
}

.passo-crew__titulo {
	font-size: var(--fs-h2);
	color: var(--preto);
	margin-bottom: 0.75rem;
}

.passo-crew__subtitulo {
	font-size: var(--fs-sub);
	font-weight: 400;
	color: var(--preto);
}
.passo-crew__subtitulo p { margin: 0; }
.passo-crew__subtitulo p + p { margin-top: 0.5rem; }

.passo-crew__seta {
	display: flex;
	justify-content: flex-start;
	margin-top: 2rem;
	color: rgba(6,6,6,.35);
}

/* Grid: 2 colunas, cards no estilo passo-exp__card */
.passo-crew__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-inline: var(--pad-h);
}

@media (max-width: 768px) {
	.passo-crew__grid { grid-template-columns: 1fr; }
}

.passo-crew__membro {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: transparent !important;
	border: none !important;
	padding: 0;
	margin: 0;
	text-align: inherit;
	font: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* Camada de imagem — P&B por padrão, colorida no hover/focus */
.passo-crew__membro-img {
	position: absolute;
	inset: 0;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	background-image: repeating-linear-gradient(
		-45deg,
		#1c1c1c 0px, #1c1c1c 2px,
		#141414 2px, #141414 24px
	);
	filter: grayscale(1);
	transition: filter 0.5s ease, transform 0.5s ease;
}
.passo-crew__membro:hover .passo-crew__membro-img,
.passo-crew__membro:focus-visible .passo-crew__membro-img {
	filter: grayscale(0);
	transform: scale(1.04);
}

.passo-crew__membro-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 2.5rem 1.75rem 1.75rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	background: linear-gradient(transparent, rgba(0,0,0,.55) 70%);
}

.passo-crew__nome {
	font-size: clamp(1.3rem, 2.1vw, 1.875rem);
	font-weight: 400;
	color: var(--branco);
	text-transform: none;
	line-height: 1.15;
	margin: 0;
}

.passo-crew__membro-plus {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none !important;
	color: var(--branco) !important;
	font-size: 2rem;
	line-height: 1;
	font-family: var(--font-corpo);
	font-weight: 300;
	padding: 0 0 2px 0;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.passo-crew__membro:hover .passo-crew__membro-plus,
.passo-crew__membro:focus-visible .passo-crew__membro-plus {
	transform: scale(1.3);
}

/* Lightbox de bio — fundo branco */
.passo-crew__modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.passo-crew__modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.passo-crew__modal-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(6, 6, 6, .75);
	cursor: pointer;
}

.passo-crew__modal-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
	background-color: var(--branco);
	color: var(--preto);
	padding: clamp(2rem, 4vw, 3.5rem);
	border-radius: 8px;
	transform: translateY(16px);
	transition: transform 0.3s ease;
}
.passo-crew__modal.is-open .passo-crew__modal-panel {
	transform: translateY(0);
}

.passo-crew__modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	border: none !important;
	color: var(--preto) !important;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.passo-crew__modal-close:hover { opacity: 0.6; }

.passo-crew__modal-body h3 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--preto);
	margin-bottom: 1rem;
}
.passo-crew__modal-body p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5;
	color: var(--preto);
	margin: 0;
}
.passo-crew__modal-body p + p { margin-top: 1rem; }

/* ══════════════════════════════════════════════════════════════════
   MANIFESTO
══════════════════════════════════════════════════════════════════ */

.passo-manifesto {
	position: relative;
	display: grid; /* os 3 filhos abaixo ocupam a mesma célula (empilhados) */
	color: var(--branco);
}

/* imagem real, invisível — só existe para "ditar" a altura da seção
   pela proporção natural dela, sem nunca cortar (nem estourar) */
.passo-manifesto__ratio {
	grid-area: 1 / 1;
	width: 100%;
	height: auto;
	visibility: hidden;
}

.passo-manifesto__bg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.passo-manifesto__inner {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	width: 100%;
	height: 100%;
	padding: 10% var(--pad-h);
}

.passo-manifesto__titulo {
	margin: 0;
	font-family: 'Sorgath', var(--font-titulo) !important; /* sobrepõe o !important global de h1-h6 (linha ~123) */
	font-size: clamp(3.5rem, 9vw, 8rem); /* fallback antes do JS calcular (70% da coluna) */
	line-height: 0.82;
	color: #f50707;
	opacity: 0.85;
	text-transform: lowercase;
	text-align: right;
}

.passo-manifesto__titulo-linha1,
.passo-manifesto__titulo-linha2 {
	display: block;
	transform-origin: right center;
}
.passo-manifesto__titulo-linha1 { transform: rotate(-4deg); }
.passo-manifesto__titulo-linha2 { transform: rotate(-9deg); margin-top: 0.1em; }

.passo-manifesto__texto {
	text-align: justify;
}

.passo-manifesto__texto p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5;
	color: var(--branco);
	text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
	margin-top: 0;
	margin-bottom: 1.5rem;
}
.passo-manifesto__texto p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
	/* no mobile a altura cresce naturalmente com o conteúdo (texto costuma
	   ficar mais alto que a imagem numa coluna estreita) — então a imagem
	   deixa de "ditar" a altura e vira só um fundo, ancorado no canto
	   inferior direito, onde está o ciclista (a parte importante da foto) */
	.passo-manifesto__ratio {
		display: none;
	}
	.passo-manifesto__bg {
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
		background-position: right bottom;
	}
	.passo-manifesto__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 10% var(--pad-h);
	}
	.passo-manifesto__titulo {
		font-size: clamp(2.75rem, 16vw, 4.5rem);
	}
	.passo-manifesto__titulo-linha1 { transform: rotate(-3deg); }
	.passo-manifesto__titulo-linha2 { transform: rotate(-6deg); }
	.passo-manifesto__texto,
	.passo-manifesto__texto p {
		text-align: left;
	}
}

/* ══════════════════════════════════════════════════════════════════
   POR QUE "PASSO"?
══════════════════════════════════════════════════════════════════ */

.passo-porque {
	padding: var(--pad-v) 0;
	background-color: var(--branco);
	color: var(--preto);
}

/* Container full-width para logo maior */
.passo-porque .container {
	max-width: none;
}

.passo-porque__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(3rem, 6vw, 8rem);
	align-items: center;
}

@media (max-width: 768px) {
	.passo-porque__inner { grid-template-columns: 1fr; }
}

/* Logo proporcional: 494px @ 1920, piso 260px */
.passo-porque__marca img {
	width: clamp(260px, 25.7vw, 494px);
	opacity: 0.9;
}

.passo-porque__content h2 {
	font-size: var(--fs-h2);
	color: var(--preto);
	margin-bottom: 1.25rem;
}

.passo-porque__aspas { font-style: normal; }

.passo-porque__content p {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.3;
	color: var(--preto);
	margin-bottom: 1rem;
}
.passo-porque__content p:last-of-type { margin-bottom: 0; }

.passo-porque__expandable {
	overflow: hidden;
	height: 0;
	opacity: 0;
}

.passo-porque__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin-top: 1.25rem;
	border: 1px solid rgba(6,6,6,.3) !important;
	border-radius: 4px;
	background: transparent !important;
	color: var(--preto) !important;
	font-size: 1.5rem;
	line-height: 1;
	font-family: var(--font-corpo);
	font-weight: 300;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.passo-porque__plus:hover {
	background-color: var(--preto) !important;
	color: var(--branco) !important;
	border-color: var(--preto) !important;
	transform: none;
	opacity: 1;
}
.passo-porque__plus:focus,
.passo-porque__plus:active {
	outline: none;
	background-color: transparent !important;
	color: var(--preto) !important;
	border-color: rgba(6,6,6,.3) !important;
	box-shadow: none;
}
.passo-porque__plus:focus-visible {
	outline: 2px solid var(--preto);
	outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   ACESSO ANTECIPADO
══════════════════════════════════════════════════════════════════ */

.passo-acesso {
	padding: var(--pad-v) 0;
	background-color: var(--preto);
	color: var(--branco);
}

.passo-acesso__inner { text-align: center; }

.passo-acesso__titulo {
	font-size: var(--fs-h2);
	color: var(--branco);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 2.5rem;
	max-width: 18ch;
	margin-inline: auto;
}

.passo-acesso__form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	max-width: 440px;
	margin-inline: auto;
	margin-bottom: 1.5rem;
}

/* O CF7 embrulha cada linha do formulário num <p> (via wpautop) — se as duas
   tags ficarem na mesma linha (sem linha em branco entre elas), viram um
   único <p> com <br>, quebrando o gap/centralização do flex acima. Isto aqui
   é uma rede de segurança: zera a margem padrão do <p> e garante que ele
   sempre ocupe a largura toda, com ou sem esse problema de origem. */
.passo-acesso__form p { margin: 0; width: 100%; }

.passo-acesso .passo-acesso__input {
	width: 100%;
	padding: 1rem 0.75rem;
	background-color: var(--preto);
	background: var(--preto);
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 0;
	box-shadow: none;
	color: var(--branco);
	font-family: var(--font-corpo);
	font-size: 1.25rem;
	text-align: center;
	transition: border-color 0.2s ease;
}
.passo-acesso .passo-acesso__input::placeholder { color: rgba(255,255,255,.4); }

/* Neutraliza a rede de segurança global (input:focus { border-color: preto
   !important }, linha ~88) e o outline de :focus-visible (*:focus-visible,
   linha ~184) — sem isso a borda "some" (vira preta) e some um anel branco
   ao clicar no campo. Aqui o campo fica idêntico em qualquer estado. */
.passo-acesso .passo-acesso__input,
.passo-acesso .passo-acesso__input:hover,
.passo-acesso .passo-acesso__input:focus,
.passo-acesso .passo-acesso__input:focus-visible,
.passo-acesso .passo-acesso__input:active {
	background-color: var(--preto) !important;
	border-color: rgba(255,255,255,.3) !important;
	color: var(--branco) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Autofill do navegador (Chrome sugerindo e-mail salvo) força fundo claro
   por conta própria — este é o único jeito de neutralizar isso. */
.passo-acesso .passo-acesso__input:-webkit-autofill,
.passo-acesso .passo-acesso__input:-webkit-autofill:hover,
.passo-acesso .passo-acesso__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--branco);
	-webkit-box-shadow: 0 0 0 1000px var(--preto) inset;
	transition: background-color 9999s ease-in-out 0s;
}

.passo-acesso .passo-acesso__btn {
	width: 100%;
	padding: 0.9rem;
	background-color: var(--branco) !important;
	color: var(--preto) !important;
	font-family: var(--font-corpo);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	border: 1px solid var(--branco) !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.passo-acesso .passo-acesso__btn:hover {
	background-color: transparent !important;
	color: var(--branco) !important;
	transform: none;
	opacity: 1;
}

.passo-acesso__legal {
	font-size: 0.75rem;
	color: rgba(255,255,255,.35);
	line-height: 1.6;
}
.passo-acesso__legal a {
	color: rgba(255,255,255,.55);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Contact Form 7 embrulha o campo de e-mail num <span>; sem width:100% nesse
   span, align-items:center do .passo-acesso__form encolhe o span pro
   conteúdo e o width:100% do input (relativo ao span) não tem efeito. */
.passo-acesso__form .wpcf7-form-control-wrap { width: 100%; }

.passo-acesso .wpcf7-not-valid-tip { color: #ff8a8a; font-size: 0.8rem; }

/* Caixa de sucesso/erro do CF7 nasce com borda azul/verde/vermelha e margem
   grande (regras do próprio plugin, com mais especificidade que um simples
   .passo-acesso .wpcf7-response-output) — aqui igualamos ao preto/branco do
   site e encurtamos o espaço acima, cobrindo todos os estados (:is()). */
.passo-acesso .wpcf7-form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(255,255,255,.3);
	color: var(--branco);
	font-size: 0.85rem;
	text-align: center;
	background: transparent;
}
.passo-acesso .wpcf7-form:is(.sent, .failed, .aborted, .spam, .invalid, .unaccepted, .payment-required) .wpcf7-response-output {
	border-color: rgba(255,255,255,.3);
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */

.passo-site-footer {
	background-color: var(--preto);
	border-top: 1px solid rgba(255,255,255,.08);
	padding: clamp(3rem, 5vw, 5rem) var(--pad-h);
}

.passo-site-footer__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
}

.passo-site-footer__logo {
	height: 135px;
	width: auto;
}

.passo-site-footer__address {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-style: normal;
	font-size: 1.125rem;
	color: var(--branco);
	text-align: center;
}
.passo-site-footer__address a {
	color: var(--branco);
}
.passo-site-footer__address a:hover {
	color: var(--branco);
	opacity: 0.7;
}

.passo-site-footer__whatsapp {
	margin-top: 0.4rem;
	align-self: center;
	gap: 0.6rem;
	background-color: var(--branco) !important;
	color: var(--preto) !important;
	border-color: var(--branco) !important;
}
.passo-site-footer__whatsapp:hover {
	background-color: transparent !important;
	color: var(--branco) !important;
}
/* .passo-btn genérico força branco em :active/:focus/:visited — aqui o fundo
   é branco em repouso, então precisa manter o texto preto fora do hover */
.passo-site-footer__whatsapp:active,
.passo-site-footer__whatsapp:focus,
.passo-site-footer__whatsapp:visited {
	color: var(--preto) !important;
	background-color: var(--branco) !important;
}
.passo-site-footer__whatsapp:hover:active,
.passo-site-footer__whatsapp:hover:focus {
	color: var(--branco) !important;
	background-color: transparent !important;
}
.passo-site-footer__whatsapp svg {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
	fill: currentColor;
}
.passo-site-footer__copy {
	margin-top: 0.5rem;
	font-size: 1rem;
	color: rgba(255,255,255,.55);
}

.passo-site-footer__social {
	display: flex;
	flex-direction: row;
	gap: 1.25rem;
	align-items: center;
}
.passo-site-footer__social a {
	color: var(--branco);
	transition: opacity 0.2s ease;
}
.passo-site-footer__social a:hover {
	color: var(--branco);
	opacity: 0.7;
}

@media (max-width: 768px) {
	.passo-site-footer__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.passo-site-footer__col--logo { justify-self: center; }
	.passo-site-footer__social { flex-direction: row; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — ajustes gerais ≤ 768px
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

	/* Tipografia: aumenta pisos dos clamp */
	:root {
		--fs-sub:  1.0625rem;
		--fs-body: 1.125rem;
	}

	/* The Crew: chevron menor margem + maior */
	.passo-crew__seta { margin-top: 0.75rem; }
	.passo-crew__seta svg { width: 42px; height: 42px; }

	/* Por que PASSO: logo centralizada */
	.passo-porque__marca { display: flex; justify-content: center; }

	/* Cards: descrição sempre visível */
	.passo-exp__card-desc {
		max-height: 300px;
		opacity: 1;
		transform: translateY(0);
		transition: none;
	}
}

/* ══════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS — single-experiencia + page.php
══════════════════════════════════════════════════════════════════ */

/* ── Link de volta ────────────────────────────────────────────── */
.passo-interna__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-corpo);
	font-size: var(--fs-sub);
	font-weight: 400;
	color: rgba(255,255,255,.6);
	margin-bottom: 1.5rem;
	transition: color 0.2s ease;
}
.passo-interna__back:hover { color: var(--branco); }

/* ── Hero da página interna ───────────────────────────────────── */
.passo-interna__hero {
	position: relative;
	min-height: 55vh;
	display: flex;
	align-items: flex-end;
	background-color: var(--preto);
	overflow: hidden;
}
.passo-interna__hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(1);
	transition: transform 0.6s ease;
}
.passo-interna__hero:hover .passo-interna__hero-bg { transform: scale(1.03); }
.passo-interna__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6,6,6,.92) 30%, rgba(6,6,6,.4) 100%);
}
.passo-interna__hero-inner {
	position: relative;
	z-index: 2;
	padding-bottom: clamp(2.5rem, 5vw, 5rem);
	padding-top: clamp(8rem, 12vw, 12rem);
}
.passo-interna__titulo {
	font-family: var(--font-titulo);
	font-size: clamp(2.5rem, 5.2vw, 6rem);
	font-weight: 400;
	color: var(--branco);
	line-height: 1;
	max-width: 18ch;
}

/* ── Corpo: conteúdo + imagem ─────────────────────────────────── */
.passo-interna__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 70vh;
	background-color: var(--branco);
}
.passo-interna__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2rem;
	padding: clamp(3rem, 6vw, 7rem) clamp(2rem, 5vw, 6rem);
	color: var(--preto);
}
.passo-interna__content p {
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--preto);
	max-width: 52ch;
}
.passo-btn--preto {
	background-color: var(--preto) !important;
	color: var(--branco) !important;
	border-color: var(--preto) !important;
	align-self: flex-start;
}
.passo-btn--preto:hover {
	background-color: transparent !important;
	color: var(--preto) !important;
}
.passo-interna__img-col {
	position: relative;
	overflow: hidden;
}
.passo-interna__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(1);
	background-color: #111;
	transition: transform 0.6s ease;
}
.passo-interna__img-col:hover .passo-interna__img { transform: scale(1.03); }

/* ── Navegação prev/next ──────────────────────────────────────── */
.passo-interna__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 2.5rem;
	border-top: 1px solid rgba(6,6,6,.1);
	border-bottom: 1px solid rgba(6,6,6,.1);
	background: var(--branco);
}
.passo-interna__nav-link,
.passo-interna__nav-link:visited {
	font-family: var(--font-corpo);
	font-size: var(--fs-sub);
	font-weight: 400;
	color: var(--preto) !important;
	transition: opacity 0.2s ease;
}
.passo-interna__nav-link:hover { opacity: 0.5; }
.passo-interna__nav-link--next { margin-left: auto; }

/* ── Página genérica (page.php) ───────────────────────────────── */
.passo-page__hero {
	padding-top: clamp(8rem, 12vw, 12rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: var(--preto);
}
.passo-page__titulo {
	font-family: var(--font-titulo);
	font-size: clamp(2.5rem, 5.2vw, 6rem);
	font-weight: 400;
	color: var(--branco);
	line-height: 1;
}
.passo-page__content {
	padding: clamp(3rem, 6vw, 7rem) 0;
	background-color: var(--branco);
}
.passo-page__body {
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--preto);
	max-width: 72ch;
}
.passo-page__body h2,
.passo-page__body h3 {
	color: var(--preto);
	margin-bottom: 1rem;
	margin-top: 2rem;
}
.passo-page__body p { margin-bottom: 1.25rem; }

/* ── Mobile: páginas internas ─────────────────────────────────── */
@media (max-width: 768px) {
	.passo-interna__body { grid-template-columns: 1fr; }
	.passo-interna__img-col { min-height: 55vw; }
	.passo-interna__img { position: relative; inset: auto; height: 55vw; }
}

/* ══════════════════════════════════════════════════════════════════
   SINGLE PASSO_PACOTE — header fixo no estilo sticky, não fixed
══════════════════════════════════════════════════════════════════ */

.single-experiencia .passo-site-header {
	position: relative;
	background-color: rgba(255, 255, 255, 0.97);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.single-experiencia .passo-site-header .logo-light { display: none; }
.single-experiencia .passo-site-header .logo-dark  { display: block; }
.single-experiencia .passo-site-header .passo-site-header__logo img { height: 88px; }
.single-experiencia .passo-nav a,
.single-experiencia .passo-nav a:visited {
	color: var(--preto) !important;
	font-size: 1.25rem;
}
.single-experiencia .passo-nav a:hover,
.single-experiencia .passo-nav a:focus,
.single-experiencia .passo-nav a:active {
	opacity: 0.5;
	color: var(--preto) !important;
	background: transparent !important;
}

@media (max-width: 768px) {
	.single-experiencia .passo-site-header .passo-site-header__logo img { height: 53px; }
	.single-experiencia .passo-site-header { background-color: var(--preto); }
	.single-experiencia .passo-site-header .logo-light { display: block; }
	.single-experiencia .passo-site-header .logo-dark  { display: none; }
	.single-experiencia .passo-hamburger span { background: var(--branco); }
}

/* ══════════════════════════════════════════════════════════════════
   EXPERIÊNCIA HERO
══════════════════════════════════════════════════════════════════ */

.passo-pacote-hero {
	position: relative;
	height: calc(100dvh - var(--pacote-header-h, 100px));
	background-color: var(--preto);
	overflow: hidden;
	display: flex;
	align-items: stretch;
}

/* Camada de imagem separada — permite o Ken Burns sem afetar o texto */
.passo-pacote-hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	transform: scale(1.06);
	will-change: transform;
	z-index: 0;
}

.passo-pacote-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(6, 6, 6, .80) 0%,
		rgba(6, 6, 6, .35) 50%,
		rgba(6, 6, 6, .20) 100%
	);
	pointer-events: none;
}

.passo-pacote-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding-top: clamp(2rem, 4vw, 4rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
}

/* Tag topo: "01  LOCAL · REGIÃO" */
.passo-pacote-hero__tag {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-corpo);
	font-size: clamp(0.6875rem, 0.85vw, 0.9375rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: auto;
	line-height: 1;
}
.passo-pacote-hero__local { color: rgba(255, 255, 255, .65); }

/* Títulos — slot-machine reveal via wrapper overflow:hidden */
.passo-pacote-hero__titles {
	margin-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
}

.passo-pacote-hero__t-wrap {
	overflow: hidden;
	line-height: 1.05; /* < 1 corta acentos em maiúsculas (Á, Ã, Ê...) */
	padding-top: 0.2em; /* Impact é uma fonte "black" pesada — precisa de mais
	                        respiro que o line-height sozinho dá conta pros
	                        acentos (Õ, Ô...) não baterem no overflow:hidden */
}

.passo-pacote-hero__t1 {
	display: block;
	font-family: var(--font-titulo);
	font-size: clamp(1.75rem, 4.5vw, 5.5rem);
	font-weight: 400;
	color: var(--branco);
	line-height: 1.05; /* precisa casar com .passo-pacote-hero__t-wrap */
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
}

/* Subtítulos abaixo da linha */
.passo-pacote-hero__subs {
	border-top: 1px solid rgba(255, 255, 255, .2);
	padding-top: clamp(1rem, 1.5vw, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.passo-pacote-hero__sub1 {
	font-family: var(--font-corpo);
	font-size: clamp(0.875rem, 1.2vw, 1.25rem);
	font-weight: 400;
	color: var(--branco);
	margin: 0;
}

@media (max-width: 768px) {
	.passo-pacote-hero {
		height: calc(100svh - var(--pacote-header-h, 70px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.passo-pacote-hero__bg { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   EXPERIÊNCIA — lista de Pacotes (fundo branco, 2 colunas)
══════════════════════════════════════════════════════════════════ */

.passo-pacote-lista {
	background: var(--branco);
	color: var(--preto);
	padding-block: var(--pad-v, 5rem);
}

.passo-pacote-lista__vazio {
	font-size: var(--fs-h2);
	font-family: var(--font-titulo);
	color: rgba(6, 6, 6, .45);
	text-align: center;
}

.passo-pacote-lista__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch; /* colunas ocupam a altura total da linha — .passo-pacote-lista__info centraliza o próprio conteúdo por dentro */
}

/* Zigue-zague: item 1 = img|info, item 2 (--reverse) = info|img, e assim por diante */
.passo-pacote-lista__img  { order: 1; }
.passo-pacote-lista__info {
	order: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	min-width: 0; /* sem isso, o white-space:nowrap do subtitulo "empurra" esta
	                 coluna a crescer além do 1fr justo, roubando espaço da
	                 imagem (min-width:auto implícito de item de grid) */
}
.passo-pacote-lista__item--reverse .passo-pacote-lista__img  { order: 2; }
.passo-pacote-lista__item--reverse .passo-pacote-lista__info { order: 1; }

.passo-pacote-lista__img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: rgba(6, 6, 6, .06);
	overflow: hidden;
}

.passo-pacote-lista__slide img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.passo-pacote-lista__slide a {
	display: block;
	cursor: zoom-in;
}

/* Slick: setas customizadas (não depende do slick-theme.css / ícone de fonte) */
.passo-pacote-lista__img .slick-prev,
.passo-pacote-lista__img .slick-next {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	transform: translateY(-50%);
	background-color: rgba(6, 6, 6, .55) !important;
	border: none !important;
	border-radius: 50%;
	color: transparent !important;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.passo-pacote-lista__img .slick-prev:hover,
.passo-pacote-lista__img .slick-next:hover {
	background-color: rgba(6, 6, 6, .8) !important;
}
.passo-pacote-lista__img .slick-prev { left: 0.75rem; }
.passo-pacote-lista__img .slick-next { right: 0.75rem; }

.passo-pacote-lista__img .slick-prev:before,
.passo-pacote-lista__img .slick-next:before {
	content: '';
	display: block;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 2px solid var(--branco);
	border-right: 2px solid var(--branco);
	opacity: 1;
}
.passo-pacote-lista__img .slick-prev:before { transform: rotate(-135deg); margin-left: 0.25rem; }
.passo-pacote-lista__img .slick-next:before { transform: rotate(45deg); margin-right: 0.25rem; }

.passo-pacote-lista__img .slick-disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.passo-pacote-lista__titulo {
	font-family: var(--font-titulo);
	font-size: clamp(1.5rem, 2vw, 2.25rem);
	color: var(--preto);
	line-height: 1.1;
	margin-bottom: 0.5rem;
}

.passo-pacote-lista__subtitulo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0; /* deixa o -texto encolher/quebrar linha em vez de estourar a coluna */
	font-size: var(--fs-sub);
	font-weight: 700;
	color: var(--preto);
	margin-bottom: 1rem;
}

.passo-pacote-lista__subtitulo-texto {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	min-width: 0;
}

.passo-pacote-lista__subtitulo-texto span {
	display: inline-block;
}

@media (min-width: 901px) {
	.passo-pacote-lista__subtitulo {
		font-size: 1rem; /* 16px — fixo, não usa --fs-sub (que é 18px no desktop) */
	}
}

.passo-pacote-lista__subtitulo-icon {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	color: rgba(6, 6, 6, .35); /* cinza claro */
}

.passo-pacote-lista__subtitulo-sep {
	color: rgba(6, 6, 6, .35);
	font-weight: 400;
}

.passo-pacote-lista__nota-climatica {
	font-size: var(--fs-body);
	font-style: italic;
	color: var(--preto);
	margin-bottom: 1.75rem;
}

.passo-pacote-lista__whatsapp {
	gap: 0.6rem;
	padding: 0.7rem 1.925rem;
}

.passo-pacote-lista__whatsapp svg {
	width: 1.65em;
	height: 1.65em;
	flex-shrink: 0;
	fill: currentColor;
}

@media (max-width: 768px) {
	.passo-pacote-lista {
		margin: 0;
		margin-top: 30px;
		padding: 0;
	}

	.passo-pacote-lista .container {
		padding: 0;
	}

	.passo-pacote-lista__item {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* Empilhado no mobile: imagem sempre antes das infos */
	.passo-pacote-lista__item .passo-pacote-lista__img,
	.passo-pacote-lista__item .passo-pacote-lista__info,
	.passo-pacote-lista__item--reverse .passo-pacote-lista__img,
	.passo-pacote-lista__item--reverse .passo-pacote-lista__info {
		order: initial;
	}

	.passo-pacote-lista__subtitulo {
		align-items: flex-start;
		line-height: 1.25;
	}

	.passo-pacote-lista__subtitulo-texto span {
		margin-bottom: 0.7rem;
	}

	.passo-pacote-lista__subtitulo-sep {
		display: none;
	}

	.passo-pacote-lista__subtitulo-feriado {
		color: #666;
		font-weight: 400;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.passo-pacote-lista__whatsapp {
		font-size: 0.8125rem; /* 13px */
		font-weight: 700;
		padding: 0.7rem 1.25rem;
		gap: 0.4rem;
		white-space: nowrap;
	}
}

/* ══════════════════════════════════════════════════════════════════
   EXPERIÊNCIA — conteúdo institucional / landing (experiencia-landing.php)
══════════════════════════════════════════════════════════════════ */

.passo-corp {
	background: var(--branco);
	color: var(--preto);
	padding-block: var(--pad-v, 5rem);
}

.passo-corp__inner {
	max-width: var(--max-width-texto);
}

.passo-corp__intro {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-family: var(--font-corpo);
	font-weight: 700;
	line-height: 1.5;
	color: var(--preto);
}
.passo-corp__intro p + p { margin-top: 1rem; }

.passo-corp__secoes {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 6vw, 4.5rem);
	margin-top: clamp(3rem, 6vw, 5rem);
}

.passo-corp__secao-titulo {
	font-size: clamp(1.5rem, 2vw, 2.25rem);
	color: var(--preto);
	margin-bottom: 1rem;
}

.passo-corp__secao-imagem {
	margin-top: 1.5rem;
}

.passo-corp__secao-imagem img {
	display: block;
	width: 100%;
	max-height: 32rem;
	object-fit: cover;
	border-radius: 4px;
}

.passo-corp__secao-imagem-legenda {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(6, 6, 6, .55);
}

.passo-corp__secao-texto {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(6, 6, 6, .75);
}
.passo-corp__secao-texto p + p { margin-top: 0.75rem; }
.passo-corp__secao-texto strong { color: var(--preto); }

/* Seção destaque — citação/regra de impacto */
.passo-corp__secao--destaque .passo-corp__secao-titulo {
	font-size: clamp(1.75rem, 3vw, 2.75rem);
}
.passo-corp__secao--destaque .passo-corp__secao-texto {
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	color: var(--preto);
	border-left: 3px solid var(--preto);
	padding-left: 1.5rem;
}

/* Estatísticas */
.passo-corp__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.75rem;
	margin-top: 2rem;
}

.passo-corp__stat-numero {
	display: block;
	font-family: var(--font-titulo);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	color: var(--preto);
}

.passo-corp__stat-texto {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	color: rgba(6, 6, 6, .65);
}

/* Gráfico de comparação (barras) */
.passo-corp__grafico {
	margin-top: 2rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid rgba(6, 6, 6, .15);
	border-radius: 4px;
}

.passo-corp__grafico-linha {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.passo-corp__grafico-linha + .passo-corp__grafico-linha {
	margin-top: 1.25rem;
}

.passo-corp__grafico-rotulo {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--preto);
}

.passo-corp__grafico-track {
	width: 100%;
}

.passo-corp__grafico-barra {
	background: var(--preto);
	color: var(--branco);
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.5rem 0.75rem;
	border-radius: 2px;
	white-space: nowrap;
}

.passo-corp__grafico-barras {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.passo-corp__grafico-barra-item {
	background: var(--preto);
	color: var(--branco);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.5rem 0.6rem;
	border-radius: 2px;
	white-space: nowrap;
	min-width: 2.5rem;
	text-align: center;
}

.passo-corp__grafico-legenda {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	font-style: italic;
	color: rgba(6, 6, 6, .6);
}

.passo-corp__nota {
	margin-top: 1.5rem;
	font-size: var(--fs-body);
	font-style: italic;
	color: rgba(6, 6, 6, .6);
}

@media (max-width: 768px) {
	.passo-corp__secao-imagem img { max-height: 20rem; }
	.passo-corp__stats { grid-template-columns: repeat(2, 1fr); }
	.passo-corp__stat:last-child:nth-child(odd) { grid-column: span 2; }
}

.passo-corp__como {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.passo-corp__como-titulo {
	font-size: clamp(1.5rem, 2vw, 2.25rem);
	color: var(--preto);
	margin-bottom: 2rem;
}

.passo-corp__como-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.75rem, 3vw, 2.5rem);
}

.passo-corp__como-item-titulo {
	font-size: 1.125rem;
	color: var(--preto);
	margin-bottom: 0.5rem;
}

.passo-corp__como-item-texto {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.35;
	color: rgba(6, 6, 6, .75);
	margin: 0;
}

@media (max-width: 768px) {
	.passo-corp__como-grid { grid-template-columns: 1fr; }
}

.passo-corp-cta {
	background: var(--preto);
	color: var(--branco);
	padding-block: var(--pad-v, 5rem);
}

.passo-corp-cta__inner {
	max-width: var(--max-width-texto);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.passo-corp-cta__titulo {
	font-size: var(--fs-h2);
	color: var(--branco);
}

.passo-corp-cta__texto {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.4;
	color: var(--branco);
	max-width: 60ch;
}

.passo-corp-cta__btn {
	background-color: var(--branco) !important;
	color: var(--preto) !important;
	border-color: var(--branco) !important;
}
.passo-corp-cta__btn:hover {
	background-color: transparent !important;
	color: var(--branco) !important;
}
.passo-corp-cta__btn:active,
.passo-corp-cta__btn:focus,
.passo-corp-cta__btn:visited {
	color: var(--preto) !important;
}
.passo-corp-cta__btn:hover:active,
.passo-corp-cta__btn:hover:focus,
.passo-corp-cta__btn:hover:visited {
	color: var(--branco) !important;
}

/* ══════════════════════════════════════════════════════════════════
   ARQUIVO DE EXPERIÊNCIAS (archive-experiencia.php) — grid full-width, 2 col
══════════════════════════════════════════════════════════════════ */

.passo-exp-arquivo-main {
	background-color: var(--preto);
}

/* Header branco (mesmo padrão do single-experiencia) — a nav global já é
   !important em todos os estados (base e hover), então vencer aqui também
   exige !important; ver [[feedback-no-important-css]]. */
.post-type-archive-experiencia .passo-site-header {
	position: relative;
	background-color: rgba(255, 255, 255, 0.97);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.post-type-archive-experiencia .passo-site-header .logo-light { display: none; }
.post-type-archive-experiencia .passo-site-header .logo-dark  { display: block; }
.post-type-archive-experiencia .passo-site-header .passo-site-header__logo img { height: 88px; }
.post-type-archive-experiencia .passo-nav a,
.post-type-archive-experiencia .passo-nav a:visited {
	color: var(--preto) !important;
	font-size: 1.25rem;
}
.post-type-archive-experiencia .passo-nav a:hover,
.post-type-archive-experiencia .passo-nav a:focus,
.post-type-archive-experiencia .passo-nav a:active {
	opacity: 0.5;
	color: var(--preto) !important;
	background: transparent !important;
}

@media (max-width: 768px) {
	.post-type-archive-experiencia .passo-site-header .passo-site-header__logo img { height: 53px; }
	.post-type-archive-experiencia .passo-site-header { background-color: var(--preto); }
	.post-type-archive-experiencia .passo-site-header .logo-light { display: block; }
	.post-type-archive-experiencia .passo-site-header .logo-dark  { display: none; }
	.post-type-archive-experiencia .passo-hamburger span { background: var(--branco); }
}

.passo-exp-arquivo__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.passo-exp-arquivo__card {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #1a1a1a;
}

.passo-exp-arquivo__bg {
	position: absolute;
	inset: 0;
	background-size: cover; /* equivalente a object-fit:cover, já que o fundo é background-image, não <img> */
	background-position: center;
	transition: transform 0.5s ease;
}
.passo-exp-arquivo__card:hover .passo-exp-arquivo__bg { transform: scale(1.04); }

.passo-exp-arquivo__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(6, 6, 6, .85) 0%,
		rgba(6, 6, 6, .25) 55%,
		rgba(6, 6, 6, .05) 100%
	);
	pointer-events: none;
}

.passo-exp-arquivo__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1.5rem, 3vw, 3rem);
}

.passo-exp-arquivo__tag {
	font-family: var(--font-corpo);
	font-size: clamp(0.6875rem, 0.85vw, 0.9375rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .65);
	margin: 0 0 0.75rem;
}

.passo-exp-arquivo__card-titulo {
	font-family: var(--font-titulo);
	font-size: clamp(1.75rem, 3vw, 3rem);
	line-height: 1.1; /* < 1 corta acentos em maiúsculas (Á, Ã, Ê...) */
	text-transform: uppercase;
	color: var(--branco);
	margin: 0 0 0.5rem;
}

.passo-exp-arquivo__sub {
	font-family: var(--font-corpo);
	font-size: clamp(0.875rem, 1.1vw, 1.125rem);
	color: rgba(255, 255, 255, .85);
	margin: 0;
}

.passo-exp-arquivo__vazio {
	color: var(--branco);
	padding-block: var(--pad-v);
}

@media (max-width: 768px) {
	.passo-exp-arquivo__grid { grid-template-columns: minmax(0, 1fr); }

	.passo-exp-arquivo__card {
		min-height: 70vh;
		min-width: 0;
		max-width: 100%;
	}

	.passo-exp-arquivo__body {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.passo-exp-arquivo__tag,
	.passo-exp-arquivo__card-titulo,
	.passo-exp-arquivo__sub {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* ══════════════════════════════════════════════════════════════════
   AVISO DE COOKIES (LGPD)
══════════════════════════════════════════════════════════════════ */

.passo-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background-color: var(--preto);
	border-top: 1px solid rgba(255,255,255,.15);
}

.passo-cookies__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem var(--pad-h);
}

.passo-cookies__texto {
	flex: 1 1 320px;
	margin: 0;
	color: rgba(255,255,255,.85);
	font-family: var(--font-corpo);
	font-size: 0.85rem;
	line-height: 1.5;
}
.passo-cookies__texto a { color: var(--branco); text-decoration: underline; text-underline-offset: 2px; }

.passo-cookies__botoes {
	display: flex;
	flex-shrink: 0;
	gap: 0.75rem;
}

.passo-cookies__btn {
	padding: 0.65rem 1.5rem;
	background-color: transparent;
	font-family: var(--font-corpo);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.passo-cookies .passo-cookies__btn--aceitar {
	background-color: var(--branco) !important;
	color: var(--preto) !important;
	border: 1px solid var(--branco) !important;
}
.passo-cookies .passo-cookies__btn--aceitar:hover {
	background-color: transparent !important;
	color: var(--branco) !important;
}

.passo-cookies .passo-cookies__btn--recusar {
	background-color: transparent !important;
	color: var(--branco) !important;
	border: 1px solid rgba(255,255,255,.4) !important;
}
.passo-cookies .passo-cookies__btn--recusar:hover { border-color: var(--branco) !important; }

@media (max-width: 640px) {
	.passo-cookies__inner { flex-direction: column; align-items: stretch; text-align: center; }
	.passo-cookies__botoes { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   TEMPLATE "TEXTO CORRIDO" (páginas de texto simples: política, termos...)
══════════════════════════════════════════════════════════════════ */

/* Sem hero — o header (position:absolute por padrão, flutua sobre o hero
   das outras páginas) precisa virar relative aqui pra não cobrir o título.
   Mesmo padrão já usado em .post-type-archive-experiencia .passo-site-header. */
.page-template-template-texto-corrido-php .passo-site-header {
	position: relative;
	background-color: rgba(255, 255, 255, 0.97);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.page-template-template-texto-corrido-php .passo-site-header .logo-light { display: none; }
.page-template-template-texto-corrido-php .passo-site-header .logo-dark  { display: block; }

.passo-texto-corrido {
	background-color: var(--branco);
	color: var(--preto);
	padding: var(--pad-v) 0;
}

.passo-texto-corrido__container {
	max-width: 900px;
	margin-inline: auto;
	padding-inline: var(--pad-h);
}

.passo-texto-corrido__titulo {
	margin-bottom: 2rem;
	color: var(--preto);
	font-size: clamp(2rem, 4vw, 3rem);
	max-width: 20ch;
}

.passo-texto-corrido__conteudo {
	color: var(--preto);
	font-family: var(--font-corpo);
	font-size: 1rem;
	line-height: 1.7;
}
.passo-texto-corrido__conteudo h2 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	color: var(--preto);
	font-size: 1.5rem;
}
.passo-texto-corrido__conteudo h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	color: var(--preto);
	font-size: 1.15rem;
}
.passo-texto-corrido__conteudo p,
.passo-texto-corrido__conteudo ul {
	margin-bottom: 1.25rem;
}
.passo-texto-corrido__conteudo ul { padding-left: 1.25rem; }
.passo-texto-corrido__conteudo li { margin-bottom: 0.5rem; }
.passo-texto-corrido__conteudo a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}