/* =========================================================================
   Guidelyze · Plano · Mapa interno do funil.
   Tokens vêm de ../assets/css/tokens/livro.css (cream + sage + Fraunces + DM Sans)
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100dvh;
  background:
    radial-gradient(ellipse at 50% 0%, var(--paper-warm), var(--paper) 60%);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--text-md);line-height:var(--lead-relaxed);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* ===== Header ===== */
.hdr{
  max-width:1280px;margin:0 auto;padding:var(--space-10) var(--pad-x) var(--space-8);
  display:flex;align-items:flex-start;gap:var(--space-6);
}
.hdr__logo{height:36px;width:auto;margin-top:6px;flex-shrink:0}
.hdr__txt{flex:1}
.hdr__eyebrow{
  font-size:var(--text-xs);letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--accent-deep);font-weight:600;margin:0 0 var(--space-2);
}
.hdr__title{
  font-family:var(--font-display);font-weight:400;font-size:var(--text-4xl);
  line-height:var(--lead-tight);letter-spacing:var(--track-tight);margin:0 0 var(--space-2);
}
.hdr__sub{margin:0;color:var(--fg-soft);max-width:60ch}

@media (max-width:680px){
  .hdr{flex-direction:column;gap:var(--space-3)}
}

/* ===== Trilho (rail) — wrapper do fluxo horizontal ===== */
.rail{
  position:relative;
  padding:var(--space-6) var(--pad-x) var(--space-12);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

/* ===== Flow horizontal (LP-stack → merger → 4 etapas em linha) ===== */
.flow{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:var(--space-4);
  min-width:max-content;
}

/* ===== Coluna esquerda: 3 LPs empilhadas ===== */
.lp-stack{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-3);
  flex-shrink:0;
}
.step--lp{
  width:240px;min-height:auto !important;padding:var(--space-5) var(--space-4) var(--space-4) !important;
}
.step--lp .step__ico{font-size:26px;margin-bottom:var(--space-2)}
.step--lp .step__name{font-size:var(--text-lg);margin-bottom:var(--space-1)}
.step--lp .step__desc{font-size:var(--text-xs);margin-bottom:var(--space-3)}

/* ===== Par pré-LP: Materiais (mídias/copys) lado a lado com a LP ===== */
.lp-pair{
  list-style:none;
  display:flex;align-items:stretch;gap:var(--space-2);
}

/* Card "Materiais" (bastidores) — fica à esquerda da LP, mais upstream no funil */
.prep-card{
  width:150px;flex-shrink:0;
  background:var(--paper);
  border:1.5px dashed var(--line);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.prep-card:hover{border-color:var(--accent-soft);background:var(--bg-alt)}
.prep-card__label{
  font-size:10px;letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;margin:0;
}
.prep-card__hint{
  font-size:11px;line-height:var(--lead-snug);color:var(--fg-softer);
  margin:0;font-style:italic;
}
.prep-card__actions{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-1)}
.prep-card__btn{
  display:block;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:var(--track-wide);
  text-transform:uppercase;text-decoration:none;
  padding:7px 10px;border-radius:var(--radius-pill);
  background:var(--paper);border:1px solid var(--line);color:var(--fg-soft);
  transition:all var(--dur-fast);
}
.prep-card__btn:hover{
  background:var(--accent);color:var(--paper);border-color:var(--accent);
  box-shadow:0 3px 10px rgba(92,143,122,.22);
}

/* Cards "em construção" — desbotados com borda dashed */
.step--soon{opacity:.68;border-style:dashed !important}
.step__open--soon{
  display:inline-block;
  font-size:var(--text-xs);font-weight:600;
  color:var(--fg-softer);
  border:1.5px dashed var(--line);
  padding:6px 12px;border-radius:var(--radius-pill);
  align-self:flex-start;cursor:not-allowed;
  letter-spacing:var(--track-wide);text-transform:uppercase;
}

