/* ==========================================================================
   Seções das páginas (redesign "a frase é o layout"). Nasceram na home
   (classes aut-i-*) e são reaproveitadas nas outras páginas. Carregado em
   todas as páginas; fonte, cores e componentes básicos estão em sistema.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Primeira tela: a frase, com o painel no lugar de uma palavra
   -------------------------------------------------------------------------- */

.aut-i-heroi {
	display: flex;
	align-items: center;
	min-height: min(82svh, 52rem);
	padding-block: clamp(3rem, 8vh, 6rem);
}

.aut-i-frase {
	margin: 0;
	font-size: var(--i-display);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.05em;
	text-wrap: nowrap;
}

.aut-i-frase__linha {
	display: block;
}

.aut-i-janela {
	position: relative;
	display: inline-block;
	width: 2.3em;
	height: 0.74em;
	overflow: hidden;
	border-radius: 0.12em;
	background: var(--aut-suave);
	vertical-align: -0.02em;
}

.aut-i-janela img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
	opacity: 0;
}

.aut-i-janela img:first-child {
	opacity: 1;
}

.aut-i-heroi__apoio {
	max-width: 44ch;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	font-size: var(--i-lead);
	line-height: 1.35;
}

.aut-i-heroi__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: 2.25rem;
}

/* --------------------------------------------------------------------------
   O que fazemos: linhas num eixo, foto na margem direita
   -------------------------------------------------------------------------- */

.aut-i-servicos {
	background: var(--aut-suave);
}

.aut-i-linhas {
	display: grid;
	gap: clamp(3.5rem, 7vw, 6.5rem);
	margin: clamp(3.5rem, 7vw, 6rem) 0 0;
	padding: 0;
	list-style: none;
}

.aut-i-linha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 2rem;
}

.aut-i-linha h3 {
	margin: 0;
	font-size: var(--i-lead);
}

.aut-i-linha h3 a {
	color: var(--aut-texto);
	text-decoration: none;
}

.aut-i-linha h3 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.aut-i-linha p {
	max-width: 34ch;
	margin: 0.75rem 0 0;
}

.aut-i-linha__foto {
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
}

.aut-i-linha__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tamanhos de propósito desiguais */
.aut-i-linha:nth-child(1) .aut-i-linha__foto { width: 15rem; aspect-ratio: 4 / 5; }
.aut-i-linha:nth-child(2) .aut-i-linha__foto { width: 20rem; aspect-ratio: 3 / 2; }
.aut-i-linha:nth-child(3) .aut-i-linha__foto { width: 12rem; aspect-ratio: 1; }
.aut-i-linha:nth-child(4) .aut-i-linha__foto { width: 24rem; aspect-ratio: 8 / 5; }
.aut-i-linha:nth-child(5) .aut-i-linha__foto { width: 16rem; aspect-ratio: 4 / 5; }

.aut-i-linha:nth-child(4) .aut-i-linha__foto img {
	object-position: left top;
}

@media (min-width: 900px) {
	/* Tudo pendurado num eixo a ~1/3 da largura */
	.aut-i-eixo > * {
		margin-left: 33%;
	}
}

