/* SK Telecom — Home v5 "Território"
 * Papel claro, grafite e vermelho SK com papéis definidos:
 *   --red    → ações (botões, links de ação, oferta em destaque);
 *   --signal → somente grafismo (linha de conexão, pontos do mapa).
 * Estrutura em filetes de 1px e cantos retos; controles com raio de 4px.
 */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* cor */
  --paper: #f4f4f2;
  --white: #ffffff;
  --ink: #1f2023;
  --ink-2: #3a3c41;
  --muted: #5d6067;
  --rule: #d5d6d8;
  --field: #8a8d93;
  --graphite: #26272b;
  --on-dark: #f4f4f2;
  --on-dark-muted: #a9abb1;
  --rule-dark: #45474d;
  --red: #d90019;
  --red-hover: #b50015;
  --signal: #ee0a1e;
  --region: #e3e4e5;
  --region-served: #d2d4d7;

  /* tipo */
  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wide: 112%;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: clamp(1.5rem, 1.25rem + .9vw, 1.875rem);
  --t-xl: clamp(2rem, 1.35rem + 2.5vw, 3.25rem);
  --t-hero: clamp(2.25rem, 1.25rem + 3.9vw, 4.5rem);

  /* espaço */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --gutter: clamp(20px, 5vw, 64px);
  --rail: calc(var(--gutter) * .65);  /* fio vermelho SK: corre na margem, nunca sobre texto */
  --section: clamp(64px, 7.5vw, 120px);
  --header-h: 72px;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
a, button, input, select, label { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
section[id], div[id="viabilidade"] { scroll-margin-top: calc(var(--header-h) + 8px); }

.wrap { width: 100%; max-width: calc(1320px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 2000; padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--white); border-radius: var(--radius); }
.skip:focus { top: var(--s-4); }

/* ---------- Botões e links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5);
  border: 1.5px solid transparent; border-radius: var(--radius);
  font-size: 1rem; font-weight: 600; font-stretch: 106%; line-height: 1.1; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--red); border-color: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn--line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-sm); }
.btn--lg { min-height: 56px; padding: 0 var(--s-6); }
.btn--block { width: 100%; }

.textlink {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 600; font-stretch: 104%; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.textlink:hover { color: var(--red); }

.kicker { font-size: var(--t-sm); font-weight: 600; color: var(--muted); }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 1000; background: var(--paper); border-bottom: 1px solid var(--rule); }
/* Fio vermelho SK no topo: assinatura discreta, sem alterar a altura do header. */
.top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red); transform: scaleX(var(--thread, 1)); transform-origin: left center; }
.top__row { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.top__brand { flex: none; display: block; width: 104px; }
.top__brand img { width: 100%; }
.top__nav { margin-left: auto; }
.top__links { display: flex; gap: var(--s-6); }
.top__links a { font-weight: 550; font-size: var(--t-sm); text-decoration: none; padding: var(--s-2) 0; border-bottom: 1.5px solid transparent; transition: border-color .18s ease; }
.top__links a:hover { border-color: var(--red); }
.top__menu-actions { display: none; }
.top__actions { display: flex; align-items: center; gap: var(--s-5); }
.top__invoice { font-size: var(--t-sm); }
.top__burger { display: none; }

@media (max-width: 1023.98px) {
  .top__row { gap: var(--s-4); }
  .top__brand { width: 88px; }
  .top__actions { margin-left: auto; gap: var(--s-3); }
  .top__invoice { display: none; }
  .top__burger {
    display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; padding: 0;
    border: 1.5px solid var(--ink); border-radius: var(--radius); background: transparent; cursor: pointer;
  }
  .top__burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .2s ease; }
  .top__burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .top__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .top__nav {
    position: fixed; inset: var(--header-h) 0 0; margin: 0;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7);
    padding: var(--s-5) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
    background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility .18s;
  }
  .top__nav.is-open { visibility: visible; opacity: 1; }
  .top__links { flex-direction: column; gap: 0; }
  .top__links a { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); font-size: 1.75rem; font-weight: 600; font-stretch: var(--wide); letter-spacing: -.015em; }
  .top__menu-actions { display: grid; gap: var(--s-3); justify-items: stretch; }
  .top__menu-actions .textlink { justify-self: start; margin-top: var(--s-2); }
}
@media (max-width: 379.98px) {
  .top__actions .btn--sm { padding: 0 var(--s-3); font-size: var(--t-xs); }
}

