/* ===========================================================
   MDV TELECOM — Revenda Nio Internet
   Design tokens
=========================================================== */
:root{
  --purple-900:#2E1259;
  --purple-700:#4C1D95;
  --purple-600:#6D28D9;
  --purple-500:#8B3DF2;
  --magenta-500:#D6249A;
  --grad-brand: linear-gradient(120deg, #5B21B6 0%, #8B3DF2 45%, #E23FC0 100%);
  --grad-soft: linear-gradient(160deg, rgba(139,61,242,.10), rgba(226,63,192,.08));
  --bg:#FBFAFD;
  --surface:#FFFFFF;
  --surface-alt:#F3EFFA;
  --text-900:#1C1330;
  --text-600:#5B5470;
  --text-400:#8A83A0;
  --line:#E7E1F5;
  --whatsapp:#25D366;
  --success-bg:#EFFBF4;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --shadow-soft: 0 20px 40px -18px rgba(76,29,149,.28);
  --shadow-card: 0 12px 30px -14px rgba(46,18,89,.22);
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--text-900);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; color:var(--text-900);}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--purple-600);
  background:var(--surface-alt); padding:7px 16px; border-radius:100px;
}
.section{padding:88px 0;}
.section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:14px;}
.section-head p{color:var(--text-600); font-size:1.05rem;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; font-family:var(--font-display);
  font-weight:600; font-size:.95rem; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--grad-brand); color:#fff; box-shadow:var(--shadow-soft);
}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.06);}
.btn-secondary{
  background:var(--surface); color:var(--purple-700); border:1.5px solid var(--line);
}
.btn-secondary:hover{border-color:var(--purple-500); transform:translateY(-2px);}
.btn-whatsapp{
  background:var(--whatsapp); color:#fff; box-shadow:0 12px 26px -12px rgba(37,211,102,.55);
}
.btn-whatsapp:hover{transform:translateY(-2px); filter:brightness(1.05);}
.btn-block{width:100%;}
.icon{width:20px; height:20px; flex-shrink:0;}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,253,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
}
.logo-mark{
  width:38px; height:38px; border-radius:11px; background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
  font-size:1.1rem;
}
.logo small{display:block; font-family:var(--font-body); font-weight:500; font-size:.68rem; color:var(--text-600);}
.nav-links{display:flex; align-items:center; gap:32px;}
.nav-links a{font-weight:500; font-size:.94rem; color:var(--text-600); transition:color .2s;}
.nav-links a:hover{color:var(--purple-600);}
.header-actions{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; width:42px; height:42px; border-radius:10px; background:var(--surface-alt); align-items:center; justify-content:center;}
.nav-toggle svg{width:20px;height:20px;}

/* ===================== HERO ===================== */
.hero{position:relative; padding:76px 0 60px; overflow:hidden;}
.hero-blob{
  position:absolute; top:-160px; right:-160px; width:620px; height:620px;
  background:var(--grad-brand); border-radius:47% 53% 63% 37% / 41% 47% 53% 59%;
  filter:blur(4px); opacity:.16; animation:blobMove 14s ease-in-out infinite;
  z-index:0;
}
@keyframes blobMove{
  0%,100%{ border-radius:47% 53% 63% 37% / 41% 47% 53% 59%; transform:rotate(0deg) scale(1);}
  50%{ border-radius:63% 37% 41% 59% / 53% 59% 41% 47%; transform:rotate(18deg) scale(1.06);}
}
.hero-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem); line-height:1.08; margin:18px 0 20px;}
.hero h1 span{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{color:var(--text-600); font-size:1.12rem; max-width:520px; margin-bottom:32px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.hero-stats{display:flex; gap:28px; flex-wrap:wrap;}
.hero-stats div strong{display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--purple-700);}
.hero-stats div span{font-size:.82rem; color:var(--text-600);}

.hero-card{
  position:relative; background:var(--surface); border-radius:var(--radius-lg);
  padding:34px; box-shadow:var(--shadow-card); border:1px solid var(--line);
  animation:floatCard 6s ease-in-out infinite;
}
@keyframes floatCard{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
.hero-card .tag{
  display:inline-block; background:var(--success-bg); color:#12915A; font-weight:700;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:100px; margin-bottom:16px;
}
.hero-card h3{font-size:1.3rem; margin-bottom:6px;}
.hero-card .price{font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:var(--purple-700); margin:14px 0 2px;}
.hero-card .price small{font-size:1rem; font-weight:500; color:var(--text-600);}
.hero-card .sub-price{color:var(--text-600); font-size:.9rem; margin-bottom:20px;}
.hero-card ul{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;}
.hero-card ul li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--text-600);}
.hero-card ul li svg{width:18px; height:18px; flex-shrink:0; color:var(--purple-600); margin-top:2px;}

