/* Home: escura e contínua. Seções transparentes; só linhas finas separam.
   Hero/serviços/apresentação (movimento) ficam em hero.css, servicos.css, apresentacao.css. */
:root { --rail: 0px; --card-line: rgba(255,255,255,.14); }
@media (min-width: 1100px) { :root { --rail: 210px; } }
main { position: relative; z-index: 1; }
main .wrap { padding-right: calc(var(--gutter) + var(--rail)); }
em { font-style: normal; color: var(--blue-dark); }
h2 { font-size: clamp(2.2rem, 5.6vw, 5rem); max-width: 16ch; }
.tag { font-size: .76rem; letter-spacing: .18em; color: var(--blue-dark); margin: 0 0 22px; text-transform: uppercase; }
.btn-lg { padding: 1.15em 1.9em; font-size: 1.05rem; }
section { position: relative; }
.proc-lead { margin-top: 22px; color: rgba(255,255,255,.72); max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.nw { white-space: nowrap; }
.brand { min-height: 44px; } /* alvo de toque >= 44 px; marca vem de core.js */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* INÍCIO (layout base; o motion cuida do palco) */
.hero { min-height: 100svh; padding-top: 110px; display: flex; flex-direction: column; justify-content: space-between; overflow: clip; }
[data-hero-stage] { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-txt { position: relative; z-index: 3; width: min(100%, 760px); margin: auto; padding: 0 var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); max-width: 14ch; }
.hero-sub { margin-top: 22px; color: rgba(255,255,255,.78); max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.hero .hero-cta { justify-content: center; }
.marquee { position: relative; z-index: 3; overflow: hidden; border-block: 1px solid var(--line); padding: 14px 0; font-size: .78rem; letter-spacing: .22em; color: rgba(255,255,255,.55); }
.mq-track { display: flex; gap: 48px; width: max-content; animation: mq 40s linear infinite; }
.mq-track span::after { content: "·"; margin-left: 48px; color: var(--blue-dark); }
@keyframes mq { to { transform: translateX(-50%); } }

/* SERVIÇOS (estrutura; os demos são do motion) */
.sec-head { padding-top: clamp(80px, 12vh, 150px); padding-bottom: clamp(30px, 6vh, 70px); }
.chap { height: 260vh; border-top: 1px solid var(--line); position: relative; }
.chap-in { position: sticky; top: 0; height: 100svh; min-height: 560px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 70px); align-items: center; }
.svc-text h3 { font-size: clamp(2rem, 3.8vw, 3.6rem); }
.num { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: .02em; line-height: 1; color: var(--blue-dark); margin-bottom: 18px; }
.num span { font-size: .22em; color: rgba(255,255,255,.4); letter-spacing: .1em; }
.lede { margin-top: 18px; color: rgba(255,255,255,.72); max-width: 44ch; }
.svc-text ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.svc-text li { border: 1px solid var(--line); border-radius: 999px; padding: .6em 1em; color: rgba(255,255,255,.7); }
.cap-note { margin-top: 18px; font-size: .9rem; color: var(--gray); }
[data-demo] { position: relative; min-width: 0; height: min(74vh, 640px); min-height: 380px; }

/* PROCESSO */
.processo, .apres, .sobre, .contato { border-top: 1px solid var(--line); padding-block: clamp(80px, 14vh, 160px); }
.proc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(30px, 6vw, 100px); margin-top: clamp(40px, 8vh, 90px); align-items: start; }
.steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; }
.steps .line { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.steps .line i { display: block; width: 1px; height: 100%; background: var(--blue-dark); box-shadow: 0 0 10px var(--blue-dark); transform-origin: top; transform: scaleY(var(--p, 1)); }
.step { position: relative; padding: 0 0 clamp(80px, 24vh, 220px); opacity: .4; transition: opacity .5s; }
.step:last-child { padding-bottom: 0; }
.step.is-on { opacity: 1; }
.step::before { content: ""; position: absolute; left: -44px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--night); border: 1px solid rgba(255,255,255,.4); transition: background .4s, border-color .4s, box-shadow .4s; }
.step.is-on::before { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 0 14px var(--blue-dark); }
.step .n { font-size: .8rem; letter-spacing: .18em; color: var(--blue-dark); }
.step h3 { font-size: clamp(1.5rem, 2.6vw, 2.4rem); margin: 10px 0 14px; }
.step p { color: rgba(255,255,255,.72); max-width: 46ch; }
.proc-photo { position: sticky; top: 12vh; }
.pp-frame { position: relative; aspect-ratio: 3/4; max-height: 76vh; margin-left: auto; border-radius: 20px; overflow: hidden; border: 1px solid var(--card-line); box-shadow: 0 40px 90px -30px rgba(10,92,255,.4); background: var(--night-2); }
.pp-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s cubic-bezier(.45,0,.55,1), transform 1.2s cubic-bezier(.16,1,.3,1); transform: scale(1.04); }
.step-img { display: none; }
.pp-frame img.on { opacity: 1; transform: scale(1); }

