/* ==========================================================================
   LógoSpeed — sistema visual
   Baseado no manual de marca da Lógo Telecom.
   Teal #25B1B0 (Pantone P 124-6 C) · Amarelo #F3C527 (Pantone P 7-8 C)
   Tipografia: Nunito (substituta livre da Omnes, do manual)
   Princípio do manual: formas orgânicas, sem ângulos retos.
   ========================================================================== */

@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url('fonts/nunito-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url('fonts/nunito-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------- tokens */
:root {
	--teal: #25b1b0;
	--teal-esc: #1b8f8e;
	--teal-claro: #6fd0cf;
	--amarelo: #f3c527;
	--amarelo-esc: #d9a913;

	--fundo: #fbfaf6;
	--fundo-alt: #f3f1ea;
	--superficie: #ffffff;
	--borda: #e8e5db;
	--texto: #263238;
	--texto-suave: #6c7a80;
	--sombra: 0 2px 4px rgba(38, 50, 56, .04), 0 12px 32px rgba(38, 50, 56, .07);
	--sombra-alta: 0 4px 10px rgba(38, 50, 56, .07), 0 24px 60px rgba(38, 50, 56, .12);

	--trilho: #e2e0d6;

	--r-xl: 34px;
	--r-lg: 26px;
	--r-md: 18px;
	--r-pill: 999px;

	--larg: 1120px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) {
		--fundo: #0f1a1c;
		--fundo-alt: #152427;
		--superficie: #16282b;
		--borda: #24403f;
		--texto: #eef5f4;
		--texto-suave: #94adae;
		--trilho: #22383a;
		--sombra: 0 2px 4px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .3);
		--sombra-alta: 0 4px 10px rgba(0, 0, 0, .25), 0 24px 60px rgba(0, 0, 0, .45);
	}
}

:root[data-tema="escuro"] {
	--fundo: #0f1a1c;
	--fundo-alt: #152427;
	--superficie: #16282b;
	--borda: #24403f;
	--texto: #eef5f4;
	--texto-suave: #94adae;
	--trilho: #22383a;
	--sombra: 0 2px 4px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .3);
	--sombra-alta: 0 4px 10px rgba(0, 0, 0, .25), 0 24px 60px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------- base */
* { box-sizing: border-box; }

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

body {
	margin: 0;
	min-height: 100vh;
	background: var(--fundo);
	color: var(--texto);
	font-family: 'Nunito', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* manchas orgânicas de fundo — o manual pede formas sem ângulos retos */
body::before,
body::after {
	content: '';
	position: fixed;
	z-index: 0;
	border-radius: 50%;
	filter: blur(110px);
	pointer-events: none;
}
body::before {
	width: 30vw; height: 30vw;
	min-width: 260px; min-height: 260px;
	top: -12vw; right: -8vw;
	background: var(--amarelo);
	opacity: .13;
}
body::after {
	width: 28vw; height: 28vw;
	min-width: 240px; min-height: 240px;
	bottom: -12vw; left: -9vw;
	background: var(--teal);
	opacity: .11;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) body::before { opacity: .11; }
	:root:not([data-tema="claro"]) body::after { opacity: .13; }
}
:root[data-tema="escuro"] body::before { opacity: .11; }
:root[data-tema="escuro"] body::after { opacity: .13; }

.env {
	position: relative;
	z-index: 1;
	max-width: var(--larg);
	margin: 0 auto;
	padding: 0 20px;
}

/* --------------------------------------------------------- cabeçalho */
header {
	padding: 22px 0 6px;
}
.barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.marca img { display: block; height: 44px; width: auto; }
.marca .escuro { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .marca .claro { display: none; }
	:root:not([data-tema="claro"]) .marca .escuro { display: block; }
}
:root[data-tema="escuro"] .marca .claro { display: none; }
:root[data-tema="escuro"] .marca .escuro { display: block; }

.acoes-topo { display: flex; align-items: center; gap: 8px; }

