/**
 * Telefer — home (redesign "Sala de controle").
 *
 * Carregado SÓ na front page, depois do main.css e do components.css (botões, header, variáveis de superfície). Sem @layer (docs/REDESIGN-LP.md §2.2).
 * Prefixo de classe: .tlf-  (o .tf- já é usado pelo plugin comercial e pelo /contratar/).
 * Valores só por token (assets/css/tokens.css). px apenas em borda/contorno.
 *
 * Índice
 *   1. Base de seção e container
 *   2. Tipografia
 *   3. Motivos: LED, onda, malha
 *   4. Botões (em components.css)
 *   5. Superfícies, chips e listas
 *   6. Campos de formulário
 *   7. Ícones
 */

/* --------------------------------------------------------------------------
   1. Base de seção e container
   -------------------------------------------------------------------------- */
/* Variáveis de superfície escura (.tlf-section, .tlf-scope): em components.css. */

.tlf-section {
	position: relative;
	padding-block: var(--telefer-section-y);
	background-color: var(--tlf-bg);
	color: var(--tlf-fg);
	font-family: var(--telefer-font-body);
	font-size: var(--telefer-t-sm);
	line-height: var(--telefer-lh-body);
}

.tlf-section--deep {
	--tlf-bg: var(--telefer-navy-900);
}

.tlf-section--light {
	--tlf-bg: var(--telefer-neutral-50);
	--tlf-fg: var(--telefer-primary-dark);
	--tlf-fg-2: var(--telefer-neutral-900);
	--tlf-fg-3: var(--telefer-neutral-900);
	--tlf-line: var(--telefer-line-dark);
	--tlf-surface: var(--telefer-ice);
	--tlf-link: var(--telefer-primary);
	--tlf-focus: var(--telefer-primary);
}

.tlf-section--ice {
	--tlf-bg: var(--telefer-ice);
	--tlf-fg: var(--telefer-primary-dark);
	--tlf-fg-2: var(--telefer-neutral-900);
	--tlf-fg-3: var(--telefer-neutral-900);
	--tlf-line: var(--telefer-line-dark);
	--tlf-surface: var(--telefer-neutral-50);
	--tlf-link: var(--telefer-primary);
	--tlf-focus: var(--telefer-primary);
}

.tlf-container {
	width: 100%;
	max-width: var(--telefer-container);
	margin-inline: auto;
	padding-inline: var(--telefer-gutter);
}

.tlf-grid {
	display: grid;
	grid-template-columns: repeat(var(--telefer-grid-cols), minmax(0, 1fr));
	gap: var(--telefer-grid-gap);
}

.tlf-section :focus-visible {
	outline: 2px solid var(--tlf-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2. Tipografia — hierarquia por escala e peso, não por caixa e sombra
   -------------------------------------------------------------------------- */
.tlf-display,
.tlf-h1,
.tlf-h2,
.tlf-h3 {
	margin: 0;
	font-family: var(--telefer-font-heading);
	font-optical-sizing: auto;
	color: var(--tlf-fg);
	text-wrap: balance;
}

.tlf-display {
	font-size: var(--telefer-t-2xl);
	font-weight: 800;
	line-height: var(--telefer-lh-tight);
	letter-spacing: var(--telefer-track-tight);
}

.tlf-h1 {
	font-size: var(--telefer-t-xl);
	font-weight: 750;
	line-height: var(--telefer-lh-tight);
	letter-spacing: var(--telefer-track-tight);
}

.tlf-h2 {
	font-size: var(--telefer-t-xl);
	font-weight: 700;
	line-height: var(--telefer-lh-snug);
	letter-spacing: var(--telefer-track-tight);
}

.tlf-h3 {
	font-size: var(--telefer-t-lg);
	font-weight: 650;
	line-height: var(--telefer-lh-snug);
}

/* Destaque de palavra: 1 por título, sublinhado de "sinal" em amarelo */
.tlf-mark {
	color: inherit;
	background: none;
	text-decoration-line: underline;
	text-decoration-color: var(--telefer-accent);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	text-decoration-skip-ink: auto;
}

.tlf-section--light .tlf-mark,
.tlf-section--ice .tlf-mark {
	text-decoration-color: var(--telefer-primary);
}

.tlf-lead {
	margin: 0;
	max-width: var(--telefer-measure);
	font-size: var(--telefer-t-md);
	line-height: var(--telefer-lh-body);
	color: var(--tlf-fg-2);
	text-wrap: pretty;
}

.tlf-body {
	margin: 0;
	max-width: var(--telefer-measure);
	color: var(--tlf-fg-2);
	text-wrap: pretty;
}

.tlf-caption {
	font-size: var(--telefer-t-xs);
	color: var(--tlf-fg-3);
}

/* Números: mono, tabulares (timers, métricas, preço) */
.tlf-num {
	font-family: var(--telefer-font-mono);
	font-variant-numeric: tabular-nums slashed-zero;
	font-feature-settings: 'tnum' 1, 'zero' 1;
	letter-spacing: 0;
}

.tlf-num--xl {
	font-size: var(--telefer-t-xl);
	font-weight: 500;
	line-height: 1;
	color: var(--telefer-accent);
}

.tlf-section--light .tlf-num--xl,
.tlf-section--ice .tlf-num--xl {
	color: var(--telefer-primary-dark);
}

/* --------------------------------------------------------------------------
   3. Motivos — LED, onda de áudio, malha de patch panel (usar com sentido)
   -------------------------------------------------------------------------- */
/* Onda de áudio: SVG com path; desenha uma vez ao entrar */
.tlf-wave {
	display: block;
	width: 100%;
	height: auto;
	color: var(--telefer-accent);
	overflow: visible;
}

.tlf-wave path {
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.tlf-wave--draw path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: tlf-wave-draw 1.4s var(--telefer-ease) 0.2s forwards;
}

@keyframes tlf-wave-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Malha de patch panel 1px + grão: textura do navy (substitui as manchas de brilho) */
.tlf-texture {
	isolation: isolate;
}

.tlf-texture::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--telefer-line) var(--telefer-hair), transparent var(--telefer-hair)),
		linear-gradient(to bottom, var(--telefer-line) var(--telefer-hair), transparent var(--telefer-hair));
	background-size: var(--telefer-s-7) var(--telefer-s-7);
	background-position: center top;
	opacity: 0.45;
	mask-image: linear-gradient(to bottom, var(--telefer-ink), transparent 85%);
}

