@charset "UTF-8";
/*
Theme Name: Trek
Theme URI: https://trekmobi.com
Author: Trek Mobi Connect
Description: Tema unificado da operação. Single idêntico em todos os sites; home por variação; marca por preset.
Version: 0.1.0
Text Domain: trek
*/

/* ============================================================
   TOKENS

   REGRA DE OURO DO PROJETO:
   Os --trek-post-* são FIXOS e valem para os 80 sites.
   As variáveis de marca (--trek-primary, --trek-label, ...) chegam pelo
   <style id="trek-brand"> e são usadas SOMENTE por header, footer e home.

   Qualquer variável de marca dentro da seção SINGLE abaixo é BUG.
   ============================================================ */

:root {
	/* Fonte: stack do sistema. Zero request, zero FOIT. */
	--trek-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;

	/* Tokens do POST — nunca variam por site */
	--trek-post-text: #333333;
	--trek-post-heading: #111111;
	--trek-post-muted: #666666;
	--trek-post-bg: #ffffff;
	--trek-post-line: #e5e5e5;
	--trek-post-pad: 20px;   /* lateral, em UMA camada só */
	--trek-post-size: 17px;
	--trek-post-lh: 1.7;

	/* Fallback das variáveis de marca (se o <style> da marca falhar) */
	--trek-primary: #2e4d5c;
	--trek-primary-dark: #122028;
	--trek-btn: #bcdde5;
	--trek-btn-text: #122028;
	--trek-label: #ae3427;
	--trek-label-strong: #782c24;
	--trek-link: #d04132;
	--trek-link-hover: #902f24;
	--trek-pill-bg: #fdf4f3;
	--trek-pill-stroke: #e35e50;
	--trek-pill-text: #902f24;
	--trek-cta: #d04132;
	--trek-cta-text: #ffffff;
}

/* ============================================================
   RESET
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #fff;
	color: var(--trek-post-text);
	font-family: var(--trek-font);
	font-size: 16px;
	line-height: 1.6;
}

img, iframe, video, ins { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--trek-post-heading); }
p, ul, ol { margin: 0; }
a { color: inherit; }

.trek-skip {
	position: absolute;
	left: -9999px;
}
.trek-skip:focus {
	left: 8px; top: 8px; z-index: 100;
	background: #fff; padding: 8px 12px;
}

/* ============================================================
   HEADER  (usa marca)
   ============================================================ */

.trek-header {
	background: #fff;
	border-bottom: 1px solid var(--trek-post-line);
	/* NO FLUXO. Se ficar fixed/absolute, não acompanha o padding que um
	   anchor ad injeta no <body> e some atrás do anúncio. */
	position: relative;
}

.trek-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.trek-header__logo { flex: 1; min-width: 0; }
.trek-header__logo img,
.trek-header__logo .custom-logo {
	/* Trava a altura: logos de tamanhos diferentes não bagunçam o header
	   nem causam layout shift. */
	max-height: 34px;
	width: auto;
	margin: 0;
}

.trek-header__name {
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
	color: var(--trek-primary);
}

/* ---- Menu sem JavaScript (checkbox hack) ---- */

.trek-nav__toggle { position: absolute; opacity: 0; pointer-events: none; }

.trek-nav__btn {
	display: none;
	width: 26px; height: 20px;
	position: relative;
	cursor: pointer;
	flex: 0 0 auto;
	/* Acima do painel (z-index 90): senão o menu aberto cobre o próprio
	   botão e o usuário fica sem como fechar. */
	z-index: 100;
}
.trek-nav__btn span,
.trek-nav__btn span::before,
.trek-nav__btn span::after {
	content: "";
	position: absolute;
	left: 0; width: 100%; height: 3px;
	background: var(--trek-primary);
	border-radius: 2px;
	transition: transform .2s ease, top .2s ease, background .2s ease;
}
.trek-nav__btn span { top: 9px; }
.trek-nav__btn span::before { top: -8px; }
.trek-nav__btn span::after { top: 8px; }

/* Aberto: as três barras viram um X (sem JS). */
.trek-nav__toggle:checked + .trek-nav__btn span { background: transparent; }
.trek-nav__toggle:checked + .trek-nav__btn span::before {
	top: 0; transform: rotate(45deg);
}
.trek-nav__toggle:checked + .trek-nav__btn span::after {
	top: 0; transform: rotate(-45deg);
}

.trek-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}

.trek-nav__list {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0; padding: 0;
}
.trek-nav__list a {
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: var(--trek-label);
}

