:root {
  --concreto: #E4E2DC;
  --concreto-2: #D5D2CA;
  --poste: #B8B4AA;
  --poste-sombra: #9C978C;
  --asfalto: #1C2023;
  --asfalto-2: #474D52;
  --cabo: #23272A;
  --aluminio-1: #E3E6E8;
  --aluminio-2: #C3C8CD;
  --aluminio-borda: #8F969D;
  --fibra: #F2C200;
  --fibra-tinta: #6B5300;
  --branco: #F6F5F2;
  --raio: 6px;
  --f-tit: 'Gabarito', system-ui, sans-serif;
  --f-txt: 'Wix Madefor Text', system-ui, sans-serif;
  --f-num: 'Sometype Mono', ui-monospace, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--concreto); color: var(--asfalto); font: 400 1.0625rem/1.65 var(--f-txt); overflow-x: hidden; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--fibra-tinta); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fibra); outline-offset: 2px; border-radius: 3px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--asfalto); color: var(--branco); padding: 8px 12px; z-index: 10; }
.pular:focus { left: 8px; }
.faixa { width: min(100% - 32px, 1120px); margin-inline: auto; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-weight: 500; }

.topo { border-bottom: 1px solid var(--concreto-2); }
.topo-in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 16px; }
.topo-in > a { text-decoration: none; }
.topo nav { display: flex; gap: 22px; font-size: .95rem; }
.topo nav a { text-decoration: none; color: var(--asfalto-2); }
.topo nav a:hover { color: var(--asfalto); text-decoration: underline; }
.logo { font-family: var(--f-tit); font-size: 1.15rem; letter-spacing: -.02em; }
.logo-a { font-weight: 500; }
.logo-b { font-weight: 800; }
@media (max-width: 600px) { .topo nav { display: none; } }

.abre { padding: 20px 0 8px; }
.abre h1 { font: 700 clamp(1.7rem, 6.2vw, 3.4rem)/1.08 var(--f-tit); letter-spacing: -.03em; margin: 0 0 18px; max-width: 19ch; text-wrap: balance; }
.volta { margin: 0 0 6px; font-size: .9rem; }
.volta a { color: var(--asfalto-2); }

