/* ============================================================
   Miolo - home institucional
   Codificado pixel perfect a partir do artboard 1920px
   (Miolo_site_34.ai / 1_home.pdf, ALT-260713).
   Unidade --u: 1px no artboard; abaixo de 1920 escala
   proporcional (combinado da reuniao de 13/07: a arte pode
   diminuir proporcionalmente). Mobile tem layout proprio.
   ============================================================ */

@font-face {
	font-family: 'Fredoka';
	src: url('../fonts/fredoka-var.woff2') format('woff2-variations');
	font-weight: 300 700;
	font-display: swap;
}
@font-face {
	font-family: 'Heebo';
	src: url('../fonts/heebo-var.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* tokens medidos no layout (amostrados por pixel) */
	--rosa: #d40070;          /* logo, menu, botoes */
	--rosa-btn: #d40063;      /* pill "entrar em contato" */
	--magenta: #e9096d;       /* titulos e icones da secao 2 */
	--laranja-dash: #f54b00;
	--amarelo: #feff03;       /* logo hero, circulo, pontinhos */
	--amarelo-blob: #ffb600;  /* blob da secao 2 */
	--escuro: #121021;        /* linha 1 do h2, setas */
	--cinza-texto: #8c8c8c;
	--cinza-card: #f2f2f2;
	--texto-card: #3d0326;  /* texto corrido dos cards de solucao (definido pelo designer) */
	--video-bg: #13101c;
	--bege-faixa: #ece0dc;   /* fundo das faixas de tema do portfolio no mobile */
	--grad-destaque: linear-gradient(90deg, #ea0d69 0%, #fe8006 100%);
	--grad-pill: linear-gradient(90deg, #ea0e65 0%, #f44706 100%);
	--grad-hero: linear-gradient(180deg, #d40077 0%, #dd0b58 40%, #e61150 80%, #e8134b 100%);
	--fonte-titulo: 'Fredoka', 'Trebuchet MS', sans-serif;
	--fonte-texto: 'Heebo', 'Helvetica Neue', sans-serif;
	--u: min(1px, calc(100vw / 1920));
}

/* ---------- foco por teclado ----------
   So aparece na navegacao por teclado (:focus-visible), nunca no clique.
   Anel duplo: magenta com halo branco por padrao; invertido em fundo
   escuro ou magenta, para continuar visivel em qualquer secao. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--magenta);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .95);
}
/* Containers rolaveis (carrossel, caixas com rolagem, trilho do portfolio)
   tem tabindex so pra poder rolar pelo teclado. O clique num filho joga o
   foco neles, e o anel contornava a faixa inteira. Aqui o anel some no
   clique e volta so quando a pessoa esta navegando por teclado, e mesmo
   assim desenhado por dentro, pra nao virar linha na borda da secao. */
.carrossel:focus-visible,
.rolavel:focus-visible,
.pf-seltrilho:focus-visible {
	outline: none;
	box-shadow: none;
}
body.usando-teclado .carrossel:focus-visible,
body.usando-teclado .rolavel:focus-visible,
body.usando-teclado .pf-seltrilho:focus-visible {
	outline: calc(2 * var(--u)) solid var(--magenta);
	outline-offset: calc(-6 * var(--u));
	box-shadow: none;
}

.hero :focus-visible,
.video-som:focus-visible,
.pilares-bloco :focus-visible,
.contato :focus-visible,
.menu-cta:focus-visible,
.pill-grad:focus-visible,
.menu-busca:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 6px rgba(18, 16, 33, .55);
}

*, *::before, *::after { box-sizing: border-box; }
/* o menu e fixo: sem isso o link do seletor joga a secao para debaixo dele */
html { scroll-behavior: smooth; scroll-padding-top: calc(128 * var(--u)); }
body {
	margin: 0;
	font-family: var(--fonte-titulo);
	background: #fff;
	color: var(--escuro);
	overflow-x: clip;
}
img { max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

@media (pointer: fine) {
	html { scrollbar-width: thin; scrollbar-color: var(--rosa) rgba(18, 16, 33, .06); }
	::-webkit-scrollbar { width: 11px; }
	::-webkit-scrollbar-track { background: rgba(18, 16, 33, .06); }
	::-webkit-scrollbar-thumb {
		background: linear-gradient(180deg, #d40070, #f44706);
		border: 3px solid transparent;
		background-clip: content-box;
		border-radius: 999px;
	}
}

/* ============================== menu ============================== */

.menu {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	/* a faixa e larga mas so a pilula (e o overlay de busca) recebem clique:
	   senao ela cobre o que estiver embaixo, como as setas do carrossel */
	pointer-events: none;
}
.menu-pill, .busca-overlay { pointer-events: auto; }
.menu-pill {
	width: calc(1200 * var(--u));
	height: calc(59 * var(--u));
	margin: calc(49 * var(--u)) auto 0 calc(352 * var(--u));
	background: #fff;
	border-radius: 999px;
	display: flex;
	align-items: center;
	padding: 0 calc(29 * var(--u)) 0 calc(44 * var(--u));
	box-shadow: 0 10px 34px rgba(18, 16, 33, .12);
}
.menu-logo { display: flex; align-items: center; }
.menu-logo img { width: calc(110 * var(--u)); height: auto; }
.menu-nav { margin-left: calc(55 * var(--u)); }
.menu-nav ul {
	list-style: none;
	display: flex;
	gap: calc(29 * var(--u));
	margin: 0; padding: 0;
}
.menu-nav a {
	position: relative;
	top: calc(-1 * var(--u));   /* ajuste optico: centro da tinta ficava 0,75px abaixo */
	font-size: calc(14.7 * var(--u));
	font-weight: 500;
	color: var(--rosa);
	text-decoration: none;
	white-space: nowrap;
}
.menu-nav a:hover { color: #a00055; }
.menu-acoes {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
}
.menu-busca {
	width: calc(46 * var(--u));
	height: calc(46 * var(--u));
	border: 0;
	border-radius: 50%;
	background: var(--rosa);
	display: grid;
	place-items: center;
	padding: 0;
	overflow: hidden;
}
.menu-busca svg { width: calc(19 * var(--u)); height: auto; color: #fff; }
.menu-rosa .menu-busca svg { color: var(--rosa); }
.menu-cta {
	height: calc(40 * var(--u));
	display: inline-flex;
	align-items: center;
	padding: 0 calc(24 * var(--u));
	border-radius: 999px;
	background: var(--rosa-btn);
	color: #fff;
	font-size: calc(14.7 * var(--u));
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.menu-cta:hover { filter: brightness(1.08); }
.menu-burger { display: none; }

/* ============================== hero ============================== */

.hero {
	position: relative;
	height: calc(1375 * var(--u));
}
.hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(calc(1150 * var(--u)) calc(850 * var(--u)) at 99% -4%, rgba(200, 0, 28, .5), rgba(200, 0, 28, 0) 62%),
		radial-gradient(circle calc(900 * var(--u)) at calc(100 * var(--u)) calc(1400 * var(--u)), rgba(245, 72, 10, 1) 0%, rgba(243, 61, 13, 0) 100%),
		var(--grad-hero);
	clip-path: circle(calc(6500 * var(--u)) at 50% calc(-5125 * var(--u)));
	overflow: hidden;
}
.hero-circulo {
	position: absolute;
	left: calc(1200 * var(--u));
	top: calc(295 * var(--u));
	width: calc(1112 * var(--u));
	height: calc(1112 * var(--u));
	border-radius: 50%;
	background: var(--amarelo);
}
.hero-foto {
	position: absolute;
	left: calc(834 * var(--u));
	top: calc(182 * var(--u));
	width: calc(1068 * var(--u));
	height: auto;
	z-index: 2;
	pointer-events: none;
}
.hero-anel {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: calc(1920 * var(--u));
	height: calc(1375 * var(--u));
}
.hero-copy {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
.hero-logo {
	position: absolute;
	left: calc(242 * var(--u));
	top: calc(290 * var(--u));
	width: calc(394 * var(--u));
	height: auto;
}
.hero-copy h1 {
	margin: 0;
	position: absolute;
	left: calc(232 * var(--u));
	top: calc(452 * var(--u));
	font-weight: 600;
	color: #fff;
	line-height: 1;
}
.hero-destaque {
	display: inline-block;
	background: var(--grad-destaque);
	border-radius: calc(14 * var(--u));
	height: calc(70 * var(--u));
	line-height: calc(70 * var(--u));
	padding: 0 calc(26 * var(--u));
	font-size: calc(60 * var(--u));
	letter-spacing: calc(0 * var(--u));
}
.hero-linha2 {
	display: block;
	margin-top: calc(16 * var(--u));
	padding-left: 0;
	font-size: calc(59 * var(--u));
	letter-spacing: calc(1.6 * var(--u));
}
.hero-linha2 em {
	font-style: normal;
	font-weight: 300;
	margin-right: 0;
}
.hero-dash {
	position: absolute;
	left: calc(264 * var(--u));
	top: calc(622 * var(--u));
	width: calc(90 * var(--u));
	height: calc(6 * var(--u));
	background: #fff;
}
.hero-dots {
	position: absolute;
	left: calc(125 * var(--u));
	top: calc(743 * var(--u));
	width: calc(159.22 * var(--u));
	height: calc(143.94 * var(--u));
	background: url('../img/hero-dots.svg') no-repeat center / 100% 100%;
}
.hero-cta {
	position: absolute;
	left: calc(364 * var(--u));
	top: calc(754 * var(--u));
	height: calc(66 * var(--u));
	display: inline-flex;
	align-items: center;
	gap: calc(18 * var(--u));
	padding: 0 calc(8 * var(--u)) 0 calc(34 * var(--u));
	background: #fff;
	border-radius: 999px;
	color: var(--rosa);
	font-size: calc(21 * var(--u));
	font-weight: 600;
	letter-spacing: calc(0.1 * var(--u));
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .25s ease;
}
.hero-cta:hover { transform: translateY(calc(-3 * var(--u))); }
.hero-cta .pill-circulo { background: var(--rosa); color: #fff; }

/* video manifesto sobreposto ao fim do hero */
.video-card {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(1138 * var(--u));
	width: calc(1148 * var(--u));
	height: calc(680 * var(--u));
	border-radius: calc(44 * var(--u));
	background: var(--video-bg);
	z-index: 5;
}
.video-tela {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
}
.video-poster {
	position: absolute;
	left: calc(-128 * var(--u));
	top: calc(-60 * var(--u));
	width: calc(1540 * var(--u));
	height: calc(880 * var(--u));
	max-width: none;
	object-fit: cover;
	display: block;
}
.video-som {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: calc(14 * var(--u));
	height: calc(54 * var(--u));
	padding: 0 calc(30 * var(--u));
	border: 0;
	border-radius: 999px;
	background: var(--grad-pill);
	color: #fff;
	font-size: calc(14.7 * var(--u));
	font-weight: 600;
	letter-spacing: calc(0 * var(--u));
	text-transform: uppercase;
}
.video-som img { width: calc(32 * var(--u)); height: auto; }
.video-play {
	position: absolute;
	left: calc(72 * var(--u));
	bottom: calc(56 * var(--u));
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	border: 0;
	border-radius: 50%;
	background: var(--grad-pill);
	display: grid;
	place-items: center;
	z-index: 2;
}
.video-icone { width: calc(26 * var(--u)); height: calc(26 * var(--u)); display: block; color: #fff; }
.video-som:hover, .video-play:hover { filter: brightness(1.1); }

/* ====================== secao 2: ajudamos ====================== */

.ajudamos {
	position: relative;
	background: #fff;
	padding-top: calc(524 * var(--u));
	min-height: calc(1554 * var(--u));
}
.ajudamos-figura { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ajudamos-blob {
	position: absolute;
	left: calc(-373 * var(--u));
	top: calc(303 * var(--u));
	width: calc(1156 * var(--u));
	height: calc(1156 * var(--u));
	border-radius: 50%;
	background: var(--amarelo-blob);
}
.ajudamos-foto {
	position: absolute;
	left: calc(61 * var(--u));
	top: calc(547 * var(--u));
	width: calc(648 * var(--u));
	height: auto;
	transform: scaleX(-1);
}
.ajudamos-conteudo {
	position: relative;
	margin-left: calc(850 * var(--u));
	width: calc(940 * var(--u));
}
.ajudamos h2 {
	margin: 0;
	padding-left: calc(6 * var(--u));
	font-size: calc(60 * var(--u));
	line-height: calc(70 * var(--u));
	font-weight: 500;
	letter-spacing: calc(0.8 * var(--u));
}
.linha-escura { display: block; color: var(--escuro); }
.linha-magenta { display: block; color: var(--magenta); font-weight: 500; }
.dash-laranja {
	display: block;
	margin-top: calc(11 * var(--u));
	margin-left: calc(10 * var(--u));
	width: calc(90 * var(--u));
	height: calc(6 * var(--u));
	background: var(--laranja-dash);
}

.cascata {
	list-style: none;
	margin: calc(96 * var(--u)) 0 0;
	padding: 0;
}
.cascata-item { margin-bottom: calc(86 * var(--u)); }
.cascata-topo {
	position: relative;
	display: grid;
	grid-template-columns: calc(90 * var(--u)) 1fr;
	column-gap: calc(46 * var(--u));
	align-items: start;
	padding-right: calc(80 * var(--u));
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
	text-align: left;
}
.cascata-icone {
	/* o PNG do Mauricio ja traz o circulo magenta e o desenho juntos */
	width: calc(90 * var(--u));
	height: calc(90 * var(--u));
	display: block;
}
.cascata-icone img { width: 100%; height: 100%; display: block; }
.cascata-textos { position: relative; top: calc(13 * var(--u)); }
.cascata-titulo {
	display: block;
	font-size: calc(35 * var(--u));
	font-weight: 500;
	color: var(--magenta);
	line-height: 1.15;
}
.cascata-resumo {
	/* Um texto so: fechado mostra a primeira linha com reticencias, aberto
	   mostra o mesmo paragrafo inteiro. O texto completo esta sempre no HTML
	   (indexavel), so o recorte e visual. */
	display: block;
	overflow: hidden;
	max-height: 1.35em;
	max-width: calc(705 * var(--u));
	margin-top: calc(6 * var(--u));
	font-size: calc(28 * var(--u));
	font-weight: 400;
	color: var(--cinza-texto);
	line-height: 1.2;
	transition: max-height .55s cubic-bezier(.22, .68, .18, 1);
}
/* fechado: so o inicio da frase, com as reticencias do design.
   aberto: o resto emenda no mesmo paragrafo. A classe .fechando mantem o
   texto visivel enquanto a altura desce, senao o fechamento fica seco. */
.cascata-inicio::after { content: ' ...'; }
.cascata-resto { display: none; }
.cascata-item.is-open .cascata-inicio::after,
.cascata-resumo.fechando .cascata-inicio::after { content: ''; }
.cascata-item.is-open .cascata-resto,
.cascata-resumo.fechando .cascata-resto { display: inline; }
.cascata-seta {
	position: absolute;
	right: calc(11 * var(--u));
	top: calc(28 * var(--u));
	width: calc(33 * var(--u));
	height: auto;
	transition: transform .35s ease;
}
.cascata-item.is-open .cascata-seta { transform: rotate(90deg); }
.cascata-seta, .fund-seta { display: block; color: var(--escuro); }
.cascata-seta .seta-reta, .fund-seta .seta-reta { display: block; width: 100%; height: auto; }

/* ====================== modal do video ====================== */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(18, 16, 33, .82);
	display: grid;
	place-items: center;
	padding: 24px;
}
.video-modal[hidden] { display: none; }
.video-modal-caixa {
	position: relative;
	width: min(1100px, 96vw);
	background: var(--video-bg);
	border-radius: 28px;
	overflow: hidden;
}
.video-modal-tela img { display: block; width: 100%; height: auto; opacity: .55; }
.video-modal-tela p {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 14px 26px;
	background: var(--grad-pill);
	border-radius: 999px;
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	white-space: nowrap;
}
.video-modal-fechar {
	position: absolute;
	right: 14px; top: 10px;
	z-index: 2;
	border: 0;
	background: none;
	color: #fff;
	font-size: 34px;
	line-height: 1;
}

/* ====================== rodape stub ====================== */


/* ============================================================
   Mobile (layout proprio; o design mobile oficial da hero
   ainda vai ser exportado pelo Mauricio - reuniao 13/07)
   ============================================================ */

@media (max-width: 819px) {
	:root { --u: 1px; }
	html { scroll-padding-top: 92px; }

	/* menu vira pill compacta com hamburguer */
	.menu-pill {
		width: auto;
		margin: 22px 14px 0;
		height: 54px;
		padding: 0 10px 0 22px;
	}
	.menu-logo img { width: 96px; }
	/* dropdown do hamburguer: abre com altura animada (0fr -> 1fr) em vez de
	   display:none, e os itens entram em cascata. O painel usa a mesma cor da
	   pilula: branco na home, rosa no portfolio. */
	.menu-nav {
		position: absolute;
		top: 82px; left: 14px; right: 14px;
		margin: 0;
		background: #fff;
		border-radius: 22px;
		padding: 0 22px;
		box-shadow: 0 20px 46px rgba(18, 16, 33, .24);
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: grid-template-rows .34s cubic-bezier(.3,.8,.3,1),
		            transform .34s cubic-bezier(.3,.8,.3,1),
		            opacity .2s ease,
		            visibility 0s linear .34s;
	}
	.menu.is-aberto .menu-nav {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: grid-template-rows .34s cubic-bezier(.3,.8,.3,1),
		            transform .34s cubic-bezier(.3,.8,.3,1),
		            opacity .2s ease,
		            visibility 0s;
	}
	.menu-nav ul {
		flex-direction: column;
		gap: 0;
		overflow: hidden;   /* o filho do grid precisa cortar para animar */
	}
	.menu-nav li {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .28s ease, transform .28s cubic-bezier(.3,.8,.3,1);
	}
	.menu-nav li + li { border-top: 1px solid rgba(18, 16, 33, .08); }
	.menu.is-aberto .menu-nav li { opacity: 1; transform: none; }
	.menu.is-aberto .menu-nav li:nth-child(1) { transition-delay: .07s; }
	.menu.is-aberto .menu-nav li:nth-child(2) { transition-delay: .11s; }
	.menu.is-aberto .menu-nav li:nth-child(3) { transition-delay: .15s; }
	.menu.is-aberto .menu-nav li:nth-child(4) { transition-delay: .19s; }
	.menu.is-aberto .menu-nav li:nth-child(5) { transition-delay: .23s; }
	.menu.is-aberto .menu-nav li:nth-child(6) { transition-delay: .27s; }
	.menu.is-aberto .menu-nav li:nth-child(7) { transition-delay: .31s; }
	.menu.is-aberto .menu-nav li:nth-child(8) { transition-delay: .35s; }
	.menu-nav a {
		display: block;
		top: 0;
		font-size: 16.5px;
		font-weight: 500;
		padding: 14px 2px;
		border-radius: 10px;
		transition: background-color .18s ease, padding-left .18s ease;
	}
	.menu-nav a:active { background: rgba(18, 16, 33, .06); padding-left: 10px; }
	.menu-rosa .menu-nav { background: var(--rosa); box-shadow: 0 20px 46px rgba(150, 0, 78, .38); }
	.menu-rosa .menu-nav li + li { border-top-color: rgba(255, 255, 255, .22); }
	.menu-rosa .menu-nav a:active { background: rgba(255, 255, 255, .14); }

	.menu-busca { display: none; }
	.menu-cta { height: 38px; font-size: 14px; padding: 0 16px; }
	.menu-acoes { gap: 8px; margin-right: 2px; }
	.menu-burger {
		display: grid;
		gap: 5px;
		border: 0;
		background: none;
		padding: 10px 8px;
		margin-left: 2px;
	}
	.menu-burger span {
		width: 22px; height: 2.5px;
		border-radius: 2px;
		background: var(--rosa);
		transition: transform .3s cubic-bezier(.3,.8,.3,1), opacity .18s ease;
	}
	/* vira X: as barras estao a 7.5px de distancia (2.5 de altura + 5 de gap) */
	.menu.is-aberto .menu-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
	.menu.is-aberto .menu-burger span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
	.menu.is-aberto .menu-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

	@media (prefers-reduced-motion: reduce) {
		.menu-nav, .menu-nav li, .menu-burger span { transition-duration: .01ms; }
	}

	/* hero em fluxo: copy, moca, video */
	.hero { height: auto; display: flex; flex-direction: column; }
	.hero-bg {
		bottom: 150px;
		border-bottom-left-radius: 50% 34px;
		border-bottom-right-radius: 50% 34px;
	}
	.hero-circulo {
		left: auto; right: -130px;
		top: auto; bottom: -70px;
		width: 430px; height: 430px;
	}
	.hero-copy {
		position: relative;
		height: auto;
		padding: 96px 24px 400px;   /* espaco reservado para a moca */
	}
	.hero-logo { position: static; display: block; width: 216px; margin-bottom: 26px; }
	.hero-copy h1 { position: static; }
	.hero-destaque {
		font-size: 24px;
		height: 44px;
		line-height: 44px;
		border-radius: 10px;
		padding: 0 14px;
	}
	.hero-linha2 { font-size: 31px; margin-top: 10px; padding-left: 14px; }
	.hero-dash { position: static; display: block; margin: 25px 0 0 16px; width: 44px; height: 6px; }
	.hero-dots { display: none; }
	.hero-anel { display: none; }
	.hero-cta {
		/* left/top vem do desktop; a regra comum dos botoes devolve
		   position:relative depois daqui, entao os dois precisam ser zerados
		   ou o botao sai da tela */
		position: static;
		left: auto;
		top: auto;
		align-self: flex-start;
		margin: 26px 0 0 0;
	}
	.hero-foto {
		/* ancorada pelo topo, nao pela base: assim ela comeca sempre depois
		   do botao, em vez de subir por cima dele.
		   A largura acompanha o card de video (18px de margem de cada lado):
		   assim o corte reto do pe dela morre sempre debaixo do card. */
		position: absolute;
		left: auto; bottom: auto;
		right: 30px; top: 392px;
		width: min(340px, calc(100% - 60px));
		margin: 0;
		z-index: 2;
	}
	.video-card {
		position: relative;
		left: auto; top: auto;
		transform: none;
		width: auto;
		height: auto;
		margin: -44px 18px 0;
		border-radius: 26px;
		z-index: 5;
	}
	.video-tela {
		position: relative;
		inset: auto;
		margin: 0;
		aspect-ratio: 16 / 10;
		border-radius: inherit;
	}
	.video-poster {
		position: static;
		transform: none;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.video-som {
		top: 50%;
		transform: translate(-50%, -50%);
		height: 44px;
		font-size: 13px;
		padding: 0 18px;
		gap: 10px;
	}
	.video-som img { width: 20px; }
	.video-play { left: 22px; bottom: 12px; width: 44px; height: 44px; }
	.video-icone { width: 20px; height: 20px; }

	/* secao 2 */
	.ajudamos { padding-top: 30px; padding-bottom: 70px; min-height: 0; display: flex; flex-direction: column; }
	.ajudamos-figura { order: 1; }
	.ajudamos-conteudo { order: 2; }
	.ajudamos-conteudo {
		margin: 0;
		width: auto;
		padding: 0 24px;
	}
	.ajudamos h2 { font-size: 25px; line-height: 32px; letter-spacing: .6px; padding-left: 0; }
	.dash-laranja { margin-top: 25px; width: 64px; height: 6px; }
	.cascata { margin-top: 40px; }
	.cascata-item { margin-bottom: 30px; }
	.cascata-topo {
		grid-template-columns: 56px 1fr;
		column-gap: 16px;
		padding-right: 44px;
	}
	.cascata-icone { width: 56px; height: 56px; }
	.cascata-titulo { font-size: 19px; }
	.cascata-resumo { font-size: 15px; margin-top: 4px; }
	.cascata-seta { width: 28px; right: 2px; top: 14px; }

	/* figura vem depois do conteudo no mobile */
	.ajudamos-figura {
		position: relative;
		inset: auto;
		display: block;
		height: 360px;
		margin: 0 0 16px;   /* a headline vinha colada na foto */
		overflow: hidden;
	}
	.ajudamos-blob {
		left: -160px;
		top: 60px;
		width: 480px;
		height: 480px;
	}
	.ajudamos-foto {
		left: 40px;
		top: 24px;
		width: 300px;
	}
}

/* telas muito largas: hero ocupa tudo, conteudo max 1920 centrado */
@media (min-width: 1921px) {
	.hero, .ajudamos { max-width: none; }
	.hero-copy, .hero-foto, .video-card { }
	.hero > *, .ajudamos-conteudo, .ajudamos-figura {
		--centro: calc((100vw - 1920px) / 2);
	}
	.hero-foto { left: calc(852px + var(--centro)); }
	.hero-copy { left: var(--centro); width: 1920px; }
	.ajudamos-conteudo { margin-left: calc(855px + var(--centro)); }
	.ajudamos-figura { left: var(--centro); right: auto; width: 1920px; }
	.hero-circulo { left: calc(1152px + var(--centro)); }
}

/* ============================================================
   Secoes 3-10 (pilares ate rodape) - geometria do artboard
   ============================================================ */

/* componentes compartilhados */
/* ===== Botao padrao do site =====
   Medida vinda do botao do hero, a referencia de tamanho do site:
   66 de altura, texto 21, circulo 50 com seta 24, recuo 34 na esquerda e
   8 na direita, e o hover que sobe 3px girando a seta. Quem muda por
   botao e so posicao, largura e cor. */
.pill-grad, .hero-cta, .contato-cta, .post-cta, .post-voltar {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(18 * var(--u));
	position: relative;
	height: calc(66 * var(--u));
	font-size: calc(21 * var(--u));
	padding: 0 calc(8 * var(--u)) 0 calc(34 * var(--u));
	border: 0;
	border-radius: 999px;
	font-family: var(--fonte-titulo);
	font-weight: 600;
	letter-spacing: calc(0.1 * var(--u));
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .25s ease;
}
.pill-grad { background: var(--grad-pill); color: #fff; }
.pill-grad:hover, .hero-cta:hover, .contato-cta:hover,
.post-cta:hover, .post-voltar:hover { transform: translateY(calc(-3 * var(--u))); }
/* versao menor do mesmo botao, para card estreito (blog, sub-pilar) */
.btn-menor {
	height: calc(52 * var(--u));
	font-size: calc(15 * var(--u));
	padding: 0 calc(6 * var(--u)) 0 calc(22 * var(--u));
	gap: calc(10 * var(--u));
}
.btn-menor .pill-circulo { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.btn-menor .seta { width: calc(18 * var(--u)); }
.seta { display: block; width: calc(20 * var(--u)); height: auto; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.pill-grad:hover .seta,
.hero-cta:hover .seta,
.contato-cta:hover .seta,
.post-cta:hover .seta,
.post-voltar:hover .seta { transform: rotate(45deg); }
.pill-circulo {
	color: var(--rosa);
	position: static;
	transform: none;
	flex: none;
	width: calc(50 * var(--u));
	height: calc(50 * var(--u));
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
}

@media (max-width: 819px) {
	/* proporcao, nao escala: 52px de altura numa tela de 390 pesa o triplo do
	   que os 66px pesam em 1920. Aqui o botao volta ao mesmo peso relativo. */
	.pill-grad, .hero-cta, .contato-cta, .post-cta, .post-voltar {
		height: 46px;
		padding: 0 5px 0 20px;
		gap: 12px;
		font-size: 12px;
		letter-spacing: .6px;
	}
	/* 34 em 46 e a mesma folga que 50 tem em 66 no desktop */
	.pill-circulo { width: 34px; height: 34px; }
	.seta { width: 14px; }
	.seta-reta { width: 18px; }
	.btn-menor { height: 42px; font-size: 11.5px; padding: 0 4px 0 18px; gap: 10px; }
	.btn-menor .pill-circulo { width: 31px; height: 31px; }
	.btn-menor .seta { width: 13px; }
}
.eyebrow {
	margin: 0;
	text-align: center;
	color: #58585a;
	font-size: calc(24.7 * var(--u));
	letter-spacing: calc(0 * var(--u));
	text-transform: uppercase;
}
.titulo-secao {
	margin: 0;
	text-align: center;
	font-size: calc(70 * var(--u));
	line-height: 1.1;
	letter-spacing: calc(0 * var(--u));
	color: var(--escuro);
	font-weight: 400;
}
.titulo-secao strong { color: var(--magenta); font-weight: 500; }
.dash-escuro, .dash-magenta {
	display: block;
	width: calc(81 * var(--u));
	height: calc(6 * var(--u));
	background: var(--escuro);
}
.dash-magenta { background: var(--magenta); }
.dots-grid {
	/* mesma grade vazada do hero (5 linhas, as duas primeiras com 4 bolinhas).
	   Um arquivo so; a cor vem da variante, por mascara. */
	position: absolute;
	width: calc(159.22 * var(--u));
	height: calc(143.94 * var(--u));
	-webkit-mask: url('../img/hero-dots.svg') no-repeat center / 100% 100%;
	mask: url('../img/hero-dots.svg') no-repeat center / 100% 100%;
}
.dots-cinza { background: #8c8c8c; }
.dots-rosa { background: var(--magenta); }
.circ-mag {
	display: inline-grid;
	place-items: center;
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	border-radius: 50%;
	background: var(--magenta);
}
.circ-mag { color: #fff; }
.circ-mag .seta-reta { display: block; width: calc(18 * var(--u)); height: auto; }
.rolavel { overflow-y: auto; }
.rolavel::-webkit-scrollbar { width: calc(8 * var(--u)); }
.rolavel::-webkit-scrollbar-track { background: #ededed; border-radius: 999px; }
.rolavel::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 999px; }
.rolavel { scrollbar-width: thin; scrollbar-color: var(--magenta) #ededed; }

/* ------------------- pilares ------------------- */
.pilares {
	position: relative;
	z-index: 2;
	background: #fff;
	padding: 0 calc(36 * var(--u));
	margin-top: calc(-30 * var(--u));
}
.pilares-bloco {
	position: relative;
	min-height: calc(1030 * var(--u));
	border-radius: calc(48 * var(--u));
	background:
		radial-gradient(circle calc(900 * var(--u)) at calc(60 * var(--u)) calc(1080 * var(--u)), rgba(245, 71, 2, 1) 0%, rgba(245, 71, 2, 0) 100%),
		radial-gradient(circle calc(700 * var(--u)) at 98% -8%, rgba(186, 0, 48, .45), rgba(186, 0, 48, 0) 62%),
		linear-gradient(180deg, #d5006b 0%, #ec0b72 100%);
	overflow: hidden;
}
.pilares-dots {
	position: absolute;
	left: calc(89 * var(--u));
	top: calc(58 * var(--u));
	width: calc(159.22 * var(--u));
	height: calc(143.94 * var(--u));
	background: url('../img/hero-dots.svg') no-repeat center / 100% 100%;
	z-index: 1;
}
.pilares-vista {
	position: relative;
	opacity: 1;
	transform: none;
	transition: opacity .3s ease, transform .3s ease;
}
.pilares-vista[hidden] { display: none; }
.pilares-vista.saindo { opacity: 0; transform: translateY(calc(-10 * var(--u))); }
.pilares-vista.entrando { opacity: 0; transform: translateY(calc(14 * var(--u))); }
/* a altura do bloco tambem acompanha, senao a troca da um pulo */
.pilares-bloco { transition: height .38s cubic-bezier(.22,.68,.18,1); }

/* ---------- pop-up de video (CTA dos sub-pilares) ---------- */
.popvideo {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(18, 16, 33, .82);
	display: grid;
	place-items: center;
	padding: 24px;
}
.popvideo[hidden] { display: none; }
.popvideo-caixa {
	position: relative;
	width: min(1000px, 100%);
	background: var(--video-bg);
	border-radius: 20px;
	padding: 22px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.popvideo-titulo {
	margin: 0 40px 12px 4px;
	color: rgba(255, 255, 255, .72);
	font-family: var(--fonte-titulo);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .6px;
	text-transform: uppercase;
}
.popvideo-tela {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 1280 / 582;
	background: #000;
}
.popvideo-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.popvideo-fechar {
	position: absolute;
	right: 14px;
	top: 10px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.popvideo-fechar:hover { background: rgba(255, 255, 255, .24); }
@media (max-width: 819px) {
	.popvideo-caixa { padding: 14px; }
	.popvideo-titulo { font-size: 13px; margin-bottom: 8px; }
}
.pilares-home h2 {
	margin: 0;
	padding-top: calc(82 * var(--u));
	text-align: center;
	color: #fff;
	font-weight: 400;
	font-size: calc(70 * var(--u));
	line-height: calc(80 * var(--u));
	letter-spacing: calc(0 * var(--u));
}
.pilares-home h2 span { display: block; }
.pilares-home h2 strong { color: var(--amarelo); font-weight: 500; }
.pilares-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: calc(87 * var(--u));
	top: calc(339 * var(--u));
	display: flex;
	gap: calc(63 * var(--u));
}
.pilar-card {
	position: relative;
	width: calc(375 * var(--u));
	height: calc(569 * var(--u));
	background: #fff;
	border-radius: calc(48 * var(--u));
}
.pilar-foto { position: absolute; left: calc(138 * var(--u)); top: calc(-66 * var(--u)); width: calc(238 * var(--u)); height: auto; }
.pilar-foto > img { display: block; width: 100%; height: auto; }
.pilar-card h3 {
	margin: 0;
	position: absolute;
	left: calc(33 * var(--u));
	top: calc(176 * var(--u));
	color: var(--escuro);
	font-size: calc(28 * var(--u));
	line-height: calc(30 * var(--u));
	font-weight: 400;
	letter-spacing: calc(0.5 * var(--u));
}
.pilar-card h3 .fina { display: block; font-weight: 400; }
.pilar-card h3 strong { display: block; font-weight: 700; }
.pilar-card h3 strong:only-child { position: relative; top: calc(11 * var(--u)); }
.pilar-card:nth-child(3) p { right: calc(26 * var(--u)); }
.pilar-card p {
	margin: 0;
	position: absolute;
	left: calc(33 * var(--u));
	right: calc(42 * var(--u));
	top: calc(259 * var(--u));
	color: #2c2b33;
	font-weight: 400;
	font-size: calc(22 * var(--u));
	line-height: calc(25 * var(--u));
}
.pilar-saiba {
	position: absolute;
	left: calc(37 * var(--u));
	bottom: calc(52 * var(--u));
	width: calc(281 * var(--u));
}

/* painel expandido de um pilar */
.painel-titulo {
	margin: 0;
	padding-top: calc(100 * var(--u));
	text-align: center;
	color: var(--amarelo);
	font-size: calc(64 * var(--u));
	font-weight: 600;
	letter-spacing: calc(2 * var(--u));
}
.painel-migalha {
	margin: calc(18 * var(--u)) 0 0;
	text-align: center;
	color: #fff;
	font-size: calc(16 * var(--u));
	letter-spacing: calc(1 * var(--u));
	text-transform: uppercase;
}
.painel-migalha strong { font-weight: 700; }
.painel-voltar {
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}
.painel-voltar:hover { text-decoration: underline; }
.painel-migalha-raiz { letter-spacing: inherit; }
.painel-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(345 * var(--u));
	display: flex;
	gap: calc(74 * var(--u));
}
.painel-card {
	position: relative;
	width: calc(400 * var(--u));
	height: calc(560 * var(--u));
	background: #fff;
	border-radius: calc(44 * var(--u));
}
.painel-foto { position: absolute; left: calc(129 * var(--u)); top: calc(-70 * var(--u)); width: calc(238 * var(--u)); height: auto; }
.painel-foto > img { display: block; width: 100%; height: auto; }
.painel-card h3 {
	/* ancorado pela BASE, como no design: o titulo de 3 linhas cresce pra
	   cima em vez de invadir o texto (conferido no 2_links.pdf, onde os
	   tres paragrafos comecam na mesma altura e so o titulo sobe). */
	margin: 0;
	position: absolute;
	left: calc(28 * var(--u));
	bottom: calc(298 * var(--u));
	color: var(--escuro);
	font-size: calc(27 * var(--u));
	line-height: calc(31 * var(--u));
	font-weight: 700;
	letter-spacing: calc(0.5 * var(--u));
	text-transform: uppercase;
}
.painel-card p {
	margin: 0;
	position: absolute;
	left: calc(28 * var(--u));
	right: calc(24 * var(--u));
	top: calc(278 * var(--u));
	color: #3a3942;
	font-weight: 400;
	font-size: calc(19 * var(--u));
	line-height: calc(26 * var(--u));
}
.painel-cta {
	position: absolute;
	left: calc(16 * var(--u));
	bottom: calc(30 * var(--u));
	width: calc(368 * var(--u));
}

/* ------------------- como colocamos ------------------- */
.como {
	position: relative;
	height: calc(1251 * var(--u));
	background: linear-gradient(180deg, #ffffff 0%, #fffafa 46%, #fef4f4 100%);
	overflow: hidden;
}
.como-conteudo { position: absolute; inset: 0; z-index: 2; }
.como h2 {
	margin: 0;
	position: absolute;
	left: calc(212 * var(--u));
	top: calc(151 * var(--u));
	color: var(--magenta);
	font-size: calc(70 * var(--u));
	line-height: calc(80 * var(--u));
	font-weight: 400;
	letter-spacing: calc(1 * var(--u));
}
.como h2 span { display: block; }
.como h2 strong { font-weight: 600; }
.como .dash-laranja { position: absolute; left: calc(212 * var(--u)); top: calc(556 * var(--u)); margin: 0; }
.como-cta {
	position: absolute;
	left: calc(212 * var(--u));
	top: calc(651 * var(--u));
}
.como-dots {
	/* mesma grade do hero, recolorida: aqui o design usa laranja */
	position: absolute;
	left: calc(291 * var(--u));
	top: calc(870 * var(--u));
	width: calc(159.22 * var(--u));
	height: calc(143.94 * var(--u));
	background: #ff8600;
	-webkit-mask: url('../img/hero-dots.svg') no-repeat center / 100% 100%;
	mask: url('../img/hero-dots.svg') no-repeat center / 100% 100%;
}

.como-figura { position: absolute; inset: 0; }
.como-anel {
	position: absolute;
	left: calc(945 * var(--u));
	top: calc(209 * var(--u));
	width: calc(926 * var(--u));
	height: calc(926 * var(--u));
	border: calc(101 * var(--u)) solid #fc6e02;
	border-radius: 50%;
}
.como-pontilhado {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: calc(1920 * var(--u));
	height: calc(1251 * var(--u));
}
.como-homem {
	position: absolute;
	left: calc(1004 * var(--u));
	bottom: 0;
	width: calc(708 * var(--u));
	height: auto;
}
.como-ic { position: absolute; }
.como-ic-chat { left: calc(1088 * var(--u)); top: calc(178 * var(--u)); width: calc(67 * var(--u)); }
.como-ic-pasta { left: calc(1103 * var(--u)); top: calc(623 * var(--u)); width: calc(66 * var(--u)); }
.como-ic-rede { left: calc(1655 * var(--u)); top: calc(605 * var(--u)); width: calc(81 * var(--u)); }


/* ------------------- solucoes (carrossel) ------------------- */
.solucoes { position: relative; height: calc(1090 * var(--u)); background: #fff; }
.solucoes-dots { left: calc(202 * var(--u)); top: calc(62 * var(--u)); }
.solucoes .eyebrow { padding-top: calc(80 * var(--u)); }
.solucoes .titulo-secao { margin-top: calc(10 * var(--u)); }
.solucoes .dash-escuro { position: absolute; left: calc(648 * var(--u)); top: calc(208 * var(--u)); }
.carrossel-nav { position: absolute; right: calc(166 * var(--u)); top: calc(135 * var(--u)); display: flex; gap: calc(46 * var(--u)); }
.cnav {
	width: calc(64 * var(--u));
	height: calc(64 * var(--u));
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform .2s ease;
}
.cnav:hover { transform: scale(1.06); }
.cnav .seta-reta { display: block; width: calc(26 * var(--u)); height: auto; }
.cnav-prev { background: #fff; border: calc(2 * var(--u)) solid var(--escuro); transition: background .25s ease, border-color .25s ease, color .25s ease; }
.cnav-prev.is-clicada { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.cnav-prev { color: var(--escuro); }
.cnav-prev .seta-reta { transform: scaleX(-1); }
.cnav-next { background: var(--magenta); border: 0; }
.cnav-next { color: #fff; }
.carrossel {
	position: absolute;
	left: 0; right: 0;
	top: calc(277 * var(--u));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	padding-bottom: calc(20 * var(--u));
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel.is-arrastando { cursor: grabbing; scroll-snap-type: none; }
.carrossel-trilho {
	list-style: none;
	margin: 0;
	padding: 0 calc(106 * var(--u));
	display: flex;
	gap: calc(51 * var(--u));
	width: max-content;
}
.scard {
	position: relative;
	width: calc(385 * var(--u));
	height: calc(612 * var(--u));
	border-radius: calc(20 * var(--u));
	background: var(--cinza-card);
	scroll-snap-align: start;
	scroll-margin-left: calc(106 * var(--u));
	overflow: hidden;
	cursor: pointer;
}
/* Virada do card: as duas faces ficam sobrepostas e giram no eixo Y.
   A face de tras nao pinta (backface-visibility), entao a troca e limpa. */
.scard { perspective: calc(1400 * var(--u)); }
.scard-frente, .scard-verso {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .55s cubic-bezier(.25, .8, .25, 1);
}
.scard-frente { transform: rotateY(0deg); }
.scard-verso { transform: rotateY(-180deg); }
.scard.is-virado .scard-frente { transform: rotateY(180deg); }
.scard.is-virado .scard-verso { transform: rotateY(0deg); }
@media (prefers-reduced-motion: reduce) {
	.scard-frente, .scard-verso { transition: none; }
}
.scard-foto { position: absolute; left: 0; right: 0; top: 0; height: calc(257 * var(--u)); }
.scard-foto > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; }
.scard-icone {
	/* o arquivo do designer ja vem com o circulo: aqui e so a imagem */
	position: absolute;
	left: calc(270 * var(--u));
	top: calc(208 * var(--u));
	width: calc(97 * var(--u));
	height: calc(97 * var(--u));
}
.scard-icone img { width: 100%; height: 100%; display: block; }
.scard h3 {
	margin: 0;
	position: absolute;
	left: calc(26 * var(--u));
	top: calc(279 * var(--u));
	color: var(--escuro);
	font-size: calc(28 * var(--u));
	line-height: calc(34 * var(--u));
	font-weight: 600;
	letter-spacing: calc(0.5 * var(--u));
	text-transform: uppercase;
}
.scard-frente p {
	margin: 0;
	position: absolute;
	left: calc(26 * var(--u));
	right: calc(46 * var(--u));
	top: calc(372 * var(--u));
	color: var(--texto-card);
	font-weight: 400;
	font-size: calc(20 * var(--u));
	line-height: calc(25 * var(--u));
}
/* tres cards tem texto mais longo que o resto e encostavam no VEJA MAIS
   (o card tem altura fixa por causa do carrossel): o paragrafo deles sobe */
.scard-consultoria-especializada .scard-frente p,
.scard-fabrica-conteudos .scard-frente p { top: calc(354 * var(--u)); }
.scard-acessibilidade .scard-frente p { top: calc(330 * var(--u)); }

.scard-veja {
	position: absolute;
	right: calc(24 * var(--u));
	bottom: calc(22 * var(--u));
	display: inline-flex;
	align-items: center;
	gap: calc(16 * var(--u));
	color: var(--magenta);
	font-weight: 600;
	font-size: calc(18 * var(--u));
	letter-spacing: calc(1 * var(--u));
	text-transform: uppercase;
}
.scard-verso {
	background: var(--cinza-card);
	border-radius: calc(20 * var(--u));
	padding: calc(26 * var(--u));
	display: flex;
	flex-direction: column;
	height: 100%;
}
.scard-verso-topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(14 * var(--u));
}
.scard-verso h3 {
	position: static;
	margin: 0;
	color: var(--magenta);
	max-width: calc(230 * var(--u));
}
.scard-verso-icone {
	flex: none;
	width: calc(62 * var(--u));
	height: calc(62 * var(--u));
}
.scard-verso-icone img { width: 100%; height: 100%; display: block; }
.scard-verso ul {
	list-style: none;
	margin: calc(20 * var(--u)) 0 0;
	padding: 0 calc(6 * var(--u)) 0 0;
	flex: 1;
	overflow-y: auto;
	color: var(--texto-card);
	font-weight: 400;
	font-size: calc(17 * var(--u));
	line-height: calc(24 * var(--u));
	scrollbar-width: thin;
	scrollbar-color: var(--magenta) #e2e2e2;
}
/* barra de rolagem das caixas de texto: fina, sem vao entre o rosa e o
   trilho cinza (o padrao do sistema deixava aquele ar de janela antiga) */
.rolavel { scrollbar-width: thin; scrollbar-color: var(--magenta) #e6e6e6; }
.rolavel::-webkit-scrollbar { width: calc(6 * var(--u)); }
.rolavel::-webkit-scrollbar-track { background: #e6e6e6; border-radius: 999px; }
.rolavel::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 999px; border: 0; }
.scard-verso ul::-webkit-scrollbar { width: calc(6 * var(--u)); }
.scard-verso ul::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 999px; }
.scard-verso li {
	display: flex;
	align-items: flex-start;
	gap: calc(10 * var(--u));
	margin-bottom: calc(9 * var(--u));
}
.scard-verso li .check {
	flex: none;
	width: calc(17 * var(--u));
	height: calc(17 * var(--u));
	margin-top: calc(3 * var(--u));
	color: var(--magenta);
}
.scard-voltar {
	align-self: flex-end;
	margin-top: calc(14 * var(--u));
	color: var(--magenta);
	font-weight: 700;
	font-size: calc(18 * var(--u));
	letter-spacing: calc(1 * var(--u));
}
.solucoes-cta {
	/* centralizado por margem, nao por transform: o hover do .pill-grad usa
	   transform e antes disputava com o translateX, fazendo o botao pular
	   de um lado pro outro sem parar. */
	position: absolute;
	left: calc(50% - 209 * var(--u));
	top: calc(945 * var(--u));
}

/* ------------------- cases ------------------- */
.cases { position: relative; height: calc(990 * var(--u)); background: #fff; }
.cases-dots { left: calc(225 * var(--u)); top: calc(92 * var(--u)); }
.cases .eyebrow { padding-top: calc(152 * var(--u)); }
.cases .titulo-secao { margin-top: calc(8 * var(--u)); }
.cases .dash-escuro { position: absolute; left: calc(568 * var(--u)); top: calc(278 * var(--u)); }
.cases-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: calc(126 * var(--u));
	top: calc(357 * var(--u));
	display: flex;
	gap: calc(44 * var(--u));
}
.case-card {
	position: relative;
	width: calc(384 * var(--u));
	height: calc(430 * var(--u));
	border-radius: calc(20 * var(--u));
	background: var(--cinza-card);
	overflow: hidden;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease;
}
.case-card:hover { transform: translateY(calc(-6 * var(--u))); }
.case-topo { display: block; width: 100%; height: calc(160 * var(--u)); object-fit: cover; }
.case-corpo { position: relative; height: calc(270 * var(--u)); }
.case-corpo h3 {
	margin: 0;
	position: absolute;
	left: calc(34 * var(--u));
	top: calc(40 * var(--u));
	color: var(--escuro);
	font-size: calc(32 * var(--u));
	font-weight: 600;
	letter-spacing: calc(0.5 * var(--u));
	text-transform: uppercase;
}
.case-corpo p {
	margin: 0;
	position: absolute;
	left: calc(34 * var(--u));
	right: calc(90 * var(--u));
	top: calc(96 * var(--u));
	color: #3a3942;
	font-weight: 400;
	font-size: calc(22 * var(--u));
	line-height: calc(30 * var(--u));
}
.case-seta { position: absolute; right: calc(22 * var(--u)); bottom: calc(20 * var(--u)); }
/* deitada parada; no hover do card ela vira diagonal, apontando pra cima */
.case-seta .seta-reta { transition: transform .35s ease; }
.case-card:hover .case-seta .seta-reta { transform: rotate(-45deg); }

/* ------------------- clientes / marquee ------------------- */
.clientes {
	/* z-index porque o marquee tem 249 de altura a partir de 266, ou seja,
	   ultrapassa a secao em 58px: sem isso a secao seguinte cobria a linha
	   de baixo, que aparecia so no mobile. */
	position: relative;
	z-index: 2;
	height: calc(457 * var(--u));
	background: #fff;
}
.clientes-dots { left: calc(160 * var(--u)); top: calc(-10 * var(--u)); }
.clientes .eyebrow { padding-top: calc(47 * var(--u)); }
.clientes .titulo-secao { margin-top: calc(6 * var(--u)); font-size: calc(70 * var(--u)); }
.clientes .dash-escuro { position: absolute; left: calc(500 * var(--u)); top: calc(171 * var(--u)); }
.marquee {
	position: absolute;
	left: 0; right: 0;
	top: calc(266 * var(--u));
	height: calc(249 * var(--u));
	border-top: 1px solid #e9096d;
	border-bottom: 1px solid #e9096d;
	overflow: hidden;
	display: flex;
	align-items: center;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-trilho {
	display: flex;
	align-items: center;
	flex: none;
	gap: calc(130 * var(--u));
	padding-right: calc(130 * var(--u));
	width: max-content;
	animation: marquee 21.5s linear infinite;   /* 30% mais rapido que os 28s iniciais */
}
.marquee:hover .marquee-trilho { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-trilho { animation: none; } }
.marquee-trilho img { height: auto; }
.marquee-trilho img:nth-child(5n+1) { width: calc(232 * var(--u)); }
.marquee-trilho img:nth-child(5n+2) { width: calc(170 * var(--u)); }
.marquee-trilho img:nth-child(5n+3) { width: calc(144 * var(--u)); }
.marquee-trilho img:nth-child(5n+4) { width: calc(206 * var(--u)); }
.marquee-trilho img:nth-child(5n+5) { width: calc(112 * var(--u)); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------- quem somos ------------------- */
.quem {
	/* sem overflow hidden: no design o circulo da foto passa 86px do fim da
	   secao, e o corte deixava a base dele reta. */
	position: relative;
	height: calc(1203 * var(--u));
	background: #fff;
}
.quem-conteudo { position: absolute; left: calc(280 * var(--u)); width: calc(560 * var(--u)); top: 0; }
.quem .titulo-secao { text-align: left; margin-top: calc(382 * var(--u)); }
.quem .dash-escuro { margin-top: calc(11 * var(--u)); }
.quem-texto {
	margin-top: calc(62 * var(--u));
	height: calc(355 * var(--u));
	padding-right: calc(90 * var(--u));
	color: #121021;
	font-weight: 400;
	font-size: calc(22 * var(--u));
	line-height: calc(30 * var(--u));
}
.quem-texto p { margin: 0 0 calc(26 * var(--u)); }
/* o texto rola: a borda de baixo esmaece para isso ficar obvio, e some
   quando chega no fim (classe posta pelo JS) */
.quem-texto {
	mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
	transition: -webkit-mask-image .2s ease;
}
.quem-texto.is-fim,
.fund-texto.is-fim {
	mask-image: none;
	-webkit-mask-image: none;
}
.fund-texto {
	mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
}
.quem-cta {
	margin-top: calc(41 * var(--u));
}
.quem-foto {
	position: absolute;
	left: calc(918 * var(--u));
	top: calc(121 * var(--u));
	width: calc(999 * var(--u));
	height: auto;
	z-index: 3;   /* passa por cima da secao seguinte, senao a base some */
}

/* ------------------- fundadoras ------------------- */
.fundadoras { position: relative; height: calc(1440 * var(--u)); background: #fff; overflow: hidden; }
.fund-circulo {
	position: absolute;
	left: calc(-371 * var(--u));
	top: calc(6 * var(--u));
	width: calc(1154 * var(--u));
	height: calc(1154 * var(--u));
	border-radius: 50%;
	background: #fdb61a;
}
.fund-sofa {
	/* posicao e escala achadas por sobreposicao de silhueta contra o PDF
	   (IoU 0,955) com a foto na orientacao certa */
	position: absolute;
	left: 0;
	top: auto;
	bottom: 0;          /* base colada na faixa rosa da secao seguinte */
	width: calc(1235 * var(--u));
	height: auto;
	pointer-events: none;
}
.fund-conteudo { position: absolute; left: calc(940 * var(--u)); top: 0; width: calc(620 * var(--u)); }
.fundadoras h2 {
	margin: 0;
	margin-top: calc(252 * var(--u));
	font-size: calc(70 * var(--u));
	line-height: calc(70 * var(--u));
	letter-spacing: calc(1 * var(--u));
	font-weight: 400;
}
.fundadoras .linha-magenta { font-weight: 600; }
.fundadoras .dash-magenta { margin-top: calc(10 * var(--u)); }
.fund-bio { margin-top: calc(58 * var(--u)); }
.fund-topo {
	position: relative;
	display: block;
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
}
.fund-nome { display: block; color: var(--escuro); font-size: calc(40 * var(--u)); font-weight: 500; transition: color .25s ease; }
.fund-bio.is-aberta .fund-nome { color: var(--magenta); }
.fund-bio.is-aberta .fund-seta { color: var(--magenta); }
.fund-cargo { display: block; margin-top: calc(4 * var(--u)); color: #2c2b33; font-size: calc(23 * var(--u)); font-weight: 400; }
.fund-seta {
	position: absolute;
	right: calc(84 * var(--u));
	top: calc(10 * var(--u));
	width: calc(34 * var(--u));
	transition: transform .35s ease;
}
.fund-bio.is-aberta .fund-seta { transform: rotate(45deg); }
.fund-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22,.68,.18,1); }
.fund-corpo .rolavel { opacity: 0; transition: opacity .3s ease .12s; }
.fund-bio.is-aberta .fund-corpo .rolavel { opacity: 1; }
.fund-corpo-inner { overflow: hidden; }
.fund-bio.is-aberta .fund-corpo { grid-template-rows: 1fr; }
.fund-texto {
	margin-top: calc(20 * var(--u));
	max-height: calc(320 * var(--u));
	padding-right: calc(56 * var(--u));
	color: var(--texto-card);
	font-weight: 400;
	font-size: calc(22 * var(--u));
	line-height: calc(30 * var(--u));
}
.fund-texto p { margin: 0 0 calc(18 * var(--u)); }

/* ------------------- contato ------------------- */
.contato { position: relative; height: calc(1077 * var(--u)); overflow: hidden; background: #d6045f; }
.contato-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contato-foto { display: none; }
.contato-icones { position: absolute; left: calc(535 * var(--u)); top: calc(122 * var(--u)); width: calc(187 * var(--u)); }
.contato-chat { position: absolute; left: calc(1598 * var(--u)); top: calc(240 * var(--u)); width: calc(130 * var(--u)); height: auto; }
.contato-conteudo { position: absolute; left: calc(278 * var(--u)); top: 0; width: calc(530 * var(--u)); z-index: 2; }
.contato h2 {
	margin: 0;
	margin-top: calc(218 * var(--u));
	color: #fff;
	font-size: calc(70 * var(--u));
	line-height: calc(82 * var(--u));
	font-weight: 400;
	letter-spacing: calc(1.5 * var(--u));
}
.contato h2 strong { font-weight: 600; }
.contato-dash {
	display: block;
	margin-top: calc(4 * var(--u));   /* 25px abaixo da base das letras */
	width: calc(81 * var(--u));
	height: calc(6 * var(--u));
	background: #fff;
}
.contato-conteudo p {
	margin: calc(34 * var(--u)) 0 0;
	color: #fff;
	font-weight: 400;
	font-size: calc(30 * var(--u));
	line-height: calc(30 * var(--u));
	max-width: calc(470 * var(--u));
}
.contato-cta {
	margin-top: calc(56 * var(--u));
	background: #fff;
	color: var(--rosa);
}
.contato-cta:hover { transform: translateY(calc(-3 * var(--u))); }
.contato-cta .pill-circulo { background: var(--rosa); color: #fff; }

/* ------------------- rodape ------------------- */

/* ------------------- modal aviso ------------------- */
.aviso-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(18,16,33,.8);
	display: grid;
	place-items: center;
	padding: 24px;
}
.aviso-modal[hidden] { display: none; }
.aviso-caixa {
	position: relative;
	width: min(560px, 94vw);
	max-height: 92vh;
	max-height: 92dvh;   /* dvh desconta a barra do navegador no celular */
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: 24px;
	padding: 28px 20px;
}
@media (max-width: 619px) {
	.aviso-modal { padding: 14px; }
	.aviso-titulo { font-size: 22px; }
	.aviso-texto { font-size: 15px; line-height: 1.55; }
	.aviso-fechar { right: 8px; top: 4px; font-size: 34px; padding: 4px 10px; }
}
@media (min-width: 620px) { .aviso-caixa { width: min(640px, 94vw); padding: 40px 44px; } }
.aviso-titulo { margin: 0 0 10px; color: var(--magenta); font-size: 26px; }
.aviso-texto { margin: 0; color: #3a3942; font-size: 16px; line-height: 1.6; }
.aviso-fechar { position: absolute; right: 12px; top: 8px; border: 0; background: none; font-size: 30px; color: #888; cursor: pointer; }

/* ============================================================
   Mobile das secoes 3-10 (carrossel em tudo que e horizontal,
   decisao da reuniao de 13/07: nunca empilhar)
   ============================================================ */
@media (max-width: 819px) {
	.pilares { padding: 0 14px; }
	.pilares-bloco { min-height: 0; border-radius: 28px; padding-bottom: 30px; }
	.pilares-dots { display: none; }
	.pilares-home h2 { padding-top: 40px; font-size: 25px; line-height: 36px; padding-left: 18px; padding-right: 18px; }
	/* cartao em fluxo: a altura vem do conteudo. A foto sobe pra fora do
	   cartao, entao o trilho precisa de padding-top ou ela sai cortada. */
	.pilares-grid {
		position: static;
		left: auto; top: auto;
		margin: 24px 0 0;
		padding: 60px 20px 8px;
		display: flex;
		align-items: stretch;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.pilares-grid::-webkit-scrollbar { display: none; }
	.pilar-card {
		flex: none;
		width: 266px;
		height: auto;
		scroll-snap-align: center;
		border-radius: 24px;
		padding: 0 20px 20px;
		display: flex;
		flex-direction: column;
	}
	.pilar-foto { position: static; display: block; width: 148px; height: auto; margin: -44px 0 0 auto; }
	.pilar-card h3 { position: static; left: auto; top: auto; margin-top: 12px; font-size: 21px; line-height: 24px; }
	.pilar-card h3 strong:only-child { top: 0; }
	.pilar-card p { position: static; left: auto; right: auto; top: auto; margin: 10px 0 18px; font-size: 14.5px; line-height: 20px; }
	/* margin-top:auto encosta o botao na base: com os cartoes empatados em
	   altura, todos ficam na mesma linha */
	.pilar-saiba { position: static; left: auto; right: auto; bottom: auto; width: auto; align-self: flex-start; margin-top: auto; }
	.painel-titulo { padding-top: 46px; font-size: 30px; letter-spacing: 1px; }
	.painel-migalha { font-size: 12px; padding: 0 12px; }
	.painel-grid {
		position: static;
		left: auto; top: auto;
		transform: none;
		margin: 22px 0 0;
		padding: 60px 20px 8px;
		display: flex;
		align-items: stretch;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		gap: 14px;
	}
	.painel-grid::-webkit-scrollbar { display: none; }
	.painel-card {
		flex: none;
		width: 266px;
		height: auto;
		scroll-snap-align: center;
		border-radius: 24px;
		padding: 0 20px 20px;
		display: flex;
		flex-direction: column;
	}
	.painel-foto { position: static; display: block; width: 148px; height: auto; margin: -44px 0 0 auto; }
	.painel-card h3 { position: static; left: auto; right: auto; top: auto; bottom: auto; margin-top: 12px; font-size: 19px; line-height: 23px; }
	.painel-card p { position: static; left: auto; right: auto; top: auto; margin: 10px 0 18px; font-size: 14.5px; line-height: 20px; }
	.painel-cta { position: static; left: auto; right: auto; bottom: auto; width: auto; align-self: flex-start; margin-top: auto; }

	.como { height: auto; padding: 40px 0 0; }
	.como-conteudo { position: static; padding: 0 24px; }
	.como h2 { position: static; font-size: 30px; line-height: 37px; }
	.como h2 .br-desk { display: none; }   /* no mobile a quebra e por span */
	.como .dash-laranja { position: static; display: block; margin-top: 18px; }
	.como-cta { position: relative; left: auto; top: auto; margin-top: 24px; width: auto; min-width: 0; }
	.como-dots { display: none; }
	.como-figura { position: relative; height: 380px; margin-top: 10px; }
	.como-anel { left: 50%; top: 26px; transform: translateX(-50%); width: 300px; height: 300px; border-width: 24px; }
	.como-pontilhado { display: none; }
	.como-homem { left: 50%; top: auto; bottom: 0; transform: translateX(-46%); width: 300px; }
	.como-ic-chat { left: 6%; top: 26px; width: 50px; }
	.como-ic-pasta { left: 4%; top: 186px; width: 50px; }
	.como-ic-rede { right: 3%; left: auto; top: 132px; width: 56px; }
			
	.solucoes { height: auto; padding-bottom: 0; }
	.solucoes-dots, .cases-dots, .clientes-dots { display: none; }
	.solucoes .eyebrow { padding: 40px 24px 0; font-size: 14px; }
	.titulo-secao { font-size: 28px; letter-spacing: .4px; }
	.solucoes .dash-escuro { position: static; margin: 14px auto 0; }
	.carrossel-nav { position: static; justify-content: center; margin-top: 20px; gap: 22px; }
	.cnav { width: 48px; height: 48px; }
	.carrossel { position: static; margin-top: 24px; }
	.carrossel-trilho { padding: 0 24px; gap: 20px; }
	.scard { width: 320px; height: 560px; scroll-margin-left: 24px; }
	.scard-foto { height: 214px; }
	.scard-icone { left: 221px; top: 172px; width: 80px; height: 80px; }
	.scard h3 { left: 22px; top: 250px; font-size: 24px; line-height: 28px; }
	.scard-frente p { left: 22px; right: 18px; top: 320px; font-size: 17px; line-height: 24px; }
	.scard-veja { right: 20px; bottom: 18px; font-size: 17px; gap: 12px; }
	.circ-mag { width: 38px; height: 38px; }
	.circ-mag .seta-reta { width: 15px; }
	.scard-verso { padding: 20px; }
	.scard-verso ul { font-size: 15px; line-height: 21px; }
	/* left/top vem do desktop e voltam a valer com position:relative:
	   sem zerar, o botao some do lugar e deixa um buraco no fluxo */
	/* fit-content: display:flex sozinho deixaria o botao com a largura toda */
	.solucoes-cta { position: relative; left: auto; top: auto; transform: none; display: flex; width: fit-content; margin: 34px auto 0; }

	.cases { height: auto; padding-bottom: 0; }
	.cases .eyebrow { padding: 40px 24px 0; font-size: 14px; }
	.cases .dash-escuro { position: static; margin: 14px auto 0; }
	.cases-grid {
		position: static;
		margin: 34px 0 0;
		padding: 0 24px 10px;
		align-items: stretch;   /* cartoes empatados: a seta cai na mesma linha */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 20px;
	}
	.cases-grid::-webkit-scrollbar { display: none; }
	/* em fluxo: a altura vem do texto, e todos os cartoes empatam pelo
	   align-items:stretch do trilho, sem os 380px fixos que sobravam */
	.case-card { flex: none; width: 272px; height: auto; scroll-snap-align: center; display: flex; flex-direction: column; }
	.case-topo { height: 112px; }
	.case-corpo { position: static; height: auto; flex: 1; display: flex; flex-direction: column; padding: 18px 18px 16px; }
	.case-corpo h3 { position: static; left: auto; top: auto; font-size: 18px; line-height: 22px; }
	/* a folga minima ate a seta vem daqui: um seletor mais especifico
	   mexendo em margin-top da seta anularia o margin-top:auto dela */
	.case-corpo p { position: static; left: auto; right: auto; top: auto; margin: 8px 0 14px; font-size: 14px; line-height: 20px; }
	/* margin-top:auto joga a seta para a base, igual em todos os cartoes */
	.case-seta { position: static; right: auto; bottom: auto; margin: auto 0 0 auto; width: 36px; height: 36px; }
	.case-seta .seta-reta { width: 15px; }

	.clientes { height: auto; padding-bottom: 0; }
	.clientes .eyebrow { padding: 40px 24px 0; font-size: 14px; }
	.clientes .titulo-secao { font-size: 27px; padding: 0 24px; }
	/* o tracinho vinha posicionado em 500px do desktop e ficava fora da tela */
	.clientes .dash-escuro { position: static; margin: 16px auto 0; width: 64px; }
	.marquee { position: static; margin-top: 28px; height: 120px; }
	.marquee-trilho { gap: 64px; padding-right: 64px; }
	/* :nth-child(n) so para empatar a especificidade das larguras do desktop */
	.marquee-trilho img:nth-child(n) { width: auto; height: 44px; }

	.quem { height: auto; overflow: visible; }
	.quem-conteudo { position: static; width: auto; padding: 0 24px; }
	.quem .titulo-secao { margin-top: 40px; text-align: left; }
	.quem .dash-escuro { margin: 16px 0 0; }
	.quem-texto { margin-top: 30px; height: 300px; font-size: 16.5px; line-height: 25px; padding-right: 18px; }
	.quem-cta { margin-top: 26px; width: auto; }
	/* o pai e a secao inteira, sem padding: basta empurrar para a direita */
	.quem-foto { position: static; display: block; width: min(100%, 430px); margin: 34px 0 0 auto; }

	.fundadoras { height: auto; overflow: hidden; padding-bottom: 0; }
	/* menor e ancorada na base: antes ela subia por cima dos nomes e
	   se mexia toda vez que uma bio abria */
	.fund-circulo { left: -90px; top: auto; bottom: -40px; width: 360px; height: 360px; z-index: 0; }
	.fund-sofa { position: relative; display: block; left: auto; top: auto; bottom: auto; width: 100%; max-width: 560px; margin: 34px auto 0; order: 3; z-index: 1; }
	.fund-conteudo { position: relative; left: auto; top: auto; z-index: 2; width: auto; padding: 0 24px; }
	.fundadoras h2 { margin-top: 40px; font-size: 30px; line-height: 36px; }
	.fund-bio { margin-top: 34px; }
	.fund-nome { font-size: 24px; }
	.fund-cargo { font-size: 16px; }
	.fund-seta { right: 4px; width: 24px; }
	.fund-texto { max-height: 290px; font-size: 16px; line-height: 24px; padding-right: 16px; }

	.fundadoras { display: flex; flex-direction: column; }
	.fund-circulo { position: absolute; }

	.contato {
		/* a figura entra como bloco proprio depois do texto: por cima dela o
		   texto ficava ilegivel em tela estreita */
		height: auto;
		padding-bottom: 0;
		background: #db075e;   /* mesma cor do topo da arte: emenda invisivel */
	}
	.contato-foto {
		display: block;
		width: 100%;
		margin-top: 26px;
		aspect-ratio: 900 / 1133;
		background: url('../img/contato-foto-mobile.webp') no-repeat bottom center / 100% auto;
	}
	.contato-bg { display: none; }      /* a arte do desktop nao serve aqui */
	.contato-icones { display: none; }  /* sem os icones amarelos no mobile */
	.contato-chat { top: 30px; right: 14px; left: auto; width: 72px; }
	/* relative + z-index: .contato-bg e posicionado e cobriria conteudo estatico */
	.contato-conteudo { position: relative; left: auto; top: auto; z-index: 2; width: auto; padding: 40px 24px 0; }
	.contato h2 { margin-top: 0; font-size: 30px; line-height: 37px; }
	.contato-dash { margin-top: 18px; width: 64px; }
	.contato-conteudo p { font-size: 16.5px; line-height: 25px; max-width: 430px; }
	.contato-cta { margin-top: 26px; }

}

/* ============================================================
   Pagina Portfolio
   ============================================================ */
.menu-rosa .menu-pill { background: var(--rosa); }
.menu-rosa .menu-nav a { color: #fff; }
.menu-rosa .menu-nav a:hover { color: var(--amarelo); }
.menu-rosa .menu-busca { background: #fff; }
.menu-rosa .menu-cta { background: #fff; color: var(--rosa); }
.menu-rosa .menu-burger span { background: #fff; }

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

.pf-capa {
	/* fundo pronto (arte + foto ja compostas pelo designer) */
	position: relative;
	height: calc(952 * var(--u));
	background: #fff url('../img/pf/bg-topo-desk.webp') no-repeat top center / cover;
	overflow: hidden;
}
.pf-dots {
	/* grade do designer (mesma forma vazada do resto do site, na cor vinho) */
	position: absolute;
	left: calc(88 * var(--u));
	top: calc(24 * var(--u));
	width: calc(89 * var(--u));
	height: calc(80.5 * var(--u));
	background: url('../img/pf/dots-portfolio.svg') no-repeat center / 100% 100%;
}
.pf-capa-conteudo { position: absolute; left: calc(100 * var(--u)); top: 0; width: calc(800 * var(--u)); z-index: 2; }
.pf-capa h1 {
	margin: 0;
	margin-top: calc(180 * var(--u));
	font-size: calc(66 * var(--u));
	line-height: calc(77 * var(--u));
	font-weight: 400;
	letter-spacing: calc(1 * var(--u));
}
.pf-capa h1 .linha-escura { display: block; color: var(--escuro); }
.pf-capa h1 .linha-magenta { display: block; color: var(--magenta); font-weight: 700; }
.pf-capa .dash-escuro { margin-top: calc(3 * var(--u)); }
.pf-capa-conteudo > p {
	margin: calc(36 * var(--u)) 0 0;
	color: #2c2b33;
	font-weight: 400;
	font-size: calc(25 * var(--u));
	line-height: calc(35 * var(--u));
	max-width: calc(750 * var(--u));
}
.pf-seletor {
	margin-top: calc(52 * var(--u));
	display: flex;
	align-items: center;
	gap: calc(24 * var(--u));
	width: calc(800 * var(--u));
}
.pf-selnav {
	flex: none;
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	border: 0;
	border-radius: 50%;
	background: var(--magenta);
	display: grid;
	place-items: center;
	cursor: pointer;
}
.pf-selnav { color: #fff; }
.pf-selnav .seta-reta { display: block; width: calc(20 * var(--u)); height: auto; }
.pf-selprev .seta-reta { transform: scaleX(-1); }
.pf-seltrilho {
	width: calc(640 * var(--u));
	display: flex;
	align-items: flex-start;
	gap: calc(16 * var(--u));
	scroll-behavior: smooth;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}
.pf-seltrilho::-webkit-scrollbar { display: none; }
.pf-selitem {
	flex: none;
	width: calc(196 * var(--u));
	text-align: center;
	text-decoration: none;
	scroll-snap-align: start;
}
.pf-selitem img, .pf-selcirc {
	display: block;
	width: calc(84 * var(--u));
	height: calc(84 * var(--u));
	margin: 0 auto;
	border-radius: 50%;
}
.pf-selcirc {
	background: radial-gradient(circle at 30% 25%, #fbd4e4, #f5a8c8);
	display: grid;
	place-items: center;
	color: var(--magenta);
	font-size: calc(34 * var(--u));
	font-weight: 700;
}
.pf-sellabel {
	display: block;
	margin-top: calc(14 * var(--u));
	padding: 0 calc(6 * var(--u));
	min-height: calc(52 * var(--u));
	color: var(--escuro);
	font-size: calc(17 * var(--u));
	font-weight: 600;
	line-height: calc(22 * var(--u));
	text-wrap: balance;
	text-transform: uppercase;
}
.pf-selitem:hover .pf-sellabel { color: var(--magenta); }
.pf-palavras {
	position: absolute;
	left: calc(100 * var(--u));
	top: calc(848 * var(--u));
	width: calc(880 * var(--u));
	margin: 0;
	color: var(--escuro);
	font-size: calc(18 * var(--u));
	letter-spacing: calc(0.1 * var(--u));
	line-height: calc(30 * var(--u));
	text-transform: uppercase;
}
.pf-palavras a { color: inherit; text-decoration: none; }
.pf-palavras a:hover { color: var(--magenta); font-weight: 700; }
.pf-palavras span { color: var(--magenta); padding: 0 calc(6 * var(--u)); }

.pf-banda {
	/* o texto e HTML; a figura (homem + circulo) e imagem, e o fundo e cor */
	position: relative;
	height: calc(1070 * var(--u));
	background: #e70461 url('../img/pf/banda-bg.webp') no-repeat center / cover;
	overflow: hidden;
}
.pf-banda-texto { position: absolute; left: calc(1044 * var(--u)); top: calc(196 * var(--u)); }
.pf-banda-texto h2 {
	margin: 0;
	color: #fff;
	font-size: calc(64 * var(--u));
	line-height: calc(74 * var(--u));
	font-weight: 400;
	letter-spacing: calc(0.5 * var(--u));
}
.pf-banda-texto .linha-clara { display: block; color: var(--escuro); }
.pf-banda-texto strong { display: block; font-weight: 600; }
.pf-banda-texto .contato-dash { margin-top: calc(4 * var(--u)); }
@media (max-width: 819px) {
	.pf-banda { height: auto; padding: 40px 24px 0; }
	.pf-banda-texto { position: static; }
	.pf-banda-texto h2 { font-size: 30px; line-height: 38px; }
}

.pf-banner {
	/* fundo do designer; icone, titulo, tracinho e texto em HTML.
	   Tudo em fluxo e centralizado: assim o espaco entre titulo, tracinho e
	   paragrafo e sempre o mesmo, com headline de uma ou de duas linhas. */
	position: relative;
	height: calc(410 * var(--u));
	background-image: var(--pf-banner-bg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.pf-banner-foto { display: none; }
.pf-banner-interno {
	display: flex;
	align-items: flex-start;
	gap: calc(68 * var(--u));
	padding-left: calc(24 * var(--u));
	width: calc(950 * var(--u));
}
.pf-banner-icone { flex: none; width: calc(160 * var(--u)); }
.pf-banner-icone img { width: 100%; height: auto; display: block; }
.pf-banner-texto { flex: 1; }
.pf-banner h2 {
	margin: 0;
	color: var(--escuro);
	font-size: calc(60 * var(--u));
	line-height: calc(70 * var(--u));
	font-weight: 400;
	letter-spacing: calc(0.5 * var(--u));
	text-wrap: balance;
}
.pf-banner .dash-escuro { margin-top: calc(22 * var(--u)); }
.pf-banner p {
	margin: calc(22 * var(--u)) 0 0;
	color: var(--escuro);
	font-size: calc(26 * var(--u));
	line-height: calc(34 * var(--u));
	font-weight: 400;
}
.pf-secao-tecnicos .pf-banner h2,
.pf-secao-onboarding .pf-banner h2,
.pf-secao-direitos .pf-banner h2 { font-size: calc(46 * var(--u)); line-height: calc(56 * var(--u)); }
.pf-num { display: block; height: calc(74 * var(--u)); width: auto; }
.pf-trabalhos {
	background: linear-gradient(170deg, #e2065f 0%, #e90a67 55%, #ec0b72 100%);
	padding: calc(90 * var(--u)) 0 calc(140 * var(--u));
}
.pf-work { margin-bottom: calc(150 * var(--u)); }
.pf-work:last-child { margin-bottom: 0; }
.pf-tag {
	margin: 0 0 calc(30 * var(--u)) calc(373 * var(--u));
	display: flex;
	align-items: flex-end;
	gap: calc(24 * var(--u));
}
.pf-num { display: block; height: calc(74 * var(--u)); width: auto; }
.pf-tag strong {
	color: #fff;
	font-size: calc(107 * var(--u));
	font-weight: 800;
	line-height: 1;
	border-bottom: calc(6 * var(--u)) solid var(--amarelo);
	padding-bottom: calc(8 * var(--u));
}
.pf-tag span {
	padding-bottom: 0;
	line-height: 1;
	color: var(--amarelo);
	font-size: calc(24.7 * var(--u));
	font-weight: 600;
	letter-spacing: calc(0.2 * var(--u));
	text-transform: uppercase;
}
.pf-card {
	margin-left: calc(292 * var(--u));
	width: calc(1374 * var(--u));
	background: #fff url('../img/pf/bg-card.webp') no-repeat bottom center;
	background-size: 100% auto;
	border-radius: calc(40 * var(--u));
	padding: calc(56 * var(--u)) calc(12 * var(--u)) calc(56 * var(--u)) calc(90 * var(--u));
	display: flex;
	align-items: flex-start;
	gap: calc(40 * var(--u));
}
.pf-card-texto { flex: 1; }
.pf-card-texto .pf-logo {
	/* caixa fixa com object-fit: reserva o espaco antes de carregar, nunca
	   distorce, e equilibra logo largo (TIM) com logo alto (Senac, Einstein) */
	display: block;
	width: calc(228 * var(--u));
	height: calc(78 * var(--u));
	object-fit: contain;
	object-position: left center;
}
.pf-card-texto h3 {
	margin: calc(36 * var(--u)) 0 0;
	color: var(--escuro);
	font-size: calc(55 * var(--u));
	line-height: calc(60 * var(--u));
	font-weight: 400;
	letter-spacing: calc(0.5 * var(--u));
	max-width: calc(520 * var(--u));
	text-wrap: balance;
}
.pf-card-texto .dash-magenta { margin-top: calc(9 * var(--u)); }
.pf-card-texto p {
	margin: calc(30 * var(--u)) 0 0;
	color: #3a3942;
	font-weight: 400;
	font-size: calc(26 * var(--u));
	line-height: calc(34 * var(--u));
	max-width: calc(566 * var(--u));
	flex: 1;
}
.pf-imagens { flex: none; width: calc(702 * var(--u)); height: auto; }

.pf-voltar {
	position: fixed;
	right: calc(28 * var(--u));
	top: 55%;
	z-index: 50;
	border: 0;
	background: none;
	color: #fff;
	font-family: var(--fonte-titulo);
	font-size: calc(21 * var(--u));
	font-weight: 700;
	letter-spacing: calc(0.2 * var(--u));
	cursor: pointer;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: calc(8 * var(--u));
	text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.pf-voltar.is-visivel { display: flex; }
.pf-voltar-circ {
	width: calc(52 * var(--u));
	height: calc(52 * var(--u));
	background: #fff;
	color: var(--magenta);
	border-radius: 50%;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 20px rgba(18,16,33,.25);
}
.pf-voltar-circ .seta { transform: rotate(-45deg); width: calc(20 * var(--u)); }

@media (max-width: 819px) {
	/* ---- capa ---- */
	.pf-capa {
		/* a arte do mobile tem a foto em cima e a area clara embaixo.
		   Na coluna do texto (x=24px) a curva laranja desce ate 75.4vw:
		   o titulo comeca depois disso para nao subir em cima da foto. */
		height: auto;
		padding: 79vw 0 34px;
		/* a arte termina em #f7f1ee: a mesma cor no fundo da secao apaga a
		   emenda, e o seletor fica num campo continuo em vez de meio branco */
		background: #f7f1ee url('../img/pf/bg-topo-mobile.webp') no-repeat top center;
		background-size: 100% auto;
	}
	.pf-capa-conteudo { position: static; width: auto; padding: 0 24px; }
	.pf-capa h1 { margin-top: 0; font-size: 32px; line-height: 40px; }
	.pf-capa .dash-escuro { margin-top: 18px; width: 64px; }
	.pf-capa-conteudo > p { margin-top: 20px; font-size: 17px; line-height: 25px; max-width: none; }
	.pf-palavras { display: none; }

	/* seletor: no toque quem navega e o dedo, entao o trilho vai de ponta a
	   ponta e as setas saem de cena. O item cortado na direita e a pista. */
	.pf-seletor {
		width: auto;
		gap: 0;
		margin: 30px -24px 0;
	}
	.pf-selnav { display: none; }
	.pf-seltrilho {
		width: auto;
		gap: 6px;
		padding: 0 24px 4px;
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
	.pf-selitem { width: 112px; scroll-snap-align: center; }
	.pf-selitem img, .pf-selcirc { width: 68px; height: 68px; }
	.pf-sellabel {
		margin-top: 10px;
		padding: 0;
		min-height: 30px;
		font-size: 10.5px;
		line-height: 14px;
		letter-spacing: .2px;
	}

	/* ---- banda de abertura: arte propria do mobile, preenchendo a secao
	   e ancorada na base; o texto fica na area livre do topo ---- */
	.pf-banda {
		height: auto;
		min-height: 156vw;   /* proporcao da arte (900x1403) */
		padding: 44px 0 0;
		background: #d40063 url('../img/pf/banda-mob.webp') no-repeat bottom center / cover;
	}
	.pf-banda-texto { position: static; padding: 0 24px; }
	.pf-banda-texto h2 { font-size: 30px; line-height: 38px; }
	.pf-banda-texto .contato-dash { margin-top: 20px; width: 64px; }

	/* ---- faixa de tema: foto em cima, texto no bloco bege ---- */
	.pf-banner {
		height: auto;
		display: block;
		overflow: visible;
		background: var(--bege-faixa);
		background-image: none;
		padding: 18px 0 34px;
	}
	.pf-banner-foto {
		/* mesma margem do texto: a faixa inteira alinha numa coluna so */
		display: block;
		width: calc(100% - 48px);
		margin: 0 auto;
		aspect-ratio: 1000 / 485;
		background: var(--pf-foto) no-repeat center / contain;
	}
	.pf-banner-interno {
		display: block;
		width: auto;
		gap: 0;
		padding: 22px 24px 0;
	}
	.pf-banner-icone { display: block; width: 64px; }
	.pf-banner h2,
	.pf-secao-tecnicos .pf-banner h2,
	.pf-secao-onboarding .pf-banner h2,
	.pf-secao-direitos .pf-banner h2 {
		margin-top: 16px;
		font-size: 25px;
		line-height: 31px;
		letter-spacing: .2px;
	}
	.pf-banner .dash-escuro { margin-top: 16px; width: 64px; }
	.pf-banner p { margin-top: 16px; font-size: 15.5px; line-height: 24px; }

	/* ---- trabalhos ---- */
	.pf-trabalhos { padding: 40px 0 56px; }
	.pf-work { margin-bottom: 52px; }
	.pf-tag { margin: 0 20px 14px; gap: 10px; }
	.pf-num { height: 30px; }
	.pf-tag strong { font-size: 38px; border-bottom-width: 4px; }
	.pf-tag span { font-size: 12px; letter-spacing: .3px; }

	/* o cartao vira uma coluna so; display:contents solta os filhos do
	   .pf-card-texto para a imagem poder entrar logo depois do tracinho */
	.pf-card {
		margin: 0 16px;
		width: auto;
		flex-direction: column;
		align-items: stretch;
		padding: 26px 22px 30px;
		border-radius: 24px;
		gap: 0;
	}
	.pf-card-texto { display: contents; }
	.pf-card-texto .pf-logo { order: 1; align-self: flex-start; width: 148px; height: 54px; }
	.pf-card-texto h3 {
		order: 2;
		margin-top: 18px;
		max-width: none;
		font-size: 23px;
		line-height: 28px;
	}
	.pf-card-texto .dash-magenta { order: 3; margin-top: 14px; width: 56px; }
	.pf-imagens { order: 4; width: 100%; margin-top: 22px; }
	.pf-card-texto p {
		order: 5;
		margin-top: 22px;
		max-width: none;
		font-size: 15.5px;
		line-height: 24px;
	}

	/* voltar ao topo: botao redondo, sem rotulo, fora do caminho da leitura */
	.pf-voltar {
		right: 14px;
		top: auto;
		bottom: 18px;
		gap: 0;
		font-size: 0;
		text-shadow: none;
	}
	/* o botao passa por cima de card branco e de fundo rosa: o anel magenta
	   garante que ele apareca nos dois */
	.pf-voltar-circ { width: 44px; height: 44px; border: 2px solid var(--magenta); }
	.pf-voltar-circ .seta { width: 17px; }
}

/* ------------- pontinhos de navegacao dos carrosseis -------------
   So no mobile: no desktop os carrosseis tem seta e cabem mais itens. */
.pontos { display: none; }
@media (max-width: 819px) {
	.pontos {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 16px;
	}
	.ponto {
		width: 22px;              /* alvo de toque; a bolinha e o ::before */
		height: 22px;
		padding: 0;
		border: 0;
		background: none;
		display: grid;
		place-items: center;
		cursor: pointer;
	}
	.ponto::before {
		content: '';
		width: 7px;
		height: 7px;
		border-radius: 999px;
		background: rgba(18, 16, 33, .22);
		transition: width .25s ease, background-color .25s ease;
	}
	.ponto.is-ativo::before { width: 20px; background: var(--magenta); }
	/* dentro do bloco rosa dos pilares o contraste se inverte */
	.pilares .ponto::before, .painel .ponto::before { background: rgba(255, 255, 255, .38); }
	.pilares .ponto.is-ativo::before, .painel .ponto.is-ativo::before { background: #fff; }
	.pilares .pontos, .painel .pontos { margin-bottom: 4px; }
}

/* ---------------- comentarios do blog (secao no fim do artigo) ---------------- */
.comentarios {
	margin-top: calc(70 * var(--u));
	border-top: 1px solid #eee6eb;
	padding-top: calc(46 * var(--u));
}
.coment-titulo {
	margin: 0 0 calc(24 * var(--u));
	color: var(--escuro);
	font-size: calc(30 * var(--u));
	font-weight: 600;
}
.coment-n {
	display: inline-grid; place-items: center;
	min-width: calc(30 * var(--u)); height: calc(30 * var(--u));
	padding: 0 calc(9 * var(--u));
	margin-left: calc(6 * var(--u));
	border-radius: 999px;
	background: rgba(212, 0, 112, .10); color: var(--magenta);
	font-size: calc(15 * var(--u)); font-weight: 700;
	vertical-align: calc(4 * var(--u));
}
.coment-lista { list-style: none; margin: 0 0 calc(36 * var(--u)); padding: 0; }
.coment-item { display: flex; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) 0; border-top: 1px solid #f2edf0; }
.coment-item:first-child { border-top: 0; padding-top: 0; }
.coment-avatar {
	flex: none; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%;
	background: rgba(212, 0, 112, .10); color: var(--magenta);
	display: grid; place-items: center;
	font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: calc(0.5 * var(--u));
}
.coment-meta { margin: 0; font-size: calc(16 * var(--u)); color: var(--escuro); }
.coment-meta time { margin-left: calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: #a39fa9; }
.coment-texto { margin: calc(5 * var(--u)) 0 0; font-size: calc(16.5 * var(--u)); line-height: calc(25 * var(--u)); color: #3a3942; }
.coment-vazio { padding: 0 0 calc(8 * var(--u)); color: #999; font-size: calc(16 * var(--u)); }
.coment-subtitulo { margin: 0 0 calc(16 * var(--u)); color: var(--escuro); font-size: calc(22 * var(--u)); font-weight: 600; }
.coment-duplo { display: grid; gap: calc(14 * var(--u)); }
@media (min-width: 560px) { .coment-duplo { grid-template-columns: 1fr 1fr; } }
.coment-form .campo { display: block; margin-bottom: calc(14 * var(--u)); }
.coment-rodape { display: flex; align-items: center; gap: calc(16 * var(--u)); flex-wrap: wrap; }
.coment-aviso { margin: 0; font-size: calc(14.5 * var(--u)); color: #666; }
.coment-aviso.is-erro { color: #c2273b; }
.coment-aviso.is-ok { color: #15803d; font-weight: 600; }
.coment-enviar[disabled] { opacity: .6; pointer-events: none; }

/* ---------------- ultimos artigos (pe do post) ---------------- */
.post-ultimos {
	max-width: calc(1300 * var(--u));
	margin: calc(90 * var(--u)) auto 0;
}
.post-ultimos .titulo-secao { font-size: calc(44 * var(--u)); }
.post-ultimos .dash-escuro { margin: calc(14 * var(--u)) auto calc(44 * var(--u)); }
.post-ultimos .post-card h3 { margin: 0; font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 600; }
.post-ultimos .post-card h3 a { color: var(--escuro); text-decoration: none; }
.post-ultimos .post-card h3 a:hover { color: var(--magenta); }
@media (max-width: 819px) {
	.comentarios { margin-top: 46px; padding-top: 34px; }
	.post-ultimos { margin-top: 56px; }
	.post-ultimos .titulo-secao { font-size: 27px; }
	.post-ultimos .dash-escuro { margin-bottom: 28px; }
}

/* ---------------- busca (lupa do menu) ---------------- */
.busca-overlay {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: calc(112 * var(--u));
	width: calc(1200 * var(--u));
	z-index: 70;
}
.busca-overlay[hidden] { display: none; }
.busca-form {
	display: flex;
	align-items: center;
	gap: calc(12 * var(--u));
	height: calc(64 * var(--u));
	padding: 0 calc(14 * var(--u)) 0 calc(32 * var(--u));
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 14px 40px rgba(18, 16, 33, .18);
	animation: busca-entra .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes busca-entra { from { opacity: 0; transform: translateY(-10px); } }
.busca-campo {
	flex: 1;
	border: 0;
	background: none;
	font-family: var(--fonte-titulo);
	font-size: calc(20 * var(--u));
	color: var(--escuro);
	outline: none;
}
.busca-campo::placeholder { color: #b0afb5; }
.busca-enviar {
	width: calc(46 * var(--u));
	height: calc(46 * var(--u));
	border: 0;
	border-radius: 50%;
	background: none;
	display: grid;
	place-items: center;
	overflow: hidden;
}
.busca-enviar svg { width: calc(21 * var(--u)); height: auto; color: var(--rosa); }
.busca-fechar {
	border: 0;
	background: none;
	color: #9b9aa0;
	font-size: calc(30 * var(--u));
	line-height: 1;
	padding: 0 calc(8 * var(--u));
}
.busca-fechar:hover { color: var(--rosa); }

/* resultados de busca / conteudo simples */
.conteudo-simples {
	max-width: 860px;
	margin: 0 auto;
	padding: 190px 24px 90px;
	font-family: var(--fonte-texto);
	color: #2c2b33;
}
.conteudo-simples h1 { font-family: var(--fonte-titulo); font-size: 40px; color: var(--escuro); margin: 0 0 10px; }
.conteudo-simples .busca-info { color: #6f6e75; margin: 0 0 34px; }
.resultado { padding: 22px 0; border-bottom: 1px solid #ececec; }
.resultado h2 { font-family: var(--fonte-titulo); font-size: 24px; margin: 0 0 6px; }
.resultado h2 a { color: var(--magenta); text-decoration: none; }
.resultado h2 a:hover { text-decoration: underline; }
.resultado p { margin: 0; font-size: 16px; line-height: 1.6; color: #56555c; }

@media (max-width: 819px) {
	.busca-overlay { width: auto; left: 14px; right: 14px; transform: none; top: 74px; }
	.busca-form { height: 54px; padding: 0 10px 0 20px; }
	.busca-campo { font-size: 16px; }
	.busca-enviar { width: 38px; height: 38px; }
	.busca-enviar svg { width: 16px; }
	.conteudo-simples { padding: 120px 20px 70px; }
	.conteudo-simples h1 { font-size: 28px; }
}

/* ============================================================
   Rodape "comum" (diagramacao do site antigo, fundo cinza novo)
   ============================================================ */
.rodape { background: #f0efee; padding: calc(90 * var(--u)) calc(126 * var(--u)) calc(34 * var(--u)); height: auto; }
.rodape-interno {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr);
	gap: calc(70 * var(--u));
	align-items: start;
	padding-bottom: calc(52 * var(--u));
	border-bottom: calc(1 * var(--u)) solid rgba(18, 16, 33, .12);
}
.rodape-col h2 {
	margin: 0 0 calc(22 * var(--u));
	color: #6f6e75;
	font-size: calc(19 * var(--u));
	font-weight: 400;
	letter-spacing: calc(0.5 * var(--u));
}
.rodape-logo { display: inline-block; }
.rodape-logo img { width: calc(210 * var(--u)); height: auto; }
.rodape-frase {
	margin: calc(24 * var(--u)) 0 0;
	max-width: calc(400 * var(--u));
	color: #56555c;
	font-family: var(--fonte-titulo);
	font-size: calc(17 * var(--u));
	line-height: calc(26 * var(--u));
}
.rodape-redes { list-style: none; display: flex; gap: calc(14 * var(--u)); margin: calc(26 * var(--u)) 0 0; padding: 0; }
.rodape-rede {
	display: grid;
	place-items: center;
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
	border-radius: 50%;
	border: calc(1.5 * var(--u)) solid rgba(18, 16, 33, .16);
	color: #6f6e75;
	cursor: pointer;
}
.rodape-rede svg { width: calc(22 * var(--u)); height: auto; }
.rodape-rede { transition: color .2s ease, border-color .2s ease; }
.rodape-rede:hover { color: var(--magenta); border-color: var(--magenta); }
.rodape-destaque {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: calc(14 * var(--u));
	margin-bottom: calc(20 * var(--u));
	color: var(--escuro);
	font-size: calc(27 * var(--u));
	font-weight: 500;
	text-decoration: none;
	line-height: 1.25;
}
.rodape-email { font-size: calc(23 * var(--u)); }
.rodape-destaque svg { flex: none; color: var(--magenta); width: calc(26 * var(--u)); height: auto; }
.rodape-destaque span { display: block; line-height: 1; }
.rodape-destaque.is-copiado { color: var(--magenta); }
.rodape-destaque:hover { color: var(--magenta); }
.rodape-col-menu ul {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(14 * var(--u)) calc(24 * var(--u));
}
.rodape-col-menu a { color: var(--escuro); font-size: calc(17 * var(--u)); font-weight: 500; text-decoration: none; }
.rodape-col-menu a:hover { color: var(--magenta); }
.rodape-base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--u));
	flex-wrap: wrap;
	padding-top: calc(26 * var(--u));
}
.rodape-copy { margin: 0; color: #8b8a88; font-size: calc(15 * var(--u)); }
.rodape-assinatura {
	margin: 0;
	display: flex;
	align-items: center;
	gap: calc(9 * var(--u));
	color: #6f6e75;
	font-size: calc(14 * var(--u));
}
.rodape-assinatura img {
	width: calc(56 * var(--u));
	height: auto;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .25s ease, opacity .25s ease;
	transition: opacity .2s ease;
}
.rodape-assinatura a:hover img { filter: none; opacity: 1; }

@media (max-width: 819px) {
	.rodape { padding: 44px 22px 30px; }
	.rodape-interno { grid-template-columns: 1fr; gap: 34px; padding-bottom: 30px; }
	.rodape-col h2 { font-size: 15px; margin-bottom: 14px; }
	.rodape-logo img { width: 162px; }
	.rodape-frase { font-size: 15px; line-height: 23px; margin-top: 16px; max-width: none; }
	.rodape-redes { gap: 12px; margin-top: 18px; }
	.rodape-rede { width: 40px; height: 40px; }
	.rodape-rede svg { width: 19px; }
	.rodape-destaque { font-size: 20px; gap: 11px; margin-bottom: 14px; }
	.rodape-email { font-size: 17px; }
	.rodape-destaque svg { width: 21px; }
	.rodape-col-menu ul { gap: 12px 18px; }
	.rodape-col-menu a { font-size: 15px; }
	.rodape-base { padding-top: 20px; gap: 12px; }
	.rodape-copy, .rodape-assinatura { font-size: 12.5px; }
	.rodape-assinatura img { width: 64px; }
}

/* ---------------- player de video real ---------------- */
.video-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--video-bg);
}
.video-som { cursor: pointer; }
.video-som.is-oculto { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
/* play/pause: alterna pela classe do botao, nao por atributo hidden
   (hidden como propriedade JS nao existe em elemento SVG) */
.video-play .video-icone-pause { display: none; }
.video-play.is-tocando .video-icone-play { display: none; }
.video-play.is-tocando .video-icone-pause { display: block; }


/* ============================================================
   Blog (lista + post)
   ============================================================ */
.blog-capa {
	position: relative;
	padding: calc(230 * var(--u)) calc(36 * var(--u)) calc(40 * var(--u));
	text-align: center;
}
.blog-dots { left: calc(180 * var(--u)); top: calc(190 * var(--u)); }
.blog-intro {
	max-width: calc(760 * var(--u));
	margin: calc(30 * var(--u)) auto 0;
	color: #3a3942;
	font-weight: 300;
	font-size: calc(22 * var(--u));
	line-height: calc(31 * var(--u));
}
.blog-capa .dash-escuro { margin: calc(3 * var(--u)) auto 0; }
.blog-lista { padding: calc(50 * var(--u)) calc(126 * var(--u)) calc(120 * var(--u)); }
.blog-grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(384 * var(--u)), 1fr));
	gap: calc(44 * var(--u));
}
.post-card {
	background: var(--cinza-card);
	border-radius: calc(20 * var(--u));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease;
}
.post-card:hover { transform: translateY(calc(-6 * var(--u))); }
.post-capa { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.post-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-capa-vazia { display: block; width: 100%; height: 100%; background: var(--grad-pill); }
.post-corpo { padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column; flex: 1; }
.post-data { margin: 0 0 calc(10 * var(--u)); color: #8c8c8c; font-size: calc(16 * var(--u)); }
.post-card h2 { margin: 0; font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 600; }
.post-card h2 a { color: var(--escuro); text-decoration: none; }
.post-card h2 a:hover { color: var(--magenta); }
.post-resumo {
	margin: calc(14 * var(--u)) 0 calc(24 * var(--u));
	color: #3a3942;
	font-weight: 300;
	font-size: calc(19 * var(--u));
	line-height: calc(26 * var(--u));
	flex: 1;
}
.post-cta { align-self: flex-start; }
.blog-vazio { text-align: center; color: #6f6e75; }

.post-unico { padding: calc(220 * var(--u)) calc(36 * var(--u)) calc(110 * var(--u)); }
.post-unico article { max-width: calc(880 * var(--u)); margin: 0 auto; }
.post-topo h1 {
	margin: calc(8 * var(--u)) 0 0;
	color: var(--escuro);
	font-size: calc(52 * var(--u));
	line-height: calc(60 * var(--u));
	font-weight: 500;
}
.post-topo .dash-escuro { margin-top: calc(5 * var(--u)); }
.post-hero { margin: calc(44 * var(--u)) 0; border-radius: calc(20 * var(--u)); overflow: hidden; }
.post-hero img { width: 100%; height: auto; display: block; }
.post-conteudo {
	font-family: var(--fonte-texto);
	color: #2c2b33;
	font-size: calc(20 * var(--u));
	line-height: calc(32 * var(--u));
}
.post-conteudo h2, .post-conteudo h3 {
	font-family: var(--fonte-titulo);
	color: var(--magenta);
	margin: calc(40 * var(--u)) 0 calc(14 * var(--u));
	font-size: calc(30 * var(--u));
	line-height: 1.25;
}
.post-conteudo h3 { font-size: calc(25 * var(--u)); color: var(--escuro); }
.post-conteudo p { margin: 0 0 calc(22 * var(--u)); }
.post-conteudo a { color: var(--magenta); }
.post-conteudo ul, .post-conteudo ol { margin: 0 0 calc(22 * var(--u)); padding-left: calc(26 * var(--u)); }
.post-conteudo li { margin-bottom: calc(8 * var(--u)); }
.post-conteudo img { max-width: 100%; height: auto; border-radius: calc(14 * var(--u)); }
.post-voltar { margin-top: calc(50 * var(--u)); height: calc(60 * var(--u)); font-size: calc(15 * var(--u)); }
.pagination, .navigation.pagination { margin-top: calc(56 * var(--u)); text-align: center; }
.page-numbers {
	display: inline-block;
	padding: calc(8 * var(--u)) calc(16 * var(--u));
	color: var(--escuro);
	text-decoration: none;
	font-weight: 500;
}
.page-numbers.current { color: var(--magenta); }

@media (max-width: 819px) {
	.blog-capa { padding: 120px 22px 28px; }
	.blog-dots { display: none; }
	.blog-intro { font-size: 16.5px; line-height: 25px; margin-top: 20px; }
	.blog-lista { padding: 30px 20px 70px; }
	.blog-grid { grid-template-columns: 1fr; gap: 26px; }
	.post-corpo { padding: 22px 20px 24px; }
	.post-card h2 { font-size: 21px; line-height: 27px; }
	.post-resumo { font-size: 16px; line-height: 23px; }
	.post-cta { }
	.post-unico { padding: 116px 22px 70px; }
	.post-topo h1 { font-size: 29px; line-height: 36px; }
	.post-hero { margin: 26px 0; }
	.post-conteudo { font-size: 16.5px; line-height: 27px; }
	.post-conteudo h2 { font-size: 22px; }
	.post-conteudo h3 { font-size: 19px; }
	.post-voltar { height: 52px; font-size: 13px; }
}

/* galeria e contato dentro do modal */
.galeria[hidden], .contato-dados[hidden], .form-contato[hidden] { display: none; }

/* ---------- formulario de contato (mobile first) ---------- */
.form-contato { margin-top: 20px; display: grid; gap: 14px; }
.form-duplo { display: grid; gap: 14px; }
.campo { display: block; }
.campo > span {
	display: block;
	margin-bottom: 6px;
	color: #6b6a72;
	font-family: var(--fonte-texto);
	font-size: 13px;
	font-weight: 500;
}
.campo > span em { font-style: normal; color: #a3a2a9; font-weight: 400; }
.campo input,
.campo textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid #e2e0e6;
	border-radius: 12px;
	background: #fbfafc;
	color: var(--escuro);
	font-family: var(--fonte-texto);
	font-size: 16px;          /* 16 evita o zoom automatico do iOS */
	line-height: 1.4;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder,
.campo textarea::placeholder { color: #b0afb5; }
.campo input:hover,
.campo textarea:hover { border-color: #d3d1d9; }
.campo input:focus,
.campo textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--magenta);
	box-shadow: 0 0 0 3px rgba(233, 9, 109, .12);
}
.campo input:user-invalid,
.campo textarea:user-invalid { border-color: #e0503a; }
.form-rodape { display: grid; gap: 10px; margin-top: 4px; }
.form-enviar { width: auto; justify-self: start; }
.form-enviar[disabled] { opacity: .6; pointer-events: none; }
.form-aviso {
	margin: 0;
	min-height: 20px;
	font-family: var(--fonte-texto);
	font-size: 14px;
	line-height: 1.4;
	color: #6b6a72;
}
.form-aviso.is-ok { color: #1c7c4a; }
.form-aviso.is-erro { color: #c0392b; }
/* honeypot: fora da tela, nunca escondido por display none (robo percebe) */
.miolo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 620px) {
	.form-duplo { grid-template-columns: 1fr 1fr; gap: 16px; }
	.form-rodape { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }

}
.galeria { position: relative; margin-top: 18px; }
.galeria-palco {
	background: #f4f4f4;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
}
.galeria-palco img { width: 100%; height: 100%; object-fit: contain; display: block; }
.galeria-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--magenta);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 18px rgba(18,16,33,.22);
}
.galeria-prev { left: -14px; }
.galeria-next { right: -14px; }
.galeria-contador { margin: 12px 0 0; text-align: center; color: #8c8c8c; font-size: 14px; }
.contato-dados { display: flex; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.contato-dado {
	flex: 1;
	min-width: 200px;
	display: block;
	padding: 16px 20px;
	border-radius: 16px;
	background: #faf7f8;
	border: 1px solid #f0e2e8;
	text-decoration: none;
}
.contato-dado strong { display: block; color: #8c8c8c; font-size: 13px; font-weight: 400; margin-bottom: 4px; }
.contato-dado span { color: var(--magenta); font-size: 19px; font-weight: 600; }
.contato-dado:hover { border-color: var(--magenta); }

/* ============================================================
   Acabamento mobile: alvo de toque e tamanho minimo de leitura
   (sinal pode encolher, leitura nao)
   ============================================================ */
@media (max-width: 819px) {
	/* alvo de toque maior que o desenho, sem mexer no visual */
	.menu-logo { position: relative; }
	.menu-logo::after { content: ""; position: absolute; inset: -12px -14px; }

	.rodape-destaque { padding: 7px 0; margin-bottom: 10px; }
	.rodape-col-menu a,
	.pf-palavras a {
		display: inline-block;
		padding: 9px 0;
	}
	.rodape-assinatura a { display: inline-flex; align-items: center; padding: 9px 0; }
	.rodape-col-menu ul { gap: 4px 18px; }

	/* texto de leitura nunca abaixo de 13px */
	.painel-migalha { font-size: 13px; }
	.rodape-copy, .rodape-assinatura { font-size: 13px; }
	.pf-sellabel { font-size: 13px; line-height: 1.3; }

	.scard-verso ul { font-size: 15.5px; line-height: 22px; }
	.case-corpo p, .post-resumo { font-size: 16px; }
}