/* Parceiro Autorizado Claro: rótulo pequeno + selo oficial da Claro (ativo sem alteração).
   Header a partir de 768 px; abaixo disso, no topo do menu mobile. Rodapé ao lado da marca SK. */
.partner { display: flex; align-items: center; gap: var(--s-3); }
.partner__label { inline-size: min-content; font-size: .75rem; font-weight: 600; line-height: 1.2; color: var(--muted); }
.partner img { flex: none; width: 68px; height: auto; }
.partner--top { flex: none; margin-left: calc(var(--s-4) - var(--s-6)); padding-left: var(--s-4); border-left: 1px solid var(--rule); }
.partner--menu { display: none; }
@media (max-width: 1023.98px) {
  .partner--top { margin-left: 0; padding-left: var(--s-4); }
}
@media (max-width: 767.98px) {
  .partner--top { display: none; }
  .partner--menu { display: flex; margin-bottom: calc(var(--s-4) - var(--s-7)); }
  .partner--menu + .top__links ~ .top__menu-actions { margin-top: auto; }
}

/* ---------- Hero ----------
 * Texto (7 col.) + fotografia real (5 col., sangrando até a borda direita).
 * A assinatura regional fecha o bloco, logo abaixo da foto.
 */
.hero { position: relative; }
.hero__grid { display: grid; gap: var(--s-7); padding-top: clamp(32px, 4.5vw, 72px); }
.hero__copy { min-width: 0; padding-bottom: clamp(8px, 2vw, 32px); }
.hero__eyebrow { margin-bottom: var(--s-4); font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.hero__title {
  max-width: 14ch;
  font-size: var(--t-hero); font-weight: 680; font-stretch: var(--wide);
  line-height: 1; letter-spacing: -.028em; text-wrap: balance;
}
.hero__lead { max-width: 44ch; margin-top: var(--s-5); font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* Consulta de CEP integrada ao bloco principal. O fio vermelho chega da margem até o campo. */
.cep { position: relative; width: min(100%, 480px); margin-top: clamp(28px, 3.5vw, 44px); }
.cep__label { display: block; margin-bottom: var(--s-3); font-size: var(--t-base); font-weight: 650; font-stretch: 106%; }
.cep__row { position: relative; display: flex; }
.cep__row::before {
  /* O fio vai da borda esquerda da janela até o campo (largura = margem visível). */
  content: ""; position: absolute; top: 50%; right: 100%; width: var(--rail); height: 1.5px; margin-top: -.75px;
  background: var(--signal); pointer-events: none; transform: scaleX(var(--cep-thread, 1)); transform-origin: left center;
}
/* Trecho vertical do fio: desce pela margem e vira em direção ao campo ("leva a conexão até o endereço"). */
.cep__row::after {
  content: ""; position: absolute; right: calc(100% + var(--rail) - 1.5px); bottom: calc(50% - .75px);
  width: 1.5px; height: var(--hero-climb, 132px); background: var(--signal); pointer-events: none;
  transform: scaleY(var(--rail-v, 1)); transform-origin: center top;
}
@media (max-width: 1023.98px) { .cep__row { --hero-climb: 44px; } }
.cep__row input {
  flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 var(--s-4);
  border: 1.5px solid var(--ink); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--white); font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.cep__row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cep__row input[aria-invalid="true"] { border-color: var(--red); }
.cep__row .btn { min-height: 56px; border-radius: 0 var(--radius) var(--radius) 0; padding: 0 var(--s-5); }
.cep__msg { min-height: 1.5em; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--red); }
.cep__msg:empty { min-height: 0; margin: 0; }
.hero__invoice { margin-top: var(--s-4); font-size: var(--t-sm); }

/* Fotografia: sem cantos arredondados, sem sobreposições. */
.hero__media { position: relative; margin: 0 calc(var(--gutter) * -1); aspect-ratio: 4 / 3; background: var(--region); overflow: hidden; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 15%; }

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); align-items: stretch; }
  .hero__grid { padding-top: 0; }
  .hero__copy { align-self: center; padding-block: clamp(40px, 4.5vw, 72px) clamp(40px, 4vw, 64px); }
  /* A foto sangra até a borda direita da janela. */
  .hero__media { aspect-ratio: auto; min-height: clamp(460px, 44vw, 640px); margin: 0 calc(var(--gutter) * -1) 0 0; }
  .hero__media img { object-position: 58% 25%; }
}
@media (min-width: 1448px) {
  .hero__media { margin-right: calc((100vw - 1448px) / -2 - var(--gutter)); }
}

