/* Site da GAV Telecom
   Cores tiradas da logomarca: amarelo do selo, vermelho das letras, verde da aba "Telecom", azul do globo.
   Forma recorrente: a cápsula do selo com a aba verde embaixo. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fontes/archivo-latin-standard-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fontes/archivo-latin-standard-italic.woff2') format('woff2'); }

:root {
  --amarelo: #F5C800;
  --amarelo-claro: #FFE566;
  --vermelho: #E80101;
  --vermelho-escuro: #B80000;
  --verde: #008500;
  --tinta: #001E44;
  --tinta-suave: #3B4A63;
  --papel: #FFFFFF;
  --nevoa: #F2F4F8;
  --linha: #D9DEE8;
  --raio: 14px;
  --fonte: 'Archivo', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.55; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3 { margin: 0; font-style: italic; font-stretch: 118%; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.75rem); }
h3 { font-size: 1.1rem; font-stretch: 105%; font-style: normal; letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.secao--tinta :focus-visible, .rodape :focus-visible, .atalhos :focus-visible { outline-color: var(--amarelo); }

.largura { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.estreita { width: min(780px, 100% - 2.5rem); }
.pular { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .6rem 1rem; z-index: 100; }
.pular:focus { left: 0; }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .55rem 1.25rem; border: 2px solid transparent; border-radius: 999px; font: inherit; font-weight: 700; font-stretch: 105%; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, transform .15s; }
.botao:active { transform: translateY(1px); }
.botao--grande { min-height: 54px; padding-inline: 1.7rem; font-size: 1.08rem; }
.botao--vermelho { background: var(--vermelho); color: #fff; }
.botao--vermelho:hover { background: var(--vermelho-escuro); }
.botao--tinta { background: var(--tinta); color: #fff; }
.botao--tinta:hover { background: #00306b; }
.botao--amarelo { background: var(--amarelo); color: var(--tinta); }
.botao--amarelo:hover { background: var(--amarelo-claro); }

/* ---------- atalhos e topo ---------- */
.atalhos { background: var(--tinta); color: #fff; font-size: .875rem; }
.atalhos__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; padding-block: .45rem; }
.atalhos__fone { font-weight: 700; }
.atalhos nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.atalhos a { text-decoration: none; opacity: .92; }
.atalhos a:hover { text-decoration: underline; opacity: 1; }

.topo { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 1px solid var(--linha); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.topo__logo img { height: 52px; width: auto; }
.topo__menu { display: none; min-height: 44px; padding: 0 1rem; border: 2px solid var(--tinta); border-radius: 999px; background: none; font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer; }
.menu { display: flex; align-items: center; gap: .25rem 1.5rem; }
.menu a:not(.botao) { text-decoration: none; font-weight: 600; padding: .5rem 0; border-bottom: 3px solid transparent; }
.menu a:not(.botao):hover { border-bottom-color: var(--amarelo); }
.menu__central { margin-left: .5rem; }

@media (max-width: 940px) {
  .topo__menu { display: inline-flex; align-items: center; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; background: var(--papel); border-bottom: 1px solid var(--linha); box-shadow: 0 18px 30px rgba(0, 30, 68, .12); }
  .menu--aberto { display: flex; }
  .menu a:not(.botao) { padding: .85rem 0; border-bottom: 1px solid var(--linha); }
  .menu__central { margin-left: 0; }
  .menu .botao { margin-top: 1rem; }
}

/* ---------- destaque ---------- */
.destaque { background: var(--amarelo); overflow: hidden; }
.destaque__grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 2.5rem; padding-block: clamp(2.5rem, 6vw, 5rem); }
.destaque h1 { font-size: clamp(2.6rem, 1.2rem + 6.2vw, 5.6rem); font-weight: 900; font-stretch: 125%; line-height: .95; letter-spacing: -0.02em; }
.destaque__sub { margin: 1.4rem 0 0; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); max-width: 34ch; font-weight: 500; }
.destaque__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.destaque__painel { min-width: 0; }