/* --------------------------------------------------------------------------
   5. Superfícies, chips e listas
   -------------------------------------------------------------------------- */
.tlf-surface {
	position: relative;
	padding: var(--telefer-s-5);
	border: 1px solid var(--tlf-line);
	border-radius: var(--telefer-r-3);
	background-color: var(--tlf-surface);
}

/* Elevada: só o painel de produto (assinatura) usa sombra */
.tlf-surface--raised {
	box-shadow: var(--telefer-shadow-3);
}

.tlf-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--telefer-s-2);
	min-height: 1.75rem;
	padding: var(--telefer-s-1) var(--telefer-s-3);
	border: 1px solid var(--tlf-line);
	border-radius: var(--telefer-radius-pill);
	font-size: var(--telefer-t-xs);
	font-weight: 500;
	color: var(--tlf-fg-2);
}

.tlf-list {
	display: grid;
	gap: var(--telefer-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlf-list li {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: var(--telefer-s-3);
	align-items: start;
	color: var(--tlf-fg-2);
}

.tlf-list .tlf-icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	color: var(--tlf-link);
}

.tlf-rule {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--tlf-line);
}

/* --------------------------------------------------------------------------
   6. Campos de formulário — estados: padrão, foco, erro, desabilitado
   -------------------------------------------------------------------------- */
.tlf-field {
	display: grid;
	align-content: start;
	gap: var(--telefer-s-2);
}

.tlf-field__label {
	font-size: var(--telefer-t-xs);
	font-weight: 600;
	color: var(--tlf-fg);
}

.tlf-field__input {
	width: 100%;
	min-height: var(--telefer-touch);
	padding: var(--telefer-s-3) var(--telefer-s-4);
	border: 1px solid var(--telefer-line-strong);
	border-radius: var(--telefer-r-2);
	background-color: color-mix(in oklab, var(--tlf-bg), var(--telefer-ink) 18%);
	color: var(--tlf-fg);
	font: inherit;
	font-size: var(--telefer-t-sm);
	transition: border-color var(--telefer-dur-1) var(--telefer-ease);
}

.tlf-section--light .tlf-field__input,
.tlf-section--ice .tlf-field__input {
	border-color: var(--telefer-neutral-900);
	background-color: var(--telefer-neutral-50);
}

/* Painel escuro (.tlf-scope) dentro de seção clara: campo volta ao estilo escuro */
.tlf-section .tlf-scope .tlf-field__input {
	border-color: var(--telefer-line-strong);
	background-color: color-mix(in oklab, var(--tlf-bg), var(--telefer-ink) 18%);
}

.tlf-field__input::placeholder {
	color: var(--tlf-fg-3);
	opacity: 1;
}

.tlf-field__input:hover {
	border-color: var(--tlf-fg-2);
}

.tlf-field__input:focus-visible {
	outline: 2px solid var(--tlf-focus);
	outline-offset: 1px;
	border-color: transparent;
}

.tlf-field__input:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.tlf-field__hint {
	font-size: var(--telefer-t-xs);
	color: var(--tlf-fg-3);
}

.tlf-field__error {
	display: none;
	align-items: center;
	gap: var(--telefer-s-2);
	font-size: var(--telefer-t-xs);
	font-weight: 600;
	color: var(--tlf-fg);
}

.tlf-field__error .tlf-icon {
	width: 1rem;
	height: 1rem;
	color: var(--telefer-danger);
}

.tlf-field.is-invalid .tlf-field__input,
.tlf-field__input[aria-invalid='true'] {
	border-color: var(--telefer-danger);
	box-shadow: inset var(--telefer-stroke-3) 0 0 var(--telefer-danger);
}

.tlf-field.is-invalid .tlf-field__error {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
   7. Ícones (Phosphor regular, 24px)
   -------------------------------------------------------------------------- */
.tlf-icon {
	display: inline-block;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Movimento reduzido: desliga tudo; conteúdo nunca fica invisível
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tlf-wave--draw path {
		animation: none;
		stroke-dashoffset: 0;
	}

}

/* ==========================================================================
   SEÇÕES DA HOME (Fase 4 em diante)
   ========================================================================== */

/* --------------------------------------------------------------------------
   9. Barra fixa inferior (mobile) — substitui o botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */
.tlf-actionbar {
	display: none;
}

@media (max-width: 767px) {
	.tlf-actionbar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 9990;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--telefer-s-2);
		min-height: var(--telefer-actionbar-h);
		padding: var(--telefer-s-3) var(--telefer-gutter) calc(var(--telefer-s-3) + env(safe-area-inset-bottom, 0rem));
		border-top: 1px solid var(--telefer-line);
		background-color: var(--telefer-navy-900);
	}

	.tlf-actionbar .tlf-btn {
		min-height: var(--telefer-touch);
		padding-inline: var(--telefer-s-4);
	}

	.tlf-actionbar .tlf-icon {
		width: 1.375rem;
		height: 1.375rem;
	}

	body.home {
		padding-bottom: calc(var(--telefer-actionbar-h) + env(safe-area-inset-bottom, 0rem));
	}

	.telefer-whatsapp-fab {
		display: none;
	}
}

/* Telas estreitas: o botão verde fica só com o ícone (o nome acessível vem do aria-label) */
@media (max-width: 413px) {
	.tlf-actionbar .tlf-btn--whatsapp span {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   10. Hero — promessa + ação + painel de chamadas (assinatura)
       Grade: 12 col. Texto 1–7, painel 8–12 (≥ 1280); 1–6 / 7–12 (1024–1279).
   -------------------------------------------------------------------------- */
.tlf-hero {
	padding-top: calc(var(--telefer-header-height) + var(--telefer-s-6));
	padding-bottom: var(--telefer-s-8);
	overflow: clip;
}

.tlf-hero__grid {
	display: grid;
	gap: var(--telefer-s-7);
	align-items: center;
}

.tlf-hero__title {
	margin: 0;
	font-family: var(--telefer-font-heading);
	font-optical-sizing: auto;
	font-size: var(--telefer-t-hero);
	font-weight: 780;
	line-height: var(--telefer-lh-tight);
	letter-spacing: var(--telefer-track-tight);
	color: var(--tlf-fg);
	text-wrap: balance;
	overflow-wrap: break-word;
}

@media (max-width: 1023px) {
	.tlf-hero__title {
		font-family: var(--telefer-font-hero-mobile);
	}
}

.tlf-mark--keep {
	white-space: nowrap;
}

.tlf-hero__lead {
	margin-top: var(--telefer-s-5);
	max-width: 36rem;
}

.tlf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--telefer-s-3);
	margin-top: var(--telefer-s-6);
}