/* ===================== LOGOS / TRUST BAR ===================== */
.trust-bar{padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trust-bar .container{display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; color:var(--text-400); font-size:.85rem; font-weight:600;}
.trust-bar .container span{display:flex; align-items:center; gap:8px;}

/* ===================== PLANOS ===================== */
.plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.plan-card{
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 28px; position:relative; transition:transform .3s ease, box-shadow .3s ease;
  opacity:0; transform:translateY(28px);
}
.plan-card.in-view{opacity:1; transform:translateY(0);}
.plan-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-card);}
.plan-card.featured{
  border:2px solid transparent; background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  transform:scale(1.03);
}
.plan-card.featured:hover{transform:scale(1.03) translateY(-8px);}
.plan-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--grad-brand); color:#fff; font-family:var(--font-display); font-weight:600;
  font-size:.75rem; padding:7px 18px; border-radius:100px; white-space:nowrap;
  box-shadow:var(--shadow-soft);
}
.plan-speed{font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--purple-600); text-transform:uppercase; letter-spacing:.04em;}
.plan-card h3{font-size:1.45rem; margin:8px 0 4px;}
.plan-mega{font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--text-900); line-height:1;}
.plan-mega span{font-size:1rem; font-weight:600; color:var(--text-600);}
.plan-price{margin:18px 0 4px;}
.plan-price strong{font-family:var(--font-display); font-size:1.9rem; color:var(--purple-700);}
.plan-price small{color:var(--text-600); font-size:.85rem;}
.plan-card .card-price{font-size:.85rem; color:var(--text-600); margin-bottom:22px;}
.plan-features{display:flex; flex-direction:column; gap:12px; margin-bottom:26px; min-height:150px;}
.plan-features li{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--text-600);}
.plan-features svg{width:19px; height:19px; color:var(--purple-600); flex-shrink:0; margin-top:2px;}
.plan-fine{font-size:.78rem; color:var(--text-400); margin-bottom:18px;}

/* ===================== BENEFICIOS ===================== */
.benefits-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.benefit-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px 22px; opacity:0; transform:translateY(24px); transition:.3s ease;
}
.benefit-card.in-view{opacity:1; transform:translateY(0);}
.benefit-icon{
  width:52px; height:52px; border-radius:14px; background:var(--grad-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.benefit-icon svg{width:26px; height:26px; color:var(--purple-600);}
.benefit-card h4{font-size:1.05rem; margin-bottom:6px;}
.benefit-card p{color:var(--text-600); font-size:.9rem;}

/* ===================== FORM ===================== */
.form-section{background:var(--surface-alt); border-radius:var(--radius-lg); overflow:hidden;}
.form-wrap{display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}
.form-copy{padding:56px 48px; display:flex; flex-direction:column; justify-content:center;}
.form-copy h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:14px;}
.form-copy p{color:var(--text-600); margin-bottom:24px;}
.form-copy ul{display:flex; flex-direction:column; gap:12px;}
.form-copy ul li{display:flex; gap:10px; font-size:.92rem; color:var(--text-600); align-items:flex-start;}
.form-copy ul svg{width:18px; height:18px; color:var(--purple-600); margin-top:2px;}
.form-card{
  background:var(--surface); margin:20px; border-radius:var(--radius-md);
  padding:40px; box-shadow:var(--shadow-card);
}
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; color:var(--text-900);}
.form-field input, .form-field select{
  width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  font-family:inherit; font-size:.95rem; background:var(--bg); transition:border-color .2s;
}
.form-field input:focus, .form-field select:focus{outline:none; border-color:var(--purple-500);}
.consent{font-size:.78rem; color:var(--text-400); margin:14px 0 20px; line-height:1.5;}
.consent a{color:var(--purple-600); font-weight:600;}

