/* ---------- Hero ---------- */
.hero{position:relative;height:calc(1193.76 * var(--s));background:var(--vermelho) url(assets/hero.jpg) center/cover no-repeat}
.nome{position:absolute;left:50%;top:calc(539.26 * var(--s));transform:translateX(-50%);display:flex;flex-direction:column;align-items:flex-end}
.nome h1{margin:0;font-weight:900;font-size:calc(173.63 * var(--s));letter-spacing:calc(-8.68 * var(--s));line-height:normal;white-space:nowrap;text-shadow:0 0 calc(68.18 * var(--s)) #000}
.nome p{margin:calc(-48 * var(--s)) 0 0;font-weight:500;font-size:calc(41.8 * var(--s));white-space:nowrap}
/* "veja mais": mesma barra do site no ar (localhost:5173, .scroll-indicator). */
.veja{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#888;transition:color .3s}
.veja:hover{color:var(--vermelho)}
.veja i{position:relative;display:block;width:1px;height:40px;background:rgba(255,0,79,.2);overflow:hidden}
.veja i::after{content:"";position:absolute;top:0;left:0;width:100%;height:50%;background:var(--vermelho)}
@media (prefers-reduced-motion:no-preference){
  .veja{opacity:0;animation:entra .6s cubic-bezier(.16,1,.3,1) 1.2s forwards}
  .veja i::after{animation:pinga 1.6s cubic-bezier(.4,0,.6,1) 1.8s infinite}
}
@keyframes entra{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pinga{0%{transform:translateY(-100%);opacity:1}80%{opacity:1}100%{transform:translateY(300%);opacity:0}}


/* Quem sou eu */
.sobre{padding-bottom:calc(85 * var(--s))}
.pilares{list-style:none;margin:calc(51 * var(--s)) 0 0;padding:0}
.pilares li{position:relative;display:flex;justify-content:space-between;align-items:center;height:calc(284.69 * var(--s));padding:0 calc(50 * var(--s));transition:background .25s,color .25s;cursor:default}
.pilares li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:.69px;background:var(--creme);transform-origin:left}
/* Entrada na 1ª rolagem: cada linha vem da esquerda, uma depois da outra, e o divisor se desenha junto. Só esconde com JS ativo (classe .js no <html>) e sem movimento reduzido. */
@media (prefers-reduced-motion: no-preference){
.js .pilares li > *{opacity:0;transform:translateX(calc(-240 * var(--s)));transition:opacity .7s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * .2s)}
.js .pilares li > span{transition-delay:calc(var(--i) * .2s + .1s)}
.js .pilares li::before{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * .2s - .1s)}
.js .pilares.entrou li > *{opacity:1;transform:none}
.js .pilares.entrou li::before{transform:none}
}
.pilares b{font-weight:700;font-size:calc(210 * var(--s));letter-spacing:calc(-10.5 * var(--s));line-height:normal}
.pilares span{width:calc(500 * var(--s));font-weight:500;font-size:calc(26 * var(--s));letter-spacing:calc(-1.3 * var(--s));line-height:1}
.pilares li:hover{background:var(--vermelho);color:var(--preto)}

