/* Página base — Engenhando com IA. Tokens e componentes comuns em base/base.css */

/* ritmo vertical: 48 / 64 / 96 */
:root{--sec:48px;--e:cubic-bezier(.2,.7,.2,1)}
@media (min-width:768px){:root{--sec:64px}}
@media (min-width:1100px){:root{--sec:96px}}

h1,h2,h3{font-weight:700;letter-spacing:-.02em;text-wrap:balance}
p{max-width:65ch}
.dark{background:var(--tinta);color:var(--branco)}
.creme{background:var(--creme);color:var(--tinta)}
.amarelo{background:var(--amarelo);color:var(--tinta)}

/* rótulo de ficha (filete se desenha ao entrar) */
.ficha{position:relative;font-size:12.5px;line-height:1.3;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding-top:16px;max-width:none}
.ficha::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linha-d);transform-origin:left;transition:transform .9s var(--e) .1s}
.creme .ficha::after,.news .ficha::after{background:var(--tinta)}
.js [data-r]:not(.in) .ficha::after,.js .ficha[data-r]:not(.in)::after{transform:scaleX(0)}
.dark .ficha::before,.creme .ficha::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:5px;background:var(--amarelo);z-index:1}
.creme .ficha::before{background:var(--tinta)}
.news .ficha::before{content:none}
.bign{display:none}
/* grade de seção: ficha lateral + corpo */
.sec{padding:var(--sec) 0}
.sec-grid{display:block}
.sec-grid>.fic{margin-bottom:28px}
@media (min-width:900px){
  .sec-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
  .sec-grid>.fic{grid-column:1/3;margin:0}
  .sec-body{grid-column:3/13}
}
.sec h2{font-size:clamp(2.1rem,5vw,3.75rem);line-height:1.04}

/* ---------- hero ---------- */
.hero-top{position:relative;display:flex;flex-direction:column}
.hero-media{position:relative;height:min(92vw,440px);overflow:hidden;order:-1;background:var(--tinta)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--tinta) 0,rgba(35,17,20,.55) 32%,rgba(35,17,20,0) 62%)}
.hero-grid{position:relative;padding-bottom:40px}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo);margin-bottom:18px}
.hero h1{font-size:clamp(2.75rem,13.4vw,4rem);line-height:.95;letter-spacing:-.04em;color:var(--branco)}
.hero h1 em{font-style:normal;color:var(--amarelo)}
@keyframes pisca{50%{opacity:0}}
.lede{margin-top:24px;font-size:1.125rem;line-height:1.55;color:var(--txt-d);max-width:34rem}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:16px;text-decoration:none;border-bottom:2px solid var(--amarelo)}
.lnk:hover{background:var(--amarelo);color:var(--tinta)}
@media (min-width:768px) and (max-width:899px){.hero-media{height:420px}.hero h1{font-size:5rem}}
@media (min-width:900px){
  .hero-top{display:block;min-height:min(760px,calc(100vh - 150px));min-height:max(640px,min(760px,calc(100vh - 150px)))}
  .hero-media{position:absolute;top:0;right:0;bottom:0;width:41.66%;height:auto;order:0}
  .hero-media img{object-position:48% 50%}
  .hero-media::after{background:linear-gradient(90deg,var(--tinta) 0,rgba(35,17,20,.55) 22%,rgba(35,17,20,0) 52%),linear-gradient(0deg,rgba(35,17,20,.5) 0,rgba(35,17,20,0) 26%)}
  .hero-grid{margin:0 auto;padding-top:0;padding-bottom:0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;min-height:inherit}
  .hero-txt{grid-column:1/8;padding:72px 0}
  .hero h1{font-size:clamp(3.8rem,7.4vw,7rem)}
  .lede{font-size:1.25rem;margin-top:28px}
}

