/* Movimento, microinterações e ajustes de layout da página inicial. Carregado por último. */
:root{--ease-out:cubic-bezier(.2,.75,.2,1);--brand:#e0231e}

/* Progresso de leitura e cabeçalho compacto */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:40;background:linear-gradient(90deg,#ff5a4f,var(--brand));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
header{transition:box-shadow .3s,background-color .3s}
header .nav{transition:height .35s var(--ease-out)}
/* O fundo continua no cinza do logotipo (#3a3a3a); ao rolar, só ganha sombra. */
.is-scrolled header{background:#3a3a3a;box-shadow:0 10px 30px #0000002e}
@media(min-width:781px){.is-scrolled header .nav{height:70px}}

/* Menu: sublinhado animado e seção atual */
@media(min-width:781px){
 #main-nav a:not(.mobile-contact){position:relative;transition:color .2s}
 #main-nav a:not(.mobile-contact)::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
 #main-nav a:hover::after,#main-nav a.is-current::after{transform:scaleX(1);transform-origin:left}
 #main-nav a.is-current{color:#fff}
}
#main-nav a.is-current{font-weight:600}

/* Botões: brilho ao passar o mouse e efeito magnético */
.button,.lab-button,.story-button{position:relative;overflow:hidden;isolation:isolate}
.button::before,.lab-button::before,.story-button::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff40 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.button:hover::before,.lab-button:hover::before,.story-button:hover::before{transform:translateX(120%)}
.button.light::before{background:linear-gradient(110deg,transparent 30%,#ed292422 50%,transparent 70%)}
.magnetic{transform:translate(var(--tx,0),var(--ty,0));transition:transform .25s var(--ease-out),background .2s}
.magnetic.button:hover{transform:translate(var(--tx,0),calc(var(--ty,0px) - 2px))}
.button svg,.text-link svg,.card-link svg{transition:transform .3s var(--ease-out)}
.button:hover svg,.text-link:hover svg{transform:translateX(4px)}

/* Revelação ao rolar */
.rv{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.rv.rv-in{opacity:1;transform:none}
.rv-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:calc(var(--i,0) * 50ms)}
.rv-stagger.rv-in>*{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>span{display:inline-block;transform:translateY(110%);transition:transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 30ms)}
.split.rv-in .w>span{transform:none}

/* Luz que segue o cursor */
.spot{position:relative;isolation:isolate}
.spot::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),#ed29241c,transparent 55%);opacity:0;transition:opacity .35s}
.spot:hover::after{opacity:1}
.need-options button.spot::after,.lab-small.spot::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#ff4a3f30,transparent 60%)}

/* Carrossel: troca com fade, zoom lento da arte, barra de tempo e pausa */
.technology-carousel .campaign-slide{transition:opacity .8s var(--ease-out),visibility .8s}
.technology-carousel .campaign-slide[hidden]{opacity:0}
.technology-carousel .campaign-art{position:relative;overflow:hidden}
.technology-carousel .campaign-slide.is-active .campaign-art img{animation:art-zoom 9s var(--ease-out) both}
.technology-carousel .campaign-slide.is-active .campaign-info>div>*,.technology-carousel .campaign-slide.is-active .campaign-links{animation:caption-in .8s var(--ease-out) both}
.technology-carousel .campaign-slide.is-active .campaign-info h2{animation-delay:.08s}
.technology-carousel .campaign-slide.is-active .campaign-info p{animation-delay:.16s}
.technology-carousel .campaign-slide.is-active .campaign-links{animation-delay:.24s}
.carousel-select button{position:relative;overflow:hidden;transition:color .2s,border-color .2s,background .2s}
.carousel-select button::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:#ff5146;transform:scaleX(0);transform-origin:left}
.technology-carousel.is-cycling .carousel-select button[aria-pressed=true]::after{animation:slide-timer 7s linear forwards}
.technology-carousel.is-paused .carousel-select button[aria-pressed=true]::after{animation-play-state:paused}
.carousel-select button:hover{color:#fff;border-color:#ffffff55}
.carousel-controls .carousel-toggle{font-size:12px;letter-spacing:-1px;min-width:46px;padding:10px}
.carousel-controls .carousel-toggle:hover{background:#ffffff14;color:#fff}
@keyframes art-zoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes caption-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes slide-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Marcas: cinza elegante, cor ao passar o mouse */
.partner-logo{border-radius:12px;transition:transform .35s var(--ease-out)}
.partner-logo img{filter:grayscale(1) contrast(.9);opacity:.72;transition:filter .4s,opacity .4s,transform .4s var(--ease-out)}
.partner-logo:hover img{filter:none;opacity:1;transform:scale(1.05)}
@media(hover:none){.partner-logo img{filter:none;opacity:1}}

/* Seletor de necessidades */
.need-options button{position:relative;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease-out),box-shadow .25s}
.need-options button>svg{width:30px;height:30px;color:#d62d24;flex:none;transition:transform .35s var(--ease-out)}
.need-options button:hover{transform:translateY(-3px);box-shadow:0 12px 26px #1b1d2012;border-color:#e7b7b3}
.need-options button:hover>svg{transform:scale(1.12) rotate(-6deg)}
.need-options button[aria-pressed=true]{transform:translateY(-3px)}
.need-options button[aria-pressed=true]>svg{color:#ff5146}
.need-result.is-switching>*{animation:caption-in .55s var(--ease-out) both}
.need-result.is-switching>a{animation-delay:.1s}
.need-result .need-tech{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0}
.need-result .need-tech span{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:#f7eeec;color:#8f1e19;font-size:12px;font-weight:700}
@media(max-width:780px){.need-options button>svg{display:block;margin-bottom:8px;width:26px;height:26px}}

/* Cartões de soluções */
.solution-card{overflow:hidden}
.solution-card .card-top>svg{transition:transform .45s var(--ease-out),background .3s,color .3s}
.solution-card:hover .card-top>svg{transform:translateY(-3px) rotate(-8deg);background:#d83128;color:#fff}
.solution-card:hover .card-link svg{transform:translateX(5px)}
.solution-card::before{content:'';position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#ff5146,#c41f1a);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.solution-card:hover::before{transform:scaleX(1)}

/* Laboratório Hikvision */
.lab-visual{isolation:isolate}
.lab-visual>img{transition:transform .2s linear;will-change:transform}
.lab-visual .lab-play{transition:transform .35s var(--ease-out),box-shadow .35s}
.lab-visual:hover .lab-play{transform:translateY(-4px);box-shadow:0 16px 30px #0006}
.lab-small{transition:transform .35s var(--ease-out),border-color .3s}
.lab-small:hover{transform:translateY(-4px);border-color:#ff817766}
.lab-small img{transition:transform .45s var(--ease-out)}
.lab-small:hover img{transform:scale(1.06)}

/* Apresentação da Innovex */
.story-photo{overflow:hidden}
.story-photo img{will-change:transform}
.story-benefits article{border-radius:10px;transition:background .3s}
.story-benefits article:hover{background:#ffffff12}

/* Instagram: os vídeos são verticais (9:16), então o quadro segue o formato do Reel */
.video-tile{aspect-ratio:9/14;border-radius:16px;box-shadow:0 18px 40px #11131514;transition:transform .45s var(--ease-out),box-shadow .45s}
.video-tile:hover{transform:translateY(-6px);box-shadow:0 26px 50px #1113152a}
.video-tile video{object-fit:cover}
.video-tile video[controls]{object-fit:contain}
.video-play{width:70px;height:70px;border-radius:50%;background:#ffffffe6;color:#d9231f;box-shadow:0 0 0 0 #ffffff66;animation:play-pulse 2.4s infinite}
.video-play:hover,.video-play:focus-visible{background:#d9231f;color:#fff}
.video-play svg{width:30px;height:30px}
@keyframes play-pulse{0%{box-shadow:0 0 0 0 #ffffff70}70%{box-shadow:0 0 0 18px #ffffff00}100%{box-shadow:0 0 0 0 #ffffff00}}
@media(min-width:781px){.instagram-grid{max-width:1040px;margin-inline:auto}}
@media(max-width:780px){.instagram-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;max-width:none;margin-inline:-20px;padding:6px 20px 18px;scrollbar-width:none}.instagram-grid::-webkit-scrollbar{display:none}.video-tile,.instagram-embed-tile{scroll-snap-align:center}}

/* Treinamentos: arte ampliada */
.event-poster{cursor:zoom-in}
.event-poster img{transition:transform .5s var(--ease-out)}
.event-poster:hover img{transform:scale(1.03)}
.lightbox{max-width:min(92vw,1100px);max-height:92vh;padding:0;border:0;border-radius:14px;background:#111;overflow:visible}
.lightbox::backdrop{background:#0b0c0ecc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox[open]{animation:pop-in .35s var(--ease-out)}
.lightbox img{display:block;max-width:100%;max-height:92vh;border-radius:14px}
.lightbox-close{position:absolute;top:-16px;right:-16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 18px #0005}
@keyframes pop-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* Mapa */
.location-map{transition:box-shadow .4s}
.location-map:hover{box-shadow:0 24px 50px #1b1d2018}

/* CTA final com brilho em movimento */
.final-cta{position:relative;overflow:hidden;isolation:isolate}
.final-cta::before{content:'';position:absolute;inset:-40% -10%;z-index:-1;background:radial-gradient(40% 60% at 20% 50%,#ffffff1f,transparent 70%),radial-gradient(35% 55% at 85% 40%,#00000026,transparent 70%);animation:glow-drift 14s ease-in-out infinite alternate}
@keyframes glow-drift{from{transform:translateX(-4%)}to{transform:translateX(6%)}}

/* Botões flutuantes (computador): WhatsApp e voltar ao topo com anel de progresso */
.float-dock{position:fixed;right:24px;bottom:24px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:12px;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease-out)}
.float-dock.is-visible{opacity:1;transform:none;pointer-events:auto}
.fab-whatsapp{display:flex;align-items:center;gap:0;height:58px;padding:0 17px;border-radius:999px;background:#1faf54;color:#fff;font-weight:700;font-size:14px;box-shadow:0 12px 30px #1faf5455;transition:gap .35s var(--ease-out),padding .35s var(--ease-out),opacity .3s,transform .3s}
.fab-whatsapp svg{width:24px;height:24px;stroke-width:1.8}
.fab-whatsapp span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .45s var(--ease-out)}
.fab-whatsapp:hover,.fab-whatsapp:focus-visible{gap:10px;padding:0 22px}
.fab-whatsapp:hover span,.fab-whatsapp:focus-visible span{max-width:220px}
.fab-whatsapp::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 #1faf5480;animation:fab-ring 2.8s infinite;pointer-events:none}
.fab-whatsapp{position:relative}
.fab-whatsapp.is-muted{opacity:0;transform:scale(.8);pointer-events:none}
@keyframes fab-ring{0%{box-shadow:0 0 0 0 #1faf5470}70%{box-shadow:0 0 0 16px #1faf5400}100%{box-shadow:0 0 0 0 #1faf5400}}
.to-top{--p:0;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#2c2d2f;color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 24px #0003;transition:background .2s,transform .3s var(--ease-out)}
.to-top:hover{background:#d9231f;transform:translateY(-3px)}
.to-top svg{width:44px;height:44px;stroke-width:2}
.to-top .ring-bg{stroke:#ffffff26}
.to-top .ring{stroke:#ff5146;stroke-dasharray:113.1;stroke-dashoffset:calc(113.1 * (1 - var(--p)));transform:rotate(-90deg);transform-origin:50% 50%}
.to-top:hover .ring{stroke:#fff}
@media(max-width:780px){.float-dock{display:none}}

/* Acessibilidade: sem movimento para quem prefere */
@media(prefers-reduced-motion:reduce){
 .rv,.rv-stagger>*,.split .w>span{opacity:1!important;transform:none!important;transition:none!important}
 .technology-carousel .campaign-slide.is-active .campaign-art img,.technology-carousel .campaign-slide.is-active .campaign-info>div>*,.technology-carousel .campaign-slide.is-active .campaign-links,.need-result.is-switching>*,.video-play,.fab-whatsapp::after,.final-cta::before,.lightbox[open]{animation:none!important}
 .technology-carousel .campaign-slide,.magnetic,.video-tile,.lab-small,.need-options button{transition:none!important;transform:none!important}
}

/* Aviso de cookies (LGPD) */
.consent{position:fixed;left:24px;bottom:24px;z-index:45;display:flex;align-items:center;gap:22px;max-width:640px;padding:18px 20px;border-radius:14px;background:#1c1d1f;color:#e9eaec;box-shadow:0 18px 44px #0006;font-size:14px;line-height:1.55;animation:caption-in .5s var(--ease-out) both}
.consent[hidden]{display:none}
.consent p{margin:0}.consent a{color:#fff;text-decoration:underline}
.consent div{display:flex;gap:8px;flex:none}
.consent button{font:700 14px var(--font);min-height:44px;padding:10px 18px;border-radius:8px;cursor:pointer}
.consent-primary{background:#d9231f;border:1px solid #d9231f;color:#fff}.consent-primary:hover{background:#ba1c18}
.consent-secondary{background:transparent;border:1px solid #6b6e73;color:#fff}.consent-secondary:hover{background:#ffffff14}
.consent-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media(max-width:780px){.consent{left:12px;right:12px;bottom:12px;flex-direction:column;align-items:stretch;gap:14px}.consent div button{flex:1}body:has(.mobile-budget) .consent{bottom:76px}}

/* Link "Ir para o conteúdo": só aparece para quem navega pelo teclado, com visual da marca. */
.skip-link{z-index:60;border-radius:8px;font-weight:700;font-size:14px;padding:10px 16px;background:#d9231f;color:#fff;box-shadow:0 10px 24px #0004}
.skip-link:focus{top:12px;left:12px}
.skip-link:focus:not(:focus-visible){top:-100px}
