/* ==================================================
 VARIÁVEIS
================================================== */
:root{
  --bg: #ffffff;
  --bg-soft: #f7f7f9;

  --text: #111827;
  --text-soft: #6b7280;

  --orange: #ff7a18;
  --orange-light: #fff1e6;

  --green: #25d366;
  --green-dark: #128c7e;

  --border: rgba(17,24,39,.12);
  --shadow: 0 14px 40px rgba(0,0,0,.08);

  --radius: 14px;
}

/* ==================================================
 BASE
================================================== */
*{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

a{
  color: inherit;
  text-decoration: none;
}

.container{
  width: min(1140px, 92%);
}

/* ==================================================
 TOPBAR
================================================== */
#topbar{
  background: #111827;
  color: #fff;
  height: 40px;
  font-size: 14px;
}

#topbar a{
  color: #fff;
}

#topbar .contact-info{
  display: flex;
  gap: 16px;
  align-items: center;
}

#topbar .social-links a{
  margin-left: 10px;
}

/* ==================================================
 HEADER / MENU
================================================== */
#header{
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  transition: .3s ease;
}

#header.header-scrolled{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 10px 0;
}

.logo-text{
  font-family: "Poppins", system-ui;
  font-size: 22px;
  font-weight: 800;
  color: var(--orange);
}

.nav-menu ul{
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.nav-menu a{
  font-family: "Poppins", system-ui;
  font-weight: 600;
  color: var(--text-soft);
  padding: 8px 10px;
  border-radius: 10px;
  transition: .2s ease;
}

.nav-menu a:hover,
.nav-menu .active > a{
  color: var(--orange);
  background: var(--orange-light);
}

/* ==================================================
 HERO
================================================== */
#hero{
  min-height: 80vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(255,122,24,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(37,211,102,.10), transparent 55%),
    var(--bg);
  padding-top: 120px;
}

#hero h1{
  font-family: "Poppins", system-ui;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 12px;
}

#hero h2{
  color: var(--text-soft);
  font-size: 18px;
  max-width: 620px;
  line-height: 1.6;
}

.btn-get-started{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: "Poppins", system-ui;
  font-weight: 800;
  background: linear-gradient(135deg, var(--orange), #ff9a3c);
  color: #fff;
  box-shadow: 0 14px 40px rgba(255,122,24,.35);
  transition: .2s ease;
}

.btn-get-started:hover{
  transform: translateY(-2px);
}

/* ==================================================
 SECTIONS
================================================== */
section{
  padding: 70px 0;
}

.section-title{
  text-align: center;
  margin-bottom: 36px;
}

.section-title span{
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--orange-light);
  color: var(--orange);
  font-family: "Poppins", system-ui;
  font-weight: 800;
}

.section-title h2{
  font-family: "Poppins", system-ui;
  font-weight: 800;
  margin: 12px 0;
}

.section-title p{
  color: var(--text-soft);
}

/* ======================================
   PLANOS PRO (faixa + preço + checks)
====================================== */

:root{
  --blue: #0ea5e9;
  --blue-dark:#0284c7;
}

/* grid */
.pricing-row{
  row-gap: 22px;
}

/* card */
.pricing{
  background:#f6f8fb !important;
}
.pricing .box{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:18px !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.08) !important;
  overflow:hidden;
  padding:0 !important;
  position:relative;
  transition:.25s ease;
  color:#111827 !important;
}
.pricing .box:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 55px rgba(2,6,23,.12) !important;
}

