/*
Theme Name: Dockway
Theme URI: https://dockway.com.br
Author: Dockway
Description: Tema institucional de página única para a Dockway — "o caminho até o seu cliente". Presença digital, agendamento, automação de WhatsApp e gestão para profissionais liberais e pequenos negócios, em português e espanhol.
Version: 3.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dockway
*/

:root{
  --ink-900:#0A1522;
  --ink-850:#0D1C2A;
  --ink-800:#132538;
  --ink-700:#1C3549;
  --line:rgba(234,241,246,0.10);
  --line-strong:rgba(234,241,246,0.20);
  --text:#EAF1F6;
  --text-soft:#96ABBE;
  --text-faint:#5C7086;
  --amber:#F2A93C;
  --amber-bright:#F9C877;
  --amber-soft:rgba(242,169,60,0.12);
  --amber-line:rgba(242,169,60,0.38);
  --teal:#54D6B8;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,canvas{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;font-weight:700;letter-spacing:-0.01em;}
em{font-style:italic;color:var(--amber-bright);}
.eyebrow{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--amber);display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--amber-line);}
section{padding:108px 0;position:relative;}
@media (max-width:760px){ section{padding:72px 0;} }
::selection{background:var(--amber);color:var(--ink-900);}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;} }

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 0;transition:background .3s ease, padding .3s ease, border-color .3s ease;border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(10,21,34,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px 0;border-color:var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--text);}
.brand svg{flex:none;}
.navcluster{display:flex;align-items:center;gap:14px;}
.langsw{display:flex;border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;flex:none;}
.langbtn{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.05em;padding:6px 12px;background:transparent;color:var(--text-faint);border:none;cursor:pointer;transition:background .2s,color .2s;}
.langbtn.active{background:var(--amber-soft);color:var(--amber-bright);}
.navlinks{display:flex;align-items:center;gap:32px;font-size:0.92rem;color:var(--text-soft);}
.navlinks a{transition:color .2s;}
.navlinks a:hover{color:var(--amber-bright);}
.btn{font-family:var(--font-body);font-weight:600;font-size:0.92rem;padding:12px 22px;border-radius:3px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid transparent;background:none;appearance:none;-webkit-appearance:none;transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;}
.btn-primary{background:var(--amber);color:var(--ink-900);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(242,169,60,0.55);}
.btn-ghost{border-color:var(--line-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--amber-line);color:var(--amber-bright);}
.menu-toggle{display:none;background:none;border:none;color:var(--text);width:40px;height:40px;cursor:pointer;}
@media (max-width:900px){
  .navlinks{
    position:fixed;
    top:64px; left:0; right:0; bottom:0;
    width:100%; height:calc(100% - 64px);
    z-index:60;
    background:#0A1522;
    background:var(--ink-900);
    flex-direction:column;
    justify-content:center;
    font-size:1.3rem;
    gap:28px;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s, transform .25s, visibility .25s;
  }
  .navlinks.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
  .navlinks .btn{margin-top:12px;}
  .menu-toggle{display:block;}
  /* evita o menu abrir sobre um header com desfoque — combinação que
     trava a renderização em alguns navegadores de celular */
  .nav.menu-open{background:var(--ink-900);backdrop-filter:none;-webkit-backdrop-filter:none;}
}