.btn-icone {
	display: inline-grid;
	place-items: center;
	width: 42px; height: 42px;
	border: 1px solid var(--borda);
	border-radius: var(--r-pill);
	background: var(--superficie);
	color: var(--texto-suave);
	cursor: pointer;
	transition: color .18s, border-color .18s, transform .18s;
}
.btn-icone:hover { color: var(--teal); border-color: var(--teal); transform: translateY(-1px); }
.btn-icone svg { width: 19px; height: 19px; fill: currentColor; }
.btn-icone .i-escuro { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .btn-icone .i-claro { display: none; }
	:root:not([data-tema="claro"]) .btn-icone .i-escuro { display: block; }
}
:root[data-tema="escuro"] .btn-icone .i-claro { display: none; }
:root[data-tema="escuro"] .btn-icone .i-escuro { display: block; }

/* --------------------------------------------------------- hero */
.hero { text-align: center; padding: 14px 0 4px; }
.hero h1 {
	margin: 0;
	font-size: clamp(1.9rem, 5.2vw, 3rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.12;
}
.hero h1 .destaque { color: var(--teal); }
.hero p {
	margin: 10px auto 0;
	max-width: 46ch;
	color: var(--texto-suave);
	font-size: clamp(.98rem, 2.3vw, 1.08rem);
}

/* --------------------------------------------------------- medidor */
.palco {
	display: grid;
	justify-items: center;
	gap: 16px;
	padding: 14px 0 2px;
}

.medidor {
	position: relative;
	width: min(320px, 74vw);
	aspect-ratio: 200 / 176;
}
.medidor svg { width: 100%; height: 100%; display: block; overflow: visible; }

.arco-trilho { stroke: var(--trilho); }
/* antes do primeiro teste o número fica discreto; ao terminar volta cheio */
.medidor.repouso .valor-grande { color: var(--texto-suave); opacity: .45; }
.arco-vivo {
	stroke: var(--teal);
	transition: stroke .4s ease, stroke-dashoffset .22s linear;
}
/* o motor envia dados a cada 200ms; a transição preenche o intervalo
   para o arco andar liso em vez de pular cinco vezes por segundo */
#arcoProgresso { transition: stroke-dashoffset .22s linear; }
.medidor[data-fase="upload"] .arco-vivo { stroke: var(--amarelo); }

.medidor-centro {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	pointer-events: none;
	padding-top: 13%;
}
.fase-rotulo {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--texto-suave);
	min-height: 1.2em;
}
.valor-grande {
	font-size: clamp(3.1rem, 13vw, 4.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	margin: 2px 0;
}
.unidade {
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--texto-suave);
}

/* pulso suave enquanto o teste roda */
.medidor.ativo .halo { animation: pulso 2.4s ease-in-out infinite; }
@keyframes pulso {
	0%, 100% { opacity: .10; transform: scale(1); }
	50% { opacity: .22; transform: scale(1.04); }
}
.halo { transform-origin: center; opacity: 0; transition: opacity .4s; }

@media (prefers-reduced-motion: reduce) {
	.medidor.ativo .halo { animation: none; }
}

/* --------------------------------------------------------- botão */
.btn-principal {
	appearance: none;
	border: 0;
	border-radius: var(--r-pill);
	padding: 17px 46px;
	font-family: inherit;
	font-size: 1.08rem;
	font-weight: 800;
	letter-spacing: .01em;
	color: #17302f;
	background: var(--amarelo);
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(243, 197, 39, .38);
	transition: transform .16s, box-shadow .16s, background .2s;
}
.btn-principal:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(243, 197, 39, .46); }
.btn-principal:active { transform: translateY(0); }
.btn-principal:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.btn-principal.parar {
	background: transparent;
	color: var(--texto-suave);
	border: 2px solid var(--borda);
	box-shadow: none;
}
.btn-principal.parar:hover { color: var(--texto); border-color: var(--texto-suave); box-shadow: none; }