/* ===== Merger: 3 linhas convergem em 1 seta ===== */
.merger{
  width:110px;height:auto;
  color:var(--accent);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.merger svg{width:110px;height:280px;display:block}

/* ===== Card de etapa ===== */
.step{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-xl);
  padding:var(--space-6) var(--space-5) var(--space-5);
  width:260px;min-height:240px;flex-shrink:0;
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-soft);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.step:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
}

.step__num{
  position:absolute;top:-12px;left:18px;
  background:var(--accent);color:var(--paper);
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--text-base);
  box-shadow:0 4px 12px rgba(92,143,122,0.32);
}

.step__ico{
  font-size:34px;line-height:1;margin-bottom:var(--space-3);
  display:block;
}

.step__name{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-xl);line-height:var(--lead-snug);
  margin:0 0 var(--space-2);color:var(--fg);
}

.step__desc{
  font-size:var(--text-sm);color:var(--fg-soft);
  margin:0 0 var(--space-4);flex:1;
}
.step__desc code{
  font-family:ui-monospace,Menlo,monospace;font-size:11px;
  background:var(--bg-alt);padding:1px 6px;border-radius:6px;
}

.step__open{
  display:inline-block;
  font-size:var(--text-sm);font-weight:600;color:var(--accent-deep);
  text-decoration:none;
  border:1.5px solid var(--accent-soft);
  padding:8px 14px;border-radius:var(--radius-pill);
  align-self:flex-start;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.step__open:hover{
  background:var(--accent);color:var(--paper);border-color:var(--accent);
}

.step__tag{
  position:absolute;top:14px;right:14px;
  font-size:10px;text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--fg-softer);font-weight:600;
}

