/* ============================================
   INSIDESIGN — CSS Compartilhado
   ============================================ */

:root{
  /* Paleta oficial da marca */
  --azul-900:#0a3470;
  --azul-700:#205CA8;
  --azul-500:#3a78c4;
  --azul-100:#e6effa;
  --laranja:#F58633;
  --laranja-dark:#dc6e1c;
  --laranja-100:#fff1e3;
  --verde:#91C74B;
  --verde-dark:#7aab38;
  --cinza-900:#0f1729;
  --cinza-700:#3a4661;
  --cinza-500:#6b7a93;
  --cinza-200:#e5eaf2;
  --cinza-100:#f4f6fb;
  --branco:#fff;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',-apple-system,sans-serif;
  color:var(--cinza-900);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ============================================
   BOTÕES
   ============================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:8px;
  font-weight:700;font-size:14px;
  transition:all .15s;cursor:pointer;border:none;
  line-height:1;font-family:inherit;
}
.btn-primary{background:var(--laranja);color:#fff;}
.btn-primary:hover{background:var(--laranja-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,107,28,.35);}
.btn-secondary{background:transparent;color:var(--azul-700);border:2px solid var(--azul-700);padding:10px 20px;}
.btn-secondary:hover{background:var(--azul-100);}
.btn-blue{background:var(--azul-700);color:#fff;}
.btn-blue:hover{background:var(--azul-900);transform:translateY(-1px);box-shadow:0 6px 16px rgba(32,92,168,.35);}
.btn-ghost{color:var(--cinza-700);background:transparent;}
.btn-outline{
  padding:14px 26px;border-radius:8px;font-weight:700;font-size:15px;
  color:#fff;border:2px solid rgba(255,255,255,.3);background:transparent;
}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:#fff;}
.btn-white{background:#fff;color:var(--laranja);}

/* ============================================
   TOPBAR
   ============================================ */
.topbar{
  background:var(--azul-900);color:#cfdef8;
  font-size:13px;padding:8px 0;font-weight:500;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.topbar a{color:#fff;font-weight:600;}
.topbar .left{display:flex;gap:24px;align-items:center;}
.topbar .left span{display:flex;align-items:center;gap:6px;}
.topbar .right{display:flex;gap:16px;align-items:center;}

/* ============================================
   HEADER + NAV
   ============================================ */
header.nav{
  background:#fff;border-bottom:1px solid var(--cinza-200);
  position:sticky;top:0;z-index:100;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px;}
.logo{flex-shrink:0;}
.logo img{height:48px;width:auto;max-width:none;display:block;}
@media (max-width:600px){
  .nav .wrap{height:64px;gap:12px;}
  .logo img{height:36px;}
  .nav-actions .btn{padding:10px 14px;font-size:13px;}
}
@media (max-width:380px){
  .logo img{height:32px;}
  .nav-actions .btn.btn-ghost{display:none;}
}

.nav-menu{display:flex;gap:6px;align-items:center;}
.nav-menu > li{position:relative;list-style:none;}
.nav-menu > li > a{
  font-size:14px;font-weight:600;color:var(--cinza-700);
  padding:10px 14px;border-radius:6px;display:block;
  transition:all .15s;
}
.nav-menu > li > a:hover{color:var(--azul-700);background:var(--cinza-100);}
.nav-menu > li.has-sub > a::after{
  content:" ▾";font-size:9px;opacity:.6;margin-left:4px;
}

/* Submenu */
.nav-menu .submenu{
  position:absolute;top:100%;left:0;
  background:#fff;
  border-radius:10px;
  box-shadow:0 16px 40px rgba(15,23,41,.12),0 4px 12px rgba(15,23,41,.06);
  border:1px solid var(--cinza-200);
  min-width:240px;
  padding:8px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .2s;
  z-index:200;
}
.nav-menu > li:hover .submenu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-menu .submenu a{
  display:block;padding:10px 14px;border-radius:6px;
  font-size:14px;font-weight:500;color:var(--cinza-700);
  transition:all .12s;
}
.nav-menu .submenu a:hover{background:var(--azul-100);color:var(--azul-700);}
.nav-menu .submenu .group-title{
  font-size:11px;letter-spacing:1.5px;color:var(--cinza-500);
  font-weight:700;text-transform:uppercase;padding:8px 14px 4px;
}

.nav-cta{display:flex;gap:8px;align-items:center;flex-shrink:0;}

@media (max-width:1100px){
  .nav-menu{display:none;}
}

/* ============================================
   FOOTER
   ============================================ */
footer.site-footer{
  background:var(--cinza-900);color:#9bb5da;
  padding:72px 0 32px;
}
footer .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
footer h5{
  font-family:'Manrope',sans-serif;font-size:13px;font-weight:800;
  color:#fff;letter-spacing:1.5px;margin-bottom:18px;text-transform:uppercase;
}
footer ul{list-style:none;}
footer ul li{padding:6px 0;font-size:14px;}
footer ul li a:hover{color:var(--laranja);}
footer .logo-footer{margin-bottom:18px;}
footer .logo-footer img{height:50px;width:auto;display:block;}
footer .about{font-size:14px;line-height:1.6;margin-bottom:20px;}
footer .contacts{display:flex;flex-direction:column;gap:8px;font-size:14px;}
footer .contacts strong{color:#fff;}
footer .bottom{
  border-top:1px solid #1f2a44;padding-top:24px;
  display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:12px;
}
footer .bottom .anatel{color:#6b7a93;}
footer .socials{display:flex;gap:10px;margin-top:14px;}
footer .socials a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#cfdef8;transition:all .15s;
}
footer .socials a:hover{background:var(--laranja);color:#fff;}

@media (max-width:900px){
  footer .grid{grid-template-columns:1fr 1fr;}
}

/* ============================================
   ELEMENTOS DE PÁGINA
   ============================================ */

/* Page header (banner do topo das páginas internas) */
.page-header{
  background:linear-gradient(135deg, var(--azul-900) 0%, var(--azul-700) 100%);
  color:#fff;padding:64px 0;position:relative;overflow:hidden;
}
.page-header::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:60px 60px;pointer-events:none;
}
.page-header .wrap{position:relative;}
.page-header .breadcrumb{
  font-size:13px;color:#9bb5da;margin-bottom:16px;
}
.page-header .breadcrumb a{color:#cfdef8;font-weight:600;}
.page-header .breadcrumb a:hover{color:var(--laranja);}
.page-header h1{
  font-family:'Manrope',sans-serif;font-size:52px;font-weight:800;
  letter-spacing:-1.5px;line-height:1.05;margin-bottom:16px;
}
.page-header .lead{
  font-size:18px;color:#cfdef8;max-width:680px;line-height:1.55;
}

/* Section head reutilizável */
.section-head{text-align:center;max-width:720px;margin:0 auto 56px;}
.section-head .eyebrow{
  color:var(--laranja);font-size:13px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;
}
.section-head h2{
  font-family:'Manrope',sans-serif;font-size:42px;font-weight:800;
  color:var(--azul-900);letter-spacing:-1.5px;line-height:1.1;
}
.section-head p{margin-top:16px;color:var(--cinza-700);font-size:17px;}

/* CTA final reutilizável */
.cta-final{padding:96px 0;background:#fff;text-align:center;}
.cta-final .box{
  background:linear-gradient(135deg, var(--laranja) 0%, var(--laranja-dark) 100%);
  border-radius:24px;padding:64px 40px;color:#fff;position:relative;overflow:hidden;
}
.cta-final .box::before{
  content:"";position:absolute;top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.cta-final h2{
  font-family:'Manrope',sans-serif;font-size:42px;font-weight:800;
  letter-spacing:-1.5px;margin-bottom:14px;position:relative;
}
.cta-final p{font-size:18px;opacity:.95;margin-bottom:32px;position:relative;}
.cta-final .cta-actions{display:flex;gap:14px;justify-content:center;position:relative;flex-wrap:wrap;}
.cta-final .cta-actions .btn{padding:16px 32px;font-size:16px;}
.cta-final .btn-phone{background:var(--azul-900);color:#fff;}

/* Plano genérico (usado em planos residencial, hospedagem, vps, etc) */
.planos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.plano{
  background:#fff;border:2px solid var(--cinza-200);border-radius:18px;
  padding:32px 24px;display:flex;flex-direction:column;
  transition:all .2s;position:relative;
}
.plano:hover{border-color:var(--azul-500);transform:translateY(-4px);box-shadow:0 16px 40px rgba(32,92,168,.1);}
.plano.featured{
  border-color:var(--laranja);
  background:linear-gradient(180deg, #fff 0%, var(--laranja-100) 100%);
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(245,134,51,.18);
}
.plano.featured::before{
  content:"MAIS VENDIDO";
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--laranja);color:#fff;font-size:11px;font-weight:800;
  padding:6px 14px;border-radius:20px;letter-spacing:1.5px;
}
.plano .nome{
  font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;
  color:var(--azul-900);letter-spacing:-.5px;margin-bottom:4px;
}
.plano .desc{font-size:13px;color:var(--cinza-500);font-weight:500;margin-bottom:20px;}
.plano .vel{
  font-family:'Manrope',sans-serif;font-size:48px;font-weight:800;
  color:var(--azul-900);line-height:1;letter-spacing:-2px;
}
.plano .vel .un{font-size:18px;color:var(--cinza-500);margin-left:4px;}
.plano ul.features{list-style:none;margin:20px 0 24px;flex:1;}
.plano ul.features li{
  padding:9px 0;font-size:14px;color:var(--cinza-700);font-weight:500;
  display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid var(--cinza-100);
}
.plano ul.features li:last-child{border:none;}
.plano ul.features li .ck{color:var(--verde-dark);font-weight:800;flex-shrink:0;line-height:1.5;}
.plano .price{
  background:var(--cinza-100);border-radius:12px;padding:16px;margin-bottom:18px;text-align:center;
}
.plano.featured .price{background:#fff;}
.plano .price .from{font-size:11px;color:var(--cinza-500);font-weight:600;letter-spacing:1px;}
.plano .price .row{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-top:4px;}
.plano .price .rs{font-size:16px;font-weight:700;color:var(--azul-900);}
.plano .price .v{font-family:'Manrope',sans-serif;font-size:42px;font-weight:800;color:var(--azul-900);line-height:1;}
.plano.featured .price .v{color:var(--laranja);}
.plano .price .c{font-size:18px;font-weight:700;color:var(--azul-900);align-self:flex-start;margin-top:4px;}
.plano.featured .price .c{color:var(--laranja);}
.plano .price .mes{font-size:13px;color:var(--cinza-500);align-self:flex-end;margin-bottom:4px;}
.plano .price-note{font-size:11px;color:var(--cinza-500);margin-top:6px;line-height:1.4;}
.plano .btn-plano{
  width:100%;justify-content:center;padding:13px;font-size:14px;
  background:var(--azul-700);color:#fff;border-radius:8px;font-weight:700;
  border:none;cursor:pointer;transition:all .15s;
}
.plano.featured .btn-plano{background:var(--laranja);}
.plano .btn-plano:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(32,92,168,.3);}
.plano.featured .btn-plano:hover{box-shadow:0 6px 16px rgba(245,134,51,.35);}

@media (max-width:1000px){.planos-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.planos-grid{grid-template-columns:1fr;}}
.planos-3{grid-template-columns:repeat(3,minmax(0,320px));justify-content:center;max-width:1040px;margin:0 auto;}
@media (max-width:1000px){.planos-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.planos-3{grid-template-columns:1fr;}}

/* Features grid genérica */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.feature{
  background:#fff;border-radius:16px;padding:32px;
  border:1px solid var(--cinza-200);
}
.feature .icon{
  width:52px;height:52px;border-radius:12px;
  background:var(--azul-100);color:var(--azul-700);
  display:flex;align-items:center;justify-content:center;font-size:24px;
  margin-bottom:18px;
}
.feature h4{
  font-family:'Manrope',sans-serif;font-size:19px;font-weight:800;
  color:var(--azul-900);margin-bottom:8px;letter-spacing:-.3px;
}
.feature p{color:var(--cinza-700);font-size:14.5px;line-height:1.55;}
@media (max-width:1000px){.features-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.features-grid{grid-template-columns:1fr;}}

/* Container content de página interna */
.page-content{padding:80px 0;}
.page-content h2{
  font-family:'Manrope',sans-serif;font-size:34px;font-weight:800;
  color:var(--azul-900);letter-spacing:-1px;margin-bottom:20px;
}
.page-content h3{
  font-family:'Manrope',sans-serif;font-size:22px;font-weight:700;
  color:var(--azul-900);margin:32px 0 12px;
}
.page-content p{font-size:16.5px;color:var(--cinza-700);line-height:1.65;margin-bottom:16px;}
.page-content ul{margin:0 0 20px 0;padding-left:0;list-style:none;}
.page-content ul li{
  padding:10px 0 10px 28px;font-size:16px;color:var(--cinza-700);
  position:relative;border-bottom:1px solid var(--cinza-100);
}
.page-content ul li::before{
  content:"✓";color:var(--verde-dark);font-weight:800;
  position:absolute;left:0;top:10px;
}

/* Duas colunas pra páginas internas */
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:start;}
.two-col .aside{
  background:var(--cinza-100);border-radius:16px;padding:28px;
  position:sticky;top:100px;
}
.two-col .aside h4{
  font-family:'Manrope',sans-serif;font-size:20px;font-weight:800;
  color:var(--azul-900);margin-bottom:16px;
}
.two-col .aside .btn{width:100%;justify-content:center;margin-top:10px;}
.two-col .aside p{font-size:14px;color:var(--cinza-700);margin-bottom:10px;}
@media (max-width:900px){.two-col{grid-template-columns:1fr;} .two-col .aside{position:static;}}

/* ============================================
   FORMULÁRIO DE LEAD
   ============================================ */
.lead-form{
  display:flex;flex-direction:column;gap:14px;
  background:#fff;border-radius:14px;padding:28px;
  border:1px solid var(--cinza-200);
}
.lead-form h3{
  font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;
  color:var(--azul-900);margin-bottom:4px;letter-spacing:-.5px;
}
.lead-form p.intro{color:var(--cinza-700);font-size:14px;margin-bottom:8px;}
.lead-form label{
  display:flex;flex-direction:column;gap:6px;
  font-size:13px;font-weight:600;color:var(--cinza-700);
}
.lead-form input, .lead-form select, .lead-form textarea{
  padding:12px 14px;border:1px solid var(--cinza-200);border-radius:8px;
  font-size:15px;font-family:inherit;
  background:#fff;color:var(--cinza-900);
  transition:border-color .15s;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{
  outline:none;border-color:var(--azul-500);
  box-shadow:0 0 0 3px rgba(32,92,168,.1);
}
.lead-form textarea{resize:vertical;min-height:80px;}
/* Honeypot — escondido pro humano, mas no DOM pro bot */
.lead-form .hp{position:absolute;left:-9999px;visibility:hidden;}
.lead-form button[type=submit]{
  background:var(--laranja);color:#fff;
  padding:14px;border:none;border-radius:8px;
  font-size:15px;font-weight:700;cursor:pointer;
  transition:all .15s;margin-top:6px;
}
.lead-form button[type=submit]:hover:not(:disabled){
  background:var(--laranja-dark);transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(245,134,51,.35);
}
.lead-form button[type=submit]:disabled{opacity:.6;cursor:wait;}

.lead-status{
  padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600;
  margin-top:6px;display:none;
}
.lead-status:not(:empty){display:block;}
.lead-status.sucesso{background:rgba(145,199,75,.15);color:var(--verde-dark);}
.lead-status.erro{background:#ffe4e4;color:#c1121f;}

.lead-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:600px){.lead-form .row2{grid-template-columns:1fr;}}


/* ============================================
   MODAL DE LEAD
   ============================================ */
.lead-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(10,52,112,.7);
  backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;
  padding:20px;
  animation:modalFadeIn .25s ease;
}
.lead-modal.open{display:flex;}
@keyframes modalFadeIn{from{opacity:0;}to{opacity:1;}}
.lead-modal-content{
  background:#fff;border-radius:18px;
  max-width:560px;width:100%;max-height:92vh;overflow-y:auto;
  position:relative;
  box-shadow:0 24px 60px rgba(10,52,112,.4);
  animation:modalSlideIn .3s ease;
}
@keyframes modalSlideIn{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.lead-modal-close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;border-radius:50%;
  background:var(--cinza-100);color:var(--cinza-700);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;
  transition:all .15s;z-index:2;
}
.lead-modal-close:hover{background:var(--cinza-200);transform:rotate(90deg);}
.lead-modal .lead-form{
  border:none;border-radius:18px;padding:36px 32px 28px;
  box-shadow:none;
}
@media (max-width:600px){
  .lead-modal{padding:0;align-items:flex-end;}
  .lead-modal-content{max-height:96vh;border-radius:18px 18px 0 0;}
}
body.modal-open{overflow:hidden;}