/* =========================================================
   Star Telecom — Godofredo Viana - MA
   Paleta extraída da logomarca: verde #1F7631 + preto
   ========================================================= */

:root{
  --green:        #1F7631;
  --green-600:    #1A6529;
  --green-400:    #2C9A42;
  --green-300:    #46C062;
  --green-glow:   rgba(70, 192, 98, .35);

  --ink:          #0B0F0C;
  --ink-800:      #141A16;
  --ink-700:      #1D241F;

  --text:         #1B211D;
  --muted:        #5B665F;
  --muted-invert: rgba(255,255,255,.72);

  --bg:           #FFFFFF;
  --bg-soft:      #F4F7F4;
  --line:         #E2E8E3;
  --line-invert:  rgba(255,255,255,.12);

  --wpp:          #25D366;
  --wpp-dark:     #1EB855;

  --radius:       18px;
  --radius-sm:    12px;
  --shadow:       0 18px 40px -18px rgba(11,15,12,.28);
  --shadow-lg:    0 30px 70px -25px rgba(11,15,12,.45);
  --container:    1180px;
  --header-h:     78px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }

body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em; font-weight:700; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:22px;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.85em 1.5em;
  border:2px solid transparent;
  border-radius:999px;
  font-weight:600; font-size:.95rem; line-height:1;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--green-300); outline-offset:3px; }

.btn--lg{ padding:1.05em 1.9em; font-size:1.03rem; }
.btn--block{ width:100%; }