/* Variantes de etapa (cor de borda esquerda sutil) */
.step[data-stage="branding"] {border-left:3px solid #8A6FB0}
.step[data-stage="aquisicao"]{border-left:3px solid #C9A87C}
.step[data-stage="venda"]    {border-left:3px solid #5C8F7A}
.step[data-stage="acesso"]   {border-left:3px solid #A8C4B5}
.step[data-stage="produto"]  {border-left:3px solid var(--accent-deep)}

/* Step Brand — destaque visual de "meta-layer" */
.step--brand{
  background:linear-gradient(155deg, var(--paper-warm) 0%, #EFE4F0 100%);
  border-color:#D4C2DE;
}
.step--brand .step__num{background:#8A6FB0;box-shadow:0 4px 12px rgba(138,111,176,.32)}
.step--brand .step__open{color:#6E5395;border-color:#D4C2DE}
.step--brand .step__open:hover{background:#8A6FB0;border-color:#8A6FB0;color:var(--paper)}

/* Splitter: 1 → 3 linhas divergem do card Brand pras 3 LPs */
.splitter{
  width:110px;height:auto;flex-shrink:0;
  color:#8A6FB0;
  display:flex;align-items:center;justify-content:center;
}
.splitter svg{width:110px;height:280px;display:block}

.step--final{
  background:linear-gradient(155deg, var(--paper) 0%, var(--paper-warm) 100%);
  border-left:3px solid var(--accent-deep);
}

/* ===== Setas entre cards ===== */
.arrow{
  display:flex;align-items:center;flex-shrink:0;
  color:var(--accent);width:60px;
}
.arrow svg{width:60px;height:24px}

/* ===== Step-pair: Produto em cima, Dashboard embaixo (rola junto no rail) ===== */
.step-pair{
  display:flex;flex-direction:column;align-items:stretch;
  gap:var(--space-2);flex-shrink:0;
}
.step-pair .step{width:260px}

.pair-link{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:var(--space-2) 0;
  color:var(--accent);
}
.pair-link svg{width:14px;height:46px;display:block}
.pair-link__label{
  font-family:ui-monospace,Menlo,monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--fg-softer);
}

.step--admin{
  background:linear-gradient(155deg, #1C1C1A 0%, #2A2A26 100%);
  color:var(--paper);
  border-color:transparent;
  border-left:3px solid var(--sage-soft);
}
.step--admin .step__name,
.step--admin .step__desc{color:var(--paper)}
.step--admin .step__desc{opacity:.78}
.step--admin .step__num{background:var(--sage-soft);color:#1C1C1A}
.step--admin .step__open{
  border-color:var(--sage-soft);color:var(--sage-soft);
}
.step--admin .step__open:hover{background:var(--sage-soft);color:#1C1C1A}
.step--admin .step__tag{color:rgba(250,246,236,0.55)}

/* ===== Footer ===== */
.ftr{
  max-width:1280px;margin:0 auto;
  padding:var(--space-8) var(--pad-x) var(--space-12);
  border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  font-size:var(--text-sm);color:var(--fg-softer);
}
.ftr p{margin:0}
.ftr__legend{display:flex;gap:var(--space-4);flex-wrap:wrap}
.dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:4px;vertical-align:middle;
}
.dot--branding {background:#8A6FB0}
.dot--aquisicao{background:#C9A87C}
.dot--venda    {background:var(--accent)}
.dot--acesso   {background:#A8C4B5}
.dot--produto  {background:var(--accent-deep)}
.dot--admin    {background:#1C1C1A}

/* ===== Mobile (empilhamento vertical) ===== */
@media (max-width:760px){
  .rail{overflow-x:visible;padding-bottom:var(--space-6)}
  .flow{flex-direction:column;align-items:stretch;min-width:auto}
  .step{width:100%}
  .step--lp{width:100%}
  .lp-stack{width:100%}
  .merger{display:none}
  .splitter{display:none}
  .arrow{width:100%;justify-content:center;transform:rotate(90deg);height:30px}
  .step-pair{width:100%}
  .step-pair .step{width:100%}
  /* Pair vira coluna: prep card em cima, LP card embaixo, ambos full width */
  .lp-pair{flex-direction:column}
  .prep-card{
    width:100%;flex-direction:row;align-items:center;justify-content:space-between;
    gap:var(--space-3);padding:var(--space-3) var(--space-4);
  }
  .prep-card__hint{display:none}
  .prep-card__actions{flex-direction:row;margin-top:0}
  .prep-card__btn{padding:6px 14px}
}

/* =========================================================================
   Zoom + ajuste à altura do viewport
   ========================================================================= */

/* Container do rail responde à altura do viewport (sai do flow padrão pra
   ter scroll horizontal+vertical próprio quando o zoom passa do viewport). */
html, body{height:100%;overflow:auto}
body.is-zoom-mode .rail{
  max-height:calc(100dvh - 180px);
  overflow:auto;
  padding-bottom:var(--space-4);
}
body.is-zoom-mode .flow{
  transform-origin:top left;
  transition:transform 0.18s ease;
  will-change:transform;
}

/* Painel flutuante de controles — bottom-right, sempre acessível */
.zoom-ctl{
  position:fixed;bottom:20px;right:20px;z-index:1000;
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  background:rgba(250,246,236,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);border-radius:var(--radius-pill);
  box-shadow:0 8px 24px rgba(28,28,26,.18);
  font-family:var(--font-mono);font-size:11px;
}
.zoom-ctl__btn{
  width:28px;height:28px;border-radius:50%;
  background:transparent;border:1px solid transparent;
  font-size:14px;font-weight:700;color:var(--fg-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast,.18s);
}
.zoom-ctl__btn:hover{background:var(--paper-deep);border-color:var(--line);color:var(--fg)}
.zoom-ctl__label{
  min-width:42px;text-align:center;font-weight:700;color:var(--fg);
  padding:0 4px;
}
.zoom-ctl__fit{
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius-pill);
  background:transparent;border:1px solid var(--line);color:var(--fg-soft);
  cursor:pointer;font-family:var(--font-mono);font-weight:700;
}
.zoom-ctl__fit:hover{background:var(--paper-deep);color:var(--fg);border-color:var(--fg-softer)}

@media (max-width:680px){
  .zoom-ctl{bottom:12px;right:12px;padding:5px 8px}
  .zoom-ctl__btn{width:26px;height:26px}
  .zoom-ctl__label{min-width:38px;font-size:10px}
}