/* ---- Busca do header (sem JS) ---- */

.trek-search {
	display: flex;
	flex: 0 0 auto;
}
.trek-search__input {
	font: inherit;
	font-size: 14px;
	padding: 8px 12px;
	border: 1px solid var(--trek-post-line);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	min-width: 0;
	width: 180px;
}
.trek-search__input:focus {
	outline: 2px solid var(--trek-primary);
	outline-offset: -2px;
}
.trek-search__btn {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 16px;
	border: 0;
	border-radius: 0 4px 4px 0;
	background: var(--trek-primary);
	color: #fff;
	cursor: pointer;
}

/* ============================================================
   SINGLE  — sem nenhuma variável de marca daqui pra baixo
   ============================================================ */

.trek-single {
	background: var(--trek-post-bg);
	padding: 24px 0 40px;
}

.trek-post,
.trek-related {
	/* Lateral em UMA camada só. Padding em containers aninhados SOMA e
	   desalinha — foi a causa de todos os bugs de margem deste ano. */
	max-width: 720px;
	margin: 0 auto;
	padding-left: var(--trek-post-pad);
	padding-right: var(--trek-post-pad);
	min-width: 0;
}

.trek-post__title {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 12px;
}

.trek-post__meta {
	font-size: 13px;
	color: var(--trek-post-muted);
	margin-bottom: 24px;
}
.trek-post__sep { margin: 0 6px; }

.trek-post__content {
	font-size: var(--trek-post-size);
	line-height: var(--trek-post-lh);
	/* min-width:0 é obrigatório: sem ele, um anúncio de largura fixa impede
	   o container de encolher e estoura o pai. */
	min-width: 0;
	max-width: 100%;
}

.trek-post__content p { margin: 0 0 24px; }
.trek-post__content p:empty { display: none; }

.trek-post__content h2 { font-size: 22px; margin: 32px 0 16px; }
.trek-post__content h3 { font-size: 19px; margin: 24px 0 12px; }

.trek-post__content ul,
.trek-post__content ol { margin: 0 0 24px; padding-left: 22px; }
.trek-post__content li { margin-bottom: 8px; }

.trek-post__content a { color: #0b57a4; }

.trek-post__content img { margin: 0 auto 24px; }

/* ---- Anúncios (Ad Inserter) ----
   NÃO mexemos em min-height: ele é a reserva que evita CLS. Só garantimos
   que nada estoure a coluna. */
.trek-post__content [id$="_wrapper"],
.trek-post__content .code-block {
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}
.trek-post__content [id$="_wrapper"] > *,
.trek-post__content .code-block > * {
	max-width: 100% !important;
}

/* ---- Card do autor ---- */

.trek-post__author-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--trek-post-line);
}
.trek-post__author-card img { border-radius: 50%; flex: 0 0 auto; }
.trek-post__author-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--trek-post-muted);
	margin-bottom: 4px;
}
.trek-post__author-name { font-weight: 700; margin-bottom: 6px; }
.trek-post__author-bio { font-size: 15px; color: var(--trek-post-muted); }

/* ---- Relacionados ---- */

.trek-related { margin-top: 40px; }
.trek-related__title { font-size: 20px; margin-bottom: 16px; }

.trek-related__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.trek-related__item a {
	text-decoration: none;
	display: block;
	color: var(--trek-post-heading);
}
.trek-related__item img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 8px;
}
.trek-related__label { font-size: 14px; font-weight: 600; line-height: 1.35; }

/* ============================================================
   ARQUIVO / LISTAGEM
   ============================================================ */

.trek-archive {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 20px 48px;
}
.trek-archive__title { font-size: 24px; margin-bottom: 20px; }
.trek-archive__list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.trek-archive__item a { text-decoration: none; color: var(--trek-post-heading); }
.trek-archive__item img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 8px;
}
.trek-archive__label { font-weight: 600; font-size: 15px; }

/* ============================================================
   FOOTER  (usa marca)
   ============================================================ */