/* ---------- hero (full-bleed) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 0 88px;}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg canvas{width:100%;height:100%;}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,
    rgba(6,13,21,0.97) 0%,
    rgba(7,15,24,0.88) 18%,
    rgba(8,17,27,0.6) 40%,
    rgba(10,21,34,0.22) 62%,
    rgba(10,21,34,0.04) 82%,
    rgba(10,21,34,0) 100%);
}
.hero-content{position:relative;z-index:1;width:100%;}
.hero-kicker{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--amber-bright);margin-bottom:22px;display:block;text-shadow:0 2px 18px rgba(0,0,0,0.7);}
.hero h1{font-size:clamp(2.3rem,7.4vw,6.4rem);line-height:0.98;max-width:15ch;text-shadow:0 4px 32px rgba(0,0,0,0.65);}
.hero h1 i{font-style:italic;font-weight:400;color:var(--amber-bright);}
.hero p.lede{font-size:1.15rem;color:var(--text-soft);max-width:46ch;margin:28px 0 40px;text-shadow:0 2px 16px rgba(0,0,0,0.75);}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.scrollcue{position:absolute;right:28px;bottom:28px;z-index:1;font-family:var(--font-mono);font-size:0.7rem;color:var(--text-faint);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;letter-spacing:0.08em;}
.scrollcue .ln{width:1px;height:46px;background:var(--line-strong);display:block;}
@media (max-width:700px){ .scrollcue{display:none;} }
@media (max-width:480px){
  .hero{padding-bottom:52px;}
  .hero h1{font-size:clamp(2rem,9vw,3rem);max-width:12ch;}
  .hero p.lede{margin:16px 0 26px;font-size:1rem;}
  .hero-kicker{margin-bottom:14px;font-size:0.68rem;}
}

/* ---------- diagonal seam ---------- */
.seam{height:64px;margin-top:-64px;position:relative;z-index:2;background:var(--ink-900);clip-path:polygon(0 100%,100% 0,100% 100%);}
.seam-alt{height:64px;background:var(--ink-850);clip-path:polygon(0 0,100% 100%,0 100%);margin-bottom:-1px;}

/* ---------- section heads ---------- */
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-top:14px;}
.section-head p{color:var(--text-soft);font-size:1.05rem;margin-top:16px;max-width:56ch;}

/* ---------- THE PATH (scrollytelling) ---------- */
#caminho{height:440vh;padding:0;}
#caminho.no-scrub{height:auto;padding:96px 0;}
.path-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
#caminho.no-scrub .path-sticky{position:static;height:auto;}
.path-head{margin-bottom:64px;}
.path-head .eyebrow{margin-bottom:16px;}
.path-head h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:14ch;}
.path-rail{position:relative;padding:0 28px;}
.path-track{position:relative;height:2px;background:var(--line-strong);margin:0 0 46px;border-radius:2px;overflow:hidden;}
.path-track::after{content:"";position:absolute;inset:0;transform-origin:left center;background:var(--amber);transform:scaleX(var(--progress,0));transition:transform .05s linear;}
#caminho.no-scrub .path-track::after{transform:scaleX(1);}
.path-stops{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
#caminho.no-scrub .path-stops{grid-template-columns:1fr;gap:0;}
.path-stop{position:relative;padding-top:26px;transition:opacity .3s;}
.path-stop::before{content:"";position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--ink-800);border:2px solid var(--line-strong);transition:background .3s,border-color .3s,box-shadow .3s;}
.path-stop.active::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 6px var(--amber-soft);}
.path-stop svg{color:var(--amber);opacity:.32;transition:opacity .35s;margin-bottom:14px;}
.path-stop.active svg{opacity:1;}
.path-stop .k{font-family:var(--font-mono);font-size:0.68rem;color:var(--text-faint);letter-spacing:0.08em;text-transform:uppercase;}
.path-stop h3{font-size:1.15rem;margin:8px 0 6px;color:var(--text-faint);transition:color .3s;}
.path-stop.active h3{color:var(--text);}
.path-stop p{font-size:0.86rem;color:var(--text-faint);margin:0;max-width:22ch;opacity:0;transform:translateY(6px);transition:opacity .3s, transform .3s;}
.path-stop.active p{opacity:1;transform:translateY(0);color:var(--text-soft);}
#caminho.no-scrub .path-stop{padding:20px 0 20px 30px;border-left:2px solid var(--amber-line);}
#caminho.no-scrub .path-stop::before{left:-7px;top:24px;}
#caminho.no-scrub .path-stop p{opacity:1;transform:none;color:var(--text-soft);max-width:52ch;}
#caminho.no-scrub .path-stop h3{color:var(--text);}
@media (max-width:820px){
  #caminho{height:auto;padding:88px 0;}
  .path-sticky{position:static;height:auto;overflow:visible;}
  .path-rail{padding:0;}
  .path-track{display:none;}
  .path-stops{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px;
    row-gap:24px;
    position:relative;
    padding:4px 0;
  }
  .path-stops::after{
    content:"";
    position:absolute;
    left:50%; top:0; bottom:0;
    width:2px;
    background:var(--line-strong);
    transform:translateX(-50%);
  }
  .path-stop{
    grid-column:2;
    padding:14px 14px;
    border:1px solid var(--line-strong);
    border-radius:6px;
    background:var(--ink-850);
    text-align:left;
    transition:opacity .3s, border-color .3s;
  }
  .path-stop:nth-child(even){ grid-column:1; text-align:right; }
  .path-stop:nth-child(1){ grid-row:1; }
  .path-stop:nth-child(2){ grid-row:2; }
  .path-stop:nth-child(3){ grid-row:3; }
  .path-stop:nth-child(4){ grid-row:4; }
  .path-stop:nth-child(5){ grid-row:5; }
  .path-stop.active{border-color:var(--amber-line);}
  .path-stop::before{top:22px;left:auto;right:-21px;width:10px;height:10px;}
  .path-stop:nth-child(even)::before{right:auto;left:-21px;}
  .path-stop svg{width:18px;height:18px;margin-bottom:8px;}
  .path-stop .k{font-size:0.6rem;}
  .path-stop h3{font-size:0.98rem;margin:6px 0 5px;}
  .path-stop p{font-size:0.78rem;max-width:none;line-height:1.45;}
}
@media (max-width:400px){
  .path-stops{column-gap:14px;}
  .path-stop{padding:12px 10px;}
  .path-stop::before{right:-15px;}
  .path-stop:nth-child(even)::before{left:-15px;}
}

