/* ===== Redesign comercial (v2) ===== */
.barra { background: #0b1220; color: #cbd5e1; font-size: .82rem; }
.barra__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.barra a { color: #e2e8f0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; transition: background-color .15s, color .15s; }
.barra a:hover { background: var(--az); color: #fff; text-decoration: none; }
.barra__links { display: flex; gap: 4px; }
.barra .fa { color: #60a5fa; } .barra a:hover .fa { color: #fff; }

.sobretitulo { display: inline-block; margin-bottom: 10px; padding: 3px 12px; border: 1px solid #bfdbfe; border-radius: 999px; background: var(--az-claro); color: var(--az-esc); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.hero--escuro { background: radial-gradient(900px 480px at 88% 0%, rgba(59,130,246,.45), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(14,165,233,.25), transparent 60%), linear-gradient(135deg, #0b1b4d 0%, #1e3a8a 55%, #1d4ed8 100%); color: #fff; border-bottom: 0; }
.hero--escuro::after { 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: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.hero--escuro .hero__in { position: relative; z-index: 1; padding: 84px 0 96px; }
.hero--escuro h1 { color: #fff; }
.hero--escuro h1 em { font-style: normal; background: linear-gradient(90deg, #93c5fd, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero--escuro .hero__texto > p { color: #dbeafe; }
.hero--escuro .selo { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #e0f2fe; }
.hero--escuro .busca { max-width: 680px; padding: 7px; border-color: transparent; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.hero--escuro .busca:focus-within { box-shadow: 0 0 0 4px rgba(147,197,253,.5); }
.busca__icone { padding-left: 14px; color: var(--tx3); }
.hero--escuro .busca input { color: var(--tx); }
.hero--escuro .busca .btn--primario { height: 46px; padding-inline: 1.6em; }
.tlds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tlds li { padding: 4px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); font-size: .85rem; font-weight: 600; color: #e0f2fe; }
.hero--escuro .hero__pontos { color: #dbeafe; }
.hero--escuro .hero__pontos .fa { color: #6ee7b7; }
.hero__lado { position: relative; }
.hero__lado::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--raio-g); }
.hero--escuro .hero__cartao { position: relative; color: var(--tx); border: 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.hero__fita { position: absolute; top: -12px; right: 20px; padding: 4px 12px; border-radius: 999px; background: var(--vd); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.confianca { background: #fff; border-bottom: 1px solid var(--borda-suave); box-shadow: 0 10px 30px -20px rgba(15,23,42,.2); position: relative; z-index: 2; }
.confianca__in { padding: 26px 0; }
.confianca__in i { border-color: #bfdbfe; background: var(--az-claro); }

.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.beneficio { padding: 28px; background: #fff; border: 1px solid var(--borda-suave); border-radius: var(--raio-g); transition: border-color .18s, box-shadow .18s, transform .18s; }
.beneficio:hover { border-color: var(--az); box-shadow: var(--sombra); transform: translateY(-2px); }
.beneficio > i { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 14px; background: linear-gradient(135deg, var(--az), #3b82f6); color: #fff; font-size: 1.3rem; box-shadow: 0 8px 18px -8px rgba(29,78,216,.6); }
.beneficio p { margin: 0; color: var(--tx2); font-size: .95rem; }

.passos--linha { grid-template-columns: repeat(3, 1fr); margin: 0; }
.passos--linha li { position: relative; padding: 28px; }
.passos--linha li:not(:last-child)::after { content: "\f105"; font-family: FontAwesome; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--borda); border-radius: 50%; background: #fff; color: var(--az); }
.passos--linha h3 { margin-bottom: 6px; }

/* Planos mais robustos */
.plano { padding: 32px 26px 26px; border-width: 1.5px; border-color: var(--borda-suave); }
.plano::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 5px; border-radius: var(--raio-g) var(--raio-g) 0 0; background: linear-gradient(90deg, var(--az), #38bdf8); opacity: .55; }
.plano--destaque { background: linear-gradient(180deg, #f5f9ff, #fff 40%); transform: translateY(-6px); }
.plano--destaque::before { opacity: 1; }
.plano--destaque:hover { transform: translateY(-8px); }
.plano__nome { font-size: 1.25rem; margin-bottom: 2px; }
.plano__sub { margin: 0 0 14px; font-size: .8rem; color: var(--tx3); }
.plano__preco strong { font-size: 2.8rem; }
.plano .btn { padding-block: .8em; }

/* Páginas internas: topo escuro */
.pagina-topo { background: radial-gradient(700px 300px at 90% 0%, rgba(59,130,246,.4), transparent 60%), linear-gradient(135deg, #0b1b4d, #1e3a8a 60%, #1d4ed8); color: #fff; border-bottom: 0; padding: 56px 0 48px; }
.pagina-topo h1 { color: #fff; } .pagina-topo .lead { color: #dbeafe; }
.pagina-topo .migalhas, .pagina-topo .migalhas a { color: #bfdbfe; }
.pagina-topo .selo { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #e0f2fe; }

/* Cabeçalho do site */
.topo { box-shadow: 0 1px 0 var(--borda-suave), 0 8px 24px -20px rgba(15,23,42,.3); }
.menu__link { font-weight: 600; }

/* WhatsApp flutuante */
.zap { position: fixed; z-index: 80; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1.5px solid #16a34a; border-radius: 999px; background: #fff; color: #15803d; font-weight: 700; box-shadow: 0 12px 28px -10px rgba(22,163,74,.55); text-decoration: none; transition: background-color .18s, color .18s; }
.zap .fa { font-size: 1.4rem; }
.zap:hover { background: #16a34a; color: #fff; text-decoration: none; }

.cta-rodape { background: radial-gradient(600px 240px at 90% 0%, rgba(147,197,253,.3), transparent 60%), linear-gradient(135deg, #1d4ed8, #0b1b4d); }

@media (max-width: 1200px) {
  .beneficios { grid-template-columns: 1fr 1fr; }
  .hero__lado::before { display: none; }
  .plano--destaque { transform: none; }
}
@media (max-width: 800px) {
  .barra__msg { display: none; } .barra__in { justify-content: center; }
  .passos--linha { grid-template-columns: 1fr; } .passos--linha li::after { display: none; }
}
@media (max-width: 560px) {
  .beneficios { grid-template-columns: 1fr; }
  .hero--escuro .hero__in { padding: 48px 0 56px; }
  .zap span { display: none; } .zap { padding: 14px; }
  .hero--escuro .busca input { height: 44px; }
}

/* Voltar ao topo (canto direito) */
.topo-btn { position: fixed; z-index: 80; right: 18px; bottom: 18px; display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--az); border-radius: 50%; background: #fff; color: var(--az); font-size: 1.7rem; line-height: 1; box-shadow: 0 12px 28px -10px rgba(29,78,216,.5); cursor: pointer; transition: background-color .18s, color .18s, transform .18s; }
.topo-btn:hover { background: var(--az); color: #fff; transform: translateY(-2px); }
.topo-btn[hidden] { display: none; }
@media (max-width: 560px) { .zap { left: 12px; bottom: 12px; } .topo-btn { right: 12px; bottom: 12px; } }

/* ===== Menu com painéis (estilo Locaweb) ===== */
.menu__lista { gap: 2px; }
.tem-sub { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--borda-suave); border-bottom: 1px solid var(--borda-suave); box-shadow: 0 30px 50px -28px rgba(15,23,42,.35); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.tem-sub:hover > .mega, .tem-sub:focus-within > .mega, .tem-sub.aberto > .mega { opacity: 1; visibility: visible; transform: none; }
.mega__in { display: flex; gap: 36px; padding: 28px 0 32px; }
.mega__col { flex: 1 1 0; min-width: 0; max-width: 360px; }
.mega__col h4 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--borda-suave); color: var(--tx3); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mega__item { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px; margin: 0 -10px 2px; border-radius: 12px; color: var(--tx); text-decoration: none; transition: background-color .15s, color .15s; }
.mega__item > i { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #bfdbfe; border-radius: 10px; background: var(--az-claro); color: var(--az); font-size: 1.1rem; transition: background-color .15s, color .15s, border-color .15s; }
.mega__item strong { display: block; font-size: .95rem; line-height: 1.25; }
.mega__item small { display: block; color: var(--tx3); font-size: .8rem; line-height: 1.35; transition: color .15s; }
.mega__item:hover { background: var(--az); color: #fff; text-decoration: none; }
.mega__item:hover small { color: #dbeafe; }
.mega__item:hover > i { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; }
.mega__promo { flex: 0 0 300px; margin-left: auto; padding: 24px; border-radius: var(--raio-g); background: radial-gradient(300px 160px at 100% 0%, rgba(147,197,253,.35), transparent 60%), linear-gradient(135deg, #1d4ed8, #0b1b4d); color: #fff; }
.mega__promo h4 { margin: 8px 0 6px; font-size: 1.2rem; color: #fff; }
.mega__promo p { margin: 0 0 14px; color: #dbeafe; font-size: .92rem; }
.mega__promo .selo { margin: 0; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #e0f2fe; }
.menu__link .fa-angle-down { transition: transform .18s; }
.tem-sub:hover > .menu__link .fa-angle-down, .tem-sub.aberto > .menu__link .fa-angle-down { transform: rotate(180deg); }

@media (max-width: 1200px) {
  .mega { position: static; display: none; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: var(--fundo2); border-radius: 12px; margin: 2px 0 8px; }
  .tem-sub:hover > .mega, .tem-sub:focus-within > .mega { display: none; }
  .tem-sub.aberto > .mega { display: block; }
  .mega__in { flex-direction: column; gap: 14px; padding: 14px 14px 16px; width: auto; }
  .mega__col { max-width: none; }
  .mega__promo { flex: none; margin: 0; }
}

/* ===== Preços do ADM com desconto (padrão das grandes hospedagens) ===== */
.ciclos { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 32px; padding: 4px; border: 1.5px solid var(--borda); border-radius: 999px; background: #fff; }
.ciclo { padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: .92rem; color: var(--tx2); cursor: pointer; transition: background-color .15s, color .15s; }
.ciclo:hover, .ciclo.is-ativo { background: var(--az); color: #fff; }
.preco { margin-bottom: 14px; }
.preco__de { margin: 0 0 2px; color: var(--tx3); font-size: .9rem; }
.preco__de s { text-decoration-thickness: 1.5px; }
.preco__pct { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: .78rem; font-weight: 700; }
.preco .plano__preco { margin-bottom: 2px; }
.preco__nota { margin: 0; color: var(--tx3); font-size: .82rem; }
.preco__econ { margin: 6px 0 0; color: #166534; font-size: .85rem; font-weight: 600; }
.preco__econ .fa { margin-right: 4px; }
.preco__prim { margin: 6px 0 0; color: #475569; font-size: .85rem; font-weight: 500; }
.preco__prim[hidden] { display: none; }
.preco [data-p="totalbox"][hidden] { display: none !important; }
/* mantém a altura igual entre planos com e sem desconto */
.preco [data-p="de"][hidden], .preco [data-p="econbox"][hidden] { display: block !important; visibility: hidden; }
.preco__de, .preco__econ { min-height: 1.5em; }
.bloco-planos[hidden] { display: none !important; }

.selos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.selos a { display: flex; align-items: center; }
.selos img { box-sizing: border-box; display: block; height: 58px; max-height: none; width: auto; border-radius: 6px; background: #fff; padding: 3px; }

/* Carrossel de planos (mais de 4 planos) */
.carrossel-wrap { position: relative; }
.grade-planos.carrossel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding: 0 4px; padding: 16px 4px 10px; margin: -16px -4px -10px; cursor: grab; }
.grade-planos.carrossel::-webkit-scrollbar { display: none; }
.grade-planos.carrossel.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carrossel > .plano { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; }
.car-btn { position: absolute; z-index: 3; top: 45%; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--borda); border-radius: 50%; background: #fff; color: var(--az); font-size: 1.6rem; line-height: 1; box-shadow: 0 8px 20px -8px rgba(15,23,42,.35); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.car-btn:hover { background: var(--az); border-color: var(--az); color: #fff; }
.car-btn[hidden] { display: none; }
.car-btn--left { left: -18px; } .car-btn--right { right: -18px; }
@media (max-width: 1200px) { .carrossel > .plano { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 900px) { .carrossel > .plano { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .carrossel > .plano { flex-basis: 86%; } .car-btn--left { left: -8px; } .car-btn--right { right: -8px; } }

/* ===== Topo claro com ilustração (substitui o azul) ===== */
.hero--claro { position: relative; background: radial-gradient(800px 420px at 85% 10%, #e0ecff 0%, transparent 65%), linear-gradient(180deg, #f4f8ff 0%, #fff 100%); color: var(--tx); border-bottom: 1px solid var(--borda-suave); }
.hero--claro .hero__in { padding: 64px 0 40px; }
.hero--claro h1 { color: var(--tx); }
.hero--claro h1 em { font-style: normal; color: var(--az); }
.hero--claro .hero__texto > p { color: var(--tx2); }
.hero--claro .busca { max-width: 680px; border: 1.5px solid var(--borda); box-shadow: var(--sombra); }
.hero--claro .tlds li { background: #fff; border: 1px solid var(--borda); color: var(--tx2); }
.hero--claro .hero__pontos { color: var(--tx2); }
.hero--claro .hero__lado { display: grid; place-items: center; }
.hero--claro .ilus-hero { width: 100%; max-width: 480px; height: auto; }
.hero__precos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding-bottom: 44px; }
.preco-mini { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; background: #fff; border: 1px solid var(--borda-suave); border-radius: var(--raio-g); box-shadow: var(--sombra); }
.preco-mini span { display: block; color: var(--tx3); font-size: .82rem; font-weight: 600; }
.preco-mini p { margin: 0; }
.preco-mini strong { font-size: 1.8rem; letter-spacing: -.02em; line-height: 1.1; }
.preco-mini small, .preco-mini em { color: var(--tx3); font-style: normal; font-weight: 600; font-size: .9rem; }
.preco-mini--info { justify-content: flex-start; background: var(--az-claro); border-color: #bfdbfe; }
.preco-mini--info > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--az); color: #fff; font-size: 1.2rem; flex: none; }
.preco-mini--info p { color: var(--tx2); font-size: .9rem; }
@media (max-width: 1200px) { .hero--claro .hero__lado { display: none; } .hero__precos { grid-template-columns: 1fr 1fr; } .preco-mini--info { display: none; } }
@media (max-width: 560px) { .hero__precos { grid-template-columns: 1fr; } .hero--claro .hero__in { padding: 40px 0 24px; } }

/* Topo das páginas internas: claro também */
.pagina-topo { background: radial-gradient(700px 300px at 90% 0%, #e0ecff, transparent 65%), linear-gradient(180deg, #f4f8ff, #fff); color: var(--tx); border-bottom: 1px solid var(--borda-suave); }
.pagina-topo h1 { color: var(--tx); } .pagina-topo .lead { color: var(--tx2); }
.pagina-topo .migalhas, .pagina-topo .migalhas a { color: var(--tx3); }
.pagina-topo .selo { background: var(--az-claro); border-color: #bfdbfe; color: var(--az-esc); }
.preco-mini .btn { white-space: nowrap; flex: none; }

/* Avisos só como toast: banners inline ficam ocultos */
.aviso { display: none !important; }