/* ============================================================
   WIKIROTAS — theme.css
   Sistema visual compartilhado por todas as páginas do site:
   tema escuro, amarelo de marca, tipografia Montserrat bold,
   cards, accordion, jornada de níveis, FAQ.
   ============================================================ */

:root{
  --yellow:#F5D400;
  --yellow-dim:rgba(245,212,0,.12);
  --black:#0d0d0d;
  --panel:#161616;
  --panel-2:#1c1c1c;
  --border:#262626;
  --gray:#a3a3a3;
  --gray-dim:#6b6b6b;
  --tb-bg:rgba(13,13,13,.72);
  --tb-border:rgba(255,255,255,.08);
  --tb-fg:#fff;
  --tb-accent:#F5D400;
  --tb-accent-fg:#111;
}

body{font-family:'Montserrat',sans-serif;background:var(--black);color:#fff;line-height:1.6}
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--space-6)}
.wrap-n{max-width:820px;margin:0 auto;padding:0 var(--space-6)}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--yellow);z-index:100;width:0%;transition:width .1s linear}

/* ---------- TIPOGRAFIA ---------- */
.kicker{text-align:center;color:var(--yellow);font-weight:700;letter-spacing:.32em;text-transform:uppercase;font-size:.8rem}
.h2{text-align:center;font-weight:900;letter-spacing:.02em;font-size:clamp(1.8rem,6vw,2.8rem);margin-top:var(--space-2);text-transform:uppercase;line-height:1.15}
.h2 em{color:var(--yellow);font-style:normal}
.bar{width:70px;height:5px;background:var(--yellow);margin:var(--space-5) auto var(--space-9)}
.lead{text-align:center;max-width:640px;margin:0 auto;color:#c9c9c9;font-size:1rem}
.lead strong{color:#fff}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;font-size:.85rem;padding:var(--space-4) var(--space-8);border-radius:40px;transition:transform .18s,box-shadow .18s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--yellow);color:#111}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(245,212,0,.25)}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-outline:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-ghost{color:var(--gray);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;text-decoration:none}
.btn-ghost:hover{color:var(--yellow)}

/* ---------- SEÇÕES ---------- */
.section{padding:var(--space-11) 0;background:var(--black)}
.section.alt{background:#0a0a0a;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---------- CARD BÁSICO ---------- */
.card-flat{background:var(--panel);border:1px solid var(--border);border-left:5px solid var(--yellow);padding:var(--space-6)}

/* ---------- STEPPER DE NÍVEIS (sticky) ---------- */
.level-stepper{position:sticky;top:56px;z-index:40;background:rgba(10,10,10,.86);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);padding:var(--space-3) 0}
.level-stepper .wrap{display:flex;align-items:center;gap:var(--space-5);overflow-x:auto;scrollbar-width:none}
.level-stepper .wrap::-webkit-scrollbar{display:none}
.level-stepper a{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-2);text-decoration:none;
  color:var(--gray-dim);font-weight:800;font-size:.85rem;transition:color .18s}
.level-stepper a .dot{width:22px;height:22px;border-radius:50%;border:1px solid #333;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;transition:all .18s}
.level-stepper a:hover{color:#fff}
.level-stepper a.active{color:var(--yellow)}
.level-stepper a.active .dot{background:var(--yellow);border-color:var(--yellow);color:#111}
.level-stepper .cur{margin-left:auto;color:var(--gray);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;display:none}
@media(min-width:640px){.level-stepper .cur{display:block}}

/* ---------- NÍVEL / TRIP CARD ---------- */
.level-block{padding:var(--space-11) 0;scroll-margin-top:120px}
.level-block:nth-child(even){background:#0a0a0a}
.level-head{max-width:640px;margin:0 auto var(--space-9)}
.level-eyebrow{color:var(--yellow);font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem}
.level-title{font-weight:900;font-size:clamp(1.6rem,5vw,2.3rem);margin-top:var(--space-2);text-transform:uppercase}
.level-desc{color:#b3b3b3;margin-top:var(--space-3);font-size:.98rem}

.trip-list{display:flex;flex-direction:column;gap:var(--space-5)}
.trip-card{display:flex;gap:var(--space-6);background:var(--panel);border:1px solid var(--border);text-decoration:none;color:inherit;
  padding:var(--space-6);transition:transform .18s,background .18s;position:relative}
.trip-card:hover{transform:translateY(-3px);background:#1c1c1c}
.trip-card .badge{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--yellow-dim);border:1px solid var(--yellow);
  color:var(--yellow);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.trip-card .body{flex:1;min-width:0;display:flex;flex-direction:column}
.trip-card .tt{display:block;font-weight:800;font-size:1.15rem;text-transform:uppercase;color:#fff}
.trip-card .tw{display:block;color:var(--yellow);font-weight:700;font-size:.85rem;margin-top:var(--space-1)}
.trip-card .td{display:block;color:#a3a3a3;font-size:.92rem;margin-top:var(--space-2)}
.trip-card .tg{display:inline-block;margin-top:var(--space-4);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;color:var(--yellow)}
@media(max-width:560px){.trip-card{flex-direction:column;gap:var(--space-3)}}

/* ---------- ROADMAP RESUMO ---------- */
.roadmap{border:1px solid var(--border);background:var(--panel);padding:var(--space-7)}
.roadmap .rlevel{padding:var(--space-5);border:1px solid var(--border);background:#111}
.roadmap .rlevel .rk{color:var(--yellow);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
.roadmap .rlevel .rv{color:#fff;font-weight:600;margin-top:var(--space-1)}
.roadmap .arrow{text-align:center;color:var(--yellow);padding:var(--space-3) 0;font-size:1.1rem}

/* ---------- ICON CARDS (preparação / diferenciais) ---------- */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5)}
.icon-card{background:var(--panel);border:1px solid var(--border);padding:var(--space-6);display:flex;gap:var(--space-4);align-items:flex-start}
.icon-card .ico{flex:0 0 auto;width:48px;height:48px;border-radius:12px;background:var(--yellow-dim);border:1px solid rgba(245,212,0,.3);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.icon-card .it{display:block;font-weight:800;color:#fff;font-size:1rem}
.icon-card .id{display:block;color:#a3a3a3;font-size:.88rem;margin-top:var(--space-1)}

/* ---------- BANNER / FAIXA (amarelo) ---------- */
.agenda-banner{background:var(--yellow);color:#111}
.agenda-banner a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3);
  max-width:1040px;margin:0 auto;padding:var(--space-4) var(--space-6);text-decoration:none;color:#111;
  font-weight:700;font-size:.92rem;text-align:center}
.agenda-banner strong{font-weight:900}
.agenda-banner .arrow{font-weight:900}
.agenda-banner h3,.agenda-banner p{color:#111}

/* ---------- CHECKLIST DUPLA (pra você / talvez não) ---------- */
.check-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.check-col{background:var(--panel);border:1px solid var(--border);padding:var(--space-7)}
.check-col h4{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;margin-bottom:var(--space-5)}
.check-col.yes h4{color:var(--yellow)}
.check-col.no h4{color:var(--gray)}
.check-col ul{display:flex;flex-direction:column;gap:var(--space-3);color:#c9c9c9;font-size:.95rem}
.check-col li{display:flex;gap:var(--space-3);align-items:flex-start}
.check-col.yes li::before{content:"✔";color:var(--yellow);font-weight:800;flex:0 0 auto}
.check-col.no li::before{content:"✕";color:var(--gray-dim);font-weight:800;flex:0 0 auto}

/* ---------- ACCORDION (roteiro / FAQ) ---------- */
.acc{display:flex;flex-direction:column;gap:var(--space-4)}
.acc-item{background:var(--panel);border:1px solid var(--border);border-left:5px solid var(--yellow);padding:var(--space-6)}
.acc-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  font-weight:800;font-size:1rem}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary .arrow{color:var(--gray);font-size:.85rem;transition:transform .18s;flex:0 0 auto}
.acc-item[open] summary .arrow{transform:rotate(180deg)}
.acc-item .acc-body{margin-top:var(--space-4);color:#b3b3b3;font-size:.92rem}
.faq .acc-item{border-left-color:#333}
.faq .acc-item summary{font-size:.98rem;font-weight:700}
.faq .acc-item:has(> [open]),.faq .acc-item[open]{border-left-color:var(--yellow)}

/* ---------- STAT CHIPS ---------- */
.stat-row{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center}
.stat-chip{background:var(--panel);border:1px solid var(--border);padding:var(--space-3) var(--space-5);font-weight:700;font-size:.88rem;color:#e5e5e5}
.stat-chip b{color:var(--yellow)}

/* ---------- FOOTER ---------- */
.footer{background:var(--black);color:#6b6b6b;font-size:.85rem;padding:var(--space-10) var(--space-6) var(--space-7);border-top:1px solid var(--border)}
.footer .fwrap{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-8)}
.footer .fb{font-weight:800;letter-spacing:.3em;color:#fff;padding-left:.3em}
.footer .ftag{color:var(--gray-dim);font-size:.82rem;margin-top:var(--space-3);max-width:260px}
.footer .social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.footer .social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;border:1px solid #333;color:var(--yellow);transition:transform .18s,background .18s,color .18s,border-color .18s}
.footer .social a:hover{transform:translateY(-3px);background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.footer .social svg{width:20px;height:20px;fill:currentColor}
.footer h5{color:#fff;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;margin-bottom:var(--space-4)}
.footer ul{display:flex;flex-direction:column;gap:var(--space-3);list-style:none}
.footer a.flink{color:#9a9a9a;text-decoration:none;font-size:.9rem}
.footer a.flink:hover{color:var(--yellow)}
.footer .fbottom{max-width:1040px;margin:var(--space-9) auto 0;padding-top:var(--space-6);border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;color:#4a4a4a;font-size:.76rem}

/* ---------- FOOTER simples (páginas internas) ---------- */
.footer.center{text-align:center;padding:var(--space-8) var(--space-6)}
.footer.center .fb{padding-left:.3em}
.footer.center .ftag,.footer.center p{color:var(--gray-dim);font-size:.85rem;max-width:none}
.footer.center .social{justify-content:center;margin:var(--space-5) 0 var(--space-3)}
.footer.center a{color:var(--yellow);text-decoration:none}
.footer.center .cad{margin-top:var(--space-2);color:#4a4a4a;font-size:.75rem;letter-spacing:.04em}