.trek-footer {
	background: var(--trek-primary-dark);
	color: #ebebeb;
	margin-top: 48px;
	padding: 32px 0;
}
.trek-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
.trek-footer__legal { margin-bottom: 24px; }
.trek-footer__legal-title {
	font-size: 14px;
	color: #fff;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.trek-footer__legal p { font-size: 13px; line-height: 1.6; }

.trek-footer__list {
	list-style: none; margin: 0 0 24px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 16px;
}
.trek-footer__list a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.trek-footer__credits {
	display: flex;
	align-items: center;
	gap: 16px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding-top: 20px;
	font-size: 13px;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

	.trek-nav__btn { display: block; }

	.trek-nav {
		position: fixed;
		inset: 0;
		background: #fff;
		/* padding-top folgado: o X fica no topo, sobre esta área */
		padding: 76px 24px 24px;
		transform: translateX(-100%);
		transition: transform .25s ease;
		z-index: 90;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-left: 0;
		overflow-y: auto;
	}
	.trek-nav__toggle:checked ~ .trek-nav { transform: translateX(0); }

	.trek-nav__list { flex-direction: column; gap: 4px; }
	.trek-nav__list a { display: block; padding: 12px 0; font-size: 17px; }

	.trek-search__input { width: 100%; }

	.trek-post__title { font-size: 22px; }
	.trek-post__content { font-size: 16px; line-height: 1.65; }
	.trek-post__content h2 { font-size: 20px; }
	.trek-post__content h3 { font-size: 18px; }

	.trek-related__list { grid-template-columns: 1fr; }

	.trek-footer__credits { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ============================================================
   HOME  (usa marca — nunca tocada pelo single)
   ============================================================ */

.trek-home { padding-bottom: 8px; }

.trek-hero__grid,
.trek-latest__inner,
.trek-topics__inner,
.trek-news__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---- Hero ---- */

.trek-hero { padding: 28px 0; }

.trek-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr 1fr;
	gap: 32px;
	align-items: start;
}

/* aspect-ratio no container (não só na img): o selo é position:absolute e
   ficaria solto se o post não tivesse imagem destacada. */
.trek-hero__figure {
	position: relative;
	margin-bottom: 14px;
	aspect-ratio: 16 / 10;
	background: var(--trek-post-line);
	border-radius: 8px;
	overflow: hidden;
}
.trek-hero__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trek-hero__badge {
	position: absolute;
	top: 12px; left: 12px;
	background: var(--trek-label-strong);
	color: #fff;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.trek-hero__badge-dot {
	width: 4px; height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.trek-hero__title { font-size: 26px; margin-bottom: 10px; }
.trek-hero__title a { text-decoration: none; }
.trek-hero__excerpt { color: var(--trek-post-muted); font-size: 15px; }

/* ---- Itens de texto (hero lateral e linhas de tópico) ---- */

.trek-mini { padding: 14px 0; border-bottom: 1px solid var(--trek-post-line); }
.trek-mini:last-child { border-bottom: 0; }

.trek-mini__meta {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--trek-label);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.trek-mini__cat { text-decoration: none; color: inherit; }
.trek-mini__dot {
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--trek-label);
}
.trek-mini__date { color: var(--trek-label); }

.trek-mini__title { font-size: 16px; margin-bottom: 6px; }
.trek-mini__title a { text-decoration: none; }
.trek-mini__excerpt { font-size: 13px; color: var(--trek-post-muted); }

/* ---- Últimos posts: carrossel por scroll nativo (0 KB de JS) ---- */

.trek-latest { background: #f7f7f7; padding: 32px 0; }
.trek-latest__title { font-size: 22px; margin-bottom: 18px; }

/* 3 cards fixos, sem rolagem. Antes era um track com scroll-snap; a barra
   de rolagem poluía o layout e o conteúdo extra ficava inalcançável sem JS. */
.trek-latest__track {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.trek-card__link { text-decoration: none; color: inherit; display: block; }
.trek-card__figure {
	position: relative;
	display: block;
	margin-bottom: 10px;
	aspect-ratio: 5 / 3;
	background: var(--trek-post-line);
	border-radius: 8px;
	overflow: hidden;
}
.trek-card__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.trek-card__badge {
	position: absolute;
	top: 10px; left: 10px;
	background: var(--trek-label-strong);
	color: #fff;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 4px 10px;
	border-radius: 100px;
}
.trek-card__title { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.trek-card__excerpt { display: block; font-size: 13px; color: var(--trek-post-muted); }

/* ---- Navegue por tópico ---- */

.trek-topics { padding: 36px 0; }
.trek-topics__title { font-size: 22px; margin-bottom: 16px; }

.trek-topics__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}
.trek-pill {
	display: inline-block;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 100px;
	border: 1px solid var(--trek-post-line);
	color: var(--trek-label);
	background: #fff;
}
.trek-pill:hover {
	background: var(--trek-pill-bg);
	border-color: var(--trek-pill-stroke);
	color: var(--trek-pill-text);
}

.trek-row {
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 24px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--trek-post-line);
}
.trek-row:last-child { border-bottom: 0; }
.trek-row__title { font-size: 18px; margin-bottom: 8px; }
.trek-row__title a { text-decoration: none; }
.trek-row__excerpt { font-size: 14px; color: var(--trek-post-muted); }
.trek-row__figure img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border-radius: 8px;
}

/* ---- Newsletter ---- */

.trek-news { background: var(--trek-primary-dark); color: #fff; padding: 40px 0; }
.trek-news__inner { text-align: center; max-width: 760px; }
.trek-news__title { color: #fff; font-size: 22px; margin-bottom: 8px; }
.trek-news__sub { color: #ebebeb; margin-bottom: 20px; }

.trek-news__form {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-bottom: 14px;
}
.trek-news__input {
	font: inherit;
	font-size: 15px;
	padding: 12px 16px;
	border: 1px solid var(--trek-primary);
	background: var(--trek-primary);
	color: #fff;
	border-radius: 100px 0 0 100px;
	width: 320px;
	max-width: 60%;
}
.trek-news__input::placeholder { color: #d5dde1; }
.trek-news__btn {
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 12px 24px;
	border: 0;
	border-radius: 0 100px 100px 0;
	background: var(--trek-btn);
	color: var(--trek-btn-text);
	cursor: pointer;
}
.trek-news__privacy { font-size: 12px; color: #d5dde1; }
.trek-news__privacy a { color: #fff; }

/* ---- Home no mobile ---- */

@media (max-width: 900px) {
	.trek-hero__grid { grid-template-columns: 1fr; gap: 24px; }
	.trek-row { grid-template-columns: 1fr; gap: 12px; }
	.trek-row__figure { order: -1; }
}

@media (max-width: 768px) {
	.trek-hero { padding: 20px 0; }
	.trek-hero__title { font-size: 20px; }
	.trek-latest__track { grid-template-columns: 1fr; gap: 18px; }
	.trek-news__form { flex-direction: column; align-items: stretch; gap: 10px; }
	.trek-news__input { width: 100%; max-width: none; border-radius: 100px; }
	.trek-news__btn { border-radius: 100px; }
}


/* ============================================================
   HOME 4  (Ziivoti)
   ============================================================ */

.trek-h4-hero { padding: 28px 0; }
.trek-h4-hero__grid {
	max-width: 1200px; margin: 0 auto; padding: 0 20px;
	display: grid; grid-template-columns: 1.7fr 1fr; gap: 32px; align-items: start;
}
.trek-h4-hero__figure { display: block; margin-bottom: 14px; }
.trek-h4-hero__figure img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px;
}
.trek-h4-hero__title { font-size: 26px; margin: 8px 0 10px; }
.trek-h4-hero__title a { text-decoration: none; }
.trek-h4-hero__excerpt { color: var(--trek-post-muted); font-size: 15px; }

.trek-h4-hero__menu {
	display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
	padding-bottom: 16px; border-bottom: 1px solid var(--trek-post-line);
}
.trek-h4-hero__menu a {
	text-decoration: none; font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--trek-label); padding: 6px 12px;
	border: 1px solid var(--trek-post-line); border-radius: 100px;
}

/* ---- Popular ---- */

.trek-h4-pop { background: #f7f7f7; padding: 32px 0; }
.trek-h4-pop__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.trek-h4-pop__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.trek-h4-pop__badge {
	background: var(--trek-label-strong); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .06em;
	padding: 5px 12px; border-radius: 100px;
}
.trek-h4-pop__title { font-size: 22px; }

.trek-h4-pop__grid {
	display: grid; grid-template-columns: 1.4fr 1.2fr 1fr; gap: 28px; align-items: start;
}
.trek-h4-pop__figure { display: block; margin-bottom: 10px; }
.trek-h4-pop__figure img {
	width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px;
}
.trek-h4-pop__large-title { font-size: 18px; }
.trek-h4-pop__large-title a { text-decoration: none; }

.trek-h4-pop__row {
	display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center;
	padding: 10px 0; border-bottom: 1px solid var(--trek-post-line);
}
.trek-h4-pop__row:last-child { border-bottom: 0; }
.trek-h4-pop__row-fig img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px;
}
.trek-h4-pop__row-title { font-size: 14px; line-height: 1.35; }
.trek-h4-pop__row-title a { text-decoration: none; }

.trek-h4-pop__list { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.trek-h4-pop__list li {
	display: flex; gap: 12px; align-items: baseline;
	padding: 10px 0; border-bottom: 1px solid var(--trek-post-line);
}
.trek-h4-pop__list li:last-child { border-bottom: 0; }
.trek-h4-pop__num { font-weight: 700; font-size: 18px; color: var(--trek-label); flex: 0 0 auto; }
.trek-h4-pop__list a { text-decoration: none; font-size: 14px; font-weight: 600; }

/* ---- Veja também ---- */

.trek-h4-more { padding: 36px 0; }
.trek-h4-more__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.trek-h4-more__title { font-size: 22px; margin-bottom: 18px; }
.trek-h4-more__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}

/* ============================================================
   HOME 6  (Tech Gofrix)
   ============================================================ */

.trek-h6-hero { padding: 0; }
/* Um destaque só, sem rolagem (o original girava via JS). */
.trek-h6-hero__track { list-style: none; margin: 0; padding: 0; }
.trek-h6-slide {
	display: grid; grid-template-columns: 1.2fr 1fr;
	gap: 32px; align-items: center;
	max-width: 1200px; margin: 0 auto; padding: 28px 20px;
}
.trek-h6-slide__fig img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px;
}
.trek-h6-slide__title { font-size: 26px; margin: 8px 0 10px; }
.trek-h6-slide__title a { text-decoration: none; }
.trek-h6-slide__excerpt { color: var(--trek-post-muted); font-size: 15px; margin-bottom: 16px; }

/* CTA dos cards: usa a cor de ACENTO da marca, não a de UI escura.
   Antes usava --trek-primary e ficava apagado sobre imagem escura. */
.trek-btn {
	display: inline-block; text-decoration: none;
	font-size: 14px; font-weight: 700;
	padding: 10px 22px; border-radius: 100px;
	background: var(--trek-cta);
	color: var(--trek-cta-text);
}

/* ============================================================
   HOMES 4/5/6 no mobile
   ============================================================ */

@media (max-width: 900px) {
	.trek-h4-hero__grid { grid-template-columns: 1fr; gap: 24px; }
	.trek-h4-pop__grid { grid-template-columns: 1fr; gap: 20px; }
	.trek-h4-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trek-h5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trek-h5-cat__grid { grid-template-columns: 1fr; }
	.trek-h6-slide { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 768px) {
	.trek-h4-hero__title,
	.trek-h6-slide__title { font-size: 20px; }
	.trek-h4-more__grid,
	.trek-h5-grid { grid-template-columns: 1fr; gap: 18px; }
	.trek-h4-pop__row { grid-template-columns: 96px 1fr; }
}


/* ============================================================
   HOME 5  (Pouplix / Bublatok)
   Layout: [ menu lateral vertical | rotator de slides ]
   Cada slide = 1 card grande + 2 empilhados a direita.
   ============================================================ */

.trek-h5__title { font-size: 22px; margin-bottom: 18px; }

.trek-h5-layout {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* ---- Menu lateral vertical ---- */

.trek-h5-side__list { list-style: none; margin: 0; padding: 0; }
.trek-h5-side__list li { border-bottom: 1px solid var(--trek-post-line); }
.trek-h5-side__list li:last-child { border-bottom: 0; }
.trek-h5-side__list a {
	display: block;
	padding: 14px 4px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--trek-label);
}

/* ---- Destaque: um slide, sem rolagem ---- */

.trek-h5-rotator {
	border: 1px solid var(--trek-post-line);
	border-radius: 10px;
}

.trek-h5-slide {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 20px;
	padding: 20px;
	min-width: 0;
	/* start, não stretch: post sem imagem destacada não estica a coluna
	   esquerda até a altura da direita, deixando um vazio enorme. */
	align-items: start;
}

/* Card grande */
.trek-h5-main { min-width: 0; }
.trek-h5-main__thumb { display: block; }
.trek-h5-main__thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
}
.trek-h5-main__body { padding: 16px 4px 0; }
.trek-h5-main__title { font-size: 26px; line-height: 1.2; margin-bottom: 12px; }
.trek-h5-main__title a { text-decoration: none; }
.trek-h5-main__excerpt {
	font-size: 15px;
	color: var(--trek-post-muted);
	margin-bottom: 16px;
}

/* Coluna dos 2 cards */
.trek-h5-cards {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
	min-width: 0;
}
.trek-h5-card {
	border: 1px solid var(--trek-post-line);
	border-radius: 10px;
	padding: 14px;
	min-width: 0;
}
.trek-h5-card__thumb { display: block; }
.trek-h5-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	border-radius: 6px;
}
.trek-h5-card__body { padding-top: 12px; }
.trek-h5-card__title { font-size: 15px; margin-bottom: 8px; }
.trek-h5-card__title a { text-decoration: none; }
.trek-h5-card__excerpt {
	font-size: 13px;
	color: var(--trek-post-muted);
	margin-bottom: 12px;
}

/* Botao (usa marca) */
.trek-btn--sm { font-size: 12px; padding: 8px 16px; }

/* ---- Recentes e categoria ---- */

.trek-h5-recent { padding: 8px 0 36px; }
.trek-h5-recent__inner,
.trek-h5-cat__inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.trek-h5-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.trek-h5-more {
	display: inline-block; margin-top: 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .04em;
	color: var(--trek-link);
}

.trek-h5-cat { background: #f7f7f7; padding: 32px 0; }
.trek-h5-cat__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.trek-h5-cat__fig { display: block; margin-bottom: 12px; }
.trek-h5-cat__fig img {
	width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px;
}
.trek-h5-cat__feature-title { font-size: 20px; margin-bottom: 8px; }
.trek-h5-cat__feature-title a { text-decoration: none; }

/* ---- Home 5 no mobile ---- */

@media (max-width: 1000px) {
	.trek-h5-layout { grid-template-columns: 1fr; }
	.trek-h5-side__list {
		display: flex; flex-wrap: wrap; gap: 8px;
	}
	.trek-h5-side__list li { border-bottom: 0; }
	.trek-h5-side__list a {
		padding: 8px 14px;
		border: 1px solid var(--trek-post-line);
		border-radius: 100px;
	}
	.trek-h5-slide { grid-template-columns: 1fr; }
	.trek-h5-cards { grid-template-rows: auto auto; }
	.trek-h5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trek-h5-cat__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.trek-h5-main__title { font-size: 20px; }
	.trek-h5-grid { grid-template-columns: 1fr; gap: 18px; }
}


/* ============================================================
   HOME 1  (Zaqbox)
   ============================================================ */

.trek-h1-label {
	font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--trek-label); margin-bottom: 6px;
}

.trek-h1-hero { padding: 24px 0; }
.trek-h1-hero__grid {
	max-width: 1200px; margin: 0 auto; padding: 0 20px;
	display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start;
}

/* Sem sobreposição: imagem em cima, texto embaixo. */
.trek-h1-main__link { display: block; text-decoration: none; color: inherit; }
.trek-h1-main__bg {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--trek-post-line);
	border-radius: 10px;
	overflow: hidden;
}
.trek-h1-main__bg img {
	width: 100%; height: 100%; object-fit: cover;
}
.trek-h1-main__body { display: block; padding: 14px 2px 0; }
.trek-h1-main__title {
	display: block; font-size: 26px; font-weight: 700;
	line-height: 1.2; margin-bottom: 8px;
	color: var(--trek-post-heading);
}
.trek-h1-main__excerpt {
	display: block; font-size: 14px; margin-bottom: 14px;
	color: var(--trek-post-muted);
}

.trek-h1-side__title { font-size: 16px; margin-bottom: 14px; }
.trek-h1-side__card {
	display: grid; grid-template-columns: 110px 1fr; gap: 12px;
	padding: 12px 0; border-bottom: 1px solid var(--trek-post-line);
}
.trek-h1-side__card:last-child { border-bottom: 0; }
.trek-h1-side__thumb img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px;
}
.trek-h1-side__cat {
	display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--trek-label); margin-bottom: 4px;
}
.trek-h1-side__card-title { font-size: 14px; line-height: 1.35; margin-bottom: 6px; }
.trek-h1-side__card-title a { text-decoration: none; }

/* ============================================================
   HOME 2  (Jahto / Brontoz)
   Mosaico: 1 grande + 2 medios + 3 pequenos
   ============================================================ */

.trek-h2-hero { padding: 24px 0; }
.trek-h2-hero__grid {
	max-width: 1200px; margin: 0 auto; padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}
/* Linha 1: grande (2 col) + 2 medios (1 col cada)
   Linha 2: 2 pequenos (1 col cada) + grande (2 col)
   Todos com a mesma altura de linha. */
.trek-h2-card.is-large   { grid-column: span 2; }
.trek-h2-card.is-medium  { grid-column: span 1; }
.trek-h2-card.is-small   { grid-column: span 1; }
.trek-h2-card:last-child { grid-column: span 2; }

/* Sem sobreposição: imagem em cima, texto embaixo. */
.trek-h2-card__link { display: block; text-decoration: none; color: inherit; }

.trek-h2-card__bg {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--trek-post-line);
	border-radius: 10px;
	overflow: hidden;
}
.trek-h2-card__bg img { width: 100%; height: 100%; object-fit: cover; }