/* faixa superior */
.pricing .plan-top{
  padding:16px 18px;
  color:#fff !important;
  font-family:"Poppins",system-ui;
  font-weight:900;
  text-align:center;
}
.pricing .plan-top.is-green{ background:linear-gradient(135deg,#22c55e,#16a34a); }
.pricing .plan-top.is-green-strong{ background:linear-gradient(135deg,#16a34a,#0f766e); }
.pricing .plan-top.is-blue{ background:linear-gradient(135deg,var(--blue),var(--blue-dark)); }

/* corpo */
.pricing .plan-body{
  padding:26px 24px 24px;
  text-align:center;
}

/* preço */
.pricing .price{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:8px;
  margin: 10px 0 6px;
}
.pricing .price .currency{
  font-weight:900;
  font-size:20px;
  color:#111827 !important;
}
.pricing .price .value{
  font-weight:900;
  font-size:44px;
  color:#111827 !important;
  font-family:"Poppins",system-ui;
}
.pricing .price.price-small{
  flex-wrap:wrap;
  gap:6px;
}
.pricing .price.price-small .pre{
  width:100%;
  font-size:14px;
  color:#6b7280 !important;
  font-weight:700;
}

}
/* força todo texto preto */
.pricing .box *,
.pricing .box li,
.pricing .box p,
.pricing .box h3,
.pricing .box h4{
  color:#111827 !important;
}

/* entrega */
.pricing .delivery{
  color:#6b7280 !important;
  font-size:14px;
  margin-bottom:14px; 
  color:#111827 !important;
}

/* lista com checks verdes */
.pricing .plan-list{
  list-style:none;
  padding:0;
  margin:16px 0 18px;
  text-align:left;
}
}

/* lista (benefícios) */
.pricing .plan-list li{
  color:#111827 !important;
  font-weight:600 !important;
}

.pricing .plan-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px dashed rgba(17,24,39,.14);
  color:#111827 !important;
  font-size:14px;
}
.pricing .plan-list li::before{
  content:"✓";
  font-weight:900;
  color:#22c55e;
  line-height:1;
  margin-top:2px;
}

/* botão */
.pricing .btn-buy{
  width:100%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:14px 16px;
  border-radius:999px;
  font-family:"Poppins",system-ui;
  font-weight:900;
  background:linear-gradient(135deg,#22c55e,#16a34a) !important;
  color:#0b1220 !important;
  box-shadow:0 14px 30px rgba(34,197,94,.25);
  transition:.2s ease;
}
.pricing .btn-buy:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 38px rgba(34,197,94,.30);
}

/* destaque do meio */
.pricing .featured{
  border:2px solid rgba(34,197,94,.70) !important;
  transform: translateY(-8px);
}

/* badge */
.pricing .badge-best{
  position:absolute;
  top:12px;
  right:12px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
  color:#15803d !important;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  font-family:"Poppins",system-ui;
}

/* mobile */
@media(max-width:992px){
  .pricing .featured{ transform:none; }
}


/* ==================================================
 SOBRE
================================================== */
.about p{
  color: var(--text-soft);
  line-height: 1.7;
}

.about ul{
  list-style: none;
  padding-left: 0;
}

.about li{
  padding: 6px 0;
}

.about i{
  color: var(--orange);
  margin-right: 8px;
}

/* ==================================================
 SERVIÇOS
================================================== */
.services{
  background: var(--bg-soft);
}

.icon-box{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.icon-box .icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--orange-light);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.icon-box i{
  font-size: 26px;
  color: var(--orange);
}

.icon-box h4{
  font-family: "Poppins", system-ui;
  font-weight: 800;
}

/* ==================================================
 CTA
================================================== */
.cta{
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(255,122,24,.22), transparent 55%),
    #fff;
  text-align: center;
}

.cta h3{
  font-family: "Poppins", system-ui;
  font-weight: 800;
}

.cta-btn{
  display: inline-flex;
  margin-top: 16px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: "Poppins", system-ui;
  font-weight: 800;
  background: linear-gradient(135deg, var(--green), #3ae374);
  color: #0b1220;
}

/* ==================================================
 PORTFÓLIO
================================================== */
.portfolio{
  background: var(--bg-soft);
}

.portfolio-card{
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.portfolio-card .thumb{
  height: 160px;
  background: linear-gradient(135deg, var(--orange-light), #fff);
}

.portfolio-card .info{
  padding: 16px;
}

/* ==================================================
 CONTATO
================================================== */
.info-box{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  text-align: center;
}

.info-box i{
  font-size: 28px;
  color: var(--orange);
}

/* ==================================================
 FOOTER
================================================== */
#footer{
  background: #111827;
  color: #fff;
}

#footer a{
  color: #fff;
}

#footer .footer-top{
  padding: 50px 0;
}

/* ==================================================
 WHATSAPP FLOAT
================================================== */
.whatsapp-float{
  position: fixed;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--green), #3ae374);
  color: #0b1220 !important;
  font-family: "Poppins", system-ui;
  font-weight: 900;
  box-shadow: 0 18px 50px rgba(37,211,102,.45);
  z-index: 9999;
}

