/* -------------------------
   Bot Consulta — styles.css
   Dark premium + verde WhatsApp
   Responsivo, elegante, animações suaves
--------------------------*/
:root{
  --bg:#070b0a;          /* fundo geral */
  --surface:#0c1311;     /* cartões/nav */
  --surface-2:#0f1715;   /* variantes */
  --border:#163427;
  --text:#eaf7ee;
  --muted:#cde6d6;
  --accent:#25D366;      /* WhatsApp green */
  --accent-2:#128C7E;
  --warn:#ffd166;
  --danger:#ff4757;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%,#0d221a 0%,transparent 60%),
    radial-gradient(900px 600px at 110% 10%,#0d241d 0%,transparent 55%),
    linear-gradient(180deg,#050807 0%, #070b0a 60%, #060a08 100%);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; /* evita vazamento lateral em sombras/efeitos */
}

.container{
  width:min(100%,1180px);
  margin:0 auto;
  padding:20px clamp(14px,3vw,20px); /* padding responsivo */
}

/* NAVBAR */
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(12,19,17,.85),rgba(12,19,17,.55));
  border:1px solid rgba(22,52,39,.35);
  padding:10px clamp(12px,2.2vw,16px);
  border-radius:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.brand .logo-img{
  width:34px;height:34px;border-radius:10px;display:block;
  box-shadow:inset 0 0 10px rgba(0,0,0,.5)
}
.brand b{
  font-size:18px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.nav .actions{display:flex;gap:10px;flex-wrap:wrap}

/* BOTÕES */
.btn{
  background:var(--accent); color:#053; padding:12px 16px;
  border:none; border-radius:12px; cursor:pointer; font-weight:800;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(37,211,102,.25)}
.btn:active{transform:translateY(0)}
.btn.outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.ghost{background:transparent;color:var(--muted)}

/* LAYOUT BASE */
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
  overflow:hidden; /* impede sombras/filhos vazarem */
}
.grid{display:grid; gap:20px; grid-template-columns:repeat(12,1fr)}
.col-4{grid-column:span 4} .col-6{grid-column:span 6}
.col-8{grid-column:span 8} .col-12{grid-column:span 12}

/* ----- HERO/Glass image refinements ----- */
.glass{
  position:absolute;
  inset: clamp(14px,2.2vw,24px);
  border-radius:22px;
  border:1px solid rgba(37,211,102,.25);
  background:linear-gradient(180deg,rgba(16,27,23,.55),rgba(16,27,23,.25));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex;                 /* centraliza a imagem */
  align-items:center;
  justify-content:center;
  padding: clamp(8px,1.4vw,14px);
  overflow:hidden;              /* corta eventual bleed da imagem */
}

/* Variante com proporção “tela de celular” */
.glass.phone{
  aspect-ratio: 9 / 16;         /* mantém retrato; ajuda no mobile */
}

/* Imagem dentro do glass: preenche sem distorcer */
.painel-img{
  width:100%;
  height:100%;
  object-fit: contain;           /* mostra a imagem inteira */
  display:block;
  border-radius:inherit;         /* cantos iguais ao glass */
  transform: translateZ(0);      /* evita serrilhado em alguns browsers */
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

/* Ajustes finos em telas menores */
@media (max-width: 980px){
  .hero-illus{ min-height: 260px; }
  .glass{ inset: 12px; }
}
@media (max-width: 420px){
  .hero-illus{ min-height: 220px; }
  .glass{ inset: 10px; border-radius:18px; }
}


/* HERO */
.hero{
  position:relative; overflow:hidden;
  border-radius:18px;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap: clamp(16px,2.4vw,28px);
  align-items:center
}
.hero .badge{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 12px;border-radius:999px;background:#0e1a15;
  border:1px solid #1a3a2b;font-weight:700
}
.hero .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px #25D366AA}
.hero h1{
  font-size:clamp(28px,5.2vw,46px);
  line-height:1.08;margin:10px 0;
  text-wrap:balance; /* quebra melhor em títulos longos */
  background:linear-gradient(90deg,#eaf7ee 0%,#b6efcf 45%,#7ae3b0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.hero p{opacity:.9;font-size:clamp(.98rem,1.2vw,1.05rem); max-width:60ch}
.hero-illus{position:relative;min-height: clamp(200px,32vw,320px)}
.blob{
  position:absolute; inset:0; border-radius:28px;
  background:radial-gradient(120% 120% at 60% 10%,
    rgba(37,211,102,.16) 0%, rgba(18,140,126,.08) 35%, transparent 70%);
  filter:blur(24px); animation:float 10s ease-in-out infinite alternate
}
.glass{
  position:absolute; inset: clamp(14px,2.2vw,24px);
  border-radius:22px;
  border:1px solid rgba(37,211,102,.25);
  background:linear-gradient(180deg,rgba(16,27,23,.55),rgba(16,27,23,.25));
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}
@keyframes float{from{transform:translateY(-6px)} to{transform:translateY(6px)}}

/* FEATURES & PRICING */
.features{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.feature{
  padding:16px;border:1px solid var(--border);border-radius:14px;background:#0e1614;
  transition:transform .15s ease,border-color .2s ease
}
.feature:hover{transform:translateY(-2px);border-color:#1f5c42}

.pricing{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:14px
}
.price{
  position:relative; padding:18px 18px 20px; border:1px solid var(--border);
  background:linear-gradient(180deg,#0f1815,#0c1412); border-radius:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:170px; /* cards iguais */
}
.price h4{margin:0 0 6px; font-size:18px}
.price .val{font-size:28px;font-weight:900}
.price .cta{margin-top:auto}
.price::after{content:'';position:absolute;inset:auto 16px 0 16px;height:1px;background:linear-gradient(90deg,transparent,#1b4230,transparent)}

/* FORM/INPUTS */
label{display:block;margin:6px 0 6px 2px;opacity:.9}
.input, select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #1a2b22;
  background:#0e1412;color:var(--text);outline:none
}
.input:focus{border-color:#1f623f;box-shadow:0 0 0 3px rgba(37,211,102,.18)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid #15231c;text-align:left}
.table th{opacity:.7}
.small{font-size:.92rem;opacity:.85}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace}
.footer{opacity:.6;padding:36px 0}
.link{color:#a2f8c4;text-decoration:none;border-bottom:1px dashed #1f6b44}
.alert{padding:12px 14px;border:1px solid #2a3b34;background:#0f1614;border-radius:12px}

/* REVEAL SUAVE */
.reveal{opacity:0; transform:translateY(10px); animation:reveal .6s ease forwards}
.reveal.delay-1{animation-delay:.08s}
.reveal.delay-2{animation-delay:.16s}
.reveal.delay-3{animation-delay:.24s}
@keyframes reveal{to{opacity:1; transform:none}}

/* BREAKPOINTS — corrigem “torto” no mobile e vazamentos */
@media (max-width:1080px){
  .container{padding-inline:16px}
  .hero-inner{grid-template-columns:1fr .9fr}
}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:16px}
  .hero-illus{min-height:220px}
  .hero h1{font-size:clamp(26px,8vw,38px)}
  .grid{grid-template-columns:repeat(12,1fr)}
  .col-12-sm{grid-column:span 12}      /* usado na sua index.php */
}
@media (max-width:700px){
  .nav{padding:8px 12px}
  .brand b{font-size:16px}
  .btn{padding:10px 14px}
  .price .val{font-size:24px}
}
@media (max-width:420px){
  .nav .actions{gap:8px}
  .glass{inset:14px}                    /* evita bordas “cortadas” */
}

/* reduz animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none; opacity:1; transform:none}
  .blob{animation:none}
}

/* Links sem sublinhado em todo o site */
a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: none; }

/* Garante que .btn nunca receba sublinhado por herança */
a.btn { text-decoration: none; }