.tlf-hero__actions .tlf-btn {
	min-height: calc(var(--telefer-touch) + var(--telefer-s-2));
	padding-inline: var(--telefer-s-6);
	font-size: var(--telefer-t-sm);
}

.tlf-hero__note {
	margin: var(--telefer-s-3) 0 0;
	max-width: 36rem;
}

.tlf-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--telefer-s-3) var(--telefer-s-6);
	margin: var(--telefer-s-7) 0 0;
	padding: var(--telefer-s-5) 0 0;
	border-top: 1px solid var(--tlf-line);
	list-style: none;
}

.tlf-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: var(--telefer-s-2);
	font-size: var(--telefer-t-xs);
	font-weight: 500;
	color: var(--tlf-fg-2);
}

.tlf-hero__trust .tlf-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--tlf-fg-3);
}

@media (max-width: 639px) {
	.tlf-hero__actions {
		flex-direction: column;
	}

	.tlf-hero__actions .tlf-btn {
		width: 100%;
	}

	.tlf-hero__trust {
		flex-direction: column;
		margin-top: var(--telefer-s-6);
	}
}

@media (min-width: 1024px) {
	.tlf-hero {
		padding-top: calc(var(--telefer-header-height) + var(--telefer-s-8));
		padding-bottom: var(--telefer-s-9);
	}

	.tlf-hero__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--telefer-grid-gap);
	}

	.tlf-hero__copy {
		grid-column: 1 / span 6;
	}

	.tlf-hero__visual {
		grid-column: 7 / -1;
	}
}

@media (min-width: 1280px) {
	.tlf-hero__copy {
		grid-column: 1 / span 7;
	}

	.tlf-hero__visual {
		grid-column: 8 / -1;
	}
}

/* Imagem (modo alternativo ao painel) */
.tlf-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--telefer-r-3);
	object-fit: cover;
}

/* Foto padrão (hero anterior): PNG→WebP transparente 2544×1060, pessoa em ~44–88% da largura.
   Recorte 11:10 ancorado à direita/base; faixas da marca (logo-bg.svg) atrás; base some no fundo. */
.tlf-hero__media--recorte {
	position: relative;
	isolation: isolate;
	-webkit-mask-image: linear-gradient(180deg, var(--tlf-bg) 72%, transparent 100%);
	mask-image: linear-gradient(180deg, var(--tlf-bg) 72%, transparent 100%);
}

.tlf-hero__media--recorte img {
	aspect-ratio: 11 / 10;
	border-radius: 0;
	object-position: 80% 100%;
}

.tlf-hero__shape {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 78%;
	height: auto;
	aspect-ratio: 996 / 1096;
	transform: translate(-42%, -50%) rotate(-105.752deg);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Painel de chamadas (exemplo ilustrativo)
   -------------------------------------------------------------------------- */
.tlf-panel {
	padding: 0;
	overflow: hidden;
	border-color: var(--telefer-line-strong);
	background-color: var(--telefer-primary-dark);
	font-size: var(--telefer-t-xs);
}

.tlf-panel__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--telefer-s-2) var(--telefer-s-4);
	padding: var(--telefer-s-3) var(--telefer-s-5);
	border-bottom: 1px solid var(--tlf-line);
}

.tlf-panel__tag {
	font-family: var(--telefer-font-mono);
	font-size: var(--telefer-t-xs);
	color: var(--tlf-fg-3);
}

.tlf-panel__label {
	display: inline-flex;
	align-items: center;
	gap: var(--telefer-s-2);
	font-size: var(--telefer-t-xs);
	color: var(--tlf-fg-2);
}

.tlf-panel__label .tlf-icon {
	width: 1rem;
	height: 1rem;
}

.tlf-panel__meter {
	display: grid;
	gap: var(--telefer-s-3);
	padding: var(--telefer-s-4) var(--telefer-s-5) var(--telefer-s-5);
	border-bottom: 1px solid var(--tlf-line);
}

.tlf-panel__meter-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--telefer-s-3);
}

.tlf-panel__count {
	font-size: var(--telefer-t-sm);
	color: var(--tlf-fg-3);
}

.tlf-panel__count b {
	font-size: var(--telefer-t-lg);
	font-weight: 500;
	color: var(--tlf-fg);
}

/* Uma "luz" por canal de voz: os acesos são as chamadas da lista abaixo */
.tlf-panel__cells {
	display: grid;
	grid-template-columns: repeat(var(--tlf-cells, 30), minmax(0, 1fr));
	gap: var(--telefer-stroke-3);
	height: 0.75rem;
}

.tlf-panel__cells i {
	display: block;
	border-radius: var(--telefer-hair);
	background-color: var(--telefer-line-strong);
}

.tlf-panel__cells i.is-on {
	background-color: var(--telefer-text-light);
}

.tlf-panel__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--telefer-s-3);
	margin: var(--telefer-s-1) 0 0;
}

.tlf-panel__stats div {
	display: grid;
	gap: var(--telefer-s-1);
}

.tlf-panel__stats dt {
	color: var(--tlf-fg-3);
}

.tlf-panel__stats dd {
	margin: 0;
	font-size: var(--telefer-t-lg);
	line-height: 1;
	color: var(--tlf-fg);
}

.tlf-panel__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlf-panel__row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--telefer-s-4);
	align-items: center;
	padding: var(--telefer-s-3) var(--telefer-s-5);
	border-bottom: 1px solid var(--tlf-line);
}

.tlf-panel__icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--tlf-line);
	border-radius: var(--telefer-r-2);
	color: var(--tlf-fg-2);
}

.tlf-panel__icon .tlf-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.tlf-panel__row--tocando .tlf-panel__icon {
	border-color: color-mix(in oklab, var(--telefer-accent) 55%, transparent);
	color: var(--telefer-accent);
}

.tlf-panel__row--whatsapp .tlf-panel__icon {
	color: var(--telefer-whatsapp);
}

.tlf-panel__row--livre {
	color: var(--tlf-fg-3);
}

.tlf-panel__who {
	display: grid;
	gap: var(--telefer-s-1);
	min-width: 0;
}

.tlf-panel__who strong,
.tlf-panel__who small {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tlf-panel__who strong {
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-sm);
	font-weight: 650;
	color: var(--tlf-fg);
}

.tlf-panel__who small {
	font-size: var(--telefer-t-xs);
	color: var(--tlf-fg-3);
}