/* ==================================================
 RESPONSIVO
================================================== */
@media (max-width: 992px){
  #hero{
    padding-top: 90px;
    min-height: 70vh;
  }
}

/* ===== Navbar/Logo ===== */
.site-header{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(17,24,39,.08);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
}

.brand__mark{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background: linear-gradient(135deg,#FF7A18,#FF2F92);
}

.brand__name{
  font-weight:900;
  color:#111827;
  font-size:18px;
}

.brand__accent{ color:#FF7A18; }

/* links */
.nav-desktop .nav-link{
  color:#374151 !important;
  font-weight:700;
  padding:10px 12px !important;
}
.nav-desktop .nav-link:hover{
  color:#111827 !important;
}

/* botão whatsapp */
.btn-wpp{
  background: linear-gradient(135deg,#25D366,#1EBE5D);
  color:#0b1220 !important;
  font-weight:800;
  border:none;
  border-radius:999px;
  padding:10px 14px;
}

/* ===== Hambúrguer vira X ===== */
.burger{
  border:none !important;
  background:transparent !important;
  padding:8px 10px;
  outline:none !important;
}

.burger__line{
  display:block;
  width:26px;
  height:3px;
  margin:5px 0;
  border-radius:999px;
  background:#111827;
  transition: transform .22s ease, opacity .18s ease;
}

.burger.is-open .burger__line:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.burger.is-open .burger__line:nth-child(2){
  opacity: 0;
}
.burger.is-open .burger__line:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== PATCH CONTRASTE (anti-ofuscado) ===== */

/* texto geral mais legível */
body{ color:#e5e7eb; }
p, li{ color: rgba(229,231,235,.88) !important; }

/* títulos bem claros */
h1,h2,h3,h4,h5,h6{
  color:#f9fafb !important;
}

/* links e navegação */
a{ color:#f9fafb; }
a:hover{ opacity:.95; }

/* caixas com contraste melhor */
.box, .icon-box, .info-box, .portfolio-card{
  background: #111b2e !important; /* um pouco mais claro que #111827 */
  border: 1px solid rgba(255,255,255,.09) !important;
}

/* ícones dentro dos cards */
.icon-box .icon i,
.info-box i,
.footer-links i,
.icofont,
.bx{
  color:#f9fafb !important;
  opacity:.95;
}

/* section-title (às vezes fica apagado) */
.section-title span{
  opacity: 1 !important;
}
.section-title p{
  color: rgba(229,231,235,.78) !important;
}

/* linhas/hrs não sumirem */
hr, .orange-hr{
  border-color: rgba(255,255,255,.14) !important;
}

/* placeholder de input (se tiver) */
input::placeholder, textarea::placeholder{
  color: rgba(229,231,235,.55) !important;
}

/* ===== FIX HERO OFUSCADO ===== */
#hero{
  position: relative;
  background: linear-gradient(135deg,#0f172a,#111827) !important; /* fundo escuro */
  min-height: 85vh;
}

#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 20% 10%, rgba(255,122,24,.25), transparent 45%),
              radial-gradient(circle at 90% 30%, rgba(255,47,146,.20), transparent 45%),
              rgba(0,0,0,.35);
  z-index:0;
}

#hero .container{
  position: relative;
  z-index:1;
}

#hero h1,
#hero h2{
  color:#f9fafb !important;
  text-shadow: 0 10px 25px rgba(0,0,0,.45);
}

#hero h2{
  opacity:.92;
}

/* botão continua chamativo */
#hero .btn-get-started{
  background: linear-gradient(135deg,#FF7A18,#FF2F92) !important;
  color:#fff !important;
}


.section-title h2,
.section-title span,
.section-title p{
  color:#0f172a !important;
}

.section-title span{
  background:#fff1e6;
}

#landing h2,
#landing p,
#landing li,
.about h3,
.about p,
.about li,
.services p,
.services h4,
.portfolio h4,
.portfolio p{
  color:#0f172a !important;
}

#cta{
  background:linear-gradient(135deg,#0f172a,#111827);
}

#cta h3,
#cta p{
  color:#fff !important;
}

