/* Services as index + stage (Bruno, 27 Oct 2026; proof). Overrides mvp.css without editing it.
   From 761px (.sx-wide): intro and an index of the four services on the left, one illustration on the right.
   Below 761px (.sc-ready): a list of equal rows on a line that ends at the video; one row opens in place.
   examples.js builds .sx-index/.sx-stage and the toggles; without JavaScript every card stays open, as before. */
#services .sx-index .service-motion-toggle{display:none}

/* Steps 01 · 02 · 03: small, with a node that fills for the current step. */
#services .service-steps{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#services .service-steps button{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;min-height:36px;padding:6px 12px 6px 10px;border:1px solid #c7d7e5;background:#f4f8fc;box-shadow:none;color:#50667c;font-size:12px;line-height:1.2;transform:none}
#services .service-steps button::before{content:"";flex:none;width:7px;height:7px;border:1px solid #8fb0d6;background:#fff;transition:background .2s,border-color .2s}
#services .service-steps .step-number{font-size:11px;color:inherit;opacity:.75}
#services .service-steps .step-label{font-size:12px}
#services .service-steps .step-affordance{display:none}
#services .service-steps button[aria-pressed="true"]{border-color:#164bff;background:#fff;color:#164bff;box-shadow:0 2px 0 #164bff}
#services .service-steps button[aria-pressed="true"]::before{border-color:#164bff;background:#164bff}
#services .service-explanation{padding-top:16px}

/* Pause/Play demonstrations: a small chip in the corner of the illustration that is showing. */
#services .service-demonstration{position:relative}
#services .service-demonstration .service-motion-toggle{position:absolute;top:12px;right:12px;z-index:4;min-height:28px;padding:0 10px;border:1px solid #c7d7e5;background:rgba(255,255,255,.88);color:#30485e;font:inherit;font-size:12px;letter-spacing:.04em;cursor:pointer}
#services .service-demonstration .service-motion-toggle:focus-visible{outline:2px solid #164bff;outline-offset:2px}

/* ---------- Index + stage ---------- */
.sx-index,.sx-stage,.sx-list,.sx-trace,.sx-rail{display:none}
/* Equal columns keep the gap, where the curtain's seam runs and the video opens, at the centre of the screen. */
/* As tall as its content (Bruno, 27 Oct 2026: less empty space). video.js pins the grid when it is centred on screen,
   and the curtain's video and seam (100vh) are centred on the grid instead of hanging from its bottom. */
#services .mvp-services-grid.sx-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px);align-items:center}
.mvp-services-grid.sx-wide .explainer.is-curtain{top:50%;bottom:auto;transform:translate(-50%,-50%)}
.mvp-services-grid.sx-wide .explainer-seam{top:50%;bottom:auto;transform:translateY(-50%)}
#services.sx-wide-section{padding-top:100px;padding-bottom:56px}
#services.sx-wide-section .services-action{margin-top:40px}
/* Where the field turns dark (read by mvp-services.js; dark is reached 110px below it); takes no space. On desktop it
   sits 60px into the grid, so the passage from the hero stays long and soft (about 510px) without adding space. */
