/* Página inicial: direção "Colour chapters". Cada capítulo é um campo de cor de ponta a ponta; a costura entre
   eles é a "outra dimensão" do slogan. Paleta e tipografia da marca (styles.css carrega a Manrope e o reset). */
:root{
  --f-dark:#090b0c;--f-step:#151a1b;--f-paper:#eeeee7;--f-lime:#d6ff62;--f-green:#18230f;--f-cyan:#b2dce4;
  --i-light:#f2f3ed;--i-dark:#10140c;--i-sub:#2c3b08;--mute-l:#a9b1a5;--mute-d:#454d3f;
  --m:clamp(20px,3.2vw,48px);--sec:clamp(96px,9vw,152px);--gap:clamp(14px,1.6vw,24px);--hd:72px;
  --t1:clamp(54px,10.4vw,168px);--t2:clamp(36px,5vw,80px);--t3:clamp(21px,2.3vw,34px);--t4:clamp(16px,1.2vw,19px);--t5:14px;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.76,0,.24,1);--ease-soft:cubic-bezier(.33,1,.68,1)
}
body.h{background:var(--f-dark);color:var(--i-light);font-size:var(--t4);line-height:1.55;letter-spacing:-.005em}
.h main{display:block}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.h :focus-visible{outline:3px solid currentColor;outline-offset:4px}
.h h1,.h h2,.h h3{text-wrap:balance}