/* fita de sinalização em movimento */
.ribbon{background:var(--amarelo);color:var(--tinta);padding:16px 0;overflow:hidden}
.track{display:flex;width:max-content;animation:fita 28s linear infinite;will-change:transform}
.track:hover{animation-play-state:paused}
.ribbon ul{display:flex;flex:none;font-weight:700;font-size:16px;line-height:1.5;white-space:nowrap}
.ribbon li::after{content:"›";margin:0 22px}
@keyframes fita{to{transform:translate3d(-50%,0,0)}}
@media (min-width:768px){.ribbon{padding:22px 0}.ribbon ul{font-size:18px}.ribbon li::after{margin:0 28px}}
@media (min-width:1100px){.ribbon ul{font-size:20px}}

/* ---------- sobre ---------- */
.sobre{display:grid;grid-template-columns:1fr;row-gap:32px}
.sobre h2{max-width:20ch}
.sobre-txt{display:grid;gap:18px;font-size:1.0625rem}
.sobre-txt p{max-width:60ch}
.sobre-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ficha-tec{background:var(--tinta);color:var(--branco);padding:6px 24px}
.ficha-tec div{padding:18px 0;border-top:1px solid var(--linha-d)}
.ficha-tec div:first-child{border-top:0}
.ficha-tec dt{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amarelo);margin-bottom:6px}
.ficha-tec dd{font-size:16px;line-height:1.5;color:var(--txt-d)}
@media (max-width:899px){.sobre-foto{margin:0 calc(var(--gut)*-1)}.ficha-tec{margin-top:-56px;margin-right:var(--gut);position:relative}.sobre-foto+.ficha-tec{}}
@media (min-width:900px){
  .sobre{grid-template-columns:repeat(10,1fr);column-gap:24px;row-gap:56px;padding-bottom:56px}
  .sobre h2{grid-column:1/11;max-width:18ch}
  .sobre-txt{grid-column:1/11;grid-template-columns:1fr 1fr;column-gap:24px;font-size:1.125rem}
  .sobre-foto{grid-column:1/8;grid-row:3}
  .ficha-tec{grid-column:6/11;grid-row:3;align-self:end;margin-bottom:-56px;padding:12px 32px;position:relative}
  .ficha-tec dd{font-size:17px}
}

/* ---------- frentes ---------- */
.cab{display:grid;gap:20px;margin-bottom:40px}
.cab p{color:var(--txt-d);font-size:1.125rem}
@media (min-width:900px){.cab{grid-template-columns:7fr 3fr;column-gap:24px;align-items:end;margin-bottom:56px}.cab p{padding-bottom:8px}}
.tiles{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--linha-d);border-left:1px solid var(--linha-d)}
.tile{position:relative;overflow:hidden;padding:28px 24px 30px;border-right:1px solid var(--linha-d);border-bottom:1px solid var(--linha-d);min-height:230px;display:flex;flex-direction:column}
.tile::before{content:"";position:absolute;inset:0;background:var(--amarelo);transform:scaleY(0);transform-origin:bottom;transition:transform .26s var(--e)}
.tile>*{position:relative}
.tile .num{font-size:clamp(3.5rem,8vw,5rem);line-height:.9;font-weight:700;letter-spacing:-.04em;color:rgba(255,255,255,.55);margin-bottom:auto;padding-bottom:28px;transition:color .26s var(--e)}
@supports (-webkit-text-stroke:1px #000){.tile .num{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.6)}}
.tile h3{font-size:1.5rem;line-height:1.15}
.tile p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--txt-d);transition:color .26s var(--e)}
.tile-y{background:var(--amarelo);color:var(--tinta)}
.tile-y p{color:var(--tinta)}
.tile-y .num{color:var(--tinta)}
@supports (-webkit-text-stroke:1px #000){.tile-y .num{color:transparent;-webkit-text-stroke:1.5px var(--tinta)}}
@media (hover:hover){
  .tile:not(.tile-y):hover::before{transform:scaleY(1)}
  .tile:not(.tile-y):hover,.tile:not(.tile-y):hover p{color:var(--tinta)}
  .tile:not(.tile-y):hover .num{color:var(--tinta)}
  @supports (-webkit-text-stroke:1px #000){.tile:not(.tile-y):hover .num{color:transparent;-webkit-text-stroke:1.5px var(--tinta)}}
}
@media (min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}.tile{min-height:300px;padding:32px 28px 34px}}

/* ---------- princípios ---------- */
.sec-princ{padding-top:0}
.sec-princ .sec-grid{border-top:0}
.sec-princ h2{max-width:16ch;margin-bottom:40px}
.princ{display:grid;grid-template-columns:1fr;border:1px solid var(--linha-d)}
.princ li{padding:28px 24px 32px;border-top:1px solid var(--linha-d)}
.princ li:first-child{border-top:0}
.princ .num{display:block;font-size:3.75rem;line-height:.9;font-weight:700;letter-spacing:-.04em;color:var(--amarelo);margin-bottom:22px}
@supports (-webkit-text-stroke:1px #000){.princ .num{color:transparent;-webkit-text-stroke:1.5px var(--amarelo)}}
.princ h3{font-size:1.375rem;line-height:1.2}
.princ p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--txt-d)}
@media (min-width:640px){.princ{grid-template-columns:repeat(2,1fr)}.princ li{border-top:0;border-left:1px solid var(--linha-d)}.princ li:nth-child(odd){border-left:0}.princ li:nth-child(n+3){border-top:1px solid var(--linha-d)}}
@media (min-width:1100px){.princ{grid-template-columns:repeat(4,1fr)}.princ li,.princ li:nth-child(n+3){border-top:0;border-left:1px solid var(--linha-d)}.princ li:first-child{border-left:0}.princ li{padding:32px 24px 36px}.princ p{font-size:15.5px}}