.pricing .box{
  background:#0f172a;
}

.pricing .box h3,
.pricing .box h4,
.pricing .box li{
  color:#fff !important;
}

.pricing .box span{
  color:#ff7a18;
}

body{
  background:#f8fafc;
}

/* ===== FIX PORTFÓLIO (texto sumindo no card) ===== */

/* Se o fundo de baixo do card estiver escuro, o texto tem que ser claro */
.portfolio .portfolio-card .info h4,
.portfolio .portfolio-card .info p{
  color: #ffffff !important;
}

/* Se você quiser que a parte de baixo fique com cara premium (degradê) */
.portfolio .portfolio-card .info{
  background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Deixar o “thumb” (parte de cima) claro pra contrastar */
.portfolio .portfolio-card .thumb{
  background: #fff7ed; /* tom claro quente */
}

/* Opcional: um hover bonito */
.portfolio .portfolio-card{
  transition: transform .25s ease, box-shadow .25s ease;
}
.portfolio .portfolio-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .14);
}


/* ===== CTA MINI (Meu compromisso) ===== */

#cta{
  padding:30px 0 !important;
  min-height:auto !important;
}

#cta .container{
  padding:0 !important;
}

#cta .text-center{
  padding:25px 25px !important;
  max-width:320px !important;
  margin:auto;
  border-radius:16px;
}

/* títulos menores */
#cta h3{
  font-size:20px !important;
  margin-bottom:6px;
}

/* texto menor */
#cta p{
  font-size:13px !important;
  margin-bottom:12px;
}

/* botão compacto */
#cta a{
  padding:8px 22px !important;
  font-size:13px !important;
}

/* ===== CTA COMO CARD FLUTUANTE ===== */

#cta{
  background:none !important;
  padding:0 !important;
  height:0 !important;
}

#cta .container{
  position:fixed;
  left:20px;
  top:45%;
  transform:translateY(-50%);
  z-index:999;
  padding:0 !important;
}

#cta .text-center{
  background:linear-gradient(135deg,#0f172a,#020617);
  padding:22px 20px !important;
  max-width:240px !important;
  border-radius:18px;
  box-shadow:0 15px 40px rgba(0,0,0,.35);
  text-align:left !important;
}

/* texto */
#cta h3{
  font-size:16px !important;
  margin-bottom:6px;
  color:#fff;
}

#cta p{
  font-size:12px !important;
  opacity:.85;
  margin-bottom:12px;
  color:#e5e7eb;
}

/* botão */
#cta a{
  display:inline-block;
  background:#22c55e;
  color:#000 !important;
  padding:7px 16px !important;
  border-radius:999px;
  font-size:12px !important;
}

/* mobile: esconder */
@media(max-width:768px){
  #cta{display:none;}
}
/* =========================
   FIX CTA (parar de flutuar / sobrepor)
========================= */
#cta{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;     /* remove o flex que pode bagunçar */
  padding: 60px 0 !important;
  margin: 0 !important;
}

/* centraliza o card do CTA */
#cta .container{
  display: flex !important;
  justify-content: center !important;
}

/* o "card" do Meu compromisso */
#cta .text-center{
  max-width: 360px;
  width: 100%;
  margin: 0 auto !important;
  padding: 26px 22px !important;
  border-radius: 16px;

  /* aparência de card flutuante */
  background: #0f172a;
  box-shadow: 0 18px 45px rgba(2, 6, 23, .18);
  border: 1px solid rgba(255,255,255,.08);
}

/* garante espaço entre seções */
#portfolio{ padding-top: 80px !important; }
#contato{ padding-top: 80px !important; }

/* ===== CTA NORMAL (centralizado e SEM flutuar) ===== */
#cta{
  position: relative !important;
  display: block !important;
  height: auto !important;
  padding: 60px 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg,#0f172a,#111827) !important;
}

#cta .container{
  position: static !important;
  transform: none !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0 12px !important;
}

#cta .text-center{
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  padding: 26px 22px !important;
  border-radius: 16px !important;
  background: rgba(2,6,23,.35) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 45px rgba(2, 6, 23, .18) !important;
  text-align: center !important;
}

