/* ===================================================================
   PALACE TELECOM — Design System v4 "Graphite Ice"
   Preto grafite · cinza · branco · azul-gelo suave (tech)
   =================================================================== */

:root{
  --bg:        #08090C;   /* grafite profundo      */
  --bg-2:      #0C0E12;
  --bg-3:      #12151B;
  --panel:     rgba(255,255,255,.03);
  --panel-2:   rgba(255,255,255,.06);
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.17);
  --text:      #F0F2F5;
  --dim:       #9AA1AB;
  --faint:     #5F6570;

  --accent:    #8FB9F2;   /* azul-gelo             */
  --accent-2:  #5B85C9;   /* azul aço              */
  --accent-lt: #C4DAF8;   /* gelo claro            */
  --accent-glow: rgba(143,185,242,.13);
  --silver:    #9FB0C4;   /* prata — detalhes gregos */

  --ink:       #0E0E11;
  --on-ink:    #F5F3ED;
  --on-ink-dim:#A9A8A1;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 60px);
  --r: 20px;
  --r-lg: 28px;

  --display: "Unbounded", sans-serif;
  --body: "Sora", system-ui, sans-serif;
  --greek: "Marcellus SC", Georgia, serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:var(--body); background:var(--bg); color:var(--text);
  line-height:1.65; font-weight:300; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--accent); color:#0B1626; }

/* ambient: grid blueprint + auroras frias */
.bg-stage{ position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--bg); }
.bg-stage::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(90% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(90% 60% at 50% 0%, #000 0%, transparent 75%);
}
.bg-stage::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(52% 42% at 80% -6%, rgba(143,185,242,.10), transparent 62%),
    radial-gradient(44% 36% at 6% 14%, rgba(159,176,196,.05), transparent 60%),
    radial-gradient(60% 50% at 50% 112%, rgba(91,133,201,.08), transparent 65%);
}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--greek); font-size:.72rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--silver);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--silver); opacity:.6; }
h1,h2,h3{ font-weight:400; line-height:1.12; letter-spacing:-.01em; }
h1.display, h2.display{
  font-family:var(--display); font-weight:500; letter-spacing:-.02em;
}
h1.display{ font-size:clamp(2.1rem, 5vw, 3.9rem); line-height:1.08; }
h2.display{ font-size:clamp(1.6rem, 3.4vw, 2.6rem); line-height:1.14; }
h3{ font-family:var(--body); font-weight:600; font-size:1.12rem; }
p{ color:var(--dim); font-size:1rem; }
.lead{ font-size:clamp(1.02rem, 1.4vw, 1.18rem); color:var(--dim); }
.grad{
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent-lt) 52%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding:clamp(72px, 10vw, 130px) 0; position:relative; }
.sec-head{ max-width:680px; margin-bottom:56px; }
.sec-head .eyebrow{ margin-bottom:18px; }
.sec-head p{ margin-top:16px; }