.tlf-panel__state {
	display: inline-flex;
	align-items: center;
	gap: var(--telefer-s-3);
}

.tlf-panel__time {
	min-width: 5ch;
	font-size: var(--telefer-t-sm);
	text-align: right;
	color: var(--tlf-fg);
}

.tlf-panel__foot {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--telefer-s-4);
	padding: var(--telefer-s-3) var(--telefer-s-5) var(--telefer-s-4);
}

.tlf-panel__foot .tlf-wave {
	height: 2rem;
}

@media (max-width: 389px) {
	.tlf-panel__bar,
	.tlf-panel__meter,
	.tlf-panel__row,
	.tlf-panel__foot {
		padding-inline: var(--telefer-s-4);
	}

	.tlf-panel__row {
		gap: var(--telefer-s-3);
	}

	.tlf-panel__state {
		gap: var(--telefer-s-2);
	}
}

/* --------------------------------------------------------------------------
   12. O custo da ligação perdida — dores (lista numerada) + calculadora
       Seção clara. Grade: intro 1–6 · dores 1–5 · calculadora 7–12 (≥ 1024).
       A calculadora é um painel navy, da mesma "sala de controle" do hero.
   -------------------------------------------------------------------------- */
.tlf-cost__grid {
	display: grid;
	gap: var(--telefer-s-7);
}

.tlf-cost__intro {
	display: grid;
	gap: var(--telefer-s-4);
	justify-items: start;
}

.tlf-cost__pains {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlf-cost__pain {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--telefer-s-4);
	padding-block: var(--telefer-s-5);
	border-top: 1px solid var(--tlf-line);
}

.tlf-cost__pain:last-child {
	border-bottom: 1px solid var(--tlf-line);
}

.tlf-cost__pain-num {
	font-size: var(--telefer-t-lg);
	font-weight: 500;
	line-height: 1.1;
	color: var(--telefer-primary);
}

.tlf-cost__pain-title {
	display: flex;
	align-items: center;
	gap: var(--telefer-s-2);
	margin: 0 0 var(--telefer-s-2);
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-md);
	font-weight: 650;
	line-height: var(--telefer-lh-snug);
	color: var(--tlf-fg);
}

.tlf-cost__pain-title .tlf-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--telefer-primary);
}

/* Calculadora */
.tlf-calc {
	display: grid;
	gap: var(--telefer-s-6);
	padding: var(--telefer-s-5);
	border: 1px solid var(--telefer-line-strong);
	border-radius: var(--telefer-r-3);
	background-color: var(--tlf-bg);
	color: var(--tlf-fg);
}

.tlf-calc__title {
	display: flex;
	align-items: center;
	gap: var(--telefer-s-3);
	margin: 0;
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-lg);
	font-weight: 650;
	line-height: var(--telefer-lh-snug);
	color: var(--tlf-fg);
}

.tlf-calc__title .tlf-icon {
	color: var(--tlf-fg-2);
}

.tlf-calc__fields {
	display: grid;
	gap: var(--telefer-s-5);
}

.tlf-calc .tlf-field__input {
	font-family: var(--telefer-font-mono);
	font-size: var(--telefer-t-md);
	font-variant-numeric: tabular-nums;
}

.tlf-calc__result {
	display: grid;
	gap: var(--telefer-s-2);
	justify-items: start;
	padding-top: var(--telefer-s-5);
	border-top: 1px solid var(--tlf-line);
}

.tlf-calc__value {
	display: block;
	margin-block: var(--telefer-s-1);
	font-size: var(--telefer-t-xl);
	font-weight: 500;
	line-height: 1;
	color: var(--telefer-accent);
}

.tlf-calc.is-empty .tlf-calc__value {
	color: var(--tlf-fg-3);
}

.tlf-calc__formula,
.tlf-calc__detail {
	margin: 0;
	color: var(--tlf-fg-2);
}

.tlf-calc__formula {
	font-size: var(--telefer-t-sm);
}

.tlf-calc__result .tlf-caption {
	margin: var(--telefer-s-2) 0 0;
}

.tlf-calc__cta {
	margin-top: var(--telefer-s-3);
}

@media (min-width: 640px) {
	.tlf-calc {
		padding: var(--telefer-s-6);
	}

	.tlf-calc__fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

@media (max-width: 639px) {
	.tlf-calc__cta {
		width: 100%;
	}
}

@media (min-width: 1024px) {
	.tlf-cost__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--telefer-grid-gap);
		align-items: start;
	}

	.tlf-cost__intro {
		grid-column: 1 / span 6;
		grid-row: 1;
	}

	.tlf-cost__pains {
		grid-column: 1 / span 5;
		grid-row: 2;
	}

	.tlf-calc {
		grid-column: 7 / -1;
		grid-row: 1 / span 2;
	}
}

/* --------------------------------------------------------------------------
   13. Produto — abas por solução (Fase 6). Seção navy.
       Painel da aba: texto 1–5 · ilustração 7–12 (≥ 1024). Aba ativa marcada pelo LED.
   -------------------------------------------------------------------------- */
.tlf-product__head {
	display: grid;
	gap: var(--telefer-s-4);
	justify-items: start;
	max-width: 46rem;
	margin-bottom: var(--telefer-s-7);
}

.tlf-tabs__list {
	display: inline-flex;
	gap: var(--telefer-s-1);
	max-width: 100%;
	margin-bottom: var(--telefer-s-7);
	padding: var(--telefer-s-1);
	overflow-x: auto;
	border: 1px solid var(--tlf-line);
	border-radius: var(--telefer-r-3);
	background-color: var(--telefer-navy-900);
	scrollbar-width: none;
}

.tlf-tabs__tab {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--telefer-s-2);
	min-height: var(--telefer-touch);
	padding: var(--telefer-s-2) var(--telefer-s-5);
	border: 0;
	border-radius: var(--telefer-r-2);
	background-color: transparent;
	color: var(--tlf-fg-2);
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-sm);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.tlf-tabs__tab:hover {
	color: var(--tlf-fg);
}

.tlf-tabs__tab[aria-selected='true'] {
	background-color: var(--telefer-cta-bg);
	color: var(--tlf-fg);
}

.tlf-tabs__tab:focus-visible {
	outline: 2px solid var(--tlf-focus);
	outline-offset: 2px;
}

.tlf-tabs__panel:focus-visible {
	outline: 2px solid var(--tlf-focus);
	outline-offset: var(--telefer-s-3);
	border-radius: var(--telefer-r-3);
}

