/* Actual published client storefronts, observed 2026-10-04. Original image bytes. */
.apex-real-pile{filter:brightness(.72);perspective:1400px}
.apex-real-pile .apex-hero-store{position:absolute;width:58%;height:92%;padding:10px;background:#fff;color:#242324;overflow:hidden;box-shadow:0 30px 90px #0009;border-radius:20px;display:flex;flex-direction:column}
.apex-real-pile .apex-hero-preta{left:-2%;top:2%;--rot:-8deg;z-index:1}
.apex-real-pile .apex-hero-sanbenito{right:-2%;top:9%;--rot:8deg;z-index:2}
.apex-hero-mask{min-height:0;flex:1;overflow:hidden;border-radius:12px}
.apex-hero-mask img{width:100%;height:auto;max-width:none}
.apex-hero-store figcaption{font-family:var(--med);font-size:12px;padding:10px 4px 2px;text-align:left}
.apex-real-pile::after{z-index:3;pointer-events:none;background:linear-gradient(180deg,#06080f10 0%,#06080f00 22%,#06080f35 58%,#06080fee 97%)}
.h1v span{text-shadow:0 5px 36px #000b}
.apex-hero-evidence{font-size:13px;color:#ffffffb3;letter-spacing:.025em;position:relative;margin-top:8px}
.apex-showcase-kicker{display:block;font-family:var(--med);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#5a544a;margin-bottom:18px}
.sfhead .apex-showcase-note{font-size:14px;line-height:1.65;max-width:66ch;color:#575963;margin-top:18px}
.sfbg{background-position:center 12%;filter:blur(12px);opacity:.34;transform:scale(1.03)}
.sfov{background:linear-gradient(180deg,#f4f5faa6,#f4f5fad9 52%,var(--page) 100%)}
.sfbody{grid-template-columns:minmax(230px,.7fr) minmax(0,1.6fr);gap:clamp(32px,5vw,72px);padding-bottom:116px}
.sfbody>*{min-width:0}
.clientes .steps,.clientes .scards{--motion-op:1;--motion-translateY:0px}
.clientes:not(.apex-motion-enabled) .step h3{opacity:1}
.clientes:not(.apex-motion-enabled) .step .sc{grid-template-rows:1fr;opacity:1}
.apex-real-cases{gap:52px}
.scard.apex-real-case{aspect-ratio:auto;border-radius:24px;opacity:1;transform:none;background:#fff;isolation:isolate;min-width:0}
.apex-motion-enabled .scard.apex-real-case{opacity:.66;transform:scale(.98)}
.apex-motion-enabled .scard.apex-real-case.on{opacity:1;transform:scale(1)}
.apex-case-heading{padding:24px;display:flex;gap:16px;align-items:center;position:relative;z-index:2;background:#fff;flex-wrap:wrap}
.apex-case-index{font-family:var(--light);font-size:30px;letter-spacing:-.04em;color:#a49b8e;flex-shrink:0;align-self:flex-start;line-height:1.2}
.apex-case-heading>div{flex:1;min-width:120px}
.apex-case-label{font-size:10px;font-family:var(--med);letter-spacing:.07em;text-transform:uppercase;color:#60645f}
.apex-case-heading h3{font-family:var(--med);font-size:24px;line-height:1.15;letter-spacing:-.025em;margin-top:5px;font-weight:600}
.apex-case-heading p{font-size:13px;color:#646670;margin-top:7px;line-height:1.4}
.apex-case-heading a{font-family:var(--med);font-size:12px;display:inline-flex;gap:8px;min-height:44px;align-items:center;text-decoration:none;color:#292b30;white-space:nowrap;border-bottom:1px solid #d0d0d0}
.apex-case-heading a:hover{color:#005ec4;border-color:currentColor}
.apex-case-heading a:focus-visible{outline:3px solid #007aff;outline-offset:4px;border-radius:3px}
.apex-case-stage{position:relative;overflow:hidden;height:clamp(420px,44vw,580px);background:#e8e3db;perspective:1400px;padding:22px}
.apex-case-sanbenito .apex-case-stage{background:#d4c9bd}
.apex-case-char .apex-case-stage{background:#e8e7dc}
.apex-case-marian .apex-case-stage{background:#510d23}
.apex-capture-window{position:relative;width:100%;height:100%;overflow:hidden;border-radius:10px;box-shadow:0 16px 34px #15172029;background:#fff;transform:translate3d(0,var(--depth-y,0px),0);transform-origin:center}
.apex-capture-window img{display:block;width:100%;height:auto;max-width:none;transform:translate3d(0,var(--capture-y,0px),0);transform-origin:top left}
.apex-real-case[data-capture-kind="viewport"] .apex-case-stage{height:auto;aspect-ratio:1.46}
.apex-real-case[data-capture-kind="viewport"] .apex-capture-window{aspect-ratio:1142/727;height:auto;max-height:100%}
.apex-real-case[data-capture-kind="viewport"] .apex-capture-window img{width:calc(100% * 1157 / 1142)}
.apex-case-caption{display:flex;gap:16px;justify-content:space-between;align-items:baseline;padding:18px 24px 20px;font-size:12px;line-height:1.6;color:#555b62}
.apex-case-format{font-size:10px;white-space:nowrap;color:#73767a;letter-spacing:.025em}
.apex-case-progress{height:3px;background:#e9e6e0;overflow:hidden}
.apex-case-progress span{display:block;height:100%;width:100%;transform:scaleX(var(--case-progress,0));transform-origin:left;background:#8e7d65}
.apex-case-marian .apex-case-progress span{background:#850d32}
.apex-functional-note{text-align:center;font-size:12px;line-height:1.6;color:#ffffffe0;max-width:58ch;margin:20px auto -38px}
.apex-migration-window{height:auto;aspect-ratio:1142/727;overflow:hidden;background:#670817;position:relative}
.apex-migration-window img{width:calc(100% * 1157 / 1142);max-width:none;height:auto;display:block}
.qmark{font-size:14px;line-height:1.5;text-align:left;margin-bottom:14px}
.qcol .qcard{position:relative;inset:auto;width:calc(100% - 24px);margin:-16px 12px 0;z-index:2}
@media(min-width:981px){.apex-real-case[data-capture-kind="full"] .apex-case-stage{height:clamp(420px,44vw,580px)}}
@media(max-width:980px){
  .sfbody{grid-template-columns:minmax(0,1fr);gap:30px}
  .steps{order:1;position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .scards{order:2}
  .step h3{font-size:20px;opacity:1}.step .sc{grid-template-rows:1fr;opacity:1}
  .step .sc>p{font-size:14px}
  .apex-motion-enabled .scard.apex-real-case{opacity:1;transform:none}
  .apex-case-stage{height:clamp(360px,64vw,580px)}
  .apex-real-case[data-capture-kind="viewport"] .apex-case-stage{aspect-ratio:1.5}
}
@media(max-width:600px){
  .apex-real-pile .apex-hero-store{width:75%;padding:6px;border-radius:14px;height:75%}
  .apex-real-pile .apex-hero-preta{left:-20%;top:2%;--rot:-8deg}
  .apex-real-pile .apex-hero-sanbenito{right:-20%;top:18%;--rot:8deg}
  .apex-hero-mask{border-radius:8px}
  .apex-hero-store figcaption{font-size:9px;padding:7px 2px 2px}
  .hero .stage{height:470px;max-height:none}
  .hero .h1v{top:47%}
  .apex-hero-evidence{font-size:12px;max-width:30ch;margin:0 auto}
  .sfhead .apex-showcase-note{font-size:14px}
  .sfbody{padding-inline:20px;padding-bottom:80px}
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .step h3{font-size:22px}.step .sc>p{font-size:15px}
  .apex-real-cases{gap:28px}
  .apex-case-heading{padding:20px 18px;gap:12px}
  .apex-case-index{font-size:26px}
  .apex-case-heading h3{font-size:22px}
  .apex-case-heading>div{min-width:0}
  .apex-case-heading a{margin-left:38px;font-size:12px}
  .apex-case-stage{padding:12px;height:365px}
  .apex-real-case[data-capture-kind="viewport"] .apex-case-stage{aspect-ratio:1.47}
  .apex-capture-window{border-radius:6px}
  .apex-case-caption{padding:16px 18px;flex-direction:column;gap:6px}
  .apex-case-format{font-size:11px}
  .apex-functional-note{margin:18px auto -12px;font-size:12px}
  .qcol .qcard{width:calc(100% - 16px);margin:-8px 8px 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mtrk{animation:none}
  .clientes .steps,.clientes .scards,.clientes .scard,.clientes .step h3,.clientes .step .sc,.clientes .step .sd{transition:none;transform:none;opacity:1;--motion-op:1;--motion-translateY:0px}
  .clientes .step .sc{grid-template-rows:1fr}
  .apex-capture-window,.apex-capture-window img{transform:none!important}
  .apex-case-progress{display:none}
}