/* VolpeNet: composição própria (09/11/2026), diferente da Network (menu escuro em pílula, banner claro com arco) e da JvsNet
   (banner petróleo com a pessoa num arco à esquerda): menu BRANCO com o logo à esquerda; banner de CÉU AZUL com as ondas de
   sinal do símbolo da VolpeNet atrás da pessoa e o MORRO no pé; planos em "bilhete" claro com faixa azul; abas dos perfis em cima. */

/* ---------- faixa e menu ---------- */
.d-faixa{background:var(--mata-3);color:#D6E6F5}
.d-topo__barra{grid-template-columns:auto 1fr auto auto;border-radius:20px;background:#fff;color:var(--tinta);padding:0 12px 0 22px;box-shadow:0 18px 40px -26px rgba(8,48,110,.55)}
.d-topo.rolou .d-topo__barra{background:rgba(255,255,255,.97);box-shadow:0 22px 44px -22px rgba(8,48,110,.6)}
.d-topo.rolou::before{background:var(--claro)}
.d-topo__logo{grid-column:1;grid-row:1}
.d-topo__logo img{width:150px}
.d-topo__menu--e{grid-column:2;justify-self:end}
.d-topo__menu--d{grid-column:3}
.d-topo__central{grid-column:4;border-radius:14px;background:var(--campo);color:#fff}
.d-topo__central:hover{background:var(--esm)}
.d-topo__menu a{color:var(--mata)}
.d-topo__menu a::after{background:var(--lima)}
.hamb span{background:var(--mata)}
.hamb{background:var(--claro)}

/* ---------- banner: céu azul, ondas de sinal e o morro ---------- */
.v-hero{background:var(--claro)}
.v-hero .d-hero__claro{position:relative;overflow:hidden;border-radius:0;padding-bottom:0;
  background:radial-gradient(ellipse 55% 70% at 78% 18%,rgba(168,238,246,.42),transparent 62%),radial-gradient(120% 95% at 86% 0%,#1D5FB8 0%,#004795 46%,#0A3C85 76%,#08306E 100%)}
.v-hero .d-hero__claro::before{display:none}
.v-hero .d-hero__grade{grid-template-columns:1.05fr 1fr;position:relative;z-index:2}
.v-hero .d-hero__txt{padding-bottom:110px}
.v-hero h1{color:#fff;max-width:15ch}
.v-hero .d-vel,.v-hero .d-preco{color:#fff}
.v-hero .d-vel span{background:var(--lima);color:var(--lima-txt)}
.v-ate{margin:.5em 0 0;font:800 1rem/1.15 var(--ft);color:#A8EEF6;text-transform:uppercase;letter-spacing:.04em}
.v-hero .d-preco__fim small{color:#CFE0F2}
.v-hero .d-preco__por{color:#DCE8F5}
.v-hero .d-oferta__nota{color:#DCE8F5;max-width:48ch}
.v-hero .d-assine{margin-top:18px}
.v-hero .d-hero__fig{width:min(520px,100%);margin-bottom:0;z-index:2}
.v-hero .d-pop{aspect-ratio:1/1.2;border-radius:0;overflow:visible}
.v-pessoa{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 30px 30px rgba(8,48,110,.35))}
.d-pop .v-pessoa{position:absolute}
/* ondas: os três arcos do símbolo, saindo de trás da pessoa */
.v-ondas{position:absolute;left:50%;top:44%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.v-ondas i{position:absolute;inset:0;border-radius:50%;border:clamp(10px,1.3vw,18px) solid transparent;border-top-color:rgba(168,238,246,.55);border-right-color:rgba(168,238,246,.22);transform:rotate(-30deg)}
.v-ondas i:nth-child(2){inset:14%;border-top-color:rgba(0,198,227,.7);border-right-color:rgba(0,198,227,.25)}
.v-ondas i:nth-child(3){inset:28%;border-top-color:rgba(255,255,255,.75);border-right-color:rgba(255,255,255,.3)}
.anima .v-ondas i{animation:v-onda 3.6s ease-in-out infinite}
.anima .v-ondas i:nth-child(2){animation-delay:.35s}
.anima .v-ondas i:nth-child(3){animation-delay:.7s}
@keyframes v-onda{0%,100%{opacity:.55}50%{opacity:1}}
.v-flut{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 18px 16px rgba(8,48,110,.45))}
.v-flut img{width:100%;height:auto}
.v-flut--a{width:22%;right:-4%;top:30%;animation:flutua 5.5s ease-in-out infinite}
.v-flut--b{width:20%;left:-6%;top:12%;animation:flutua 6.5s ease-in-out infinite;animation-delay:-2s}
/* morro: a curva verde-azulada no pé do banner, onde a pessoa "pisa" */
.v-morro{position:absolute;left:-10%;right:-10%;bottom:-1px;height:120px;z-index:3;background:var(--claro);border-radius:60% 40% 0 0/100% 100% 0 0}

/* ---------- atalhos: faixa clara, cartões brancos ---------- */
.v-atalhos{background:var(--claro);color:var(--tinta);padding:24px 0 56px}
.v-atalhos h2{color:var(--mata)}
.v-atalhos .d-vidro{background:#fff;border:1px solid var(--linha);box-shadow:0 24px 50px -36px rgba(8,48,110,.5)}
.v-atalhos .d-vidro a{color:var(--tinta)}
.v-atalhos .d-vidro a:hover{background:var(--claro)}
.v-atalhos .d-vidro small{color:var(--suave)}

/* ---------- planos: bilhete claro com faixa azul ---------- */
.v-planos{background:linear-gradient(180deg,var(--claro) 0,#fff 100%)}
.v-planos .d-chave{background:#fff;box-shadow:0 10px 30px -20px rgba(8,48,110,.5);border:1px solid var(--linha)}
.v-planos .d-chave button[aria-selected=true]{background:var(--campo);color:#fff}
.v-planos h2{color:var(--mata)}
.v-plano{background:#fff;border:1px solid var(--linha);color:var(--tinta);overflow:hidden;padding-top:58px;box-shadow:0 26px 50px -36px rgba(8,48,110,.55)}
.v-plano:hover{border-color:var(--lima)}
.v-plano__tec{position:absolute;left:0;right:0;top:0;margin:0;padding:10px;background:var(--campo);color:#fff;font:800 .82rem/1 var(--ft);letter-spacing:.12em;text-transform:uppercase}
.v-plano__tec::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-8px;height:16px;background:radial-gradient(circle at 8px 8px,#fff 7px,transparent 7.5px) 0 0/22px 16px repeat-x}
.v-plano .d-plano__vel{color:var(--mata)}
.v-plano .d-plano__vel span{background:var(--lima);color:var(--lima-txt)}
.v-plano .d-preco--plano{color:var(--tinta);margin-top:16px}
.v-plano .d-preco--plano .d-preco__fim small{color:var(--suave)}
.v-plano .d-plano__itens{color:var(--suave);margin-top:14px}
.v-plano .d-plano__btn{background:var(--campo);color:#fff}
.v-plano .d-plano__btn:hover{background:var(--esm)}
.v-planos .d-planos__nota{color:var(--suave)}

/* ---------- perfis: abas em cima, pessoa com as ondas ---------- */
.v-usos{background:#fff;padding-top:56px}
.v-usos__tit{text-align:center;color:var(--mata);font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.025em;margin-bottom:22px}
.v-usos .d-abas{margin:0 0 18px}
.v-usos .d-abas button{background:var(--claro)}
.v-usos .d-abas button[aria-selected=true]{background:var(--campo);transform:none}
.v-usos .d-uso{background:radial-gradient(120% 95% at 86% 0%,#1D5FB8 0%,#004795 55%,#08306E 100%);border-radius:32px;padding:0 clamp(18px,4vw,56px);color:#fff;overflow:hidden}
.v-usos .d-uso__rot{color:var(--lima)}
.v-usos .d-uso h3{color:#fff}
.v-usos .d-uso .d-pop{aspect-ratio:1/1.15;border-radius:0;overflow:visible}
.v-tags{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px;padding:0;list-style:none}
.v-tags li{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:14px;background:rgba(255,255,255,.12);font-weight:600}
.v-tags .i3d{width:40px}

/* ---------- vantagens ---------- */
.v-tem{background:var(--mata)}

/* ---------- como chega: 4 passos numerados ---------- */
.v-chega{background:var(--claro);padding:72px 0}
.v-chega__cab{text-align:center;max-width:720px;margin:0 auto 34px}
.v-chega__cab h2{color:var(--mata);font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.025em}
.v-chega__cab p{color:var(--suave);margin-top:10px}
.v-passos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0;padding:0;list-style:none;counter-reset:p}
.v-passos li{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px 20px 22px;border-radius:24px;background:#fff;border:1px solid var(--linha);box-shadow:0 20px 40px -34px rgba(8,48,110,.6)}
.v-passos .i3d{width:64px}
.v-passos b{color:var(--mata);font-size:1.05rem}
.v-passos span:not(.v-passo__n){color:var(--suave);font-size:.9rem}
.v-passo__n{position:absolute;top:16px;right:18px;font:900 2.2rem/1 var(--ft);color:var(--esm)}
.v-chega__bt{text-align:center;margin-top:28px}

/* ---------- cobertura ---------- */
.v-cob{background:radial-gradient(ellipse 50% 60% at 85% 30%,rgba(0,198,227,.2),transparent 70%),var(--mata)}
.v-regioes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.v-regioes li{padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.v-regioes b{display:block;color:#fff}
.v-regioes span{font-size:.85rem;color:#A8EEF6}
.v-com__tit{font-size:1rem;color:#fff;margin:0 0 10px}
.v-com{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.v-com li{padding:6px 12px;border-radius:999px;background:rgba(168,238,246,.14);color:#DCE8F5;font-size:.85rem}
.v-cob__foto{position:relative;margin:0;border-radius:28px;overflow:visible}
.v-cob__foto>img:first-child{display:block;width:100%;height:auto;border-radius:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.v-cob__pino{position:absolute;width:110px;right:-18px;top:-38px;animation:flutua 5s ease-in-out infinite}
.v-cob__foto figcaption{position:absolute;left:16px;bottom:16px;padding:6px 12px;border-radius:999px;background:rgba(8,48,110,.82);color:#fff;font-weight:700;font-size:.85rem}
.v-creditos{font-size:.75rem;color:#A9C2DE;margin-top:18px}
.v-creditos--pag{color:var(--suave);padding:0 var(--gut,16px) 24px;max-width:1200px;margin:0 auto}

/* ---------- rodapé e páginas ---------- */
.v-slogan{margin:12px 0 0;font:800 1.05rem/1.2 var(--ft);color:#A8EEF6}
.v-slogan-sec{background:var(--campo);padding:44px 0;text-align:center}
.v-slogan-grande{margin:0;font:800 clamp(1.6rem,4vw,2.8rem)/1.1 var(--ft);font-stretch:118%;color:#fff;letter-spacing:-.02em}
.d-pag__fig.v-pag__pessoa{width:min(420px,100%)}
.v-pag__pessoa .d-pop{aspect-ratio:1/1.15;border-radius:0;overflow:visible}
.v-pag__pessoa .v-ondas i{border-top-color:rgba(0,71,149,.35);border-right-color:rgba(0,71,149,.12)}
.v-pag__pessoa .v-ondas i:nth-child(2){border-top-color:rgba(0,198,227,.55)}
.v-pag__pessoa .v-ondas i:nth-child(3){border-top-color:rgba(29,95,184,.45)}
.v-guia-sec .vp-guia{margin-top:8px}
a.v-canal{text-decoration:none;color:inherit}

/* ---------- telas médias ---------- */
@media (max-width:1060px){
  .d-topo__barra{grid-template-columns:auto 1fr auto auto}
  .d-topo__central{grid-column:3}
  .hamb{grid-column:4}
  .v-passos{grid-template-columns:1fr 1fr}
}

/* ---------- celular (Alan, 09/11): pessoa GRANDE na lateral direita, cortada na cintura, texto do outro lado ---------- */
@media (max-width:860px){
  .v-hero .d-hero__claro{padding-top:96px}
  .v-hero .d-hero__grade{grid-template-columns:minmax(0,1fr) 49%;column-gap:6px;text-align:left;align-items:end}
  .v-hero .d-hero__txt{padding:0}
  .v-hero h1{grid-column:1;grid-row:1;order:0;align-self:end;font-size:clamp(1.12rem,5.3vw,1.6rem);line-height:1.12;max-width:none;margin:0 0 10px}
  .v-hero .d-oferta{grid-column:1;grid-row:2;order:0;align-self:start;display:grid;grid-template-columns:auto auto;justify-content:start;align-items:end;gap:0 8px;margin:0 0 18px}
  .v-hero .v-vel b{font-size:clamp(3rem,15.5vw,4.4rem)}
  .v-hero .v-ate{font-size:.72rem;margin:0 0 .6em}
  .v-hero .v-preco{grid-column:1/-1}
  .v-hero .v-preco b{font-size:clamp(2rem,10vw,2.8rem)}
  .v-hero .d-hero__fig{grid-column:2;grid-row:1/3;order:0;align-self:end;justify-self:end;width:calc(100% + var(--gut));margin:0 calc(-1*var(--gut)) 0 0}
  .v-hero .d-oferta__nota{grid-column:1/-1;grid-row:3;order:0;text-align:center;margin:16px auto 0;position:relative;z-index:3;color:#DCE8F5}
  .v-hero .d-assine{grid-column:1/-1;grid-row:4;order:0;justify-self:center;margin:12px auto 26px;position:relative;z-index:3}
  .v-morro{height:46px}
  .v-morro::before{display:none}
  .v-flut--b{display:none}
  .v-flut--a{width:26%;right:2%;top:40%}
  .v-regioes{grid-template-columns:1fr}
  .v-cob__pino{width:80px;right:-6px;top:-26px}
  .v-usos .d-uso{padding-top:20px}
  .v-usos .d-abas{margin:0 calc(-1*var(--gut)) 14px}
  .v-usos .d-abas button[aria-selected=true]{transform:none}
}
@media (max-width:560px){.v-passos{grid-template-columns:1fr}.v-planos .d-chave{width:100%;max-width:420px}.v-planos .d-chave button{flex:1;padding:10px 8px;font-size:.86rem}}
@media (prefers-reduced-motion:reduce){.v-ondas i,.v-flut,.v-cob__pino{animation:none!important}}

/* ---------- correções de construção (Alan, 09/11: "tem erros visuais de construção") ---------- */
/* planos: 4 colunas iguais e centralizadas; contador e botão legíveis no fundo claro */
.v-planos .d-regua--4{grid-template-columns:repeat(4,1fr);max-width:1080px;margin-inline:auto}
.v-planos .regua__cont{color:var(--suave)}
.v-planos .d-planos__det .btn--linha{color:var(--mata);border-color:var(--mata)}
.v-planos .d-planos__nota{margin-top:26px}
/* ritmo entre as seções: ~90 px entre conteúdos no computador, ~56 px no celular */
.v-atalhos{padding:24px 0 40px}
.v-planos{padding:44px 0 48px}
.v-usos{padding-top:44px}
.v-tem{padding:56px 0}
.v-chega{padding:56px 0}
.v-cob{padding:64px 0 44px}
.v-cob + .d-faq{padding-top:44px}
/* formulário de consulta: rótulo visível em cada campo */
.v-rot{display:block;font-size:.8rem;font-weight:600;margin-bottom:4px;color:#DCE8F5;text-align:left}
@media (max-width:860px){
  .v-atalhos{padding:20px 0 24px}
  .v-planos{padding:32px 0 28px}
  .v-usos{padding-top:28px}
  .v-tem,.v-chega{padding:44px 0}
  .v-cob{padding:48px 0 28px}
  .v-cob + .d-faq{padding-top:28px}
  .v-hero .d-assine{margin-bottom:52px}
  /* abas dos perfis: 3 iguais na largura, sem cortar nas bordas */
  .v-usos .d-abas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px;padding:0;overflow:visible}
  .v-usos .d-abas button{flex:none;min-width:0;width:auto;padding:10px 6px 12px;font-size:.8rem}
}
.d-consulta select,.d-consulta input{color:var(--tinta)}
.d-consulta select:invalid,.d-consulta select option[value=""]{color:var(--suave)}

/* ---------- ondas de sinal com volume (Alan, 09/11): anéis de vidro atrás da pessoa e um pedaço na frente do ombro ---------- */
.v-ondas{display:none}
.d-pop .v-sinal{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.d-pop .v-sinal--frente{z-index:3;filter:drop-shadow(0 10px 14px rgba(8,48,110,.45))}
.v-sinal .v-pulso{fill:none;opacity:0;transform-box:view-box;transform-origin:250px 100px}
.anima .v-sinal .v-pulso{animation:v-pulso 6s cubic-bezier(.2,.6,.3,1) infinite}
.anima .v-sinal .v-pulso--2{animation-delay:3s}
@keyframes v-pulso{0%{transform:scale(.6);opacity:0}18%{opacity:.5}100%{transform:scale(2.2);opacity:0}}
.v-pag__pessoa .v-anel--longe{opacity:.45}
@media (prefers-reduced-motion:reduce){.v-sinal .v-pulso{animation:none!important;opacity:0}}

/* ---------- fibra em AZUL CLARO, rádio no azul-escuro (Alan, 09/11: "parece o mesmo produto") ---------- */
.v-planos #chave-empresa[aria-selected=true]{background:var(--lima);color:var(--lima-txt)}
.v-plano--fibra .v-plano__tec{background:linear-gradient(90deg,#00C6E3,#5ED9EE);color:var(--lima-txt)}
.v-plano--fibra .d-plano__vel{color:#007E9C}
.v-plano--fibra .d-plano__vel span{background:#A8EEF6;color:var(--lima-txt)}
.v-plano--fibra .d-plano__btn{background:var(--lima);color:var(--lima-txt)}
.v-plano--fibra .d-plano__btn:hover{background:#5ED9EE}
.v-plano--fibra .d-plano__itens li::before{background:var(--lima)}
.v-plano--fibra:hover{border-color:var(--lima)}
.v-reg--fibra{background:rgba(0,198,227,.2)!important;border-color:var(--lima)!important}
.v-reg--fibra span{color:#A8EEF6;font-weight:700}
.v-rod__zap{margin:8px 0 22px;font-size:.85rem}
.v-rod__zap a{color:#A8EEF6;text-decoration:underline}
@media (max-width:400px){.d-topo__central{padding:0 12px;font-size:.78rem;min-height:44px}.d-topo__logo img{width:118px}}