/* ---------- produtos + newsletter ---------- */
.duo{padding:0 0 var(--sec)}
.duo-grid{display:grid;grid-template-columns:1fr;gap:24px}
.prod{position:relative;border:1px solid var(--linha-d);padding:32px 24px;display:flex;flex-direction:column}
.prod .ficha,.news .ficha{margin-bottom:28px}
.prod>*{position:relative;z-index:1}
.prod{overflow:hidden}
.prod h2,.news h2{font-size:clamp(2.1rem,4.4vw,3.25rem);line-height:1.04}
.prod-txt,.news-txt{margin-top:18px;font-size:1.0625rem;line-height:1.55}
.prod-txt{color:var(--txt-d)}
.prod-list{margin:28px 0;border-top:1px solid var(--linha-d);border-bottom:1px solid var(--linha-d)}
.prod-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:18px 0;font-weight:700;font-size:17px;line-height:1.35}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:2px 10px;border:1px solid var(--amarelo);color:var(--amarelo);border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.btn-out{margin-top:auto;position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;min-height:52px;padding:12px 22px;border:2px solid var(--branco);border-radius:4px;color:var(--branco);font-weight:700;font-size:16px;line-height:1.25;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}
.btn-out:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--tinta)}
.news{padding:32px 24px 36px}
.news-txt{max-width:44ch}
@media (min-width:768px){.prod,.news{padding:44px 40px 48px}}
@media (min-width:900px){
  .duo-grid{grid-template-columns:repeat(12,1fr);column-gap:24px}
  .prod{grid-column:1/6}
  .news{grid-column:6/13}
}
.news form{margin-top:26px;display:grid;gap:18px}
.campo label{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.campo input,.isca input{width:100%;min-height:54px;padding:12px 14px;font:inherit;font-size:17px;color:var(--tinta);background:var(--branco);border:2px solid var(--tinta);border-radius:4px;-webkit-appearance:none;appearance:none}
.news :focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.campo input:focus-visible{outline-offset:2px;box-shadow:none;border-color:var(--tinta)}
.campo input[aria-invalid="true"]{border-width:4px;padding:10px 12px}
.erro{margin-top:8px;font-weight:700;font-size:15px;display:flex;gap:8px;align-items:flex-start}
.erro::before{content:"!";flex:none;width:22px;height:22px;border-radius:50%;background:var(--tinta);color:var(--amarelo);display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1}
.erro[hidden],.aviso[hidden],.ok[hidden]{display:none}
.chk{display:flex;align-items:flex-start;gap:14px;min-height:44px;cursor:pointer;font-size:16px;line-height:1.4;font-weight:400}
.chk input{flex:none;width:26px;height:26px;margin:0;accent-color:var(--tinta);cursor:pointer}
.chk span{padding-top:2px}
.btn-sub{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:14px 28px;background:var(--tinta);color:var(--branco);font:inherit;font-weight:700;font-size:17px;border:2px solid var(--tinta);border-radius:4px;cursor:pointer;width:100%}
.btn-sub::after{content:"›";font-size:1.35em;line-height:1;margin-top:-.08em}
.btn-sub:hover{background:var(--branco);color:var(--tinta)}
.btn-sub[disabled]{opacity:.75;cursor:progress}
.btn-sub[disabled]::after{content:none}
@media (min-width:600px){.btn-sub{width:auto;justify-self:start;min-width:260px}}
.aviso{font-weight:700;font-size:15px;padding:12px 14px;border:2px solid var(--tinta);border-radius:4px}
.mini{font-size:13.5px;line-height:1.5;max-width:56ch}
.mini a{font-weight:700}
.ok{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.2;margin-top:26px;padding:24px 0;border-top:2px solid var(--tinta);max-width:24ch}
.ok:focus{outline:none}
/* isca para robôs: fora da tela, sem display:none */
.isca{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- instagram ---------- */
.insta{border-top:1px solid var(--linha-d)}
.insta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-top:28px;padding-bottom:28px}
.insta p{font-weight:700;font-size:1.125rem;max-width:none}
.site-foot{border-top:1px solid var(--linha-d)}

/* ---------- camada gráfica e movimento ---------- */
.malha{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px}
.hero-top{--mh:min(92vw,440px);overflow:hidden}
@media (min-width:768px) and (max-width:899px){.hero-top{--mh:420px}}

/* mídia do hero: aceita <img> ou <video> na mesma caixa */
.hero-media>img,.hero-media>video{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:50% 58%;transform:translate3d(0,var(--py,0px),0);animation:zoom 16s ease-in-out infinite alternate;will-change:transform}
@keyframes zoom{from{scale:1}to{scale:1.06}}
@media (min-width:900px){.hero-media>img,.hero-media>video{object-position:48% 50%}}

/* vídeo do hero: entra com fade sobre a foto; o zoom da foto para */
.hero-media>video{opacity:0;transition:opacity .6s var(--e);animation:none;pointer-events:none}
.hero-media.vid>video{opacity:1}
.hero-media.vid>img{animation:none}

/* desenho técnico */
.bp{position:absolute;pointer-events:none;z-index:0;overflow:visible}
.bp .lines{opacity:.13}
.bp .l{vector-effect:non-scaling-stroke}
.bp .axis{opacity:.1;vector-effect:non-scaling-stroke}
.bp .nodes{opacity:.85}
.js .bp .l{stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 1.6s var(--e) var(--bd,0ms)}
.js .bp.on .l{stroke-dashoffset:0}
.js .bp .axis{opacity:0;transition:opacity 1.2s var(--e) 1s}
.js .bp.on .axis{opacity:.1}
.js .bp .n{opacity:0;transition:opacity .4s var(--e) var(--nd,0ms)}
.js .bp.on .n{opacity:1}
.bp-hero{left:var(--gut);top:18px;width:42%;height:calc(var(--mh)*.4);z-index:2}
.bp-hero .lines{opacity:.42}
.bp-prod{right:-12%;bottom:-6%;width:96%;height:58%;opacity:1}
.bp-prod .lines{opacity:.11}
@media (min-width:900px){.bp-hero{left:59.2%;top:15%;width:19.5%;height:40%}}
.hero-grid{z-index:1}
.prod-sym{width:176px;height:176px;margin:0 0 28px auto}

/* cartão do prompt */
.prompt{position:absolute;z-index:3;left:var(--gut);top:calc(var(--mh) - 44px);max-width:calc(100% - var(--gut)*2);display:flex;align-items:flex-start;gap:12px;padding:15px 18px;background:var(--tinta);border:1px solid rgba(255,255,255,.3);border-radius:0;font-size:15px;line-height:1.35;color:var(--branco)}
.prompt .gt{color:var(--amarelo);font-weight:700;font-size:1.3em;line-height:1}
.pl{display:grid}
.pl>*{grid-area:1/1}
.sizer{visibility:hidden}
.typed{white-space:normal}
.cur{color:var(--amarelo);animation:pisca 1.1s steps(1,end) infinite}
@keyframes pisca{50%{opacity:0}}
.hero-grid{padding-top:72px}
@media (min-width:900px){
  .prompt{left:auto;right:calc(41.66% - 250px);top:auto;bottom:64px;font-size:17px;padding:18px 22px;max-width:none}
  .sizer,.typed{white-space:nowrap}
  .hero-grid{padding-top:0}
  .hero-txt{padding:88px 0 150px}
}

/* revelações */
.js [data-r]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s var(--e) var(--d,0ms),transform .7s var(--e) var(--d,0ms)}
.js [data-r].in{opacity:1;transform:none}
.js [data-clip] img{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--e)}
.js [data-clip].in img{clip-path:inset(0 0 0 0)}
.js .prompt[data-r]{transform:translate3d(0,24px,0)}