.trek-h2-card__body { display: block; padding: 12px 2px 0; }
.trek-h2-card__title {
	display: block; font-weight: 700; line-height: 1.3; margin-bottom: 8px;
	font-size: 15px;
	color: var(--trek-post-heading);
}
.trek-h2-card.is-large .trek-h2-card__title,
.trek-h2-card:last-child .trek-h2-card__title { font-size: 20px; }
.trek-h2-card__excerpt {
	display: block; font-size: 13px; margin-bottom: 10px;
	color: var(--trek-post-muted);
}

/* ---- Homes 1 e 2 no mobile ---- */

@media (max-width: 900px) {
	.trek-h1-hero__grid { grid-template-columns: 1fr; }
	/* SEM grid-auto-rows: a altura tem que vir do conteúdo (imagem + texto).
	   Linha de altura fixa fazia o card estourar e invadir a seção seguinte. */
	.trek-h2-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trek-h2-card.is-large,
	.trek-h2-card:last-child { grid-column: span 2; }
	.trek-h2-card.is-medium,
	.trek-h2-card.is-small { grid-column: span 1; }
	.trek-h2-recent__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.trek-h1-main__title { font-size: 20px; }

	/* Mantém 2 colunas no celular: em coluna única viravam 6 imagens
	   gigantes empilhadas, e o usuário rolava muito antes de ver conteúdo.
	   Os cards grandes continuam ocupando a largura toda. */
	.trek-h2-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.trek-h2-card.is-large,
	.trek-h2-card:last-child { grid-column: span 2; }
	.trek-h2-card.is-medium,
	.trek-h2-card.is-small { grid-column: span 1; }

	.trek-h2-card__title { font-size: 14px; }
	.trek-h2-card.is-large .trek-h2-card__title,
	.trek-h2-card:last-child .trek-h2-card__title { font-size: 18px; }
	.trek-h2-card__excerpt { font-size: 12px; }

	.trek-h1-side__card { grid-template-columns: 96px 1fr; }
}


