/* IB Elevadores: identidade modernizada a partir do logo original (azul #0808c8 e vermelho #f9040b). */
:root{
 --azul-noite:#0b1a6e;
 --azul:#1b2fc9;
 --azul-claro:#e8ecff;
 --vermelho:#c8101a;
 --zap:#0b7a3b;
 --zap-escuro:#086330;
 --tinta:#14182b;
 --texto:#3a4058;
 --linha:#dfe3ef;
 --cinza:#f4f6fb;
 --branco:#fff;
 --raio:16px;
 --sombra:0 10px 30px rgba(11,26,110,.10);
 --max:1160px;
 color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--branco);color:var(--texto);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul)}
h1,h2,h3{color:var(--tinta);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,4.5vw,2.4rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.pular:focus{left:8px}

/* Topo */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--linha);backdrop-filter:saturate(1.4) blur(8px)}
.topo__in{max-width:var(--max);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);margin:0}
.marca img{width:40px;height:40px}
.marca__nome{font-size:1.15rem;font-weight:600;white-space:nowrap}
.marca__nome strong{color:var(--azul-noite);font-weight:900}
.nav{display:none;gap:22px;margin-left:auto}
.nav a{color:var(--tinta);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--azul)}
.topo__tel{display:none;color:var(--tinta);font-weight:600;text-decoration:none;white-space:nowrap}
.topo .botao{margin-left:auto}
@media (min-width:900px){.nav{display:flex}.topo .botao{margin-left:0}}
@media (min-width:1100px){.topo__tel{display:inline}}

/* Botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem;line-height:1.2;transition:transform .15s ease,background-color .15s ease}
.botao:hover{transform:translateY(-1px)}
.botao--pequeno{min-height:40px;padding:8px 16px;font-size:.92rem}
.botao--zap{background:var(--zap);color:#fff}
.botao--zap:hover{background:var(--zap-escuro)}
.botao--claro{background:#fff;color:var(--azul-noite)}
.botao--azul{background:var(--azul);color:#fff}
.botao--contorno{border-color:var(--azul);color:var(--azul);background:transparent}
.botao--largo{width:100%}

/* Herói */
.heroi{position:relative;isolation:isolate;color:#fff;min-height:min(88vh,760px);display:flex;align-items:flex-end}
.heroi__foto{position:absolute;inset:0;z-index:-2}
.heroi__foto img{width:100%;height:100%;object-fit:cover}
.heroi::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,15,60,.55) 0%,rgba(8,15,60,.78) 45%,rgba(8,15,60,.95) 100%)}
.heroi__in{max-width:var(--max);margin:0 auto;padding:96px 16px 48px;width:100%}
.heroi h1{color:#fff;font-size:clamp(2rem,6.2vw,3.6rem);max-width:17ch;font-weight:800}
.heroi__sub{font-size:clamp(1.02rem,2.4vw,1.2rem);max-width:60ch;color:#e6e9f7}
.selo{display:inline-block;background:var(--vermelho);color:#fff;font-weight:700;font-size:.85rem;padding:6px 12px;border-radius:10px;margin-bottom:18px}
.heroi__acoes{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.heroi__fatos{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px;color:#e6e9f7;font-size:.95rem}
.heroi__fatos strong{color:#fff}
.heroi__fatos li{padding-left:22px;position:relative}
.heroi__fatos li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:2px;background:var(--vermelho);transform:rotate(45deg)}
@media (min-width:700px){.heroi__fatos{grid-template-columns:repeat(3,auto);gap:24px}.heroi__in{padding-bottom:72px}}

/* Faixa de números */
.faixa{background:var(--azul-noite);color:#dfe4ff}
.faixa__in{max-width:var(--max);margin:0 auto;padding:28px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.faixa strong{display:block;color:#fff;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.1}
.faixa span{font-size:.9rem}
@media (min-width:800px){.faixa__in{grid-template-columns:repeat(4,1fr)}}

/* Seções */
.secao{padding:72px 0}
.secao--cinza{background:var(--cinza)}
.secao--escura{background:var(--azul-noite);color:#dfe4ff}
.secao--escura h2{color:#fff}
.secao__in{max-width:var(--max);margin:0 auto;padding:0 16px}
.secao__lead{font-size:1.08rem;max-width:62ch}
.sobretitulo{color:var(--vermelho);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-bottom:8px}
.sobretitulo--claro{color:#ffb4b8}
.pequeno{font-size:.88rem;color:#5a607a}
.secao--escura .pequeno{color:#c4cbef}
.duas{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.duas{grid-template-columns:1.1fr .9fr}.duas--inverte{grid-template-columns:.8fr 1.2fr}}

/* Cards de produto */
.cards{display:grid;gap:20px;margin-top:32px}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra)}
.card img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:transform .4s ease}
.card:hover img{transform:scale(1.03)}
.card__corpo{padding:20px;display:flex;flex-direction:column;flex:1}
.card__link{margin-top:auto;font-weight:700;text-decoration:none;padding-top:12px}
.card__link:hover{text-decoration:underline}
.card--guia{background:var(--azul-claro);border-color:#c9d2ff}
.modelos{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px;font-size:.95rem}
.modelos strong{display:block;color:var(--tinta)}
.modelos--tags{display:flex;flex-wrap:wrap;gap:8px}
.modelos--tags li{background:var(--cinza);border:1px solid var(--linha);border-radius:999px;padding:4px 12px;font-size:.88rem}
.percurso{padding-left:20px;margin:0 0 12px;display:grid;gap:8px}
.percurso strong{color:var(--azul-noite)}

/* Tabela */
.tabela-rolagem{overflow-x:auto;margin-top:24px;border-radius:var(--raio);border:1px solid var(--linha);background:#fff}
.comparar{width:100%;border-collapse:collapse;min-width:520px}
.comparar th,.comparar td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--linha);vertical-align:top}
.comparar thead th{background:var(--azul-noite);color:#fff}
.comparar tbody th{color:var(--tinta);font-weight:600;width:28%}
.comparar tr:last-child>*{border-bottom:0}

/* Serviços e empresa */
.servico{border-left:4px solid var(--vermelho);padding:4px 0 4px 16px;margin:20px 0}
.servico p{margin:0}
.foto-lado{margin:0}
.foto-lado img{border-radius:var(--raio);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--sombra)}
.foto-lado--alta img{aspect-ratio:4/5}
.pilares{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.pilares li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px 16px}
.pilares strong{display:block;color:#fff}

/* Clientes */
.clientes{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.clientes li{border:1px solid var(--linha);background:#fff;border-radius:999px;padding:8px 16px;font-weight:600;color:var(--tinta);font-size:.95rem}

/* Planos */
.planos{display:grid;gap:16px;margin:28px 0 16px}
@media (min-width:800px){.planos{grid-template-columns:repeat(3,1fr)}}
.plano{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:24px}
.plano--destaque{border:2px solid var(--azul)}
.plano__prazo{font-weight:700;color:var(--azul-noite);margin:0}

/* Contato */
.contatos{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
.contatos a{display:flex;flex-direction:column;padding:14px 16px;border:1px solid var(--linha);border-radius:12px;text-decoration:none;color:var(--tinta);font-weight:700;font-size:1.1rem;overflow-wrap:anywhere}
.contatos a:hover{border-color:var(--azul)}
.contatos span{font-size:.8rem;font-weight:600;color:#5a607a;text-transform:uppercase;letter-spacing:.06em}
.form{background:var(--cinza);border:1px solid var(--linha);border-radius:var(--raio);padding:24px;display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:600;color:var(--tinta);font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;width:100%;padding:12px 14px;border:1px solid #b9c0d6;border-radius:10px;background:#fff;color:var(--tinta);min-height:48px}
.form textarea{resize:vertical}
.form .pequeno{margin:0;text-align:center}

/* Rodapé */
.rodape{background:#0a0f2e;color:#c4cbef;padding:48px 0 96px;font-size:.92rem}
.rodape a{color:#fff}
.rodape__in{max-width:var(--max);margin:0 auto;padding:0 16px;display:grid;gap:28px}
@media (min-width:800px){.rodape__in{grid-template-columns:1fr 1.2fr}.rodape{padding-bottom:40px}}
.marca--rodape{color:#fff;margin-bottom:12px}
.marca--rodape .marca__nome strong{color:#fff}
.marca--rodape img{width:32px;height:32px}
.creditos{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.rodape__genesis{max-width:var(--max);margin:28px auto 0;padding:16px 16px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem}

/* Barra fixa no celular */
.barra-movel{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--linha)}
.barra-movel a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--azul-noite);color:var(--azul-noite)}
.barra-movel .barra-movel__zap{background:var(--zap);border-color:var(--zap);color:#fff}
@media (min-width:800px){.barra-movel{display:none}}

/* --- Camada visual (2026-10-15): carrossel, números, desenhos, movimento. ---
   Tudo que só existe com JS fica em .so-js (visibility, não display: reservar o
   espaço desde o início é o que mantém o CLS em 0 quando o app.js chega). */
.so-js{visibility:hidden}
.js .so-js{visibility:visible}
.sobretitulo{display:flex;align-items:center;gap:10px}
.sobretitulo::before{content:"";width:22px;height:3px;border-radius:2px;background:currentColor}

/* Números: tabular para a contagem não mexer a largura. */
.faixa{background:linear-gradient(120deg,var(--azul-noite) 0%,#13238f 100%)}
.numero{border-left:3px solid var(--vermelho);padding-left:14px}
.faixa .conta{font-size:inherit;font-variant-numeric:tabular-nums}
.faixa__in>div>span{display:block;margin-top:4px}

/* Seções escuras: trilhos verticais discretos (as guias do poço) e borda inclinada. */
.secao--escura{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 120px);clip-path:polygon(0 28px,100% 0,100% 100%,0 100%);padding-top:96px}

/* Revelar ao rolar: só o que estava abaixo da dobra quando o JS chegou.
   transform/opacity não entram no CLS. */
.revela{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.revela--espera{opacity:0;transform:translateY(28px)}

/* Carrossel: rolagem com snap (o dedo arrasta de graça), JS só nas setas e na passagem automática. */
.carrossel{margin-top:28px}
.carrossel__trilho{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:var(--raio);outline-offset:4px;overscroll-behavior-x:contain}
.carrossel__trilho::-webkit-scrollbar{display:none}
.carrossel__slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always;position:relative;background:#050a2a}
.carrossel__slide img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:600px){.carrossel__slide img{aspect-ratio:3/2}}
.carrossel__slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;color:#fff;font-weight:600;background:linear-gradient(180deg,rgba(5,10,42,0) 0%,rgba(5,10,42,.88) 70%);font-size:clamp(.92rem,2.4vw,1.1rem)}
@media (min-width:900px){.carrossel__slide img{aspect-ratio:21/9}}
.carrossel__controles{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}
.carrossel__botao{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:transparent;color:#fff;cursor:pointer;transition:background-color .15s ease}
.carrossel__botao:hover{background:rgba(255,255,255,.12)}
.carrossel__pausa .icone-play,.carrossel__pausa[aria-pressed="true"] .icone-pausa{display:none}
.carrossel__pausa[aria-pressed="true"] .icone-play{display:inline}
.carrossel__pontos{display:flex;gap:2px}
.carrossel__ponto{width:24px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.carrossel__ponto::before{content:"";width:10px;height:10px;border-radius:5px;background:rgba(255,255,255,.45);transition:width .25s ease,background-color .25s ease}
.carrossel__ponto[aria-current="true"]::before{width:22px;background:#fff}
@media (max-width:420px){.carrossel__ponto{width:20px}}

/* Como funciona: desenhos em SVG inline (estilo aqui, porque a CSP não deixa style inline). */
.funciona__topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.sistemas{display:grid;gap:28px;margin-top:32px}
@media (min-width:1000px){.sistemas{grid-template-columns:repeat(3,1fr)}}
.sistema{margin:0;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden}
.diagrama{display:block;width:100%;height:auto;max-height:560px;background:var(--cinza)}
.sistema figcaption{padding:20px}
.passos{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.96rem}
.passos strong{color:var(--tinta)}
.diagrama text{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.d-rotulo{font-size:13px;font-weight:700;fill:var(--tinta)}
.d-rotulo--fim{text-anchor:end}
.d-rotulo--meio{text-anchor:middle}
.d-rotulo--claro{fill:#fff;font-size:11px}
.d-nota{font-size:11.5px;font-weight:600;fill:#4a5070}
.d-nota--meio{text-anchor:middle}
.d-andar{font-size:11px;font-weight:700;fill:#4a5070;letter-spacing:.04em}
.d-predio{fill:#e8ecff}
.d-telhado{fill:#c8101a}
.d-poco{fill:#fff;stroke:#b9c3f5;stroke-width:2}
.d-fundo{fill:#dfe3ef}
.d-laje{fill:#9aa6dc}
.d-guia{stroke:#6c77a8;stroke-width:3;stroke-linecap:round}
.d-guia--fina{stroke-width:2}
.d-mola{fill:#ffb703}
.d-cabo{stroke:#14182b;stroke-width:2.5}
.d-cabina{fill:var(--azul)}
.d-cabina-dentro{fill:#3f52e0}
.d-pele{fill:#f2c49b}
.d-roupa{fill:#ffb703}
.d-contrapeso{fill:var(--vermelho)}
.d-risco{stroke:#fff;stroke-opacity:.5;stroke-width:2}
.d-maquinas{fill:var(--azul-noite)}
.d-motor{fill:#ffb703}
.d-eixo{stroke:#cfd6ff;stroke-width:5;stroke-linecap:round}
.d-polia{fill:#fff;stroke:#14182b;stroke-width:4}
.d-raio{stroke:#14182b;stroke-width:2.5;stroke-linecap:round;fill:none}
.d-cubo{fill:var(--vermelho)}
.d-seta{stroke:var(--vermelho);stroke-width:2;stroke-linecap:round;fill:none}
.d-seta--tracejada{stroke-dasharray:4 4}
.d-haste{fill:#c3c9dc;stroke:#6c77a8;stroke-width:1}
.d-suporte{fill:#6c77a8}
.d-cilindro{fill:#4a5070}
.d-central{fill:var(--azul-noite)}
.d-reservatorio{fill:#cfd6ff}
.d-oleo-nivel{fill:#e0a100}
.d-oleo-tubo{fill:none;stroke:#4a5070;stroke-width:7;stroke-linejoin:round}
.d-oleo{fill:none;stroke:#ffcf4d;stroke-width:3;stroke-dasharray:8 10;stroke-linejoin:round}
.d-ceu{fill:#e8f1ff}
.d-sol{fill:#ffd166}
.d-chao{fill:#9aa6dc}
.d-nivel{fill:#c9d2ff}
.d-parede{fill:#dfe6ff}
.d-porta{fill:#fff;stroke:#9aa6dc;stroke-width:2}
.d-torre{fill:var(--azul-noite)}
.d-piso{fill:var(--azul)}
.d-cancela{stroke:var(--azul);stroke-width:4;stroke-linecap:round;fill:none}
.d-comando{fill:#14182b}
.d-botao{fill:#2ecc71}
.d-roda{fill:none;stroke:#14182b;stroke-width:3}
.d-cadeira{fill:none;stroke:#14182b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.d-cota{stroke:#4a5070;stroke-width:2}

/* Movimento dos desenhos: cabina sobe e o contrapeso desce (sempre o oposto). */
.anima{transform-box:view-box}
.anima--cabina{animation:ib-cabina 12s ease-in-out infinite}
.anima--contrapeso{animation:ib-contrapeso 12s ease-in-out infinite}
.anima--polia{transform-box:fill-box;transform-origin:center;animation:ib-polia 12s ease-in-out infinite}
.anima--hidraulico{animation:ib-hidraulico 9s ease-in-out infinite}
.anima--oleo{animation:ib-oleo 9s ease-in-out infinite}
.anima--plataforma{animation:ib-plataforma 9s ease-in-out infinite}
@keyframes ib-cabina{0%,12%{transform:translateY(0)}35%,47%{transform:translateY(-110px)}70%,82%{transform:translateY(-220px)}100%{transform:translateY(0)}}
@keyframes ib-contrapeso{0%,12%{transform:translateY(0)}35%,47%{transform:translateY(110px)}70%,82%{transform:translateY(220px)}100%{transform:translateY(0)}}
@keyframes ib-polia{0%,12%{transform:rotate(0)}35%,47%{transform:rotate(-215deg)}70%,82%{transform:rotate(-430deg)}100%{transform:rotate(0)}}
@keyframes ib-hidraulico{0%,15%{transform:translateY(0)}45%,60%{transform:translateY(-110px)}90%,100%{transform:translateY(0)}}
@keyframes ib-oleo{0%,15%{stroke-dashoffset:0}45%,60%{stroke-dashoffset:-90}90%,100%{stroke-dashoffset:0}}
@keyframes ib-plataforma{0%,15%{transform:translateY(0)}45%,60%{transform:translateY(-112px)}90%,100%{transform:translateY(0)}}
.sistemas--pausado .anima,.sistemas--fora .anima{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){[data-pausar-diagramas],.carrossel__pausa{visibility:hidden}.carrossel__trilho{scroll-behavior:auto}}