/* GuieBem — design profissional, mobile-first. */
:root{
  --brand:#2563EB; --brand-d:#1B46C2; --brand-l:#EEF3FF;
  --wa:#22C55E; --wa-d:#16A34A;
  --ink:#0B1220; --ink-2:#1E293B; --muted:#64748B; --muted-2:#94A3B8;
  --line:#E7EAF0; --line-2:#F0F2F7; --bg:#F7F8FB; --card:#FFFFFF;
  --r-xs:10px; --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:30px;
  --sh-xs:0 1px 2px rgba(16,24,40,.06);
  --sh-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --sh:0 4px 16px rgba(16,24,40,.08);
  --sh-md:0 12px 28px rgba(16,24,40,.10);
  --sh-lg:0 24px 60px rgba(23,52,120,.18);
  --gut:18px; --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
a{color:var(--brand); text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3{line-height:1.18; letter-spacing:-.02em; margin:0}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.ic{width:1em; height:1em; flex:none; vertical-align:-.125em}

/* Botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit;
  font-weight:600; font-size:15px; padding:0 22px; height:52px; border-radius:var(--r-sm); border:0;
  cursor:pointer; text-align:center; line-height:1; text-decoration:none;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, filter .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.25)}
.btn-primary:hover{background:var(--brand-d)}
.btn-wa{background:var(--wa); color:#fff; box-shadow:0 6px 16px rgba(34,197,94,.28)}
.btn-wa:hover{background:var(--wa-d)}
.btn-ghost{background:#fff; color:var(--ink-2); border:1.5px solid var(--line); box-shadow:var(--sh-xs)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-sm{height:44px; font-size:14px; padding:0 18px}

/* Header */
.hdr{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo{font-weight:800; font-size:23px; color:var(--ink); letter-spacing:-.03em}
.logo span{color:var(--brand)}
.nav{display:flex; align-items:center; gap:6px}
.nav-link{font-weight:600; color:var(--ink-2); padding:10px 12px; border-radius:10px}
.nav-link:hover{background:var(--line-2)}
.nav-oi{font-size:14px; color:var(--muted); display:none; margin-right:4px}
.hdr .btn{height:44px; padding:0 18px; font-size:14px}

/* Hero */
.hero{position:relative; overflow:hidden; color:#fff; padding:44px 0 92px;
  background:radial-gradient(120% 120% at 85% -10%, #4F86FF 0%, #2563EB 42%, #1233A6 100%)}
.hero::after{content:""; position:absolute; inset:auto 0 -1px 0; height:60px; background:var(--bg);
  border-top-left-radius:26px; border-top-right-radius:26px}
.hero-inner{position:relative; z-index:2}
.trust{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.trust span{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22); color:#fff; font-size:12.5px; font-weight:500;
  padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px)}
.trust .ic{color:#9FE870}
.hero-h1{font-size:32px; font-weight:800; margin:0 0 12px; max-width:16ch}
.hero-sub{font-size:16px; opacity:.92; margin:0; max-width:40ch}

/* Busca (card sobreposto ao hero) */
.busca-hero{position:relative; z-index:5; margin-top:-56px}
.busca{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px;
  box-shadow:var(--sh-lg); display:grid; gap:12px}
.busca-campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.busca-campo label{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.fld{position:relative; display:flex; align-items:center}
.fld .ic{position:absolute; left:14px; color:var(--muted-2); width:18px; height:18px; pointer-events:none}
.busca select,.busca input{font:inherit; font-size:16px; height:52px; padding:0 14px 0 42px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:#fff; color:var(--ink); width:100%; min-width:0; -webkit-appearance:none; appearance:none}
.busca select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px}
.busca select:focus,.busca input:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.busca-btn{width:100%; margin-top:2px}
.busca-inline{margin-top:18px; box-shadow:var(--sh); grid-template-columns:1fr}

/* Seções */
.sec{padding:34px 0}
.sec-top{padding:24px 0 6px}
.kicker{color:var(--brand); font-weight:700; font-size:12px; letter-spacing:.09em; text-transform:uppercase; margin:0 0 6px}
.sec-h2{font-size:22px; font-weight:700; margin:0 0 18px}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:10px 16px; font-weight:600; font-size:14px; color:var(--ink-2); box-shadow:var(--sh-xs); transition:.15s}
.chip:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-1px); box-shadow:var(--sh-sm)}
.chip span{color:var(--muted); font-weight:500; font-size:12px}

/* Grid de estados */
.grid-estados{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.estado-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px;
  display:flex; flex-direction:column; gap:3px; box-shadow:var(--sh-xs); transition:.15s}
.estado-card:hover{border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--sh)}
.estado-uf{font-weight:800; color:var(--brand); font-size:13px; letter-spacing:.02em}
.estado-nome{font-weight:600; font-size:15px}
.estado-n{font-size:12.5px; color:var(--muted)}

/* Cards de instrutor */
.cards{display:grid; grid-template-columns:1fr; gap:16px}
.card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px 20px 20px; text-align:center; box-shadow:var(--sh-sm); display:flex; flex-direction:column;
  align-items:center; transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:#dbe3f4}
.card-av{width:78px; height:78px; margin-bottom:12px}
.card-av svg{width:78px; height:78px; display:block; border-radius:50%; box-shadow:0 4px 14px rgba(16,24,40,.16); border:3px solid #fff}
.card-nome{font-size:16.5px; font-weight:700; letter-spacing:-.01em; margin:0}
.card-loc{display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:13.5px; margin:5px 0 0}
.card-loc .ic{width:15px; height:15px; color:var(--brand)}
.card-cat{background:var(--brand-l); color:var(--brand-d); font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:999px; margin-top:12px; letter-spacing:.02em}
.card-cta{margin-top:16px; width:100%; height:48px}
.card-sep{width:100%; height:1px; background:var(--line-2); margin:16px 0 0}

/* Aviso cadastro */
.aviso-cadastro{display:flex; gap:10px; align-items:flex-start; background:#FFF9EC; border:1px solid #FBE3AE;
  color:#8A6410; border-radius:var(--r); padding:14px 16px; font-size:14px; margin-top:18px}
.aviso-cadastro .ic{width:18px; height:18px; color:#D9A21B; margin-top:1px}
.aviso-cadastro a{font-weight:700; color:#8A6410; text-decoration:underline}

/* Breadcrumb / paginação / textos */
.crumbs{font-size:13px; color:var(--muted); padding-top:20px; display:flex; gap:7px; flex-wrap:wrap}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--brand)}
.pag-h1{font-size:26px; font-weight:800; margin:10px 0 8px}
.uf-badge{display:inline-block; background:var(--brand); color:#fff; font-size:13px; font-weight:700;
  padding:3px 10px; border-radius:8px; vertical-align:middle; letter-spacing:.03em}
.pag-sub{color:var(--muted); margin:0; font-size:15px}
.pag{display:flex; align-items:center; justify-content:center; gap:14px; padding:32px 0}
.pag-info{font-size:14px; color:var(--muted)}
.vazio{padding:36px 0; color:var(--muted)}
.seo-txt{border-top:1px solid var(--line); margin-top:8px}
.seo-txt p{color:var(--muted); font-size:15px}
.cidades-lista{display:grid; grid-template-columns:1fr; gap:10px}
.cidade-item{display:flex; justify-content:space-between; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; font-weight:600; color:var(--ink-2); box-shadow:var(--sh-xs)}
.cidade-item:hover{border-color:var(--brand); color:var(--brand)}
.cidade-n{color:var(--muted); font-size:13px; font-weight:500}

/* Como funciona */
.comofunc{background:#fff; border-top:1px solid var(--line); padding:40px 0}
.passos{display:grid; grid-template-columns:1fr; gap:14px}
.passo{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.passo-n{width:44px; height:44px; border-radius:13px; background:var(--brand); color:#fff;
  font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:19px;
  box-shadow:0 6px 14px rgba(37,99,235,.28)}
.passo h3{font-size:16.5px; margin:0 0 5px} .passo p{margin:0; color:var(--muted); font-size:14px}

/* Auth */
.auth-wrap{padding:40px var(--gut) 24px; display:flex; justify-content:center}
.auth-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md);
  padding:30px 26px; width:100%; max-width:460px}
.auth-h1{font-size:25px; font-weight:800; margin:0 0 6px}
.auth-sub{color:var(--muted); margin:0 0 22px; font-size:15px}
.auth-form{display:flex; flex-direction:column; gap:15px}
.auth-form label{display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:700; color:var(--ink-2); min-width:0}
.auth-form input,.auth-form select,.auth-form textarea{font:inherit; font-size:16px; padding:13px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); color:var(--ink); width:100%; min-width:0; background:#fff}
.auth-form input:focus,.auth-form select:focus,.auth-form textarea:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.auth-row{display:grid; grid-template-columns:1fr; gap:15px}
.auth-btn{margin-top:8px; width:100%}
.auth-alt{text-align:center; margin:20px 0 0; font-size:14px; color:var(--muted)}
.auth-erro{background:#FEF2F2; border:1px solid #FBC9C0; color:#B42318; padding:12px 14px; border-radius:var(--r-sm); font-size:14px; margin-bottom:18px}

/* Legais */
.legal{padding:32px var(--gut) 12px; max-width:800px; margin:0 auto}
.legal h1{font-size:28px; font-weight:800; margin:0 0 4px}
.legal h2{font-size:18px; margin:30px 0 8px} .legal h3{font-size:15px; margin:16px 0 6px}
.legal p,.legal li{color:var(--ink-2); font-size:15px; line-height:1.75}
.legal ul{padding-left:20px}
.legal-data{color:var(--muted); font-size:13px; margin:0 0 22px}
.legal-links{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:14px}
.ok-box{background:#ECFDF3; border:1px solid #ABEFC6; color:#067647; border-radius:var(--r); padding:18px; font-size:15px}

/* Footer */
.ft{background:var(--ink); color:#94A3B8; padding:40px 0 34px; margin-top:48px}
.ft-logo{font-weight:800; font-size:21px; color:#fff; letter-spacing:-.02em}
.ft-logo span{color:#5B8DEF}
.ft-txt{margin:10px 0 6px; font-size:14px; max-width:42ch}
.ft-links{display:flex; flex-wrap:wrap; gap:10px 22px; margin:18px 0 16px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08)}
.ft-links a{color:#CBD5E1; font-size:13.5px} .ft-links a:hover{color:#fff}
.ft-mini{font-size:12px; color:#64748B}

/* Cookies */
.cookie-bar{position:fixed; left:12px; right:12px; bottom:12px; z-index:60; background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-lg); border-radius:var(--r); padding:16px 18px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:space-between; font-size:13.5px; color:var(--ink-2)}
.cookie-bar[hidden]{display:none}
.cookie-bar .btn{height:44px; padding:0 20px}

/* ===== Tablet / desktop ===== */
@media(min-width:560px){ .auth-row{grid-template-columns:1fr 1fr} }
@media(min-width:640px){
  :root{--gut:24px}
  .nav-oi{display:inline}
  .hero{padding:64px 0 118px}
  .hero-h1{font-size:46px} .hero-sub{font-size:18px}
  .busca-hero{margin-top:-64px}
  .busca{grid-template-columns:1fr 1fr auto; align-items:end; padding:20px}
  .busca-btn{width:auto}
  .busca-inline{grid-template-columns:1fr 1fr auto}
  .grid-estados{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:repeat(3,1fr)}
  .cidades-lista{grid-template-columns:repeat(2,1fr)}
  .cookie-bar{left:auto; right:24px; bottom:24px; max-width:430px}
}
@media(min-width:980px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .grid-estados{grid-template-columns:repeat(4,1fr)}
  .cidades-lista{grid-template-columns:repeat(3,1fr)}
  .hero-h1{font-size:52px}
}