/* ---------- niches ---------- */
.niches{background:var(--ink-850);}
.tabbar{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap;}
.tabbtn{font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.04em;padding:11px 20px;border-radius:3px;border:1px solid var(--line-strong);background:transparent;color:var(--text-soft);cursor:pointer;transition:all .2s;}
.tabbtn.active{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber-bright);}
.tabpanel{display:none;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.tabpanel.active{display:grid;}
@media (max-width:820px){ .tabpanel{grid-template-columns:1fr;} }
.tabpanel .tag{font-family:var(--font-mono);font-size:0.72rem;color:var(--amber);letter-spacing:0.1em;text-transform:uppercase;}
.tabpanel h3{font-size:2rem;margin:14px 0 18px;}
.tabpanel p{color:var(--text-soft);font-size:1.02rem;max-width:48ch;}
.tabpanel ul{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.tabpanel li{display:flex;gap:12px;font-size:0.94rem;color:var(--text);align-items:flex-start;}
.tabpanel li svg{flex:none;margin-top:3px;color:var(--teal);}
.tab-visual{border:1px solid var(--line);border-radius:6px;background:radial-gradient(ellipse at center,var(--ink-800) 0%,var(--ink-850) 100%);padding:36px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
.tab-visual svg{color:var(--amber);filter:drop-shadow(0 0 26px rgba(242,169,60,0.28));}
.tab-visual .cap{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.08em;color:var(--text-soft);padding:7px 16px;border:1px solid var(--line-strong);border-radius:20px;}

/* ---------- how it works: horizontal scroll-snap ---------- */
.how-scroller{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 28px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;}
.how-scroller::-webkit-scrollbar{height:6px;}
.how-scroller::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
.how-card{scroll-snap-align:start;flex:0 0 auto;width:min(78vw,320px);border:1px solid var(--line-strong);border-radius:6px;background:var(--ink-850);padding:28px;}
.how-card .day{font-family:var(--font-mono);font-size:0.72rem;color:var(--amber);letter-spacing:0.08em;text-transform:uppercase;}
.how-card h4{font-size:1.1rem;font-weight:600;font-family:var(--font-body);margin:14px 0 8px;}
.how-card p{color:var(--text-soft);font-size:0.92rem;margin:0;}
.how-hint{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-faint);display:flex;align-items:center;gap:8px;}

/* ---------- pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){ .pricing-grid{grid-template-columns:1fr;} }
.plan{border:1px solid var(--line-strong);border-radius:6px;padding:34px 28px;background:var(--ink-850);display:flex;flex-direction:column;transition:border-color .25s, transform .25s;}
.plan:hover{transform:translateY(-4px);}
.plan.featured{border-color:var(--amber-line);background:linear-gradient(180deg,rgba(242,169,60,0.06),transparent 40%),var(--ink-850);position:relative;}
.plan.featured::before{content:attr(data-badge);position:absolute;top:-12px;right:24px;background:var(--amber);color:var(--ink-900);font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.08em;padding:4px 10px;border-radius:3px;}
.plan h3{font-size:1.3rem;margin-bottom:6px;}
.plan .setup{color:var(--text-faint);font-family:var(--font-mono);font-size:0.82rem;margin-bottom:18px;}
.plan .price{font-family:var(--font-display);font-size:2.4rem;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:2px;}
.plan .price span{font-family:var(--font-body);font-size:0.95rem;color:var(--text-faint);font-weight:400;}
.plan ul{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-direction:column;gap:12px;flex:1;}
.plan li{display:flex;gap:10px;font-size:0.9rem;color:var(--text-soft);align-items:flex-start;}
.plan li svg{flex:none;color:var(--teal);margin-top:3px;}
.pricing-note{font-size:0.82rem;color:var(--text-faint);margin-top:18px;}
@media (max-width:480px){ .plan{padding:28px 22px;} }

/* ---------- security: terminal scorecard ---------- */
.security{background:var(--ink-850);}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media (max-width:900px){ .sec-grid{grid-template-columns:1fr;} }
.terminal{border:1px solid var(--line-strong);border-radius:8px;background:#081119;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--ink-800);border-bottom:1px solid var(--line);}
.terminal-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-strong);display:block;}
.terminal-bar span{margin-left:8px;font-family:var(--font-mono);font-size:0.72rem;color:var(--text-faint);}
.terminal-body{padding:26px 24px;font-family:var(--font-mono);font-size:0.86rem;line-height:2;}
.terminal-body .cmd{color:var(--text-soft);}
.terminal-body .cmd::before{content:"$ ";color:var(--amber);}
.term-line{display:flex;justify-content:space-between;gap:16px;color:var(--text-soft);}
.term-line .ok{color:var(--teal);}
.term-line .val{color:var(--text-faint);}
.sec-copy .eyebrow{margin-bottom:16px;}
.sec-copy h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:18px;}
.sec-copy p{color:var(--text-soft);font-size:1.05rem;max-width:48ch;margin-bottom:14px;}
@media (max-width:480px){ .terminal-body{padding:20px 16px;font-size:0.76rem;} .term-line{gap:8px;} }