/* REMOVE FUNDO GRANDE DO CTA */
#cta{
  background: none !important;
  padding: 40px 0 !important;
}

/* mantém apenas o card pequeno */
#cta .container{
  display:flex !important;
  justify-content:center !important;
}

/* card */
#cta .text-center{
  background: linear-gradient(135deg,#0f172a,#020617) !important;
  max-width:360px !important;
  width:100%;
  padding:26px 22px !important;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(2,6,23,.25);
  border:1px solid rgba(255,255,255,.08);
}

/* ==============================
   HOSPEDAGEM = MESMO ESTILO PLANOS
============================== */

#hospedagem{
  background:#f8fafc;
  padding:80px 0;
}

#hospedagem .plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

/* CARD */
#hospedagem .plan-card{
  background:linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
  border-radius:18px;
  padding:28px 24px;
  box-shadow:0 18px 45px rgba(2,6,23,.18);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  display:flex;
  flex-direction:column;
}

/* TITULO */
#hospedagem h3{
  font-size:22px;
  font-weight:900;
}

/* PREÇO */
#hospedagem .plan-price{
  display:flex;
  gap:6px;
  margin:12px 0;
}

#hospedagem .price{
  font-size:26px;
  font-weight:900;
}

#hospedagem .suffix{
  font-size:22px;
  font-weight:900;
  color:#ff7a18;
}

/* LISTA */
#hospedagem ul{
  list-style:none;
  padding:0;
  margin:12px 0 20px;
}

#hospedagem li{
  padding:8px 0;
  border-bottom:1px dashed rgba(255,255,255,.15);
  font-size:14px;
}

/* BOTÃO */
#hospedagem .plan-btn{
  margin-top:auto;
  background:linear-gradient(135deg,#25d366,#3ae374);
  color:#0b1220!important;
  padding:14px;
  border-radius:12px;
  text-align:center;
  font-weight:900;
  box-shadow:0 14px 35px rgba(37,211,102,.3);
}

/* PLANO DESTACADO */
#hospedagem .featured{
  border:2px solid #ff7a18;
  transform:translateY(-8px);
}

/* BADGE */
#hospedagem .badge{
  position:absolute;
  top:16px;
  right:16px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,122,24,.15);
  border:1px solid rgba(255,122,24,.35);
  color:#ff7a18;
  font-size:12px;
  font-weight:900;
}

/* MOBILE */
@media(max-width:992px){
  #hospedagem .plans-grid{
    grid-template-columns:1fr;
  }

  #hospedagem .featured{
    transform:none;
  }
}
/* ===== GRID DA HOSPEDAGEM (igual Planos) ===== */
.hosting-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
  margin-top: 28px;
}

/* manter mesma altura e botões alinhados */
.hosting-grid .plan-card{
  display:flex;
  flex-direction:column;
}

.hosting-grid .plan-list{
  flex: 1;
}

/* responsivo */
@media (max-width: 992px){
  .hosting-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* ===== PORTFOLIO SOMENTE IMAGENS ===== */

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:30px;
}

.portfolio-img{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 35px rgba(0,0,0,.12);
  transition:.25s ease;
  background:#fff;
}

.portfolio-img img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.portfolio-img:hover{
  transform:translateY(-6px);
}

/* mobile */

@media(max-width:992px){
  .portfolio-grid{
    grid-template-columns:1fr;
  }

  .portfolio-img img{
    height:200px;
  }
}
/* =========================
   CONTATO PROFISSIONAL
========================= */

.contact{
  background: var(--bg-soft);
}

.contact-wrap{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: start;
  margin-top: 26px;
}

/* Card principal */
.contact-card{
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(2, 6, 23, .16);
  padding: 26px;
  color: #fff;
}

.contact-card__head h3{
  margin: 0 0 6px;
  font-family: "Poppins", system-ui;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
}

.contact-card__head p{
  margin: 0 0 14px;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}

.contact-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  font-family: "Poppins", system-ui;
  background: linear-gradient(135deg, #25D366, #1EBE5D);
  color: #0b1220 !important;
  box-shadow: 0 14px 30px rgba(37,211,102,.30);
  margin-top: 6px;
}

.contact-cta:hover{
  transform: translateY(-2px);
  transition: .2s ease;
}

.contact-note{
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.65);
}