@media (max-width: 899px) {
	.aut-i-linha {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* nth-child(n) para vencer as larguras fixas do desktop (que também usam nth-child) */
	.aut-i-linha:nth-child(n) .aut-i-linha__foto {
		width: 100%;
	}

	.aut-i-linha:nth-child(3n + 2) .aut-i-linha__foto { width: 72%; justify-self: end; }
	.aut-i-linha:nth-child(3n) .aut-i-linha__foto { width: 56%; }
}

/* --------------------------------------------------------------------------
   Painel: telas grandes, sem moldura de navegador
   -------------------------------------------------------------------------- */

.aut-i-painel__topo {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 2rem 4rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.aut-i-painel__topo .aut-i-titulo {
	grid-column: 1 / -1;
	max-width: none;
}

.aut-i-painel__topo .aut-i-lead {
	grid-column: 2;
	margin: 0;
}

@media (max-width: 899px) {
	.aut-i-painel__topo {
		grid-template-columns: 1fr;
	}

	.aut-i-painel__topo .aut-i-lead {
		grid-column: 1;
	}
}

/* Celular: títulos um degrau menores para caber em duas linhas */
@media (max-width: 599px) {
	.aut-i-janela {
		width: 1.4em;
	}

	.aut-i-fecho .aut-i-fecho__pergunta {
		font-size: 1.5rem;
	}

	/* Seletores mais fortes: este bloco vem antes das regras da barra no arquivo */
	.aut-i-barra .aut-i-barra__etapa {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.aut-i-barra .aut-i-barra__bloco {
		min-height: 3.5rem;
	}

	.aut-i-fecho .aut-i-fecho__pergunta span {
		display: inline;
	}
}

/* --------------------------------------------------------------------------
   Monte o link do seu WhatsApp (a coisa viva da página)
   -------------------------------------------------------------------------- */

.aut-i-link-zap {
	background: var(--aut-suave);
}

.aut-i-link-zap__form {
	display: grid;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.aut-i-link-zap__rotulo {
	font-size: var(--i-pequeno);
	font-weight: 500;
	color: var(--aut-texto-2);
}





.aut-i-link-zap__exemplos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.aut-i-link-zap__exemplos button {
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--aut-fundo);
	color: var(--aut-texto);
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}

.aut-i-link-zap__exemplos button[aria-pressed="true"] {
	background: var(--aut-texto);
	color: var(--aut-fundo);
}

.aut-i-link-zap__resultado {
	max-width: 46rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.aut-i-link-zap__url {
	margin: 0;
	font-size: var(--i-corpo);
	font-weight: 500;
	color: var(--aut-link);
	overflow-wrap: anywhere;
}

.aut-i-link-zap__erro {
	margin: 0;
	font-weight: 500;
	color: #b3261e;
}

.aut-i-link-zap__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: 1.25rem;
}

.aut-i-link-zap__nota {
	max-width: 52ch;
	margin: 1.5rem 0 0;
}

/* --------------------------------------------------------------------------
   Método: as etapas como uma barra só
   -------------------------------------------------------------------------- */

.aut-i-barra {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 0;
	list-style: none;
}

.aut-i-barra__bloco {
	display: flex;
	align-items: flex-start;
	min-height: clamp(9rem, 22vh, 13rem);
	padding: 1rem;
	border-radius: 6px;
	font-size: var(--i-lead);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
	hyphens: auto;
	overflow-wrap: break-word;
}

.aut-i-barra__etapa:nth-child(1) .aut-i-barra__bloco { background: #025a4c; }
.aut-i-barra__etapa:nth-child(2) .aut-i-barra__bloco { background: #0d7480; }
.aut-i-barra__etapa:nth-child(3) .aut-i-barra__bloco { background: #1f3038; }
.aut-i-barra__etapa:nth-child(4) .aut-i-barra__bloco { background: #cfe3dc; color: #10231f; }
.aut-i-barra__etapa:nth-child(5) .aut-i-barra__bloco { background: #dfe7ea; color: #10231f; }

.aut-i-barra p {
	max-width: 24ch;
	margin: 1rem 0 0;
}

@media (max-width: 899px) {
	.aut-i-barra {
		grid-template-columns: 1fr;
	}

	.aut-i-barra__etapa {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 1rem;
		align-items: start;
	}

	.aut-i-barra__bloco {
		min-height: 6rem;
	}

	.aut-i-barra p {
		margin: 0 0 1rem;
	}
}

/* --------------------------------------------------------------------------
   Blog: título largo, lista empurrada para a direita
   -------------------------------------------------------------------------- */

.aut-i-blog .aut-i-titulo {
	padding-left: 3vw;
}

.aut-i-blog__grade {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 3rem clamp(2rem, 6vw, 6rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.aut-i-blog__lado {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.aut-i-blog__lado .aut-busca {
	margin: 0;
	max-width: none;
	border: 0;
	background: var(--aut-suave);
}

.aut-i-blog__lado .aut-busca:focus-within {
	box-shadow: 0 0 0 3px var(--aut-foco); /* taste-skill-ignore: anel de foco */
}

.aut-i-blog__foto {
	display: block;
	width: 100%;
	height: auto;
	margin-top: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

.aut-i-tabela {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aut-i-tabela a:not(.aut-i-link) {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr) auto;
	gap: 0.25rem 1.5rem;
	align-items: baseline;
	padding-block: 0.85rem;
	color: var(--aut-texto);
	text-decoration: none;
}

.aut-i-tabela li + li {
	margin-top: 0.5rem;
}

.aut-i-tabela__tema,
.aut-i-tabela__data {
	color: var(--aut-texto-2);
	font-size: var(--i-pequeno);
}

.aut-i-tabela__titulo {
	font-weight: 500;
	text-wrap: pretty;
}

.aut-i-tabela a:hover .aut-i-tabela__titulo {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.aut-i-tabela__todos {
	margin-top: 1.5rem !important;
}

@media (max-width: 899px) {
	.aut-i-blog .aut-i-titulo {
		padding-left: 0;
	}

	.aut-i-blog__grade {
		grid-template-columns: 1fr;
	}

	.aut-i-blog__lado {
		order: 2;
	}

	.aut-i-blog__foto {
		width: 60%;
		margin-left: auto;
	}

	.aut-i-tabela a:not(.aut-i-link) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.aut-i-tabela__titulo {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

/* --------------------------------------------------------------------------
   Perguntas: título largo, perguntas recuadas
   -------------------------------------------------------------------------- */

.aut-i-faq .aut-i-titulo {
	max-width: none;
}

.aut-i-faq__lista {
	display: grid;
	gap: 0.75rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
	.aut-i-faq__lista {
		margin-left: 33%;
	}
}

.aut-i-pergunta {
	border-radius: 8px;
	transition: background-color 0.2s ease;
}

.aut-i-pergunta[open] {
	background: var(--aut-suave);
}

.aut-i-pergunta summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 44px;
	padding: 1rem 1.5rem;
	font-size: var(--i-lead);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.25;
	cursor: pointer;
	list-style: none;
}

.aut-i-pergunta summary::-webkit-details-marker {
	display: none;
}

.aut-i-pergunta summary::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
}

.aut-i-pergunta[open] summary::after {
	transform: translateY(25%) rotate(-135deg);
}

.aut-i-pergunta p {
	max-width: 48ch;
	margin: 0;
	padding: 0 1.5rem 1.5rem;
}

/* --------------------------------------------------------------------------
   Fechamento: a pergunta nas duas bordas, a escolha no meio
   -------------------------------------------------------------------------- */

.aut-i-fecho {
	display: flex;
	align-items: center;
	min-height: min(90svh, 46rem);
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--i-fecho);
	color: #fff;
	text-align: center;
}

.aut-i-fecho .aut-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: clamp(3rem, 8vh, 6rem);
}

.aut-i-fecho__pergunta {
	margin: 0;
	color: #fff;
	font-size: var(--i-titulo);
	text-wrap: balance;
}

.aut-i-fecho__pergunta span {
	display: block;
}

.aut-i-fecho__escolha {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem 2rem;
}

.aut-i-fecho__ou {
	color: #cfe3dc;
}

.aut-i-botao-contorno {
	background: var(--i-fecho-2);
	color: #fff;
}

.aut-i-botao-contorno:hover {
	background: #000;
	color: #fff;
}

.aut-i-fecho__depois {
	max-width: 44ch;
	margin: 0;
	color: #e6f0ed;
}

@media (max-width: 599px) {
	.aut-i-fecho__escolha {
		flex-direction: column;
		width: 100%;
	}

	.aut-i-fecho__escolha .aut-botao {
		width: 100%;
	}
}

/* ==========================================================================
   Movimento (acabamento). Só transform e opacity.
   ========================================================================== */

/* Assinatura: cada linha do título sobe por trás da própria linha de base */
.aut-i-frase__linha {
	overflow: hidden;
	/* folga para as descendentes (p, q) não serem cortadas pela máscara */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.aut-i-frase__miolo {
	display: inline-block;
	animation: aut-i-subir 900ms var(--i-saida) both;
}

.aut-i-frase__linha + .aut-i-frase__linha .aut-i-frase__miolo {
	animation-delay: 110ms;
}

.aut-i-heroi__apoio,
.aut-i-heroi__acoes {
	animation: aut-i-surgir 600ms var(--i-saida) 450ms both;
}

@keyframes aut-i-subir {
	from { transform: translateY(105%); }
	to { transform: none; }
}

@keyframes aut-i-surgir {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

/* A imagem que se move: as quatro telas do painel se revezam na janela */
.aut-i-janela img {
	animation: aut-i-revezar 12s linear infinite both;
}

.aut-i-janela img:nth-child(2) { animation-delay: 3s; }
.aut-i-janela img:nth-child(3) { animation-delay: 6s; }
.aut-i-janela img:nth-child(4) { animation-delay: 9s; }

@keyframes aut-i-revezar {
	0% { opacity: 0; }
	4% { opacity: 1; }
	25% { opacity: 1; }
	29% { opacity: 0; }
	100% { opacity: 0; }
}

/* Entrada das partes de cada seção (o JS marca e revela; sem JS, tudo já aparece) */
[data-revelar] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 600ms var(--i-saida), transform 700ms var(--i-saida);
}

[data-revelar].esta-visivel {
	opacity: 1;
	transform: none;
}

/* Resposta ao toque (componentes da home; os comuns ficam em sistema.css) */
.aut-i-link-zap__exemplos button {
	transition: transform 160ms var(--i-saida), background-color 200ms ease, color 200ms ease;
}

.aut-i-link-zap__exemplos button:active {
	transform: scale(0.97);
}

.aut-i-link,
.aut-i-linha h3 a,
.aut-i-tabela__titulo {
	transition: color 150ms ease;
}

.aut-i-tabela a:not(.aut-i-link):hover .aut-i-tabela__titulo {
	color: var(--aut-link);
}

/* FAQ: a seta gira e a resposta aparece */
.aut-i-pergunta summary::after {
	transition: transform 200ms var(--i-saida);
}

.aut-i-pergunta[open] p {
	animation: aut-i-surgir 260ms var(--i-saida) both;
}

/* Fotos ganham um respiro só com mouse de verdade */
.aut-i-linha__foto img {
	transition: transform 700ms var(--i-saida);
}

@media (hover: hover) and (pointer: fine) {
	.aut-i-linha:hover .aut-i-linha__foto img {
		transform: scale(1.04);
	}
}

/* Reduzir movimento: sem deslocamento e sem loop; fica só a opacidade */
@media (prefers-reduced-motion: reduce) {
	.aut-i-frase__miolo,
	.aut-i-heroi__apoio,
	.aut-i-heroi__acoes,
	.aut-i-pergunta[open] p {
		animation: none;
	}

	.aut-i-janela img {
		animation: none;
	}

	[data-revelar] {
		transform: none;
		transition: opacity 300ms ease;
	}

	.aut-i-link-zap__exemplos button:active,
	.aut-i-linha:hover .aut-i-linha__foto img {
		transform: none;
	}
}

/* ==========================================================================
   Interações de tecnologia (v1 + ajustes)
   ========================================================================== */

/* Primeira tela: texto à esquerda, conversa de exemplo à direita */
.aut-i-heroi__baixo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
	align-items: start;
	gap: 2.5rem clamp(2rem, 6vw, 5rem);
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.aut-i-heroi__baixo .aut-i-heroi__apoio {
	margin-top: 0;
}

.aut-i-conversa {
	margin: 0;
	padding: 1rem;
	border-radius: 14px;
	background: var(--aut-suave);
}

.aut-i-conversa__topo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.aut-i-conversa__avatar {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #025a4c;
	color: #fff;
	font-size: var(--i-pequeno);
	font-weight: 600;
}

.aut-i-conversa__quem {
	flex: 1;
	font-size: var(--i-pequeno);
	line-height: 1.3;
	color: var(--aut-texto-2);
}

.aut-i-conversa__quem strong {
	display: block;
	color: var(--aut-texto);
	font-size: 1rem;
	font-weight: 600;
}

.aut-i-conversa__controle {
	min-height: 44px;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: var(--aut-texto);
	font: inherit;
	font-size: var(--i-pequeno);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.aut-i-conversa__linhas {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aut-i-msg {
	max-width: 86%;
	padding: 0.55rem 0.85rem;
	border-radius: 12px;
	font-size: 1rem;
	line-height: 1.4;
	transition: opacity 320ms var(--i-saida), transform 420ms var(--i-saida);
}

.aut-i-msg--cliente {
	align-self: flex-end;
	background: var(--i-balao-cliente);
	color: var(--i-balao-cliente-texto);
}

.aut-i-msg--agente {
	align-self: flex-start;
	background: var(--aut-fundo);
}

.aut-i-msg--sistema {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	padding-block: 0.15rem;
	font-size: var(--i-pequeno);
	font-weight: 600;
	color: var(--aut-link);
}

.aut-i-msg--sistema::before {
	content: "";
	width: 0.7rem;
	height: 0.4rem;
	margin-top: -0.2rem;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* Com JS, a conversa vira uma janela de altura fixa: as mensagens novas entram
   embaixo e empurram as antigas para cima, como num chat de verdade. */
.aut-i-conversa.esta-animada .aut-i-conversa__linhas {
	justify-content: flex-end;
	height: 17rem;
	overflow: hidden;
}

.aut-i-conversa.esta-animada .aut-i-msg {
	flex: none;
	animation: aut-i-surgir 320ms var(--i-saida) both;
}

.aut-i-conversa.esta-animada .aut-i-msg[data-espera] {
	display: none;
}

.aut-i-conversa figcaption {
	margin-top: 0.85rem;
	font-size: var(--i-pequeno);
	color: var(--aut-texto-2);
}

@media (max-width: 899px) {
	.aut-i-heroi__baixo {
		grid-template-columns: 1fr;
	}
}

/* O caminho de um pedido automatizado */
.aut-i-caminho__topo {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 1.5rem 4rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.aut-i-caminho__topo .aut-i-lead {
	margin: 0;
}

.aut-i-caminho__trilho {
	--i-trilho: 0.6rem;
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.5rem;
}

.aut-i-caminho__trilho::before,
.aut-i-caminho__progresso {
	content: "";
	position: absolute;
	top: calc(var(--i-trilho) - 2px);
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--aut-suave);
}

.aut-i-caminho__progresso {
	background: var(--aut-botao);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
	transition: transform 900ms var(--i-saida);
}

.aut-i-caminho__no {
	position: relative;
	min-height: 44px;
	padding: 2.25rem 0.5rem 0.5rem 0;
	border: 0;
	background: none;
	color: var(--aut-texto-2);
	font: inherit;
	font-size: var(--i-lead);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-align: left;
	cursor: pointer;
	transition: color 200ms ease;
}

.aut-i-caminho__ponto {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--i-trilho) * 2);
	height: calc(var(--i-trilho) * 2);
	border: 4px solid var(--aut-suave);
	border-radius: 50%;
	background: var(--aut-fundo);
	transition: border-color 300ms ease, background-color 300ms ease, transform 300ms var(--i-saida);
}

.aut-i-caminho__no.esta-aceso .aut-i-caminho__ponto {
	border-color: var(--aut-botao);
}

.aut-i-caminho__no[aria-selected="true"] {
	color: var(--aut-texto);
}

.aut-i-caminho__no[aria-selected="true"] .aut-i-caminho__ponto {
	border-color: var(--aut-botao);
	background: var(--aut-botao);
	transform: scale(1.15);
}

.aut-i-caminho__painel {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 1rem 4rem;
	margin-top: 2rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 8px;
	background: var(--aut-suave);
}

.aut-i-caminho__painel h3 {
	grid-column: 1;
	margin: 0;
	font-size: var(--i-lead);
}

.aut-i-caminho__painel p {
	grid-column: 1;
	max-width: 52ch;
	margin: 0;
}

.aut-i-caminho__painel .aut-i-caminho__quem {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	color: var(--aut-texto-2);
}

.aut-i-caminho__quem strong {
	display: block;
	margin-top: 0.25rem;
	color: var(--aut-texto);
	font-size: var(--i-lead);
	font-weight: 500;
	letter-spacing: -0.02em;
}

@media (max-width: 899px) {
	.aut-i-caminho__topo,
	.aut-i-caminho__painel {
		grid-template-columns: 1fr;
	}

	.aut-i-caminho__painel .aut-i-caminho__quem {
		grid-column: 1;
		grid-row: auto;
	}

	/* No celular o trilho fica em pé */
	.aut-i-caminho__trilho {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.aut-i-caminho__trilho::before,
	.aut-i-caminho__progresso {
		top: 0;
		left: calc(var(--i-trilho) - 2px);
		width: 4px;
		height: 100%;
	}

	.aut-i-caminho__progresso {
		transform: scaleY(var(--p, 0));
		transform-origin: top;
	}

	.aut-i-caminho__no {
		padding: 0.6rem 0 0.6rem 2.25rem;
		font-size: var(--i-corpo);
	}

	.aut-i-caminho__ponto {
		top: 50%;
		margin-top: calc(var(--i-trilho) * -1);
	}
}

/* Vitrine do painel: troca sozinha, com o tempo da aba visível */
.home .aut-vitrine__aba {
	position: relative;
	overflow: hidden;
}

.aut-vitrine--auto .aut-vitrine__aba[aria-selected="true"]::after {
	content: "";
	position: absolute;
	right: 1rem;
	bottom: 0.3rem;
	left: 1rem;
	height: 2px;
	background: currentColor;
	opacity: 0.7;
	transform-origin: left;
	animation: aut-i-progresso 6s linear both;
}

.aut-vitrine--auto.esta-pausada .aut-vitrine__aba[aria-selected="true"]::after {
	animation-play-state: paused;
}

@keyframes aut-i-progresso {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.aut-i-msg,
	.aut-i-caminho__progresso,
	.aut-i-caminho__ponto {
		transition: opacity 200ms ease;
	}

	.aut-i-conversa.esta-animada .aut-i-msg {
		animation: none;
	}
}

/* ==========================================================================
   Páginas internas: abertura, Soluções e peças reaproveitadas
   ========================================================================== */

/* Abertura das páginas: o título em tamanho de cartaz, duas linhas no máximo */
.aut-i-pagina-topo {
	padding-block: clamp(4rem, 10vh, 7rem) clamp(3rem, 7vh, 5rem);
}

.aut-i-pagina-titulo {
	margin: 0;
	font-size: var(--i-display);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.05em;
	text-wrap: balance;
}

.aut-i-pagina-titulo > span {
	display: block;
}

.aut-i-pagina-apoio {
	max-width: 44ch;
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	font-size: var(--i-lead);
	line-height: 1.35;
}

.aut-i-pagina-titulo > span,
.aut-i-pagina-apoio {
	animation: aut-i-surgir 700ms var(--i-saida) both;
}

.aut-i-pagina-titulo > span + span {
	animation-delay: 90ms;
}

.aut-i-pagina-apoio {
	animation-delay: 200ms;
}

/* Soluções: a frase à esquerda, a prova (foto e lista) à direita */
.aut-i-sol {
	scroll-margin-top: 130px;
}

.aut-i-sol--tom {
	background: var(--aut-suave);
}

.aut-i-sol__grade {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: start;
	gap: 3rem clamp(2rem, 6vw, 6rem);
}

.aut-i-sol--tom .aut-i-sol__grade {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.aut-i-sol--tom .aut-i-sol__texto {
	order: 2;
}

.aut-i-sol__acao {
	margin-top: 2rem;
}

.aut-i-sol__subtitulo {
	margin: 2rem 0 0.75rem;
	font-size: var(--i-corpo);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.aut-i-sol__foto {
	margin: 0 0 2rem;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 3 / 2;
}

.aut-i-sol__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aut-i-sol__itens {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aut-i-sol__itens li {
	position: relative;
	padding-left: 1.75rem;
}

/* Marcador: um quadradinho cheio na cor da ação */
.aut-i-sol__itens li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 2px;
	background: var(--aut-botao);
}

.aut-i-sol__itens strong {
	font-weight: 600;
}

.aut-i-sol__vitrine {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Integrações: frase à esquerda, nomes grandes à direita */
.aut-i-integracoes__grade {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 3rem clamp(2rem, 6vw, 6rem);
	align-items: center;
}

.aut-i-integracoes__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aut-i-integracoes__lista li {
	padding: 0.7rem 1.2rem;
	border-radius: 999px;
	background: var(--aut-suave);
	font-size: var(--i-lead);
	font-weight: 500;
	letter-spacing: -0.02em;
}

/* "Seu caso não está aqui?": um campo de cor inteiro */
.aut-i-sob-medida {
	background: var(--aut-suave);
}

.aut-i-sob-medida__grade {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 2rem clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.aut-i-sob-medida__grade .aut-i-lead {
	margin-top: 0;
}

/* Fechamento nas páginas internas: um pouco mais baixo que o da home */
.aut-i-fecho--pagina {
	min-height: min(72svh, 40rem);
}

@media (max-width: 899px) {
	.aut-i-sol__grade,
	.aut-i-sol--tom .aut-i-sol__grade,
	.aut-i-integracoes__grade,
	.aut-i-sob-medida__grade {
		grid-template-columns: 1fr;
	}

	.aut-i-sol--tom .aut-i-sol__texto {
		order: 0;
	}
}

@media (max-width: 599px) {
	.aut-i-fecho--pagina .aut-i-fecho__pergunta {
		font-size: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aut-i-pagina-titulo > span,
	.aut-i-pagina-apoio {
		animation: none;
	}
}

/* Etiquetas, abas e campos sobre um campo de cor: um tom acima, para não sumirem */
.aut-i-sol--tom .aut-chips li,
.aut-i-sol--tom .aut-vitrine__abas,
.aut-i-sob-medida .aut-chips li {
	background: var(--aut-fundo);
}

/* Sobre: faixa de foto, duas colunas, missão num campo de cor, princípios */
.aut-i-faixa {
	margin-block: 0;
	overflow: hidden;
	border-radius: 6px;
}

.aut-i-faixa img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.aut-i-duas {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: start;
	gap: 2.5rem clamp(2rem, 6vw, 6rem);
}

.aut-i-texto p {
	max-width: 60ch;
	margin: 0;
}

.aut-i-texto p + p {
	margin-top: 1.25rem;
}

.aut-i-titulo + .aut-i-texto {
	margin-top: 1.5rem;
}

.aut-i-duas .aut-i-sol__foto {
	margin: 2.5rem 0 0;
}

.aut-i-missao {
	background: var(--i-fecho);
	color: #fff;
}

.aut-i-missao .aut-i-titulo {
	color: #fff;
}

.aut-i-missao__frase {
	margin: 0;
}

.aut-i-missao__frase p {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.aut-i-principios {
	display: grid;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aut-i-principios h3 {
	margin: 0;
	font-size: var(--i-lead);
}

.aut-i-principios p {
	max-width: 46ch;
	margin: 0.6rem 0 0;
}

@media (max-width: 899px) {
	.aut-i-duas {
		grid-template-columns: 1fr;
	}

	.aut-i-faixa img {
		aspect-ratio: 4 / 3;
	}
}

/* Nas duas colunas, o título atravessa a largura toda (cabe em duas linhas) */
.aut-i-duas__titulo {
	grid-column: 1 / -1;
	max-width: 32ch;
}

.aut-i-missao__frase {
	grid-column: 1 / -1;
}

.aut-i-duas .aut-i-sol__foto:first-child {
	margin-top: 0;
}

/* Celular: o título da página corre em duas linhas, um degrau menor */
@media (max-width: 599px) {
	.aut-i-pagina-titulo {
		font-size: 1.75rem;
	}

	.aut-i-pagina-titulo > span {
		display: inline;
	}
}

/* Contato: título com foto ao lado; canais e formulário sem caixas desenhadas */
.aut-i-contato-topo {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: end;
	gap: 2.5rem clamp(2rem, 6vw, 5rem);
}

.aut-i-contato-topo .aut-i-sol__foto {
	margin: 0;
}

.aut-canal,
.aut-formulario {
	border: 0;
	background: var(--aut-suave);
}

.aut-canal p,
.aut-canal--passos ol,
.aut-formulario__intro {
	color: var(--aut-texto);
}

.aut-canal--destaque {
	background: var(--i-fecho);
	color: #fff;
}

.aut-canal--passos {
	border: 0;
	background: transparent;
	padding-inline: 0;
}

.aut-canal__redes a {
	border: 0;
	background: var(--aut-fundo);
}

.aut-canal h2,
.aut-formulario h2 {
	font-size: var(--i-lead);
}

@media (max-width: 899px) {
	.aut-i-contato-topo {
		grid-template-columns: 1fr;
	}
}

.aut-i-faixa--baixa img {
	aspect-ratio: 3 / 1;
}

.aut-i-faixa + .aut-secao--sem-topo {
	padding-top: clamp(3rem, 6vw, 5rem);
}

.aut-canal--passos .aut-i-sol__foto {
	margin: 0 0 1.5rem;
}

/* Blog: o índice de artigos à direita, busca e temas à esquerda */
.aut-listagem.aut-i-blog__grade {
	margin-top: 0;
	padding-bottom: clamp(4rem, 7vw, 6rem);
}

.aut-i-indice {
	display: grid;
	gap: 3rem;
	align-content: start;
}

.aut-i-indice .aut-contagem {
	margin: 0;
}

.aut-i-pagina-titulo--menor {
	font-size: var(--i-titulo);
}

.aut-i-pagina-topo .aut-breadcrumbs,
.aut-i-pagina-topo nav[aria-label] {
	margin-bottom: 1.5rem;
	font-size: var(--i-pequeno);
}

/* 404 e páginas de texto (Privacidade, Termos) */
.aut-i-404__busca .aut-busca {
	max-width: 34rem;
	margin-top: 2rem;
	border: 0;
	background: var(--aut-suave);
}

.aut-i-404__titulo {
	margin-bottom: 2rem;
}

.aut-i-404__recentes {
	padding-top: 0;
}

.aut-pagina .aut-prosa {
	padding-bottom: clamp(4rem, 7vw, 6rem);
}

/* ==========================================================================
   Impacto (v4): campos de cor, o painel em tela cheia, título maior
   ========================================================================== */

/* Campos de cor fixos: um capítulo claro e um escuro, nos dois modos do site.
   Os componentes leem os tokens, então só os tokens mudam aqui. */
.aut-i-campo-claro {
	--aut-fundo: #f7f9fa;
	--aut-suave: #e3eaec;
	--aut-superficie: #ffffff;
	--aut-texto: #1f3038;
	--aut-texto-2: #4f5e66;
	--aut-link: #025a4c;
	--aut-botao: #025a4c;
	--aut-botao-hover: #0a7a67;
	--aut-foco: #0a7a67;
	background: var(--aut-fundo);
	color: var(--aut-texto);
	color-scheme: light;
}

.aut-i-campo-escuro {
	--aut-fundo: #06100d;
	--aut-suave: #12231d;
	--aut-superficie: #0c1915;
	--aut-texto: #e6f0ed;
	--aut-texto-2: #b5c7c2;
	--aut-link: #6fcfb6;
	--aut-botao: #0a7a67;
	--aut-botao-hover: #0d8f79;
	--aut-foco: #6fcfb6;
	background: var(--aut-fundo);
	color: var(--aut-texto);
	color-scheme: dark;
}

.aut-i-campo-claro h2,
.aut-i-campo-claro h3,
.aut-i-campo-escuro h2,
.aut-i-campo-escuro h3 {
	color: var(--aut-texto);
}

/* O painel em tela cheia: a tela ocupa quase toda a largura e cresce ao rolar */
.aut-i-palco {
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.aut-i-palco__tela {
	width: min(1400px, 100% - 2 * var(--aut-gutter));
	margin-inline: auto;
}

.aut-i-palco .aut-vitrine__abas {
	margin-inline: auto;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.aut-i-palco .aut-vitrine__tela {
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

.aut-i-palco .aut-vitrine__figura {
	border-radius: 14px;
	transform: scale(calc(0.9 + 0.1 * var(--palco, 1)));
	transform-origin: 50% 0;
	will-change: transform;
}

.aut-i-palco .aut-vitrine__legenda {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 1rem 3rem;
	width: min(var(--aut-largura), 100%);
	margin-inline: auto;
}

.aut-i-palco .aut-vitrine__legenda h3 {
	margin: 0;
	font-size: var(--i-titulo);
	letter-spacing: -0.035em;
	line-height: 1;
}

.aut-i-palco .aut-vitrine__legenda p {
	font-size: var(--i-lead);
	line-height: 1.35;
}

.aut-i-palco .aut-vitrine__nota {
	width: min(var(--aut-largura), 100%);
	margin-inline: auto;
}

@media (max-width: 899px) {
	.aut-i-palco .aut-vitrine__legenda {
		grid-template-columns: 1fr;
	}
}

/* Título da primeira tela maior, e a janela do painel no formato do balão da marca */
.home .aut-i-frase {
	font-size: clamp(2.6rem, 8.2vw, 7.75rem);
}

.aut-i-janela {
	width: 1.9em;
	overflow: visible;
	border-radius: 0.14em 0.14em 0.14em 0.03em;
}

.aut-i-janela img {
	border-radius: inherit;
}

/* o rabinho do balão, como no ícone da Automatizando */
.aut-i-janela::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.12em;
	width: 0.22em;
	height: 0.16em;
	background: var(--aut-botao);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

@media (max-width: 599px) {
	.aut-i-janela {
		width: 1.25em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aut-i-palco .aut-vitrine__figura {
		transform: none;
	}
}

/* No palco, o título e a frase ficam centrados sobre a tela */
.aut-i-palco .aut-i-painel__topo {
	display: block;
	text-align: center;
}

.aut-i-palco .aut-i-painel__topo .aut-i-titulo {
	max-width: 20ch;
	margin-inline: auto;
}

.aut-i-palco .aut-i-painel__topo .aut-i-lead {
	margin: 1.5rem auto 0;
}

/* Soluções em linhas com a imagem fixa à esquerda (o JS monta .aut-i-lateral no desktop) */
.aut-i-lateral {
	display: none;
}

@media (min-width: 900px) {
	.aut-i-eixo.com-lateral {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: clamp(2.5rem, 6vw, 6rem);
		align-items: start;
	}

	.aut-i-eixo.com-lateral > * {
		grid-column: 2;
		margin-left: 0;
	}

	/* título e frase atravessam a largura; a imagem acompanha só a lista */
	.aut-i-eixo.com-lateral > .aut-i-titulo,
	.aut-i-eixo.com-lateral > .aut-i-lead {
		grid-column: 1 / -1;
	}

	.aut-i-eixo.com-lateral > .aut-i-lateral {
		position: sticky;
		top: 7rem;
		display: block;
		grid-column: 1;
		grid-row: 3;
		margin-top: clamp(3.5rem, 7vw, 6rem);
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: 12px;
		background: var(--aut-fundo);
	}

	.aut-i-lateral img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transform: scale(1.04);
		transition: opacity 500ms var(--i-saida), transform 900ms var(--i-saida);
	}

	.aut-i-lateral img.esta-ativa {
		opacity: 1;
		transform: none;
	}

	/* As linhas ficam só com o texto; a que está sendo lida acende */
	.com-lateral .aut-i-linha {
		grid-template-columns: 1fr;
	}

	.com-lateral .aut-i-linha .aut-i-linha__foto {
		display: none;
	}

	.com-lateral .aut-i-linha h3 {
		font-size: var(--i-titulo);
		letter-spacing: -0.035em;
		line-height: 1;
	}

	.com-lateral .aut-i-linha p {
		max-width: 40ch;
		font-size: var(--i-lead);
		line-height: 1.35;
	}

	.com-lateral .aut-i-linha:not(.esta-ativa) {
		opacity: 0.4;
	}

	.com-lateral .aut-i-linha {
		transition: opacity 400ms ease;
	}

	.com-lateral .aut-i-linhas {
		gap: clamp(4rem, 9vw, 8rem);
		padding-bottom: 20vh;
	}
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
	.aut-i-lateral img {
		transform: none;
		transition: opacity 200ms ease;
	}
}

/* ==========================================================================
   v7 mais rica (taste-skill): fita do painel, cenas presas à tela, campos de cor
   ========================================================================== */

/* No caminho, cada passo ganha a sua ilustração ao lado */
.aut-i-caminho__painel {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.aut-i-caminho__painel .aut-i-caminho__quem {
	grid-column: 1;
	grid-row: auto;
	align-self: start;
}

.aut-i-caminho__figura {
	grid-column: 2;
	grid-row: 1 / span 3;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
}

.aut-i-caminho__figura img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
}

@media (max-width: 899px) {
	.aut-i-caminho__figura {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Campo verde da marca: a ferramenta do link vira um capítulo de cor */
.aut-i-campo-verde {
	--aut-fundo: #025a4c;
	--aut-suave: #01463b;
	--aut-superficie: #046a5a;
	--aut-texto: #ffffff;
	--aut-texto-2: #cfe3dc;
	--aut-link: #c4ee5a;
	--aut-botao: #ffffff;
	--aut-botao-hover: #e6f0ed;
	--aut-foco: #c4ee5a;
	background: var(--aut-fundo);
	color: var(--aut-texto);
}

.aut-i-campo-verde h2 {
	color: var(--aut-texto);
}

.aut-i-campo-verde .aut-botao--primario,
.aut-i-campo-verde .aut-botao--primario:hover {
	color: #025a4c;
}

.aut-i-campo-verde .aut-i-link-zap__erro {
	color: #ffd2cc;
}

/* ==========================================================================
   v8: o caminho com setas, o celular como ferramenta, etapas que se abrem
   ========================================================================== */

/* O caminho: setas para avançar, com o passo atual entre elas */
.aut-i-caminho__setas {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 1.5rem;
}

.aut-i-seta {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--aut-botao);
	color: #fff;
	cursor: pointer;
	transition: transform 160ms var(--i-saida), background-color 200ms ease;
}

.aut-i-seta svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.aut-i-seta:hover {
	background: var(--aut-botao-hover);
}

.aut-i-seta:active {
	transform: scale(0.94);
}

.aut-i-caminho__contador {
	min-width: 4.5ch;
	margin: 0;
	font-weight: 500;
	text-align: center;
}

/* Monte o link: o texto e o link à esquerda; o celular, que é a ferramenta, à direita */
.aut-i-link-zap__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
	align-items: center;
	gap: 3rem clamp(2rem, 7vw, 6rem);
}

.aut-i-link-zap__resultado {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	border-radius: 14px;
	background: var(--aut-suave);
}

.aut-i-link-zap__rotulo {
	margin: 0 0 0.35rem;
	color: var(--aut-texto-2);
	font-size: var(--i-pequeno);
	font-weight: 500;
}

.aut-i-link-zap__url {
	display: inline-block;
	margin: 0;
	color: var(--aut-link);
	font-size: var(--i-lead);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.aut-i-link-zap__url:hover {
	text-decoration-thickness: 3px;
}

.aut-i-link-zap__dica {
	margin: 0.5rem 0 0;
	color: var(--aut-texto-2);
	font-size: var(--i-pequeno);
}

.aut-i-celular {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 30px;
	background: #0b141a;
	color: #e9edef;
	box-shadow: 0 0 0 10px #071310; /* taste-skill-ignore: a moldura do aparelho */
}

.aut-i-celular__topo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.1rem 0.85rem;
	background: #202c33;
}

.aut-i-celular__para {
	display: grid;
	flex: 1;
	min-width: 0;
}

.aut-i-celular__para label {
	color: #8696a0;
	font-size: var(--i-pequeno);
}

.aut-i-celular__para input {
	width: 100%;
	padding: 0.15rem 0;
	border: 0;
	border-bottom: 2px solid #3b4a54;
	background: transparent;
	color: #e9edef;
	font: inherit;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0;
}

.aut-i-celular__para input:focus {
	outline: none;
	border-bottom-color: #00a884;
}

.aut-i-celular__tela {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
	min-height: 17rem;
	padding: 1rem;
}

.aut-i-celular__dia {
	align-self: center;
	margin: 0 0 auto;
	padding: 0.25rem 0.7rem;
	border-radius: 8px;
	background: #182229;
	color: #8696a0;
	font-size: var(--i-pequeno);
}

.aut-i-celular__balao {
	max-width: 84%;
	margin: 0;
	padding: 0.55rem 0.85rem;
	border-radius: 10px;
	font-size: 1rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.aut-i-celular__balao--eu {
	align-self: flex-end;
	background: #005c4b;
}

.aut-i-celular__balao--loja {
	align-self: flex-start;
	background: #202c33;
	animation: aut-i-chegar 380ms var(--i-saida) both;
}

.aut-i-celular__balao.esta-chegando {
	animation: aut-i-chegar 420ms var(--i-saida) both;
}

@keyframes aut-i-chegar {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to { opacity: 1; transform: none; }
}

.aut-i-celular .aut-i-link-zap__exemplos {
	margin: 0;
	padding: 0 0.75rem 0.5rem;
}

.aut-i-celular .aut-i-link-zap__exemplos button {
	min-height: 38px;
	padding: 0.35rem 0.85rem;
	background: #202c33;
	color: #e9edef;
	font-size: var(--i-pequeno);
}

.aut-i-celular .aut-i-link-zap__exemplos button[aria-pressed="true"] {
	background: #00a884;
	color: #04140c;
}

.aut-i-celular__campo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem 1rem;
}

.aut-i-celular__campo input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0.6rem 1rem;
	border: 0;
	border-radius: 999px;
	background: #2a3942;
	color: #e9edef;
	font: inherit;
	font-size: 1rem;
}

.aut-i-celular__campo input:focus-visible {
	outline: 2px solid #00a884;
	outline-offset: 2px;
}

.aut-i-celular__enviar {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #00a884;
	cursor: pointer;
	transition: transform 160ms var(--i-saida);
}

.aut-i-celular__enviar svg {
	width: 22px;
	height: 22px;
	fill: #0b141a;
}

.aut-i-celular__enviar:active {
	transform: scale(0.92);
}

@media (max-width: 899px) {
	.aut-i-link-zap__grade {
		grid-template-columns: 1fr;
	}

	.aut-i-celular {
		width: min(100% - 20px, 25rem);
		margin: 0.75rem auto 0;
	}
}

/* Cinco etapas: painéis lado a lado; o aberto ganha espaço, os outros viram uma faixa */
.aut-i-sanfona {
	display: flex;
	gap: 8px;
	height: clamp(22rem, 48vh, 28rem);
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 0;
	list-style: none;
}

.aut-i-sanfona__etapa {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: 14px;
	color: #fff;
	transition: flex-grow 650ms var(--i-saida);
}

.aut-i-sanfona__etapa:nth-child(1) { background: #025a4c; }
.aut-i-sanfona__etapa:nth-child(2) { background: #0d7480; }
.aut-i-sanfona__etapa:nth-child(3) { background: #1f3038; }
.aut-i-sanfona__etapa:nth-child(4) { background: #cfe3dc; color: #10231f; }
.aut-i-sanfona__etapa:nth-child(5) { background: #dfe7ea; color: #10231f; }

.aut-i-sanfona__etapa.esta-aberta {
	flex-grow: 4.5;
}

.aut-i-sanfona__botao {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-height: 44px;
	padding: 1.4rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.aut-i-sanfona__n {
	font-size: clamp(2.5rem, 4vw, 4rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
}

.aut-i-sanfona__nome {
	font-size: var(--i-lead);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* fechado no desktop: o nome desce em pé pela faixa, logo abaixo do número */
@media (min-width: 900px) {
	.aut-i-sanfona__etapa:not(.esta-aberta) .aut-i-sanfona__nome {
		font-size: var(--i-corpo);
		writing-mode: vertical-rl;
	}
}

.aut-i-sanfona__corpo {
	padding: 0 1.4rem 1.6rem;
}

.aut-i-sanfona__corpo p {
	max-width: 34ch;
	margin: 0;
	font-size: var(--i-lead);
	line-height: 1.35;
}

/* fechada, a descrição sai do fluxo para não roubar a altura do nome em pé */
.aut-i-sanfona__etapa {
	position: relative;
}

.aut-i-sanfona__etapa:not(.esta-aberta) .aut-i-sanfona__corpo {
	position: absolute;
	visibility: hidden;
	opacity: 0;
}

.aut-i-sanfona__etapa.esta-aberta .aut-i-sanfona__corpo {
	opacity: 1;
	transition: opacity 400ms ease 250ms;
}

@media (max-width: 899px) {
	.aut-i-sanfona {
		flex-direction: column;
		height: auto;
	}

	.aut-i-sanfona__etapa {
		flex: none;
	}

	.aut-i-sanfona__botao {
		flex-direction: row;
		align-items: baseline;
	}

	.aut-i-sanfona__n {
		font-size: var(--i-lead);
	}

	.aut-i-sanfona__nome {
		white-space: normal;
	}

	.aut-i-sanfona__etapa:not(.esta-aberta) .aut-i-sanfona__corpo {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aut-i-sanfona__etapa,
	.aut-i-sanfona__etapa.esta-aberta .aut-i-sanfona__corpo {
		transition: none;
	}

	.aut-i-celular__balao.esta-chegando,
	.aut-i-celular__balao--loja {
		animation: none;
	}
}