/* ===================== FAQ ===================== */
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; background:none; text-align:left; font-family:var(--font-display); font-weight:600; font-size:.98rem;
}
.faq-question svg{width:20px; height:20px; color:var(--purple-600); flex-shrink:0; transition:transform .3s ease;}
.faq-item.open .faq-question svg{transform:rotate(45deg);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-answer p{padding:0 24px 20px; color:var(--text-600); font-size:.92rem;}

/* ===================== CTA FINAL ===================== */
.cta-final{
  background:var(--grad-brand); border-radius:var(--radius-lg); padding:64px 40px; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.cta-final h2{color:#fff; font-size:clamp(1.6rem,3.2vw,2.3rem); margin-bottom:14px;}
.cta-final p{color:rgba(255,255,255,.85); margin-bottom:30px; max-width:520px; margin-left:auto; margin-right:auto;}
.cta-final .btn-secondary{background:#fff; color:var(--purple-700); border:none;}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--purple-900); color:rgba(255,255,255,.75); padding:64px 0 28px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
.footer-grid h5{color:#fff; font-family:var(--font-display); font-size:.9rem; margin-bottom:16px;}
.footer-grid ul{display:flex; flex-direction:column; gap:10px;}
.footer-grid ul a{font-size:.88rem; transition:color .2s;}
.footer-grid ul a:hover{color:#fff;}
.footer-brand .logo-mark{margin-bottom:14px;}
.footer-brand p{font-size:.85rem; line-height:1.7; max-width:280px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:rgba(255,255,255,.5);}

/* ===================== FLOATING BUTTONS ===================== */
.float-whatsapp{
  position:fixed; bottom:26px; right:26px; z-index:200;
  width:64px; height:64px; border-radius:50%; background:var(--whatsapp);
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -10px rgba(37,211,102,.65);
}
.float-whatsapp svg{width:30px; height:30px; color:#fff;}
.float-whatsapp::before{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--whatsapp);
  animation:pulseRing 2.4s ease-out infinite; z-index:-1;
}
@keyframes pulseRing{
  0%{transform:scale(1); opacity:.55;}
  100%{transform:scale(1.9); opacity:0;}
}
.float-top{
  position:fixed; bottom:26px; right:100px; z-index:200;
  width:48px; height:48px; border-radius:50%; background:var(--surface); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s ease;
}
.float-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.float-top svg{width:20px; height:20px; color:var(--purple-600);}

/* ===================== SCROLL REVEAL ===================== */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in-view{opacity:1; transform:translateY(0);}

/* ===================== RESPONSIVE ===================== */
@media (max-width:960px){
  .nav-links{position:fixed; top:76px; left:0; right:0; background:var(--surface); flex-direction:column; align-items:flex-start; padding:24px; gap:18px; border-bottom:1px solid var(--line); transform:translateY(-140%); transition:.3s ease; z-index:99;}
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:flex;}
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .hero-blob{width:420px; height:420px; top:-100px; right:-140px;}
  .plans-grid{grid-template-columns:1fr; }
  .plan-card.featured{transform:none;}
  .benefits-grid{grid-template-columns:repeat(2,1fr);}
  .form-wrap{grid-template-columns:1fr;}
  .form-card{margin:0 20px 20px;}
  .form-copy{padding:40px 28px 10px;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
  .float-top{right:96px; bottom:24px; width:44px; height:44px;}
  .float-whatsapp{width:58px; height:58px; bottom:24px; right:20px;}
}
@media (max-width:600px){
  .section{padding:60px 0;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-stats{gap:20px;}
  .benefits-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}