/* Landing do Learning Engine: cartaz construtivista em fundo branco.
   Fonte do desenho: canvas "Landing Learning Engine" (claude.ai), 2026-09-30. */
:root{--ink:#141312;--gray:#555352;--line:#E4E2DE;--coral:#F2470C;--coral-txt:#CB3706;--btn:#D93D08;--disp:"Plus Jakarta Sans",sans-serif;--mono:"IBM Plex Mono",monospace}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--ink);font:17px/1.6 var(--disp);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
.le *{margin:0}
.le{overflow-x:clip}
a{color:inherit;text-decoration:none}
::selection{background:var(--coral);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
input{caret-color:var(--coral)}
img{max-width:100%}
.pular{position:absolute;left:16px;top:-60px;background:var(--ink);color:#fff;padding:12px 16px;z-index:10;font-weight:700}
.pular:focus{top:12px}

.w{width:min(1200px,calc(100% - 48px));margin:0 auto;position:relative;z-index:2}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(30px,3.75vw,54px);line-height:1.04;text-transform:uppercase;letter-spacing:-.03em;text-wrap:balance}
h3{font-size:22px;line-height:1.15}
.m{font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.c{color:var(--coral)}
.m.c{color:var(--coral-txt)}
.g{color:var(--gray)}
.btn{display:inline-block;white-space:nowrap;background:var(--btn);color:#fff;font:700 16px/1 var(--disp);padding:18px 28px;border:0;cursor:pointer;transition:background .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1)}
.btn:hover{background:#B83206}
.btn.o{background:var(--ink)}
.btn.o:hover{background:#2E2B29}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:wait}
section{padding:120px 0;position:relative;overflow:hidden}
.bgimg{position:absolute;background-size:cover;background-position:center;filter:grayscale(1) contrast(.9);opacity:.09;z-index:0;pointer-events:none}
.bg4{right:-80px;top:40px;width:640px;height:760px;background-image:url(/landing/assets/foto-tear.jpg)}
.bg0{left:0;top:0;width:100%;height:100%;background-image:url(/landing/assets/foto-torno.jpg);opacity:.07}
.bg9{right:-100px;top:0;width:700px;height:100%;background-image:url(/landing/assets/foto-micrometro.jpg);opacity:.07}
.bg9f{left:0;top:0;width:100%;height:100%;background-image:url(/landing/assets/foto-trelica.jpg);opacity:.10;mix-blend-mode:multiply}

/* barra do topo */
nav{display:flex;justify-content:space-between;align-items:center;height:96px;border-bottom:3px solid var(--ink);gap:24px}
/* o viewBox do monograma termina na base das letras: alinhar pela linha de base põe o nome na mesma base do L e do E */
.wm{font:800 24px var(--disp);display:flex;gap:12px;align-items:baseline;white-space:nowrap}
.wm svg{height:47px;width:69px;display:block;flex:none;overflow:visible}
nav ul{display:flex;gap:26px;list-style:none;padding:0;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.04em}
nav ul a{padding:12px 0;border-bottom:2px solid transparent;transition:border-color .18s;white-space:nowrap}
nav ul a:hover{border-color:var(--coral)}
nav .right{display:flex;align-items:center;gap:16px}
nav .right .btn{padding:14px 22px;font-size:15px}
nav .entrar{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid var(--ink);transition:background .18s,color .18s;flex:none}
nav .entrar:hover{background:var(--ink);color:#fff}

/* abertura */
.hero{padding:48px 0 0}
.hero .fotob{position:absolute;right:0;top:170px;width:min(820px,57vw);height:620px}
.hero .foto{position:absolute;inset:0;background:url(/landing/assets/foto-andaime.jpg) center center/cover;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);filter:grayscale(1) contrast(.85) brightness(1.12)}
/* as etiquetas no andaime: a metáfora sem precisar explicar */
.hero .rot{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero .rot .t{position:absolute;right:0;display:flex;align-items:center;transform:translateY(-50%)}
.hero .rot .t span{background:var(--btn);color:#fff;font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;white-space:nowrap}
.hero .rot .t i{display:block;flex-grow:1;height:3px;background:var(--coral)}
.hero .cunha{position:absolute;right:min(600px,41.6vw);top:470px;width:220px;height:320px;background:var(--coral);clip-path:polygon(62% 0,100% 0,38% 100%,0 100%);mix-blend-mode:multiply}
.hero .barra{position:absolute;left:0;bottom:30px;width:min(820px,57vw);height:16px;background:var(--ink);transform:rotate(-8deg);transform-origin:left}
.hero .txt{position:relative;width:min(1200px,calc(100% - 48px));margin:0 auto;z-index:3;min-height:830px}
.hero h1{font-size:clamp(40px,10.4vw,150px);line-height:1;text-transform:uppercase;letter-spacing:-.045em;padding-top:36px}
.hero h1 span{color:var(--coral)}
.hero .lead{margin-top:48px;max-width:540px;font-size:19px;color:var(--gray);background:#fff;padding:14px 18px 14px 0;display:grid;gap:16px}
.hero .ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

/* problema */
.prob{display:grid;grid-template-columns:1fr 1fr;margin-top:60px}
.prob>div{padding:40px}
.prob>div:first-child{background:var(--ink);color:#fff}
.prob>div:first-child p{color:#BDBAB4}
.prob>div:last-child{background:var(--btn);color:#fff;margin-top:48px}
.prob h3{font-size:30px;text-transform:uppercase;letter-spacing:-.03em}
.claim{font:800 20px/1.25 var(--disp);letter-spacing:-.02em;margin:10px 0 14px}
.prob p.claim,.prob>div:first-child p.claim{color:#fff}

/* como funciona */
.ct h2{font-size:clamp(28px,3.2vw,46px)}
.ct .g2{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:60px}
.ct .col{border-top:8px solid var(--ink);padding-top:20px}
.ct .col.lef{border-color:var(--coral)}
.ct ol{list-style:none;padding:0;display:grid;gap:14px;margin-top:14px}
.ct li{display:grid;grid-template-columns:44px 1fr;align-items:baseline;color:var(--gray)}
.ct li span{font:800 30px/1 var(--disp);color:var(--ink)}
.ct .lef li span{color:var(--coral)}
.ct li b{color:var(--ink)}
.big{display:flex;gap:40px;margin-top:64px}
.big div{flex:1;border-top:3px solid var(--ink);padding-top:22px}
.big div+div{border-color:var(--coral)}
.big b{font:800 clamp(48px,6vw,84px)/.9 var(--disp);letter-spacing:-.04em;display:block}
.big span{color:var(--gray);display:block;margin-top:10px}

/* jornada */
.jor{background:var(--ink);color:#fff}
.jor h2{color:#fff}
.jor h2 span{color:#FF5A1F}
.jor .g{color:#BDBAB4}
.jor .topo{display:grid;grid-template-columns:1fr 470px;gap:60px;align-items:center}
.jor .leg{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px 28px;font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8F8C86}
.jor .leg b{color:#FF7A45;font-weight:600}
.anda{display:block;width:100%;max-width:470px;height:auto;overflow:visible}
.anda .sc{stroke-dasharray:1;stroke-dashoffset:1;animation:monta 9s cubic-bezier(.16,1,.3,1) infinite}
.anda .sc:nth-child(2){animation-delay:.12s}
.anda .sc:nth-child(3){animation-delay:.24s}
.anda .sc:nth-child(4){animation-delay:.36s}
.anda .sc:nth-child(5){animation-delay:.48s}
.anda .sc:nth-child(6){animation-delay:.6s}
@keyframes monta{0%{stroke-dashoffset:1;opacity:1;transform:none}14%{stroke-dashoffset:0;opacity:1;transform:none}68%{stroke-dashoffset:0;opacity:1;transform:none}82%{stroke-dashoffset:0;opacity:0;transform:translateY(90px)}100%{stroke-dashoffset:1;opacity:0;transform:translateY(90px)}}
@media (prefers-reduced-motion:reduce){.anda .sc{animation:none;stroke-dashoffset:0}}
.quadros{display:flex;gap:18px;margin-top:22px;justify-content:flex-end;font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8F8C86}
.quadros div{display:grid;justify-items:center;gap:10px}
.quadros svg{width:110px;height:auto;display:block}

.fz{display:grid;grid-template-columns:124px 164px 36px repeat(4,minmax(0,1fr)) 164px;gap:6px;margin-top:72px}
.fz .hd{padding:18px 16px 20px;display:flex;flex-direction:column;min-height:150px}
.f1{background:#2A2826}
.f2{background:#3B3835}
.f3{background:#fff;color:var(--ink)}
.f4{background:var(--btn);color:#fff}
.fx{background:transparent;border:2px dashed #4A4643}
.fz .hd .n{font:800 48px/.9 var(--disp);letter-spacing:-.04em;height:43px}
.fz .hd .n.m{font:600 12px/1.4 var(--mono);letter-spacing:.08em;color:#FF7A45;display:flex;align-items:flex-end}
.fz .hd b{font:800 14px/1.2 var(--disp);text-transform:uppercase;display:block;margin-top:14px}
.fz .hd small{font-size:13px;line-height:1.35;display:block;margin-top:6px;font-weight:600}
.fz .lab{padding:16px 0 0;border-top:1px solid #4A4643}
.fz .lab b{display:block;font:800 16px/1.25 var(--disp);text-transform:uppercase}
.fz .lab span,.fzm dt span{display:block;font:600 12px/1.6 var(--mono);color:#8F8C86;text-transform:uppercase;letter-spacing:.06em}
.fz .lab.le-row b{color:#FF7A45}
.fz .cel{padding:16px 18px;font-size:15px;line-height:1.45;color:#D8D5CF;background:#232120}
.fz .cel.bar{background:#2A2826}
.nao{background:repeating-linear-gradient(135deg,transparent 0 9px,#2A2826 9px 10px);border:1px solid #3A3733;color:#8F8C86;font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center}
.fz .cel.lerow{background:var(--ink);border:2px solid var(--coral);color:#fff;font-weight:700}
.fz .marco{background:var(--btn);color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;font:700 13px var(--mono);letter-spacing:.1em}
.fzm{display:none}

/* semana */
.tres{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:64px}
.tres>div{display:grid;gap:20px;align-content:start}
.tres .dia{border-top:3px solid var(--ink);padding-top:16px;min-height:150px}
.tres .on .dia{border-color:var(--coral)}
.tres .dn{display:block;font:800 36px/.9 var(--disp);text-transform:uppercase;letter-spacing:-.03em;margin-bottom:12px}
.tres .on .dn{color:var(--coral)}
.tres p{color:var(--gray);font-size:15px;line-height:1.5;margin-top:6px}
.tres img,.gband img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 32px rgba(20,19,18,.18))}
.gband{display:grid;grid-template-columns:1fr 420px 250px;gap:44px;align-items:center;margin-top:72px;padding:48px;background:#F7F5F2;border-top:8px solid var(--ink)}
.gband h3{font-size:40px;line-height:1.05;text-transform:uppercase;letter-spacing:-.03em;margin-top:14px}
.gsem{list-style:none;padding:0;margin-top:24px;display:grid;gap:14px}
.gsem li{display:grid;grid-template-columns:82px 1fr;align-items:baseline;font-size:15.5px;line-height:1.45;color:var(--gray);border-top:1px solid var(--line);padding-top:12px}
.gsem li span{font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-txt)}
.gsem li b{color:var(--ink)}
/* conversa do gestor no app (desde 2026-10-05 a trilha do gestor chega e é respondida no app) */
.conv{background:#fff;border:1px solid var(--line);box-shadow:0 24px 40px -20px rgba(20,19,18,.25);display:flex;flex-direction:column}
.conv .ch{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.conv .ch div{flex:1;min-width:0;display:grid}
.conv .ch b{font:800 15px/1.25 var(--disp);color:var(--ink)}
.conv .ch div span{font-size:12px;color:var(--gray)}
.conv .vt{color:var(--gray);font-size:18px}
.conv .pt{font:700 13px var(--disp);color:var(--coral-txt);white-space:nowrap}
.conv .cb{padding:16px;display:grid;gap:8px;font-size:13.5px;line-height:1.45}
.conv .dia{justify-self:center;font:600 11px/1.4 var(--mono);color:var(--gray);margin-bottom:4px}
.conv .in,.conv .out{max-width:86%;padding:9px 13px}
.conv .in{background:#F1EFEC;color:var(--ink);justify-self:start}
.conv .out{background:var(--btn);color:#fff;justify-self:end}
.conv strong{font-weight:700}
.conv .cf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 16px 16px;padding:10px 12px;border:1px solid #C9C6C1;font-size:13px;color:var(--gray)}
.conv .cf i{font-style:normal;color:#fff;background:var(--btn);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:12px}

/* visibilidade e mensuração */
.pap{display:grid;grid-template-columns:1fr 1.25fr 1fr;margin-top:60px}
.pap>div{padding:30px 32px}
.pap .p1{border:3px solid var(--ink)}
.pap .gest{background:var(--btn);color:#fff;position:relative}
.pap .gest::after{content:"";position:absolute;right:-1px;top:-1px;width:90px;height:90px;background:#fff;clip-path:polygon(100% 0,100% 100%,0 0)}
.pap .p3{border:3px solid var(--ink);border-left:0}
.pap h3{font-size:26px;text-transform:uppercase;letter-spacing:-.03em;word-spacing:.12em}
.pap .claim{margin:8px 0 0}
.niv{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:72px}
.niv>div{border-top:3px solid var(--ink);padding-top:18px}
.niv>div:last-child{border-color:var(--coral)}
.niv .k{font:800 40px/1 var(--disp);color:var(--coral-txt);letter-spacing:-.03em;display:block}
.niv b{font:800 18px/1.2 var(--disp);text-transform:uppercase;display:block;margin-top:12px}
.niv .q{display:block;color:var(--gray);font-size:15px;line-height:1.45;margin-top:6px}
.ipa{margin-top:28px;padding:22px 24px;border-top:3px solid var(--coral);background:#F7F5F2;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:baseline}
.ipa b{font:800 20px var(--disp);text-transform:uppercase}
.ipa p{color:var(--gray);font-size:15.5px}
.acao{background:var(--ink);color:#fff;padding:32px;margin-top:28px;position:relative}
.acao::before{content:"";position:absolute;left:-24px;top:-24px;width:80px;height:80px;background:var(--coral);clip-path:polygon(0 0,100% 0,0 100%)}
.acao .m.c{color:var(--coral)}
.q5{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:#3A3833;margin-top:18px}
.q5>div{background:var(--ink);padding:16px 18px 4px 0}
.q5>div+div{padding-left:18px}
.acao b{display:block;font-size:15.5px;line-height:1.3}
.acao p{color:#BDBAB4;font-size:14px;line-height:1.45;margin-top:8px}

/* fundamentação */
.ev{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px}
.ev>div{border-top:8px solid var(--ink);padding-top:18px}
.ev .r{display:block;min-height:20px;font:600 12px var(--mono);color:var(--coral-txt);text-transform:uppercase}
.ev h3{margin:10px 0 12px;min-height:52px}
.ev p{color:var(--gray);font-size:15.5px}
.ev p.pesq{min-height:150px}
.ev p.no{color:var(--ink);font-weight:700;padding-top:18px;border-top:1px solid var(--line)}

/* fechamento */
.fe{background:var(--btn);color:#fff}
.fe h2{color:#fff;margin-bottom:48px}
.fe h2 span{color:var(--ink)}
.fe .fg{display:grid;grid-template-columns:1fr 520px;gap:72px}
.fe ol{list-style:none;padding:0;margin-top:22px;display:grid;gap:10px}
.fe li{display:grid;grid-template-columns:44px 1fr;align-items:baseline}
.fe li span{font:800 26px/1 var(--disp)}
.fe .p{margin-top:20px;max-width:48ch}
.form{background:#fff;color:var(--ink);padding:32px;display:grid;gap:18px;align-content:start}
.form label{font:600 12px var(--mono);text-transform:uppercase;display:block;margin-bottom:6px}
.form input{width:100%;border:0;border-bottom:3px solid var(--ink);border-radius:0;height:38px;font:inherit;background:transparent;color:var(--ink)}
.form .r2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .btn{justify-self:start;margin-top:6px}
.form .legal{font-size:14px;color:var(--gray)}
.form .legal.erro{color:var(--coral-txt);font-weight:700}
.enviado{background:#fff;color:var(--ink);padding:40px 32px;display:grid;gap:14px;align-content:start;outline:none}
.enviado[hidden],.form[hidden]{display:none}
.enviado svg{color:var(--btn)}
.enviado b{font:800 clamp(28px,3vw,38px)/1.05 var(--disp);text-transform:uppercase;letter-spacing:-.03em}
.enviado p{color:var(--gray);max-width:36ch}
footer{background:var(--ink);color:#BDBAB4;padding:32px 0;font:500 14px/1.5 var(--disp)}
footer .w{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer .wm{font:500 14px var(--disp);color:#BDBAB4}
footer .wm svg{height:43px;width:63px}

/* ---------- telas menores ---------- */
@media (max-width:1180px){
  nav ul{display:none}
  .fz{display:none}
  .fzm{display:grid;gap:28px;margin-top:56px}
  .fzm .fases{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .fzm .fases>div{padding:14px 16px}
  .fzm .fases .fx,.fzm .fases .mz{grid-column:1/-1}
  .fzm .mz{background:var(--btn);font:700 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .fzm .fases .n{display:block;font:800 32px/.9 var(--disp);letter-spacing:-.04em}
  .fzm .fases .n.m{font:600 12px/1.4 var(--mono);letter-spacing:.08em;color:#FF7A45}
  .fzm .fases b{display:block;font:800 14px/1.2 var(--disp);text-transform:uppercase;margin-top:8px}
  .fzm .fases small{display:block;font-size:13px;font-weight:600;margin-top:4px}
  .fzm dl{display:grid;gap:24px}
  .fzm dl>div{border-top:1px solid #4A4643;padding-top:14px;display:grid;gap:6px}
  .fzm dt b{font:800 16px/1.25 var(--disp);text-transform:uppercase}
  .fzm .le-row dt b{color:#FF7A45}
  .fzm dd{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline;padding:10px 14px;background:#232120;color:#D8D5CF;font-size:15px;line-height:1.45}
  .fzm dd i{font:600 12px/1.4 var(--mono);font-style:normal;color:#8F8C86;text-transform:uppercase;letter-spacing:.06em}
  .fzm dd.nao{display:grid;background:repeating-linear-gradient(135deg,transparent 0 9px,#2A2826 9px 10px)}
  .fzm .le-row dd.lerow{border:2px solid var(--coral);background:var(--ink);color:#fff;font-weight:700}
  .tres{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .gband{grid-template-columns:1fr 1fr;gap:40px}
  .gband>div:first-child{grid-column:1/-1}
  .gband img{max-width:270px;justify-self:center}
}
@media (max-width:1000px){
  .jor .topo{grid-template-columns:1fr;gap:48px}
  .anda{max-width:360px}
  .quadros{justify-content:flex-start}
  .fe .fg{grid-template-columns:1fr;gap:48px}
  .ev{grid-template-columns:repeat(2,1fr);row-gap:48px}
  .niv{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .q5{grid-template-columns:1fr}
  .q5>div,.q5>div+div{padding:16px 0}
  .ipa{grid-template-columns:1fr;gap:8px}
  .pap{grid-template-columns:1fr}
  .pap .p3{border-left:3px solid var(--ink);border-top:0}
  .pap .p1{border-bottom:0}
}
@media (max-width:900px){
  .hero{display:flex;flex-direction:column}
  .hero .fotob{order:2}
  .hero .txt{min-height:0}
  .hero .fotob{position:relative;top:auto;right:auto;width:100%;height:380px;margin-top:48px}
  .hero .foto{clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
  .hero .rot .t span{font-size:11px;padding:5px 8px}
  .hero .cunha,.hero .barra{display:none}
  .hero .lead{background:none;padding:0}
  .prob,.ct .g2{grid-template-columns:1fr}
  .prob>div:last-child{margin-top:0}
  .gband{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:16px}
  .w,.hero .txt{width:calc(100% - 32px)}
  section{padding:72px 0}
  nav{height:76px}
  .wm{font-size:18px;gap:8px}
  .wm svg{height:36px;width:53px}
  nav .right .btn{display:none}
  .hero .lead{font-size:17px;margin-top:32px}
  .hero .lead br,.g br,.tres p br,.acao p br{display:none}
  .hero .ctas .btn{flex:1;text-align:center}
  .prob>div{padding:28px 24px}
  .prob h3{font-size:24px}
  .big{flex-direction:column;gap:32px}
  .tres{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding-bottom:16px;margin-right:-16px;padding-right:16px}
  .tres>div{scroll-snap-align:start}
  .tres .dia{min-height:0}
  .gband{padding:28px 20px;margin-top:56px}
  .gband h3{font-size:30px}
  .gsem li{grid-template-columns:1fr;gap:4px}
  .niv{grid-template-columns:1fr 1fr}
  .ev{grid-template-columns:1fr}
  .ev h3,.ev p.pesq{min-height:0}
  .acao{padding:24px}
  .acao::before{left:-12px;top:-12px;width:48px;height:48px}
  .fzm dd{grid-template-columns:1fr;gap:4px}
  .form{padding:24px}
  .form .r2{grid-template-columns:1fr}
  .fe li{grid-template-columns:36px 1fr}
}