.tlf-product__panel {
	display: grid;
	gap: var(--telefer-s-7);
	align-items: center;
}

.tlf-product__panel[hidden] {
	display: none;
}

.tlf-product__copy {
	display: grid;
	gap: var(--telefer-s-4);
	justify-items: start;
}

/* Lista de recursos: check em gelo (o amarelo fica para o CTA e o LED da aba) */
.tlf-product__list {
	margin-top: var(--telefer-s-2);
}

.tlf-product__list .tlf-icon {
	color: var(--telefer-text-light);
}

.tlf-product__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--telefer-s-4);
	margin-top: var(--telefer-s-4);
}

.tlf-product__included {
	display: flex;
	align-items: center;
	gap: var(--telefer-s-2);
	margin: var(--telefer-s-8) 0 0;
	padding-top: var(--telefer-s-5);
	border-top: 1px solid var(--tlf-line);
	color: var(--tlf-fg-2);
	font-size: var(--telefer-t-sm);
}

.tlf-product__included .tlf-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--tlf-fg-3);
}

.tlf-product__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--telefer-r-3);
}

@media (max-width: 639px) {
	.tlf-product__actions {
		gap: var(--telefer-s-2);
	}

	.tlf-product__actions .tlf-btn--primary {
		width: auto;
		flex: 0 1 auto;
		padding-inline: var(--telefer-s-3);
		font-size: var(--telefer-t-xs);
		white-space: nowrap;
	}

	.tlf-product__actions .tlf-btn--text {
		font-size: var(--telefer-t-xs);
		line-height: var(--telefer-lh-tight);
	}

	/* Abas em colunas iguais, texto pode quebrar (nada cortado) */
	.tlf-tabs__list {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		width: 100%;
	}

	.tlf-tabs__tab {
		justify-content: center;
		padding-inline: var(--telefer-s-3);
		white-space: normal;
		text-align: center;
	}
}

@media (min-width: 1024px) {
	.tlf-product__panel {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--telefer-grid-gap);
	}

	.tlf-product__copy {
		grid-column: 1 / span 5;
	}

	.tlf-product__visual {
		grid-column: 7 / -1;
	}
}

/* Ilustrações das abas (exemplo ilustrativo): URA e conversa */
.tlf-illus {
	padding: 0;
	overflow: hidden;
	border-color: var(--telefer-line-strong);
	background-color: var(--telefer-navy-900);
	font-size: var(--telefer-t-xs);
}

.tlf-illus__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--telefer-s-2) var(--telefer-s-4);
	padding: var(--telefer-s-3) var(--telefer-s-5);
	border-bottom: 1px solid var(--tlf-line);
}

.tlf-illus__tag {
	font-family: var(--telefer-font-mono);
	color: var(--tlf-fg-3);
}

.tlf-illus__call {
	display: flex;
	align-items: center;
	gap: var(--telefer-s-3);
	padding: var(--telefer-s-4) var(--telefer-s-5);
	border-bottom: 1px solid var(--tlf-line);
	color: var(--tlf-fg);
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-sm);
	font-weight: 600;
}

.tlf-illus__call .tlf-icon {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--telefer-accent);
}

.tlf-illus__call .tlf-num {
	margin-left: auto;
	font-family: var(--telefer-font-mono);
	font-size: var(--telefer-t-xs);
	font-weight: 400;
	color: var(--tlf-fg-3);
}

.tlf-illus__tree {
	display: grid;
	gap: var(--telefer-s-2);
	margin: 0;
	padding: var(--telefer-s-4) var(--telefer-s-5) var(--telefer-s-5);
	list-style: none;
}

.tlf-illus__tree li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		'key name'
		'key dest';
	align-items: center;
	gap: var(--telefer-s-1) var(--telefer-s-4);
	padding: var(--telefer-s-3) var(--telefer-s-4);
	border: 1px solid var(--tlf-line);
	border-radius: var(--telefer-r-2);
}

.tlf-illus__key {
	display: grid;
	grid-area: key;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--telefer-line-strong);
	border-radius: var(--telefer-r-1);
	font-size: var(--telefer-t-sm);
	color: var(--tlf-fg);
}

.tlf-illus__tree strong {
	grid-area: name;
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-sm);
	font-weight: 650;
	color: var(--tlf-fg);
}

.tlf-illus__dest {
	display: inline-flex;
	grid-area: dest;
	align-items: center;
	gap: var(--telefer-s-2);
	min-width: 0;
	color: var(--tlf-fg-2);
}

.tlf-illus__dest .tlf-icon {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--tlf-fg-3);
}

@media (min-width: 640px) {
	.tlf-illus__tree li {
		grid-template-columns: auto auto minmax(0, 1fr);
		grid-template-areas: 'key name dest';
	}

	.tlf-illus__dest {
		justify-self: end;
	}
}

.tlf-illus__chat {
	display: grid;
	gap: var(--telefer-s-3);
	margin: 0;
	padding: var(--telefer-s-5);
	list-style: none;
}

.tlf-msg {
	max-width: 85%;
	padding: var(--telefer-s-3) var(--telefer-s-4);
	border-radius: var(--telefer-r-3);
	font-size: var(--telefer-t-sm);
	line-height: var(--telefer-lh-snug);
	color: var(--tlf-fg);
}

.tlf-msg--in {
	justify-self: start;
	border-bottom-left-radius: var(--telefer-r-1);
	background-color: var(--telefer-cta-bg);
}

.tlf-msg--out {
	justify-self: end;
	border-bottom-right-radius: var(--telefer-r-1);
	background-color: color-mix(in oklab, var(--telefer-whatsapp) 16%, var(--telefer-navy-900));
}

.tlf-msg__who {
	display: flex;
	align-items: center;
	gap: var(--telefer-s-1);
	margin-bottom: var(--telefer-s-1);
	font-family: var(--telefer-font-mono);
	font-size: var(--telefer-t-xs);
	color: var(--tlf-fg-2);
}

.tlf-msg__who .tlf-icon {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--telefer-whatsapp);
}

/* Link da solução em branco: o amarelo da seção fica só no CTA (§4.1) */
.tlf-product .tlf-btn--text {
	--tlf-btn-fg: var(--tlf-fg);
}

/* --------------------------------------------------------------------------
   14. Comparativo — tabela PABX tradicional × Telefer Cloud
   -------------------------------------------------------------------------- */

