/* Craft v2 (06/10/2026): sistema de movimento unico, contraste AA nos tiles vermelhos,
   listas sem numeral fora de sequencia real, card de resultado no portfolio.
   Carregada por ultimo em todas as paginas. Nao redefine layout. */

:root{--rs-ease:cubic-bezier(.22,1,.36,1);--rs-fast:.18s;--rs-base:.32s;--rs-red-aa:#dc1437}

/* 1. Sistema de movimento: 180 ms para hover, 320 ms para imagem, uma curva. */
a,button,summary,[role=button]{transition:color var(--rs-fast) var(--rs-ease),background-color var(--rs-fast) var(--rs-ease),border-color var(--rs-fast) var(--rs-ease),box-shadow var(--rs-fast) var(--rs-ease),opacity var(--rs-fast) var(--rs-ease),transform var(--rs-fast) var(--rs-ease)}
.audience-card,.continuity-piece,.project-option,.system-step,.footer-diagnosis,.audience-local,.audience-franchise,.portfolio-card figure,.case-images [data-artwork],.project-artwork.has-cover,.tabs button,.portfolio-filters button,.artwork-toolbar button,.project-dialog-close,.motion-toggle,.process-skip,.text-link,.audience-link,.audience-panel-cta,.footer-directory a,.footer-cta,.hero-floor a,.site-nav a,.header nav a,.nav-cta,.solid-link,.rs-button{transition:color var(--rs-fast) var(--rs-ease),background-color var(--rs-fast) var(--rs-ease),border-color var(--rs-fast) var(--rs-ease),box-shadow var(--rs-fast) var(--rs-ease),opacity var(--rs-fast) var(--rs-ease),transform var(--rs-fast) var(--rs-ease)}
.hive-cell img,.showcase-tile img,.portfolio-card img,.client-gallery-item img,.project-artwork.has-cover img,.continuity-piece img,.audience-card img,.case-images [data-artwork] img{transition:transform var(--rs-base) var(--rs-ease),filter var(--rs-fast) var(--rs-ease),opacity var(--rs-fast) var(--rs-ease)}
.audience-panel-cta svg,.portfolio-card .rs-approved-icon,.hero-cta-icon,.solid-link svg,.text-link svg{transition:transform var(--rs-fast) var(--rs-ease),background-color var(--rs-fast) var(--rs-ease),color var(--rs-fast) var(--rs-ease)}
/* Faixas infinitas e o palco animado sao do GSAP ou de keyframes: sem transicao concorrente. */
.showcase-track,.client-gallery-track,.hive-cell,.hive-slot{transition:none}

/* Nav: a largura nao anima (layout). So o fundo. */
.nav-shell{transition:background-color var(--rs-fast) var(--rs-ease),box-shadow var(--rs-fast) var(--rs-ease)}

/* 2. Contraste: texto branco pequeno sobre o vermelho de marca fica em 4,23:1. Nos tiles de numero e no botao do hero, o fundo desce para #dc1437 (5,0:1). O vermelho de marca segue nas formas, simbolos e detalhes. */
.showcase-number.metric-red{background:var(--rs-red-aa)}
.hero-v48 .hero-cta{background:var(--rs-red-aa)}
.hero-v48 .hero-cta:hover{background:#c81334}
.internas-v52 .v52-button,.contact-form button[type=submit]{background:#c4102d;border-color:#c4102d}

/* 3. Listas que nao sao sequencia: traco curto no lugar do numeral. */
.craft-list li{position:relative}
.craft-list.principles li{grid-template-columns:1fr}
.craft-list.principles li>div{padding-left:40px}
.craft-list.principles li>div:before{content:'';position:absolute;left:0;top:34px;width:24px;height:2px;background:var(--red,#f01e41)}
.craft-list.v52-contact-steps li{padding-left:40px}
.craft-list.v52-contact-steps li:before{content:'';position:absolute;left:0;top:50%;width:24px;height:2px;background:var(--v52-bright,#f01e41)}

/* 4. Portfolio: segundo card de resultado no mesmo formato do primeiro. */
.internas-v52 .v52-result-poster{margin:0;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:400px;padding:24px;background:#111010;color:#f5f3ee;border:1px solid #111010;border-radius:16px;overflow:hidden;background-image:radial-gradient(#f01e4126 .7px,transparent .9px);background-size:16px 16px}
.internas-v52 .v52-result-poster-top{display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#d8d2c8}
.internas-v52 .v52-result-poster-top img{display:block;height:24px;width:auto;filter:brightness(0) invert(1)}
.internas-v52 .v52-result-poster-top span:first-child{font-weight:600;color:#f5f3ee;letter-spacing:0;text-transform:none;font-size:16px}
.internas-v52 .v52-result-poster-body{display:grid;grid-template-columns:1fr;gap:24px;align-items:end}
.internas-v52 .v52-result-poster-main strong{display:block;font:500 80px/1 var(--display);letter-spacing:-.04em}
.internas-v52 .v52-result-poster-main strong i{font-style:normal;color:#ff5470}
.internas-v52 .v52-result-poster-main p{margin:8px 0 0;font-size:18px;line-height:1.4;max-width:24ch}
.internas-v52 .v52-result-poster-side{border-top:1px solid #f5f3ee33;padding-top:16px}
.internas-v52 .v52-result-poster-side strong{display:block;font:500 32px/1.1 var(--display);letter-spacing:-.02em;color:#ff5470}
.internas-v52 .v52-result-poster-side p{margin:8px 0 0;font-size:14px;line-height:1.5;color:#d8d2c8;max-width:22ch}
.internas-v52 .v52-result-poster-foot{display:grid;gap:8px;font-size:14px;line-height:1.5;border-top:1px solid #f5f3ee33;padding-top:16px}
.internas-v52 .v52-result-poster-foot small{font-size:12px;line-height:1.5;color:#b8b1a6}
.internas-v52 .portfolio-card:hover .v52-result-poster{border-color:var(--v52-red)}
@media(min-width:768px){
  .internas-v52 .portfolio-grid .portfolio-card.v52-featured{display:grid!important;grid-column:1/-1!important;grid-template-columns:8fr 4fr;gap:32px;align-items:end}
  .internas-v52 .portfolio-grid .portfolio-card.v52-featured[hidden]{display:none!important}
  .internas-v52 .portfolio-grid .portfolio-card.v52-featured .portfolio-card-caption{padding-bottom:24px}
  .internas-v52 .v52-result-poster{min-height:480px;padding:32px}
  .internas-v52 .v52-result-poster-body{grid-template-columns:7fr 5fr;gap:32px}
  .internas-v52 .v52-result-poster-side{border-top:0;border-left:1px solid #f5f3ee33;padding:0 0 0 32px}
  .internas-v52 .v52-result-poster-main strong{font-size:128px}
  .internas-v52 .v52-result-poster-foot{grid-template-columns:1fr 1fr;gap:24px}
}

/* 5. Movimento reduzido: tudo acima vira troca instantanea. */
@media(prefers-reduced-motion:reduce){
  a,button,summary,[role=button],.craft-list li,.audience-card,.portfolio-card figure,.portfolio-card img,.showcase-tile img,.hive-cell img{transition-duration:.01ms!important}
}

/* 6. B-roll nos tiles de site do hero: video mudo em loop sobre o poster. Some em movimento reduzido. */
.showcase-tile.tile-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--rs-base) var(--rs-ease);z-index:1;pointer-events:none}
.showcase-tile.tile-video.is-playing video{opacity:1}
.showcase-tile.tile-video .showcase-label{z-index:2}
.showcase-tile.tile-video:hover video{transform:scale(1.035);transition:transform var(--rs-base) var(--rs-ease),opacity var(--rs-base) var(--rs-ease)}
@media(prefers-reduced-motion:reduce){.showcase-tile.tile-video video{display:none}}

/* 7. Parede do hero em duas colunas: tiles mais largos e os de vídeo em 4:5, para o clipe caber inteiro. */
.hero-showcase.hero-showcase-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-showcase-2col .showcase-tile.tile-video{height:auto;aspect-ratio:4/5}
.hero-showcase-2col .showcase-tile.tile-video img,.hero-showcase-2col .showcase-tile.tile-video video{object-position:center top}
.hero-showcase-2col .column-1 .showcase-track{animation-name:showcase-down;animation-duration:34s}
.hero-showcase-2col .column-0 .showcase-track{animation-duration:30s}

/* 8. Cartoes de numero v5: poster tipografico engineered. Estado de repouso = estado final (nunca fica vazio). A cena GSAP roda a partir dele quando o cartao entra na faixa visivel. */
.hero-showcase-motion .showcase-number.metric-v5{position:relative;height:auto;aspect-ratio:4/5;padding:24px;display:flex;flex-direction:column;gap:0;overflow:hidden;isolation:isolate;border-radius:8px;font-family:var(--display)}
.hero-showcase-motion .metric-v5.m-ink{background:#141312;color:#f5f3ee;--acc:#f01e41;--acc-soft:#f01e4133;--line:#f5f3ee24;--mute:#aaa59c;box-shadow:inset 0 0 0 1px #ffffff14}
.hero-showcase-motion .metric-v5.m-red{background:var(--rs-red-aa);color:#fff;--acc:#fff;--acc-soft:#ffffff4d;--line:#ffffff40;--mute:#ffd6dd}
.hero-showcase-motion .metric-v5.m-paper{background:#efece4;color:#171716;--acc:#c4102d;--acc-soft:#c4102d2b;--line:#17171626;--mute:#5a544c}
.hero-showcase-motion .metric-v5::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;opacity:.35;mask-image:linear-gradient(#000 0%,transparent 70%);pointer-events:none}
.hero-showcase-motion .metric-v5 .m-kicker{display:flex;align-items:center;gap:8px;font:600 11px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);position:relative;z-index:2}
.hero-showcase-motion .metric-v5 .m-kicker b{display:block;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.hero-showcase-motion .metric-v5 strong{display:flex;align-items:flex-start;gap:0;margin:auto 0 0 -4px;font:600 clamp(80px,9.2vw,136px)/.92 var(--display);letter-spacing:-.06em;font-variant-numeric:tabular-nums;position:relative;z-index:2}
.hero-showcase-motion .metric-v5 .num{display:inline-flex;height:.92em;overflow:hidden;line-height:.92}
.hero-showcase-motion .metric-v5 .roll{display:inline-block;width:.58em;height:.92em;overflow:hidden;text-align:center}
.hero-showcase-motion .metric-v5 .roll-track{display:block;transform:translateY(calc(var(--d,0) * -.92em))}
.hero-showcase-motion .metric-v5 .roll-track i{display:block;height:.92em;line-height:.92;font-style:normal}
.hero-showcase-motion .metric-v5 .sep{display:inline-block;width:.26em;text-align:center}
.hero-showcase-motion .metric-v5 .suffix{font-size:.4em;line-height:1;margin-top:.1em;margin-left:.04em;white-space:nowrap;color:var(--acc);font-weight:500}
.hero-showcase-motion .metric-v5 .m-viz{position:relative;z-index:2;height:56px;margin:16px 0 12px}
.hero-showcase-motion .metric-v5 .m-label{font:500 18px/1.25 var(--display);letter-spacing:-.01em;margin:0;max-width:16ch;position:relative;z-index:2}
.hero-showcase-motion .metric-v5 .m-sub{display:flex;justify-content:space-between;gap:8px;font:500 11px/1.4 var(--display);letter-spacing:.02em;color:var(--mute);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);position:relative;z-index:2}
.hero-showcase-motion .metric-v5 .m-sub svg{width:14px;height:14px;flex:none;color:var(--acc)}
/* 30+ regua */
.v-ruler{display:flex;align-items:flex-end;gap:4px;height:100%}
.v-ruler i{flex:1;height:40%;background:var(--acc);transform-origin:bottom}
.v-ruler i:nth-child(5n){height:70%}
/* 750+ linha do tempo */
.v-time{position:relative;height:100%}
.v-time .v-axis{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line)}
.v-time .v-fill{position:absolute;left:0;right:0;top:21px;height:3px;background:var(--acc);transform-origin:left}
.v-time .v-cursor{position:absolute;left:100%;top:16px;width:13px;height:13px;margin-left:-7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.v-time .v-tick{position:absolute;left:var(--x);top:16px;width:1px;height:13px;background:var(--line)}
.v-time .v-tick em{position:absolute;top:18px;left:0;transform:translateX(-50%);font:500 10px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-style:normal}
.v-time .v-tick:first-child em{transform:none}.v-time .v-tick:last-child em{transform:translateX(-100%)}
/* 10+ arco */
.v-arc{position:absolute;right:0;bottom:-2px;height:64px;width:auto;overflow:visible}
.v-arc .track{fill:none;stroke:var(--line);stroke-width:2}
.v-arc .fill{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:0}
.v-arc .tick{stroke:var(--acc);stroke-width:2;stroke-linecap:round}
/* 1,9 mil grafico */
.v-chart{position:relative;height:100%}
.v-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v-chart .grid{stroke:var(--line);stroke-width:1}
.v-chart .area{fill:var(--acc-soft)}
.v-chart .line{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round}
.v-chart .v-scan{position:absolute;top:-4px;bottom:-4px;left:100%;width:1px;background:var(--acc);opacity:0}
.v-chart .v-end{position:absolute;right:-5px;top:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--acc);transform:translateY(6px)}
@media(max-width:767px){.hero-showcase-motion .metric-v5{padding:16px}.hero-showcase-motion .metric-v5 .m-label{font-size:14px}.hero-showcase-motion .metric-v5 .m-viz{height:44px;margin:12px 0 8px}}

/* 9. Painéis "Para quem fazemos": dois sites em vídeo lado a lado, sem inclinação. */
.audience-panel-visual{gap:16px}
.audience-panel-visual .audience-clips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;flex:1;min-height:0}
.audience-clip{position:relative;display:block;height:100%;min-height:320px;border-radius:8px;overflow:hidden;background:#111010;isolation:isolate;box-shadow:0 24px 48px #00000040}
@media(max-width:1023px){.audience-clip{height:auto;aspect-ratio:4/5;min-height:0}}
@media(min-width:1024px){.audience-panel{grid-template-columns:4fr 8fr}.audience-panel-local{grid-template-columns:8fr 4fr}.audience-panel-visual{padding:24px}.audience-panel-visual figcaption{padding-top:12px}.audience-clip img,.audience-clip video{object-position:center center}}
.audience-panel-local .audience-clip{box-shadow:0 24px 48px #241d1526}
.audience-clip img,.audience-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.audience-clip video{opacity:0;transition:opacity var(--rs-base) var(--rs-ease);z-index:1;pointer-events:none}
.audience-clip.is-playing video{opacity:1}
.audience-clip-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 16px 14px;font:500 12px/1.4 var(--display);color:#fff;background:linear-gradient(transparent,#11101099);opacity:0;transition:opacity var(--rs-fast) var(--rs-ease)}
.audience-clip:hover .audience-clip-label,.audience-clip:focus-visible .audience-clip-label{opacity:1}
.audience-clip:hover video,.audience-clip:hover img{transform:scale(1.02);transition:transform var(--rs-base) var(--rs-ease),opacity var(--rs-base) var(--rs-ease)}
.audience-clip:focus-visible{outline:2px solid var(--panel-label);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.audience-clip video{display:none}}

/* 10. Portfólio: cards de resultado com o vídeo de número em 4:5, ao lado da legenda. */
.internas-v52 .portfolio-grid .portfolio-card.v52-video-card{display:grid!important;grid-column:1/-1!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:end}
.internas-v52 .v52-metric-video{position:relative;margin:0;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#111010;border:1px solid var(--v52-line)}
.internas-v52 .v52-metric-video img,.internas-v52 .v52-metric-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.internas-v52 .v52-metric-video video{opacity:0;transition:opacity var(--rs-base) var(--rs-ease)}
.internas-v52 .v52-metric-video.is-playing video{opacity:1}
.internas-v52 .portfolio-card.v52-video-card:hover .v52-metric-video{border-color:var(--v52-red)}
@media(max-width:767px){.internas-v52 .portfolio-grid .portfolio-card.v52-video-card{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){.internas-v52 .v52-metric-video video{display:none}}

/* 11. Portfolio com midia (08/10/2026): video nos cards menores e uma segunda peca nos destaques */
.internas-v52 .portfolio-card figure.v52-card-video{position:relative;aspect-ratio:1440/1000;background:#111010}
.internas-v52 .portfolio-card[href="projeto-rockscale.html"] figure.v52-card-video{aspect-ratio:1400/788}
.internas-v52 .v52-card-video img,.internas-v52 .v52-card-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.internas-v52 .v52-card-video video{opacity:0;transition:opacity var(--rs-base) var(--rs-ease)}
.internas-v52 .v52-card-video.is-playing video{opacity:1}
/* Destaques: video do numero a esquerda, peca do case + legenda a direita */
@media(min-width:768px){
 .internas-v52 .portfolio-grid .portfolio-card.v52-video-card{grid-template-rows:minmax(0,1fr) auto;align-items:stretch;row-gap:24px}
 .internas-v52 .v52-video-card>.v52-metric-video{grid-row:1/3}
 .internas-v52 .v52-video-card>.v52-card-extra{grid-column:2;grid-row:1}
 .internas-v52 .v52-video-card>.v52-card-caption{grid-column:2;grid-row:2}
}
.internas-v52 .v52-card-extra{display:flex;flex-direction:column;gap:16px;min-width:0}
.internas-v52 .v52-extra-kicker{margin:0;font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--v52-muted,#5d5850)}
.internas-v52 .v52-extra-media{position:relative;flex:1;min-height:240px;margin:0;border-radius:16px;overflow:hidden;background:#111010;border:1px solid var(--v52-line)}
.internas-v52 figure.v52-extra-media.v52-card-video{aspect-ratio:auto}
/* Faixa de anuncios da My Robot */
.internas-v52 .v52-ads-strip{display:flex;align-items:center;background:#1a1410}
.internas-v52 .v52-ads-track{display:flex;width:max-content;animation:v52-ads 48s linear infinite}
.internas-v52 .v52-ads-group{display:flex;gap:16px;padding-right:16px}
.internas-v52 .v52-ads-group img{display:block;height:min(400px,calc(100% - 48px));width:auto;aspect-ratio:3/4;border-radius:8px;object-fit:cover}
.internas-v52 .v52-ads-strip{padding-block:24px}
.internas-v52 .v52-ads-strip .v52-ads-group img{height:auto;width:240px}
.internas-v52 .v52-video-card:hover .v52-ads-track{animation-play-state:paused}
@keyframes v52-ads{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.internas-v52 .v52-ads-track{animation:none}}
@media(max-width:767px){.internas-v52 .v52-extra-media{min-height:200px;aspect-ratio:16/10}.internas-v52 .v52-ads-strip .v52-ads-group img{width:160px}}
.internas-v52 .v52-ads-group,.internas-v52 .v52-ads-group img{flex:none}
@media(max-width:767px){.internas-v52 .v52-card-extra{margin-top:24px}}

/* 12. Portfolio v2 (08/10/2026): pecas do case sem corte, Boteco em 16:9, Rockscale fecha a grade */
.internas-v52 figure.v52-extra-media.v52-card-video{flex:none;aspect-ratio:16/9;min-height:0}
.internas-v52 .v52-extra-media video,.internas-v52 .v52-extra-media img{object-fit:contain;background:#111010}
@media(min-width:768px){.internas-v52 .v52-video-card>.v52-card-extra{align-self:start}}
.internas-v52 .portfolio-card[href="projeto-boteco.html"] figure.v52-card-video{aspect-ratio:1400/788}
.internas-v52 .portfolio-grid .portfolio-card.v52-wide-card{grid-column:1/-1}
.internas-v52 .portfolio-card.v52-wide-card figure.v52-card-video{aspect-ratio:16/9}
@media(min-width:768px){.internas-v52 .portfolio-grid .portfolio-card.v52-wide-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end}}
.internas-v52 .portfolio-grid .portfolio-card.v52-wide-card{grid-column:1/-1!important}
@media(min-width:768px){.internas-v52 .portfolio-grid .portfolio-card.v52-wide-card{display:grid!important}}

/* 13. Sobre: parede de aplicacoes da marca no hero (08/10/2026). Duas colunas em sentidos opostos, como a parede da home. */
.about-wall .about-wall-frame{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;height:400px;overflow:hidden;border-radius:16px;background:#111010;padding:0 16px;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.about-wall .about-wall-col{min-width:0;overflow:hidden}
.about-wall .about-wall-track{display:flex;flex-direction:column;animation:about-up 40s linear infinite;will-change:transform}
.about-wall .about-wall-col:nth-child(2) .about-wall-track{animation-name:about-down;animation-duration:46s}
.about-wall .about-wall-group{display:flex;flex-direction:column;gap:16px;padding-bottom:16px}
.about-wall .about-wall-group img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.about-wall .about-wall-frame:hover .about-wall-track{animation-play-state:paused}
@keyframes about-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes about-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media(min-width:768px){.about-wall .about-wall-frame{height:520px}}
@media(min-width:1024px){.about-wall .about-wall-frame{height:600px}}
@media(prefers-reduced-motion:reduce){.about-wall .about-wall-track{animation:none}.about-wall .about-wall-group[aria-hidden]{display:none}}
.about-wall .about-wall-frame{-webkit-mask-image:none;mask-image:none;isolation:isolate}
.about-wall .about-wall-frame:before,.about-wall .about-wall-frame:after{content:'';position:absolute;left:0;right:0;height:64px;z-index:1;pointer-events:none}
.about-wall .about-wall-frame:before{top:0;background:linear-gradient(#111010,#11101000)}
.about-wall .about-wall-frame:after{bottom:0;background:linear-gradient(#11101000,#111010)}