/* Hero mobile (< 768px): composição própria, não o desktop empilhado.
 * Foto logo abaixo do header; o conteúdo em papel sobe 28px sobre a borda inferior da foto a partir da
 * margem esquerda (a ponta direita da foto continua até a base: é o que torna a sobreposição legível).
 * O fio vermelho nasce nessa costura, desce pela margem e vira até o CEP (altura medida pelo home-v5.js).
 */
@media (max-width: 767.98px) {
  .hero { --hero-overlap: 28px; }
  .hero__grid { gap: 0; padding-top: 0; }
  .hero__media { order: -1; }
  .hero__copy { position: relative; z-index: 1; margin-top: calc(var(--hero-overlap) * -1); padding: 22px 0 var(--s-6); }
  .hero__copy::before {
    content: ""; position: absolute; z-index: -1; top: 0; left: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) - clamp(56px, 17vw, 80px)); height: calc(var(--hero-overlap) + 1px);
    background: var(--paper); pointer-events: none;
  }
  /* ~12% menor que no layout anterior (36px): com a foto primeiro, o texto não precisa abrir a página. */
  .hero__title { font-size: clamp(1.9375rem, 1.45rem + 2.1vw, 2.125rem); }
}

/* ---------- Assinatura regional ---------- */
.sig { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sig__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-5); padding-block: var(--s-4); }
.sig__label { flex: none; display: inline-flex; align-items: baseline; gap: var(--s-3); font-size: var(--t-sm); font-weight: 700; font-stretch: 106%; color: var(--ink); }
.sig__label::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--region-served); transform: translateY(1px); }
.sig__local { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.sig__local > span:first-child { display: inline-flex; align-items: baseline; gap: var(--s-3); font-weight: 600; color: var(--ink); }
.sig__local > span:first-child::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); transform: translateY(-1px); }
/* Mobile: duas linhas compactas, hierarquia secundária. A lista corre na mesma linha de "Atendimento presencial em"
   e as quebras alinham com o texto (recuo pendente do marcador). */
@media (max-width: 767.98px) {
  .sig__row { display: block; padding-block: var(--s-3); }
  .sig__label { display: flex; align-items: center; gap: 0; font-size: var(--t-xs); line-height: 1.45; }
  .sig__label::before { width: 8px; height: 8px; margin-right: 12px; transform: none; }
  .sig__local { display: block; margin-top: 2px; padding-left: 20px; text-indent: -20px; font-size: var(--t-xs); line-height: 1.45; color: var(--muted); }
  .sig__local > span:first-child { display: inline; font-weight: 600; color: var(--ink-2); }
  .sig__local > span:first-child::before { display: inline-block; margin-right: 12px; vertical-align: 1px; transform: none; }
}

/* ---------- Cabeçalho de seção ---------- */
.sec-head { display: grid; gap: var(--s-4); margin-bottom: clamp(32px, 4vw, 56px); }
.plans .sec-head { position: relative; }
.plans .sec-head::before {
  content: ""; position: absolute; left: calc(var(--rail) * -1); top: calc(var(--t-xl) * .52);
  width: max(6px, calc(var(--rail) - 14px)); height: 1.5px; background: var(--signal); pointer-events: none;
  transform: scaleX(var(--plans-thread, 1)); transform-origin: left center;
}
.sec-head__title, .services__title, .support__title, .coverage__title {
  font-size: var(--t-xl); font-weight: 680; font-stretch: var(--wide); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance;
}
.sec-head__note { max-width: 44ch; font-size: var(--t-sm); color: var(--muted); }
@media (min-width: 1024px) {
  .sec-head { grid-template-columns: 1fr auto; align-items: end; gap: var(--s-7); }
  .sec-head__note { text-align: right; }
}

/* ---------- Planos ----------
 * Linhas editoriais, sem cabeçalho de tabela. A oferta em destaque vira faixa branca de ponta a ponta.
 */