.tlf-compare__intro {
	display: grid;
	gap: var(--telefer-s-4);
	justify-items: start;
	max-width: 56ch;
	margin-bottom: var(--telefer-s-7);
}

.tlf-compare__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
	color: var(--tlf-fg-2);
}

.tlf-compare__table thead th {
	padding: var(--telefer-s-4) var(--telefer-s-5);
	border-bottom: 1px solid var(--tlf-line);
	font-size: var(--telefer-t-xs);
	font-weight: 500;
	color: var(--tlf-fg-3);
}

.tlf-compare__table tbody th,
.tlf-compare__table tbody td {
	padding: var(--telefer-s-5);
	border-bottom: 1px solid var(--tlf-line);
	vertical-align: top;
}

.tlf-compare__table tbody th {
	font-family: var(--telefer-font-heading);
	font-weight: 650;
	color: var(--tlf-fg);
}

/* Recuo pendente: texto que quebra linha fica alinhado depois do ícone, não embaixo dele */
.tlf-compare__table td > span {
	display: block;
	margin-left: calc(1.25rem + var(--telefer-s-3));
}

.tlf-compare__table td .tlf-icon {
	float: left;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
}

.tlf-compare__cell--old .tlf-icon {
	color: var(--tlf-fg-3);
}

.tlf-compare__cell--new {
	background: var(--telefer-neutral-50);
	color: var(--tlf-fg);
	font-weight: 600;
}

.tlf-compare__cell--new .tlf-icon {
	color: var(--telefer-primary);
}

.tlf-compare__note {
	margin-top: var(--telefer-s-5);
}

.tlf-compare__cta {
	margin-top: var(--telefer-s-6);
}

@media (min-width: 768px) {
	.tlf-compare__table {
		table-layout: fixed;
	}

	.tlf-compare__table th:first-child {
		width: 30%;
	}

	.tlf-compare__table th:nth-child(2),
	.tlf-compare__table th:nth-child(3) {
		width: 35%;
	}

	.tlf-compare__table thead th:last-child {
		background: var(--telefer-neutral-50);
		color: var(--tlf-fg);
		border-top-left-radius: var(--telefer-r-3);
		border-top-right-radius: var(--telefer-r-3);
	}

	.tlf-compare__table tbody tr:last-child .tlf-compare__cell--new {
		border-bottom-left-radius: var(--telefer-r-3);
		border-bottom-right-radius: var(--telefer-r-3);
	}
}

@media (max-width: 767px) {
	.tlf-compare__table,
	.tlf-compare__table tbody,
	.tlf-compare__table tr,
	.tlf-compare__table tbody th,
	.tlf-compare__table tbody td {
		display: block;
	}

	.tlf-compare__table thead {
		position: absolute;
		width: var(--telefer-hair);
		height: var(--telefer-hair);
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.tlf-compare__table tbody tr {
		padding: var(--telefer-s-5) 0;
		border-bottom: 1px solid var(--tlf-line);
	}

	.tlf-compare__table tbody th,
	.tlf-compare__table tbody td {
		padding: var(--telefer-s-2) 0;
		border-bottom: 0;
	}

	.tlf-compare__table tbody td::before {
		display: block;
		content: attr(data-label);
		margin-bottom: var(--telefer-s-1);
		font-size: var(--telefer-t-xs);
		font-weight: 500;
		color: var(--tlf-fg-3);
	}

	.tlf-compare__table tbody .tlf-compare__cell--new {
		padding: var(--telefer-s-4);
		border-radius: var(--telefer-r-3);
	}
}

@media (max-width: 639px) {
	.tlf-compare__cta {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   15. Como migramos — etapas como caminho de sinal (Fase 7). Seção navy.
       Mobile: linha vertical à esquerda. ≥ 1024: horizontal (até 5 etapas).
   -------------------------------------------------------------------------- */
.tlf-steps__head {
	display: grid;
	gap: var(--telefer-s-4);
	justify-items: start;
	max-width: 46rem;
	margin-bottom: var(--telefer-s-8);
}

.tlf-steps__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlf-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--telefer-s-4);
	padding-bottom: var(--telefer-s-6);
}

.tlf-steps__item::before {
	content: '';
	position: absolute;
	top: 3rem;
	bottom: 0;
	left: 1.5rem;
	border-left: 1px solid var(--telefer-line-strong);
}

.tlf-steps__item:last-child {
	padding-bottom: 0;
}

.tlf-steps__item:last-child::before {
	display: none;
}

.tlf-steps__node {
	position: relative;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--telefer-line-strong);
	border-radius: var(--telefer-radius-pill);
	background-color: var(--tlf-bg);
	color: var(--tlf-fg);
}

.tlf-steps__node .tlf-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Última etapa = central operando: o LED acende */
.tlf-steps__item:last-child .tlf-steps__node {
	border-color: var(--telefer-accent);
	color: var(--telefer-accent);
}

.tlf-steps__num {
	margin: 0 0 var(--telefer-s-1);
	font-size: var(--telefer-t-xs);
	letter-spacing: var(--telefer-track-label);
	color: var(--tlf-fg-3);
}

.tlf-steps__title {
	margin: 0 0 var(--telefer-s-2);
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-md);
	font-weight: 650;
	line-height: var(--telefer-lh-snug);
	color: var(--tlf-fg);
}

.tlf-steps__prazo {
	margin: var(--telefer-s-3) 0 0;
}

.tlf-steps__prazo .tlf-icon {
	width: 1rem;
	height: 1rem;
}

@media (min-width: 1024px) {
	.tlf-steps__list {
		grid-template-columns: repeat(var(--tlf-steps, 5), minmax(0, 1fr));
		column-gap: var(--telefer-grid-gap);
	}

	.tlf-steps__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--telefer-s-5);
		padding-bottom: 0;
	}

	/* Linha horizontal do nó até a próxima coluna */
	.tlf-steps__item::before {
		top: 1.5rem;
		right: calc(var(--telefer-grid-gap) * -1);
		bottom: auto;
		left: 3rem;
		border-top: 1px solid var(--telefer-line-strong);
		border-left: 0;
	}

	/* Mais de 5 etapas: grade sem a linha (não fica espremido) */
	.tlf-steps__list--wrap {
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
		row-gap: var(--telefer-s-7);
	}

	.tlf-steps__list--wrap .tlf-steps__item::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   15b. Planos — "a partir de" por solução (Fase 7). Seção clara.
   -------------------------------------------------------------------------- */
