/* Páginas de tutorial do GeoMappa Studio.
   Herda a paleta e a tipografia do site (assets/style.css) — os tokens estão
   repetidos aqui de propósito para a página abrir sozinha, sem depender do CSS
   da home, que é grande e cheio de coisa que tutorial não usa. */

:root{
  --laranja:#FF6700;
  --laranja-claro:#FF9142;
  --laranja-escuro:#C2410C;
  --bg-escuro:#0a0a0a;
  --papel:#ffffff;
  --papel-alt:#f7f7f8;
  --linha:#e6e6e6;
  --texto:#111111;
  --texto-muted:#555555;
  --texto-claro:#ffffff;
  --sombra:0 20px 50px rgba(0,0,0,.12);
  --raio:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.container{width:min(1120px,92vw);margin:0 auto}
.container.estreito{width:min(820px,92vw)}
img{max-width:100%;display:block}
code{
  font-family:'Consolas','SF Mono',monospace;font-size:.9em;
  background:#eceef0;padding:2px 7px;border-radius:5px;color:#213
}

/* ---------- topo ---------- */
.topo{
  background:var(--bg-escuro);color:var(--texto-claro);
  padding:10px 0;position:sticky;top:0;z-index:20;
}
.topo .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:700;font-size:1.06rem}
/* logo oficial inteira, nunca recortada */
.marca img{height:50px;width:auto;display:block}
.marca .sub{color:var(--laranja);font-weight:800}
.voltar{
  color:#cfcfcf;text-decoration:none;font-size:.88rem;font-weight:600;
  border:1px solid #333;padding:8px 15px;border-radius:999px;transition:.18s;
}
.voltar:hover{color:#fff;border-color:var(--laranja)}

/* ---------- capa ---------- */
.capa{
  background:linear-gradient(180deg,var(--bg-escuro) 0%,#161719 100%);
  color:var(--texto-claro);padding:22px 0 34px;
}
.trilha{
  margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--laranja);font-weight:700
}
.capa h1{
  margin:0;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.06;font-weight:800;
  letter-spacing:-.02em;text-wrap:balance;
}
.capa h1 span{color:var(--laranja)}
.chamada{margin:13px 0 0;font-size:1.04rem;color:#c9cbcd;max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{
  font-size:.82rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  padding:7px 14px;border-radius:999px;color:#dcdee0
}
.chip b{color:#fff}

/* ---------- seções ---------- */
.secao{padding:64px 0}
.secao.alt{background:var(--papel-alt);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.secao h2{
  margin:0 0 26px;font-size:clamp(1.5rem,3.4vw,2.05rem);font-weight:800;
  letter-spacing:-.015em;text-wrap:balance
}
.sub-secao{margin:-14px 0 30px;color:var(--texto-muted);font-size:1.02rem}

/* ---------- vídeo ---------- */
/* O player LARGO nao e capricho: o YouTube escolhe a qualidade pela ALTURA do
   player em pixels fisicos (a menor faixa que cobre o player). Em 820x461 ele
   servia 480p; passando de 1280 de largura (720px de altura) ele vai pra 720p,
   e em tela com escala do Windows (125%+) chega a 1080p. Nao existe parametro
   que force a qualidade - `vq=` e ignorado e setPlaybackQuality foi desativada. */
/* 1600 e não 1280: o YouTube escolhe a resolução pelo tamanho do player, e em 1280x720 ele
   entrega exatamente 720p — ruim para gravação de tela, que é só texto fino. Acima de 1280 ele
   sobe para 1080p, que já usa codec moderno (medido na página do GEOAI, 23/09/2026). */
.container.video-largo{width:min(1600px,94vw);margin-left:auto;margin-right:auto}
.video{
  position:relative;padding-top:56.25%;border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--sombra);background:#000
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* pagina que foi ao ar antes do video subir pro YouTube: o bloco fica escondido ate o ID
   real entrar no data-video (senao o play abriria "video indisponivel") */
#video:has(.video[data-video="__VIDEO_ID__"]){display:none}

/* capa do video (antes de carregar o player) */
.video-capa{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:#000;cursor:pointer;display:block;overflow:hidden
}
.video-capa img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease,filter .25s ease
}
.video-capa:hover img,.video-capa:focus-visible img{transform:scale(1.025);filter:brightness(1.06)}
.video-capa:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;
  background:var(--laranja);box-shadow:0 6px 26px rgba(0,0,0,.45);
  transition:transform .22s ease,background .22s ease;pointer-events:none
}
/* triangulo do play, desenhado em CSS (nada de imagem extra) */
.video-play::after{
  content:"";position:absolute;top:50%;left:calc(50% + 3px);transform:translate(-50%,-50%);
  border-style:solid;border-width:14px 0 14px 23px;
  border-color:transparent transparent transparent #fff
}
.video-capa:hover .video-play,.video-capa:focus-visible .video-play{
  transform:translate(-50%,-50%) scale(1.09);background:var(--laranja-claro)
}
@media (max-width:520px){ .video-play{width:60px;height:60px} }
.nota{margin:16px 0 0;color:var(--texto-muted);font-size:.95rem;text-align:center}

/* ---------- listas e avisos ---------- */
.lista{margin:16px 0 0;padding-left:22px}
.lista li{margin-bottom:9px}
.aviso{
  margin-top:26px;background:#fff;border:1px solid var(--linha);
  border-left:5px solid var(--laranja);border-radius:10px;padding:18px 22px;
}

/* ---------- passos ---------- */
.passo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:38px;
  align-items:center;padding:34px 0;border-bottom:1px solid var(--linha)
}
.passo:last-child{border-bottom:0}
.passo-txt p{margin:12px 0 0}
.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--laranja);color:#fff;
  font-weight:800;font-size:1.15rem;margin-bottom:14px
}
.passo h3{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.passo figure{margin:0;border-radius:12px;overflow:hidden;box-shadow:var(--sombra);border:1px solid var(--linha)}

/* ---------- print do passo ----------
   A imagem do passo e o RECORTE da janela do plugin, nao o print da tela
   inteira do Civil 3D: na largura da coluna, a janela ocupava 56% e ficava
   pequena demais pra ler. O print completo continua a um clique. */
.passo figure.tela{border:0;box-shadow:none;border-radius:0;background:none}
.tela-btn{
  display:block;width:100%;padding:0;border:1px solid var(--linha);
  border-radius:12px;overflow:hidden;background:var(--papel-alt);
  cursor:zoom-in;position:relative;box-shadow:var(--sombra);
  transition:box-shadow .2s ease,border-color .2s ease
}
.tela-btn img{width:100%;height:auto;display:block}
.tela-btn:hover{border-color:var(--laranja);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.tela-btn:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
.tela-lupa{
  position:absolute;right:10px;bottom:10px;
  background:rgba(17,17,17,.82);color:#fff;font-size:.74rem;font-weight:600;
  padding:6px 12px;border-radius:999px;letter-spacing:.01em;
  opacity:0;transform:translateY(5px);transition:.2s ease;pointer-events:none;
  display:flex;align-items:center;gap:6px;backdrop-filter:blur(3px)
}
.tela-lupa::before{
  content:"";width:12px;height:12px;border:2px solid #fff;border-radius:50%;
  box-shadow:5px 5px 0 -1px #fff;transform:rotate(-45deg) translate(-1px,-1px)
}
.tela-btn:hover .tela-lupa,.tela-btn:focus-visible .tela-lupa{opacity:1;transform:translateY(0)}
/* em telas de toque nao existe hover: o aviso fica sempre visivel */
@media (hover:none){ .tela-lupa{opacity:.92;transform:none} }

/* ---------- tela cheia ---------- */
.cheia{
  position:fixed;inset:0;z-index:60;background:rgba(8,8,8,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:26px;cursor:zoom-out
}
.cheia[hidden]{display:none}
.cheia img{max-width:100%;max-height:82vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);cursor:default}
.cheia-legenda{margin:0;color:#b9bcbf;font-size:.86rem;text-align:center}
.cheia-fechar{
  position:absolute;top:16px;right:20px;width:44px;height:44px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:1.7rem;line-height:1;border-radius:50%;cursor:pointer;
  transition:.18s
}
.cheia-fechar:hover{background:var(--laranja);border-color:var(--laranja)}
.passo.destaque .num{background:var(--texto)}
.dica{color:var(--texto-muted);font-size:.94rem}
.atencao{
  background:#fff6ee;border:1px solid #ffd7b5;border-radius:10px;
  padding:14px 17px;margin-top:16px !important;font-size:.97rem
}

/* legenda de cores do mapa de qualidade */
.legenda{list-style:none;margin:16px 0 0;padding:0}
.legenda li{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;font-size:.97rem}
.bolinha{width:13px;height:13px;border-radius:50%;flex:0 0 auto;margin-top:6px}
.bolinha.verde{background:#22a06b}
.bolinha.ambar{background:#e8a317}
.bolinha.vermelha{background:#d64545}

/* ---------- parte técnica ---------- */
details{
  background:#fff;border:1px solid var(--linha);border-radius:12px;
  padding:0;margin-bottom:12px;overflow:hidden
}
summary{
  cursor:pointer;padding:17px 22px;font-weight:700;font-size:1.02rem;
  list-style:none;position:relative;padding-right:52px;transition:.15s
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  color:var(--laranja);font-size:1.5rem;font-weight:700;line-height:1
}
details[open] summary::after{content:"–"}
summary:hover{background:var(--papel-alt)}
details > *:not(summary){margin-left:22px;margin-right:22px}
details > *:last-child{margin-bottom:20px}
details p:first-of-type{margin-top:0}

.tabela{width:100%;border-collapse:collapse;margin:16px 0}
.tabela th,.tabela td{padding:11px 14px;border-bottom:1px solid var(--linha);text-align:left}
.tabela th{font-weight:600;color:var(--texto-muted);width:52%}
.tabela td{font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- problemas ---------- */
.problema{
  background:var(--papel-alt);border:1px solid var(--linha);border-radius:12px;
  padding:20px 24px;margin-bottom:14px
}
.problema h3{margin:0 0 8px;font-size:1.08rem;font-weight:700}
.problema p{margin:0;color:var(--texto-muted)}

/* ---------- fecho ---------- */
.fecho{background:var(--bg-escuro);color:var(--texto-claro);padding:60px 0;text-align:center}
.fecho h2{margin:0 0 12px}
.fecho p{margin:0 auto 26px;color:#c2c4c6;max-width:56ch}
.btn{
  display:inline-block;background:var(--laranja);color:#fff;text-decoration:none;
  font-weight:700;padding:14px 30px;border-radius:999px;transition:.18s
}
.btn:hover{background:var(--laranja-escuro)}

/* ---------- rodapé ---------- */
.rodape{background:#000;color:#8c8f92;padding:24px 0;font-size:.87rem}
.rodape .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rodape a{color:#c9cbcd;text-decoration:none}
.rodape a:hover{color:var(--laranja)}

/* ---------- índice (tutoriais/index.html) ----------
   Um cartão por ferramenta, agrupado como no painel do plugin, pra quem chega
   pela lista reconhecer o grupo que já viu no Civil 3D. */
.grupo{margin-bottom:48px}
.grupo:last-child{margin-bottom:0}
.grupo h2{margin-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{
  display:flex;flex-direction:column;background:#fff;color:inherit;text-decoration:none;
  border:1px solid var(--linha);border-radius:14px;overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.card:hover,.card:focus-visible{border-color:var(--laranja);transform:translateY(-3px);box-shadow:var(--sombra)}
.card:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
.card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#111}
.card-txt{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;font-size:.9rem;line-height:1.5;color:var(--texto-muted)}
.card .dur{margin-top:auto;padding-top:6px;font-size:.78rem;font-weight:600;color:var(--laranja-escuro)}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .passo{grid-template-columns:1fr;gap:22px;padding:28px 0}
  .passo figure{order:-1}
  .secao{padding:46px 0}
  .capa{padding:18px 0 26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}