.plans { padding-block: clamp(56px, 6.5vw, 104px); }
.plans__list { border-top: 1.5px solid var(--ink); }
.plan { position: relative; display: grid; gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--rule); }
.plan.is-featured {
  background: var(--white); border-bottom-color: transparent;
  box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax);
}
.plan.is-featured::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 3px; background: var(--red); transform: scaleX(var(--featured-rule, 1)); transform-origin: left center; }
.plan__badge { display: inline-block; margin-bottom: var(--s-3); font-size: var(--t-xs); font-weight: 650; font-stretch: 106%; color: var(--muted); }
.plan.is-featured .plan__badge { padding: 4px 8px; background: var(--red); color: var(--white); border-radius: 2px; }
.plan__title { font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); font-weight: 680; font-stretch: var(--wide); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.plan__desc { max-width: 38ch; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); }
.plan__inc { display: grid; gap: var(--s-2); font-size: var(--t-base); line-height: 1.4; }
.plan__inc li { position: relative; padding-left: 26px; }
.plan__inc li::before {
  content: ""; position: absolute; left: 3px; top: .2em; width: 6px; height: 11px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.plan.is-featured .plan__inc li::before { border-color: var(--red); }
.plan__apps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.plan__apps span { font-size: var(--t-sm); font-weight: 700; font-stretch: 96%; letter-spacing: -.01em; color: var(--ink-2); }
.plan__apps img { height: 20px; width: auto; }
.plan__buy { display: grid; gap: var(--s-4); align-content: start; }
.plan__price { font-variant-numeric: tabular-nums; }
.plan__price small { display: block; margin-bottom: 2px; font-size: var(--t-xs); color: var(--muted); }
.plan__price p { display: flex; align-items: baseline; gap: var(--s-1); flex-wrap: wrap; }
.plan__price strong { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); font-weight: 700; font-stretch: 106%; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.plan__price span { font-size: var(--t-sm); color: var(--muted); }
.plan__buy .btn { width: 100%; }
.plans__more { margin-top: var(--s-6); }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .plan__buy { grid-template-columns: 1fr minmax(220px, auto); align-items: end; }
}
@media (min-width: 1024px) {
  .plan { grid-template-columns: minmax(0, 4.4fr) minmax(0, 4fr) minmax(0, 2.8fr); column-gap: var(--s-7); align-items: start; padding-block: var(--s-7); }
}

/* ---------- Serviços (bloco grafite) ---------- */
.services { padding-block: var(--section); background: var(--graphite); color: var(--on-dark); }
.services__title { margin-bottom: clamp(32px, 4vw, 56px); }
.services__list { position: relative; display: grid; column-gap: var(--s-8); }
.services__list::before {
  content: ""; position: absolute; left: 0; top: -.25px; width: 56px; height: 1.5px; background: var(--signal); z-index: 1; pointer-events: none;
  transform: scaleX(var(--svc-rule, 1)); transform-origin: left center;
}
.service { position: relative; display: grid; gap: var(--s-3); padding: var(--s-6) 0 var(--s-7); border-top: 1px solid var(--rule-dark); }
.service h3 { font-size: var(--t-lg); font-weight: 650; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -.02em; }
.service p { max-width: 42ch; color: var(--on-dark-muted); }
.service a {
  justify-self: start; margin-top: var(--s-2); font-weight: 600; font-stretch: 104%;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: var(--rule-dark);
  transition: text-decoration-color .18s ease;
}
.service a::after { content: ""; position: absolute; inset: 0; }
.service:hover a { text-decoration-color: var(--on-dark); }
.service a:focus-visible { outline: none; }
.service:has(a:focus-visible) { outline: 2px solid var(--on-dark); outline-offset: 6px; }
@media (min-width: 768px) { .services__list { grid-template-columns: 1fr 1fr; } }