/* ============================================================
   ARQUIVO / BUSCA / 404 / FORMULARIO
   Usa tokens do POST (fixos). Sem variavel de marca: paginas
   legais e de erro devem ser identicas nos 80 sites.
   ============================================================ */

.trek-archive__head { margin-bottom: 24px; }
.trek-archive__desc { color: var(--trek-post-muted); font-size: 15px; margin-top: 8px; }

.trek-archive__list {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.trek-empty {
	color: var(--trek-post-muted);
	padding: 32px 0;
}

/* Busca dentro da pagina (resultados e 404) */
.trek-search--page { margin-top: 16px; max-width: 460px; }
.trek-search--page .trek-search__input { width: 100%; }

/* Paginacao nativa do WordPress */
.trek-archive .navigation.pagination { margin-top: 32px; }
.trek-archive .nav-links {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.trek-archive .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--trek-post-line);
	border-radius: 6px;
	text-decoration: none;
	font-size: 14px;
	color: var(--trek-post-text);
}
.trek-archive .page-numbers.current {
	background: var(--trek-post-heading);
	border-color: var(--trek-post-heading);
	color: #fff;
}
.trek-archive .screen-reader-text { position: absolute; left: -9999px; }

/* Quebra de pagina em Paginas estaticas */
.trek-pagelinks { margin-top: 24px; font-size: 14px; }
.trek-pagelinks a { margin-right: 8px; }