/* --------------------------------------------------------- linha do tempo */
.linha-tempo {
	width: 100%;
	max-width: 760px;
	height: 0;
	margin-top: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity .45s, height .45s, margin-top .45s;
}
.linha-tempo.visivel { height: 74px; margin-top: 4px; opacity: 1; }
.linha-tempo svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------- métricas */
.metricas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	padding: 18px 0 8px;
}
@media (min-width: 720px) {
	.metricas { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

.cartao {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: var(--r-lg);
	padding: 20px 18px;
	box-shadow: var(--sombra);
	transition: transform .22s, box-shadow .22s;
}
.cartao.aceso { transform: translateY(-3px); box-shadow: var(--sombra-alta); }

.cartao .topo {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--texto-suave);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cartao .topo svg { width: 17px; height: 17px; flex: none; }
.cartao .num {
	font-size: clamp(1.7rem, 6vw, 2.15rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	margin-top: 8px;
}
.cartao .un { font-size: .8rem; font-weight: 700; color: var(--texto-suave); margin-left: 5px; }

/* sem valor ainda: o traço fica discreto, sem virar um risco no cartão */
.cartao.vazio .num { color: var(--texto-suave); opacity: .38; }

.cartao[data-m="download"] .topo svg { fill: var(--teal); }
.cartao[data-m="upload"] .topo svg { fill: var(--amarelo-esc); }
.cartao[data-m="ping"] .topo svg,
.cartao[data-m="jitter"] .topo svg { fill: var(--texto-suave); }

/* --------------------------------------------------------- rodapé de dados */
.dados {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
	padding: 6px 0 4px;
}
.pilula {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: var(--r-pill);
	padding: 8px 15px;
	font-size: .86rem;
	color: var(--texto-suave);
	max-width: 100%;
}
.pilula b { color: var(--texto); font-weight: 700; overflow-wrap: anywhere; }
.pilula svg { width: 15px; height: 15px; fill: var(--teal); flex: none; }

/* --------------------------------------------------------- compartilhar */
.compartilhar {
	display: none;
	margin: 22px auto 0;
	max-width: 560px;
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: var(--r-lg);
	padding: 20px;
	box-shadow: var(--sombra);
	text-align: center;
}
.compartilhar.visivel { display: block; animation: sobe .45s ease both; }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.compartilhar h2 {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 800;
}
.compartilhar p { margin: 0 0 14px; color: var(--texto-suave); font-size: .9rem; }
.linha-copia { display: flex; gap: 8px; }
.linha-copia input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--borda);
	border-radius: var(--r-pill);
	background: var(--fundo-alt);
	color: var(--texto-suave);
	font-family: inherit;
	font-size: .85rem;
	padding: 11px 16px;
}
.btn-copiar {
	border: 0;
	border-radius: var(--r-pill);
	background: var(--teal);
	color: #fff;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 800;
	padding: 11px 20px;
	cursor: pointer;
	transition: background .18s, transform .16s;
	flex: none;
}
.btn-copiar:hover { background: var(--teal-esc); transform: translateY(-1px); }
.btn-copiar.ok { background: var(--amarelo); color: #17302f; }

/* --------------------------------------------------------- rodapé */
footer {
	text-align: center;
	padding: 26px 0 28px;
	color: var(--texto-suave);
	font-size: .84rem;
}
footer a { color: var(--teal); text-decoration: none; font-weight: 700; }
footer a:hover { text-decoration: underline; }
.selo { margin-top: 6px; opacity: .75; font-size: .78rem; }

/* --------------------------------------------------------- utilidades */
.oculto { display: none !important; }
.sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- aviso de oferta */
.oferta-fundo {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(18, 32, 34, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: fundoEntra .25s ease both;
}
/* mais específico que a regra acima, para o atributo hidden vencer */
.oferta-fundo[hidden] { display: none; }

@keyframes fundoEntra { from { opacity: 0; } to { opacity: 1; } }

.oferta {
	position: relative;
	width: min(440px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--superficie);
	border-radius: var(--r-xl);
	padding: 34px 30px 26px;
	text-align: center;
	box-shadow: var(--sombra-alta);
	animation: ofertaEntra .32s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes ofertaEntra {
	from { opacity: 0; transform: translateY(18px) scale(.96); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.oferta-fundo, .oferta { animation: none; }
}

.oferta-fechar {
	position: absolute;
	top: 12px; right: 12px;
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--texto-suave);
	cursor: pointer;
	transition: background .18s, color .18s;
}
.oferta-fechar:hover { background: var(--fundo-alt); color: var(--texto); }
.oferta-fechar svg { width: 20px; height: 20px; fill: currentColor; }

.oferta-medida {
	display: inline-block;
	background: var(--fundo-alt);
	border-radius: var(--r-pill);
	padding: 6px 15px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--texto-suave);
	letter-spacing: .02em;
}

.oferta-titulo {
	margin: 14px 0 0;
	font-size: 1.42rem;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -.015em;
}

.oferta-subtitulo {
	margin: 10px 0 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--texto-suave);
	line-height: 1.4;
}

.oferta-planos {
	margin: 22px 0 4px;
}

.oferta-plano {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 26px 20px 20px;
	border-radius: var(--r-lg);
	border: 2px solid var(--borda);
	background: var(--superficie);
	text-decoration: none;
	color: var(--texto);
	transition: transform .16s, border-color .18s, box-shadow .18s;
}
.oferta-plano:hover {
	transform: translateY(-3px);
	border-color: var(--teal);
	box-shadow: var(--sombra);
}
.oferta-plano:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* o plano em destaque é o que a marca quer empurrar */
.oferta-plano.destaque {
	border-color: transparent;
	/* um leve gradiente dá profundidade e faz o número saltar */
	background: radial-gradient(120% 120% at 50% 0%, #2cc3c2 0%, var(--teal) 55%, var(--teal-esc) 100%);
	color: #fff;
	box-shadow: 0 10px 26px rgba(37, 177, 176, .32);
}
.oferta-plano.destaque:hover { border-color: transparent; transform: translateY(-4px); box-shadow: 0 16px 36px rgba(37, 177, 176, .45); }

.oferta-plano-etiqueta {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: var(--amarelo);
	color: #17302f;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: var(--r-pill);
}
/* o card em destaque é teal; a etiqueta amarela precisa destacar sobre ele */
.oferta-plano.destaque .oferta-plano-etiqueta { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* a velocidade é a estrela do card: número enorme, "Mega" colada nele */
.oferta-plano-mega {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	line-height: .9;
	margin: 2px 0 2px;
}
.oferta-plano-mega b {
	font-size: 4.2rem;
	font-weight: 900;
	letter-spacing: -.04em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.oferta-plano-mega i {
	font-size: 1.3rem;
	font-weight: 800;
	font-style: normal;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.oferta-plano-preco { margin-top: 6px; font-size: .95rem; font-weight: 600; }
.oferta-plano-preco b { font-size: 1.5rem; font-weight: 800; }
.oferta-plano-obs { font-size: .8rem; opacity: .85; font-weight: 600; }

.oferta-plano-botao {
	margin-top: 16px;
	width: 100%;
	text-align: center;
	padding: 14px 6px;
	border-radius: var(--r-pill);
	background: var(--amarelo);
	color: #17302f;
	font-size: 1rem;
	font-weight: 800;
}
.oferta-plano.destaque .oferta-plano-botao { background: #fff; color: var(--teal-esc); }

.oferta-selo {
	margin-top: 14px;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--teal);
	letter-spacing: -.01em;
}

.oferta-aviso {
	margin: 14px 0 0;
	font-size: .74rem;
	line-height: 1.45;
	color: var(--texto-suave);
	opacity: .9;
}