/* ===========================
   WEB Soluções — Design System
   =========================== */

/* Cores extraídas do logo (tons de azul) */
:root{
  --brand-700:#0060D9;   /* azul escuro */
  --brand-600:#0A74FF;   /* primária */
  --brand-500:#1BA5FF;   /* claro */
  --brand-400:#4ECBFF;   /* destaque */
  --ink-900:#0B1B2B;     /* texto forte */
  --ink-700:#233548;     /* texto médio */
  --ink-500:#6E7D8F;     /* texto suave */
  --bg-0:#ffffff;        /* base */
  --bg-50:#F6F9FF;       /* superfícies */
  --accent:#00D1B2;      /* ações secundárias */
  --danger:#E5484D;
  --radius:16px;
  --shadow:0 10px 30px rgba(11,27,43,.12);
}

/* Tipografia */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src: local("Inter"), local("Inter Regular");
}
html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ink-900);
  background:linear-gradient(180deg,var(--bg-50),#E9F4FF 40%,#F7FBFF 100%);
  line-height:1.55;
}

/* Links e botões */
a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-700)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.85rem 1.1rem;border-radius:calc(var(--radius) - 6px);
  font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:.2s transform ease,.2s box-shadow ease,.2s background-color ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
  color:#fff;box-shadow:var(--shadow);
}
.btn-primary:hover{filter:saturate(110%) brightness(1.02)}
.btn-ghost{
  background:#fff;border-color:#DCE7F5;color:var(--ink-700)
}
.btn-ghost:hover{border-color:var(--brand-400);color:var(--brand-700)}

/* Container e utilidades */
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:72px 0}
.grid{display:grid;gap:24px}
.hidden{display:none}
.badge{
  display:inline-block;padding:.35rem .6rem;
  border-radius:999px;background:rgba(27,165,255,.12);color:var(--brand-700);
  font-weight:600;font-size:.8rem
}

/* Header e Navegação */
.header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);
  backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid #E6EFFA;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:.75rem}
.logo img{height:36px;width:auto;display:block}
.brand{
  font-weight:800;letter-spacing:.2px;color:var(--ink-900)
}
.nav-links{display:flex;gap:1.25rem}
.nav-links a{
  padding:.5rem .75rem;border-radius:10px;color:var(--ink-700);font-weight:600
}
.nav-links a.active,.nav-links a:hover{color:var(--brand-700);background:#EEF6FF}

/* Hero */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 480px at 80% -10%, rgba(27,165,255,.25), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(10,116,255,.18), transparent 60%);
}
.hero .container{
  display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;min-height:520px
}
.hero-title{
  font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;margin:0 0 .75rem
}
.hero-sub{color:var(--ink-700);font-size:1.05rem;margin:0 0 1.25rem}
.hero-card{
  background:#fff;border:1px solid #E6EFFA;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px
}

/* Seção Planos */
.plans{background:#fff}
.plan-grid{grid-template-columns:repeat(3,1fr)}
.plan{
  background:linear-gradient(180deg,#ffffff, #F9FBFF);
  border:1px solid #E6EFFA;border-radius:var(--radius);padding:26px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);transition:.2s transform ease,.2s box-shadow ease
}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan .title{font-weight:800;margin:0 0 .35rem}
.plan .desc{color:var(--ink-700);font-size:.95rem;margin:0 0 .85rem}
.price{
  display:flex;align-items:flex-end;gap:.25rem;margin:.5rem 0 1rem
}
.price .value{font-size:2rem;font-weight:900;color:var(--brand-700)}
.price .cycle{color:var(--ink-500);font-weight:600}
.features{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.features li{display:flex;align-items:center;gap:.5rem;color:var(--ink-700)}
.features li::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-400))
}