/* O poste: coluna de concreto à esquerda, um fio por operadora, e a plaqueta pendurada na ponta. */
.poste { position: relative; margin: 0; display: grid; grid-template-columns: 16px 1fr; column-gap: 0; }
.poste-coluna { grid-row: 1 / span 2; background: linear-gradient(90deg, var(--poste-sombra), var(--poste) 40%, #CFCBC2 70%, var(--poste-sombra)); border-radius: 3px 3px 0 0; position: relative; min-height: 100%; }
.poste-caixa { position: absolute; top: 10px; left: -5px; width: 26px; height: 34px; background: #3A3F43; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.poste-caixa::after { content: ''; position: absolute; inset: 7px 6px auto; height: 3px; background: var(--fibra); border-radius: 1px; }
.fios { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 4px; }
.fio { display: grid; grid-template-columns: minmax(36px, 22%) minmax(0, 1fr); align-items: start; }
.fio-cabo { width: 100%; height: 40px; overflow: visible; }
.fio-cabo path { fill: none; stroke: var(--cabo); stroke-width: 2.5px; stroke-linecap: round; }
.fio-incerto .fio-cabo path { stroke-dasharray: 5 5; stroke: var(--asfalto-2); }
.plaqueta { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'nome preco' 'vel vel' 'depois depois'; column-gap: 10px; row-gap: 0; padding: 6px 10px 7px 26px; margin-top: var(--q, 0); background: linear-gradient(180deg, var(--aluminio-1), var(--aluminio-2)); border: 1px solid var(--aluminio-borda); border-radius: var(--raio); text-decoration: none; box-shadow: 0 1px 2px rgba(20,24,27,.22), 0 6px 14px rgba(20,24,27,.08); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.plaqueta:hover { transform: rotate(-1.2deg) translateY(-1px); box-shadow: 0 2px 4px rgba(20,24,27,.22), 0 10px 20px rgba(20,24,27,.12); text-decoration: none; }
.plaqueta-furo { position: absolute; left: 9px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--concreto); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.plaqueta-nome { grid-area: nome; font: 700 1.02rem/1.25 var(--f-tit); letter-spacing: -.01em; }
.plaqueta-preco { grid-area: preco; font: 500 .86rem/1.3 var(--f-num); text-align: right; align-self: center; white-space: nowrap; }
.plaqueta-vel { grid-area: vel; font: 500 .82rem/1.35 var(--f-num); color: var(--asfalto-2); }
.plaqueta-vel .sobe { white-space: nowrap; }
.plaqueta-vel b { color: var(--asfalto); font-weight: 600; }
.plaqueta-depois { grid-area: depois; justify-self: start; margin-top: 3px; padding: 1px 7px; background: var(--fibra); color: var(--asfalto); font: 600 .8rem/1.45 var(--f-txt); border-radius: 3px; }
.plaqueta-depois.sem { background: transparent; border: 1px dashed var(--asfalto-2); color: var(--asfalto-2); font-weight: 500; }
.poste-legenda { grid-column: 2; justify-self: end; width: min(100%, 470px); margin: 14px 0 0 12px; font-size: .84rem; line-height: 1.45; color: var(--asfalto-2); max-width: 58ch; }
.poste-um .fios { padding-bottom: 6px; }
.poste-um { max-width: 520px; margin-bottom: 20px; }
.poste-curto .plaqueta-vel { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .abre .plaqueta { animation: balanca 1.1s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes balanca { from { transform: rotate(-3deg); } to { transform: none; } }
}

@media (min-width: 760px) {
  .abre { padding: 44px 0 16px; }
  .abre h1 { margin-bottom: 30px; }
  .poste { grid-template-columns: 22px 1fr; }
  .fio { grid-template-columns: minmax(80px, 1fr) minmax(0, 470px); }
  .fio-cabo { height: 52px; }
  .plaqueta { grid-template-columns: auto 1fr auto; grid-template-areas: 'nome vel preco' 'depois depois depois'; align-items: baseline; padding: 9px 14px 9px 30px; }
  .plaqueta-nome { font-size: 1.15rem; }
  .plaqueta-preco { font-size: .92rem; }
  .poste-legenda { margin-left: 18px; }
}

.resumo { display: grid; gap: 18px; padding: 26px 0 8px; }
.resumo-texto p { margin: 0 0 .7em; max-width: 62ch; }
.resumo-texto p:first-child { font-size: 1.12rem; }
.atalhos p { margin: 0 0 4px; font: 600 .95rem var(--f-tit); }
.atalhos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.atalhos a { font-weight: 500; }
@media (min-width: 900px) { .resumo { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; } }

.planos { padding: 28px 0 8px; }
.planos-tit { font: 600 1.35rem/1.2 var(--f-tit); letter-spacing: -.015em; margin: 0 0 10px; }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 8px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
caption { text-align: left; font-size: .85rem; color: var(--asfalto-2); padding-bottom: 8px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--concreto-2); }
thead th { font: 600 .82rem/1.3 var(--f-txt); color: var(--asfalto-2); border-bottom: 1.5px solid var(--asfalto); }
.tabela-planos { min-width: 640px; }
.tabela-planos tbody th { font: 700 1rem/1.3 var(--f-tit); }
.tabela-planos tbody th a { text-decoration: none; }
.tabela-planos tbody th a:hover { text-decoration: underline; }
.cidade, .nota { display: block; font: 400 .78rem/1.35 var(--f-txt); color: var(--asfalto-2); margin-top: 2px; }
td.lacuna { color: var(--asfalto-2); font-style: italic; }
.tabela-texto { min-width: 0; }
.tabela-texto thead th:first-child { width: 34%; }

.corrido { padding: 18px 0 40px; max-width: 70ch; }
.corrido .trecho { margin: 0; }
.corrido h2 { font: 650 clamp(1.3rem, 3.6vw, 1.7rem)/1.2 var(--f-tit); letter-spacing: -.02em; margin: 2.2em 0 .55em; text-wrap: balance; }
.corrido p { margin: 0 0 1em; }
.corrido ul, .corrido ol { padding-left: 1.25em; margin: 0 0 1.1em; }
.corrido li { margin-bottom: .45em; }
.corrido li::marker { color: var(--asfalto-2); }
.corrido strong { font-weight: 600; }
.corrido .tabela-rolagem { margin: 1.2em 0 1.4em; }

.conta { margin: 1.4em 0 1.6em; padding: 18px 0 14px; border-top: 1.5px solid var(--asfalto); border-bottom: 1px solid var(--concreto-2); }
.conta figcaption { font: 600 1rem/1.35 var(--f-tit); margin-bottom: 12px; }
.conta ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.conta-linha { display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; row-gap: 3px; align-items: center; margin: 0 !important; }
.conta-nome { font: 700 .95rem var(--f-tit); }
.conta-barra { display: flex; height: 8px; align-items: center; }
.ano1 { height: 4px; background: var(--cabo); border-radius: 2px 0 0 2px; }
.ano2 { height: 8px; background: var(--fibra); border-radius: 0 3px 3px 0; }
.ano2-vazio { width: 30%; height: 0; border-top: 2px dashed var(--asfalto-2); }
.conta-num { grid-column: 2; font: 500 .82rem/1.35 var(--f-num); color: var(--asfalto-2); }
.conta-num { display: flex; flex-wrap: wrap; gap: 0 14px; }
.conta-num b { color: var(--asfalto); font-weight: 600; }
.conta-incerta .conta-num span:last-child b { font-family: var(--f-txt); font-style: italic; font-weight: 500; color: var(--asfalto-2); }
.conta-nota { font-size: .82rem; color: var(--asfalto-2); margin: 12px 0 0 !important; }

.lacunas ul { list-style: none; padding: 0; }
.lacunas li { position: relative; padding-left: 26px; }
.lacunas li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 13px; height: 0; border-top: 2px dashed var(--asfalto-2); }

.ficha-dados { margin: 0 0 12px; display: grid; gap: 0; max-width: 720px; }
.ficha-dados div { display: grid; grid-template-columns: 1fr; padding: 9px 0; border-bottom: 1px solid var(--concreto-2); }
.ficha-dados dt { font: 600 .8rem/1.3 var(--f-txt); color: var(--asfalto-2); }
.ficha-dados dd { margin: 2px 0 0; }
@media (min-width: 640px) { .ficha-dados div { grid-template-columns: 180px 1fr; gap: 16px; } .ficha-dados dd { margin: 0; } }

.selo { display: flex; gap: 14px; align-items: flex-start; margin: 2.6em 0 0; padding-top: 18px; border-top: 1px solid var(--concreto-2); }
.selo-marca { flex: 0 0 40px; width: 40px; height: 40px; fill: none; stroke: var(--asfalto); stroke-width: 2; }
.selo-marca circle:last-child { fill: var(--fibra); stroke: none; }
.selo-tit { margin: 0 0 4px !important; font: 600 1rem/1.35 var(--f-tit); }
.selo-aviso { margin: 0 !important; font-size: .9rem; color: var(--asfalto-2); }

.outros { margin-top: 2em; }
.outros p { margin: 0 0 4px; font: 600 .95rem var(--f-tit); }
.outros ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

.rodape { background: var(--asfalto); color: #D9D7D1; padding: 34px 0 40px; font-size: .92rem; }
.rodape a { color: var(--branco); }
.rodape .logo { color: var(--branco); }
.rodape-in { display: grid; gap: 24px; }
.disclosure { max-width: 52ch; margin: 10px 0 0; }
.rodape-col p { margin: 0 0 8px; }
.rodape-links { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (min-width: 760px) { .rodape-in { grid-template-columns: 1fr 1fr; gap: 48px; } }