/* ---- Formulario (contato) ---- */

.trek-form { margin-top: 28px; }
.trek-form__row { margin-bottom: 18px; }
.trek-form__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--trek-post-heading);
}
.trek-form__input {
	font: inherit;
	font-size: 15px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--trek-post-line);
	border-radius: 6px;
	background: #fff;
	color: var(--trek-post-text);
}
.trek-form__input:focus {
	outline: 2px solid var(--trek-post-heading);
	outline-offset: -2px;
}
.trek-form__textarea { resize: vertical; min-height: 140px; }
.trek-form__note {
	font-size: 13px;
	color: var(--trek-post-muted);
	border-top: 1px solid var(--trek-post-line);
	padding-top: 14px;
	margin-top: 6px;
}

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

@media (max-width: 768px) {
	.trek-archive__list { grid-template-columns: 1fr; gap: 18px; }
	.trek-archive__title { font-size: 20px; }
}


/* ============================================================
   CONTEUDO EDITADO A MAO (paginas legais, contato, etc.)

   Termos, Politica de Privacidade e Quem Somos sao escritos por
   pessoas no editor, site a site, com tabelas, titulos e ate
   formularios proprios. O tema precisa renderizar BEM o que vier
   do editor -- sem impor estrutura.

   Tokens do POST (fixos). Sem variavel de marca.
   ============================================================ */