.tlf-plans__head {
	display: grid;
	gap: var(--telefer-s-4);
	justify-items: start;
	max-width: 46rem;
	margin-bottom: var(--telefer-s-7);
}

.tlf-plans__list {
	display: grid;
	gap: var(--telefer-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlf-plans__plan {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	align-content: start;
	gap: var(--telefer-s-5);
	padding: var(--telefer-s-5);
	border: 1px solid var(--tlf-line);
	border-radius: var(--telefer-r-3);
	background-color: var(--telefer-ice);
}

.tlf-plans__top {
	display: grid;
	gap: var(--telefer-s-2);
}

.tlf-plans__top .tlf-label {
	color: var(--telefer-primary);
}

.tlf-plans__price {
	display: grid;
	gap: var(--telefer-s-1);
	margin: 0;
	padding-block: var(--telefer-s-5);
	border-block: 1px solid var(--tlf-line);
}

.tlf-plans__prefix,
.tlf-plans__detail {
	font-size: var(--telefer-t-xs);
	color: var(--tlf-fg-3);
}

.tlf-plans__prefix {
}

.tlf-plans__value {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--telefer-s-1);
}

.tlf-plans__value .tlf-num {
	font-size: var(--telefer-t-xl);
	font-weight: 500;
	line-height: 1;
	color: var(--tlf-fg);
}

.tlf-plans__period {
	font-size: var(--telefer-t-sm);
	color: var(--tlf-fg-2);
}

.tlf-plans__items .tlf-icon {
	color: var(--telefer-primary);
}

.tlf-plans__link {
	justify-self: start;
	align-self: end;
}

.tlf-plans__foot {
	display: grid;
	gap: var(--telefer-s-5);
	margin-top: var(--telefer-s-6);
}

.tlf-plans__note {
	display: flex;
	align-items: flex-start;
	gap: var(--telefer-s-2);
	max-width: var(--telefer-measure);
	margin: 0;
	font-size: var(--telefer-t-sm);
	color: var(--tlf-fg-2);
}

.tlf-plans__note .tlf-icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1em;
	color: var(--telefer-primary);
}

.tlf-plans__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--telefer-s-3) var(--telefer-s-6);
}

@media (max-width: 639px) {
	.tlf-plans__actions .tlf-btn--primary {
		width: 100%;
	}
}

@media (min-width: 640px) {
	.tlf-plans__plan {
		padding: var(--telefer-s-6);
	}
}

@media (min-width: 768px) {
	.tlf-plans__list {
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	}
}

/* --------------------------------------------------------------------------
   16. Prova social — números como telemetria
   -------------------------------------------------------------------------- */
.tlf-proof__grid {
	display: grid;
	gap: var(--telefer-s-7);
}

.tlf-proof__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--telefer-s-4);
}

.tlf-proof__text .tlf-btn {
	margin-top: var(--telefer-s-2);
}

.tlf-proof__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--telefer-s-6) var(--telefer-s-5);
	margin: 0;
	align-content: start;
}

.tlf-proof__stat {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--telefer-s-2);
	padding-top: var(--telefer-s-4);
	border-top: 1px solid var(--tlf-line);
}

.tlf-proof__stat dt {
	font-size: var(--telefer-t-xs);
	color: var(--tlf-fg-2);
}

.tlf-proof__stat dd {
	margin: 0;
	overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
	.tlf-proof__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--telefer-grid-gap);
		align-items: start;
	}

	.tlf-proof__text {
		grid-column: 1 / span 6;
	}

	.tlf-proof__stats {
		grid-column: 8 / span 5;
	}
}

/* --------------------------------------------------------------------------
   17. Depoimentos — sem carrossel, sem estrelas
   -------------------------------------------------------------------------- */
.tlf-quotes__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--telefer-s-3);
	margin-bottom: var(--telefer-s-7);
}

.tlf-quotes__list {
	display: grid;
	gap: 0;
}

.tlf-quote {
	display: flex;
	flex-direction: column;
	gap: var(--telefer-s-4);
	margin: 0;
	padding-block: var(--telefer-s-6);
	border-top: 1px solid var(--tlf-line);
}

.tlf-quote > .tlf-icon {
	color: var(--tlf-fg-3);
}

.tlf-quote__text {
	margin: 0;
}

.tlf-quote__text p {
	margin: 0;
	font-size: var(--telefer-t-sm);
	line-height: var(--telefer-lh-body);
	color: var(--tlf-fg-2);
	text-wrap: pretty;
}

.tlf-quote--main .tlf-quote__text p {
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-lg);
	font-weight: 500;
	line-height: var(--telefer-lh-snug);
	color: var(--tlf-fg);
}

.tlf-quote__author {
	display: flex;
	align-items: center;
	gap: var(--telefer-s-3);
}

.tlf-quote__photo {
	flex: none;
	width: var(--telefer-s-7);
	height: var(--telefer-s-7);
	border-radius: var(--telefer-radius-pill);
	object-fit: cover;
}

.tlf-quote__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--tlf-fg-3);
}

.tlf-quote__who strong {
	font-family: var(--telefer-font-heading);
	font-weight: 650;
	color: var(--tlf-fg);
}

/* O último depoimento já termina com padding-block (s-6): o botão não soma outra margem grande */
.tlf-quotes__cta {
	justify-self: start;
	margin-top: var(--telefer-s-2);
}

.tlf-quotes__side {
	display: grid;
}

@media (max-width: 639px) {
	.tlf-quotes__cta {
		justify-self: stretch;
	}
}

@media (min-width: 768px) {
	.tlf-quotes__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--telefer-s-6);
	}

	.tlf-quote--main,
	.tlf-quotes__side,
	.tlf-quotes__cta {
		grid-column: 1 / -1;
	}

	.tlf-quotes__side {
		grid-template-columns: subgrid;
	}
}

/* ≥ 1024: principal + botão à esquerda (7 col), demais empilhados à direita (5 col) */
@media (min-width: 1024px) {
	.tlf-quotes__list {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto 1fr;
		column-gap: var(--telefer-grid-gap);
	}

	.tlf-quote--main {
		grid-column: 1 / span 7;
		grid-row: 1;
		border-top: 0;
		padding-top: 0;
	}

	.tlf-quotes__cta {
		grid-column: 1 / span 7;
		grid-row: 2;
		align-self: start;
	}

	.tlf-quotes__side {
		grid-column: 8 / span 5;
		grid-row: 1 / span 2;
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
	}

	.tlf-quotes__side > .tlf-quote:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   18. FAQ — acordeão nativo + FAQPage
   -------------------------------------------------------------------------- */
.tlf-faq__grid {
	display: grid;
	gap: var(--telefer-s-7);
}

.tlf-faq__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--telefer-s-4);
}

