/* ============================================================
   OXHOST — folha de estilo (azul + branco, visual de hospedagem)
   ============================================================ */
:root {
  --azul: #2563eb;
  --azul2: #3b82f6;
  --lilas: #8b5cf6;
  --grad: linear-gradient(90deg, #2563eb, #8b5cf6);
  --navy: #0b1f3a;
  --navy2: #102a4c;
  --bg: #f4f7fb;
  --paper: #ffffff;
  --ink: #141a24;
  --mut: #5c6675;
  --line: #e3e9f2;
  --verde: #16a34a;
  --vermelho: #dc2626;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: "Inter", Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Sora", Arial, sans-serif; line-height: 1.15; letter-spacing: -0.02em; }
img { display: block; max-width: 100%; }
a { color: var(--azul); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* topo */
.topo { background: var(--navy); color: #fff; padding: 14px 0; position: sticky; top: 0; z-index: 50; box-shadow: 0 4px 20px rgba(11,31,58,.25); }
.topo .wrap { display: flex; align-items: center; gap: 26px; }
.logo { display: flex; align-items: center; gap: 9px; font-family: "Sora"; font-weight: 800; font-size: 1.2rem; color: #fff; text-decoration: none; }
.logo img { height: 34px; }
.logo span { color: var(--lilas); }
.menu { display: flex; gap: 20px; margin-left: 10px; }
.menu a { color: #c6d2e4; text-decoration: none; font-size: 0.92rem; }
.menu a:hover, .menu a.on { color: #fff; }
.topo .acoes { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.topo .acoes a { color: #c6d2e4; text-decoration: none; font-size: 0.9rem; }
.btn-topo { background: var(--azul); color: #fff !important; border-radius: 999px; padding: 9px 20px; font-weight: 700; }

/* tabela comparativa */
.tabela-comp { overflow-x: auto; }
.comp { min-width: 760px; }
.comp th, .comp td { text-align: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.comp th { font-size: 1rem; font-family: "Sora"; color: var(--ink); }
.comp th.feats-col, .comp td:first-child { text-align: left; color: var(--mut); font-size: 0.86rem; }
.comp td:first-child { font-weight: 600; color: var(--ink); }
.comp td.si { color: var(--verde); font-weight: 800; font-size: 1rem; }
.comp .linha-preco td { background: #f8fafd; font-size: 1.05rem; }
.comp .linha-btn td { border-bottom: 0; }

/* FAQ */
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 12px; }
.faq-item h3 { font-size: 1rem; margin-bottom: 6px; color: var(--navy); }
.faq-item p { font-size: 0.9rem; color: var(--mut); }

/* cartão de domínio sobreposto + ilustração flutuante */
.faixa-dominio { position: relative; z-index: 5; margin-top: -58px; }
.card-dominio { background: #fff; border-radius: 20px; padding: 30px 34px 24px; box-shadow: 0 24px 60px rgba(11,31,58,.16); text-align: center; }
.card-dominio .busca { max-width: 620px; margin: 0 auto 6px; display: flex; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px; box-shadow: 0 8px 22px rgba(11,31,58,.08); }
.card-dominio .busca input { flex: 1; border: 0; outline: none; font-size: 1rem; padding: 10px 18px; border-radius: 999px; color: var(--ink); font-family: inherit; min-width: 0; }
.card-dominio .busca button { border: 0; background: var(--azul); color: #fff; border-radius: 999px; padding: 12px 26px; font-weight: 700; font-size: 0.92rem; cursor: pointer; font-family: inherit; }
.card-dominio .busca button:hover { filter: brightness(1.1); }
.tlds { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 18px; }
.tlds span { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--mut); font-weight: 600; }
.tlds img { height: 15px; }
.flutua { animation: flutuaOx 6s ease-in-out infinite; filter: drop-shadow(0 24px 40px rgba(24,104,221,.28)); }
@keyframes flutuaOx { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .duplo { grid-template-columns: 1fr; } }

/* páginas internas */
.page-hero { background: linear-gradient(140deg, var(--navy) 35%, var(--navy2)); color: #fff; padding: 74px 0 64px; text-align: center; position: relative; overflow: hidden; }
.page-hero::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: 36px 36px; }
.page-hero .wrap { position: relative; }
.page-hero .badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #9ec5ff; border: 1px solid rgba(158,197,255,.45); border-radius: 999px; padding: 6px 16px; margin-bottom: 20px; }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; margin: 0 auto 14px; max-width: 44rem; }
.page-hero h1 em { font-style: normal; color: #7ec2ff; }
.page-hero p { color: #b9c8de; max-width: 42rem; margin: 0 auto; font-size: 1.02rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }

/* hero */
.hero { background: linear-gradient(140deg, var(--navy) 30%, var(--navy2)); color: #fff; padding: 84px 0 90px; position: relative; overflow: hidden; }
.hero::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: 36px 36px; }
.hero .wrap { position: relative; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 34px; align-items: center; text-align: left; }
.hero-copy .badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #9ec5ff; border: 1px solid rgba(158,197,255,.45); border-radius: 999px; padding: 6px 16px; margin-bottom: 20px; }
.hero-copy h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; margin: 0 0 14px; }
.hero-copy h1 em { font-style: normal; color: #7ec2ff; }
.hero-copy p.sub { color: #b9c8de; margin: 0 0 30px; font-size: 1.06rem; }
.hero-arte { display: grid; place-items: center; }

/* ilustração animada do servidor */
.ilustra-host { width: 100%; max-width: 440px; animation: flutua 6s ease-in-out infinite; filter: drop-shadow(0 34px 46px rgba(24,104,221,.5)); }
@keyframes flutua {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-18px) rotate(1.2deg); }
}

/* busca de domínio */
.busca { max-width: 660px; margin: 0 auto; display: flex; gap: 10px; background: #fff; border-radius: 999px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.busca input { flex: 1; border: 0; outline: none; font-size: 1rem; padding: 10px 18px; border-radius: 999px; color: var(--ink); font-family: inherit; }
.busca button { border: 0; background: var(--azul); color: #fff; border-radius: 999px; padding: 12px 26px; font-weight: 700; font-size: 0.92rem; cursor: pointer; font-family: inherit; }
.busca button:hover { filter: brightness(1.12); }
#resultadoBusca { max-width: 660px; margin: 16px auto 0; text-align: left; }
.resultado { background: #fff; color: var(--ink); border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.resultado .bol { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: 0 0 34px; }
.resultado.livre .bol { background: #dcfce7; color: var(--verde); }
.resultado.ocupa .bol { background: #fee2e2; color: var(--vermelho); }
.resultado b { display: block; font-size: 0.95rem; }
.resultado small { color: var(--mut); }
.resultado .acao { margin-left: auto; }
.avs { margin-top: 18px; display: flex; justify-content: flex-start; gap: 26px; flex-wrap: wrap; color: #9ec5ff; font-size: 0.85rem; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .hero-copy p.sub { margin-inline: auto; }
  .avs { justify-content: center; }
  .ilustra-host { max-width: 280px; margin: 10px auto 0; }
}

/* seções */
.section { padding: 74px 0; }
.section.alt { background: #fff; border-block: 1px solid var(--line); }
.sec-head { text-align: center; max-width: 44rem; margin: 0 auto 44px; }
.sec-head .tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--azul); background: rgba(24,104,221,.09); border-radius: 999px; padding: 6px 16px; margin-bottom: 16px; }
.sec-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 12px; }
.sec-head p { color: var(--mut); }

/* cards de tipos */
.tipos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tipo { color: inherit; text-decoration: none; display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px 18px; text-align: center; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.tipo:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16,42,76,.12); }
.tipo .ic { font-size: 1.7rem; margin-bottom: 10px; }
.tipo h3 { font-size: 0.98rem; margin-bottom: 6px; }
.tipo p { font-size: 0.8rem; color: var(--mut); }

/* planos */
.planos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plano { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; position: relative; }
.plano.destaque { border: 2px solid var(--azul); box-shadow: 0 24px 50px rgba(24,104,221,.16); }
.plano .chave { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--azul); color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.plano h3 { font-size: 1.05rem; margin-bottom: 10px; }
.plano .preco { font-family: "Sora"; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.plano .preco small { font-size: 0.75rem; color: var(--mut); font-family: "Inter"; font-weight: 400; }
.plano ul { list-style: none; margin: 16px 0 20px; display: grid; gap: 8px; }
.plano li { font-size: 0.84rem; color: var(--mut); padding-left: 22px; position: relative; }
.plano li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 800; }
.plano .contratar { margin-top: auto; text-align: center; background: var(--azul); color: #fff; text-decoration: none; border-radius: 999px; padding: 11px; font-weight: 700; font-size: 0.88rem; }
.plano .contratar:hover { filter: brightness(1.1); }
.plano.destaque .contratar { background: var(--grad); }
.plano.sob { border-style: dashed; background: #fafbff; }
.plano.sob .contratar { background: transparent; color: var(--azul); border: 1.5px solid var(--line); }

/* diferenciais */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.feat .ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(24,104,221,.1); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 14px; }
.feat h3 { font-size: 1rem; margin-bottom: 6px; }
.feat p { font-size: 0.87rem; color: var(--mut); }

/* rodapé */
.rodape { background: var(--navy); color: #b9c8de; padding: 50px 0 30px; font-size: 0.88rem; }
.rodape .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.rodape h4 { color: #fff; font-size: 0.9rem; margin-bottom: 14px; }
.rodape a { color: #b9c8de; text-decoration: none; display: block; margin-bottom: 8px; }
.rodape a:hover { color: #fff; }
.copy { text-align: center; color: #7c8ba3; font-size: 0.76rem; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 26px; }

/* painéis (admin/conta) */
.painel { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.lado { background: var(--navy); padding: 22px 0; }
.lado .l-logo { padding: 0 20px 20px; color: #fff; font-family: "Sora"; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.lado a { display: block; padding: 11px 20px; color: #b9c8de; text-decoration: none; font-size: 0.9rem; }
.lado a.on, .lado a:hover { background: rgba(255,255,255,.07); color: #fff; border-right: 3px solid var(--azul); }
.conteudo { padding: 30px 34px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.stat b { font-family: "Sora"; font-size: 1.6rem; display: block; }
.stat span { color: var(--mut); font-size: 0.8rem; }
table.tb { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.tb th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mut); padding: 11px 14px; background: #f8fafd; border-bottom: 1px solid var(--line); }
.tb td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.st { border-radius: 999px; padding: 3px 12px; font-size: 0.7rem; font-weight: 700; }
.st.ativa, .st.paga { background: #dcfce7; color: var(--verde); }
.st.pendente { background: #fef3c7; color: #b45309; }
.st.cancelada, .st.vencida { background: #fee2e2; color: var(--vermelho); }

/* formulários */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--mut); margin-bottom: 5px; }
.campo input, .campo select, .campo textarea { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-size: 0.92rem; font-family: inherit; outline: none; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(24,104,221,.14); }
.btn { display: inline-block; background: var(--azul); color: #fff; border: 0; border-radius: 999px; padding: 12px 26px; font-weight: 700; font-size: 0.92rem; cursor: pointer; text-decoration: none; font-family: inherit; }
.btn:hover { filter: brightness(1.1); }
.btn.verde { background: var(--grad); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }

/* login centralizado */
.tela-login { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(140deg, var(--navy), var(--navy2)); padding: 24px; }
.card-login { background: #fff; border-radius: 22px; padding: 42px 40px; width: min(400px, 92vw); box-shadow: 0 30px 70px rgba(0,0,0,.4); text-align: center; }
.card-login .logo2 { font-family: "Sora"; font-weight: 800; font-size: 1.3rem; color: var(--navy); margin-bottom: 4px; }
.card-login .logo2 span { color: var(--azul); }
.card-login p.sub { color: var(--mut); font-size: 0.82rem; margin-bottom: 24px; }
.card-login .campo { text-align: left; }
.erro-msg { background: #fee2e2; color: var(--vermelho); border-radius: 10px; padding: 9px 14px; font-size: 0.82rem; margin-bottom: 14px; }

@media (max-width: 900px) {
  .tipos { grid-template-columns: repeat(2, 1fr); }
  .planos { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; }
  .rodape .wrap { grid-template-columns: 1fr; }
  .painel { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .menu { display: none; }
}
@media print { body { background: #fff; } }

/* ============ LANDING NOVA (estilo moderno centrado) ============ */
.h-body { background: #fff; }
.h-nav { background: #fff; border-bottom: 1px solid #eef0f4; position: sticky; top: 0; z-index: 60; padding: 14px 0; }
.h-nav .wrap { display: flex; align-items: center; gap: 26px; }
.h-logo { font-family: Sora, Arial; font-weight: 800; font-size: 1.15rem; color: #171b26; text-decoration: none; letter-spacing: 0.02em; }
.h-logo span { color: var(--azul); }
.h-links { display: flex; gap: 22px; flex-wrap: wrap; }
.h-links a { color: #3c4257; text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.h-links a:hover { color: var(--azul); }
.h-nav-acoes { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.h-nav-acoes > a { color: #3c4257; text-decoration: none; font-size: 0.9rem; }
.h-nav-acoes > .cta { background: var(--azul); color: #fff; border-radius: 999px; padding: 9px 20px; font-weight: 700; }
.h-nav-acoes > .cta:hover { filter: brightness(1.12); }

.h-hero { background: linear-gradient(180deg, #e8f0fe 0%, #f0ecfd 55%, #ffffff 100%); padding: 64px 0 84px; text-align: center; position: relative; overflow: hidden; }
.h-hero::before { content: ""; position: absolute; left: -10%; top: -40%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 60%); pointer-events: none; }
.h-hero::after { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 60%); pointer-events: none; }
.h-marca { font-size: 2.2rem; margin-bottom: 10px; position: relative; }
.h-t1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; color: #171b26; margin: 0 auto 8px; letter-spacing: -0.03em; max-width: 52rem; position: relative; }
.h-t1 .grad { background: linear-gradient(90deg, #3b82f6, #8b5cf6, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-sub { color: #3c4257; font-size: 1.08rem; margin: 18px auto 34px; max-width: 40rem; position: relative; }
.h-busca { max-width: 680px; margin: 0 auto; display: flex; background: #fff; border: 1px solid #dbe4f5; border-radius: 999px; padding: 7px; box-shadow: 0 14px 40px rgba(37, 99, 235, 0.14); position: relative; }
.h-busca input { flex: 1; border: 0; outline: none; font-size: 1rem; padding: 10px 20px; border-radius: 999px; color: #171b26; font-family: inherit; background: transparent; min-width: 0; }
.h-busca button { border: 0; background: var(--azul); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.15rem; cursor: pointer; display: grid; place-items: center; flex: 0 0 46px; }
.h-busca button:hover { background: var(--azul2); }
.h-cap { color: #6a6f80; font-size: 0.84rem; margin-top: 16px; position: relative; }
#resultadoBusca { max-width: 680px; margin: 14px auto 0; position: relative; }
.h-res { background: #fff; border: 1px solid #dbe4f5; border-radius: 18px; padding: 18px 24px; display: flex; gap: 14px; align-items: center; box-shadow: 0 12px 30px rgba(37, 99, 235, 0.1); text-align: left; }
.h-res .bol { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: 0 0 36px; }
.h-res.livre .bol { background: #dcfce7; color: #16a34a; }
.h-res.ocupa .bol { background: #fee2e2; color: #dc2626; }
.h-res b { display: block; font-size: 0.95rem; }
.h-res small { color: #6a6f80; }
.h-res .acao { margin-left: auto; }

.h-secao { padding: 76px 0; text-align: center; }
.h-secao.alt { background: #f5f8fd; }
.h-secao h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 700; color: #171b26; margin: 0 auto 14px; max-width: 44rem; letter-spacing: -0.03em; }
.h-secao .lead { color: #5c6070; font-size: 1.02rem; max-width: 40rem; margin: 0 auto 40px; }
.h-tabs { display: inline-flex; background: #fff; border: 1px solid #e2e9f5; border-radius: 999px; padding: 5px; box-shadow: 0 10px 26px rgba(23, 27, 38, 0.08); margin-bottom: 44px; flex-wrap: wrap; }
.h-tabs button { border: 0; background: transparent; border-radius: 999px; padding: 10px 22px; font-size: 0.9rem; font-weight: 700; color: #3c4257; cursor: pointer; font-family: inherit; }
.h-tabs button.on { background: #171b26; color: #fff; }
.h-tab-painel { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid #e2e9f5; border-radius: 20px; padding: 34px; min-height: 190px; box-shadow: 0 16px 40px rgba(23, 27, 38, 0.08); }
.h-tab-painel .ic { font-size: 2rem; margin-bottom: 10px; }
.h-tab-painel h3 { font-size: 1.25rem; margin-bottom: 8px; }
.h-tab-painel p { color: #5c6070; font-size: 0.95rem; }
.h-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.h-plano { background: #fff; border: 1px solid #e2e9f5; border-radius: 20px; padding: 30px 24px; text-align: center; position: relative; display: flex; flex-direction: column; }
.h-plano.top { border: 2px solid var(--azul); box-shadow: 0 24px 50px rgba(37, 99, 235, 0.16); }
.h-plano .chave { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.h-plano h3 { font-size: 1rem; margin-bottom: 8px; }
.h-plano .preco { font-family: Sora, Arial; font-size: 2.1rem; font-weight: 800; color: #171b26; }
.h-plano .preco small { font-size: 0.75rem; color: #8a8fa0; font-weight: 400; }
.h-plano ul { list-style: none; margin: 16px 0 22px; display: grid; gap: 8px; }
.h-plano li { font-size: 0.84rem; color: #5c6070; }
.h-plano .contratar { margin-top: auto; background: #fff; border: 1.5px solid #c3d0f0; color: var(--azul); border-radius: 999px; padding: 10px; text-decoration: none; font-weight: 700; font-size: 0.86rem; }
.h-plano.top .contratar, .h-plano .contratar:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.h-plano.sob { border-style: dashed; background: #fafbff; }
.h-plano.sob .contratar { background: #fff; color: var(--azul); border-color: var(--line); }
.h-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.h-duo .d-card { background: #fff; border: 1px solid #e6e3f2; border-radius: 20px; padding: 28px; text-align: left; }
.h-duo .d-card h3 { font-size: 1.15rem; margin: 10px 0 8px; }
.h-duo .d-card p { color: #5c6070; font-size: 0.9rem; }
.h-duo .d-card .ic { font-size: 1.6rem; }
.h-faq { max-width: 760px; margin: 0 auto; text-align: left; }
.h-faq details { background: #fff; border: 1px solid #e6e3f2; border-radius: 14px; padding: 16px 22px; margin-bottom: 10px; }
.h-faq summary { font-weight: 700; cursor: pointer; font-size: 0.95rem; }
.h-faq p { color: #5c6070; font-size: 0.9rem; margin-top: 10px; }
.h-rodape { background: #171b26; color: #b9c2d0; padding: 44px 0 26px; font-size: 0.85rem; }
.h-rodape .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 26px; }
.h-rodape a { color: #b9c2d0; text-decoration: none; display: block; margin-bottom: 7px; }
.h-rodape a:hover { color: #fff; }
.h-rodape h4 { color: #fff; font-size: 0.85rem; margin-bottom: 12px; }
@media (max-width: 860px) { .h-nav .h-links { display: none; } .h-rodape .wrap { grid-template-columns: 1fr; } }
@media print { body.h-body { background: #fff; } }


/* ============ BARRA DE DOMÍNIO + HERO ROXO (estilo grande empresa) ============ */
.h-dom-bar { background: #0d0d14; padding: 18px 0; border-bottom: 1px solid #26262e; }
.h-dom-inner { display: flex; align-items: center; gap: 22px; }
.h-dom-busca { flex: 1; display: flex; align-items: center; background: #1a1a22; border: 1px solid #33333d; border-radius: 999px; padding: 6px 8px 6px 20px; }
.h-dom-lupa { color: #8a8fa0; margin-right: 10px; }
.h-dom-busca input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-size: 0.95rem; font-family: inherit; min-width: 0; }
.h-dom-busca button { background: #fff; color: #0a0a0c; border: 0; border-radius: 999px; padding: 10px 24px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 0.92rem; }
.h-dom-busca button:hover { background: #e8e8ee; }
.h-dom-bonus { color: #b9c2d0; font-size: 0.78rem; max-width: 190px; line-height: 1.45; }
.h-dom-bonus b { color: #fff; }
#resultadoBusca { padding-top: 12px; }
#resultadoBusca .h-res { background: #14141c; border-color: #2a2a34; box-shadow: none; color: #fff; }
#resultadoBusca .h-res b { color: #fff; }
#resultadoBusca .h-res small { color: #9a9aa4; }
.h-hero2 { background: radial-gradient(ellipse at 50% 35%, #5b21b6 0%, #3b0f7a 45%, #14062e 100%); color: #fff; text-align: center; padding: 96px 0 130px; position: relative; overflow: hidden; }
.h-hero2::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.5; }
.h-marca2 { font-size: 2.4rem; margin-bottom: 14px; position: relative; }
.h-hero2 h1 { font-size: clamp(2.6rem, 6.5vw, 4.4rem); font-weight: 700; line-height: 1.06; position: relative; max-width: 52rem; margin: 0 auto; }
.grad2 { background: linear-gradient(90deg, #c4b5fd, #e9d5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-sub2 { color: #c7bfe8; font-size: 1.12rem; max-width: 42rem; margin: 20px auto 36px; position: relative; }
.h-btn-branco { background: #fff; color: #171b26; border-radius: 12px; padding: 17px 38px; font-weight: 700; font-size: 1.05rem; display: inline-block; text-decoration: none; position: relative; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.h-btn-branco:hover { transform: translateY(-3px); }
.h-garantia { margin-top: 20px; color: #c7bfe8; font-size: 0.82rem; position: relative; }
.h-cards { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 920px; margin: 74px auto 0; }
.h-card { background: #fff; color: #171b26; border-radius: 16px; overflow: hidden; text-align: left; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35); animation: flutuaCard 6s ease-in-out infinite; }
.h-card:nth-child(2) { animation-delay: 0.8s; }
.h-card:nth-child(3) { animation-delay: 1.6s; }
.h-card:nth-child(4) { animation-delay: 2.4s; }
@keyframes flutuaCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.h-card .hc-top { height: 96px; display: grid; place-items: center; font-size: 2.2rem; }
.h-card .hc1 { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.h-card .hc2 { background: linear-gradient(135deg, #bfdbfe, #3b82f6); }
.h-card .hc3 { background: linear-gradient(135deg, #c7d2fe, #6366f1); }
.h-card .hc4 { background: linear-gradient(135deg, #d1fae5, #34d399); }
.h-card .hc-in { padding: 14px 16px 16px; }
.h-card .hc-in b { font-size: 0.92rem; display: block; }
.h-card .hc-in span { color: #6a6f80; font-size: 0.74rem; }
@media (max-width: 860px) { .h-dom-inner { flex-direction: column; gap: 12px; } .h-dom-bonus { text-align: center; max-width: none; } .h-cards { grid-template-columns: repeat(2, 1fr); } .h-hero2 { padding: 70px 0 90px; } }

/* ============ BANNER EM DESTAQUE (efeitos especiais) ============ */
.banner-destaque { position: relative; overflow: hidden; background: linear-gradient(120deg, #2e1065 0%, #673de6 40%, #a855f7 75%, #d946ef 100%); background-size: 220% 220%; animation: bdGradiente 9s ease-in-out infinite; color: #fff; text-align: center; padding: 64px 24px 60px; box-shadow: 0 30px 80px rgba(103, 61, 230, 0.4); }
@keyframes bdGradiente { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.banner-destaque .bd-selo { display: inline-block; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 6px 18px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 18px; }
.banner-destaque h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 800; margin: 0 auto 12px; max-width: 44rem; }
.banner-destaque h2 em { font-style: normal; color: var(--lima, #b4f834); }
.banner-destaque p { color: rgba(255, 255, 255, 0.85); font-size: 1rem; margin: 0 auto 26px; max-width: 36rem; }
.bd-btn { display: inline-block; background: var(--lima, #b4f834); color: #0a0c08; border-radius: 999px; padding: 15px 36px; font-weight: 800; font-size: 0.98rem; text-decoration: none; animation: bdBtnPulsa 1.8s ease-in-out infinite; }
@keyframes bdBtnPulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.bd-fogo { position: absolute; color: rgba(255, 255, 255, 0.7); font-size: 1.1rem; animation: bdFogoFlutua 5s ease-in-out infinite; }
.bd-fogo.f1 { left: 8%; top: 24%; }
.bd-fogo.f2 { right: 12%; top: 16%; animation-delay: 1.2s; font-size: 0.8rem; }
.bd-fogo.f3 { left: 22%; bottom: 18%; animation-delay: 2.1s; font-size: 0.9rem; }
.bd-fogo.f4 { right: 24%; bottom: 26%; animation-delay: 0.7s; }
.bd-fogo.f5 { left: 44%; top: 12%; animation-delay: 1.7s; font-size: 0.75rem; }
.bd-fogo.f6 { right: 40%; top: 40%; animation-delay: 2.6s; font-size: 0.7rem; }
@keyframes bdFogoFlutua { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-14px); opacity: 1; } }
banner


/* ============ MENU RESPONSIVO ============ */
.h-burger { display: none; background: transparent; border: 1px solid #d5d9e4; border-radius: 10px; width: 42px; height: 42px; font-size: 1.15rem; cursor: pointer; color: var(--tinta); margin-left: auto; }
.h-menu-mobile { display: none; background: #fff; border-bottom: 1px solid var(--linha); padding: 12px 20px 18px; }
.h-menu-mobile a { display: block; padding: 11px 6px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid #f0f0f5; }
.h-menu-mobile a.cta { border: 0; background: var(--roxo); color: #fff; border-radius: 999px; text-align: center; margin-top: 10px; }
@media (max-width: 900px) {
  .h-burger { display: block; }
  .h-menu-mobile.aberto { display: block; }
  .h-nav .h-links { display: none; }
  .h-nav-acoes > a:first-child { display: none; }
}
menu

/* ============ CARDS VPS (dark com chips de desconto) ============ */
.vps-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .vps-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vps-cards { grid-template-columns: 1fr; } }
.vps-card { position: relative; background: #101013; border: 1px solid #242428; border-radius: 16px; padding: 24px 20px 22px; color: #fff; text-align: left; transition: transform 0.3s var(--ease), border-color 0.3s; }
.vps-card:hover { transform: translateY(-6px); border-color: var(--azul); }
.vps-card .v-desc { position: absolute; top: -11px; right: 14px; background: var(--azul); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; border-radius: 999px; padding: 3px 12px; }
.vps-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.vps-card .v-para { color: #8a8fa0; font-size: 0.74rem; margin-bottom: 16px; min-height: 34px; }
.vps-card .v-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.vps-card .v-specs div { background: #18181d; border: 1px solid #2a2a30; border-radius: 10px; padding: 8px 6px; text-align: center; }
.vps-card .v-specs b { font-size: 0.78rem; display: block; }
.vps-card .v-specs span { font-size: 0.6rem; color: #8a8fa0; }
.vps-card .v-preco { margin: 4px 0 14px; }
.vps-card .v-preco s { color: #6a6f80; font-size: 0.78rem; margin-right: 8px; }
.vps-card .v-preco b { font-family: "Sora"; font-size: 1.3rem; }
.vps-card .v-preco small { color: #8a8fa0; font-size: 0.68rem; }
.vps-card .v-btn { display: block; text-align: center; background: var(--azul); color: #fff; border-radius: 10px; padding: 10px; font-weight: 700; font-size: 0.84rem; text-decoration: none; }
.vps-card .v-btn:hover { filter: brightness(1.15); }
.vps-card.top { border: 2px solid var(--roxo, #673de6); }
.vps-card.top .v-desc { background: var(--roxo, #673de6); }