/*
 * Teste sua conexão · EVO
 * Based on brand.evo.digital: EVO Core + Expressive mode (B2C).
 * Primitives feed semantic tokens only; components read semantic tokens.
 */
:root{
 /* Primitives (brand palette) */
 --evo-azul:#003DA5;--evo-azul-claro:#4EC3E0;--evo-marinho:#243069;
 --evo-ceu:#0084E9;--evo-aqua:#00B6C2;--evo-folha:#75BB53;--evo-bahia:#FF9000;--evo-rosa:#E12066;
 /* Semantic */
 --background:#F4F7FC;--surface:#FFFFFF;--surface-soft:#EEF4FC;
 --foreground:#1F2A44;--heading:var(--evo-marinho);--muted:#4F5D75;
 --primary:var(--evo-azul);--primary-hover:#002F80;--on-primary:#FFFFFF;
 --accent:var(--evo-azul-claro);--on-accent:var(--evo-marinho);
 --border:#D5DFEE;--ring:var(--evo-ceu);
 --ok:#1B6B3A;--ok-line:var(--evo-folha);
 --attention:#8A4B00;--attention-bg:#FFF4E5;--attention-line:var(--evo-bahia);
 --partial:#4F5D75;
 /* Shape, type, motion */
 --radius-card:24px;--radius-sm:12px;--radius-pill:999px;
 --shadow-1:0 1px 2px rgba(36,48,105,.06),0 6px 20px rgba(36,48,105,.06);
 --font-display:"Titillium Web",Arial,sans-serif;--font-text:"Open Sans",Arial,sans-serif;
 --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font:400 17px/1.55 var(--font-text)}
h1,h2,h3{font-family:var(--font-display);color:var(--heading);line-height:1.15;margin:0 0 .5em;font-weight:700}
p{margin:0 0 1em}
[hidden]{display:none!important}
img{max-width:100%}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:12px;top:-60px;background:var(--surface);color:var(--primary);padding:10px 16px;border-radius:var(--radius-pill);z-index:10;font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}

/* Header */
.hero{background:var(--primary);color:var(--on-primary);padding:28px 0 72px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;border:56px solid var(--accent);opacity:.35}
.hero .wrap{position:relative;z-index:1}
.logo{width:132px;height:auto;display:block;margin-bottom:36px}
.hero h1{color:var(--on-primary);font-size:clamp(2.1rem,6vw,3.4rem);letter-spacing:-.01em;margin-bottom:.25em}
.lead{font-size:clamp(1.05rem,2.4vw,1.25rem);max-width:34ch;margin:0;opacity:.95}
.connection-type{margin:12px 0 0;font-weight:600}
.connection-provider{margin:6px 0 0;font-size:.82rem;overflow-wrap:anywhere}
.connection-choice{border:0;padding:0;margin:0 0 24px;min-width:0}
.connection-choice legend{font-size:.88rem;font-weight:400;margin-bottom:10px;color:var(--muted)}
.connection-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;background:var(--surface-soft);border-radius:var(--radius-pill);max-width:340px}
.connection-option{position:relative;cursor:pointer;min-width:0}
.connection-option input{position:absolute;opacity:0;width:1px;height:1px}
.connection-option span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--muted);font-size:.95rem;font-weight:400;transition:background .15s,color .15s}
.connection-option svg{width:20px;height:20px;flex-shrink:0}
.connection-option input:checked+span{color:var(--primary);background:var(--surface);font-weight:600}
.connection-choice:not(:disabled) .connection-option:hover span{color:var(--primary)}
.connection-option input:focus-visible+span{outline:3px solid var(--ring);outline-offset:3px}
.connection-choice:disabled .connection-option{cursor:default}
.connection-choice .hint{margin:8px 0 0}