/* Tabelas opcional para comparação */
.table{
  width:100%;border-collapse:separate;border-spacing:0 10px
}
.table th,.table td{padding:12px 14px;text-align:left}
.table thead th{font-size:.9rem;color:var(--ink-700)}
.table tbody tr{background:#fff;border:1px solid #E6EFFA}
.table tbody tr td:first-child{border-radius:12px 0 0 12px}
.table tbody tr td:last-child{border-radius:0 12px 12px 0}

/* Contato */
.contact{
  background:linear-gradient(180deg,#F6FAFF,#FFFFFF 60%)
}
.form{
  background:#fff;border:1px solid #E6EFFA;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px;display:grid;gap:14px
}
.input, .select, .textarea{
  width:100%;padding:12px 14px;border:1px solid #D9E6F7;border-radius:12px;
  background:#fff;color:var(--ink-900);font:inherit;outline:none;transition:border-color .2s ease, box-shadow .2s ease
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--brand-500);box-shadow:0 0 0 4px rgba(27,165,255,.15)
}
.textarea{min-height:140px;resize:vertical}

/* Footer */
.footer{
  padding:36px 0;background:#0C1F3A;color:#C7D3E6
}
.footer a{color:#D7E7FF}
.footer .logo img{filter:brightness(1.15)}
.footer .bottom{
  margin-top:16px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;
  font-size:.9rem;color:#AFC0D7
}

/* Componentes auxiliares */
.card{
  background:#fff;border:1px solid #E6EFFA;border-radius:var(--radius);
  box-shadow:0 1px 4px rgba(0,0,0,.04);padding:20px
}
.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono",monospace;
  background:#F1F5FB;border:1px solid #D9E6F7;border-bottom-width:3px;border-radius:8px;padding:.15rem .4rem
}

/* Navegação móvel */
.burger{display:none;cursor:pointer;width:40px;height:40px;border-radius:12px;
  border:1px solid #E6EFFA;align-items:center;justify-content:center;background:#fff}
.burger span, .burger span:before, .burger span:after{
  content:"";display:block;height:2px;background:var(--ink-900);width:18px;position:relative;border-radius:2px
}
.burger span:before{top:-6px;position:relative}
.burger span:after{top:6px;position:relative}

/* Responsividade */
@media (max-width: 1024px){
  .hero .container{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .plan-grid{grid-template-columns:1fr}
  .section{padding:56px 0}
}

/* Estados e mensagens */
.alert{
  border-radius:12px;padding:12px 14px;font-weight:600
}
.alert.info{background:#E8F4FF;color:var(--brand-700)}
.alert.success{background:#E8FFF7;color:#0E8A6A}
.alert.warn{background:#FFF8E6;color:#9A6C00}
.alert.danger{background:#FFEEF0;color:var(--danger)}

/* --- Hotfix: layout e mobile --- */

/* Compensar header fixo */
body { padding-top: 72px; }

/* Fallback de fonte caso @font-face falhe */
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Nav: mostrar links se não houver JS para o burger */
@media (max-width: 720px){
  .nav-links { display: flex !important; flex-wrap: wrap; gap: .5rem; }
  .burger { display: none !important; }
}

/* Hero: garantir coluna única em telas médias também */
@media (max-width: 960px){
  .hero .container { grid-template-columns: 1fr !important; }
}

/* Cartões do destaque rápido no hero */
.hero .card { padding: 16px; }

/* Títulos e subtítulos com margens consistentes */
.hero-title { margin: 0 0 .6rem; }
.hero-sub   { margin: 0 0 1rem; }

/* Botões em wrap no mobile */
@media (max-width: 520px){
  .btn { width: 100%; justify-content: center; }
}

/* Grids padrão com fallback */
.grid { display: grid; gap: 20px; }
@media (max-width: 1024px){ .plan-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 720px){  .plan-grid, .grid { grid-template-columns: 1fr !important; } }

/* Imagens responsivas por segurança */
img { max-width: 100%; height: auto; }

/* Melhor contraste em links no fundo claro */
a { color: var(--brand-700); }
a:hover { color: var(--brand-600); }

/* Footer: evitar colapso de cor em monitores com gama baixa */
.footer { background: #0C1F3A; color: #C7D3E6; }