/* numeral grande da seção (coluna lateral, desktop) */
@media (min-width:900px){
  .bign{display:block;margin-top:14px;font-size:7.5rem;line-height:.85;font-weight:700;letter-spacing:-.05em;color:var(--amarelo)}
  .creme .bign{color:var(--tinta)}
  @supports (-webkit-text-stroke:1px #000){.bign{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5)}.creme .bign{color:transparent;-webkit-text-stroke:1.5px var(--tinta)}}
}

/* setas dos botões */
.btn::after,.btn-sub::after{transition:transform .2s var(--e)}
.btn:hover::after,.btn-sub:hover::after{transform:translateX(4px)}

/* movimento reduzido: tudo parado e visível */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js [data-r]{opacity:1!important;transform:none!important}
  .js [data-clip] img{clip-path:none!important}
  .js .bp .l{stroke-dashoffset:0!important}
  .js .bp .n{opacity:1!important}
  .js .bp .axis{opacity:.1!important}
  .hero-media>img,.hero-media>video{transform:none}
  .ficha::after{transform:none!important}
  .track{width:auto}
  .ribbon ul[aria-hidden]{display:none}
  .ribbon ul{flex-wrap:wrap;white-space:normal;gap:4px 0}
  .ribbon li:last-child::after{content:none}
}

/* ---------- produtos e newsletter em paleta clara ---------- */
.duo.creme{padding:var(--sec) 0}
.duo.creme .malha{background-image:linear-gradient(rgba(35,17,20,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(35,17,20,.05) 1px,transparent 1px)}
.duo.creme .prod{border-color:rgba(35,17,20,.22)}
.duo.creme .prod-txt{color:var(--tinta)}
.duo.creme .prod-list{border-color:rgba(35,17,20,.22)}
.duo.creme .tag{background:var(--amarelo);border-color:var(--tinta);color:var(--tinta)}
.duo.creme .btn-out{border-color:var(--tinta);color:var(--tinta);background:var(--creme)}
.duo.creme .btn-out:hover{background:var(--tinta);border-color:var(--tinta);color:var(--branco)}
.duo.creme .bp .lines,.duo.creme .bp .axis{stroke:var(--tinta)}
.duo.creme .bp-prod .lines{opacity:.2}
.duo.creme .bp .n{stroke:var(--tinta);stroke-width:1.5;vector-effect:non-scaling-stroke}
.duo.creme .news{background:var(--branco);color:var(--tinta);border:2px solid var(--tinta)}
.duo.creme .news .ficha::before{content:""}