/* ===========================
   Paleta Lobelias Bot (logo)
   =========================== */
:root{
  --primary:       #9E5BFF;  /* roxo principal */
  --primary2:      #c198fc;
  --primary-600:   #7B38F2;  /* hover/contraste */
  --primary-300:   #C8B1FF;  /* acento/gradiente */
  --bg:            #0B0713;  /* fundo principal */
  --bg-2:          #120A1E;  /* barras/cartões */
  --ink:           #F7F5FF;  /* texto principal */
  --muted:         #CFC6E8;  /* texto secundário */
  --line:          rgba(255,255,255,.10);
  --ring:          0 0 0 3px rgba(158,91,255,.25);
  --shadow:        0 10px 30px rgba(158,91,255,.28), 0 6px 16px rgba(0,0,0,.35);
  --radius:        16px;
  --radius-lg:     22px;
  --grid:          clamp(16px, 2vw, 24px);
  --max:           1400px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(158,91,255,.25), transparent 60%),
    radial-gradient(700px 400px at -10% 0%, rgba(200,177,255,.18), transparent 60%),
    var(--bg);
  line-height:1.5;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin-inline:auto; padding: calc(var(--grid)*3) var(--grid);}
.row{display:grid; gap: clamp(20px, 2.4vw, 32px)}
.grid-2{grid-template-columns: 1.15fr .85fr}
.grid-3{grid-template-columns: repeat(3,1fr)}
@media (max-width: 960px){ .grid-2,.grid-3{grid-template-columns: 1fr} }

/* ===========================
   Header (simétrico)
   =========================== */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background: rgba(18,10,30,.55);
  border-bottom:1px solid var(--line);
}

.item-header:hover{
  transition-duration: 300ms;
  color: #c198fc;
  font-size: 17px;
}
.nav{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr; /* marca | menu central | CTA */
  align-items:center;
  column-gap:48px;
  padding:18px 54px;
  max-width:var(--max);
  margin:0 auto;
}
.brand{display:flex; align-items:center; gap:14px; justify-content:flex-start}
.logo{
  width:42px; height:42px; border-radius:12px;
  background:
    conic-gradient(from 210deg, var(--primary2), var(--primary-300) 40%, #A7F0FF 70%, var(--primary2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 18px rgba(158,91,255,.45);
}

.logo img {
  width: 42px;
  height: 42px;
  border-radius: 12px; /* opcional */
  display: block;
}
.menu {
  display: flex;
  justify-content: center; /* ou space-between/space-around */
  gap: 70px;
  margin-right: 30px;
}

.actions {
    margin-left: 110px;
}
.brand span{font-weight:800; letter-spacing:.2px}
.nav-links{display:flex; justify-content:space-evenly; align-items:center; gap:72px}
.nav-links a{opacity:.9; font-weight:600}
.nav-links a:hover{opacity:1}
.nav-cta{display:flex; justify-content:flex-end}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,var(--primary-300),var(--primary));
  padding:14px 26px; border-radius:18px; font-weight:800; color:#fff;
  box-shadow: var(--shadow);
}
.cta:hover{transform: translateY(-1px); box-shadow: 0 16px 36px rgba(158,91,255,.38)}
@media (max-width: 960px){
  .nav{grid-template-columns: 1fr auto; row-gap:12px; padding:16px 18px}
  .nav-links{grid-column:1 / -1; justify-content:center; gap:20px; flex-wrap:wrap}
  .nav-cta{justify-content:end}
}

/* ===========================
   Hero
   =========================== */
.hero{padding-top:60px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(158,91,255,.12);
  border:1px solid rgba(200,177,255,.28);
  color:var(--primary-300); font-weight:700
}
.hero h1{font-size: clamp(32px, 6vw, 56px); line-height:1.05; margin:16px 0 12px; letter-spacing:-.6px}
.hero p.lead{font-size: clamp(16px, 2.2vw, 20px); color:var(--muted); max-width: 60ch}
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2vw, 28px);
  box-shadow: var(--shadow);
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); font-weight:700
}
.btn:hover{background:rgba(255,255,255,.1)}
#select{color: black}
.btn.primary{background:linear-gradient(180deg, var(--primary-300), var(--primary)); border-color:transparent; box-shadow:var(--shadow); color:#fff}

/* Mock de chat */
.mock{
  background: radial-gradient(600px 300px at 80% 0%, rgba(200,177,255,.15), transparent), var(--bg-2);
  border:1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; position:relative; overflow:hidden
}
.window{background: var(--bg); border:1px solid var(--line); border-radius: 14px; padding:14px}
.msg{display:flex; gap:10px; margin:10px 0}
.msg .bubble{background: rgba(255,255,255,.06); border:1px solid var(--line); padding:10px 12px; border-radius:14px; max-width: 80%}
.msg.me .bubble{background: rgba(158,91,255,.18); border-color: rgba(158,91,255,.35)}

/* ===========================
   Highlights / Cards / Chips
   =========================== */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.04); color:var(--muted); font-weight:600
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius: var(--radius); padding: 18px
}
.card h3{margin: 8px 0 6px}

/* ===========================
   Steps
   =========================== */
.step{display:flex; gap:14px}
.card.step {
  background: #111;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  color: #fff;
}

/* Número + título na mesma linha */
.step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;  /* dá espaço antes do texto */
}