/* ---------- Cobertura ---------- */
.coverage { padding-top: var(--section); }
.coverage__head { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
.coverage__statement { max-width: 56ch; font-size: var(--t-md); font-weight: 600; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.coverage__text { max-width: 52ch; color: var(--ink-2); }
.coverage__body { display: grid; gap: var(--s-7); padding-bottom: var(--section); }

.map { position: relative; }
.map__svg { width: 100%; height: auto; overflow: hidden; }
.map__regions path { fill: var(--region-served); stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: round; }
.map__dots circle { fill: var(--signal); stroke: var(--paper); transition: fill .15s ease; }
.map__dots circle.is-active { fill: var(--red-hover); }
.map__label { font-family: var(--font); font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; pointer-events: none; }
.map__canvas { position: relative; }  /* mesmo tamanho do SVG: --hub-x/--hub-y em % ficam exatos em qualquer largura */
.map:not(.has-hub) .map__climb, .map:not(.has-hub) .map__thread { display: none; }
.map__climb, .map__thread { position: absolute; background: var(--signal); pointer-events: none; }
.map__climb {
  left: calc(var(--rail) * -1); top: calc(var(--hub-y, 0px) - var(--cov-climb-h, 200px)); width: 1.5px; height: calc(var(--cov-climb-h, 200px) + .75px);
  transform: scaleY(var(--cov-climb, 1)); transform-origin: center top;
}
.map__thread {
  left: calc(var(--rail) * -1); top: var(--hub-y, 0px); width: calc(var(--rail) + var(--hub-x, 0px) - 9px); height: 1.5px; margin-top: -.75px;
  transform: scaleX(var(--cov-thread, 1)); transform-origin: left center;
}
@media (max-width: 1023.98px) { .map { --cov-climb-h: 40px; } }
.map__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-4); font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.map__key { display: inline-flex; align-items: center; gap: var(--s-2); }
.map__key::before { content: ""; flex: none; }
.map__key--area::before { width: 12px; height: 12px; background: var(--region-served); }
.map__key--local::before { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }

.cities__title { margin-bottom: var(--s-3); font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.cities__list { border-top: 1.5px solid var(--ink); }
.cities__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule);
  font-size: var(--t-md); font-weight: 560; font-stretch: 108%; letter-spacing: -.01em;
  transition: color .15s ease;
}
.cities__list li.is-active { color: var(--red); }
.cities__list li::after { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); transform: translateY(-.1em); }
.cities__list li.is-active::after { background: var(--red-hover); }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .cities__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-6); }
}
@media (min-width: 1024px) {
  .coverage__body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--s-8); align-items: center; }
}

/* ---------- Consulta (faixa branca) ---------- */
.consult { padding-block: clamp(48px, 6vw, 88px); background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.consult__grid { display: grid; gap: var(--s-6); }
.consult__title { margin-bottom: var(--s-3); font-size: var(--t-lg); font-weight: 680; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -.02em; }
.consult__copy p { max-width: 40ch; color: var(--ink-2); }
.consult__fields { display: grid; gap: var(--s-4); }
.consult__foot { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 640px) {
  .consult__fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .field--nome, .field--tel { grid-column: span 3; }
  .field--cep, .field--tipo, .field--int { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .consult__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); }
  .consult__foot { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6); }
}

/* ---------- Formulários ---------- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field > span { font-size: var(--t-sm); font-weight: 600; }
.field input, .field select {
  width: 100%; height: 52px; padding: 0 var(--s-4);
  border: 1px solid var(--field); border-radius: var(--radius); background-color: var(--white); color: var(--ink);
  font-size: 1rem; appearance: none; -webkit-appearance: none;
  transition: border-color .15s ease;
}
.field select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231f2023' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.field input:hover, .field select:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 1px; }
.field input::placeholder { color: #8a8d93; }
.field input:user-invalid { border-color: var(--red); }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); cursor: pointer; }
.consent a { text-underline-offset: .2em; }
.feedback { font-size: var(--t-sm); font-weight: 600; }
.feedback:empty { display: none; }

/* ---------- Atendimento + FAQ ---------- */
.support { padding-block: var(--section); }
.support__grid { display: grid; gap: var(--s-8); }
.support__title { margin-bottom: clamp(24px, 3vw, 40px); }
.channels { border-top: 1.5px solid var(--ink); }
.channel { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.channel h3 { font-size: var(--t-md); font-weight: 650; font-stretch: 106%; line-height: 1.25; }
.channel p { margin-top: 2px; font-size: var(--t-sm); color: var(--muted); }
.channel p a { color: var(--ink); text-underline-offset: .2em; word-break: break-word; }
.channel .btn { flex: none; min-width: 112px; }
.support__faq-title { margin-bottom: var(--s-4); font-size: var(--t-lg); font-weight: 680; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -.02em; }
@media (min-width: 1024px) {
  .support__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-9); }
  .support__faq { padding-top: calc(var(--t-xl) * 1.02 + clamp(24px, 3vw, 40px) - var(--t-lg) * 1.1 - var(--s-4)); }
}