.sx-entry{position:relative;display:block;height:0}
#services.sx-wide-section .sx-entry{top:60px}
.sx-wide .sx-index{position:relative;z-index:1;display:block;min-width:0}
.sx-wide .sx-index .explainer-shade{display:none}
.sx-wide .sx-index .section-intro{display:block;margin:0 0 36px}
.sx-wide .sx-index .section-intro p{margin-top:18px}
.sx-wide .sx-list{position:relative;display:block;margin:0;padding:0;list-style:none}
.sx-item{display:grid;grid-template-columns:26px 36px minmax(0,1fr);align-items:center;width:100%;min-height:60px;padding:10px 0;border:0;border-top:1px solid rgba(165,189,219,.16);background:none;color:#c6d4e5;font:inherit;text-align:left;cursor:pointer}
.sx-list li:last-of-type .sx-item{border-bottom:1px solid rgba(165,189,219,.16)}
.sx-item:focus-visible{outline:2px solid #78b7f3;outline-offset:2px}
.sx-node{position:relative;z-index:1;display:block;width:9px;height:9px;border:1px solid rgba(120,183,243,.7);background:#0b1421;transition:background .2s,border-color .2s,box-shadow .2s}
.sx-number{font-size:12px;letter-spacing:.08em;color:#6f8aa8}
.sx-name{justify-self:start;font-size:1.15rem;line-height:1.35;color:#a9bdd5;transition:color .2s}
.sx-item:hover .sx-name{color:#e6eef8}
.sx-item[aria-pressed="true"] .sx-name{color:#fff}
.sx-item[aria-pressed="true"] .sx-number{color:#78b7f3}
.sx-item[aria-pressed="true"] .sx-node{border-color:#cfe6ff;background:#164bff;box-shadow:0 0 0 3px rgba(22,75,255,.2),0 0 14px 2px rgba(120,183,243,.55)}
.sx-wide .sx-rail{position:absolute;display:block;width:1px;margin-left:-.5px;background:rgba(165,189,219,.2);pointer-events:none}
.sx-rail i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);background:linear-gradient(to bottom,#78b7f3,#dcecff);box-shadow:0 0 8px rgba(120,183,243,.6);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sx-wide .sx-trace{position:absolute;display:block;height:1px;margin-top:-.5px;pointer-events:none}
.sx-trace i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(to right,#dcecff,rgba(120,183,243,.85));box-shadow:0 0 8px 1px rgba(120,183,243,.55)}
.sx-trace b{position:absolute;top:-6px;left:-60px;width:70px;height:13px;opacity:0;background:radial-gradient(ellipse 50% 50% at 90% 50%,#fff 0,#cfe6ff 16%,rgba(120,183,243,.7) 36%,rgba(22,75,255,0) 72%)}
.sx-wide .sx-stage{position:relative;z-index:1;display:block;min-width:0}
.sx-wide .sx-stage .mvp-service{transition:opacity .15s}
.sx-wide .sx-stage .mvp-service.sx-off{display:none}
.sx-wide .sx-stage.sx-switching .mvp-service{opacity:.3}
.sx-wide .plate-heading,.sx-wide .sc-toggle{display:none}

/* Under the open video: a big arrow to keep scrolling (Bruno, 27 Oct 2026: "bem visivel, nada delicado").
   examples.js toggles .is-on while the curtain holds open. The curtain's video leaves room for it: the video block
   (100vh, centred on the grid) keeps 150px below the picture, and the arrow sits in that room. */
.sx-scroll-cue{display:none}
.mvp-services-grid.sx-wide .explainer.is-curtain{padding-bottom:150px}
.mvp-services-grid.sx-wide .explainer.is-curtain .explainer-caption,.mvp-services-grid.sx-wide .explainer.is-curtain .explainer-screen{width:min(100%,calc((100vh - 330px)*16/9))}
.sx-wide .sx-scroll-cue{position:absolute;z-index:3;left:50%;top:calc(50% + 50vh - 128px);display:grid;place-items:center;width:110px;height:110px;margin-left:-55px;padding:0;border:0;background:none;color:#fff;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.sx-wide .sx-scroll-cue.is-on{opacity:1;visibility:visible;transition:opacity .3s}
.sx-scroll-cue svg{width:84px;height:84px;stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(170,210,255,.9)) drop-shadow(0 0 20px rgba(22,75,255,.6))}
.sx-scroll-cue.is-on svg{animation:sx-cue 1.1s cubic-bezier(.45,0,.55,1) infinite}
.sx-scroll-cue:focus-visible{outline:2px solid #78b7f3;outline-offset:2px}
@keyframes sx-cue{0%,100%{transform:translateY(-6px);opacity:1}50%{transform:translateY(10px);opacity:.75}}

/* ---------- Phone list ---------- */
.sc-toggle{display:none}
@media(max-width:760px){
  #services{padding-bottom:64px}
  #services .mvp-services-grid.sc-ready{display:block}
  .sc-ready .sx-index{display:block}
  .sc-ready .sx-index .section-intro{margin-bottom:36px}
  .sc-ready .sx-stage{position:relative;display:flex;flex-direction:column;gap:10px;padding-left:26px}
  .sc-ready .sx-stage::before{content:"";position:absolute;left:4px;top:0;bottom:-10px;width:1px;background:rgba(165,189,219,.22)}
  #services .sc-ready .mvp-service{position:relative}
  #services .sc-ready .mvp-service::before{content:"";position:absolute;left:-26px;top:39px;width:9px;height:9px;border:1px solid rgba(120,183,243,.7);background:#0b1421;transition:background .2s,box-shadow .2s}
  #services .sc-ready .mvp-service:not(.is-collapsed)::before{border-color:#cfe6ff;background:#164bff;box-shadow:0 0 0 3px rgba(22,75,255,.2),0 0 14px 2px rgba(120,183,243,.55)}
  #services .sc-ready .mvp-service:not(.is-collapsed)::after{content:"";position:absolute;left:-22px;top:48px;bottom:0;width:1px;transform-origin:top;background:linear-gradient(to bottom,#dcecff,rgba(120,183,243,.85) 40%,rgba(120,183,243,0));box-shadow:0 0 8px rgba(120,183,243,.5);animation:sx-descend .6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes sx-descend{from{transform:scaleY(0)}}
  #services .sc-ready .service-steps{flex-wrap:nowrap}
  #services .sc-ready .service-steps button{flex:1 1 0;padding:6px 8px}
  #services .sc-ready .service-steps .step-number{display:none}

  /* Closed rows: all the same height, title only, on the dark field. */
  #services .mvp-service.is-collapsed{border-color:rgba(165,189,219,.34);background:rgba(11,20,33,.55);box-shadow:inset 0 0 0 1px rgba(165,189,219,.06);color:#f2f7ff}
  #services .mvp-service.is-collapsed .service-experience,#services .mvp-service.is-collapsed .service-summary{display:none}
  #services .sc-ready .mvp-service.is-collapsed .plate-heading{flex-direction:row;align-items:center;gap:14px;height:86px;min-height:0;padding:0 66px 0 16px;border-bottom-color:transparent;box-shadow:none}
  #services .sc-ready .mvp-service.is-collapsed h3{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1rem;line-height:1.3;color:#fff}
  #services .sc-ready .mvp-service.is-collapsed .plate-index{flex:none;width:32px;height:34px;border-color:rgba(165,189,219,.45);background:transparent;color:#a5bddb;box-shadow:none;font-size:12px}
  #services .sc-ready .plate-heading{position:relative;padding-right:66px}

  /* Toggle: the whole heading is the button; the square on the right shows + or −. Label for screen readers. */
  .sc-ready .sc-toggle{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:flex-end;width:100%;padding:0 16px;border:0;background:none;color:#164bff;font:inherit;cursor:pointer}
  .sc-toggle:focus-visible{outline:2px solid #78b7f3;outline-offset:-5px}
  .sc-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sc-toggle-key{position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #fff;background:linear-gradient(130deg,#fff,#dce7f2);box-shadow:2px 3px 0 #c5d4e3}
  .sc-toggle-key::before,.sc-toggle-key::after{content:"";position:absolute;width:14px;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .sc-toggle[aria-expanded="false"] .sc-toggle-key::after{transform:rotate(90deg)}
  .is-collapsed .sc-toggle-key{border-color:rgba(120,183,243,.7);background:rgba(120,183,243,.08);box-shadow:3px 3px 0 rgba(120,183,243,.18);color:#78b7f3}

  /* The video is the fifth row of the same list. */
  #services .explainer{position:relative;margin-top:10px;padding-left:26px}
  #services .explainer::before{content:"";position:absolute;left:4px;top:-10px;height:18px;width:1px;background:rgba(165,189,219,.22)}
  #services .explainer::after{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;border:1px solid rgba(120,183,243,.7);background:#0b1421}
}
@media (prefers-reduced-motion:reduce){
  .sx-rail i,.sx-node,.sx-name,.sc-toggle-key::before,.sc-toggle-key::after,#services .service-steps button::before{transition:none}
  #services .sc-ready .mvp-service:not(.is-collapsed)::after{animation:none}
  .sx-scroll-cue.is-on svg{animation:none}
}