.btn--primary{ background:var(--green); color:#fff; box-shadow:0 12px 28px -12px rgba(31,118,49,.8); }
.btn--primary:hover{ background:var(--green-600); }

.btn--wpp{ background:var(--wpp); color:#08240F; box-shadow:0 12px 28px -12px rgba(37,211,102,.75); }
.btn--wpp:hover{ background:var(--wpp-dark); color:#04170a; }

.btn--ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(4px); }
.btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.btn--light{ background:#fff; color:var(--green-600); box-shadow:var(--shadow); }
.btn--light:hover{ background:#F1FBF3; }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(11,15,12,.55);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s ease, box-shadow .3s ease, height .3s ease;
}
.header.is-stuck{
  background:rgba(11,15,12,.96);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand__icon{ width:44px; height:auto; flex:none; filter:drop-shadow(0 4px 10px rgba(70,192,98,.35)); }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand__text strong{ color:#fff; font-size:1.16rem; font-weight:700; letter-spacing:-.02em; }
.brand__text small{ color:var(--green-300); font-size:.7rem; font-weight:500; letter-spacing:.02em; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav > a{
  padding:.6em .9em; border-radius:999px;
  color:rgba(255,255,255,.85); font-size:.92rem; font-weight:500;
  transition:color .2s ease, background .2s ease;
}
.nav > a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav > a.is-active{ color:var(--green-300); }
.nav__cta{ margin-left:10px; padding:.7em 1.25em !important; color:#08240F !important; }
.nav__cta:hover{ background:var(--wpp-dark) !important; color:#04170a !important; }

.nav-toggle{
  display:none;
  width:46px; height:46px; flex:none;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:12px; cursor:pointer;
  padding:0; place-items:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:clamp(600px, 96vh, 900px);
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 60px) 0 90px;
  background:var(--ink);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,15,12,.97) 0%, rgba(11,15,12,.88) 42%, rgba(11,15,12,.5) 72%, rgba(11,15,12,.7) 100%),
    url('../img/hero-fibra.jpg') center/cover no-repeat;
  animation:heroZoom 24s ease-in-out infinite alternate;
}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(900px 500px at 78% 45%, var(--green-glow), transparent 65%);
}
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

.hero__inner{ position:relative; z-index:2; }
.hero__content{ max-width:660px; }

.tag{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.45em 1em; margin-bottom:22px;
  background:rgba(70,192,98,.14); border:1px solid rgba(70,192,98,.35);
  border-radius:999px;
  color:var(--green-300); font-size:.82rem; font-weight:600;
}
.tag .dot{ width:8px; height:8px; border-radius:50%; background:var(--green-300); box-shadow:0 0 0 0 var(--green-glow); animation:pulse 2.2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(70,192,98,.6); }
  70%{ box-shadow:0 0 0 12px rgba(70,192,98,0); }
  100%{ box-shadow:0 0 0 0 rgba(70,192,98,0); }
}

.hero h1{
  color:#fff;
  font-size:clamp(2.3rem, 6vw, 4rem);
  font-weight:800;
  margin-bottom:.35em;
}
.hero h1 .hl{
  color:var(--green-300);
  position:relative; white-space:nowrap;
}
.hero__lead{
  color:var(--muted-invert);
  font-size:clamp(1rem, 2.1vw, 1.16rem);
  max-width:560px; margin-bottom:2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:2.6rem; }

.hero__badges{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__badges li{
  padding:.85em 1.25em;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(6px);
}
.hero__badges strong{ display:block; color:#fff; font-size:1.2rem; font-weight:700; line-height:1.2; }
.hero__badges span{ color:var(--muted-invert); font-size:.78rem; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:26px; height:42px; z-index:2;
  border:2px solid rgba(255,255,255,.35); border-radius:14px;
}
.hero__scroll span{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:4px; height:8px; background:var(--green-300); border-radius:2px;
  animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot{ 0%{ opacity:0; top:8px; } 40%{ opacity:1; } 100%{ opacity:0; top:24px; } }

/* ---------- Seções ---------- */
.section{ padding:clamp(64px, 9vw, 110px) 0; }
.section--light{ background:var(--bg-soft); }
.section--dark{
  background:
    radial-gradient(760px 420px at 12% 0%, rgba(31,118,49,.4), transparent 62%),
    radial-gradient(700px 500px at 92% 100%, rgba(31,118,49,.28), transparent 60%),
    var(--ink);
  color:#fff;
}

.section__head{ max-width:660px; margin:0 auto clamp(38px, 6vw, 62px); text-align:center; }
.section__head h2{ font-size:clamp(1.85rem, 4.4vw, 2.7rem); font-weight:800; }
.section__head p{ color:var(--muted); font-size:1.02rem; margin:0; }
.section__head--invert h2{ color:#fff; }
.section__head--invert p{ color:var(--muted-invert); }

.eyebrow{
  display:inline-block; margin-bottom:14px;
  color:var(--green); font-size:.8rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.section--dark .eyebrow{ color:var(--green-300); }

.grid{ display:grid; gap:24px; }
.grid--4{ grid-template-columns:repeat(4, 1fr); }
.grid--plans{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:880px; margin-inline:auto; align-items:start; }

/* ---------- Cards de vantagens ---------- */
.card-feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 26px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-feature:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(31,118,49,.35); }
.card-feature__icon{
  width:56px; height:56px; margin-bottom:20px;
  display:grid; place-items:center;
  border-radius:16px;
  background:linear-gradient(140deg, var(--green), var(--green-400));
  color:#fff;
  box-shadow:0 12px 24px -12px rgba(31,118,49,.9);
}
.card-feature__icon svg{ width:26px; height:26px; }
.card-feature h3{ font-size:1.14rem; margin-bottom:.45em; }
.card-feature p{ color:var(--muted); font-size:.94rem; margin:0; }

/* ---------- Planos ---------- */
.plan{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:24px;
  padding:34px 30px 32px;
  color:var(--text);
  box-shadow:var(--shadow-lg);
  transition:transform .28s ease;
}
.plan:hover{ transform:translateY(-8px); }

.plan--featured{
  background:linear-gradient(165deg, #143C1E 0%, #0C210F 100%);
  color:#fff;
  border:1px solid rgba(70,192,98,.4);
}
.plan__ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  padding:.4em 1.1em;
  background:var(--green-300); color:#06200D;
  border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(70,192,98,.9);
}

.plan__head{ display:flex; align-items:center; gap:14px; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.plan--featured .plan__head{ border-color:rgba(255,255,255,.14); }
.plan__logo{ width:52px; height:auto; flex:none; }
.plan__speed{ font-size:2rem; font-weight:800; margin:0; line-height:1; color:var(--green); }
.plan--featured .plan__speed{ color:var(--green-300); }
.plan__speed span{ font-size:1rem; font-weight:600; letter-spacing:.02em; }
.plan__type{ margin:.35em 0 0; font-size:.85rem; color:var(--muted); font-weight:500; }
.plan--featured .plan__type{ color:var(--muted-invert); }

.plan__list{ display:grid; gap:12px; margin-bottom:26px; }
.plan__list li{ position:relative; padding-left:32px; font-size:.95rem; }
.plan__list li::before{
  content:'';
  position:absolute; left:0; top:2px;
  width:21px; height:21px; border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan--featured .plan__list li::before{ background-color:var(--green-300); }

.plan__price{ margin-top:auto; padding:20px 0 24px; text-align:center; }
.plan__price-label{ display:block; font-size:.85rem; color:var(--muted); font-weight:500; }
.plan--featured .plan__price-label{ color:var(--muted-invert); }
.plan__price-value{
  margin:.15em 0 0;
  font-size:2.9rem; font-weight:800; line-height:1;
  color:var(--ink); letter-spacing:-.03em;
}
.plan--featured .plan__price-value{ color:#fff; }
.plan__price-value span{ font-size:1.15rem; font-weight:600; vertical-align:super; margin-right:.12em; }
.plan__price-value small{ font-size:.95rem; font-weight:500; color:var(--muted); }
.plan--featured .plan__price-value small{ color:var(--muted-invert); }

.plans__note{
  margin:38px auto 0; max-width:620px; text-align:center;
  color:var(--muted-invert); font-size:.95rem;
}
.plans__note a{ color:var(--green-300); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Faixa CTA ---------- */
.strip{ position:relative; padding:clamp(60px, 8vw, 92px) 0; overflow:hidden; text-align:center; color:#fff; }
.strip__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,60,30,.94), rgba(31,118,49,.86)),
    url('../img/faixa-fibra.jpg') center/cover no-repeat;
  filter:saturate(1.1);
}
.strip__inner{ position:relative; z-index:2; }
.strip h2{ font-size:clamp(1.7rem, 4vw, 2.35rem); font-weight:800; }
.strip p{ color:rgba(255,255,255,.88); max-width:560px; margin:0 auto 26px; }

/* ---------- Sobre ---------- */
.about{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(32px, 5vw, 64px); align-items:center; }
.about__text h2{ font-size:clamp(1.8rem, 4.2vw, 2.6rem); font-weight:800; }
.about__text p{ color:var(--muted); }
.about__quote{
  margin:26px 0 30px; padding:18px 22px;
  border-left:4px solid var(--green);
  background:#fff; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text) !important; font-style:italic; font-weight:500;
}
.about__card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px; padding:40px 30px 30px; text-align:center;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.about__card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:6px;
  background:linear-gradient(90deg, var(--green), var(--green-300), var(--green));
}
.about__logo{ width:min(230px, 74%); margin:0 auto 26px; }
.about__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.about__stats li{ padding:14px 6px; background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; }
.about__stats strong{ display:block; color:var(--green); font-size:1.05rem; font-weight:700; }
.about__stats span{ color:var(--muted); font-size:.74rem; }

/* ---------- Contato ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.contact__cards{ display:grid; gap:14px; }

.contact-card{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
a.contact-card:hover{ transform:translateX(5px); background:rgba(70,192,98,.12); border-color:rgba(70,192,98,.45); }
.contact-card__icon{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(140deg, var(--green), var(--green-400));
  color:#fff;
}
.contact-card strong{ display:block; color:#fff; font-size:.98rem; font-weight:600; }
.contact-card span{ color:var(--muted-invert); font-size:.88rem; }

.contact__route{ margin-top:4px; }

/* A altura precisa ser explícita em px: com valores percentuais o Google Maps
   calcula o enquadramento errado no carregamento e sobra área vazia. */
.contact__map{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-lg);
  height:560px;
  line-height:0;
}
.contact__map iframe{ display:block; width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.05); }

/* ---------- Rodapé ---------- */
.footer{ background:var(--ink); color:var(--muted-invert); padding-top:56px; }
.footer__inner{
  display:grid; grid-template-columns:1.1fr .7fr 1.2fr; gap:34px;
  padding-bottom:42px;
}
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__brand img{ width:50px; height:auto; flex:none; }
.footer__brand strong{ display:block; color:#fff; font-size:1.1rem; }
.footer__brand span{ font-size:.82rem; color:var(--green-300); }

.footer__nav{ display:flex; flex-direction:column; gap:9px; font-size:.92rem; }
.footer__nav a:hover{ color:var(--green-300); }

.footer__contact{ display:flex; flex-direction:column; gap:9px; font-size:.92rem; }
.footer__contact a:hover{ color:var(--green-300); }

.footer__bottom{ border-top:1px solid var(--line-invert); padding:20px 0; }
.footer__bottom p{ margin:0; font-size:.85rem; text-align:center; color:rgba(255,255,255,.55); }

/* ---------- WhatsApp flutuante ---------- */
.wpp-float{
  position:fixed; right:20px; bottom:20px; z-index:99;
  width:60px; height:60px;
  display:grid; place-items:center;
  background:var(--wpp); color:#fff;
  border-radius:50%;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.85);
  transition:transform .22s ease, background .22s ease;
  animation:floatIn .5s ease both .8s;
}
.wpp-float:hover{ transform:scale(1.09); background:var(--wpp-dark); }
@keyframes floatIn{ from{ opacity:0; transform:scale(.5) translateY(20px); } to{ opacity:1; transform:none; } }

/* ---------- Animação de entrada ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1024px){
  .grid--4{ grid-template-columns:repeat(2, 1fr); }
  .about{ grid-template-columns:1fr; }
  .about__card{ order:-1; max-width:460px; margin-inline:auto; width:100%; }
  .contact{ grid-template-columns:1fr; }
  .contact__map{ height:440px; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .nav-toggle{ display:grid; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:18px 22px 26px;
    background:rgba(11,15,12,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 24px 40px -24px rgba(0,0,0,.9);
    transform:translateY(-140%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav > a{ padding:.85em 1em; font-size:1rem; border-radius:var(--radius-sm); }
  .nav__cta{ margin:10px 0 0; justify-content:center; }
}

@media (max-width:720px){
  .grid--plans{ grid-template-columns:1fr; gap:34px; }
  .plan{ padding:30px 24px 28px; }
  .hero{ min-height:auto; padding:calc(var(--header-h) + 54px) 0 74px; text-align:left; }
  /* mais contraste sobre a foto em telas estreitas */
  .hero__bg{
    background:
      linear-gradient(180deg, rgba(11,15,12,.92) 0%, rgba(11,15,12,.78) 45%, rgba(11,15,12,.9) 100%),
      url('../img/hero-fibra.jpg') center/cover no-repeat;
    animation:none;
  }
  .hero__scroll{ display:none; }
  .hero__actions .btn{ flex:1 1 100%; }
  .hero__badges li{ flex:1 1 calc(50% - 7px); }
  .footer__inner{ grid-template-columns:1fr; gap:26px; text-align:left; }
}

@media (max-width:520px){
  :root{ --header-h:68px; }
  .brand__icon{ width:38px; }
  .brand__text strong{ font-size:1.02rem; }
  .brand__text small{ font-size:.64rem; }
  .grid--4{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr; }
  .about__stats li{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
  .contact__map{ height:330px; }
  .contact-card{ padding:15px 16px; gap:13px; }
  .contact-card span{ font-size:.83rem; word-break:break-word; }
  .plan__price-value{ font-size:2.5rem; }
  .wpp-float{ width:54px; height:54px; right:16px; bottom:16px; }
  .wpp-float svg{ width:26px; height:26px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}