.home {
	--creme: #FFF6EC;
	--coral-claro: #FFE3D7;
	--menta: #E2F3EB;
	--verde: #1F9D63;
	--sombra: 0 40px 80px -36px rgb(15 46 42 / .5);
	--h-espaco: clamp(1.25rem, .75rem + 1.5vw, 2rem);
	overflow-x: clip;
}
.home h2 { font-weight: 700; }
.home em { font-style: normal; }

.h-faixa { padding: var(--respiro) clamp(1rem, 4vw, 2rem); }
.h-faixa > * { max-width: var(--largura); margin-inline: auto; }
.h-rotulo { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font: 700 .8125rem/1 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--acento-forte); }
.h-rotulo::before { content: ""; width: 1.5rem; height: 2px; border-radius: 2px; background: currentColor; }
.h-cabeca { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.h-cabeca h2 { max-width: 26ch; }

/* Hero */
.h-hero {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
	max-width: calc(var(--largura) + 4rem); margin: 0 auto;
	padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(1rem, 4vw, 2rem) clamp(4rem, 3rem + 4vw, 7rem);
	isolation: isolate;
}
.h-hero::before {
	content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
	background:
		radial-gradient(38rem 30rem at 82% 38%, rgb(255 106 61 / .2), transparent 70%),
		radial-gradient(30rem 26rem at 8% 0%, rgb(31 157 99 / .1), transparent 70%),
		var(--creme);
}
.h-hero::after {
	content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
	background: radial-gradient(rgb(15 46 42 / .09) 1px, transparent 1.4px) 0 0 / 22px 22px;
	mask: linear-gradient(180deg, #000, transparent 75%);
}
.h-selo { display: inline-flex; align-items: center; gap: .625rem; padding: .4375rem .875rem .4375rem .625rem; border-radius: 999px; background: var(--papel); box-shadow: 0 1px 0 var(--linha), 0 8px 20px -12px rgb(15 46 42 / .3); font-size: .875rem; font-weight: 700; }
.h-selo span { width: .625rem; height: .625rem; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgb(31 157 99 / .18); }
.h-hero h1 { margin-top: 1.5rem; font-weight: 700; font-size: clamp(2.375rem, 1.3rem + 3.6vw, 3.875rem); line-height: 1; letter-spacing: -.035em; }
.h-hero h1 em { position: relative; display: inline-block; white-space: nowrap; color: var(--acento-forte); }
.h-hero h1 em { isolation: isolate; }
.h-hero h1 em::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .08em; height: .26em; border-radius: .1em; background: var(--acento); opacity: .22; }
.h-hero-sub { margin-top: 1.5rem; max-width: 36ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; color: var(--tinta-suave); }
.h-hero-acoes { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.h-hero-acoes .botao-acento { box-shadow: 0 14px 28px -12px rgb(229 72 42 / .7); }
.h-botao-linha { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.h-botao-linha:hover { background: var(--tinta); color: var(--papel); }
.h-hero-nota { margin-top: 1rem; font-size: .9375rem; font-weight: 600; color: var(--tinta-suave); }
.h-usos { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.h-usos li { padding: .4375rem .875rem; border-radius: 999px; border: 1.5px solid rgb(15 46 42 / .18); font-size: .9375rem; font-weight: 700; color: var(--tinta-suave); transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.h-usos li.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* Cena do produto */
.h-cena { position: relative; padding: 0 0 2.5rem 0; container-type: inline-size; }
.h-painel {
	position: relative; display: grid; gap: 1rem;
	width: min(100%, 28rem); margin-left: auto;
	padding: 1.375rem; border-radius: 1.75rem;
	background: var(--tinta); color: var(--papel);
	box-shadow: var(--sombra);
}
.h-painel-topo { display: flex; align-items: center; gap: .875rem; }
.h-painel-nome { min-width: 0; display: grid; }
.h-painel-nome strong { font: 700 1.0625rem/1.2 var(--fonte-titulo); }
.h-painel-nome small { color: rgb(255 255 255 / .6); font-variant-numeric: tabular-nums; }
.h-ao-vivo { order: 2; margin-left: auto; display: inline-flex; align-items: center; gap: .4375rem; padding: .3125rem .625rem; border-radius: 999px; background: rgb(255 255 255 / .1); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.h-ao-vivo i { width: .5rem; height: .5rem; border-radius: 50%; background: #39D98A; }
@media (prefers-reduced-motion: no-preference) { .h-ao-vivo i { animation: h-pisca 1.6s ease-in-out infinite; } }
@keyframes h-pisca { 50% { opacity: .3; } }

.h-recado { display: grid; grid-template-columns: auto 1fr; gap: .375rem .875rem; align-items: center; padding: .875rem 1rem; border-radius: 1.125rem; background: var(--acento); color: var(--tinta); }
.h-recado p { font-weight: 600; font-size: .9375rem; line-height: 1.4; transition: opacity .35s ease; }
.h-play { position: relative; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: var(--tinta); }
.h-play::after { content: ""; position: absolute; left: 56%; top: 50%; translate: -50% -50%; border-left: .55rem solid var(--papel); border-block: .36rem solid transparent; }
.h-recado .h-play { grid-row: span 2; align-self: start; }
.h-play-mini { width: 1.5rem; height: 1.5rem; }
.h-play-mini::after { border-left-width: .4rem; border-block-width: .26rem; }
.h-onda { display: flex; align-items: center; justify-content: space-between; height: 1.375rem; }
.h-onda i { flex: none; width: 3px; height: var(--h); border-radius: 999px; background: rgb(15 46 42 / .55); }
.h-cena.tocando .h-onda i { animation: h-onda .9s ease-in-out infinite alternate; }
.h-cena.tocando .h-onda i:nth-child(3n) { animation-delay: -.3s; }
.h-cena.tocando .h-onda i:nth-child(3n+1) { animation-delay: -.6s; }
@keyframes h-onda { to { scale: 1 .35; } }

.h-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.h-fila li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 2.875rem; padding: .5rem .5rem .5rem .875rem; border-radius: .875rem; background: rgb(255 255 255 / .06); transition: background-color .3s ease; }
.h-tel { font-variant-numeric: tabular-nums; font-size: .9375rem; white-space: nowrap; color: rgb(255 255 255 / .85); }
.h-status { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .625rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; white-space: nowrap; background: rgb(255 255 255 / .12); color: rgb(255 255 255 / .75); transition: background-color .3s ease, color .3s ease; }
.h-fila .h-t1 .h-status, .h-fila .h-t2 .h-status { background: var(--acento); color: var(--tinta); }
.h-fila .h-t2 .h-status { background: #FFC2AD; }
.h-fila .h-at .h-status { background: #39D98A; color: var(--tinta); }
.h-fila .h-ligando { background: rgb(255 255 255 / .12); }
.h-fila .h-ligando .h-status { background: transparent; color: var(--papel); }
.h-fila .h-ligando .h-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 0 rgb(255 106 61 / .7); animation: h-toca 1s ease-out infinite; }
.h-fila .h-fila-espera .h-status { background: transparent; color: rgb(255 255 255 / .4); }
@keyframes h-toca { to { box-shadow: 0 0 0 .5rem rgb(255 106 61 / 0); } }
.h-fila .h-mudou .h-status { animation: h-surge .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes h-surge { from { scale: .6; opacity: 0; } }

.h-contadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .12); }
.h-contadores div { display: grid; gap: .125rem; min-width: 0; }
.h-contadores b { font: 700 clamp(1.25rem, 1rem + .9vw, 1.625rem)/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.h-contadores small { font-size: .75rem; color: rgb(255 255 255 / .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-cont-t1 b { color: var(--acento); }
.h-cont-t2 b { color: #FFC2AD; }

.h-celular {
	position: absolute; left: -3rem; bottom: 0; z-index: 2;
	width: 9.5rem; padding: .5rem; border-radius: 1.75rem;
	background: #08201D; box-shadow: 0 30px 50px -20px rgb(15 46 42 / .6), inset 0 0 0 1.5px rgb(255 255 255 / .1);
	rotate: -6deg;
}
.h-celular-tela { display: grid; justify-items: center; gap: .5rem; padding: .875rem .625rem .75rem; border-radius: 1.375rem; background: linear-gradient(180deg, #FFF6EC, #FFE3D7); color: var(--tinta); }
.h-cel-estado { font-size: .6875rem; font-weight: 700; letter-spacing: .03em; color: var(--tinta-suave); transition: opacity .3s ease; }
.h-cel-avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--tinta); color: var(--acento); }
.h-cel-avatar svg { width: 1.25rem; height: 1.25rem; }
.h-cena.chamando .h-cel-avatar { animation: h-chama .7s ease-in-out infinite alternate; }
@keyframes h-chama { from { rotate: -10deg; } to { rotate: 10deg; } }
.h-cel-onda { display: flex; align-items: center; gap: 3px; height: .875rem; }
.h-cel-onda i { width: 3px; height: 100%; border-radius: 3px; background: var(--acento-forte); opacity: .35; }
.h-cena.tocando .h-cel-onda i { opacity: 1; animation: h-onda .6s ease-in-out infinite alternate; }
.h-cena.tocando .h-cel-onda i:nth-child(2n) { animation-delay: -.3s; }
.h-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3125rem; width: 100%; }
.h-teclado span { display: grid; place-items: center; height: 1.5rem; border-radius: .5rem; background: rgb(255 255 255 / .8); font: 700 .75rem/1 var(--fonte-titulo); transition: background-color .2s ease, scale .2s ease; }
.h-teclado .acesa { background: var(--acento); scale: 1.12; box-shadow: 0 4px 10px -4px rgb(229 72 42 / .8); }

/* O que e + como funciona */
.h-oque { background: var(--papel); }
.h-oque-topo { max-width: 56rem; margin-inline: auto; text-align: center; }
.h-oque-topo .h-rotulo { justify-content: center; }
.h-oque-topo h2 { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); line-height: 1.12; }
.h-passos { list-style: none; padding: 0; margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--h-espaco); counter-reset: passo; }
.h-passos li { position: relative; display: grid; align-content: start; gap: .625rem; padding: 1.5rem 1.5rem 1.75rem; border-radius: 1.5rem; background: var(--creme); }
.h-passos b { font: 700 1.375rem/1.15 var(--fonte-titulo); }
.h-passos p { color: var(--tinta-suave); }
.h-passo-num { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--tinta); color: var(--papel); font: 700 1rem/1 var(--fonte-titulo); }
.h-passo-visual { height: 9rem; margin-bottom: 1rem; padding: 1rem; border-radius: 1.125rem; background: var(--papel); box-shadow: 0 1px 0 var(--linha); overflow: hidden; }
.h-pv-voz { display: flex; flex-wrap: wrap; align-content: center; gap: .375rem; }
.h-voz-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .3125rem .625rem .3125rem .375rem; border-radius: 999px; background: var(--nevoa); font-size: .8125rem; font-weight: 700; }
.h-voz-chip i { width: 1rem; height: 1rem; border-radius: 50%; background: var(--tinta); }
.h-voz-chip.ativa { background: var(--tinta); color: var(--papel); }
.h-voz-chip.ativa i { background: var(--acento); }
.h-mini-onda { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; height: 2.75rem; margin-top: .375rem; }
.h-mini-onda i { flex: none; width: 4px; height: var(--h); border-radius: 999px; background: var(--acento); }
@media (prefers-reduced-motion: no-preference) { .h-mini-onda i { animation: h-onda 1.2s ease-in-out infinite alternate; } .h-mini-onda i:nth-child(3n) { animation-delay: -.5s; } .h-mini-onda i:nth-child(3n+1) { animation-delay: -.9s; } }
.h-pv-lista { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.h-planilha { display: grid; gap: 5px; width: 5.5rem; padding: .5rem; border-radius: .625rem; background: var(--menta); }
.h-planilha i { height: .5rem; border-radius: 3px; background: var(--verde); opacity: .55; }
.h-planilha i:nth-child(2n) { width: 70%; }
.h-seta { width: 2rem; height: 2px; background: var(--tinta); position: relative; }
.h-seta::after { content: ""; position: absolute; right: -2px; top: 50%; width: .5rem; height: .5rem; border: solid var(--tinta); border-width: 2px 2px 0 0; translate: 0 -50%; rotate: 45deg; }
.h-total { display: grid; justify-items: center; padding: .625rem .875rem; border-radius: .875rem; background: var(--tinta); color: var(--papel); }
.h-total b { font: 700 1.5rem/1 var(--fonte-titulo); }
.h-total small { font-size: .75rem; color: rgb(255 255 255 / .7); }
.h-pv-resp { display: grid; align-content: center; gap: .625rem; }
.h-barra { position: relative; display: block; height: 1.75rem; border-radius: .5rem; background: var(--nevoa); overflow: hidden; }
.h-barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: .5rem; background: var(--tinta); }
.h-barra small { position: relative; display: block; padding: 0 .625rem; font-size: .75rem; font-weight: 700; line-height: 1.75rem; color: var(--papel); }
.h-barra-acento::before { background: var(--acento); }
.h-barra-acento small { color: var(--tinta); }
.h-barra-claro::before { background: #FFC2AD; }
.h-barra-claro small { color: var(--tinta); }

.h-teclas-exemplo { margin-top: var(--h-espaco); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; }
.h-teclas-exemplo p { font-weight: 700; }
.h-teclas-exemplo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.h-teclas-exemplo li { display: inline-flex; align-items: center; gap: .5rem; padding: .3125rem .875rem .3125rem .3125rem; border-radius: 999px; background: var(--nevoa); font-weight: 600; font-size: .9375rem; }
.home kbd { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--tinta); color: var(--papel); font: 700 1rem/1 var(--fonte-titulo); box-shadow: 0 2px 0 rgb(0 0 0 / .25); }

/* Para quem serve */
.h-quem { background: var(--tinta); color: var(--papel); }
.h-quem .h-rotulo { color: var(--acento); }
.h-segmentos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--h-espaco); }
.h-segmentos li { display: grid; align-content: start; gap: 1rem; padding: 1.625rem; border-radius: 1.5rem; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); transition: background-color .2s ease, translate .2s ease; }
.h-segmentos li:hover { background: rgb(255 255 255 / .1); translate: 0 -3px; }
.h-seg-topo { display: flex; align-items: center; gap: .75rem; }
.h-seg-topo b { font: 700 1.1875rem/1.2 var(--fonte-titulo); }
.h-seg-icone { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: .875rem; background: var(--acento); color: var(--tinta); }
.h-seg-icone svg { width: 1.375rem; height: 1.375rem; }
.h-balao { position: relative; display: flex; gap: .625rem; align-items: start; padding: .875rem 1rem; border-radius: 1.125rem 1.125rem 1.125rem .375rem; background: var(--papel); color: var(--tinta); font-weight: 600; font-size: .9375rem; line-height: 1.45; }
.h-balao .h-play { margin-top: .0625rem; }
.h-ganho { color: rgb(255 255 255 / .72); font-size: .9375rem; }

/* Por que funciona */
.h-porque { background: var(--creme); }
.h-versus { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--h-espaco); align-items: stretch; }
.h-vs-velho, .h-vs-novo { display: grid; align-content: start; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.75rem; }
.h-vs-velho { background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px var(--linha); }
.h-vs-novo { background: var(--tinta); color: var(--papel); box-shadow: var(--sombra); }
.h-vs-titulo { font: 700 1.25rem/1.2 var(--fonte-titulo); }
.h-vs-novo .h-vs-titulo { color: var(--acento); }
.h-notifs { display: grid; gap: .5rem; }
.h-notifs span { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: .875rem; background: var(--papel); font-size: .875rem; font-weight: 600; color: rgb(15 46 42 / .5); box-shadow: 0 1px 0 var(--linha); }
.h-notifs span:nth-child(2) { margin-inline: .5rem; opacity: .8; }
.h-notifs span:nth-child(3) { margin-inline: 1rem; opacity: .6; }
.h-notifs i { width: 1.25rem; height: 1.25rem; border-radius: .375rem; background: var(--linha); flex: none; }
.h-notifs b { margin-left: auto; font-size: .75rem; color: var(--tinta-suave); }
.h-toque { display: flex; align-items: center; gap: .75rem; padding: .5rem 0 .5rem 1rem; }
.h-toque-icone { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--acento); color: var(--tinta); }
.h-toque-icone svg { width: 1.625rem; height: 1.625rem; }
@media (prefers-reduced-motion: no-preference) { .h-toque-icone { animation: h-vibra 2.4s ease-in-out infinite; } }
@keyframes h-vibra { 0%, 40%, 100% { rotate: 0deg; } 5%, 15%, 25%, 35% { rotate: -12deg; } 10%, 20%, 30% { rotate: 12deg; } }
.h-toque-icone { position: relative; }
.h-toque-icone::before, .h-toque-icone::after { content: ""; position: absolute; inset: -.5rem; border-radius: 50%; border: 2px solid rgb(255 106 61 / .45); }
.h-toque-icone::after { inset: -1rem; border-color: rgb(255 106 61 / .2); }
.h-toque-texto { margin-left: .75rem; display: grid; line-height: 1.25; }
.h-toque-texto b { font: 700 1.125rem/1.2 var(--fonte-titulo); }
.h-toque-texto small { color: rgb(255 255 255 / .6); font-size: .875rem; }
.h-vs-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.h-vs-lista li { display: flex; gap: .75rem; align-items: start; font-weight: 600; }
.h-vs-lista li::before { content: ""; flex: none; width: 1.375rem; height: 1.375rem; margin-top: .0625rem; border-radius: 50%; background: center / 62% no-repeat; }
.h-vs-nao li { color: var(--tinta-suave); }
.h-vs-nao li::before { background-color: var(--linha); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' stroke='%2346605A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.h-vs-sim li::before { background-color: var(--acento); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='%230F2E2A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Painel e relatorio */
.h-painel-sec { background: var(--papel); }
.h-lado { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.h-checks { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .875rem; font-size: 1.125rem; font-weight: 600; }
.h-checks li { display: flex; gap: .75rem; align-items: start; }
.h-checks li::before { content: ""; flex: none; width: 1.5rem; height: 1.5rem; border-radius: .5rem; background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='%231F9D63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 65% no-repeat; }
.h-relatorio { display: grid; gap: 1.125rem; padding: 1.375rem; border-radius: 1.75rem; background: var(--papel); box-shadow: var(--sombra), inset 0 0 0 1px var(--linha); rotate: 1.5deg; }
.h-rel-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.h-rel-topo b { font: 700 1.125rem/1.2 var(--fonte-titulo); }
.h-rel-botao { padding: .5rem .875rem; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.h-rel-teclas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
.h-rel-teclas div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .625rem; align-items: center; padding: .75rem; border-radius: 1rem; background: var(--creme); min-width: 0; }
.h-rel-teclas kbd { grid-row: span 2; background: var(--acento); color: var(--tinta); }
.h-rel-teclas div:nth-child(2) kbd { background: #FFC2AD; }
.h-rel-cp kbd { background: var(--linha); color: var(--tinta); }
.h-rel-cp kbd svg { width: 1rem; height: 1rem; }
.home .duvidas details { background: var(--papel); }
.h-rel-teclas b { font: 700 1.5rem/1 var(--fonte-titulo); }
.h-rel-teclas small { font-size: .75rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-rel-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.h-rel-linhas li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: .875rem; background: var(--nevoa); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.h-rel-linhas span:nth-child(2) { white-space: nowrap; }
.h-rel-linhas b { font-weight: 600; color: var(--tinta-suave); }
.h-tag { padding: .25rem .5rem; border-radius: 999px; background: #FFC2AD; font-size: .75rem; font-weight: 700; white-space: nowrap; font-style: normal; }
.h-tag-acento { background: var(--acento); }
.h-tag-claro { background: var(--linha); }

/* Preco */
.h-preco { background: var(--papel); padding-top: 0; }
.h-preco-cartao { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 2rem; background: var(--acento); color: var(--tinta); position: relative; overflow: hidden; isolation: isolate; }
.h-preco-cartao::after { content: ""; position: absolute; z-index: -1; right: -6rem; top: -6rem; width: 22rem; height: 22rem; border-radius: 50%; background: rgb(255 255 255 / .16); }
.h-preco-cartao .h-rotulo { color: var(--tinta); }
.h-preco-cartao h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.h-preco-valor { margin-top: 1rem; display: grid; font: 700 clamp(4rem, 2.5rem + 6vw, 7.5rem)/.9 var(--fonte-titulo); letter-spacing: -.045em; }
.h-preco-valor small { margin-top: .625rem; font: 700 1.25rem/1.3 var(--fonte-texto); letter-spacing: 0; }
.h-preco-detalhe { margin-top: .5rem; font-weight: 600; }
.h-preco-dir { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.home .duvidas { gap: 1rem; }
.h-preco-dir li { display: grid; gap: .25rem; padding: 1.125rem 1.375rem; border-radius: 1.125rem; background: var(--papel); }
.h-preco-dir b { font: 700 1.1875rem/1.2 var(--fonte-titulo); }
.h-preco-dir span { color: var(--tinta-suave); font-weight: 600; }
.h-preco-nota { margin-top: 1rem; text-align: center; font-size: .875rem; color: var(--tinta-suave); }

/* Chamada final */
.h-final { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 1.25rem; text-align: center; padding: var(--respiro) clamp(1rem, 4vw, 2rem); background: var(--tinta); color: var(--papel); }
.h-final::before { content: ""; position: absolute; z-index: -1; inset: 0; background: repeating-radial-gradient(circle at 50% 135%, transparent 0 54px, rgb(255 255 255 / .045) 54px 56px); }
.h-final h2 { font-size: clamp(2.25rem, 1.2rem + 4vw, 4.25rem); max-width: 16ch; }
.h-final p { max-width: 40ch; font-size: 1.1875rem; color: rgb(255 255 255 / .75); }
.h-final .botao { margin-top: .75rem; }

/* Entrada suave ao rolar */
@media (prefers-reduced-motion: no-preference) {
	.home.revela .h-surgir { opacity: 0; translate: 0 1.5rem; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
	.home.revela .h-surgir.visto { opacity: 1; translate: 0 0; }
}

@media (width < 64rem) {
	.h-hero { grid-template-columns: minmax(0, 1fr); }
	.h-hero-texto { max-width: 40rem; }
	.h-painel { margin-inline: auto; }
	.h-cena { max-width: 36rem; width: 100%; margin-inline: auto; margin-top: 1.5rem; }
	.h-segmentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.h-lado, .h-versus, .h-preco-cartao { grid-template-columns: minmax(0, 1fr); }
	.h-relatorio { rotate: 0deg; }
}
@media (width < 48rem) {
	.h-passos, .h-segmentos { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 40rem) {
	.h-hero-acoes .botao { width: 100%; }
	.h-cena { padding: 0 0 0; }
	.h-painel { padding: 1rem; border-radius: 1.375rem; gap: .875rem; }
	.h-contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .875rem; }
	.h-tel { font-size: .875rem; }
	.h-status { font-size: .75rem; padding: .25rem .5rem; }
	.h-rel-teclas div { grid-template-columns: minmax(0, 1fr); row-gap: .25rem; padding: .625rem; }
	.h-rel-teclas kbd { grid-row: auto; width: 1.75rem; height: 1.75rem; font-size: .875rem; }
	.h-rel-linhas li { grid-template-columns: auto 1fr auto; }
	.h-rel-linhas b { display: none; }
	.h-relatorio { padding: 1rem; }
	.h-rel-topo { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.h-usos li, .h-fila li, .h-status, .h-recado p, .h-teclado span, .h-segmentos li { transition: none; }
	.h-fila .h-ligando .h-status::before { animation: none; }
}
.h-fila, .h-recado p, .h-contadores { transition: opacity .4s ease; }
.h-cena.trocando .h-fila, .h-cena.trocando .h-recado p, .h-cena.trocando .h-contadores { opacity: 0; }

@container (width < 33.5rem) {
	.h-painel { width: 100%; }
	.h-celular { left: auto; right: -.5rem; top: -2.75rem; bottom: auto; width: 7.25rem; padding: .375rem; border-radius: 1.375rem; rotate: 5deg; }
	.h-celular-tela { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: .25rem .5rem; padding: .5rem .625rem; border-radius: 1.0625rem; }
	.h-cel-estado { grid-column: 1 / -1; font-size: .625rem; }
	.h-cel-avatar { width: 2rem; height: 2rem; }
	.h-cel-avatar svg { width: 1rem; height: 1rem; }
	.h-teclado { display: none; }
	.h-painel-topo { padding-right: 6rem; }
	.h-ao-vivo { display: none; }
}
@media (width < 40rem) {
	.h-usos { gap: .375rem; flex-wrap: nowrap; }
	.h-usos li { padding: .375rem .6875rem; font-size: .875rem; }
}