/* ---------- meander hairline ---------- */
.meander{
  height:20px; background-repeat:repeat-x; background-position:center; background-size:auto 16px;
  opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 44 22'%3E%3Cpath d='M0 4 H36 V18 H8 V8 H28 V14 H16' fill='none' stroke='%238FB9F2' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:.92rem; letter-spacing:.01em;
  padding:14px 26px; border-radius:999px; cursor:pointer; white-space:nowrap;
  border:1px solid transparent; transition:transform .35s var(--ease), box-shadow .35s, background .35s, border-color .35s, color .35s;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{
  background:linear-gradient(120deg, var(--accent-lt), var(--accent));
  color:#0B1626;
  box-shadow:0 10px 32px -12px rgba(143,185,242,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -14px rgba(143,185,242,.65); }
.btn-ghost{
  background:var(--panel); color:var(--text); border-color:var(--line-2);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn-dark{
  background:rgba(143,185,242,.08); color:var(--accent); border-color:rgba(143,185,242,.3);
}
.btn-dark:hover{ background:rgba(143,185,242,.14); transform:translateY(-2px); }

/* ---------- nav ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
header.nav.scrolled{
  background:rgba(8,9,12,.74);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  padding:11px var(--gut);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand img{ width:38px; height:38px; object-fit:contain; transition:transform .6s var(--ease-out); }
.brand:hover img{ transform:rotate(10deg); }
.brand .wm{ line-height:1; }
.brand .wm .p{ font-family:var(--display); font-weight:500; font-size:1.02rem; letter-spacing:.14em; }
.brand .wm .t{ font-family:var(--greek); font-size:.5rem; letter-spacing:.52em; color:var(--dim); display:block; margin-top:3px; }

nav.links{ display:flex; align-items:center; gap:clamp(18px, 2.4vw, 34px); }
nav.links a{
  font-size:.86rem; font-weight:400; color:var(--dim); position:relative;
  transition:color .3s; white-space:nowrap;
}
nav.links a:hover, nav.links a.active{ color:var(--text); }
nav.links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:var(--accent); border-radius:2px;
}
nav.links a .new{
  font-size:.58rem; font-weight:600; letter-spacing:.08em; color:#0B1626;
  background:var(--accent); border-radius:99px; padding:2px 7px; margin-left:6px;
  vertical-align:middle; text-transform:uppercase;
}
/* nav dropdown "Conteúdo" */
.dropdown{ position:relative; display:flex; align-items:center; }
.drop-toggle{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:var(--body); font-size:.86rem; font-weight:400; color:var(--dim);
  background:none; border:none; cursor:pointer; padding:0; transition:color .3s;
}
.drop-toggle:hover,
.dropdown:hover .drop-toggle,
.dropdown.open .drop-toggle,
.drop-toggle.active{ color:var(--text); }
.drop-toggle .chev{ width:11px; height:11px; transition:transform .35s var(--ease); }
.dropdown:hover .drop-toggle .chev,
.dropdown.open .drop-toggle .chev{ transform:rotate(180deg); }
.drop-toggle.active::after{
  content:""; position:absolute; left:0; right:20px; bottom:-8px; height:2px;
  background:var(--accent); border-radius:2px;
}
.dropdown::after{ /* ponte invisível pro hover não cair no gap */
  content:""; position:absolute; top:100%; left:-10px; right:-10px; height:16px;
}
.drop-menu{
  position:absolute; top:calc(100% + 15px); left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:210px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:rgba(11,13,17,.94); border:1px solid var(--line); border-radius:16px;
  backdrop-filter:saturate(160%) blur(20px);
  box-shadow:0 28px 64px -26px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:20;
}
.dropdown:hover .drop-menu,
.dropdown.open .drop-menu,
.dropdown:focus-within .drop-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.drop-menu a{
  display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:10px;
  color:var(--dim); white-space:nowrap; transition:background .25s, color .25s;
}
.drop-menu a::after{ display:none; }        /* neutraliza sublinhado da nav */
.drop-menu a:hover{ background:var(--panel-2); color:var(--text); }
.drop-menu a .di{ width:17px; height:17px; flex:none; margin-top:2px; stroke:var(--accent); opacity:.85; }
.drop-menu a .dt{ display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.drop-menu a .dt b{ font-weight:600; font-size:.88rem; color:var(--text); }
.drop-menu a .dt span{ font-size:.72rem; color:var(--faint); }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:6px; }
.menu-toggle span{ width:24px; height:1.5px; background:var(--text); display:block; }

/* ---------- cards / glass ---------- */
.glass{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  backdrop-filter:blur(10px);
}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px; position:relative; overflow:hidden;
  transition:transform .45s var(--ease-out), border-color .45s, background .45s;
}
.card:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--panel-2); }
.card .ic{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-glow); border:1px solid rgba(143,185,242,.25); margin-bottom:20px;
}
.card .ic svg{ width:21px; height:21px; stroke:var(--accent); }
.card h3{ margin-bottom:10px; }
.card p{ font-size:.93rem; }