/* Layout */
.grid{display:grid;gap:20px;margin-top:-44px;position:relative;z-index:2;padding-bottom:32px}
.wide{grid-column:1/-1}
@media(min-width:900px){.grid{grid-template-columns:1.15fr 1fr;align-items:start}}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-1);padding:clamp(20px,4vw,32px);min-width:0;scroll-margin-top:16px;animation:rise .35s var(--ease)}
.card h2{font-size:clamp(1.45rem,3.4vw,1.85rem)}
.card--step,.card--action{border:0;box-shadow:none}
.card--step h2{font-size:1.5rem}
.card--step #stepHelp{color:var(--muted);max-width:45ch;margin-bottom:24px}
.card--action{background:transparent;padding-top:24px}
@media(min-width:900px){.card--action{margin-top:44px}}
@media(max-width:899px){.grid{gap:8px}.card--action{padding-top:16px}.connection-options{max-width:none}}
.card--report{background:var(--evo-marinho);border-color:var(--evo-marinho);color:var(--on-primary)}
.card--report h2{color:var(--on-primary)}
.card--report .meta,.card--report .status{color:#DCE4F5}
.card--report .meta{margin-top:14px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.eyebrow{display:inline-block;font:600 .82rem/1.3 var(--font-text);letter-spacing:0;color:var(--muted);margin-bottom:20px}
.stack{display:grid;gap:18px;margin-top:8px}
.hint,.meta,.fineprint{color:var(--muted);font-size:.92rem}
.fineprint{margin:18px 0 0}
.optional{font-weight:400;color:var(--muted)}
.subhead{font-size:1.2rem;margin-top:28px}
.emphasis{font-weight:600;color:var(--heading);margin:16px 0 0}

/* Fields */
.field{display:grid;gap:8px;font-weight:600;color:var(--heading)}
.field input{font:inherit;font-weight:400;color:var(--foreground);min-height:48px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%}
.field input:focus-visible{border-color:var(--ring);outline-offset:0}
.field input[readonly]{background:var(--surface-soft)}

/* Buttons */
.btn{font:700 1.02rem/1.2 var(--font-display);min-height:48px;padding:12px 24px;border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--primary{background:var(--primary);color:var(--on-primary)}
.btn--primary:hover:not(:disabled){background:var(--primary-hover)}
.btn--outline{background:var(--surface);color:var(--primary);border-color:var(--primary)}
.btn--outline:hover:not(:disabled){background:var(--surface-soft)}
.btn--ghost{background:transparent;color:var(--primary)}
.btn--accent{background:var(--accent);color:var(--on-accent)}
.btn--light{background:var(--accent);color:var(--on-accent)}
.btn--lg{min-height:58px;font-size:1.15rem;padding:14px 32px;width:100%}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
@media(max-width:599px){.actions .btn{flex:1 1 100%}}
@media(min-width:600px){.btn--lg{width:auto}}

/* Welcome */
.checklist{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.checklist li{padding-left:34px;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:var(--surface-soft);border:2px solid var(--accent)}
.checklist li::after{content:"";position:absolute;left:8px;top:.45em;width:5px;height:10px;border:solid var(--primary);border-width:0 2px 2px 0;transform:rotate(45deg)}
.notice{margin:18px 0 0;padding:16px 18px;border-radius:var(--radius-sm);background:var(--surface-soft);border-left:5px solid var(--primary);font-weight:600;color:var(--heading);position:sticky;top:12px;z-index:3}
.progress-wrap .status{margin:14px 0 8px;font-weight:600;color:var(--heading)}
.progress-wrap .status:empty{display:none}
progress{width:100%;height:10px;border:0;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-soft);accent-color:var(--primary);appearance:none}
progress::-webkit-progress-bar{background:var(--surface-soft)}
progress::-webkit-progress-value{background:var(--primary);border-radius:var(--radius-pill);transition:width .4s var(--ease)}
progress::-moz-progress-bar{background:var(--primary)}
.status{font-size:.95rem;margin:8px 0 0}
.status:empty{display:none}

/* Photo */
#photoPreview{margin:12px 0 0;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-soft)}
#photoThumb{display:block;width:100%;max-height:260px;object-fit:contain}
#photoCaption{font-size:.85rem;padding:10px 14px;color:var(--muted)}
dialog{width:min(560px,100% - 24px);border:0;border-radius:var(--radius-card);padding:24px;box-shadow:0 20px 60px rgba(16,27,54,.35)}
dialog::backdrop{background:rgba(16,27,54,.7)}
#cameraVideo{width:100%;max-height:55vh;border-radius:var(--radius-sm);background:#111;display:block;margin-bottom:8px}

/* Result */
.verdict{font:700 clamp(1.35rem,3.6vw,1.75rem)/1.25 var(--font-display);color:var(--heading);margin:4px 0 16px}
.device-callout{background:var(--surface-soft);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:20px}
.device-callout h3{font-size:1.1rem;margin:0 0 4px}
.device-callout p{margin:0;color:var(--muted)}
.device-callout p:empty{display:none}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:700px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;min-width:0;display:flex;flex-direction:column;gap:6px}
.metric span{font-size:.88rem;color:var(--muted);line-height:1.35}
.metric strong{font:700 1.45rem/1.15 var(--font-display);color:var(--primary);overflow-wrap:anywhere}
.metric small{font-size:.8rem;color:var(--muted)}
.metric small:empty{display:none}
.metric[data-status=attention]{border-color:var(--attention-line);background:var(--attention-bg)}
.metric[data-status=attention] strong{color:var(--attention)}


@media(min-width:700px){.metric:nth-child(n+5){grid-column:span 2}}

.services{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.service{border:1px solid var(--border);border-top:5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.service h3{font-size:1.02rem;margin:0 0 6px;color:var(--foreground)}
.service strong{font:700 .95rem/1.2 var(--font-display)}
.service strong::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:currentColor;vertical-align:.05em}
.service p{font-size:.88rem;color:var(--muted);margin:8px 0 0}
.service[data-status=ok]{border-top-color:var(--ok-line)}.service[data-status=ok] strong{color:var(--ok)}
.service[data-status=attention]{border-top-color:var(--attention-line)}.service[data-status=attention] strong{color:var(--attention)}
.service[data-status=partial] strong{color:var(--partial)}

/* Comparison */
.pill-note{display:inline-block;background:var(--surface-soft);padding:8px 14px;border-radius:var(--radius-pill);font-size:.92rem;color:var(--heading)}
.table-scroll{overflow-x:auto}
.comparison-table{width:100%;border-collapse:collapse;font-size:.97rem;min-width:420px}
.comparison-table th,.comparison-table td{padding:14px 10px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.comparison-table thead th{font-family:var(--font-display);color:var(--heading);background:var(--surface-soft)}
.comparison-table thead th:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.comparison-table thead th:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.comparison-table tbody th{font-weight:600}

.foot{color:var(--muted);font-size:.85rem;padding:8px 0 calc(28px + env(safe-area-inset-bottom));text-align:center}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
.metric:nth-child(6){grid-column:1/-1}
.metric:nth-child(6) strong{font-size:1.15rem}
@media(max-width:699px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}