/* ---------- final cta ---------- */
.finalcta{text-align:center;padding-bottom:140px;}
.finalcta h2{font-size:clamp(2.2rem,4.4vw,3.4rem);max-width:16ch;margin:0 auto 20px;}
.finalcta p{color:var(--text-soft);font-size:1.1rem;margin-bottom:40px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 40px;}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px;}
.foot-col h5{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px;}
.foot-col a{display:block;color:var(--text-soft);font-size:0.9rem;margin-bottom:10px;transition:color .2s;}
.foot-col a:hover{color:var(--amber-bright);}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;border-top:1px solid var(--line);font-size:0.82rem;color:var(--text-faint);font-family:var(--font-mono);}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------- cookie consent ---------- */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink-800);border-top:1px solid var(--line-strong);box-shadow:0 -20px 40px -20px rgba(0,0,0,0.5);}
.cookiebar[hidden]{display:none;}
.cookiebar-inner{padding:18px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.cookiebar-inner p{margin:0;font-size:0.86rem;color:var(--text-soft);flex:1 1 420px;}
.cookiebar-inner a{color:var(--amber-bright);text-decoration:underline;}
.cookiebar-actions{display:flex;gap:10px;flex:none;flex-wrap:wrap;}
.cookiebar-inner .btn{flex:none;padding:10px 20px;font-size:0.84rem;white-space:nowrap;}
@media (max-width:600px){ .cookiebar-inner{padding:16px 20px;} .cookiebar-actions{width:100%;} .cookiebar-actions .btn{flex:1;} }