.faq { border-top: 1.5px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item h4 { margin: 0; font: inherit; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  width: 100%; padding: var(--s-5) 0; border: 0; background: none; text-align: left; cursor: pointer;
  font-size: var(--t-base); font-weight: 600; line-height: 1.4;
}
.faq__q:hover { color: var(--red); }
.faq__ic { position: relative; flex: none; width: 14px; height: 14px; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; transition: transform .2s ease; }
.faq__ic::after { transform: rotate(90deg); }
.faq__item.is-open .faq__ic::after { transform: rotate(0deg); }
.faq__a { padding: 0 var(--s-7) var(--s-5) 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- Rodapé ---------- */
.foot { padding-top: var(--s-8); background: var(--graphite); color: var(--on-dark); }
.foot__row { display: grid; gap: var(--s-6); padding-bottom: var(--s-7); }
.foot__id { display: flex; align-items: center; gap: var(--s-5); }
.foot__brand { flex: none; display: block; width: 116px; }
.partner--foot { padding-left: var(--s-5); border-left: 1px solid var(--rule-dark); }
.partner--foot .partner__label { color: var(--on-dark-muted); }
.foot__brand img { width: 100%; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.foot__nav a, .foot__legal a { text-decoration: none; padding: var(--s-1) 0; border-bottom: 1px solid transparent; transition: border-color .18s ease; }
.foot__nav a:hover, .foot__legal a:hover { border-color: currentColor; }
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6);
  padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule-dark); font-size: var(--t-xs); color: var(--on-dark-muted);
}
.foot__legal nav { display: flex; gap: var(--s-5); }
/* Assinatura SK Core (padrão dos sites SK Core): discreta, na faixa inferior, à direita no desktop. */
.foot__legal .credit { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0; border: 0; opacity: .8; transition: opacity .18s ease; }
.foot__legal .credit:hover { opacity: 1; }
.credit img { width: auto; height: 32px; }
@media (min-width: 768px) {
  .foot__legal { align-items: center; }
  .foot__legal nav { margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .foot__legal p { flex-basis: 100%; }
  .foot__legal nav { margin-left: 0; }
  .foot__legal .credit { margin-left: auto; }
}
:where(.foot, .services) :focus-visible { outline-color: var(--on-dark); }
@media (min-width: 768px) { .foot__row { grid-template-columns: auto 1fr; align-items: center; } .foot__nav { justify-content: flex-end; } }

/* ---------- Modal da 2ª via ---------- */
.modal { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: var(--s-5); visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(31, 32, 35, .56); opacity: 0; transition: opacity .2s ease; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__dialog {
  position: relative; width: min(100%, 480px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--s-3); padding: var(--s-6);
  background: var(--white); border-radius: var(--radius); border-top: 4px solid var(--red);
  opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease;
}
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__dialog h2 { padding-right: var(--s-7); font-size: 1.75rem; font-weight: 680; font-stretch: var(--wide); line-height: 1.1; letter-spacing: -.02em; }
.modal__dialog > p { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--s-2); }
.modal__close { position: absolute; top: var(--s-3); right: var(--s-3); width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius); }
.modal__close span { position: absolute; left: 13px; top: 21px; width: 18px; height: 1.5px; background: var(--ink); }
.modal__close span:first-child { transform: rotate(45deg); }
.modal__close span:last-child { transform: rotate(-45deg); }
.modal__close:hover { background: var(--paper); }
@media (max-width: 639.98px) {
  .modal { place-items: end stretch; padding: 0; }
  .modal__dialog { width: 100%; max-height: calc(100dvh - 24px); padding: var(--s-6) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-radius: var(--radius) var(--radius) 0 0; }
}

/* ---------- Oferta flutuante (telecom.promo) ----------
 * Grafite sólido com o fio vermelho SK no topo: destaca sobre o papel sem sombra, glow ou vidro.
 * Abaixo do header (1000) e do modal (1500). Entrada curta por opacidade/translate; com reduced motion
 * a regra global zera a transição.
 */