/* Campos de cor: o capítulo define o chão e a tinta. */
[data-field=dark]{background:var(--f-dark);color:var(--i-light);--ink-soft:var(--mute-l);--act-bg:var(--f-lime);--act-ink:var(--i-dark)}
[data-field=step]{background:var(--f-step);color:var(--i-light);--ink-soft:var(--mute-l);--act-bg:var(--f-lime);--act-ink:var(--i-dark)}
[data-field=green]{background:var(--f-green);color:var(--i-light);--ink-soft:#b8c3ad;--act-bg:var(--f-lime);--act-ink:var(--i-dark)}
[data-field=paper]{background:var(--f-paper);color:var(--i-dark);--ink-soft:var(--mute-d);--act-bg:var(--i-dark);--act-ink:var(--f-paper)}
[data-field=lime]{background:var(--f-lime);color:var(--i-dark);--ink-soft:#3d4a1c;--act-bg:var(--i-dark);--act-ink:var(--f-lime)}
[data-field=cyan]{background:var(--f-cyan);color:var(--i-dark);--ink-soft:#2f4a50;--act-bg:var(--i-dark);--act-ink:var(--f-cyan)}

/* Botões: um formato só (retângulo), uma cor de ação por campo. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 24px;border:0;border-radius:2px;font:700 var(--t4)/1.2 var(--font);background:var(--act-bg);color:var(--act-ink);transition:transform 140ms var(--ease-out),opacity 180ms ease}
.btn:active{transform:scale(.97)}
.btn--ink{background:var(--i-dark);color:var(--f-lime)}
.btn--small{min-height:44px;padding:10px 18px;font-size:var(--t5)}
@media(hover:hover) and (pointer:fine){.btn:hover{opacity:.88}}

/* Cabeçalho: barra simples que assume o campo do capítulo logo abaixo dela. */
.hd{position:fixed;inset:0 0 auto;z-index:60;transition:background-color 300ms ease,color 300ms ease,transform 320ms var(--ease-out)}
.hd.is-hidden{transform:translateY(-100%)}
.hd-in{height:var(--hd);display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);padding:0 var(--m)}
.hd-mark{font-size:20px;font-weight:800;letter-spacing:-.04em;white-space:nowrap;margin-right:auto}
.hd-nav{display:flex;gap:clamp(16px,2.2vw,34px)}
.hd-nav a,.hd-mark{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;text-decoration-thickness:2px;transition:text-decoration-color 180ms ease}
.hd-nav a{font-size:var(--t5);font-weight:600}
@media(hover:hover) and (pointer:fine){.hd-nav a:hover,.hd-mark:hover{text-decoration-color:currentColor}}
.hd-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:2px;font-size:var(--t5);font-weight:700;background:var(--act-bg);color:var(--act-ink);transition:background-color 300ms ease,color 300ms ease,transform 140ms var(--ease-out)}
.hd-cta:active{transform:scale(.97)}
.hd-cta-short{display:none}
.h .hd-in .hd-menu{display:none;min-height:44px;padding:0 4px;background:none;border:0;width:auto;height:auto;font:700 var(--t5)/1 var(--font);color:inherit;text-decoration:underline;text-underline-offset:.35em}
.h .hd-sheet{position:fixed;inset:var(--hd) 0 0;height:auto;padding:24px var(--m) 40px;overflow:auto;background:inherit;color:inherit;display:flex;flex-direction:column}
.h .hd-sheet[hidden]{display:none!important}
.h .hd-sheet a{font-size:clamp(30px,8vw,44px);font-weight:700;letter-spacing:-.035em;padding:10px 0;border:0;display:block;color:inherit}
.h .hd-sheet .hd-sheet-cta{margin-top:auto;font-size:var(--t4);display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;background:var(--act-bg);color:var(--act-ink);border-radius:2px}

/* Primeira tela: dois campos que se encontram na metade; o título atravessa a costura e troca de tinta. */
/* Na home cada seção já traz o próprio respiro e o cabeçalho some ao descer: os links internos param no topo da seção
   (o styles.css antigo empurrava 90 a 110 px e o destino caía no meio da tela). */
:root:root{scroll-padding-top:0}
.opening{position:relative;min-height:100svh;overflow:hidden;background:var(--f-lime);display:flex;flex-direction:column;--hf:var(--t1);--lh:1.06;--cut:calc(var(--hf) * (var(--lh) + .32));
  --top:max(var(--hd) + 24px,50svh - var(--cut));--seam:calc(var(--top) + var(--cut));padding:calc(var(--top) + var(--hf) * var(--lh) * 2 + clamp(24px,4svh,48px)) var(--m) 0}
.op-field{position:absolute;left:0;right:0}
.op-field--top{top:0;bottom:calc(100% - var(--seam))}
.op-field--low{top:var(--seam);bottom:0}
.op-title{position:absolute;left:var(--m);right:var(--m);top:var(--top);margin:0;font-size:var(--hf);line-height:var(--lh);font-weight:800;letter-spacing:-.05em;text-transform:uppercase;text-align:center}
.ht{display:block;height:calc(var(--hf) * var(--lh) * 2)}
.ht-l{display:block;white-space:nowrap}
.ht-up{color:var(--f-lime);clip-path:inset(0 0 calc(var(--hf) * var(--lh) * 2 - var(--cut)) 0)}
.ht-down{position:absolute;inset:0;color:var(--i-sub);clip-path:inset(var(--cut) 0 0 0);pointer-events:none}
.op-foot{position:relative;padding-bottom:clamp(32px,5svh,56px);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;color:var(--i-dark)}
.op-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px}
.op-link{font-size:var(--t4);font-weight:700;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
.op-fronts{position:relative;margin-top:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;color:var(--i-dark);background:#cbef5c}
.op-fronts a{display:flex;align-items:center;justify-content:center;min-height:clamp(64px,10svh,104px);font-size:var(--t4);font-weight:800;letter-spacing:-.01em;transition:background-color 180ms ease}
@media(hover:hover) and (pointer:fine){.op-fronts a:hover{background:var(--f-lime)}}
.op-lead{font-size:var(--t3);line-height:1.3;font-weight:600;letter-spacing:-.025em;max-width:40ch;text-wrap:balance}

/* Yggdrasil digital: a árvore do ecossistema, com runas, a lança do Gungnir e dados subindo pelos galhos. */
.ygg{padding:var(--sec) var(--m)}
.ygg-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,96px);align-items:center}
.ygg-copy h2{margin:0;font-size:var(--t2);line-height:.98;font-weight:800;letter-spacing:-.05em;max-width:12ch}
.ygg-lead{margin-top:24px;font-size:var(--t3);line-height:1.3;font-weight:600;letter-spacing:-.025em;max-width:40ch;color:var(--i-light)}
.ygg-units{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:4px}
.ygg-unit{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;padding:12px 14px;margin:0 -14px;border-radius:4px;transition:background-color 180ms ease}
@media(hover:hover) and (pointer:fine){.ygg-unit:hover{background:var(--f-step)}}
.ygg-logo{display:flex;align-items:center;height:48px}
.ygg-logo img{max-width:96px;max-height:44px;width:auto;height:auto}
.ygg-unit strong{font-size:var(--t4);font-weight:800}
.ygg-unit em{font-style:normal;font-size:var(--t5);font-weight:700;color:var(--f-lime);margin-left:6px}
.ygg-desc{display:block;font-size:var(--t5);color:var(--ink-soft);margin-top:2px}
.ygg-more{display:inline-flex;align-items:center;min-height:44px;margin-top:28px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.ygg-stage{position:relative;width:100%;max-width:min(78svh,760px);justify-self:center}
.ygg-art{display:block;width:100%;height:auto;overflow:visible}
.ygg-aura{fill:#d6ff62;opacity:.014}
.ygg-ring{fill:none;stroke:#d6ff6230;stroke-width:1}
.ygg-ring--in{stroke:#d6ff621c}
.ygg-runes{fill:none;stroke:#d6ff6299;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box;transform-origin:320px 340px}
.ygg-orbit{fill:none;stroke:#d6ff6255;stroke-width:1;stroke-dasharray:3 7}
.ygg-orbit--crown{stroke:#d6ff6226}
.ygg-orbit-dot{fill:#d6ff62}
.ygg-hidden{fill:none;stroke:none}
.ygg-glow{fill:#d6ff62;opacity:.06}
.ygg-limb{fill:none;stroke:#e4efcf;stroke-linecap:round;stroke-linejoin:round;opacity:.74}
.ygg-limb--lime{stroke:#d6ff62;opacity:.7}
.ygg-bud{fill:#d6ff62}
/* Copa de fundo: folhagem desfocada, quase invisível, só para dar volume; o foco fica nos galhos. */
.ygg-foliage-img{opacity:.85}
.ygg-trunk-glow{fill:none;stroke:#d6ff62;stroke-width:26;stroke-linecap:round;opacity:.08}
.ygg-edge{fill:none;stroke:#d6ff62b0;stroke-width:2.2;stroke-linecap:round}
.ygg-flow{fill:none;stroke:#f4ffd6;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 26;opacity:.9}
.ygg-strand{fill:none;stroke:#e7f4cf;stroke-width:2.1;stroke-linecap:round;opacity:.82}
.ygg-trunk{fill:none;stroke:none}
.ygg-twig{fill:none;stroke:#d6ff6266;stroke-width:1.1;stroke-linecap:round}
.ygg-tip{fill:#d6ff6299}
.ygg-star{fill:#eef7d2;opacity:.55}
.ygg-fruit{fill:#090b0c;stroke:#d6ff6299;stroke-width:1.4}
.ygg-ping{fill:none;stroke:#d6ff62;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.ygg-halo{fill:#090b0c;stroke:#d6ff6240;stroke-width:1}
.ygg-shaft{stroke:#d4af63;stroke-width:2.4}
.ygg-spear{fill:#d4af63}
.ygg-node{fill:var(--f-lime);stroke:var(--f-dark);stroke-width:3}
.ygg-pulse{fill:#f6ffd9}
.ygg-label{fill:var(--i-light);font:700 16px var(--font);letter-spacing:-.01em;paint-order:stroke;stroke:#090b0c;stroke-width:5px;stroke-linejoin:round}
.ygg-label--gold{fill:#e7c983}

/* As quatro dimensões: uma frase enorme por campo, explicação pequena na diagonal oposta. */
.dim{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto;align-items:center;align-content:center;column-gap:var(--gap);min-height:min(100svh,880px);padding:var(--sec) var(--m)}
.dim-text{grid-column:8 / span 5;grid-row:1;max-width:40ch}
.dim-text p{font-size:var(--t4);line-height:1.55}
.dim-text strong{font-weight:800}
.dim-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:var(--t4);font-weight:700}
.dim-list li{display:flex;gap:12px;align-items:baseline}
.dim-list li:before{content:"";flex:none;width:8px;height:8px;background:currentColor;transform:translateY(-2px) rotate(45deg)}
.dim--dark .dim-phrase{color:var(--f-lime)}
.dim--green .dim-list li:before,.dim--dark .dim-list li:before{background:var(--f-lime)}
.dim-link{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-weight:700;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
.dim-phrase{grid-column:1 / span 7;grid-row:1;align-self:center;margin:0;font-size:var(--t1);line-height:.9;font-weight:800;letter-spacing:-.055em;max-width:9ch;text-box:trim-both cap alphabetic}
.dim-text>:first-child{margin-top:0}.dim-text>:last-child{margin-bottom:0}
.dim:nth-child(even) .dim-text{grid-column:1 / span 5}
.dim:nth-child(even) .dim-phrase{grid-column:6 / -1}
.dim:nth-child(even) .dim-phrase{justify-self:end;text-align:right}

/* Peça viva: o processo manual escolhido aparece como interface sobre o disco e vira horas por ano. */
.show{padding:var(--sec) var(--m)}
.show-grid{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,5fr) minmax(0,2.8fr);column-gap:var(--gap);align-items:center;min-height:max(560px,calc(100svh - 2 * var(--sec)))}
.show-list{grid-column:1;grid-row:1;align-self:center}
.show-head{margin:0 0 28px;font-size:var(--t2);line-height:.98;font-weight:800;letter-spacing:-.05em;color:var(--i-dark);max-width:9ch}
.show-items{list-style:none;margin:0;padding:0}
.show-item{display:block;width:100%;text-align:left;background:none;border:0;padding:4px 0;font:700 var(--t3)/1.15 var(--font);letter-spacing:-.03em;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:.22em;transition:color 180ms ease,text-decoration-color 180ms ease}
.show-item[aria-pressed=true]{color:var(--i-dark);text-decoration-color:var(--i-dark)}
@media(hover:hover) and (pointer:fine){.show-item:hover{color:var(--i-dark)}}
.show-stage{grid-column:2;grid-row:1;position:relative;align-self:center;justify-self:center;width:min(64svh,100%);aspect-ratio:1}
.show-disc{position:absolute;inset:0;border-radius:50%;background:var(--disc,var(--f-lime));transition:background-color 300ms ease}
/* Órbitas em volta do disco: a automação girando enquanto a equipe faz outra coisa. */
.show-orbit{position:absolute;inset:-5%;border-radius:50%;border:1.5px dashed #18230f59;pointer-events:none}
.show-orbit--out{inset:-10.5%;border:0;background:#18230f0f}
.show-orbit i{position:absolute;top:50%;left:-6px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--i-dark)}
.show-orbit--out i{left:auto;right:-4px;width:8px;height:8px;margin-top:-4px;background:#18230f99}
.show-disc[data-tone=green]{--disc:var(--f-green)}.show-disc[data-tone=paper]{--disc:var(--f-paper)}.show-disc[data-tone=cyan]{--disc:var(--f-cyan)}
.show-fact{grid-column:3;grid-row:1;align-self:center;display:flex;flex-direction:column;gap:22px}
.show-desc{font-size:var(--t4);line-height:1.55;min-height:7.8em}
.calc-label{font-size:var(--t5);color:var(--ink-soft);margin-bottom:10px}
.calc-step{display:flex;align-items:center;gap:6px}
.calc-btn{width:48px;height:48px;border:0;border-radius:2px;background:var(--i-dark);color:var(--f-lime);font:700 20px/1 var(--font);transition:transform 140ms var(--ease-out),background-color 180ms ease}
.calc-btn:active{transform:scale(.94)}
@media(hover:hover) and (pointer:fine){.calc-btn:hover{background:#26300f}}
.calc-value{min-width:64px;text-align:center;font-size:var(--t3);font-weight:800;font-variant-numeric:tabular-nums}
.calc-result{margin-top:14px;font-size:var(--t4);line-height:1.45}
.calc-result strong{display:block;font-size:var(--t3);font-weight:800;letter-spacing:-.03em;color:var(--i-dark);font-variant-numeric:tabular-nums}
.calc-note{margin-top:6px;font-size:var(--t5);color:var(--ink-soft)}

/* Fragmentos de interface (data-ui): a interface que a automação gera, em pé sobre o disco. */
.ui{position:absolute;left:50%;top:50%;width:76%;margin:0;transform:translate(-50%,calc(-50% + 10px));opacity:0;visibility:hidden;transition:opacity 300ms ease,transform 400ms var(--ease-out),visibility 0s 300ms;background:#0f1312;color:#eef1ea;border:1px solid #ffffff1f;border-radius:14px;padding:16px 16px 12px;font-size:14px;line-height:1.45;box-shadow:0 30px 60px #0007}
.ui.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity 300ms ease,transform 400ms var(--ease-out),visibility 0s}
.ui figcaption{margin-top:10px;font-size:14px;color:#9aa496}
.ui-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #ffffff17} /* taste-skill-ignore: cabeçalho de uma interface data-ui */
.ui-top b{display:block;font-size:14px}
.ui-top small{display:block;font-size:14px;color:#9aa496}
.ui-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:#26302a;font-size:14px;font-weight:800}
.ui-avatar--cyan{background:#4cc9f0;color:#05121c}
.ui-avatar--lime{background:var(--f-lime);color:var(--i-dark)}
.ui-avatar--gold{background:#d4af63;color:#0a0c11}
.ui-suggest{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#151b26;color:#dfe5f0}
.ui-suggest b{display:block;font-size:14px;color:#9db8ff;margin-bottom:4px}
.ui-actions{display:flex;gap:8px;margin:10px 0 0}
.ui-actions span{padding:7px 12px;border-radius:6px;background:#1d2422;font-size:14px;font-weight:700}
.ui-actions span:first-child{background:#d4af63;color:#0a0c11}
.ui-msg{max-width:86%;padding:8px 12px;border-radius:12px;margin:0 0 8px}
.ui-in{background:#1d2422;border-bottom-left-radius:4px}
.ui-out{margin-left:auto;background:var(--f-lime);color:var(--i-dark);border-bottom-right-radius:4px}
.ui-sys{margin:10px 0 0;font-size:14px;color:#b9c3b2;text-align:center}
.ui-rows{margin:0;display:grid;gap:8px}
.ui-rows div{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;background:#171d1b}
.ui-rows dt{color:#a7b0a3}
.ui-rows dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ui-hot{color:var(--f-lime)}
.ui-checks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.ui-checks li{padding-left:24px;position:relative}
.ui-checks li:before{content:"";position:absolute;left:4px;top:5px;width:10px;height:6px;border-left:2px solid var(--f-lime);border-bottom:2px solid var(--f-lime);transform:rotate(-45deg)}
.ui-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ui-table td{padding:8px 4px;border-bottom:1px solid #ffffff14}
.ui-table td:last-child{text-align:right;white-space:nowrap;font-weight:700}
.ui-table tfoot td{border:0;font-weight:800;color:var(--f-lime)}
.ui-slots,.ui-flow{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ui-slots li,.ui-flow li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;background:#171d1b}
.ui-slots b{font-variant-numeric:tabular-nums}
.ui-slots em,.ui-flow em{margin-left:auto;font-style:normal;font-size:14px;color:var(--f-lime);white-space:nowrap}
.ui-slots .ui-free{color:#a7b0a3}

/* Etapas: a barra de progresso ampliada até ocupar a página. */
.how{padding:var(--sec) var(--m);display:flex;flex-direction:column}
.how-title{margin:0 0 56px;font-size:var(--t2);line-height:.95;font-weight:800;letter-spacing:-.05em}
.bar{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.seg{flex-basis:0;min-width:12%}
.seg-g18{flex-grow:18}.seg-g22{flex-grow:22}.seg-g40{flex-grow:40}.seg-g20{flex-grow:20}
.seg-fill{height:max(22svh,140px);padding:20px;display:flex;align-items:flex-start}
.seg-fill span{font-size:var(--t3);line-height:1.1;font-weight:800;letter-spacing:-.03em}
.seg--green .seg-fill{background:var(--f-green);color:var(--i-light)}
.seg--dark .seg-fill{background:var(--f-dark);color:var(--i-light)}
.seg--lime .seg-fill{background:var(--f-lime);color:var(--i-dark)}
.seg--paper .seg-fill{background:var(--f-paper);color:var(--i-dark)}
.seg--cyan .seg-fill{background:var(--f-cyan);color:var(--i-dark)}
.seg p{margin-top:16px;font-size:var(--t4);line-height:1.45;max-width:24ch;padding-right:12px}
.how-link{align-self:flex-start;margin-top:48px;min-height:44px;display:inline-flex;align-items:center;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}

/* Perguntas: uma faixa por pergunta, alternando dois tons, todas as respostas visíveis. */
.faq-head{min-height:34svh;display:flex;align-items:flex-end;padding:var(--sec) var(--m) 48px}
.faq-head h2{margin:0;font-size:var(--t2);line-height:.95;font-weight:800;letter-spacing:-.05em}
.faq-band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(40px,4vw,64px) var(--m)}
.faq-band h3{grid-column:1 / span 5;margin:0;font-size:var(--t3);line-height:1.2;font-weight:700;letter-spacing:-.03em}
.faq-band p{grid-column:7 / -1;font-size:var(--t4);line-height:1.55;max-width:60ch}

/* Fechamento: a frase tem uma lacuna, e a lacuna é o formulário. */
.ask{display:flex;flex-direction:column;justify-content:center;padding:var(--sec) var(--m)}
.ask-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(32px,5vw,96px);align-items:center}
.ask-label{display:block;font-size:var(--t2);line-height:.98;font-weight:800;letter-spacing:-.05em;max-width:17ch}
/* Barra de comando: escura sobre o papel, o campo e o botão numa linha só. */
.ask-bar{display:flex;align-items:center;gap:14px;margin-top:36px;padding:10px 10px 10px 26px;border-radius:999px;background:var(--i-dark);color:var(--f-paper);
  transition:outline-color 200ms ease}
.ask-bar{outline:4px solid transparent;outline-offset:3px}
.ask-bar:focus-within{outline-color:var(--i-dark)}
.ask-prompt{font-size:var(--t3);font-weight:800;color:var(--f-lime);line-height:1}
.ask-bar input{flex:1;min-width:0;height:64px;border:0;background:none;color:#fff;font:700 var(--t3)/1 var(--font);letter-spacing:-.03em;caret-color:var(--f-lime)}
.ask-bar input::placeholder{color:#7f8a79;opacity:1}
.ask-bar input:focus{outline:none}
.ask-bar button{flex:none;display:inline-flex;align-items:center;gap:10px;height:64px;padding:0 28px;border:0;border-radius:999px;background:var(--f-lime);color:var(--i-dark);
  font:800 var(--t4)/1 var(--font);cursor:pointer;transition:transform 140ms var(--ease-out),background-color 180ms ease}
.ask-bar button .icon-arrow{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
.ask-bar button:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.ask-bar button:hover{background:#e3ff8f}.ask-bar button:hover .icon-arrow{transform:translate(2px,-2px)}}
.ask-ideas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ask-ideas button{min-height:44px;padding:0 18px;border:1.5px solid #18230f2e;border-radius:999px;background:transparent;color:var(--i-dark);font:700 var(--t5)/1 var(--font);cursor:pointer;
  transition:background-color 180ms ease,border-color 180ms ease,transform 140ms var(--ease-out)}
.ask-ideas button:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.ask-ideas button:hover{background:var(--f-lime);border-color:var(--f-lime)}}
.ask-note{margin-top:24px;font-size:var(--t4);color:var(--ink-soft);max-width:56ch}
.ask-side{position:relative;overflow:hidden;display:grid;gap:22px;padding:clamp(28px,3vw,44px);border-radius:28px;background:var(--i-dark);color:var(--f-paper)}
.ask-wa,.ask-mail{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.ask-wa .icon-wa{width:28px;height:28px;flex:none;color:var(--f-lime)}
.ask-wa strong{font-size:var(--t3);font-weight:800;letter-spacing:-.03em;color:var(--f-lime);white-space:nowrap}
.ask-mail strong{font-size:var(--t4);font-weight:700;overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){.ask-wa:hover strong,.ask-mail:hover strong{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px}}
.ask-lead{position:relative;z-index:1;font-size:var(--t4);line-height:1.5;color:#c9cfc4;max-width:30ch}
.ask-lead strong{display:block;margin-bottom:6px;font-size:var(--t3);line-height:1.15;font-weight:800;letter-spacing:-.03em;color:#fff}
.ask-go{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;
  background:var(--f-lime);color:var(--i-dark);font-weight:800;justify-self:start;transition:transform 140ms var(--ease-out),background-color 180ms ease}
.ask-go:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.ask-go:hover{background:#e3ff8f}}
.ask-channel{position:relative;z-index:1;display:grid;gap:6px;padding:16px 18px;border-radius:18px;background:#1a2016}
.ask-channel p{font-size:var(--t5);line-height:1.5;color:#aab3a4}
.ask-ring{position:absolute;right:-90px;top:-90px;width:240px;height:240px;border-radius:50%;border:1px dashed #d6ff6240;pointer-events:none}
.ask-ring:after{content:"";position:absolute;inset:34px;border-radius:50%;background:var(--f-green)}

/* Rodapé: a marca construída em blocos, letras vazadas no campo escuro. */
.ft{padding:var(--sec) var(--m) 28px}
.ft-mark{display:flex;align-items:flex-end;gap:4px;height:34svh;min-height:200px}
.ft-b{flex:1;position:relative;overflow:hidden;container-type:size;display:flex;align-items:flex-end}
.ft-b span{display:block;font-size:min(120cqh,64cqw);line-height:.74;font-weight:800;letter-spacing:-.06em;color:var(--f-dark);margin:0 0 -.02em 4cqw}
.ft-b--a{height:100%;background:var(--f-lime)}
.ft-b--l{height:78%;background:var(--f-paper)}
.ft-b--n{height:90%;background:var(--f-cyan)}
.ft-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:32px;margin-top:56px}
.ft-col{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start}
.ft-col h2{margin:0 0 12px;font-size:var(--t5);font-weight:800;color:var(--ink-soft)}
.ft-col a{font-size:var(--t5);min-height:36px;display:inline-flex;align-items:center}
.ft-contact{grid-column:9 / -1;display:grid;gap:16px;font-size:var(--t5);line-height:1.6}
.ft a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;transition:text-decoration-color 180ms ease}
@media(hover:hover) and (pointer:fine){.ft a:hover{text-decoration-color:currentColor}}
.ft .btn{text-decoration:none}
.ft-last{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:56px;font-size:var(--t5);color:var(--ink-soft)}
.ft-legal{display:flex;gap:20px;align-items:center;margin-right:auto}
.ft-legal a,.ft-legal .footer-cookie{color:var(--i-light);min-height:44px;display:inline-flex;align-items:center;padding:0;font:inherit}

/* Entradas: cada parte chega na ordem de leitura, uma vez. Sem script, tudo fica visível. */
@media(prefers-reduced-motion:no-preference){
  .ht-l{animation:line-up 1000ms var(--ease-out) both}
  .ht-l+.ht-l{animation-delay:140ms}
  .op-foot{animation:rise 800ms var(--ease-out) 380ms both}
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .dim-phrase[data-reveal]{transform:translateY(20px);transition-delay:90ms}
  .js .show-fact[data-reveal]{transition-delay:120ms}
  .js .bar[data-reveal] .seg{transform:scaleX(.6);transform-origin:left;opacity:0;transition:transform 900ms var(--ease-out),opacity 500ms ease}
  .js .bar[data-reveal].is-in .seg{transform:none;opacity:1}
  .js .bar[data-reveal].is-in .seg:nth-child(2){transition-delay:90ms}.js .bar[data-reveal].is-in .seg:nth-child(3){transition-delay:180ms}.js .bar[data-reveal].is-in .seg:nth-child(4){transition-delay:270ms}
  .js .bar[data-reveal]{opacity:1;transform:none}
}
@media(prefers-reduced-motion:no-preference){.ygg-runes{animation:ygg-spin 140s linear infinite}
  .ygg-flow{animation:ygg-flow 2.6s linear infinite}.ygg-flow--1{animation-delay:-.65s}.ygg-flow--2{animation-delay:-1.3s}.ygg-flow--3{animation-delay:-1.95s}
  .ygg-ping{animation:ygg-ping 3.2s ease-out infinite}.ygg-buds .ygg-bud{animation:ygg-breathe 3.6s ease-in-out infinite alternate}}
@keyframes ygg-flow{to{stroke-dashoffset:-54}}
@keyframes ygg-ping{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.9)}}
@keyframes ygg-breathe{from{opacity:.35}to{opacity:.85}}
@media(prefers-reduced-motion:reduce){.ygg-pulse,.ygg-orbit-dot{display:none}}
@keyframes ygg-spin{to{transform:rotate(360deg)}}
@keyframes line-up{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}

@media(max-width:1100px){
  .hd-nav{gap:16px}.hd-nav a{font-size:14px}
  .show-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;row-gap:40px;align-items:start}
  .show-stage{grid-column:1 / -1;grid-row:1;width:min(60svh,72vw);margin-top:6%}
  .show-list{grid-column:1;grid-row:2;align-self:start}
  .show-fact{grid-column:2;grid-row:2;align-self:start}
  .ygg-grid{grid-template-columns:1fr;row-gap:48px}.ygg-stage{max-width:620px}
  .ft-col{grid-column:span 4}.ft-contact{grid-column:1 / -1}
}
@media(max-width:900px),(max-width:1100px) and (orientation:portrait){
  .opening{--hf:clamp(40px,11.5vw,104px);--top:calc(var(--hd) + clamp(36px,9svh,120px));min-height:0;padding-bottom:var(--m)}
  .op-fronts{margin-top:0}
  .op-fronts a{min-height:clamp(52px,7svh,80px)}
}
@media(max-width:900px){
  .hd-nav{display:none}
  html.js .h .hd-in .hd-menu{display:inline-flex;align-items:center}
  .dim{grid-template-columns:1fr}
  .dim-phrase,.dim:nth-child(even) .dim-phrase{grid-column:1;grid-row:1;justify-self:start;text-align:left;margin:0 0 40px;max-width:none}
  .dim-text,.dim:nth-child(even) .dim-text{grid-column:1;grid-row:2;max-width:60ch}
  .faq-band h3{grid-column:1 / -1;margin-bottom:16px}.faq-band p{grid-column:1 / -1}
  .bar{flex-direction:column;gap:6px}
  .seg{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  .seg-fill{height:auto;min-height:72px}
  .seg-g18 .seg-fill{min-height:80px}.seg-g22 .seg-fill{min-height:110px}.seg-g40 .seg-fill{min-height:200px}.seg-g20 .seg-fill{min-height:100px}
  .seg p{margin-top:0}
}
@media(max-width:760px){
  :root{--hd:64px;--gap:12px}
  .hd-mark{font-size:20px}
  .hd-cta{padding:0 14px}.hd-cta-long{display:none}.hd-cta-short{display:inline}
  .opening{--hf:clamp(40px,14vw,92px)}
  .op-lead{max-width:28ch}
  .op-fronts{grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
  .op-fronts a{min-height:52px;font-size:var(--t5)}
  .op-foot{gap:16px}
  .op-actions{gap:4px 20px}
  .op-actions .btn{width:100%}
  .ygg-label{display:none}
  .ygg-unit{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .ygg-logo img{max-width:72px}
  .dim{min-height:72svh;grid-template-columns:1fr;padding-block:calc(var(--hd) + 12px) 72px;align-content:center}
  .dim-text,.dim:nth-child(even) .dim-text{grid-column:1;max-width:none;width:82%}
  .dim:nth-child(even) .dim-text{justify-self:end;text-align:right}
  .dim-phrase,.dim:nth-child(even) .dim-phrase{grid-column:1;grid-row:1;justify-self:start;text-align:left;margin:0 0 36px}
  .dim-text,.dim:nth-child(even) .dim-text{grid-row:2}
  .show{padding-top:calc(var(--hd) + 24px)}
  .show-grid{grid-template-columns:1fr;min-height:0}
  /* No celular a pergunta vem primeiro: quem chega pelo menu cai direto nela. */
  .show-stage{grid-column:1;grid-row:2;width:100%;aspect-ratio:auto;margin:28px 0 0;padding-top:10vw}
  .show-disc{inset:0 auto auto 50%;width:86vw;height:86vw;transform:translateX(-50%)}
  .ui,.ui.is-on{position:relative;left:auto;top:auto;width:92%;margin:0 auto;transform:none;padding:12px 12px 10px}
  .ui:not(.is-on){display:none}
  .show-orbit{display:none}
  .show-list{grid-column:1;grid-row:1;min-width:0}
  .show-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
  .show-item{font-size:var(--t4);line-height:1.25;min-height:48px;padding:8px 0}
  .show-fact{grid-column:1;grid-row:3}
  .show-desc{min-height:0}
  .how-title{margin-bottom:40px}
  .faq-head{min-height:30svh}
  .faq-band{padding:32px var(--m)}
      .ft-mark{height:22svh;min-height:140px}
  .ft-col{grid-column:span 6}
  .ft-last{flex-direction:column;align-items:flex-start}
  .ft-legal{flex-wrap:wrap;gap:4px 20px}
}
@media(max-width:380px){.hd-mark{font-size:18px}}
@media(prefers-reduced-motion:reduce){.ui,.ui.is-on{transition:none}.show-disc{transition:none}}
@media(prefers-reduced-motion:no-preference){.show-orbit{animation:ygg-spin 26s linear infinite}.show-orbit--out{animation-duration:48s;animation-direction:reverse}}

/* Ecossistema: oito frentes em duas colunas; o Hub entra com a marca em texto. */
.ygg-units{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(12px,1.6vw,28px)}
.ygg-unit{grid-template-columns:84px minmax(0,1fr);gap:14px}
.ygg-logo img{max-width:84px;max-height:40px}
.ygg-logo--type{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--i-light)}
.ygg-logo--type b{color:var(--f-lime)}
.ygg-desc{line-height:1.45}

/* ALN Hub: o link na bio da ALN, com o perfil real flutuando em órbita. */
.hubx{padding:var(--sec) var(--m);overflow:hidden}
.hubx-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,96px);align-items:center}
.hubx-brand{font-size:var(--t3);font-weight:800;letter-spacing:-.03em}
.hubx-brand b{color:var(--f-lime)}
.hubx-copy h2{margin:18px 0 0;font-size:var(--t2);line-height:.98;font-weight:800;letter-spacing:-.05em;max-width:13ch}
.hubx-lead{margin-top:24px;font-size:var(--t4);line-height:1.6;max-width:52ch}
.hubx-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;font-size:var(--t4);font-weight:700}
.hubx-list li{display:flex;gap:12px;align-items:baseline}
.hubx-list li:before{content:"";flex:none;width:8px;height:8px;background:var(--f-lime);transform:translateY(-2px) rotate(45deg)}
.hubx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px}
.hubx-link{font-weight:700;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
.hubx-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px;font-size:var(--t5);color:var(--ink-soft)}
.hubx-stage{position:relative;display:grid;place-items:center;width:100%;max-width:640px;justify-self:center;padding:7% 0 11%}
.hubx-orbit{position:absolute;left:50%;top:50%;width:88%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--f-green)}
.hubx-orbit:before,.hubx-orbit:after{content:"";position:absolute;inset:-6%;border-radius:50%;border:1px dashed #d6ff6255}
.hubx-orbit:after{inset:-14%;border:0;background:#d6ff620a;z-index:-1}
/* Aparelho desenhado em CSS: moldura, ilha e botões; a tela é a captura real do perfil. */
.hubx-device{position:relative;width:min(52%,320px);aspect-ratio:390/844;padding:9px;border-radius:48px;background:#050607;
  border:3px solid #2a3127;
  transform:rotate(-5deg);transition:transform 900ms var(--ease-soft)}
.hubx-device:before{content:"";position:absolute;z-index:2;top:17px;left:50%;width:30%;height:22px;margin-left:-15%;border-radius:12px;background:#050607}
.hubx-device:after{content:"";position:absolute;right:-5.5px;top:24%;width:3px;height:13%;border-radius:2px;background:#2a3027}
.hubx-screen{display:block;height:100%;overflow:hidden;border-radius:39px;background:#0b0f0c}
.hubx-feed{display:block;width:100%;height:auto}
.hubx-chip{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;font-size:var(--t5);font-weight:800;white-space:nowrap}
.hubx-chip--lead{left:0;top:22%;background:var(--f-lime);color:var(--i-dark)}
.hubx-chip--lead i{width:8px;height:8px;border-radius:50%;background:var(--i-dark)}
.hubx-chip--stats{right:0;top:58%;background:var(--f-paper);color:var(--i-dark)}
.hubx-url{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:#1b2416;color:var(--i-light);font-size:var(--t5);font-weight:700;white-space:nowrap}
@media(hover:hover) and (pointer:fine){.hubx-stage:hover .hubx-device{transform:rotate(0) translateY(-10px) scale(1.03)}}
@media(prefers-reduced-motion:no-preference){.hubx-device{animation:hub-float 7s ease-in-out infinite}.hubx-orbit:before{animation:ygg-spin 60s linear infinite}
  .hubx-feed{animation:hub-scroll 22s cubic-bezier(.65,0,.35,1) infinite}
  .hubx-chip--lead{animation:hub-float 6s ease-in-out -2s infinite}.hubx-chip--stats{animation:hub-float 8s ease-in-out -4s infinite}}
@keyframes hub-scroll{0%,14%{transform:translateY(0)}46%,60%{transform:translateY(-41.6%)}92%,100%{transform:translateY(0)}}
@keyframes hub-float{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* Fechamento: a frase-formulário com sugestões e os contatos ao lado. */
@media(hover:hover) and (pointer:fine){}

/* Rodapé: chamada final antes da marca em blocos. */
.ft-call{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px;margin-bottom:clamp(56px,6vw,96px)}
.ft-call-text{font-size:var(--t2);line-height:1;font-weight:800;letter-spacing:-.05em;max-width:24ch}
.ft-call-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ft-call-wa{font-weight:700;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline!important;text-underline-offset:.3em;text-decoration-thickness:2px}
.ft-col{grid-column:span 2}
.ft-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
.ft-col:nth-child(3){grid-column:span 3}
.ft-contact{grid-column:10 / -1}
@media(max-width:1100px){.hubx-grid,.ask-grid{grid-template-columns:1fr;row-gap:48px}.hubx-stage{max-width:520px}.hubx-device{width:min(54%,290px)}.ft-col,.ft-col:nth-child(3){grid-column:span 4}.ft-contact{grid-column:1 / -1}}
@media(max-width:760px){.ft-call-text{font-size:var(--t3)}.ask-bar{flex-wrap:wrap;border-radius:26px;padding:12px 12px 12px 20px;gap:8px}.ask-bar input{height:52px}.ask-bar button{width:100%;justify-content:center;height:56px}.ygg-units{grid-template-columns:1fr}.hubx-list{grid-template-columns:1fr}.hubx-device{width:60%;border-radius:38px;padding:7px}.hubx-screen{border-radius:31px}.hubx-device:before{top:13px;height:16px}.hubx-chip{padding:9px 12px;font-size:13px}.hubx-chip--lead{left:-2%}.hubx-chip--stats{right:-2%}.hubx-url{font-size:13px;padding:8px 12px}.ft-col,.ft-col:nth-child(3){grid-column:span 6}}
.ft-top{font-weight:700;min-height:44px;display:inline-flex;align-items:center;color:var(--i-light)}
/* Celulares bem estreitos (320 a 380 px): uma coluna por bloco, para os domínios não encostarem no contato. */
@media(max-width:380px){.ft-col,.ft-col:nth-child(3){grid-column:1 / -1}.ask-side{padding:24px 20px}.ask-channel{padding:14px}}