.tlf-faq__intro .tlf-btn {
	margin-top: var(--telefer-s-2);
}

.tlf-faq__list {
	border-bottom: 1px solid var(--tlf-line);
}

.tlf-faq__item {
	border-top: 1px solid var(--tlf-line);
}

.tlf-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--telefer-s-4);
	padding-block: var(--telefer-s-5);
	font-family: var(--telefer-font-heading);
	font-size: var(--telefer-t-md);
	font-weight: 600;
	line-height: var(--telefer-lh-snug);
	color: var(--tlf-fg);
	cursor: pointer;
	list-style: none;
}

.tlf-faq__item summary::-webkit-details-marker {
	display: none;
}

.tlf-faq__item summary:focus-visible {
	outline: 2px solid var(--tlf-focus);
	outline-offset: 2px;
}

.tlf-faq__item summary .tlf-icon {
	transition: transform var(--telefer-dur-1) var(--telefer-ease);
}

.tlf-faq__item[open] summary .tlf-icon {
	transform: rotate(45deg);
}

.tlf-faq__answer {
	padding-bottom: var(--telefer-s-5);
}

@media (prefers-reduced-motion: reduce) {
	.tlf-faq__item summary .tlf-icon {
		transition: none;
	}
}

/* Abrir/fechar animado, só CSS (o <details> continua funcionando sem nada disto).
   ::details-content existe em Chrome 131+, Safari 18.4+ e Firefox 143+; navegador sem
   suporte ignora a regra e abre/fecha seco. A altura só anima onde há interpolate-size
   (Chromium); nos demais fica o esmaecer. content-visibility com allow-discrete segura
   o conteúdo visível até o fim da saída, senão o fechar seria instantâneo. */
@media (prefers-reduced-motion: no-preference) {
	.tlf-faq__item::details-content {
		opacity: 0;
		transition:
			opacity var(--telefer-dur-2) var(--telefer-ease),
			content-visibility var(--telefer-dur-2) allow-discrete;
	}

	.tlf-faq__item[open]::details-content {
		opacity: 1;
	}

	.tlf-faq__item summary .tlf-icon {
		transition-duration: var(--telefer-dur-2);
	}

	@supports (interpolate-size: allow-keywords) {
		.tlf-faq__item {
			interpolate-size: allow-keywords;
		}

		.tlf-faq__item::details-content {
			block-size: 0;
			overflow: clip;
			transition:
				block-size var(--telefer-dur-2) var(--telefer-ease),
				opacity var(--telefer-dur-2) var(--telefer-ease),
				content-visibility var(--telefer-dur-2) allow-discrete;
		}

		.tlf-faq__item[open]::details-content {
			block-size: auto;
		}
	}
}

@media (min-width: 1024px) {
	.tlf-faq__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--telefer-grid-gap);
		align-items: start;
	}

	.tlf-faq__intro {
		grid-column: 1 / span 4;
	}

	.tlf-faq__list {
		grid-column: 6 / span 7;
	}
}

/* --------------------------------------------------------------------------
   19. Movimento (Fase 9, §4.4): UM momento orquestrado (hero) + revelação no scroll.
       Só transform/opacity. Tudo dentro de prefers-reduced-motion: no-preference.
       No editor do Elementor nada anima (conteúdo nunca fica invisível esperando script).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* Hero (≈ 600 ms, escalonado). O H1 é o LCP: só desloca, nunca some (opacidade 1). */
	body:not(.elementor-editor-active) .tlf-hero__title {
		animation: tlf-rise var(--telefer-dur-3) var(--telefer-ease) both;
	}

	body:not(.elementor-editor-active) .tlf-hero__lead,
	body:not(.elementor-editor-active) .tlf-hero__actions,
	body:not(.elementor-editor-active) .tlf-hero__note,
	body:not(.elementor-editor-active) .tlf-hero__trust,
	body:not(.elementor-editor-active) .tlf-hero__visual {
		animation: tlf-fade-rise var(--telefer-dur-3) var(--telefer-ease) both;
	}

	body:not(.elementor-editor-active) .tlf-hero__lead {
		animation-delay: 80ms;
	}

	body:not(.elementor-editor-active) .tlf-hero__actions {
		animation-delay: 160ms;
	}

	body:not(.elementor-editor-active) .tlf-hero__note {
		animation-delay: 220ms;
	}

	body:not(.elementor-editor-active) .tlf-hero__trust {
		animation-delay: 280ms;
	}

	body:not(.elementor-editor-active) .tlf-hero__visual {
		animation-delay: 120ms;
	}

	/* Painel: as linhas entram uma a uma depois do painel (é o "sistema ligando") */
	body:not(.elementor-editor-active) .tlf-panel__row {
		animation: tlf-fade-rise var(--telefer-dur-2) var(--telefer-ease) both;
		animation-delay: 360ms;
	}

	body:not(.elementor-editor-active) .tlf-panel__row:nth-child(2) {
		animation-delay: 420ms;
	}

	body:not(.elementor-editor-active) .tlf-panel__row:nth-child(3) {
		animation-delay: 480ms;
	}

	body:not(.elementor-editor-active) .tlf-panel__row:nth-child(4) {
		animation-delay: 540ms;
	}

	body:not(.elementor-editor-active) .tlf-panel__row:nth-child(n + 5) {
		animation-delay: 600ms;
	}

	/* Revelação no scroll: o estado escondido só existe depois que reveal.js liga html.tlf-reveal */
	.tlf-reveal [data-tlf-reveal] {
		transition:
			opacity var(--telefer-dur-3) var(--telefer-ease) var(--tlf-reveal-delay, 0ms),
			transform var(--telefer-dur-3) var(--telefer-ease) var(--tlf-reveal-delay, 0ms);
	}

	.tlf-reveal [data-tlf-reveal]:not(.is-revealed) {
		opacity: 0;
		transform: translateY(var(--telefer-s-3));
	}
}

@keyframes tlf-rise {
	from {
		transform: translateY(var(--telefer-s-3));
	}
}

@keyframes tlf-fade-rise {
	from {
		opacity: 0;
		transform: translateY(var(--telefer-s-3));
	}
}

@media print {
	.tlf-reveal [data-tlf-reveal] {
		opacity: 1;
		transform: none;
	}
}