/* stawix.dev — estilos
   Modos:
   - padrão / .lista  → página com rolagem normal (celular, "reduzir movimento", sem JS, modo leitura)
   - .imersivo        → tela única; a roda do mouse, as setas e o toque trocam de cena
   - .anima           → animações ligadas (desligadas quando o sistema pede menos movimento) */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --fundo: #080506;
  --texto: #F4ECEE;
  --texto-2: #E2D6D9;
  --texto-3: #C9BBBF;
  --texto-4: #A99A9E;
  --rose: #EDB3C1;
  --rose-claro: #F6C2CF;
  --vinho: #7A1730;
  --vinho-2: #8E1A33;
  --borda: rgba(255, 255, 255, 0.1);
  --n: 7;
  --ease-camera: cubic-bezier(.72, 0, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fundo); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--rose); }
a:hover { color: #FFFFFF; }
button { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 16px; background: var(--texto); color: #14090C; font-weight: 600; text-decoration: none; transition: top .3s; }
.pular:focus { top: 16px; color: #14090C; }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

/* ------------------------------------------------------------------ palco */
.palco { position: relative; overflow-x: clip; }
.imersivo body { overflow: hidden; }
.imersivo .palco { height: 100vh; height: 100dvh; overflow: hidden; touch-action: none; }

.camada { position: fixed; inset: 0; pointer-events: none; }
.camada-heroi { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 12; pointer-events: none; }
.brilho { inset: -25%; background:
  radial-gradient(38% 34% at 62% 44%, rgba(170, 20, 50, 0.26) 0%, rgba(120, 12, 34, 0.1) 45%, rgba(8, 5, 6, 0) 75%),
  radial-gradient(30% 30% at 22% 78%, rgba(120, 14, 36, 0.18) 0%, rgba(8, 5, 6, 0) 70%); }

.trilho { position: relative; z-index: 20; }
.imersivo .trilho { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--n) * 100%); transition: transform 1.7s var(--ease-camera); }
.cena { position: relative; min-height: 100vh; min-height: 100svh; }
.imersivo .cena { height: calc(100% / var(--n)); min-height: 0; }
.conteudo { position: relative; max-width: 1360px; margin: 0 auto; padding: 110px 24px 72px; }
.imersivo .conteudo { height: 100%; padding: 112px 120px 104px 48px; }
@media (min-width: 821px) { .lista .conteudo { padding: 128px 48px 96px; } }

/* movimento entre cenas (só no modo imersivo) */
.imersivo .mov { transition: transform 1.8s cubic-bezier(.68, 0, .2, 1), opacity 1.4s ease; }
.imersivo .mov-lento { transition: transform 2.4s cubic-bezier(.62, 0, .2, 1), opacity 1.8s ease; }
.imersivo .mov-rapido { transition: transform 1.5s cubic-bezier(.75, 0, .2, 1), opacity 1.2s ease; }
.lista [data-p], .lista .giro { transform: none !important; }

/* ------------------------------------------------------------------ fluidos 3D (sprites em stop motion) */
.fluido { position: absolute; left: 50%; top: 50%; }
.fluido-a { width: 620px; height: 620px; margin: -310px 0 0 -310px; }
.fluido-b { width: 560px; height: 560px; margin: -280px 0 0 -280px; filter: blur(2.5px); }
.gota-1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; filter: blur(8px); opacity: .7; }
.gota-2 { width: 130px; height: 130px; margin: -65px 0 0 -65px; filter: blur(5px); opacity: .65; }
.segue { width: 100%; height: 100%; transform: translate3d(calc(var(--mx, 0) * var(--d, 1) * 22px), calc(var(--my, 0) * var(--d, 1) * 16px), 0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.sprite { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 1200% 100%; }
.sp-a { background-image: url("../img/fluidos/blob_a.webp"); }
.sp-b { background-image: url("../img/fluidos/blob_b.webp"); }
.rio { position: absolute; left: 50%; top: -100%; width: 220px; height: 400%; margin-left: -110px; filter: blur(1.4px);
  background-image: url("../img/fluidos/rio.webp"); background-size: 1760px 792px; background-repeat: repeat-y;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 34%, #000 40%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 34%, #000 40%, #000 92%, transparent 100%); }
.grao { position: absolute; inset: -100px; background-image: url("../img/fluidos/grao.png"); mix-blend-mode: overlay; opacity: .5; }
.vinheta { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.55) 100%); }
.lista .camada-fluido { opacity: .45; }
.lista .gotas { display: none; }

/* título gigante da abertura */
.titulo-gigante { position: absolute; left: 0; right: 0; top: 11%; margin: 0; text-align: center; font-size: clamp(110px, 18.5vw, 280px); line-height: .82; font-weight: 700; letter-spacing: -0.06em; color: #F2E8EA; }
.titulo-gigante .selo { display: inline-block; vertical-align: top; margin: .08em 0 0 .06em; padding: .05em .14em; font-size: .13em; line-height: 1.1; letter-spacing: 0; font-weight: 600; color: var(--rose-claro); background: var(--vinho); }

/* ------------------------------------------------------------------ componentes */
.vidro { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), rgba(16, 10, 12, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 70px rgba(0, 0, 0, 0.42); }
.vidro::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 34%, rgba(255, 228, 235, 0.05) 43%, rgba(255, 244, 247, 0.11) 50%, rgba(255, 228, 235, 0.05) 57%, transparent 66%); }
.feixe { position: absolute; inset: -1px; padding: 1px; pointer-events: none; border-radius: inherit; opacity: .75;
  background: conic-gradient(from var(--ang), transparent 0deg, transparent 120deg, var(--c) 175deg, transparent 180deg, transparent 300deg, var(--c) 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.veu { position: absolute; inset: -56px -72px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 5, 6, 0.72), rgba(8, 5, 6, 0.35) 60%, rgba(8, 5, 6, 0));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.coluna { position: relative; isolation: isolate; }
.chanfro { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; font: 600 14px 'Inter', sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer; border: 0; transition: background .4s, color .4s, transform .4s; }
.btn:hover { transform: translateY(-2px); }
.btn-claro { background: #EDE2E5; color: #14090C; }
.btn-claro:hover { background: #FFFFFF; color: #14090C; }
.btn-vinho { background: var(--vinho-2); color: #FFF4F6; }
.btn-vinho:hover { background: #A52040; color: #FFFFFF; }
.btn-vidro { background: rgba(255, 255, 255, 0.07); color: var(--texto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.btn-vidro:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.btn svg { flex: none; }

.rotulo { margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.texto { margin: 0; font-size: 16px; line-height: 1.7; color: var(--texto-2); }
.tag { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 12px; letter-spacing: .03em; color: var(--texto-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.meta { margin: 0; font-size: 13px; color: var(--texto-3); }
.meta strong { color: var(--texto); font-weight: 600; }
.link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; font: 600 15px 'Inter', sans-serif; text-decoration: none; background: none; border: 0; cursor: pointer; color: var(--c, var(--rose)); }
.link .seta { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.link:hover { color: #FFFFFF; }
.link:hover .seta { transform: translateX(6px); }
.numero { position: absolute; margin: 0; font-size: 380px; font-weight: 300; line-height: .8; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07); pointer-events: none; }

/* ------------------------------------------------------------------ abertura */
.abertura { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; min-height: calc(100vh - 182px); }
.imersivo .abertura { min-height: 0; }
.abertura h1 { margin: 0; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.02em; text-transform: uppercase; }
.abertura h1 span { display: block; }
.fina { font-weight: 300; color: var(--texto-2); }
.forte { font-weight: 600; }
.recuo { padding-left: 64px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cartao-heroi { width: 330px; border-radius: 18px; }
.cartao-heroi .topo { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; font-weight: 600; }
.cartao-heroi .corpo { padding: 18px 20px; display: flex; gap: 16px; align-items: center; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.miniatura { position: relative; width: 84px; height: 84px; flex: none; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, 0.35); }
.miniatura .sprite { background-position: 36% 0; animation: none !important; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); flex: none; }
.dica { position: absolute; left: 50%; bottom: 104px; translate: -50% 0; display: none; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.imersivo .dica { display: flex; }
.dica.mostra { opacity: 1; }
.mouse { position: relative; display: inline-block; width: 24px; height: 38px; border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 13px; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--rose); }

/* ------------------------------------------------------------------ serviços */
.secao-centro { display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.imersivo .secao-centro { height: 100%; }
.titulo-secao { margin: 0; font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.035em; }
.grade-servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.servico { border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .5s; }
.servico:hover { transform: translateY(-4px); border-color: rgba(237, 179, 193, 0.35); }
.servico h3 { margin: 0; font-size: 18px; font-weight: 600; }
.servico .texto { font-size: 15px; }

/* ------------------------------------------------------------------ projetos */
.projeto { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.imersivo .projeto { height: 100%; }
.projeto.invertido { flex-wrap: wrap-reverse; }
.projeto .coluna { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cabeca-projeto { display: flex; flex-direction: column; gap: 12px; }
.marca-projeto { display: flex; align-items: center; gap: 12px; }
.marca-projeto img { width: 36px; height: 36px; }
.nome-projeto { margin: 0; font-size: clamp(52px, 6.6vw, 104px); line-height: .9; font-weight: 700; letter-spacing: -0.05em; text-transform: uppercase; }
.sub-projeto { margin: 0; font-size: clamp(20px, 2.1vw, 28px); font-weight: 300; text-transform: uppercase; color: var(--texto-2); }
.painel { position: relative; max-width: 560px; border-radius: 18px; }
.painel .vidro { border-radius: 18px; padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; }

.dispositivos { position: relative; flex: 1 1 460px; min-width: 0; perspective: 1400px; display: flex; justify-content: center; }
.giro { position: relative; transform-style: preserve-3d; }
.janela { width: min(620px, 100%); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: #0E161B; box-shadow: 0 60px 120px rgba(0, 0, 0, 0.65), 0 0 70px var(--brilho-c, transparent); }
.janela-barra { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.janela-barra span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.janela-barra em { margin-left: 8px; font: normal 12px 'JetBrains Mono', monospace; color: var(--texto-4); }
.janela img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.celular { width: 250px; padding: 9px; border-radius: 42px; background: linear-gradient(145deg, #2A2730, #121016); box-shadow: 0 60px 120px rgba(0, 0, 0, 0.7), 0 0 70px var(--brilho-c, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.celular img { width: 100%; border-radius: 34px; aspect-ratio: 640 / 1385; object-fit: cover; }
.tablet { width: 380px; padding: 12px; border-radius: 30px; background: linear-gradient(145deg, #2A2730, #121016); box-shadow: 0 60px 120px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.tablet img { width: 100%; border-radius: 20px; aspect-ratio: 900 / 1201; object-fit: cover; }
.atras { position: absolute; filter: brightness(.55) saturate(.9); }
.skyle-atras { left: 70px; top: -56px; transform: translateZ(-120px) scale(.92); }
.simpli-atras { left: 150px; top: 36px; transform: translateZ(-120px) rotate(7deg); }
.teklog-atras { left: -150px; top: -40px; transform: translateZ(-140px) rotate(-5deg); }

/* ------------------------------------------------------------------ sobre */
.sobre { display: flex; align-items: center; gap: 64px; flex-wrap: wrap; }
.imersivo .sobre { height: 100%; }
.sobre > .coluna { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.processo { flex: 1 1 380px; min-width: 0; }
.processo .vidro { border-radius: 18px; padding: 28px 30px; }
.etapas { position: relative; margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.etapas::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: rgba(255, 255, 255, 0.1); }
.feixe-v { position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; overflow: hidden; }
.feixe-v::after { content: ""; position: absolute; left: 0; top: -60px; width: 2px; height: 60px; background: linear-gradient(180deg, transparent, var(--rose)); }
.etapas li { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.etapas .num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1A1013; border: 1px solid #6E1528; font: 12px 'JetBrains Mono', monospace; color: var(--rose); }
.etapas li:last-child .num { background: #6E1528; border-color: var(--rose); color: #FFFFFF; }
.etapas h3 { margin: 0; font-size: 16px; font-weight: 600; }
.etapas p { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: #D2C5C9; }

/* ------------------------------------------------------------------ contato */
.grade-contato { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.bloco { position: relative; border-radius: 20px; }
.bloco > .vidro { height: 100%; border-radius: 20px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.form-orcamento { background-color: rgba(60, 10, 22, 0.5); }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.rotulo-campo { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #D9CCD0; }
.campo { width: 100%; min-height: 46px; padding: 11px 14px; font: 400 15px 'Inter', sans-serif; color: var(--texto); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; }
.campo::placeholder { color: #9E8F94; }
select.campo option { background: #1A1013; color: var(--texto); }
textarea.campo { resize: none; }
.lista-outros { margin: 0; padding: 0; list-style: none; }
.lista-outros li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.09); font-size: 15px; font-weight: 600; }
.lista-outros li:last-child { border-bottom: 0; }
.lista-outros li span:last-child { font-size: 13px; font-weight: 400; color: #C2B4B8; }
.contatos-diretos { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: auto; }
.rodape { margin: 0; font-size: 13px; color: var(--texto-4); }

/* ------------------------------------------------------------------ HUD */
.topo-site { position: fixed; left: 0; right: 0; top: 0; z-index: 50; }
.lista .topo-site { background: rgba(8, 5, 6, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.topo-site nav { max-width: 1360px; margin: 0 auto; padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; text-decoration: none; color: var(--texto); }
.logo b { font-size: 22px; font-weight: 700; letter-spacing: -1px; }
.logo i { padding: 3px 7px; background: var(--vinho); color: var(--rose-claro); font-size: 12px; font-style: normal; font-weight: 600; }
.links { display: flex; align-items: center; gap: 32px; }
.navbtn { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--texto-3); font: 500 14px 'Inter', sans-serif; letter-spacing: .02em; cursor: pointer; transition: color .3s; }
.navbtn:hover { color: #FFFFFF; }
.direita { display: flex; align-items: center; gap: 10px; }

.pontos { position: fixed; right: 14px; top: 50%; z-index: 50; transform: translateY(-50%); display: none; flex-direction: column; align-items: flex-end; }
.imersivo .pontos { display: flex; }
.dot { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 34px; padding: 0 20px 0 0; background: none; border: 0; cursor: pointer; }
.dot .traco { display: block; width: 3px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); transition: height .7s cubic-bezier(.7, 0, .2, 1), background .7s; }
.dot:hover .traco { background: rgba(255, 255, 255, 0.7); }
.dot[aria-current="step"] .traco { height: 28px; background: var(--rose); }
.dot .nome { position: absolute; right: 40px; white-space: nowrap; padding: 6px 10px; font: 500 12px 'Inter', sans-serif; color: var(--texto); background: rgba(16, 10, 12, 0.85); border: 1px solid var(--borda); opacity: 0; translate: 8px 0; transition: opacity .35s, translate .35s; pointer-events: none; }
.dot:hover .nome, .dot:focus-visible .nome { opacity: 1; translate: 0 0; }

.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none; display: none; }
.imersivo .barra-inferior { display: block; }
.barra-inferior > div { max-width: 1360px; margin: 0 auto; padding: 0 48px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.progresso { display: flex; flex-direction: column; gap: 10px; width: 300px; max-width: 50%; }
.progresso .linha1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.progresso .pct { font-size: 22px; font-weight: 300; letter-spacing: -0.02em; }
.progresso .nome-cena { font: 12px 'JetBrains Mono', monospace; letter-spacing: .08em; color: #D2C5C9; text-transform: uppercase; }
.trilha { height: 2px; background: rgba(255, 255, 255, 0.16); }
.trilha div { height: 2px; background: #EDE2E5; transform-origin: left; transform: scaleX(.03); transition: transform 1.8s cubic-bezier(.68, 0, .2, 1); }
.contador { display: flex; align-items: center; gap: 14px; margin-right: 150px; font: 12px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--texto-3); }
.contador b { font-weight: 400; color: var(--texto); }
.alternar-leitura { position: fixed; right: 20px; bottom: 20px; z-index: 55; min-height: 40px; padding: 0 14px; font-size: 13px; }

/* menu */
.menu { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 5, 6, 0.74); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.menu.aberto { opacity: 1; visibility: visible; }
.menu-caixa { width: min(720px, 100%); display: flex; flex-direction: column; gap: 20px; }
.menu-cabeca { display: flex; justify-content: space-between; align-items: center; }
.menu ol { margin: 0; padding: 0; list-style: none; }
.item-menu { display: flex; align-items: baseline; gap: 18px; width: 100%; min-height: 52px; padding: 10px 4px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--texto); cursor: pointer; text-align: left; font: 600 clamp(22px, 3vw, 34px) 'Inter', sans-serif; letter-spacing: -0.02em; transition: color .3s, padding .4s; }
.item-menu:hover, .item-menu:focus-visible { color: var(--rose); padding-left: 14px; outline: none; }
.item-menu small { font: 400 13px 'JetBrains Mono', monospace; color: #C2B4B8; }
.item-menu em { margin-left: auto; font: normal 400 13px 'Inter', sans-serif; color: #C2B4B8; }

/* estudo de caso */
.caso-fundo { position: fixed; inset: 0; z-index: 79; background: rgba(8, 5, 6, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
.caso-fundo.aberto { opacity: 1; visibility: visible; }
.caso { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(680px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: 32px 40px 56px; background: rgba(14, 9, 11, 0.96); border-left: 1px solid var(--borda); transform: translateX(100%); visibility: hidden; transition: transform .9s cubic-bezier(.7, 0, .2, 1), visibility .9s; }
.caso.aberto { transform: none; visibility: visible; }
.caso-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.caso h2 { margin: 0 0 10px; font-size: clamp(40px, 5vw, 64px); line-height: .92; font-weight: 700; letter-spacing: -0.05em; text-transform: uppercase; }
.caso .resumo { margin: 0 0 28px; font-size: 18px; font-weight: 300; color: var(--texto-2); }
.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; }
.ficha { border-radius: 12px; padding: 14px 16px; }
.ficha p { margin: 0; font-size: 12px; color: #C2B4B8; }
.ficha strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; }
.caso h3 { margin: 28px 0 10px; font: 500 13px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.caso ul.pontos-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.caso ul.pontos-lista li { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--texto-2); }
.caso ul.pontos-lista li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; background: var(--c); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.galeria.larga { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.galeria button { display: block; width: 100%; padding: 0; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: #120C0E; cursor: zoom-in; transition: border-color .3s, transform .4s; }
.galeria button:hover { border-color: var(--c); transform: translateY(-3px); }
.galeria figure { margin: 0; }
.galeria figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--texto-3); }
.aviso-demo { margin: 14px 0 0; font-size: 13px; color: var(--texto-4); }

/* ampliação de imagem */
.ampliar { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 64px 24px 24px; background: rgba(5, 3, 4, 0.92); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.ampliar.aberto { opacity: 1; visibility: visible; }
.ampliar img { max-width: min(1400px, 100%); max-height: calc(100vh - 140px); width: auto; border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.ampliar p { margin: 0; max-width: 720px; text-align: center; font-size: 14px; color: var(--texto-2); }
.ampliar .fechar { position: absolute; top: 16px; right: 16px; }

/* cursor em gota: substitui a seta do sistema no modo imersivo (só com mouse).
   A ponta fica no canto superior esquerdo, exatamente onde o clique acontece. */
.cursor-gota { position: fixed; left: 0; top: 0; z-index: 110; width: 18px; height: 18px; pointer-events: none; display: none; opacity: 0;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0); transition: opacity .25s; }
.cursor-gota span { display: block; width: 100%; height: 100%; border-radius: 0 50% 50% 50%; transform-origin: 0 0;
  background: radial-gradient(circle at 65% 65%, #F7B9C7, #B01E3E 72%); border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(8, 5, 6, 0.55), 0 0 14px rgba(200, 40, 70, 0.55); transition: scale .3s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
@media (hover: hover) and (pointer: fine) {
  .imersivo .cursor-gota { display: block; }
  .imersivo.cursor-ativo .cursor-gota { opacity: 1; }
  .imersivo, .imersivo * { cursor: none !important; }
  .imersivo input, .imersivo textarea { cursor: text !important; }
  .imersivo select { cursor: default !important; }
  html.imersivo:has(input:hover, textarea:hover, select:hover) .cursor-gota { opacity: 0; }
}
html:has(a:hover, button:hover, [data-ampliar]:hover) .cursor-gota span { scale: 1.45; }
html.clicando .cursor-gota span { scale: .8; }
.anima .cursor-gota span { animation: pulso-cursor 2.4s ease-out infinite; }
@keyframes pulso-cursor { 0% { box-shadow: 0 0 0 1px rgba(8, 5, 6, 0.55), 0 0 0 0 rgba(237, 179, 193, .45); } 100% { box-shadow: 0 0 0 1px rgba(8, 5, 6, 0.55), 0 0 0 10px rgba(237, 179, 193, 0); } }

/* carregamento */
.carregador { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--fundo); transition: opacity 1.1s ease, visibility 1.1s; }
.js .carregador { display: flex; }
.carregador.pronto { opacity: 0; visibility: hidden; }
.capsula { position: relative; width: 58px; height: 150px; border-radius: 30px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.03); }
.liquido { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(180deg, #C21E44, #5A0C1E); transition: height .6s cubic-bezier(.4, 0, .2, 1); }
.liquido svg { position: absolute; left: 0; top: -9px; width: 200%; height: 12px; }
.carregador p { margin: 0; font: 13px 'JetBrains Mono', monospace; letter-spacing: .1em; color: #D2C5C9; }

/* ------------------------------------------------------------------ animações */
@keyframes quadros { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes tremor { 0% { translate: 0 0; } 25% { translate: 1px -.5px; } 50% { translate: -.5px 1px; } 75% { translate: .5px .5px; } }
@keyframes rioQ { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@keyframes rioFlui { from { background-position-y: 0; } to { background-position-y: 792px; } }
@keyframes grao { 0% { background-position: 0 0; } 25% { background-position: -60px 40px; } 50% { background-position: 30px -70px; } 75% { background-position: -90px -20px; } }
@keyframes orbit { to { --ang: 360deg; } }
@keyframes reflexo { 0% { transform: translateX(-130%); } 24% { transform: translateX(130%); } 100% { transform: translateX(130%); } }
@keyframes entra { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes mouse { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }
@keyframes onda { to { transform: translateX(-50%); } }
@keyframes feixeV { from { top: -60px; } to { top: 100%; } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(237, 179, 193, .5); } 100% { box-shadow: 0 0 0 12px rgba(237, 179, 193, 0); } }

.anima .sprite { animation: quadros 2s steps(12, jump-none) infinite, tremor .66s steps(1) infinite; }
.anima .rio { animation: rioQ 1.33s steps(8, jump-none) infinite, rioFlui 9s steps(54) infinite; }
.anima .grao { animation: grao .66s steps(1) infinite; }
.anima .feixe { animation: orbit 16s linear infinite; }
.anima .vidro::after { animation: reflexo 12s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: var(--rd, 1.6s); }
.anima .mouse { animation: mouse 2s steps(4) infinite; }
.anima .liquido svg { animation: onda 2.4s linear infinite; }
.anima .feixe-v::after { animation: feixeV 5s linear infinite; }
.anima .ponto { animation: pulso 2.2s ease-out infinite; }
.anima.imersivo .cena.ativa .entra { animation: entra .9s steps(6) both; }
.anima.imersivo .cena.ativa .e1 { animation-delay: .5s; }
.anima.imersivo .cena.ativa .e2 { animation-delay: .7s; }
.anima.imersivo .cena.ativa .e3 { animation-delay: .9s; }
.anima.imersivo .cena.ativa .e4 { animation-delay: 1.1s; }
.anima.imersivo .cena:not(.ativa) *, .anima.imersivo .cena:not(.ativa) *::after { animation-play-state: paused; }
.pausa .sprite { animation-play-state: paused !important; }
.grade-servicos li:nth-child(2) { --rd: 2.3s; }
.grade-servicos li:nth-child(3) { --rd: 3s; }
.grade-servicos li:nth-child(4) { --rd: 3.7s; }
.grade-servicos li:nth-child(5) { --rd: 4.4s; }
.grade-contato > .bloco:nth-child(2) .vidro { --rd: 3s; }

/* ------------------------------------------------------------------ telas pequenas */
@media (max-width: 820px) {
  .so-desk { display: none !important; }
  .camada-fluido { transform: scale(.55); }
  .titulo-gigante { font-size: 25vw; top: 12%; }
  .topo-site nav { padding: 12px 20px; }
  .alternar-leitura { display: none; }
  .abertura { min-height: calc(100svh - 182px); padding-top: 34vw; }
  .recuo { padding-left: 32px; }
  .projeto, .projeto.invertido { flex-wrap: wrap; gap: 36px; }
  .dispositivos { flex-basis: 100%; }
  .atras { display: none; }
  .janela { width: 100%; }
  .caso { padding: 24px 20px 48px; }
  .nome-projeto { font-size: clamp(38px, 11.5vw, 64px); overflow-wrap: anywhere; }
  .sub-projeto { font-size: 18px; }
  .caso h2 { font-size: clamp(34px, 10vw, 52px); overflow-wrap: anywhere; }
  .titulo-secao { font-size: clamp(30px, 8.6vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .anima .sprite, .anima .rio, .anima .grao, .anima .vidro::after { animation: none; }
}

/* notebooks com tela mais baixa: tudo um pouco mais compacto no modo imersivo */
@media (max-height: 860px) {
  .imersivo .conteudo { padding: 92px 110px 80px 40px; }
  .imersivo .nome-projeto { font-size: clamp(46px, 5.4vw, 86px); }
  .imersivo .sub-projeto { font-size: clamp(18px, 1.8vw, 24px); }
  .imersivo .janela { width: min(540px, 100%); }
  .imersivo .celular { width: 215px; }
  .imersivo .tablet { width: 320px; }
  .imersivo .painel .vidro { padding: 22px 24px; gap: 12px; }
  .imersivo .texto { font-size: 15px; line-height: 1.6; }
  .imersivo .servico { padding: 18px; gap: 8px; }
  .imersivo .titulo-secao { font-size: clamp(30px, 3.6vw, 50px); }
  .imersivo .secao-centro { gap: 24px; }
  .imersivo .etapas { gap: 10px; }
  .imersivo .processo .vidro { padding: 22px 24px; }
  .imersivo .bloco > .vidro { padding: 20px 24px; gap: 10px; }
  .imersivo textarea.campo { height: 64px; }
  .imersivo .campo { min-height: 42px; padding: 9px 12px; }
  .imersivo .abertura h1 { font-size: clamp(28px, 3.2vw, 44px); }
}
@media (max-height: 740px) {
  .imersivo .numero, .imersivo .sub-projeto, .imersivo .cartao-heroi { display: none; }
  .imersivo .lista-outros li { padding: 8px 0; }
}