/* selo padrão: a cápsula da logomarca com a aba verde */
.selo { display: flex; flex-direction: column; align-items: flex-start; max-width: 420px; margin-inline: auto; filter: drop-shadow(0 16px 0 rgba(0, 30, 68, .14)); }
.selo[hidden] { display: none; }
.selo__capsula { width: 100%; display: grid; gap: .1rem; padding: 2rem 2.4rem 1.8rem; background: var(--papel); border-radius: 90px; text-align: center; }
.selo__de { font-weight: 600; color: var(--tinta-suave); }
.selo__preco { display: flex; align-items: baseline; justify-content: center; gap: .3rem; color: var(--vermelho); font-style: italic; font-stretch: 125%; line-height: 1; }
.selo__preco b { font-size: clamp(4.5rem, 2rem + 9vw, 7rem); font-weight: 900; letter-spacing: -0.04em; }
.selo__preco small { font-size: 1.3rem; font-weight: 800; }
.selo__mega { font-size: 1.5rem; font-weight: 800; font-style: italic; font-stretch: 118%; }
.selo__aba { margin: -6px 0 0 2.2rem; padding: .7rem 1.5rem .6rem; background: var(--verde); color: #fff; font-weight: 700; font-style: italic; border-radius: 0 0 22px 22px; }

/* banner de promoção */
.banner { position: relative; display: block; border-radius: 28px; overflow: hidden; background: var(--tinta); text-decoration: none; box-shadow: 0 16px 0 rgba(0, 30, 68, .14); }
.banner img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.banner__legenda { display: grid; gap: .35rem; justify-items: start; padding: 1.1rem 1.3rem 1.3rem; color: #fff; }
.banner__legenda strong { font-size: 1.35rem; font-style: italic; font-stretch: 118%; line-height: 1.1; }
.banner__legenda .botao { margin-top: .5rem; }

@media (max-width: 820px) {
  .destaque__grade { grid-template-columns: minmax(0, 1fr); }
  .selo { margin-inline: 0; }
}

/* ---------- seções ---------- */
.secao { padding-block: clamp(3rem, 7vw, 5.5rem); }
.secao__cabeca { margin-bottom: 2rem; }
.secao__cabeca p { margin: .8rem 0 0; color: var(--tinta-suave); }
.secao--tinta { background: var(--tinta); color: #fff; }
.secao--amarela { background: var(--amarelo); }
.secao--amarela .secao__cabeca p { color: var(--tinta); }
.secao--verde { background: var(--verde); color: #fff; }

/* ---------- planos: régua de velocidade ---------- */
.abas { display: inline-flex; padding: 4px; background: var(--nevoa); border-radius: 999px; }
.abas button { min-height: 44px; padding: 0 1.4rem; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 700; color: var(--tinta-suave); cursor: pointer; }
.abas button[aria-selected="true"] { background: var(--tinta); color: #fff; }
.abas__nota { margin: .9rem 0 1.5rem; color: var(--tinta-suave); }

.regua { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.plano { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linha); }
.plano__vel { display: grid; gap: .45rem; min-width: 0; }
.plano__vel strong { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-style: italic; font-stretch: 118%; font-weight: 800; line-height: 1; }
.plano__barra { display: block; height: 10px; width: var(--tamanho, 50%); background: var(--amarelo); border-radius: 999px; }
.plano__preco { display: flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.plano__preco b { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.plano__preco small { font-weight: 600; color: var(--tinta-suave); }
@media (max-width: 560px) {
  .plano { grid-template-columns: minmax(0, 1fr) auto; }
  .plano__vel { grid-column: 1 / -1; }
}

.incluso { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem 1.5rem; }
.incluso li { position: relative; padding-left: 1.7rem; font-weight: 600; }
.incluso li::before { content: ''; position: absolute; left: 0; top: .42em; width: 1rem; height: .55rem; border-left: 3px solid var(--verde); border-bottom: 3px solid var(--verde); transform: rotate(-45deg); }

/* ---------- blocos de produto (câmeras, mesh) ---------- */
.dupla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); }
.dupla--inversa .dupla__figura { order: 2; }
.dupla__texto h2 { margin-bottom: 1rem; }
.marcas { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .5rem; }
.marcas li { position: relative; padding-left: 1.7rem; font-weight: 600; }
.marcas li::before { content: ''; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; background: var(--amarelo); border-radius: 50%; }
.secao:not(.secao--tinta) .marcas li::before { background: var(--vermelho); }
.consulta { font-weight: 700; font-style: italic; }
@media (max-width: 820px) {
  .dupla { grid-template-columns: minmax(0, 1fr); }
  .dupla--inversa .dupla__figura { order: 0; }
  .dupla__figura { max-width: 380px; }
}

.fig { width: 100%; }
.fig-chao { fill: rgba(255, 255, 255, .14); }
.fig-poste { fill: none; stroke: #5d7397; stroke-width: 14; stroke-linejoin: round; }
.fig-amarelo { fill: var(--amarelo); }
.fig-escuro { fill: #0a2e5e; }
.fig-lente { fill: #001230; stroke: #8fb0e0; stroke-width: 3; }
.fig-brilho { fill: #8fd0ff; }
.fig-verde { fill: var(--verde); }
.fig-vermelho { fill: var(--vermelho); }
.fig-feixe { fill: rgba(245, 200, 0, .22); }
.fig-casa { fill: var(--nevoa); stroke: var(--tinta); stroke-width: 6; stroke-linejoin: round; }
.fig-parede { stroke: var(--linha); stroke-width: 4; }
.fig-onda circle { fill: rgba(245, 200, 0, .3); }
.fig-malha { fill: none; stroke: var(--verde); stroke-width: 4; stroke-dasharray: 3 9; stroke-linecap: round; }
.fig-no circle { fill: var(--vermelho); stroke: #fff; stroke-width: 4; }

/* ---------- empresas ---------- */
.corp { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.corp__plano { display: grid; gap: .4rem; justify-items: start; padding: 1.6rem; background: var(--papel); border-radius: 28px 28px 28px 6px; }
.corp__plano h3 { font-size: 1.8rem; font-style: italic; font-stretch: 118%; font-weight: 800; }
.corp__preco { display: flex; align-items: baseline; gap: .25rem; margin: 0; color: var(--vermelho); }
.corp__preco b { font-size: 2.2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.corp__preco small { font-weight: 700; }
.corp__nota { margin: 0 0 .8rem; font-size: .95rem; color: var(--tinta-suave); }
.corp__rodape { margin: 2rem 0 0; }

/* ---------- já sou cliente ---------- */
.servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 2px solid var(--tinta); }
.servico { display: grid; gap: .3rem; padding: 1.4rem 1.4rem 1.4rem 0; border-bottom: 1px solid var(--linha); text-decoration: none; }
.servico strong { font-size: 1.2rem; font-stretch: 110%; text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.servico:hover strong { text-decoration-color: var(--vermelho); }
.servico span { color: var(--tinta-suave); }

/* ---------- cobertura ---------- */
.cobertura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cobertura > div { flex: 1 1 420px; }
.cobertura p { margin: 1rem 0 0; }

/* ---------- perguntas ---------- */
.perguntas { border-top: 2px solid var(--tinta); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--amarelo); border-radius: 50%; font-weight: 800; }
.perguntas details[open] summary::after { content: '–'; }
.perguntas details p { padding-bottom: 1.2rem; color: var(--tinta-suave); }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: #fff; padding-block: 3rem 1.5rem; font-size: .975rem; }
.rodape__grade { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 2rem; }
.rodape__logo { width: 230px; padding: 14px 18px; background: #fff; border-radius: 22px; }
.rodape h3 { margin-bottom: .8rem; color: var(--amarelo); }
.rodape p { margin: 0 0 .45rem; }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape__base { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .875rem; opacity: .85; }
.rodape__base p:empty { display: none; }
@media (max-width: 820px) { .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rodape__grade > div:first-child { grid-column: 1 / -1; } }

/* ---------- WhatsApp fixo ---------- */
.zap-fixo { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.4rem; background: var(--verde); color: #fff; font-weight: 800; text-decoration: none; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0, 30, 68, .3); }
.zap-fixo:hover { background: #006b00; }

/* =====================================================================
   ACABAMENTO: profundidade, luz e movimento
   Todo movimento respeita "reduzir movimento" do aparelho (ver o fim do arquivo).
   ===================================================================== */

/* cabeçalho de vidro, que encolhe ao rolar */
.topo { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); transition: box-shadow .25s, background-color .25s; }
.topo__linha { transition: min-height .25s; }
.topo__logo img { transition: height .25s; }
.topo--rolado { background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px -18px rgba(0, 30, 68, .45); border-bottom-color: transparent; }
.topo--rolado .topo__linha { min-height: 60px; }
.topo--rolado .topo__logo img { height: 42px; }
@media (max-width: 940px) { .menu { background: #fff; } }

/* botões: relevo e brilho que atravessa ao passar o mouse */
.botao { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 22px -12px rgba(0, 30, 68, .55); }
.botao::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); transition: transform .6s ease; }
.botao:hover::after { transform: translateX(120%); }
.botao:hover { transform: translateY(-2px); }
.botao--vermelho { background: linear-gradient(180deg, #ff1f1f, var(--vermelho) 55%, #c90000); }
.botao--vermelho:hover { background: linear-gradient(180deg, #ff1f1f, var(--vermelho) 55%, #c90000); }
.botao--amarelo { background: linear-gradient(180deg, #ffe45c, var(--amarelo) 60%, #e0b400); }
.botao--amarelo:hover { background: linear-gradient(180deg, #ffe45c, var(--amarelo) 60%, #e0b400); }
.botao--tinta { background: linear-gradient(180deg, #0b3672, var(--tinta) 65%); }
.botao--tinta:hover { background: linear-gradient(180deg, #0b3672, var(--tinta) 65%); }

/* destaque: luz, fios de fibra correndo e selo com profundidade */
.destaque { position: relative; isolation: isolate; background:
    radial-gradient(60% 80% at 82% 38%, #ffe66b 0%, rgba(255, 230, 107, 0) 60%),
    radial-gradient(50% 70% at 0% 100%, #e9b200 0%, rgba(233, 178, 0, 0) 65%),
    linear-gradient(160deg, #ffd21a, var(--amarelo) 55%, #efbb00); }
.destaque__fios { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.destaque__fios path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; opacity: .55; stroke-dasharray: 140 1500; animation: fio 7s linear infinite; }
.destaque__fios path:nth-child(2) { animation-duration: 9s; animation-delay: -3s; stroke: var(--vermelho); opacity: .35; }
.destaque__fios path:nth-child(3) { animation-duration: 11s; animation-delay: -6s; }
.destaque__fios path:nth-child(4) { animation-duration: 8s; animation-delay: -1.5s; stroke: var(--tinta); opacity: .18; }
@keyframes fio { from { stroke-dashoffset: 1640; } to { stroke-dashoffset: 0; } }
.destaque h1 { text-shadow: 0 2px 0 rgba(255, 255, 255, .28); }
.selo { filter: none; }
.selo__capsula { box-shadow: 0 1px 0 #fff inset, 0 30px 60px -22px rgba(0, 30, 68, .5), 0 14px 0 -2px rgba(0, 30, 68, .12); }
.selo__preco b { background: linear-gradient(180deg, #ff2a2a, #c40000); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.selo__aba { background: linear-gradient(180deg, #00a000, var(--verde)); box-shadow: 0 14px 24px -14px rgba(0, 60, 0, .7); }
.com-efeitos .selo { animation: flutua 6s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-10px); } }
.banner { box-shadow: 0 30px 60px -22px rgba(0, 30, 68, .55); }

/* régua de planos: a barra cresce quando aparece e a linha acende ao passar o mouse */
.plano { position: relative; padding-inline: 1rem; margin-inline: -1rem; border-radius: 18px; transition: background-color .2s, box-shadow .2s; }
.plano:hover { background: #fff; box-shadow: 0 22px 44px -26px rgba(0, 30, 68, .5), 0 0 0 1px var(--linha); border-bottom-color: transparent; z-index: 1; }
.plano__barra { background: linear-gradient(90deg, var(--amarelo), #ffb300 70%, var(--vermelho)); transform-origin: left; box-shadow: 0 6px 14px -6px rgba(245, 160, 0, .9); }
.com-efeitos .regua .plano__barra { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--ordem, 0) * 70ms); }
.com-efeitos .regua.visto .plano__barra { transform: scaleX(1); }
.abas { box-shadow: 0 1px 0 #fff inset, 0 0 0 1px var(--linha); }
.abas button { transition: background-color .2s, color .2s; }

/* seções claras alternadas */
.secao--nevoa { background: linear-gradient(180deg, var(--nevoa), #fff); }

/* câmera: feixe que varre e luz piscando */
.fig--camera .fig-chao { fill: var(--linha); }
.fig--camera .fig-poste { stroke: #9fb0c9; }
.fig--camera .fig-feixe { fill: rgba(245, 200, 0, .34); transform-origin: 318px 102px; animation: varre 5s ease-in-out infinite; }
.fig--camera .fig-vermelho { animation: pisca 1.6s steps(2, jump-none) infinite; }
@keyframes varre { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(11deg); } }
@keyframes pisca { 50% { opacity: .25; } }
.dupla__figura { padding: clamp(1rem, 3vw, 2rem); background: #fff; border-radius: 36px 36px 36px 8px; box-shadow: 0 30px 60px -34px rgba(0, 30, 68, .45), 0 0 0 1px var(--linha); }

/* ---------- mesh: a casa à noite ---------- */
.noite { position: relative; isolation: isolate; color: #fff; overflow: hidden; background:
    radial-gradient(55% 60% at 70% 45%, rgba(245, 200, 0, .16), rgba(245, 200, 0, 0) 70%),
    radial-gradient(70% 90% at 15% 0%, #0b3a7a 0%, rgba(11, 58, 122, 0) 60%),
    linear-gradient(180deg, #00122b, #001E44 60%, #000d20); }
.noite::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 62%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 41% 12%, #fff, transparent), radial-gradient(1px 1px at 58% 8%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 73% 22%, #fff, transparent), radial-gradient(1px 1px at 88% 12%, #fff, transparent),
    radial-gradient(1px 1px at 93% 70%, #fff, transparent), radial-gradient(1.2px 1.2px at 6% 82%, #fff, transparent); }
.noite__grade { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.noite__texto h2 { margin-bottom: 1rem; }
.secao.noite .marcas li::before { background: var(--amarelo); box-shadow: 0 0 0 4px rgba(245, 200, 0, .22); }
.noite :focus-visible { outline-color: var(--amarelo); }
.noite__casa { min-width: 0; margin-right: clamp(-6rem, -4vw, 0rem); }
@media (max-width: 900px) { .noite__grade { grid-template-columns: minmax(0, 1fr); } .noite__casa { margin: 0 -1.25rem; order: -1; } }

.casa { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)); }
.c-terreno { fill: #08221c; }
.c-piso { stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
.c-q1, .c-q3 { fill: #5d4526; } .c-q2 { fill: #6b5a3c; } .c-q4 { fill: #66481f; } .c-q5 { fill: #5a4424; } .c-q6 { fill: #523c20; } .c-q7 { fill: #4d5a66; }
.c-luz { fill: url(#gLuz); mix-blend-mode: screen; }
.c-onda { fill: none; stroke: #ffd84d; stroke-width: 2.6; opacity: 0; }
.c-par.t { fill: #2f6fe0; } .c-par.e { fill: #b99c68; } .c-par.d { fill: #8f754a; }
.c-cama.t { fill: #aab6cf; } .c-cama.e { fill: #7f8cab; } .c-cama.d { fill: #66728f; }
.c-cab.t { fill: #7a4a2b; } .c-cab.e { fill: #5f381f; } .c-cab.d { fill: #4c2c18; }
.c-mov.t { fill: #6c4427; } .c-mov.e { fill: #50321c; } .c-mov.d { fill: #3f2715; }
.c-mesa.t { fill: #835730; } .c-mesa.e { fill: #5f3f22; } .c-mesa.d { fill: #4b311a; }
.c-sofa.t { fill: #b3a283; } .c-sofa.e { fill: #8f7f62; } .c-sofa.d { fill: #76684f; }
.c-tv.t { fill: #1b2740; } .c-tv.e { fill: #6fd0ff; } .c-tv.d { fill: #101a2e; }
.c-arco { fill: none; stroke: #ffe98f; stroke-width: 2.2; opacity: .9; }
.c-arco-brilho { fill: none; stroke: #ffb800; stroke-width: 9; opacity: .5; filter: url(#fNeon); }
.c-fluxo { fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 26 260; animation: fluxo 3.2s linear infinite; filter: url(#fBrilho); }
@keyframes fluxo { from { stroke-dashoffset: 286; } to { stroke-dashoffset: 0; } }
.c-pulso { fill: #fff; filter: url(#fBrilho); }
.c-halo { fill: url(#gHalo); animation: halo 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.25); opacity: .75; } }
.c-ap { fill: #dfe6f2; } .c-ap-topo { fill: #fff; }

/* empresas, serviços e perguntas: relevo */
.corp__plano { box-shadow: 0 26px 50px -30px rgba(0, 30, 68, .6); transition: transform .25s, box-shadow .25s; }
.corp__plano:hover { transform: translateY(-6px); box-shadow: 0 36px 60px -30px rgba(0, 30, 68, .7); }
.corp__preco b { background: linear-gradient(180deg, #ff2a2a, #c40000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.servico { padding-inline: 1rem; margin-inline: -1rem; border-radius: 16px; transition: background-color .2s, transform .2s; }
.servico:hover { background: var(--nevoa); transform: translateY(-3px); }
.perguntas summary::after { transition: transform .25s, background-color .25s; box-shadow: 0 8px 16px -8px rgba(245, 160, 0, .9); }
.perguntas details[open] summary::after { transform: rotate(180deg); background: var(--tinta); color: #fff; }
.secao--verde { background: radial-gradient(60% 120% at 100% 0%, #00a000, rgba(0, 160, 0, 0) 70%), linear-gradient(160deg, #009400, var(--verde) 60%, #006a00); }
.secao--amarela { background: radial-gradient(50% 90% at 0% 0%, #ffe66b, rgba(255, 230, 107, 0) 70%), linear-gradient(160deg, #ffd21a, var(--amarelo) 60%, #efbb00); }
.rodape { background: linear-gradient(180deg, #001E44, #000d20); }
.zap-fixo { background: linear-gradient(180deg, #00a000, var(--verde)); }

/* entrada das seções: um movimento só, ao aparecer na tela */
.com-efeitos .secao__cabeca, .com-efeitos .incluso, .com-efeitos .dupla, .com-efeitos .noite__grade, .com-efeitos .corp, .com-efeitos .servicos, .com-efeitos .cobertura, .com-efeitos .perguntas {
  opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.com-efeitos .visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .c-onda { opacity: .5; }
}

/* =====================================================================
   VERSÃO 3: carrossel, seletor de uso, planos em cartões, aplicativo
   ===================================================================== */

/* ---------- carrossel do topo ---------- */
.vitrine { position: relative; overflow: hidden; background: var(--tinta); }
.vitrine__trilho { display: flex; transition: transform .8s cubic-bezier(.65, 0, .2, 1); }
.slide { position: relative; isolation: isolate; flex: 0 0 100%; min-width: 0; display: flex; align-items: center; min-height: clamp(520px, 62vw, 640px); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(7.5rem, 11vw, 9rem); overflow: hidden; }
.slide__grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 2.5rem; }
.slide h1, .slide__titulo { margin: 0; max-width: none; font-style: italic; font-stretch: 125%; font-weight: 900; line-height: .95; letter-spacing: -0.02em; font-size: clamp(2.5rem, 1.2rem + 5.6vw, 5.2rem); text-wrap: balance; }
.slide__titulo em { font-style: inherit; color: var(--amarelo); }
.slide__sub { margin: 1.3rem 0 0; max-width: 36ch; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 500; }
.slide__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.slide > .largura > * { transition: opacity .7s ease .15s, transform .8s cubic-bezier(.2, .8, .2, 1) .15s; }
.com-efeitos .slide:not(.slide--atual) > .largura > * { opacity: 0; transform: translateY(28px); }
.com-efeitos .slide:not(.slide--atual) > .largura > *:last-child { transform: translateX(60px) scale(.94); }

.slide--amarelo { color: var(--tinta); background:
    radial-gradient(60% 80% at 82% 38%, #ffe66b 0%, rgba(255, 230, 107, 0) 60%),
    radial-gradient(50% 70% at 0% 100%, #e9b200 0%, rgba(233, 178, 0, 0) 65%),
    linear-gradient(160deg, #ffd21a, var(--amarelo) 55%, #efbb00); }
.slide--amarelo h1 { text-shadow: 0 2px 0 rgba(255, 255, 255, .28); }
.slide--noite { color: #fff; background:
    radial-gradient(45% 70% at 78% 50%, rgba(245, 200, 0, .28), rgba(245, 200, 0, 0) 70%),
    radial-gradient(70% 90% at 10% 0%, #0b3a7a 0%, rgba(11, 58, 122, 0) 60%),
    linear-gradient(180deg, #00122b, #001E44 60%, #000d20); }
.slide--vermelho { color: #fff; background:
    radial-gradient(50% 80% at 85% 30%, #ff5a2a 0%, rgba(255, 90, 42, 0) 65%),
    linear-gradient(150deg, #f01010, var(--vermelho) 45%, #9e0000); }
.slide--banner { color: #fff; background: var(--tinta); }
.slide__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slide--banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 18, 43, .88) 0%, rgba(0, 18, 43, .55) 45%, rgba(0, 18, 43, 0) 75%); }
.slide--noite :focus-visible, .slide--vermelho :focus-visible, .slide--banner :focus-visible { outline-color: var(--amarelo); }

.fichas { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; padding: 0; }
.fichas li { padding: .5rem 1.1rem; border: 2px solid currentColor; border-radius: 999px; font-weight: 700; font-style: italic; }

.slide__aneis { position: absolute; right: -6%; top: 50%; width: min(760px, 70vw); transform: translateY(-50%); z-index: -1; }
.slide__aneis circle { fill: none; stroke: var(--amarelo); stroke-width: 1.5; opacity: .5; transform-origin: center; animation: anel 5s ease-out infinite; }
.slide__aneis circle:nth-child(2) { animation-delay: -1.25s; } .slide__aneis circle:nth-child(3) { animation-delay: -2.5s; } .slide__aneis circle:nth-child(4) { animation-delay: -3.75s; }
@keyframes anel { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.15); opacity: 0; } }
.giga { display: grid; justify-items: center; line-height: .8; font-style: italic; font-stretch: 125%; font-weight: 900; }
.giga span { font-size: clamp(9rem, 4rem + 18vw, 19rem); background: linear-gradient(180deg, #fff3b0, var(--amarelo) 45%, #ff9d00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 34px rgba(245, 200, 0, .55)); }
.giga b { font-size: clamp(2.4rem, 1.5rem + 3.5vw, 4.4rem); letter-spacing: .02em; }
.slide__arte { width: min(100%, 420px); justify-self: center; }
.arte-casa { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 7; stroke-linejoin: round; }
.arte-onda path { fill: none; stroke: var(--amarelo); stroke-width: 9; stroke-linecap: round; animation: onda 2.4s ease-in-out infinite; }
.arte-onda path:nth-child(2) { animation-delay: .3s; } .arte-onda path:nth-child(3) { animation-delay: .6s; }
@keyframes onda { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.arte-ponto { fill: var(--amarelo); stroke: #fff; stroke-width: 5; }

.vitrine__controles { position: absolute; left: 0; right: 0; bottom: 3.6rem; display: flex; align-items: center; justify-content: center; gap: 1rem; z-index: 5; }
.vitrine--unica .vitrine__controles { display: none; }
.vitrine__pontos { display: flex; gap: .5rem; padding: .5rem .7rem; background: rgba(0, 18, 43, .45); border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vitrine__pontos button { width: 34px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s, background-color .3s; }
.vitrine__pontos button[aria-selected="true"] { width: 58px; background: var(--amarelo); }
.vitrine__seta { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 18, 43, .45); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s, transform .2s; }
.vitrine__seta:hover { background: var(--tinta); transform: scale(1.08); }
.vitrine :focus-visible { outline-offset: 2px; }
@media (max-width: 820px) {
  .slide__grade { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .slide { min-height: 0; }
  .giga { display: none; } .slide__arte { max-width: 220px; justify-self: start; }
  .selo { margin-inline: 0; max-width: 330px; }
}

/* ---------- para que você usa a internet ---------- */
.uso { position: relative; background: var(--papel); }
.uso__abas { position: relative; z-index: 3; display: flex; justify-content: center; gap: .9rem; margin-top: -2.2rem; padding-bottom: 0; overflow-x: auto; scroll-snap-type: x proximity; padding: .6rem .3rem 1.2rem; }
.uso__aba { flex: 0 0 auto; scroll-snap-align: center; display: grid; justify-items: center; align-content: center; gap: .55rem; width: 128px; min-height: 150px; padding: 1rem .6rem; border: 0; border-radius: 16px; background: #fff; color: var(--tinta); font: inherit; font-weight: 800; line-height: 1.15; cursor: pointer; box-shadow: 0 18px 34px -18px rgba(0, 30, 68, .5), 0 0 0 1px var(--linha); transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .25s, color .25s, box-shadow .25s; }
.uso__aba svg { width: 52px; height: 52px; fill: none; stroke: var(--vermelho); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.uso__aba:hover { transform: translateY(-6px); }
.uso__aba[aria-selected="true"] { background: linear-gradient(180deg, #ff2a2a, var(--vermelho) 60%, #c40000); color: #fff; transform: translateY(-10px) scale(1.06); box-shadow: 0 26px 40px -18px rgba(200, 0, 0, .75); }
.uso__aba[aria-selected="true"] svg { stroke: #fff; }
.uso__painel { position: relative; isolation: isolate; margin-top: -4.6rem; padding: 7rem 0 4rem; color: #fff; overflow: hidden; background:
    radial-gradient(40% 80% at 12% 30%, rgba(245, 200, 0, .3), rgba(245, 200, 0, 0) 70%),
    linear-gradient(120deg, #00122b, #002a63 55%, #001E44); }
.uso__luz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.uso__luz ellipse { fill: none; stroke: var(--amarelo); stroke-width: 2; opacity: .5; filter: drop-shadow(0 0 8px rgba(245, 200, 0, .9)); stroke-dasharray: 420 1800; animation: orbita 9s linear infinite; }
.uso__luz ellipse:nth-child(2) { animation-duration: 13s; animation-direction: reverse; opacity: .35; }
.uso__luz ellipse:nth-child(3) { animation-duration: 17s; opacity: .25; }
.uso__luz ellipse:nth-child(4) { animation-duration: 11s; } .uso__luz ellipse:nth-child(5) { animation-duration: 15s; animation-direction: reverse; opacity: .3; }
@keyframes orbita { to { stroke-dashoffset: -2220; } }
.uso__grade { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); }
.uso__icone { justify-self: center; display: grid; place-items: center; width: min(100%, 300px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe66b, var(--amarelo) 55%, #e0a800); box-shadow: 0 0 0 14px rgba(245, 200, 0, .14), 0 0 90px rgba(245, 200, 0, .55); }
.uso__icone svg { width: 54%; fill: none; stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.uso__pergunta { margin: 0 0 1rem; max-width: 40ch; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 500; opacity: .92; }
.uso__oferta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.uso__mega { display: grid; margin: 0; line-height: .82; font-style: italic; font-stretch: 125%; font-weight: 900; color: var(--amarelo); }
.uso__mega b { font-size: clamp(4.5rem, 2rem + 9vw, 8.5rem); letter-spacing: -0.03em; }
.uso__mega span { font-size: clamp(1.8rem, 1rem + 3vw, 3.2rem); color: #fff; }
.uso__lado { padding-left: 2rem; border-left: 2px solid rgba(255, 255, 255, .35); }
.uso__preco { display: flex; align-items: baseline; gap: .35rem; margin: 0; font-style: italic; font-stretch: 118%; font-weight: 900; }
.uso__preco b { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.uso__preco small { font-size: 1.2rem; font-weight: 700; opacity: .85; }
.uso__nota { margin: .3rem 0 0; font-weight: 700; font-stretch: 110%; opacity: .92; }
.uso__painel--troca .uso__icone { animation: entra-icone .6s cubic-bezier(.2, .9, .3, 1.2); }
.uso__painel--troca .uso__texto { animation: entra-texto .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes entra-icone { from { transform: scale(.6) rotate(-14deg); opacity: 0; } }
@keyframes entra-texto { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 820px) {
  .uso__abas { justify-content: flex-start; margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .uso__aba { width: 108px; min-height: 128px; } .uso__aba svg { width: 42px; height: 42px; }
  .uso__grade { grid-template-columns: minmax(0, 1fr); } .uso__icone { width: 150px; justify-self: start; }
  .uso__lado { padding-left: 0; border-left: 0; }
}

/* ---------- planos em cartões ---------- */
.secao__cabeca--centro { text-align: center; } .secao__cabeca--centro p { margin-inline: auto; }
.secao__cabeca--centro h2::after { content: ''; display: block; width: 110px; height: 6px; margin: .9rem auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--amarelo), var(--vermelho)); }
.abas--centro { display: flex; width: max-content; margin-inline: auto; }
#internet .abas__nota { text-align: center; margin-inline: auto; }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; align-items: center; margin-top: 2.2rem; padding-block: 1.2rem; }
.cartao { display: flex; flex-direction: column; border-radius: 18px; background: #fff; overflow: hidden; text-align: center; box-shadow: 0 30px 50px -30px rgba(0, 30, 68, .6), 0 0 0 1px var(--linha); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.cartao:hover { transform: translateY(-10px); box-shadow: 0 44px 60px -30px rgba(0, 30, 68, .7), 0 0 0 1px var(--linha); }
.cartao__topo { position: relative; display: grid; justify-items: center; padding: 1.8rem 1rem 1.4rem; color: #fff; background: radial-gradient(80% 100% at 50% 0%, #0b3a7a, rgba(11, 58, 122, 0) 70%), linear-gradient(180deg, #002a63, var(--tinta)); }
.cartao__numero { font-size: clamp(3.4rem, 2rem + 4vw, 5rem); line-height: .85; font-style: italic; font-stretch: 125%; font-weight: 900; letter-spacing: -0.03em; background: linear-gradient(180deg, #fff3b0, var(--amarelo) 50%, #ff9d00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cartao__unidade { font-size: 1.9rem; font-style: italic; font-stretch: 125%; font-weight: 900; line-height: 1.1; }
.cartao__tipo { margin-top: .5rem; font-size: .82rem; font-weight: 600; opacity: .85; }
.cartao__base { display: grid; justify-items: center; gap: .2rem; padding: 1.4rem 1.2rem 1.6rem; }
.cartao__por { font-size: .85rem; color: var(--tinta-suave); }
.cartao__preco { display: flex; align-items: baseline; gap: .15rem; margin: 0; color: var(--vermelho); font-style: italic; font-stretch: 118%; font-weight: 900; line-height: 1; }
.cartao__preco b { font-size: 3.6rem; letter-spacing: -0.03em; }
.cartao__preco small { font-size: 1.05rem; font-weight: 800; }
.cartao__nota { margin: .3rem 0 1.1rem; font-size: .9rem; color: var(--tinta-suave); }
.cartao .botao { min-width: 150px; }
.cartao--destaque { z-index: 1; transform: scale(1.08); background: linear-gradient(180deg, #002a63, var(--tinta) 55%, #000d20); color: #fff; box-shadow: 0 50px 70px -30px rgba(0, 30, 68, .85), 0 0 0 2px var(--amarelo), 0 0 60px rgba(245, 200, 0, .3); }
.cartao--destaque:hover { transform: scale(1.08) translateY(-10px); box-shadow: 0 60px 80px -30px rgba(0, 30, 68, .9), 0 0 0 2px var(--amarelo), 0 0 80px rgba(245, 200, 0, .45); }
.cartao--destaque .cartao__topo { background: none; padding-top: 2.6rem; }
.cartao--destaque .cartao__base { border-top: 1px solid rgba(255, 255, 255, .18); }
.cartao--destaque .cartao__preco { color: #fff; } .cartao--destaque .cartao__preco b { font-size: 4.2rem; }
.cartao--destaque .cartao__por, .cartao--destaque .cartao__nota { color: rgba(255, 255, 255, .8); }
.cartao__selo { position: absolute; top: .9rem; padding: .25rem .9rem; border-radius: 999px; background: var(--amarelo); color: var(--tinta); font-size: .8rem; font-weight: 800; }
.planos--troca .cartao { animation: entra-cartao .55s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--ordem, 0) * 70ms); }
@keyframes entra-cartao { from { opacity: 0; translate: 0 34px; } }
@media (max-width: 900px) {
  .planos { display: flex; gap: 1rem; margin-inline: -1.25rem; padding: 1.6rem 1.25rem 2rem; overflow-x: auto; scroll-snap-type: x mandatory; align-items: stretch; }
  .cartao { flex: 0 0 76%; max-width: 300px; scroll-snap-align: center; }
  .cartao--destaque, .cartao--destaque:hover { transform: none; }
}
.incluso { margin-top: 1.6rem; }

/* ---------- aplicativo ---------- */
.app { position: relative; isolation: isolate; overflow: hidden; color: var(--tinta); background: radial-gradient(50% 90% at 100% 0%, #ffe66b, rgba(255, 230, 107, 0) 70%), linear-gradient(160deg, #ffd21a, var(--amarelo) 60%, #efbb00); }
.app__ondas { position: absolute; left: 0; bottom: 0; height: 100%; z-index: -1; }
.app__ondas path { fill: none; stroke: var(--vermelho); stroke-width: 46; stroke-linecap: round; opacity: .9; animation: onda 3s ease-in-out infinite; }
.app__ondas path:nth-child(2) { animation-delay: .4s; } .app__ondas path:nth-child(3) { animation-delay: .8s; }
.app__ondas circle { fill: var(--vermelho); }
.app__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; gap: clamp(1.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.app__fone { width: min(100%, 260px); justify-self: center; margin-bottom: -40px; filter: drop-shadow(0 30px 40px rgba(0, 30, 68, .5)); }
.com-efeitos .app__fone { animation: flutua 6s ease-in-out infinite; }
.fone-corpo { fill: var(--tinta); } .fone-tela { fill: #f4f6fb; } .fone-t1 { fill: var(--tinta); } .fone-t2 { fill: #9fb0c9; }
.fone-cartao { fill: var(--tinta); } .fone-t3 { fill: rgba(255, 255, 255, .55); } .fone-t4 { fill: var(--amarelo); }
.fone-b1 { fill: var(--vermelho); } .fone-b2 { fill: var(--verde); } .fone-botao { fill: var(--amarelo); }
.app__texto { align-self: center; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.app__texto p { margin-top: 1rem; font-weight: 500; font-size: 1.1rem; }
.app__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 1.4rem; }
.loja { display: inline-grid; padding: .6rem 1.5rem .7rem; border-radius: 14px; background: #000; color: #fff; text-decoration: none; line-height: 1.1; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .8); transition: transform .2s; }
.loja:hover { transform: translateY(-3px); }
.loja small { font-size: .78rem; opacity: .85; } .loja b { font-size: 1.35rem; font-stretch: 105%; }
@media (max-width: 820px) { .app__grade { grid-template-columns: minmax(0, 1fr); } .app__fone { order: 2; width: 200px; } .app__texto { padding-bottom: 0; } }

/* ---------- ajuda com ilustração ---------- */
.ajuda { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); }
.ajuda .perguntas { border-top: 0; display: grid; gap: .7rem; }
.ajuda .perguntas details { border: 0; border-radius: 14px; background: linear-gradient(180deg, #002a63, var(--tinta)); color: #fff; box-shadow: 0 18px 30px -22px rgba(0, 30, 68, .8); transition: transform .2s; }
.ajuda .perguntas details:hover { transform: translateX(6px); }
.ajuda .perguntas summary { padding: 1rem 1.2rem; font-size: 1.05rem; }
.ajuda .perguntas details p { padding: 0 1.2rem 1.2rem; color: rgba(255, 255, 255, .88); }
.ajuda .perguntas details[open] summary::after { background: var(--amarelo); color: var(--tinta); }
.ajuda .perguntas :focus-visible { outline-color: var(--vermelho); }
.ajuda__arte { width: min(100%, 400px); justify-self: center; }
.balao-1 { fill: var(--amarelo); } .balao-2 { fill: var(--vermelho); }
.balao-sinal { font: italic 900 150px var(--fonte); fill: #fff; text-anchor: middle; }
.balao-pontos circle { fill: #fff; animation: onda 1.5s ease-in-out infinite; } .balao-pontos circle:nth-child(2) { animation-delay: .2s; } .balao-pontos circle:nth-child(3) { animation-delay: .4s; }
.com-efeitos .ajuda__arte { animation: flutua 7s ease-in-out infinite; }
@media (max-width: 820px) { .ajuda { grid-template-columns: minmax(0, 1fr); } .ajuda__arte { width: 220px; order: -1; justify-self: start; } }

.com-efeitos .planos, .com-efeitos .ajuda, .com-efeitos .app__grade { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.com-efeitos .planos.visto, .com-efeitos .ajuda.visto, .com-efeitos .app__grade.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slide__aneis circle { opacity: .25; }
}

/* faixa de planos: três por vez no computador, com o recomendado no meio */
.faixa { position: relative; margin-top: 1.4rem; }
.faixa .planos { display: flex; gap: 1.6rem; align-items: center; margin: 0 -1rem; padding: 2.6rem 1rem 3.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.faixa .planos::-webkit-scrollbar { display: none; }
.faixa .cartao { flex: 0 0 calc((100% - 3.2rem) / 3); max-width: none; scroll-snap-align: center; }
.faixa__seta { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: var(--tinta); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; box-shadow: 0 14px 24px -12px rgba(0, 30, 68, .8); transition: transform .2s, opacity .2s, background-color .2s; }
.faixa__seta:hover { background: var(--vermelho); transform: scale(1.1); }
.faixa__seta:disabled { opacity: .25; cursor: default; transform: none; background: var(--tinta); }
#planos-anterior { left: -24px; } #planos-proximo { right: -24px; }
@media (max-width: 1340px) { #planos-anterior { left: -8px; } #planos-proximo { right: -8px; } }
@media (max-width: 900px) {
  .faixa .planos { margin-inline: -1.25rem; padding-inline: 1.25rem; gap: 1rem; align-items: stretch; }
  .faixa .cartao { flex-basis: 76%; max-width: 300px; }
  .faixa__seta { display: none; }
}
.com-efeitos .ajuda .perguntas { opacity: 1; transform: none; }
.faixa .planos { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent); }
.faixa .cartao { box-shadow: 0 20px 26px -22px rgba(0, 30, 68, .7), 0 0 0 1px var(--linha); }
.faixa .cartao:hover { box-shadow: 0 26px 30px -22px rgba(0, 30, 68, .8), 0 0 0 1px var(--linha); }
.faixa .cartao--destaque, .faixa .cartao--destaque:hover { box-shadow: 0 24px 30px -22px rgba(0, 30, 68, .9), 0 0 0 2px var(--amarelo), 0 0 34px rgba(245, 200, 0, .35); }
@media (max-width: 820px) { .app__ondas { opacity: .35; } }

/* ---------- serviços fora do ar ---------- */
.fora { padding-block: clamp(2rem, 4vw, 3rem); background: var(--tinta); color: #fff; }
.fora__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 1.5rem 3rem; }
.fora h2 { margin: 0; color: var(--amarelo); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.fora__texto p { margin: .5rem 0 0; max-width: 42ch; opacity: .9; }
.fora__lista { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; }
.fora__lista a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff; font-weight: 700; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.fora__lista a:hover { background: var(--amarelo); border-color: var(--amarelo); color: var(--tinta); transform: translateY(-2px); }
.fora__lista .fora__todos { border-style: dashed; font-weight: 500; }
.fora :focus-visible { outline-color: var(--amarelo); }
@media (max-width: 820px) { .fora__grade { grid-template-columns: minmax(0, 1fr); } }

/* ---------- rodapé compacto ---------- */
.rodape { padding-block: 1.6rem 1rem; font-size: .93rem; }
.rodape__grade { grid-template-columns: auto 1.1fr 1fr 1.3fr; gap: 1.2rem 2.5rem; align-items: start; }
.rodape__marca { display: flex; align-items: center; gap: .9rem; }
.rodape__logo { width: 150px; height: auto; padding: 8px 12px; border-radius: 14px; }
.rodape__desde { margin: 0; font-style: italic; font-stretch: 118%; font-weight: 800; color: var(--amarelo); white-space: nowrap; }
.rodape h3 { margin-bottom: .35rem; font-size: 1rem; }
.rodape p { margin: 0 0 .2rem; }
.rodape__linha { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.rodape__base { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; margin-top: 1.1rem; padding-top: .8rem; padding-right: 150px; font-size: .82rem; }
.rodape__base p { margin: 0; }
@media (max-width: 980px) { .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rodape__grade > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 820px) { .rodape__base { padding-right: 0; padding-bottom: 3.6rem; } }

/* ---------- planos: espaços enxutos, vantagens e TV inclusa ---------- */
#internet { padding-block: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
#internet .secao__cabeca { margin-bottom: 1rem; }
#internet .secao__cabeca--centro h2::after { margin-top: .5rem; height: 5px; }
#internet .abas__nota { margin: .6rem auto 0; font-size: .95rem; }
#internet .faixa { margin-top: 0; }
#internet .faixa .planos { padding-block: 1.9rem 2.2rem; }
#internet .incluso { margin-top: .4rem; }
.vantagens { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 1rem 0 0; padding: 0; }
.vantagens[hidden] { display: none; }
.vantagem__caixa { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 .9rem; height: 100%; padding: .6rem 1.1rem .65rem 1rem; border-radius: 14px; border-left: 6px solid var(--amarelo); background: var(--nevoa); color: var(--tinta); text-decoration: none; text-align: left; line-height: 1.25; }
.vantagem__caixa strong { grid-column: 1; font-style: italic; font-stretch: 115%; font-weight: 900; font-size: 1.08rem; }
.vantagem__caixa span { grid-column: 1; font-size: .88rem; color: var(--tinta-suave); }
.vantagem__caixa em { grid-column: 2; grid-row: 1 / span 2; padding: .4rem .9rem; border-radius: 999px; background: var(--tinta); color: #fff; font-style: normal; font-weight: 700; font-size: .88rem; white-space: nowrap; transition: background-color .2s; }
a.vantagem__caixa:hover em { background: var(--vermelho); }
.vantagem--teste .vantagem__caixa { background: linear-gradient(120deg, #ffe66b, var(--amarelo)); border-left-color: var(--vermelho); }
.vantagem--teste .vantagem__caixa span { color: var(--tinta); }
.vantagem--desconto .vantagem__caixa { border-left-color: var(--verde); }
.vantagem--tv .vantagem__caixa { border-left-color: var(--vermelho); }
.cartao__tv { display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem; padding: .22rem .75rem; border-radius: 999px; background: var(--vermelho); color: #fff; font-size: .8rem; font-weight: 800; }
.cartao__tv::before { content: ''; width: 0; height: 0; border-left: 8px solid #fff; border-block: 5px solid transparent; }
@media (max-width: 700px) { .vantagens { display: grid; } .vantagem__caixa { grid-template-columns: 1fr auto; } }

/* ---------- cobertura: localidades ---------- */
.locais { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; padding: 0; }
.locais li { display: grid; padding: .5rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); line-height: 1.25; }
.locais strong { font-style: italic; font-stretch: 115%; font-weight: 900; }
.locais span { font-size: .85rem; opacity: .9; }

/* ---------- empresas: soluções ---------- */
#empresas .secao__cabeca h2 { max-width: 22ch; }
.solucoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.solucoes[hidden] { display: none; }
.solucao { display: grid; align-content: start; gap: .45rem; padding: 1.3rem 1.3rem 1.2rem; border-radius: 22px; background: var(--papel); color: var(--tinta); text-decoration: none; box-shadow: 0 22px 40px -28px rgba(0, 30, 68, .6); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background-color .25s, color .25s; }
.solucao__icone { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .3rem; border-radius: 16px; background: linear-gradient(160deg, #002a63, var(--tinta)); transition: background .25s; }
.solucao__icone svg { width: 32px; height: 32px; fill: none; stroke: var(--amarelo); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.solucao strong { font-size: 1.15rem; font-stretch: 110%; line-height: 1.2; }
.solucao__texto { font-size: .93rem; color: var(--tinta-suave); }
.solucao em { margin-top: .3rem; font-style: normal; font-weight: 700; color: var(--vermelho); }
.solucao em::after { content: ' ›'; }
.solucao:hover { transform: translateY(-6px); background: var(--tinta); color: #fff; box-shadow: 0 32px 50px -28px rgba(0, 30, 68, .8); }
.solucao:hover .solucao__texto { color: rgba(255, 255, 255, .85); }
.solucao:hover em { color: var(--amarelo); }
.solucao:hover .solucao__icone { background: var(--amarelo); } .solucao:hover .solucao__icone svg { stroke: var(--tinta); }
.corp__titulo { margin: 2.4rem 0 1rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-style: italic; font-stretch: 118%; font-weight: 900; }

/* ---------- tela vermelha: casa com câmera e aparelhos conectados ---------- */
.slide__arte--iot { width: min(112%, 600px); max-width: none; overflow: visible; }
.slide__arte--iot .arte-onda path { stroke-width: 6; }
.slide__arte--iot .arte-casa { stroke-width: 5; }
.iot-linhas path { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-dasharray: 3 8; stroke-linecap: round; animation: iot-fluxo 1.6s linear infinite; }
@keyframes iot-fluxo { to { stroke-dashoffset: -22; } }
.iot-dados circle { fill: var(--amarelo); filter: drop-shadow(0 0 6px rgba(245, 200, 0, .9)); }
.iot-disco { fill: var(--tinta); stroke: rgba(255, 255, 255, .85); stroke-width: 3; }
.iot-claro { fill: #fff; } .iot-escuro { fill: var(--tinta); }
.iot-traco { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.iot-traco--escuro { stroke: var(--tinta); }
.iot-feixe { fill: var(--amarelo); opacity: .3; transform-origin: 14px -2px; animation: iot-varre 4s ease-in-out infinite; }
@keyframes iot-varre { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
.iot-pisca { fill: var(--vermelho); animation: iot-pisca 1.2s steps(2, jump-none) infinite; }
@keyframes iot-pisca { 50% { opacity: .15; } }
.iot-halo { fill: var(--amarelo); opacity: .25; transform-box: fill-box; transform-origin: center; animation: iot-halo 2.6s ease-in-out infinite; }
@keyframes iot-halo { 50% { transform: scale(1.45); opacity: .55; } }
.iot-sinal { animation: onda 1.8s ease-in-out infinite; }
.com-efeitos .iot-no > * { animation-delay: var(--atraso, 0s); }
.com-efeitos .iot-no .iot-disco { animation: iot-pulso 3.2s ease-in-out infinite; animation-delay: var(--atraso, 0s); }
@keyframes iot-pulso { 50% { stroke: var(--amarelo); stroke-width: 5; } }
@media (max-width: 820px) { .slide__arte--iot { max-width: 300px; } }
@media (prefers-reduced-motion: reduce) { .iot-dados { display: none; } }

/* ---------- câmeras: preço ---------- */
.etiqueta-preco { display: inline-flex; align-items: center; gap: .35rem; margin: 1rem 0 .4rem; padding: .7rem 1.2rem; border-radius: 18px 18px 18px 4px; background: var(--tinta); color: #fff; }
.etiqueta-preco small { align-self: flex-start; margin-top: .5rem; font-weight: 800; color: var(--amarelo); }
.etiqueta-preco b { font-size: 2.6rem; line-height: 1; font-style: italic; font-stretch: 118%; font-weight: 900; color: var(--amarelo); }
.etiqueta-preco span { margin-left: .5rem; padding-left: .8rem; border-left: 1px solid rgba(255, 255, 255, .35); font-size: .9rem; line-height: 1.3; }