/* grid de infos */
.contact-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.contact-info{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.contact-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,122,24,.14);
  color: #ff7a18;
  font-size: 18px;
}

.contact-info h4{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  font-family: "Poppins", system-ui;
  color: #fff;
}

.contact-info p{
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

/* Form */
.contact-form{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.contact-form h3{
  margin: 0 0 6px;
  font-family: "Poppins", system-ui;
  font-weight: 900;
  color: #111827;
}

.contact-form p{
  margin: 0 0 14px;
  color: #6b7280;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  outline: none;
  margin-bottom: 10px;
  font-family: "Open Sans", system-ui;
  background: #fff;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color: rgba(255,122,24,.5);
  box-shadow: 0 0 0 4px rgba(255,122,24,.12);
}

.form-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  font-family: "Poppins", system-ui;
  background: linear-gradient(135deg, var(--orange), #ff2f92);
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(255,47,146,.20);
  margin-top: 6px;
}

/* Responsivo */
@media(max-width: 992px){
  .contact-wrap{
    grid-template-columns: 1fr;
  }
  .contact-grid{
    grid-template-columns: 1fr;
  }
}

/* === CONTATO: FORM NO MESMO ESTILO DOS PLANOS (DARK) === */

.contact-form{
  background: #0f172a !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 45px rgba(2, 6, 23, .16) !important;
  color: #fff !important;
}

.contact-form h3{
  color:#fff !important;
}

.contact-form p{
  color: rgba(255,255,255,.78) !important;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color: rgba(255,122,24,.55) !important;
  box-shadow: 0 0 0 4px rgba(255,122,24,.15) !important;
}

/* Dropdown */
.contact-form select option{
  color: #111827;
}

/* Botão (igual vibe do seu site) */
.form-btn{
  background: linear-gradient(135deg, #ff7a18, #ff2f92) !important;
  color: #fff !important;
}
/* === CONTATO: FORM NO MESMO ESTILO DOS PLANOS (DARK) === */

.contact-form{
  background: #0f172a !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 45px rgba(2, 6, 23, .16) !important;
  color: #fff !important;
}

.contact-form h3{
  color:#fff !important;
}

.contact-form p{
  color: rgba(255,255,255,.78) !important;
}
/* FORÇAR FORM CONTATO BRANCO */

#contato input,
#contato textarea,
#contato select,
.contact-form input,
.contact-form textarea,
.contact-form select{
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(0,0,0,.2) !important;
}

/* placeholder */

#contato input::placeholder,
#contato textarea::placeholder{
  color: #6b7280 !important;
}

/* foco */

#contato input:focus,
#contato textarea:focus,
#contato select:focus{
  outline:none !important;
  border-color:#ff7a18 !important;
  box-shadow:0 0 0 3px rgba(255,122,24,.15) !important;
}

/* CENTRALIZAR CARD "MEU COMPROMISSO" */

#cta{
  position: relative !important;
  height: auto !important;
  padding: 80px 0 !important;
  display: flex !important;
  justify-content: center !important;
}

#cta .container{
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;

  display:flex !important;
  justify-content:center !important;
}

#cta .text-center{
  margin:0 auto !important;
  text-align:center !important;
  max-width:380px !important;
}
/* RESET TOTAL CTA */

#cta{
  all: unset;
  display:block;
  padding:100px 0;
}

/* container central */

#cta .container{
  display:flex;
  justify-content:center;
}

/* card */

#cta .text-center{
  background:linear-gradient(135deg,#0f172a,#020617);
  padding:40px 32px;
  border-radius:20px;
  max-width:420px;
  width:100%;
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
}

/* textos */

#cta h3{
  color:#fff;
  margin-bottom:10px;
}

#cta p{
  color:#e5e7eb;
  margin-bottom:20px;
}

/* botão */

#cta a{
  display:inline-block;
  background:#22c55e;
  color:#000 !important;
  padding:12px 30px;
  border-radius:999px;
  font-weight:700;
}

/* ===== CONTATO: orçamento abaixo do atendimento ===== */
#contato .contact-wrap,
#contato .contact-row,
#contato .contact-grid{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:18px !important;
}