/* Marcas */
.marcas{height:calc(390.63 * var(--s));padding-top:0;display:flex;flex-direction:column;justify-content:center}
.faixa{margin-left:calc(-1 * var(--margem));margin-right:calc(-1 * var(--margem));overflow:hidden;white-space:nowrap}
.faixa div{display:inline-flex;align-items:center;gap:calc(150 * var(--s));padding-right:calc(150 * var(--s));animation:rola 30s linear infinite}
/* Logos oficiais em cinza; no hover voltam à cor da marca. A faixa pausa para dar tempo de ver. */
/* Logo no preto da marca (branco vira o creme do fundo). No hover, a versão colorida aparece por cima. */
.faixa .logo{position:relative;display:block;flex:none}
/* --escala reduz todos os logos juntos sem mexer nas proporções entre eles. */
.faixa{--escala:.8}
.faixa .logo img{display:block;height:calc(var(--a) * var(--escala) * var(--s));width:auto}
.faixa .logo .cor{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.faixa .logo:hover .cor{opacity:1}
@keyframes rola{to{transform:translateX(-50%)}}

/* Cards */
.grade{display:grid;gap:calc(69.6 * var(--s)) calc(20 * var(--s));margin-top:calc(81 * var(--s))}
.grade + .grade{margin-top:calc(70 * var(--s))}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{display:block}
.capa{position:relative;overflow:hidden;background:var(--vermelho);aspect-ratio:910/670}
/* O vermelho só marca card ainda sem capa. Com capa ele vazava como linha, no arredondamento da altura. */
.capa:has(> img,> video){background:var(--preto)}
.g3 .capa{aspect-ratio:600/441.76}
.capa img,.capa video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Hover: imagem aproxima de leve e volta ao sair. */
.capa > img,.capa > video{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.card:hover .capa > img,.card:hover .capa > video{transform:scale(1.05)}
.card:hover .capa > .tela{transform:translate(-50%,-50%) scale(1.05)}
.capa::after{content:"";position:absolute;inset:0;border:calc(6 * var(--s)) solid transparent;transition:border-color .2s;pointer-events:none}
.card:hover .capa::after{border-color:var(--vermelho)}
.capa .sombra{position:absolute;inset:0;background:#828282;mix-blend-mode:multiply;opacity:0;transition:opacity .25s}
.capa .acao{position:absolute;left:calc(36 * var(--s));right:calc(36 * var(--s));bottom:calc(36 * var(--s));display:flex;align-items:flex-end;justify-content:flex-end;gap:calc(20 * var(--s));font-weight:500;font-size:calc(22 * var(--s));letter-spacing:calc(-.66 * var(--s));line-height:1}
/* Tags em caixas: sobem de baixo (mascaradas), uma depois da outra, e a seta entra por último. Se não couberem numa linha, as que sobram sobem (wrap-reverse). */
.capa .tags{display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;gap:calc(12 * var(--s))}
.capa .acao .mascara{display:block;overflow:hidden}
.capa .acao .txt{display:block;padding:calc(11 * var(--s)) calc(20 * var(--s));border:1px solid var(--creme);transform:translateY(110%);transition:transform .45s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 60ms)}
.capa .acao > img{position:static;flex:none;width:calc(30.85 * var(--s));height:auto;margin-bottom:calc(.5em + 1.17 * var(--s) + 1px);opacity:0;transform:translate(-40%,40%) rotate(-45deg);transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.card:hover .sombra{opacity:1}
.card:hover .acao .txt{transform:none}
.card:hover .acao > img{opacity:1;transform:rotate(-45deg);transition-delay:.3s}
.legenda{margin-top:calc(15.6 * var(--s));letter-spacing:calc(-1.3 * var(--s));line-height:1}
.legenda strong{display:block;font-weight:500;font-size:calc(26 * var(--s))}
.legenda small{display:block;margin-top:calc(10 * var(--s));font-size:calc(22 * var(--s));white-space:pre}
.cases{padding-bottom:calc(174 * var(--s))}
.ia{padding-bottom:calc(133 * var(--s))}
.ia .capa{background:var(--preto)}
.ia .capa .tela{position:absolute;inset:auto;left:50%;top:50%;width:86.06%;height:69.59%;transform:translate(-50%,-50%)}


@media (prefers-reduced-motion:reduce){.faixa div{animation:none}}

/* ---------- Celular ---------- */
@media (max-width:760px){
  .hero{height:calc(1500 * var(--s));background-position:50% center}
  .nome h1{font-size:calc(124 * var(--s));letter-spacing:calc(-6.2 * var(--s))}
  .nome p{font-size:calc(34 * var(--s));margin-top:calc(-34 * var(--s))}
  .pilares li{flex-direction:column;align-items:flex-start;justify-content:center;gap:calc(10 * var(--s));height:auto;padding:calc(40 * var(--s)) calc(30 * var(--s))}
  .pilares b{font-size:calc(160 * var(--s))}
  .pilares span{width:auto;font-size:calc(32 * var(--s))}
  .legenda strong{font-size:calc(38 * var(--s))}
  .legenda small{font-size:calc(32 * var(--s))}
  .g2,.g3{grid-template-columns:1fr;row-gap:calc(60 * var(--s))}
  .faixa{margin-left:-16px;margin-right:-16px}
  .capa .acao{font-size:calc(34 * var(--s))}
}