/* ---------- stats (quadro fechado 3 colunas) ---------- */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; backdrop-filter:blur(8px);
}
.stat{ padding:22px 26px; position:relative; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat::before{
  content:""; position:absolute; top:0; left:26px; width:22px; height:2px;
  background:var(--accent); opacity:.75; border-radius:0 0 2px 2px;
}
.stat b{
  font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,2.2vw,1.9rem);
  display:block; color:var(--text); white-space:nowrap;
}
.stat b em{ font-style:normal; color:var(--accent); }
.stat span{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
@media (max-width:640px){
  .stats{ grid-template-columns:1fr; }
  .stat + .stat{ border-left:none; border-top:1px solid var(--line); }
}

/* ---------- pricing ---------- */
.toggle{
  display:inline-flex; background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:5px; gap:4px;
}
.toggle button{
  border:none; background:transparent; color:var(--dim); cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:.9rem;
  padding:11px 26px; border-radius:999px; transition:background .35s, color .35s;
}
.toggle button.on{ background:linear-gradient(120deg, var(--accent-lt), var(--accent)); color:#0B1626; }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:36px 30px; display:flex; flex-direction:column; position:relative;
  transition:transform .45s var(--ease-out), border-color .45s;
}
.plan:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.plan.feat{
  background:linear-gradient(170deg, rgba(143,185,242,.08), var(--panel) 55%);
  border-color:rgba(143,185,242,.4);
  box-shadow:0 30px 80px -40px rgba(143,185,242,.35);
}
.plan .tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(120deg, var(--accent-lt), var(--accent)); color:#0B1626;
  padding:6px 16px; border-radius:99px; white-space:nowrap;
}
.plan .nm{ font-family:var(--greek); font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; color:var(--silver); }
.plan h3{ font-family:var(--display); font-weight:500; font-size:1.3rem; margin:10px 0 4px; }
.plan .desc{ font-size:.86rem; color:var(--dim); min-height:42px; }
.plan .price{ margin:22px 0 6px; display:flex; align-items:baseline; gap:6px; }
.plan .price .cur{ font-size:.95rem; color:var(--dim); }
.plan .price .val{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,3vw,2.6rem); color:var(--text); }
.plan .price .per{ font-size:.82rem; color:var(--faint); }
.plan .note{ font-size:.74rem; color:var(--faint); margin-bottom:22px; }
.plan ul{ list-style:none; margin:0 0 30px; flex:1; }
.plan ul li{
  display:flex; gap:10px; align-items:flex-start; padding:9px 0;
  font-size:.9rem; color:var(--dim); border-bottom:1px dashed rgba(255,255,255,.07);
}
.plan ul li svg{ width:16px; height:16px; flex:none; margin-top:4px; stroke:var(--accent); }
.plan .btn{ width:100%; }

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center; padding:clamp(80px,11vw,130px) 0; position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(143,185,242,.14), transparent 65%),
    var(--bg-2);
  color:var(--text);
}
.cta-band h2{ max-width:720px; margin:20px auto 14px; }
.cta-band p{ max-width:480px; margin:0 auto 36px; }
.cta-band .eyebrow{ color:var(--accent-lt); }
.cta-band .eyebrow::before{ background:var(--accent-lt); }
.cta-band .seal-bg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:520px; max-width:82%; opacity:.05;
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:64px 0 36px; background:var(--bg-2); }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
.foot-logo{ height:84px; width:auto; object-fit:contain; margin-bottom:20px; }
footer h4{ font-family:var(--greek); font-size:.72rem; letter-spacing:.26em; color:var(--silver); margin-bottom:16px; text-transform:uppercase; }
footer ul{ list-style:none; }
footer ul li{ margin-bottom:9px; }
footer ul li a{ font-size:.89rem; color:var(--dim); transition:color .3s; }
footer ul li a:hover{ color:var(--accent); }
.foot-brand p{ font-size:.88rem; max-width:300px; }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
}
.foot-bottom span{ font-size:.78rem; color:var(--faint); }

/* ---------- floating whatsapp ---------- */
.fab{
  position:fixed; bottom:24px; right:24px; z-index:200;
  display:flex; align-items:center; gap:10px; padding:13px 20px 13px 15px;
  background:linear-gradient(120deg, var(--accent-lt), var(--accent)); color:#0B1626;
  border-radius:99px; font-weight:600; font-size:.86rem;
  box-shadow:0 16px 44px -14px rgba(143,185,242,.5);
  transform:translateY(120px); opacity:0;
  transition:transform .6s var(--ease-out), opacity .6s;
}
.fab.show{ transform:translateY(0); opacity:1; }
.fab:hover{ transform:translateY(-3px); }
.fab svg{ width:20px; height:20px; fill:#0B1626; }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1060px){
  nav.links, .nav-cta .btn{ display:none; }
  .menu-toggle{ display:flex; }
}
@media (max-width:640px){
  .foot-grid{ grid-template-columns:1fr; }
  .fab span{ display:none; }
  .fab{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}