/* Bolinha do número */
.dot {
  background: linear-gradient(135deg, #9333ea, #6b21a8);
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Título */
.step-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

/* Texto sempre embaixo */
.card.step p.muted {
  margin: 0;
  margin-top: 4px;   /* espaço entre título e texto */
  font-size: 14px;
  color: #aaa;
  display: block;    /* garante que fique embaixo */
}

/* ===========================
   Pricing
   =========================== */
.price{display:grid; gap:16px; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 1000px){ .price{grid-template-columns:1fr} }
.plan{position:relative; overflow:hidden}
.plan.best{outline:2px solid rgba(158,91,255,.6)}
.tag{
  position:absolute; top:12px; right:12px; font-size:12px; padding:6px 10px;
  background: rgba(158,91,255,.18); border:1px solid rgba(158,91,255,.45); border-radius:999px
}
.big{font-size: 30px; font-weight:700}
.sub{color:var(--muted)}

/* ===========================
   FAQ
   =========================== */
details{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background: rgba(255,255,255,.04)}
summary{cursor:pointer; font-weight:700}
details[open]{background: rgba(158,91,255,.08)}

/* ===========================
   Footer
   =========================== */
footer{padding: 40px var(--grid); color: var(--muted); border-top: 1px solid var(--line)}
.mini{font-size:12px; opacity:.85}

/* ===========================
   Utilitários
   =========================== */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:36px}
.center{text-align:center}
.muted{color:var(--muted)}
.row-center{display:grid; place-items:center}

/* ===========================
   Acessibilidade / Focus
   =========================== */
a:focus-visible, button:focus-visible{outline:none; box-shadow: var(--ring)}
.seta-topo {
  width: 40px;   /* largura desejada */
  height: auto;  /* mantém proporção */
}

select {
  background-color: #1a1a1d;  /* fundo escuro */
  color: #fff;                /* texto claro */
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  outline: none;
  appearance: none; /* remove estilo padrão */
}

/* Opções dentro do dropdown */
select option {
  background-color: #1a1a1d;  /* fundo escuro no dropdown */
  color: #fff;                /* texto branco */
  padding: 10px;
}

/* Quando a opção está selecionada (hover/focus) */
select option:checked,
select option:hover {
  background-color: #1a1a1d;  /* roxo Lobelias */
  color: #fff;
}
#linkfaq {
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
#linkfaq:hover {
  transition-duration: 200ms;
  color: #c198fc;
  font-size: 15px;
}

/* =========================================================
   *** Responsivo (sem renomear classes) ***
   Mobile-first overrides + ajustes finos para tablets/phones
   ========================================================= */

/* Tipografia & espaçamento um pouco mais fluidos */
html { scroll-behavior: smooth; }
@media (max-width: 1280px){
  .container{ padding: calc(var(--grid)*2.5) var(--grid); }
}

/* ===== NAV / HEADER ===== */
@media (max-width: 1100px){
  .nav{
    grid-template-columns: 1fr auto;
    column-gap: 28px;
    padding: 16px 28px;
  }
  .menu{ gap: 36px; margin-right: 0; flex-wrap: wrap; }
  .actions{ margin-left: 0; }
  .nav-links{ gap: 36px; }
}

@media (max-width: 860px){
  .nav{ grid-template-columns: 1fr; row-gap: 10px; padding: 14px 18px; }
  .brand{ justify-content: center; }
  .menu{ justify-content: center; gap: 22px; }
  .nav-links{ justify-content: center; gap: 22px; flex-wrap: wrap; }
  .nav-cta{ justify-content: center; }
  .cta{ width: 100%; justify-content: center; }
}

/* Evita “pulo” no layout: hover não muda font-size em telas pequenas */
@media (max-width: 680px){
  .item-header:hover{ font-size: inherit; }
}

/* Logo menor no mobile para caber melhor na barra */
@media (max-width: 560px){
  .logo, .logo img{ width:34px; height:34px; }
}

/* ===== GRIDS / LAYOUT ===== */

/* 3 colunas -> 2 no tablet */
@media (max-width: 1024px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}

/* 2/3 colunas -> 1 no mobile (já existe @960, mantemos refinamentos abaixo) */
@media (max-width: 720px){
  .container{ padding: calc(var(--grid)*2) var(--grid); }
  .row{ gap: clamp(16px, 2.2vw, 24px); }
}

/* ===== HERO ===== */
@media (max-width: 920px){
  .hero{ padding-top: 40px; }
  .hero p.lead{ max-width: none; }
}
@media (max-width: 560px){
  .badge{ padding:6px 10px; font-size:12px; }
  .hero-card{ padding: 16px; border-radius: 16px; }
  .btn{ width: 100%; justify-content: center; }
}

/* ===== MOCK DE CHAT ===== */
@media (max-width: 720px){
  .msg .bubble{ max-width: 100%; }
}

/* ===== CARDS / CHIPS / STEPS ===== */
@media (max-width: 820px){
  .chips{ justify-content: center; }
}
@media (max-width: 680px){
  .card{ padding: 16px; }
  .card.step{ padding: 16px; }
  .big{ font-size: 26px; }
}
@media (max-width: 420px){
  .dot{ width:24px; height:24px; font-size:12px; }
  .step-header h3{ font-size:16px; }
  .big{ font-size: 24px; }
}

/* ===== PRICING ===== */
/* Mantém 3 col no desktop; já cai p/ 1 col <=1000px. Opcional: 2 col entre 760–1000px */
@media (max-width: 1000px) and (min-width: 760px){
  .price{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  .plan .tag{ top:10px; right:10px; font-size:11px; padding:5px 8px; }
}

/* ===== FAQ / FOOTER ===== */
@media (max-width: 720px){
  details{ padding: 12px 14px; }
}
@media (max-width: 560px){
  footer{ padding: 28px var(--grid); }
  .mini{ font-size: 11px; }
}

/* ===== FORM ELEMENTS ===== */
@media (max-width: 560px){
  select{ width: 100%; }
}

/* ===== Acessibilidade / Preferências ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
