/* ATIV SpeedTest. Fontes Archivo e Sora (SIL Open Font License), hospedadas localmente. */
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Sora;src:url(/fonts/sora-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
  --fundo:#0c0f0c;--card:#121512;--borda:#232923;--apagado-seg:#1d231c;
  --verde:#76f53a;--verde-escuro:#17300c;
  --texto:#f4f6f2;--suave:#a4aba1;
  --fase:var(--verde);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--fundo);color:var(--texto);
  font-family:Sora,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;
  position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(48vmax 40vmax at 78% 38%,rgba(118,245,58,.09),transparent 65%),
  radial-gradient(40vmax 32vmax at 0% 100%,rgba(118,245,58,.05),transparent 62%)}
.larga{font-family:Archivo,"Arial Black",Impact,sans-serif;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:800}

header{border-bottom:1px solid var(--borda)}
.faixa{max-width:1180px;margin:0 auto;padding:0 1.5rem}
header .faixa{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{height:46px;width:auto;display:block}
.aviso{font-size:.8rem;color:var(--suave);border:1px solid var(--borda);border-radius:10px;padding:.45rem .8rem}

main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:center;padding-top:3.5rem;padding-bottom:3rem}
.olho{color:var(--verde);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:.98;letter-spacing:-.035em;margin:0}
h1 span{color:var(--verde);display:block}
.sub{color:var(--suave);font-size:1.05rem;margin:1.2rem 0 1.6rem;max-width:36ch}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
.iniciar{background:var(--verde);color:#071003;border:0;border-radius:12px;font-weight:700;padding:1rem 1.7rem;font-size:1rem;transition:filter .15s}
.iniciar:hover{filter:brightness(1.1)}
.iniciar:disabled{background:var(--verde-escuro);color:var(--verde);cursor:default;filter:none}

/* medidor segmentado */
.medidor{position:relative;width:100%;max-width:540px;margin:0 auto}
.medidor svg{display:block;width:100%;height:auto;overflow:visible}
.seg{stroke:var(--apagado-seg);stroke-width:3.4;stroke-linecap:round;transition:stroke .18s}
.seg.on{stroke:var(--fase)}
.seg.ponta{stroke:#fff}
#segs{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--fase) 40%,transparent))}
.aro{fill:none;stroke:var(--borda);stroke-width:1}
.marca{fill:var(--suave);font-size:11px;text-anchor:middle;dominant-baseline:middle;font-family:Sora,sans-serif}
.centro{position:absolute;left:0;right:0;top:42%;text-align:center;pointer-events:none}
.valor{font-size:clamp(2.6rem,9.5vw,4.6rem);line-height:.9;letter-spacing:-.04em}
.unidade{color:var(--suave);margin-top:.4rem}
.fase{margin-top:1.1rem;color:var(--fase);font-weight:600;transition:color .3s}

.seu-ip{margin:.4rem 0 0;text-align:center;color:var(--suave);font-size:.9rem;overflow-wrap:anywhere}
.seu-ip b{color:var(--texto);font-weight:500;margin:0 .5rem 0 .35rem}
.seu-ip i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--verde);border:1px solid var(--verde-escuro);background:var(--verde-escuro);border-radius:6px;padding:.12rem .4rem;white-space:nowrap}
/* leituras */
.leituras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;padding-bottom:3rem}
.leitura{background:var(--card);border:1px solid var(--borda);border-radius:16px;padding:1.1rem 1.2rem;transition:border-color .3s}
.leitura.ativa{border-color:color-mix(in srgb,var(--verde) 55%,var(--borda))}
.leitura .nome{color:var(--suave);font-size:.9rem;display:flex;align-items:center;gap:.5rem}
.leitura .nome svg{width:16px;height:16px;stroke:var(--verde);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leitura .num{font-size:1.9rem;letter-spacing:-.03em;margin-top:.35rem}
.leitura .num small{font-family:Sora,sans-serif;font-stretch:100%;font-variation-settings:normal;font-size:.8rem;font-weight:400;color:var(--suave);margin-left:.35rem;letter-spacing:0}
.grafico{position:relative;height:44px;margin-top:.7rem;color:var(--verde)}
#tUp{color:var(--texto)}
.grafico svg{display:block;width:100%;height:100%;overflow:visible}
.grafico .linha{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ponto{position:absolute;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:0;transform:translate(-50%,-50%);box-shadow:0 0 12px currentColor}
.vazio{height:44px;margin-top:.7rem;border-top:1px dashed var(--borda)}

/* resultado */
.resultado{display:none;background:var(--card);border:1px solid var(--borda);border-radius:20px;margin-bottom:3rem;overflow:hidden}
.resultado.visivel{display:block}
.r-topo{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.5rem;border-bottom:1px solid var(--borda);color:var(--suave);font-size:.9rem}
.r-topo strong{color:var(--texto);font-size:1rem}
.r-corpo{display:grid;grid-template-columns:1.25fr 1.25fr 1fr;}
.r-corpo>div{padding:1.6rem 1.5rem}
.r-corpo>div+div{border-left:1px solid var(--borda)}
.r-rot{color:var(--suave);font-size:.9rem}
.r-grande{font-size:clamp(2.6rem,6vw,4rem);line-height:1;letter-spacing:-.04em;margin-top:.4rem}
.r-grande.d{color:var(--verde)}
.r-un{color:var(--suave);font-size:.9rem;margin-top:.3rem}
.r-lista{margin:0;display:grid;gap:.75rem}
.r-lista div{display:flex;justify-content:space-between;gap:1rem}
.r-ip{overflow-wrap:anywhere;text-align:right;font-size:.85rem}
.r-lista dt{color:var(--suave)}.r-lista dd{margin:0;font-weight:600}
.r-base{display:flex;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--borda);flex-wrap:wrap}
.r-url{flex:1;min-width:14rem;background:var(--fundo);border:1px solid var(--borda);border-radius:12px;padding:.8rem 1rem;color:var(--texto);overflow-wrap:anywhere}
.copiar{background:var(--verde);color:#071003;border:0;border-radius:12px;font-weight:700;padding:.8rem 1.4rem}

@media (max-width:860px){
  main{grid-template-columns:1fr;gap:1.5rem;padding-top:2rem}
  .medidor{order:-1;max-width:400px}
  .olho,.sub{display:none}
  h1{font-size:1.7rem}h1 span{display:inline}
  .intro{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .leituras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r-corpo{grid-template-columns:1fr 1fr}
  .r-corpo>div:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--borda)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.pr main{padding-bottom:2.5rem}
.pr .quando{color:var(--suave);margin:0 0 1rem}
.pr h1 span{display:block}
.pr .sub{max-width:40ch;color:var(--texto);opacity:.85}
.acoes{display:flex;gap:.75rem;flex-wrap:wrap}
.acoes a,.acoes button{border-radius:12px;font-weight:700;padding:1rem 1.6rem;text-decoration:none;font-size:1rem}
.acoes a{background:var(--verde);color:#071003}
.acoes a:hover{filter:brightness(1.1)}
.acoes button{background:transparent;color:var(--texto);border:1px solid var(--borda)}
.acoes button:hover{border-color:var(--verde)}
.pr .leituras{padding-bottom:1.25rem}
.pr .leitura .num{font-size:2.2rem}
.rodape-r{display:flex;flex-wrap:wrap;gap:.6rem 2.5rem;margin:0 0 3rem;padding-top:1.1rem;border-top:1px solid var(--borda);color:var(--suave);font-size:.92rem}
.rodape-r div{display:flex;gap:.5rem}.rodape-r dd{margin:0;color:var(--texto);font-weight:500;overflow-wrap:anywhere}
@media (max-width:860px){.pr .intro{display:block}.pr .sub{display:block}.pr h1{font-size:2.2rem}.pr h1 span{display:inline}}
.pr h1.frase{font-size:clamp(1.45rem,2.8vw,2.25rem);line-height:1.14;letter-spacing:-.02em;margin:0 0 1.8rem;max-width:22ch}
.pr h1.frase span{display:inline}
button.aviso{background:transparent;cursor:pointer}
button.aviso:hover{border-color:var(--verde);color:var(--texto)}
@media (max-width:860px){.pr h1.frase{font-size:1.4rem;max-width:none}}

[hidden]{display:none!important}
.recado{margin:1.2rem 0 0;padding:.85rem 1rem;border:1px solid var(--borda);border-left:3px solid var(--verde);border-radius:10px;background:var(--card);color:var(--texto);max-width:44ch}
.r-url{text-decoration:none}
a.r-url:hover{border-color:var(--verde)}
a:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
.nf{padding:5rem 0;max-width:40rem}
.nf p{color:var(--suave);margin:1rem 0 1.8rem}

/* ---- smartphone ---- */
@media (max-width:860px){
  .faixa{padding:0 1.1rem}
  header .faixa{height:64px}
  .logo{height:40px}
  /* tela do teste: título, medidor, botão largo, nessa ordem */
  body:not(.pr) main{gap:1rem;padding-top:1.25rem;padding-bottom:1.75rem}
  body:not(.pr) .intro{display:contents}
  body:not(.pr) .intro>div{order:0;text-align:center}
  body:not(.pr) .medidor{order:1}
  body:not(.pr) .iniciar{order:2;width:100%;padding:1.05rem;font-size:1.05rem}
  body:not(.pr) h1{font-size:clamp(1.35rem,6.2vw,1.8rem)}
  .recado{margin:.9rem auto 0;text-align:left;max-width:none}
  .marca{font-size:14px}
  .valor{font-size:clamp(2.4rem,13vw,3.6rem)}
  .seu-ip{font-size:.82rem}
  .seu-ip b{display:inline-block;margin:0 .35rem}
  /* leituras em 2 colunas compactas */
  .leituras{gap:.7rem;padding-bottom:1.75rem}
  .leitura{padding:.9rem .95rem;border-radius:14px}
  .leitura .num{font-size:1.45rem}
  .pr .leitura .num{font-size:1.45rem}
  .leitura .num small{font-size:.72rem;margin-left:.25rem}
  /* cartão de resultado */
  .resultado{border-radius:16px;margin-bottom:2rem}
  .r-topo{padding:.9rem 1.1rem}
  .r-corpo>div{padding:1.15rem 1.1rem}
  .r-grande{font-size:clamp(1.9rem,9vw,2.6rem)}
  .r-base{padding:.9rem 1.1rem;flex-direction:column}
  .r-url{min-width:0}
  .copiar{width:100%;padding:.95rem}
  /* página de resultado compartilhado */
  .pr main{padding-top:1rem;gap:1.25rem}
  .acoes a,.acoes button{flex:1 1 9rem;text-align:center}
  .rodape-r{gap:.55rem 1.5rem;margin-bottom:2rem}
}
@media (max-width:380px){
  .faixa{padding:0 .85rem}
  .leitura .num,.pr .leitura .num{font-size:1.25rem}
}
/* celular deitado: medidor não pode passar da altura da tela */
@media (max-width:860px) and (orientation:landscape){
  .medidor{max-width:min(400px,62vh)}
}