/* largura boa e centralizada */
#contato .contact-left,
#contato .contact-right,
#contato .contact-info,
#contato .contact-form{
  width:min(820px, 92%) !important;
}

/* deixar o form mais “premium” e alinhado */
#contato .contact-form{
  padding:26px !important;
  border-radius:18px !important;
  box-shadow:0 20px 60px rgba(2,6,23,.14) !important;
}


/* ============================
   PLANOS — TEXTO PRETO DEFINITIVO
============================ */

/* lista dos planos */
.pricing .plan-list li,
.pricing .plan-list li span,
.pricing .plan-list li a{
  color:#111827 !important;
  background:none !important;
}

/* remove estilo de link se existir */
.pricing .plan-list li a{
  text-decoration:none !important;
  pointer-events:none;
}

/* garante texto preto mesmo selecionado */
.pricing .plan-list li::selection,
.pricing .plan-list li *::selection{
  background:rgba(34,197,94,.25);
  color:#111827;
}
/* ===============================
   HOSPEDAGEM — MESMO PADRÃO PLANOS
=============================== */

#hospedagem{
  background:#f6f8fb;
  padding:80px 0;
}

.hosting-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:30px;
}

.plan-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 14px 40px rgba(2,6,23,.08);
  overflow:hidden;
  position:relative;
  transition:.25s ease;
}

.plan-card:hover{
  transform:translateY(-6px);
}

/* faixa superior */

.plan-top{
  padding:16px;
  text-align:center;
  font-weight:900;
  color:#fff;
  font-family:Poppins;
}

.plan-top.is-green{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}

.plan-top.is-green-strong{
  background:linear-gradient(135deg,#16a34a,#0f766e);
}

.plan-top.is-blue{
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
}

.plan-body{
  padding:26px 24px;
  text-align:center;
}

/* preço */

.price{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:6px;
  margin:10px 0;
}

.currency{font-weight:900;}
.value{font-size:40px;font-weight:900;}
.suffix{font-size:14px;color:#6b7280}

/* lista */

.plan-list{
  list-style:none;
  padding:0;
  margin:16px 0 18px;
  text-align:left;
}

.plan-list li{
  padding:10px 0;
  border-bottom:1px dashed rgba(0,0,0,.12);
  color:#111827;
  font-weight:600;
}

.plan-list li::before{
  content:"✓";
  margin-right:8px;
  color:#22c55e;
  font-weight:900;
}

/* botão */

.btn-buy{
  display:block;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#000!important;
  padding:14px;
  border-radius:999px;
  font-weight:900;
}

/* destaque */

.featured{
  border:2px solid #22c55e;
  transform:translateY(-8px);
}

.badge-best{
  position:absolute;
  top:12px;
  right:12px;
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.4);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#15803d;
}

/* mobile */

@media(max-width:992px){
  .hosting-grid{grid-template-columns:1fr;}
  .featured{transform:none;}
}
/* =====================================
   RESET FINAL — REMOVER FUNDO ESCURO
===================================== */

/* PLANOS */
.pricing .box{
  background:#ffffff !important;
}

/* HOSPEDAGEM */
#hospedagem .plan-card{
  background:#ffffff !important;
}

/* texto escuro */
.pricing .box *,
#hospedagem .plan-card *{
  color:#111827 !important;
}

/* remover overlays escuros */
.pricing .box::before,
.pricing .box::after,
#hospedagem .plan-card::before,
#hospedagem .plan-card::after{
  display:none !important;
}

/* manter faixa de cima colorida */
.plan-top{
  color:#ffffff !important;
}

/* botão verde */
.btn-buy{
  background:linear-gradient(135deg,#22c55e,#16a34a) !important;
  color:#000 !important;
}



            /*Sobre  */


            
.about .section-title h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #212529;
}

.about .content h3 {
  line-height: 1.2;
}

.about .about-img img {
  max-height: 500px;
  object-fit: cover;
}

.bg-gradient-overlay {
  background: linear-gradient(to bottom right, rgba(255,107,0,0.1), rgba(0,123,255,0.05));
  pointer-events: none;
}

.about ul li strong {
  color: #0d6efd; /* ou sua cor primary */
}

@media (max-width: 991px) {
  .about .about-img img {
    max-width: 80%;
    margin: 0 auto 2rem;
  }
}