/*
Theme Name: NetFácil Flux
Theme URI: https://netfaciltelecomunicacoes.com.br
Description: Nova experiência digital NetFácil — tecnologia, fibra e atendimento.
Author: NetFácil Telecomunicações
Version: 1.0.0
*/

:root{
  --f-blue:#0759d7;
  --f-cyan:#1eaaf7;
  --f-orange:#ff7900;
  --f-orange2:#ff9c2c;
  --f-ink:#0d1a30;
  --f-muted:#68778d;
  --f-bg:#f4f7fb;
  --f-white:#fff;
  --f-dark:#041022;
  --f-dark2:#071a35;
  --f-line:#e2e8f0;
  --f-shadow:0 26px 70px rgba(6,22,49,.10);
  --f-max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--f-bg)}
body{margin:0;padding:0;background:var(--f-bg);color:var(--f-ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit}
.flux{min-height:100vh;width:100%}
.f-wrap{width:min(var(--f-max),calc(100% - 36px));margin:0 auto}

/* HEADER */
.f-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-bottom:1px solid rgba(226,232,240,.90)}
.f-nav{height:78px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:22px}
.f-logo img{width:105px;height:63px;object-fit:contain}
.f-links{display:flex;justify-content:center;gap:30px;font-size:12px;font-weight:900;color:#37455e}
.f-links a:hover{color:var(--f-blue)}
.f-nav-btn{min-height:43px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;background:var(--f-orange);color:#fff;border-radius:11px;font-size:11px;font-weight:1000;box-shadow:0 10px 22px rgba(255,121,0,.17)}
.f-nav-btn:hover{background:#e86a00;color:#fff}
.f-menu{display:none;background:none;border:0;color:var(--f-blue);font-size:28px}

/* generic buttons */
.f-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:12px;font-size:12px;font-weight:1000;transition:.2s}
.f-btn:hover{transform:translateY(-2px)}
.f-btn-blue{background:var(--f-blue);color:#fff;box-shadow:0 13px 27px rgba(7,89,215,.18)}
.f-btn-blue:hover{background:#064dbb;color:#fff}
.f-btn-orange{background:var(--f-orange);color:#fff;box-shadow:0 13px 27px rgba(255,121,0,.18)}
.f-btn-orange:hover{background:#e66b00;color:#fff}
.f-btn-white{background:#fff;color:var(--f-ink);border:1px solid rgba(255,255,255,.35)}
.f-btn-white:hover{color:var(--f-blue)}

/* HERO — new composition */
.f-hero{position:relative;background:var(--f-dark);color:#fff;overflow:hidden}
.f-hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(3,9,20,.98) 0%,rgba(3,12,27,.90) 37%,rgba(3,12,27,.47) 68%,rgba(3,12,27,.16) 100%),
    linear-gradient(180deg,rgba(2,8,17,.20),rgba(2,8,17,.68)),
    url("assets/fiber.webp") center/cover no-repeat;
}
.f-hero-grid{
  position:relative;z-index:2;
  min-height:650px;
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:55px;align-items:end;
  padding:105px 0 63px;
}
.f-eyebrow{display:inline-flex;align-items:center;gap:9px;color:#bfe2ff;font-size:10px;letter-spacing:.20em;text-transform:uppercase;font-weight:1000}
.f-eyebrow i{width:36px;height:2px;background:var(--f-orange);border-radius:99px}
.f-hero h1{margin:20px 0 16px;color:#fff;font-size:clamp(51px,6.4vw,88px);line-height:.91;letter-spacing:-.065em;max-width:790px}
.f-hero h1 span{color:var(--f-orange2)}
.f-hero-copy{margin:0;max-width:650px;color:rgba(255,255,255,.74);font-size:16px;line-height:1.75}
.f-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:29px}
.f-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}
.f-points span{padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.035);font-size:9px;font-weight:900;color:rgba(255,255,255,.65)}
.f-hero-side{position:relative;min-height:410px}
.f-speed-card{
  position:absolute;left:0;right:0;bottom:0;
  border-top:1px solid rgba(255,255,255,.13);
  border-left:1px solid rgba(255,255,255,.13);
  border-right:1px solid rgba(255,255,255,.13);
  background:rgba(3,13,28,.55);
  backdrop-filter:blur(14px);
  padding:22px 23px 20px;
}
.f-speed-top{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.46);font-size:9px;font-weight:1000;letter-spacing:.13em}
.f-speed-title{margin:20px 0 5px;color:#fff;font-size:15px;font-weight:1000}
.f-speed-number{font-size:58px;line-height:.95;color:#fff;letter-spacing:-.05em;font-weight:1000}
.f-speed-number span{font-size:18px;color:var(--f-orange2);letter-spacing:0}
.f-speed-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:17px}
.f-speed-bar::after{content:"";display:block;width:78%;height:100%;background:linear-gradient(90deg,var(--f-blue),var(--f-cyan),var(--f-orange));border-radius:99px}
.f-speed-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:13px;color:rgba(255,255,255,.49);font-size:9px}
.f-speed-bottom b{color:#fff}

/* profile rail */
.f-profile{background:#fff;border-bottom:1px solid var(--f-line)}
.f-profile-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.f-profile-btn{
  min-height:125px;padding:21px 19px;
  text-align:left;cursor:pointer;
  background:#fff;border:0;border-right:1px solid var(--f-line);
  position:relative
}
.f-profile-btn:last-child{border-right:0}
.f-profile-btn.active{background:#f6f9ff}
.f-profile-btn.active::after{content:"";position:absolute;left:19px;right:19px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--f-blue),var(--f-orange))}
.f-profile-btn small{display:block;color:var(--f-blue);font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:1000}
.f-profile-btn strong{display:block;margin-top:6px;color:var(--f-ink);font-size:16px}
.f-profile-btn span{display:block;margin-top:4px;color:var(--f-muted);font-size:10px;line-height:1.45}

/* sections */
.f-section{padding:95px 0}
.f-section.white{background:#fff}
.f-section.soft{background:var(--f-bg)}
.f-head{display:flex;justify-content:space-between;align-items:end;gap:30px}
.f-kicker{color:var(--f-blue);font-size:10px;letter-spacing:.20em;text-transform:uppercase;font-weight:1000}
.f-kicker::after{content:"";display:inline-block;width:36px;height:2px;background:var(--f-orange);vertical-align:middle;margin-left:9px;border-radius:99px}
.f-title{margin:11px 0 0;color:var(--f-ink);font-size:clamp(38px,4.6vw,59px);line-height:1;letter-spacing:-.052em}
.f-copy{margin:0;color:var(--f-muted);font-size:15px;line-height:1.78;max-width:610px}

/* plans — product first */
.f-plans{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;margin-top:38px}
.f-plan{min-height:350px;border:1px solid var(--f-line);border-radius:23px;padding:27px;background:#fff;box-shadow:var(--f-shadow);position:relative;overflow:hidden}
.f-plan.main{background:linear-gradient(145deg,#061b3e,#0a55b4);border-color:transparent;color:#fff}
.f-plan::after{content:"";position:absolute;width:180px;height:180px;right:-105px;bottom:-105px;border-radius:50%;background:radial-gradient(circle,rgba(255,121,0,.20),transparent 66%)}
.f-plan small{color:var(--f-blue);font-size:9px;text-transform:uppercase;letter-spacing:.15em;font-weight:1000}
.f-plan.main small{color:#a8ddff}
.f-plan h3{margin:13px 0 7px;color:var(--f-ink);font-size:28px}
.f-plan.main h3{color:#fff}
.f-plan p{min-height:64px;margin:0;color:var(--f-muted);font-size:12px;line-height:1.62}
.f-plan.main p{color:rgba(255,255,255,.70)}
.f-plan ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;color:#58677c;font-size:11px}
.f-plan.main ul{color:rgba(255,255,255,.74)}
.f-plan li::before{content:"✓";color:var(--f-orange);font-weight:1000;margin-right:8px}
.f-plan .f-btn{position:absolute;left:27px;bottom:24px}

/* fiber vs radio */
.f-access-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:40px}
.f-access{min-height:335px;border-radius:25px;padding:30px;position:relative;overflow:hidden;color:#fff}
.f-access.fiber{
  background:
    linear-gradient(125deg,rgba(3,13,29,.94),rgba(7,74,166,.74)),
    url("assets/fiber.webp") center/cover;
}
.f-access.radio{background:linear-gradient(145deg,#071423,#102a3e)}
.f-access.radio::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:19px 19px;opacity:.20;
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 73%)
}
.f-access > *{position:relative;z-index:2}
.f-access-badge{display:inline-flex;padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:1000}
.f-access h3{margin:15px 0 8px;color:#fff;font-size:31px;letter-spacing:-.035em}
.f-access p{margin:0;max-width:510px;color:rgba(255,255,255,.69);font-size:13px;line-height:1.68}
.f-access-line{position:absolute;left:0;right:-10%;bottom:82px;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#2ab7ff,#fff,#ff7900,transparent);box-shadow:0 0 24px rgba(32,173,255,.28);transform:rotate(-9deg)}
.f-radio-dots{position:absolute;right:30px;top:80px;width:210px;height:170px;transform:skewY(-8deg);opacity:.78}
.f-radio-dots i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--f-orange2);box-shadow:0 0 12px rgba(255,121,0,.68)}
.f-radio-dots i:nth-child(1){left:5%;top:30%}.f-radio-dots i:nth-child(2){left:24%;top:16%}.f-radio-dots i:nth-child(3){left:43%;top:39%}.f-radio-dots i:nth-child(4){left:61%;top:12%}.f-radio-dots i:nth-child(5){left:79%;top:32%}.f-radio-dots i:nth-child(6){left:30%;top:67%}.f-radio-dots i:nth-child(7){left:54%;top:78%}.f-radio-dots i:nth-child(8){left:85%;top:69%}

/* why / brand */
.f-why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center;margin-top:36px}
.f-why-list{display:grid;gap:12px}
.f-why-item{display:grid;grid-template-columns:49px 1fr;gap:14px;padding:19px;border:1px solid var(--f-line);border-radius:20px;background:#fbfcfe}
.f-why-num{width:49px;height:49px;border-radius:14px;display:grid;place-items:center;background:#eaf3ff;color:var(--f-blue);font-size:10px;font-weight:1000}
.f-why-item:nth-child(2) .f-why-num,.f-why-item:nth-child(4) .f-why-num{background:#fff0e3;color:var(--f-orange)}
.f-why-item h3{margin:0 0 5px;color:var(--f-ink);font-size:17px}.f-why-item p{margin:0;color:var(--f-muted);font-size:11px;line-height:1.62}
.f-tech-stage{
  min-height:430px;border-radius:29px;background:linear-gradient(145deg,#06162d,#020914);
  position:relative;overflow:hidden;box-shadow:var(--f-shadow)
}
.f-tech-stage::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(38,175,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(38,175,255,.075) 1px,transparent 1px);
  background-size:36px 36px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%)
}
.f-tech-label{position:absolute;top:19px;left:20px;right:20px;display:flex;justify-content:space-between;color:rgba(255,255,255,.40);font-size:8px;font-weight:1000;letter-spacing:.14em}
.f-tech-ring{position:absolute;left:50%;top:50%;width:270px;height:270px;transform:translate(-50%,-50%);border:1px solid rgba(44,191,255,.27);border-radius:50%}
.f-tech-ring::before{content:"";position:absolute;inset:24px;border:1px dashed rgba(255,255,255,.09);border-radius:50%}.f-tech-ring::after{content:"";position:absolute;inset:48px;border:1px solid rgba(255,121,0,.17);border-radius:50%}
.f-tech-center{position:absolute;left:50%;top:50%;width:105px;height:105px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 3%,#6ed8ff 8%,#128dff 28%,#0758d7 44%,#041329 73%);box-shadow:0 0 0 13px rgba(8,102,232,.08),0 0 85px rgba(31,170,255,.27);display:grid;place-items:center;color:#fff;font-size:16px;font-weight:1000;letter-spacing:.13em}
.f-tech-node{position:absolute;width:57px;height:57px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
.f-tech-node b{font-size:7px}.f-tech-node small{font-size:6px;margin-top:3px;color:rgba(255,255,255,.38)}
.f-tech-node.a{left:8%;top:25%}.f-tech-node.b{right:8%;top:22%;border-color:rgba(255,121,0,.25);color:#ffc37c}.f-tech-node.c{left:8%;bottom:18%;color:#91deff}.f-tech-node.d{right:8%;bottom:16%}
.f-tech-link{position:absolute;height:1px;transform-origin:left center;background:linear-gradient(90deg,transparent,#43c5ff,#ff9d31,transparent);opacity:.67}
.f-tech-link.a{width:185px;left:19%;top:34%;transform:rotate(16deg)}.f-tech-link.b{width:182px;left:52%;top:34%;transform:rotate(163deg)}.f-tech-link.c{width:185px;left:19%;top:65%;transform:rotate(-16deg)}.f-tech-link.d{width:183px;left:52%;top:65%;transform:rotate(16deg)}

/* coverage */
.f-coverage{
  position:relative;background:var(--f-dark);color:#fff;overflow:hidden
}
.f-coverage-grid{display:grid;grid-template-columns:1fr .9fr;gap:55px;align-items:center}
.f-coverage .f-title{color:#fff}.f-coverage .f-copy{color:rgba(255,255,255,.63)}
.f-cover-items{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:27px}
.f-cover-item{padding:15px;border:1px solid rgba(255,255,255,.10);border-radius:17px;background:rgba(255,255,255,.035)}
.f-cover-item strong{display:block;color:#fff;font-size:13px;margin-bottom:4px}.f-cover-item span{display:block;color:rgba(255,255,255,.48);font-size:10px;line-height:1.5}
.f-map{
  height:410px;border-radius:29px;border:1px solid rgba(255,255,255,.10);
  position:relative;overflow:hidden;background:
    radial-gradient(circle at 50% 50%,rgba(8,102,232,.14),transparent 34%),
    linear-gradient(145deg,#07182f,#030912)
}
.f-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(39,183,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(39,183,255,.07) 1px,transparent 1px);background-size:34px 34px;transform:perspective(450px) rotateX(57deg) translateY(55px) scale(1.15);transform-origin:center bottom}
.f-route{position:absolute;z-index:3;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,#2bb7ff,#fff,#ff7900,transparent);box-shadow:0 0 16px rgba(37,183,255,.24)}
.f-route.a{width:76%;left:9%;top:55%;transform:rotate(-16deg)}.f-route.b{width:58%;left:23%;top:61%;transform:rotate(11deg)}.f-route.c{width:49%;left:32%;top:44%;transform:rotate(31deg);opacity:.52}
.f-map-node{position:absolute;z-index:5;width:41px;height:41px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);color:#fff}
.f-map-node small{font-size:5px;color:rgba(255,255,255,.34)}.f-map-node b{font-size:7px}
.f-map-node.a{left:15%;top:28%}.f-map-node.b{right:15%;top:25%;color:#ffc37d;border-color:rgba(255,121,0,.22)}.f-map-node.c{left:14%;bottom:19%;color:#8ddcff}.f-map-node.d{right:15%;bottom:17%}
.f-map-core{position:absolute;z-index:5;left:50%;top:49%;width:91px;height:91px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(17,136,255,.72) 0 28%,rgba(4,19,40,.95) 62%);border:1px solid rgba(63,196,255,.28);box-shadow:0 0 0 12px rgba(8,102,232,.05),0 0 65px rgba(8,102,232,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.f-map-core span{width:7px;height:7px;border-radius:50%;background:var(--f-orange);box-shadow:0 0 15px rgba(255,121,0,.8);margin-bottom:6px}
.f-map-core b{font-size:8px;letter-spacing:.10em}.f-map-core small{font-size:5px;margin-top:4px;color:rgba(255,255,255,.35)}
.f-map-bottom{position:absolute;z-index:6;left:20px;right:20px;bottom:19px;display:flex;justify-content:space-between;align-items:end}
.f-map-bottom strong{font-size:13px}.f-map-bottom span{font-size:8px;color:rgba(255,255,255,.44)}

/* support */
.f-support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.f-support-card{min-height:210px;border:1px solid var(--f-line);border-radius:22px;background:#fff;padding:24px;box-shadow:var(--f-shadow)}
.f-support-card b{width:47px;height:47px;border-radius:14px;display:grid;place-items:center;background:#eaf3ff;color:var(--f-blue);font-size:8px}
.f-support-card:nth-child(2) b,.f-support-card:nth-child(3) b{background:#fff0e3;color:var(--f-orange)}
.f-support-card h3{margin:15px 0 7px;font-size:19px;color:var(--f-ink)}.f-support-card p{margin:0;color:var(--f-muted);font-size:11px;line-height:1.65}.f-support-card a{display:inline-flex;margin-top:16px;color:var(--f-blue);font-size:11px;font-weight:1000}

/* final CTA */
.f-final{padding:0 0 95px;background:var(--f-bg)}
.f-final-box{position:relative;overflow:hidden;padding:39px;border-radius:30px;color:#fff;background:linear-gradient(115deg,rgba(4,14,31,.95),rgba(7,73,160,.82)),url("assets/fiber.webp") center/cover;box-shadow:var(--f-shadow)}
.f-final-box::after{content:"";position:absolute;width:340px;height:340px;right:-170px;bottom:-180px;border-radius:50%;background:radial-gradient(circle,rgba(255,121,0,.35),transparent 67%)}
.f-final-content{position:relative;z-index:2;max-width:780px}
.f-final-box h2{margin:12px 0 9px;color:#fff;font-size:clamp(38px,4.5vw,59px);line-height:.98;letter-spacing:-.05em}
.f-final-box p{margin:0;color:rgba(255,255,255,.70);font-size:13px;line-height:1.72}
.f-final-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:23px}

/* footer */
.f-footer{background:#020913;color:#72839b;padding:45px 0 20px}
.f-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-bottom:25px;border-bottom:1px solid rgba(255,255,255,.08)}
.f-footer-logo{width:109px;height:71px;object-fit:contain}.f-footer h3{margin:0 0 9px;color:#fff;font-size:12px}.f-footer p{margin:0;font-size:11px;line-height:1.85}.f-footer a:hover{color:#fff}
.f-copy{display:flex;justify-content:space-between;gap:15px;padding-top:16px;color:#52657e;font-size:9px}
.f-float{position:fixed;right:18px;bottom:18px;z-index:90;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--f-orange);color:#fff;font-size:10px;font-weight:1000;box-shadow:0 17px 39px rgba(255,121,0,.29)}.f-float:hover{color:#fff}

/* responsive */
@media(max-width:1000px){
  .f-nav{grid-template-columns:1fr auto}.f-links{display:none;position:absolute;left:13px;right:13px;top:75px;padding:10px;border:1px solid var(--f-line);border-radius:18px;background:#fff;box-shadow:var(--f-shadow);flex-direction:column;gap:0}.f-links.open{display:flex}.f-links a{padding:13px 9px}.f-nav-btn{display:none}.f-menu{display:block}
  .f-hero-grid,.f-promise-head,.f-promise-grid,.f-why-grid,.f-coverage-grid{grid-template-columns:1fr}.f-hero-side{min-height:370px}
  .f-profile-grid{grid-template-columns:1fr 1fr}.f-profile-btn:nth-child(2){border-right:0}.f-profile-btn:nth-child(3),.f-profile-btn:nth-child(4){border-top:1px solid var(--f-line)}
  .f-plans{grid-template-columns:1fr 1fr}.f-plan.main{grid-column:span 2}
  .f-support-grid,.f-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .f-wrap{width:min(var(--f-max),calc(100% - 22px))}
  .f-nav{height:73px}.f-logo img{width:88px;height:60px}
  .f-hero-grid{min-height:auto;padding:55px 0 55px}.f-hero h1{font-size:44px}.f-hero-copy{font-size:15px}
  .f-speed-card{position:relative;left:auto;right:auto;bottom:auto;margin-top:15px}
  .f-profile-grid,.f-plans,.f-access-grid,.f-cover-items,.f-support-grid,.f-footer-grid{grid-template-columns:1fr}.f-profile-btn{border-right:0;border-top:1px solid var(--f-line)}.f-profile-btn:first-child{border-top:0}.f-plan.main{grid-column:auto}
  .f-section,.f-promise,.f-plans-section,.f-network-section,.f-coverage,.f-support{padding:73px 0}
  .f-title{font-size:38px}.f-head,.f-dark-head{align-items:flex-start;flex-direction:column}.f-plan{min-height:325px}
  .f-tech-stage{min-height:360px}.f-coverage .f-map{height:340px}
  .f-map-bottom{display:block}.f-map-bottom span{display:block;margin-top:3px}
  .f-final{padding-bottom:72px}.f-final-box{padding:28px;border-radius:25px}.f-copy{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.001ms!important}}