/* =========================================================
   Vitahost — Landing pages de produto (CSS aditivo ao DS v2)
   Não altera regras existentes; apenas acrescenta blocos.
   ========================================================= */

/* ---------- Hero de landing (menor que o 100vh da home) ---------- */
.hero.landing{height:72vh;min-height:580px}
.hero.landing h1{font-size:clamp(36px,4.6vw,66px)}
.hero.landing .perks{margin-top:30px}
.hero.landing .ov{background:linear-gradient(90deg,rgba(6,13,20,.92) 0%,rgba(6,13,20,.60) 46%,rgba(6,13,20,.22) 100%)}

/* hero estático (sem carrossel): mesma anatomia visual do slide da home */
.hero.landing .bg{position:absolute;inset:0;background-size:cover;background-position:center 34%;filter:saturate(.9)}
.hero.landing .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,13,20,.86) 0%,rgba(6,13,20,.52) 46%,rgba(6,13,20,.18) 100%)}
.hero.landing .inner{position:absolute;inset:0;display:flex;align-items:center;z-index:3}
.hero.landing .inner>.wrap{position:relative;z-index:1}

/* ---------- Tabela editorial de capacidade/planos ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec-table{width:100%;border-collapse:collapse;margin-top:8px;min-width:640px}
.spec-table th{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;padding:14px 16px;border-bottom:1px solid var(--hair-strong)}
.spec-table td{padding:18px 16px;border-bottom:1px solid var(--hair);font-size:15px;color:var(--ink-soft);vertical-align:top}
.spec-table td.k{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink)}
.spec-table tr:hover td{background:rgba(11,134,181,.04)}
.spec-note{font-size:13px;color:var(--faint);margin-top:16px}

/* ---------- Passos (como funciona) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:8px}
.steps .step{border-top:1px solid var(--hair);padding-top:22px}
.steps .step .n{font-family:var(--serif);font-style:italic;font-size:34px;color:var(--accent);line-height:1}
.steps .step h4{font-family:var(--serif);font-weight:400;font-size:20px;margin:14px 0 8px}
.steps .step p{font-size:14.5px;color:var(--muted);line-height:1.7}

/* ---------- Lista de casos de uso (editorial) ---------- */
.use-list{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:8px}
.use-list .use{border-top:1px solid var(--hair);padding:22px 0 26px}
.use-list .use h4{font-family:var(--serif);font-weight:400;font-size:19px;margin-bottom:6px}
.use-list .use p{font-size:14.5px;color:var(--muted);line-height:1.7}

/* ---------- Links de título no accordion da home (novos anchors) ---------- */
.index-head h3 a{color:inherit;transition:color .2s}
.index-head h3 a:hover{color:var(--accent)}
.index-head h3 a::after{content:"\2197";font-size:.55em;color:var(--accent);vertical-align:super;margin-left:8px;font-style:normal}

/* ---------- Segurança: se JS nao carregar, reveals ficam visíveis ---------- */
html:not(.js) .reveal{opacity:1;transform:none}

/* ---------- Reveal garantido nas landings: animação CSS, sem dependência de JS/IO ---------- */
@keyframes vhRevealIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes vhHeroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
body.landing .reveal{animation:vhRevealIn .8s ease both}
body.landing .hero .anim{opacity:0;transform:translateY(22px);animation:vhHeroIn 1s ease .1s both}
body.landing .hero .anim.d1{animation-delay:.15s}
body.landing .hero .anim.d2{animation-delay:.3s}

/* ---------- Grade de features (hairlines, sem cards) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:10px}
.feat-grid .feat{border-top:1px solid var(--hair);padding:24px 0 30px}
.feat-grid .feat h4{font-family:var(--serif);font-weight:400;font-size:20px;margin-bottom:8px}
.feat-grid .feat p{font-size:14.5px;color:var(--muted);line-height:1.7}

/* ---------- Cross-links entre soluções ---------- */
.cross-grid a:hover h4, .cross-grid a.current h4{color:var(--accent)}
.cross-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.cross-grid a{background:var(--paper);padding:30px 26px 34px;display:block;transition:background .2s}
.cross-grid a:hover{background:var(--stone)}
.cross-grid a.current{background:var(--stone)}
.cross-grid .no{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--accent)}
.cross-grid h4{font-family:var(--serif);font-weight:400;font-size:19px;margin:10px 0 6px;color:var(--ink)}
.cross-grid .d{font-size:13.5px;color:var(--muted);line-height:1.55;display:block;margin-top:6px}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .feat-grid{grid-template-columns:1fr 1fr;gap:0 30px}
  .cross-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .feat-grid{grid-template-columns:1fr}
  .cross-grid{grid-template-columns:1fr}
  .hero.landing{height:64vh;min-height:520px}
}