.promo {
  position: fixed; z-index: 900; right: var(--s-5); bottom: var(--s-5); width: 320px;
  padding: var(--s-5) var(--s-5) var(--s-5); border: 1px solid var(--rule-dark); border-radius: var(--radius);
  background: var(--graphite); color: var(--on-dark);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.promo[hidden] { display: none; }
.promo.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .24s ease, transform .24s ease, visibility 0s; }
/* Enquanto some (fade de saída), não intercepta cliques no que está por baixo. */
.promo:not(.is-visible) { pointer-events: none; }
.promo::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--red); border-radius: var(--radius) var(--radius) 0 0; }
.promo__close { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius); }
.promo__close span { position: absolute; left: 12px; top: 19px; width: 16px; height: 1.5px; background: var(--on-dark); }
.promo__close span:first-child { transform: rotate(45deg); }
.promo__close span:last-child { transform: rotate(-45deg); }
.promo__close:hover { background: rgba(255, 255, 255, .08); }
.promo :focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.promo__badge { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); padding-right: 36px; font-size: var(--t-xs); font-weight: 600; color: var(--on-dark-muted); }
.promo__badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.promo__title { padding-right: 36px; font-size: 1.125rem; font-weight: 680; font-stretch: var(--wide); line-height: 1.2; letter-spacing: -.01em; }
.promo__desc { margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.45; color: var(--on-dark-muted); }
.promo__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.promo__price { font-size: 1.25rem; font-weight: 700; font-stretch: 106%; font-variant-numeric: tabular-nums; }
.promo__cta { flex: none; }
@media (max-width: 639.98px) {
  /* Faixa compacta: sem descrição; respeita a área segura do iPhone. */
  .promo {
    left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); width: auto;
    padding: var(--s-4) var(--s-4) var(--s-4);
  }
  .promo__desc { display: none; }
  .promo__title { font-size: 1rem; }
  .promo__buy { flex-wrap: nowrap; margin-top: var(--s-3); }
  .promo__price { font-size: 1.125rem; }
}

/* ---------- Motion (GSAP) ----------
 * Estados iniciais da abertura só com html.sk-motion (adicionado no <head>, nunca com reduced motion
 * e removido se o GSAP não iniciar). Só opacidade/transform: nada deixa de ser clicável ou focável.
 */
.sk-motion .top { --thread: 0; }
.sk-motion .cep__row { --cep-thread: 0; --rail-v: 0; }
/* O bloco .cep fica visível (o fio vermelho é pseudo-elemento da linha do CEP); só o conteúdo começa transparente. */
.sk-motion .hero__eyebrow, .sk-motion .hero__title, .sk-motion .hero__lead,
.sk-motion .cep__label, .sk-motion .cep__row > *, .sk-motion .hero__invoice, .sk-motion .sig { opacity: 0; }
/* Foto sempre visível. Só no desktop: recorte parcial (76% visível) + escala. No mobile a foto não se move
   (a escala gerava uma segunda entrada de LCP e piorava a cauda da métrica). */
@media (min-width: 1024px) {
  .sk-motion .hero__media { clip-path: inset(0 0 0 24%); }
  .sk-motion .hero__media img { transform: scale(1.06); }
}
/* Mobile: a foto (LCP) fica parada; o bloco de papel começa 14px abaixo e assenta sobre a borda da foto. */
@media (max-width: 767.98px) {
  .sk-motion .hero__copy { transform: translateY(14px); }
}
/* Linhas naturais do título: wrappers temporários da abertura (o texto original volta ao final). */
.hero-line, .hero-line__in { display: block; }
.hero-line__in { white-space: nowrap; }
@media (min-width: 1024px) {
  /* Máscara por clip-path (não participa do layout): folga para acentos em cima e descendentes embaixo. */
  .hero-line { clip-path: inset(-.3em -.6em -.22em -.6em); }
}
/* Cobertura antes da onda: regiões com preenchimento baixo, pontos ocultos (aplicado pelo JS só abaixo da dobra). */
.map.is-pending .map__regions path { opacity: .25; }
.map.is-pending .map__dots circle { opacity: 0; }
.map.is-pending { --cov-climb: 0; --cov-thread: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}