/* APRESENTAÇÃO (HTML acessível; movimento de scroll é do motion) */
.apres-stage { margin-top: clamp(30px, 6vh, 60px); }
.apres-frame { position: relative; aspect-ratio: 16/9; width: 100%; border-radius: 20px; overflow: hidden; border: 1px solid var(--card-line); background: #000; box-shadow: 0 60px 160px -40px rgba(45,140,255,.45); }
.apres-frame video, .apres-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apres-poster { transition: opacity .6s; }
.apres-frame.is-playing .apres-poster, .apres-frame.is-started .apres-poster { opacity: 0; pointer-events: none; }
.apres-frame.is-ended .apres-poster { opacity: 1; }
.apres-frame::after { content: ""; position: absolute; inset: 0; background: rgba(7,9,15,.3); transition: opacity .4s; pointer-events: none; }
.apres-frame.is-playing::after { opacity: 0; }
.apres-play { position: absolute; z-index: 3; left: 50%; top: 74%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 14px; background: none; border: 0; color: #fff; cursor: pointer; font: 600 .95rem var(--f-body); min-width: 44px; min-height: 44px; }
.apres-ico { width: 96px; height: 96px; border-radius: 50%; background: var(--blue-dark); display: grid; place-items: center; transition: transform .35s var(--ease); }
.apres-ico::before { content: ""; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 8px; }
.apres-play:hover .apres-ico { transform: scale(1.06); }
.apres-frame.is-playing .apres-play { display: none; }
.apres-bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: linear-gradient(transparent, rgba(7,9,15,.85)); }
.apres-bar[hidden] { display: none; }
.apres-bar button { min-width: 44px; min-height: 44px; background: none; border: 0; color: #fff; cursor: pointer; font: 600 .75rem var(--f-body); border-radius: 8px; }
.ab-prog { flex: 1; height: 24px; position: relative; cursor: pointer; }
.ab-prog::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(255,255,255,.25); }
.ab-prog i { position: absolute; left: 0; top: 11px; height: 2px; width: 0; background: var(--blue-dark); }
.ab-time { font-size: .72rem; color: rgba(255,255,255,.8); white-space: nowrap; }
.apres-aviso { margin-top: 18px; font-size: .74rem; letter-spacing: .12em; color: var(--gray); text-transform: uppercase; }
.apres-desc { margin-top: 10px; max-width: 70ch; font-size: .85rem; color: rgba(255,255,255,.55); }

/* SOBRE */
.sobre-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.sobre-txt h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.sobre-photo { aspect-ratio: 1500/1195; border-radius: 20px; overflow: hidden; border: 1px solid var(--card-line); box-shadow: 0 40px 90px -30px rgba(10,92,255,.4); }
.sobre-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* foto inteira, sem corte */
.sobre-photo { will-change: transform; }
.sobre-txt p:not(.tag) { margin-top: 18px; color: rgba(255,255,255,.75); max-width: 48ch; }
.sobre-txt .btn { margin-top: 28px; }
.contato { padding-bottom: clamp(100px, 18vh, 200px); }
.contato h2 { max-width: 14ch; font-size: clamp(2.6rem, 7vw, 6.4rem); }

/* Responsivo */
@media (max-width: 900px) {
  .chap-in { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: 108px; }
  .svc-text ul { display: none; }
  .lede { font-size: .9rem; margin-top: 8px; }
  .num { font-size: 1.8rem; margin-bottom: 6px; }
  .processo { padding-top: 96px; }
  .svc-text h3 { font-size: 1.7rem; }
  .cap-note { margin-top: 6px; font-size: .8rem; }
  [data-demo] { height: min(56svh, 520px); min-height: 330px; margin-top: 18px; }
  .proc-grid, .sobre-grid { grid-template-columns: 1fr; }
  .proc-photo { display: none; }
  .step-img { display: block; width: 100%; height: auto; max-width: 420px; aspect-ratio: 1/1; object-fit: cover; object-position: 50% 12%; border-radius: 16px; border: 1px solid var(--card-line); margin-top: 18px; }
  /* quadro quadrado: rosto e aparelho citados no alt ficam visíveis */
  .step-img[src*="arthur-celular"] { object-position: 50% 40%; }
  .step-img[src*="abdeel-corrimao"] { object-position: 50% 45%; }
  .step-img[src*="arthur-tablet"] { object-position: 50% 15%; }
  .step { opacity: 1; padding-bottom: 60px; }
  .sobre-photo { max-width: 520px; }
  .apres-ico { width: 64px; height: 64px; } .apres-ico::before { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } .chap { height: auto; padding-block: 60px; } .chap-in { position: static; height: auto; min-height: 0; } }
.no-motion .chap { height: auto; padding-block: 60px; }
.no-motion .chap-in { position: static; height: auto; min-height: 0; }
/* Mobile: régua é um fio de 2 px na borda; padding simétrico */
@media (max-width: 1099px) { main .wrap { padding-right: var(--gutter); } }