/* ---- Titulos com barra lateral (padrao das paginas legais) ---- */
.trek-post__content h2 {
	border-left: 4px solid var(--trek-post-heading);
	padding-left: 12px;
}

.trek-post__content h4 { font-size: 17px; margin: 24px 0 10px; }

/* ---- Tabelas ---- */
.trek-post__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
	/* tabela larga nao pode estourar a coluna no mobile */
	display: block;
	overflow-x: auto;
}
.trek-post__content table th,
.trek-post__content table td {
	border: 1px solid var(--trek-post-line);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}
.trek-post__content table th {
	background: #f4f4f4;
	font-weight: 700;
	color: var(--trek-post-heading);
}
.trek-post__content table tr:nth-child(even) td { background: #fafafa; }

/* ---- Citacao ---- */
.trek-post__content blockquote {
	margin: 0 0 24px;
	padding: 4px 0 4px 16px;
	border-left: 4px solid var(--trek-post-line);
	color: var(--trek-post-muted);
}

/* ---- Imagem com legenda ---- */
.trek-post__content figure { margin: 0 0 24px; }
.trek-post__content figcaption {
	font-size: 13px;
	color: var(--trek-post-muted);
	text-align: center;
	margin-top: 6px;
}

/* ---- Formularios que vierem DENTRO do conteudo ----
   Ex.: o form de contato montado a mao no editor. Sem isto os campos
   ficam com o visual cru do navegador (foi o que quebrou a /contato/). */
.trek-post__content input[type="text"],
.trek-post__content input[type="email"],
.trek-post__content input[type="tel"],
.trek-post__content input[type="url"],
.trek-post__content input[type="search"],
.trek-post__content select,
.trek-post__content textarea {
	font: inherit;
	font-size: 15px;
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	margin: 4px 0 4px;
	border: 1px solid var(--trek-post-line);
	border-radius: 6px;
	background: #fff;
	color: var(--trek-post-text);
}
.trek-post__content textarea { min-height: 140px; resize: vertical; }

.trek-post__content input:focus,
.trek-post__content select:focus,
.trek-post__content textarea:focus {
	outline: 2px solid var(--trek-post-heading);
	outline-offset: -2px;
}

.trek-post__content input[type="checkbox"],
.trek-post__content input[type="radio"] {
	width: auto;
	margin-right: 6px;
	vertical-align: middle;
}

.trek-post__content label { display: inline-block; margin-bottom: 2px; }

.trek-post__content input[type="submit"],
.trek-post__content button[type="submit"],
.trek-post__content button {
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	width: auto;
	padding: 12px 28px;
	border: 0;
	border-radius: 100px;
	background: var(--trek-post-heading);
	color: #fff;
	cursor: pointer;
}

/* ---- Ajustes no mobile ---- */
@media (max-width: 768px) {
	.trek-post__content table { font-size: 14px; }
	.trek-post__content table th,
	.trek-post__content table td { padding: 8px 10px; }
}


/* ---- Home 2: Posts Recentes (2x2, cabecalho centralizado) ---- */

.trek-h2-recent { padding: 40px 0; }
.trek-h2-recent__inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.trek-h2-recent__head { text-align: center; margin-bottom: 24px; }
.trek-h2-recent__pill {
	display: inline-block;
	font-size: 11px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--trek-label);
	background: var(--trek-pill-bg);
	border: 1px solid var(--trek-pill-stroke);
	border-radius: 100px;
	padding: 5px 14px;
	margin-bottom: 10px;
}
.trek-h2-recent__title { font-size: 28px; }

.trek-h2-recent__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
/* Nesta secao todos os cards tem o mesmo tamanho */
.trek-h2-recent__grid .trek-h2-card,
.trek-h2-recent__grid .trek-h2-card:last-child { grid-column: span 1; }
.trek-h2-recent__grid .trek-h2-card__title { font-size: 20px; }

@media (max-width: 768px) {
	.trek-h2-recent__title { font-size: 22px; }
	.trek-h2-recent__grid .trek-h2-card__title { font-size: 17px; }
}
