/* =========================================================
   HUB — MAIN PAGE
   Estilos exclusivos da landing institucional
   MAIN STYLE CSS
   hub/static/css/pages/main.css
========================================================= */

/* Light theme: reforcar contraste do header na landing */
body[data-theme="light"] header{
  background:#0b0f14;
  border-bottom:1px solid rgba(15,23,42,.6);
}

body[data-theme="light"] header .navlink{
  color:#f8fafc;
}

body[data-theme="light"] header .navlink:hover{
  color:#ffffff;
}

body[data-theme="light"] header .btn{
  border-color:rgba(148,163,184,.45);
  background:rgba(255,255,255,.08);
  color:#f8fafc;
}

body[data-theme="light"] header .btn-primary{
  color:#0b0f14;
}

body[data-theme="light"] header .theme-toggle{
  color:#e2e8f0;
}

/* ===== MODAIS (MAIN) ===== */
.pricing-list{
  list-style:none;
  padding-left:0;
  margin-top:12px;
}

.pricing-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:6px 0;
}

.pricing-label{
  color:var(--text);
  font-weight:700;
}

.pricing-desc{
  color:var(--muted);
}

.pricing-price{
  margin-left:auto;
  color:var(--text);
}

.combo-teaser{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(27,36,50,.35);
  border-radius:14px;
  background:var(--surface-1);
  color:var(--text);
}

.combo-note{
  color:var(--muted);
}

body[data-theme="light"] .combo-teaser{
  border-color:rgba(148,163,184,.6);
  background:#f3f6fb;
}

body[data-theme="light"] .pricing-desc,
body[data-theme="light"] .combo-note{
  color:#475569;
}

body[data-theme="light"] .pricing-label,
body[data-theme="light"] .pricing-price{
  color:#0f172a;
}

/* ================= HERO ================= */
.hero{
  padding:96px 0 72px;
  text-align:center;
}

.hero h1{
  font-size:clamp(34px,5vw,52px);
  line-height:1.1;
  margin-bottom:20px;
  letter-spacing:-.6px;
}

.hero h1 span{
  display:block;
  font-weight:800;
}

.hero p{
  max-width:760px;
  margin:0 auto 28px;
  color:var(--muted);
  font-size:17px;
}

.hero .cta{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ================= CONTATO ================= */
#contato .grid{
  grid-template-columns: 2fr 1fr; /* formulário maior, atalhos intactos */
  gap: 18px;
}

/* Responsivo: empilha normalmente */
@media (max-width: 980px){
  #contato .grid{
    grid-template-columns: 1fr;
  }
}

/* ================= FORM CONTATO ================= */
.contact-form .form-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1); /* <<< transparência correta */
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.contact-form .form-input::placeholder{
  color: var(--muted); /* muted real */
}

.contact-form .form-input:focus{
  border-color: rgba(47,128,255,.6);
  background: var(--surface-2);
}

/* textarea específica */
.contact-form .form-textarea{
  resize: vertical;
  min-height: 110px;
}

.form-label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:600;
  color: var(--muted);
}