/* Jornada: quatro etapas orgânicas inspiradas no mockup aprovado. */
.steps-section.section {
  --wave-base:#e8f8ef;
  padding:64px 0 108px;
  overflow:visible;
  background-color:#d9f5e7 !important;
  background-image:radial-gradient(circle at 85% 20%,rgba(68,214,156,.24),transparent 40%),radial-gradient(circle at 8% 88%,rgba(119,225,183,.3),transparent 44%),linear-gradient(120deg,#e7fbef,#caf1df 55%,#d9f7e8) !important;
}
.steps-showcase .steps-wrap { position:relative; z-index:1; width:calc(100% - clamp(36px,6.8vw,116px)) !important; max-width:1320px !important; }
.steps-showcase .steps-head { display:block; max-width:740px; margin:0 0 0 clamp(0px,3vw,52px); }
.steps-showcase .steps-head .kicker {
  display:inline-flex; gap:14px; width:max-content; max-width:100%;
  padding:0; margin:0;
  color:#008862; background:none;
  font-size:11px; font-weight:850; letter-spacing:.29em; line-height:1.35;
}
.steps-showcase .steps-head .kicker::before { width:36px; height:2px; background:#00a974; }
.steps-section.section .steps-head .section-title {
  max-width:none; margin:10px 0 10px; color:#062d2d;
  font-size:clamp(36px,3.1vw,56px) !important; line-height:1.06;
  font-weight:850; letter-spacing:-.069em; text-wrap:nowrap;
}
.steps-showcase .steps-head .section-desc {
  max-width:590px; margin:0; color:#496b6b;
  font-size:clamp(16px,1.08vw,20px); line-height:1.45;
}
.steps-showcase .steps-scene { position:relative; margin-top:45px; }
.steps-showcase .steps-route {
  position:absolute; z-index:0; top:-72px; left:0; width:100%; height:160px;
  overflow:visible; pointer-events:none;
}
.steps-showcase .steps-route > path { fill:none; stroke-linecap:round; }
.steps-showcase .steps-route-glow { stroke:#13eaa263; stroke-width:9; filter:blur(8px); }
.steps-showcase .steps-route-line { stroke:#00c97c; stroke-width:1.35; filter:drop-shadow(0 0 4px #0fe995); }
.steps-showcase .steps-route-sprigs { opacity:.76; }
.steps-showcase .steps-route circle { fill:#fafffc; stroke:#03d885; stroke-width:2.6; filter:drop-shadow(0 0 4px #12e992); }
.steps-showcase .steps-route .steps-route-pulse {
  fill:#00cd79; stroke:#e8fff1; stroke-width:1.8;
  filter:drop-shadow(0 0 5px #05d789) drop-shadow(0 0 10px #00c777);
}
.steps-showcase .steps-grid,
.steps-showcase .steps-grid.n-journey {
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(32px,2.5vw,48px); padding:0; margin:0;
  border:0; border-radius:0; background:none; overflow:visible;
}
.steps-showcase .steps-grid.n-journey::before { content:none; }
.steps-showcase .step,
.steps-showcase .n-journey .step.n-step-active {
  position:relative; display:block; min-width:0; height:420px; min-height:0;
  padding:0; overflow:visible; border:0;
  border-radius:32px 40px 34px 38px;
  background:none; box-shadow:none; backdrop-filter:none;
  perspective:1400px; transform:none;
  transition:transform .24s ease;
}
.steps-showcase .step:hover,
.steps-showcase .n-journey .step.n-step-active:hover,
.steps-showcase .step:has(:focus-visible) {
  z-index:2;
  transform:translateY(-7px) !important;
}
.steps-showcase .step:nth-child(2) { border-radius:38px 30px 38px 32px; }
.steps-showcase .step:nth-child(3) { border-radius:30px 38px 32px 40px; }
.steps-showcase .step:nth-child(4) { border-radius:38px 34px 40px 30px; }
.steps-showcase .step::before,
.steps-showcase .step::after { content:none; }
.steps-showcase .step-flip-inner {
  position:relative; width:100%; height:100%; border-radius:inherit;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.72,.2,1);
}
.steps-showcase .step.is-flipped .step-flip-inner { transform:rotateY(180deg); }
.steps-showcase .step-face {
  position:absolute; inset:0; display:flex; flex-direction:column;
  min-width:0; border:1.5px solid #ffffffee; border-radius:inherit;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 0 0 6px #c9ffe65c,0 20px 44px #55ce9924,inset 0 2px 4px #ffffff;
}
/* Touch: o giro é 2D (ver fim do arquivo) e só uma face fica visível. No desktop o giro 3D cuida disso com
   backface-visibility; uma troca de visibilidade com atraso deixava o card vazio no meio do giro (flash branco). */
@media (hover: none), (pointer: coarse) {
  .steps-showcase .step.is-flipped .step-front { visibility:hidden; }
  .steps-showcase .step:not(.is-flipped) .step-back { visibility:hidden; }
}
.steps-showcase .step-front {
  padding:112px 28px 72px;
  background:
    radial-gradient(ellipse at 92% 88%,#83dfb744,transparent 47%),
    radial-gradient(circle at 10% 8%,#f5fff6,transparent 42%),
    linear-gradient(155deg,#f1fbf5 0%,#e2f6eb 58%,#ccebdd 100%);
}
.steps-showcase .step-front p { flex:0 0 auto; }
.steps-showcase .step-back {
  padding:23px 23px 20px; overflow:hidden;
  transform:rotateY(180deg);
  background:
    radial-gradient(ellipse at 90% 90%,#83dfb738,transparent 50%),
    linear-gradient(145deg,#f1fbf5 5%,#e2f6eb 62%,#ccebdd);
}
.steps-showcase .step-back-heading { display:flex; align-items:center; gap:9px; color:#008763; font-size:9px; font-weight:850; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; }
.steps-showcase .step-back-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border:1px solid #b3efd0; border-radius:11px; background:#e3fff0; }
.steps-showcase .step-back-icon .i { width:19px; height:19px; }
.steps-showcase .step .step-back h3 { margin:15px 0 8px; color:#082f34; font-size:20px; line-height:1.1; letter-spacing:-.045em; }
.steps-showcase .step .step-back p { flex:none; width:auto; max-width:none; margin:0; color:#486b68; font-size:12px; line-height:1.42; }
.steps-showcase .step-back-label { margin:15px 0 8px; color:#008763; font-size:9px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.steps-showcase .step-back-points { display:grid; gap:5px; margin:0 0 12px; padding:0; list-style:none; }
.steps-showcase .step-back-points li { display:flex; align-items:center; gap:8px; min-height:29px; padding:5px 8px; border:1px solid #cceedd; border-radius:10px; background:#ffffffbc; color:#194b43; font-size:11px; font-weight:650; line-height:1.2; }
.steps-showcase .step-back-points li::before { content:none; }
.steps-showcase .step-back-points li span { display:grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; background:#d9f8e8; color:#008763; font-size:9px; font-weight:800; }
.steps-showcase .step-back-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:max-content; min-height:36px; margin-top:auto; padding:0 14px; border:1px solid #008c65; border-radius:999px; background:#006d55; color:#fff; font-size:11px; font-weight:750; transition:background .2s ease,transform .2s ease; }
.steps-showcase .step-back-button .i { width:15px; height:15px; transform:rotate(180deg); }
.steps-showcase .step-back-button:hover { background:#008c68; transform:translateX(-2px); }
.steps-showcase .step-back-button:focus-visible { outline:3px solid #008c66; outline-offset:4px; }
.steps-showcase .step-icon {
  position:absolute; z-index:5; top:22px; left:28px;
  display:grid; place-items:center; width:76px; height:76px;
  border:8px solid #edfff6; border-radius:50%;
  background:radial-gradient(circle at 43% 26%,#05bf79,#006448 70%);
  color:#fff; box-shadow:0 0 0 5px #90ffd14a,0 0 23px #03e38ec2,0 9px 18px #07a86d55;
}
.steps-showcase .step-icon .i { width:32px; height:32px; stroke-width:2.2; }
.steps-showcase .step-number {
  position:absolute; z-index:5; top:51px; left:116px;
  color:#00966c; font-size:25px; font-weight:300; line-height:1;
  letter-spacing:-.055em;
}
.steps-showcase .step h3,
.steps-showcase .step.n-step-active h3 {
  position:relative; z-index:4; max-width:none; min-height:0;
  margin:0 0 14px; color:#092c41;
  font-size:clamp(20px,1.3vw,24px); font-weight:820;
  line-height:1.13; letter-spacing:-.045em;
}
.steps-showcase .step p,
.steps-showcase .step.n-step-active p {
  position:relative; z-index:4; width:min(100%,35ch); max-width:35ch;
  margin:0; color:#4b6071; font-size:clamp(13px,.87vw,16px);
  line-height:1.47;
}
.steps-showcase .n-journey .n-step-select,
.steps-showcase .n-journey .n-step-select[aria-pressed="true"] {
  position:absolute; z-index:6; bottom:57px; left:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:17px;
  width:auto; min-height:54px; margin:0; padding:0 19px 0 24px;
  border:1px solid #9dffce; border-radius:999px;
  background:linear-gradient(148deg,#008d63,#006447 66%,#005a45);
  color:#fff; box-shadow:0 0 0 3px #ffffff7d,0 9px 18px #14ae7440,inset 0 2px 4px #8dffca6b;
  font-size:15px; font-weight:720; white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease;
}
.steps-showcase .n-step-select .i { width:20px; height:20px; color:#fff; }
.steps-showcase .n-step-select:hover { transform:translateY(-3px); box-shadow:0 0 0 3px #ffffffad,0 13px 21px #14ae7455,inset 0 2px 4px #8dffca6b; }
.steps-showcase .n-step-select:focus-visible { outline:3px solid #008c66; outline-offset:5px; }
.steps-showcase .step-preview { position:absolute; z-index:4; pointer-events:none; }

/* Four small interface fragments mirror the reference while remaining examples. */
.steps-showcase .step-preview--calendar { right:-20px; bottom:8px; width:145px; height:195px; transform:rotate(-9deg); }
.steps-showcase .mini-calendar {
  width:100%; height:100%; padding:17px 10px 13px;
  border:8px solid #eafff6a8; border-radius:24px;
  background:linear-gradient(148deg,#fff,#f6fffcdf); box-shadow:0 13px 27px #31b3873b,inset 0 1px 3px #fff;
}
.steps-showcase .mini-calendar-days { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; align-items:center; color:#008760; font-size:9px; font-weight:800; text-align:center; }
.steps-showcase .mini-calendar-days span:nth-child(4) { padding:4px 1px; border-radius:50%; background:#008d63; color:#fff; }
.steps-showcase .mini-calendar-grid { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,22px); gap:6px 3px; margin-top:20px; }
.steps-showcase .mini-calendar-grid span { border-radius:5px; background:#e8f5f4; }
.steps-showcase .mini-calendar-grid .is-green { background:linear-gradient(90deg,#00a874,#087d6b); }
.steps-showcase .mini-calendar-grid .is-blue { background:#a9d4ff; }
.steps-showcase .mini-calendar-grid .is-yellow { background:#ffce35; }
.steps-showcase .mini-calendar-grid .is-purple { background:#d99bfa; }
.steps-showcase .step-preview--map { right:-20px; bottom:7px; width:165px; height:210px; transform:rotate(11deg); }
.steps-showcase .mini-map {
  position:absolute; top:0; right:0; width:155px; height:175px;
  overflow:hidden; border:8px solid #f4fffbad; border-radius:23px;
  background:linear-gradient(135deg,#f7fffcf0,#daf9ebd9);
  box-shadow:0 10px 25px #31b38736;
}
.steps-showcase .mini-map svg { width:100%; height:100%; }
.steps-showcase .mini-map-street { fill:none; stroke:#ffffff; stroke-width:9; opacity:.85; }
.steps-showcase .mini-map-route { fill:none; stroke:#00bb81; stroke-width:2.4; stroke-dasharray:4 4; }
.steps-showcase .mini-map-start { fill:#00a775; }
.steps-showcase .mini-map-end { fill:#079b70; stroke:#fff; stroke-width:5; filter:drop-shadow(0 0 5px #12dfa0); }
.steps-showcase .mini-punch {
  position:absolute; right:-1px; bottom:0; display:flex; align-items:center; gap:10px;
  width:175px; min-height:68px; padding:10px 12px; transform:rotate(-1deg);
  border:1px solid #fff; border-radius:15px; background:#ffffffef;
  box-shadow:0 12px 24px #24aa8542;
}
.steps-showcase .mini-punch-icon { display:grid; place-items:center; flex:none; width:30px; height:30px; color:#05a36e; }
.steps-showcase .mini-punch-icon .i { width:28px; height:28px; }
.steps-showcase .mini-punch strong,.steps-showcase .mini-punch small { display:block; white-space:nowrap; }
.steps-showcase .mini-punch strong { color:#092f3d; font-size:11px; font-style:italic; }
.steps-showcase .mini-punch small { margin-top:3px; color:#536778; font-size:9px; }
.steps-showcase .step-preview--requests { right:-16px; bottom:38px; width:175px; transform:rotate(-9deg); }
.steps-showcase .mini-requests { display:grid; gap:6px; padding:9px; border:8px solid #eefff6a6; border-radius:22px; background:#fafffdcc; box-shadow:0 15px 28px #2cb08439; }
.steps-showcase .mini-request { display:flex; align-items:center; gap:6px; min-height:48px; padding:6px; border:1px solid #d3f4e6; border-radius:10px; background:#ffffffeb; box-shadow:0 3px 8px #15a7751c; }
.steps-showcase .mini-request-icon { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; }
.steps-showcase .mini-request-icon .i { width:16px; height:16px; }
.steps-showcase .mini-request-icon.is-blue { color:#006de6; background:#e2f1ff; }
.steps-showcase .mini-request-icon.is-green { color:#fff; background:#079d70; }
.steps-showcase .mini-request-icon.is-purple { color:#fff; background:#8a39df; }
.steps-showcase .mini-request strong { min-width:0; color:#163e43; font-size:9px; line-height:1.1; white-space:nowrap; }
.steps-showcase .mini-request small { margin-left:auto; padding:4px 5px; border-radius:6px; font-size:8px; white-space:nowrap; }
.steps-showcase .mini-request small.is-blue { color:#006dd2; background:#ddecff; }
.steps-showcase .mini-request small.is-green { color:#007e57; background:#c8f5df; }
.steps-showcase .mini-request small.is-purple { color:#8c3de2; background:#f0e3ff; }
.steps-showcase .step-preview--payment { right:-12px; bottom:48px; width:151px; transform:rotate(-8deg); }
.steps-showcase .mini-payment { min-height:145px; padding:17px 12px 13px; border:8px solid #eefff6a7; border-radius:20px; background:#ffffffde; box-shadow:0 14px 28px #2cb08438; }
.steps-showcase .mini-payment-head { display:flex; align-items:center; gap:8px; }
.steps-showcase .mini-payment-icon { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:linear-gradient(145deg,#0bbd7d,#007c55); color:white; font-size:22px; font-weight:800; box-shadow:0 2px 8px #08b57e6b; }
.steps-showcase .mini-payment-head strong,.steps-showcase .mini-payment-head small { display:block; white-space:nowrap; }
.steps-showcase .mini-payment-head strong { color:#173d43; font-size:10px; }
.steps-showcase .mini-payment-head small { width:max-content; margin-top:6px; padding:3px 6px; border-radius:999px; background:#bff5dc; color:#00875f; font-size:8px; }
.steps-showcase .mini-payment-bars { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:18px; }
.steps-showcase .mini-payment-bars span { height:8px; border-radius:99px; background:#e2f5f0; }
.steps-showcase .mini-payment-bars span:nth-child(2) { width:58%; }
.steps-showcase .mini-payment-bars span:nth-child(3) { width:88%; }
.steps-showcase .mini-payment-bars span:nth-child(4) { width:66%; }

@media(min-width:1351px) {
  .steps-showcase .step-front { padding-inline:30px 25px; }
  .steps-showcase .step-icon { left:27px; }
  .steps-showcase .step-number { left:125px; }
  .steps-showcase .n-journey .n-step-select,.steps-showcase .n-journey .n-step-select[aria-pressed="true"] { left:28px; gap:10px; padding-inline:18px 14px; font-size:13px; }
  .steps-showcase .step-preview--calendar { right:-35px; bottom:-50px; transform:scale(.72) rotate(-9deg); }
  .steps-showcase .step-preview--map { right:-35px; bottom:-50px; transform:scale(.72) rotate(11deg); }
  .steps-showcase .step-preview--requests { right:-50px; bottom:-50px; transform:scale(.66) rotate(-9deg); }
  .steps-showcase .step-preview--payment { right:-48px; bottom:-35px; transform:scale(.86) rotate(-8deg); }
}
@media(max-width:1350px) {
  .steps-showcase .steps-head .section-title { text-wrap:balance; }
  .steps-showcase .steps-route { display:none; }
  .steps-showcase .steps-grid,.steps-showcase .steps-grid.n-journey { grid-template-columns:repeat(2,minmax(0,1fr)); gap:76px 40px; }
  .steps-showcase .step,.steps-showcase .n-journey .step.n-step-active { height:414px; }
  .steps-showcase .step-front { padding-inline:42px; }
  .steps-showcase .step-back { padding:28px 34px; }
  .steps-showcase .step .step-back h3 { font-size:23px; }
  .steps-showcase .step .step-back p { font-size:14px; }
  .steps-showcase .step-back-points li { min-height:32px; font-size:12px; }
}
@media(max-width:700px) {
  .steps-section.section { padding:64px 0 88px; }
  .steps-showcase .steps-wrap { width:calc(100% - 36px) !important; }
  .steps-showcase .steps-head { margin-left:0; }
  .steps-showcase .steps-head .kicker { gap:9px; font-size:9px; letter-spacing:.18em; }
  .steps-showcase .steps-head .kicker::before { width:23px; }
  .steps-showcase .steps-head .section-title { font-size:clamp(36px,8.4vw,48px) !important; text-wrap:balance; }
  .steps-showcase .steps-head .section-desc { font-size:16px; }
  .steps-showcase .steps-desktop-break { display:none; }
  .steps-showcase .steps-scene { margin-top:65px; }
  .steps-showcase .steps-grid,.steps-showcase .steps-grid.n-journey { grid-template-columns:1fr; gap:74px; padding:0; }
  .steps-showcase .step,.steps-showcase .n-journey .step.n-step-active { height:460px; min-height:0; padding:0; }
  .steps-showcase .step-front { padding:105px 26px 76px; }
  .steps-showcase .step-icon { left:24px; width:78px; height:78px; }
  .steps-showcase .step-number { left:108px; top:47px; font-size:27px; }
  .steps-showcase .step h3,.steps-showcase .step.n-step-active h3 { font-size:23px; }
  .steps-showcase .step p,.steps-showcase .step.n-step-active p { max-width:28ch; font-size:14px; }
  .steps-showcase .n-journey .n-step-select,.steps-showcase .n-journey .n-step-select[aria-pressed="true"] { left:26px; bottom:30px; min-height:50px; font-size:14px; }
  .steps-showcase .step-preview { transform-origin:right bottom; }
  .steps-showcase .step-preview--calendar { right:-11px; bottom:13px; transform:scale(.74) rotate(-9deg); }
  .steps-showcase .step-preview--map { right:8px; bottom:12px; transform:scale(.74) rotate(11deg); }
  .steps-showcase .step-preview--requests { right:-15px; bottom:20px; transform:scale(.72) rotate(-9deg); }
  .steps-showcase .step-preview--payment { right:-12px; bottom:42px; transform:scale(.86) rotate(-8deg); }
  .steps-showcase .step-back { padding:24px 24px 22px; }
  .steps-showcase .step .step-back h3 { font-size:21px; }
  .steps-showcase .step .step-back p { font-size:13px; }
  .steps-showcase .step-back-points li { min-height:33px; font-size:12px; }
}
@media(max-width:390px) {
  .steps-showcase .step,.steps-showcase .n-journey .step.n-step-active { height:480px; }
  .steps-showcase .step-front { padding-inline:23px; }
  .steps-showcase .step p,.steps-showcase .step.n-step-active p { max-width:24ch; }
  .steps-showcase .step-preview--requests { transform:scale(.63) rotate(-9deg); }
}
@media(max-width:375px) {
  .steps-showcase .step:nth-child(3),.steps-showcase .step:nth-child(4) { height:520px; }
  .steps-showcase .step-preview--requests,.steps-showcase .step-preview--payment { bottom:110px; }
}
@media(prefers-reduced-motion:reduce) {
  .steps-showcase .step,.steps-showcase .n-journey .step.n-step-active { transition:none; }
  .steps-showcase .step:hover,.steps-showcase .n-journey .step.n-step-active:hover,.steps-showcase .step:has(:focus-visible) { transform:none !important; }
  .steps-showcase .step-flip-inner,.steps-showcase .step-front,.steps-showcase .step-back { transition:none; }
  .steps-showcase .n-step-select { transition:none; }
  .steps-showcase .n-step-select:hover { transform:none; }
  .steps-showcase .step-back-button { transition:none; }
  .steps-showcase .steps-route-pulse { display:none; }
}

/* Four rotating cards fit the original Solutions strip width. */
#solucoes .steps-showcase { width:min(100%,1100px); margin:26px auto 0; }
#solucoes .steps-showcase .steps-grid.n-journey { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
#solucoes .steps-showcase .step { height:210px; }
#solucoes .steps-showcase .step-flip-inner { display:block; height:100%; }
#solucoes .steps-showcase .step-face { position:absolute; inset:0; min-height:0; overflow:hidden; border-radius:20px; box-shadow:0 0 0 2px #d7f8e8,0 10px 22px #24996627; }
#solucoes .steps-showcase .step-front { padding:64px 12px 46px; }
#solucoes .steps-showcase .step-icon { top:12px; left:12px; width:42px; height:42px; border-width:4px; box-shadow:0 0 0 3px #90ffd14a,0 0 12px #03e38e90; }
#solucoes .steps-showcase .step-icon .i { width:20px; height:20px; }
#solucoes .steps-showcase .step-number { top:24px; left:62px; font-size:17px; }
#solucoes .steps-showcase .step h3 { margin:0 0 7px; font-size:16px; line-height:1.12; }
#solucoes .steps-showcase .step-front p { width:auto; max-width:none; font-size:10.5px; line-height:1.35; }
#solucoes .steps-showcase .n-journey .n-step-select { bottom:12px; left:12px; min-height:32px; gap:5px; padding:0 10px; font-size:10px; }
#solucoes .steps-showcase .n-step-select .i { width:14px; height:14px; }
#solucoes .steps-showcase .step-preview { display:none; }
#solucoes .steps-showcase .step-back { display:flex; flex-direction:column; gap:0; padding:8px 10px; overflow-y:auto; scrollbar-width:thin; }
#solucoes .steps-showcase .step-back > * { flex-shrink:0; }
#solucoes .steps-showcase .step-back-heading { gap:5px; font-size:8px; line-height:1.15; }
#solucoes .steps-showcase .step-back-icon { width:20px; height:20px; flex-basis:20px; border-radius:7px; }
#solucoes .steps-showcase .step-back-icon .i { width:14px; height:14px; }
#solucoes .steps-showcase .step .step-back h3 { position:static; margin:5px 0 3px; font-size:14px; line-height:1.12; }
#solucoes .steps-showcase .step .step-back p { position:static; flex:none; width:auto; max-width:none; margin:0; font-size:10px; line-height:1.25; }
#solucoes .steps-showcase .step-back-label { margin:5px 0 3px; font-size:8px; }
#solucoes .steps-showcase .step-back-points { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; margin:0 0 5px; }
#solucoes .steps-showcase .step-back-points li { min-height:24px; gap:3px; padding:2px 4px; font-size:8px; line-height:1.15; }
#solucoes .steps-showcase .step-back-points li span { width:15px; height:15px; flex:none; font-size:7px; }
#solucoes .steps-showcase .step-back-button { min-height:24px; padding:0 9px; font-size:9px; }
#solucoes .steps-showcase .step-back-button .i { width:12px; height:12px; }
@media(max-width:900px) {
  #solucoes .steps-showcase .steps-grid.n-journey { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  #solucoes .steps-showcase .steps-grid.n-journey { grid-template-columns:1fr; gap:12px; }
  #solucoes .steps-showcase .step { height:225px; }
  #solucoes .steps-showcase .step-front { padding:62px 16px 45px; }
  #solucoes .steps-showcase .step h3 { font-size:18px; }
  #solucoes .steps-showcase .step-front p { font-size:12px; }
  #solucoes .steps-showcase .step-back-points li { min-height:24px; font-size:9px; }
}

/* Flutuação leve dos cards (`translate` não conflita com o hover em `transform`) */
@keyframes step-bob { 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: no-preference) {
  #solucoes .steps-showcase .step.reveal-complete { animation: step-bob 5.2s ease-in-out infinite; }
  #solucoes .steps-showcase .step.reveal-complete:nth-child(2) { animation-delay: -1.3s; }
  #solucoes .steps-showcase .step.reveal-complete:nth-child(3) { animation-delay: -2.6s; }
  #solucoes .steps-showcase .step.reveal-complete:nth-child(4) { animation-delay: -3.9s; }
}

/* Depois de clicar (foco por mouse), o card volta a flutuar ao desvirar; o foco por teclado continua parando a animação */
@media (prefers-reduced-motion: no-preference) {
  #solucoes .steps-showcase .step.reveal-complete:focus-within:not(.is-flipped):not(:has(:focus-visible)) { animation: step-bob 5.2s ease-in-out infinite !important; }
  #solucoes .steps-showcase .step.reveal-complete:focus-within:not(.is-flipped):not(:has(:focus-visible)):nth-child(2) { animation-delay: -1.3s !important; }
  #solucoes .steps-showcase .step.reveal-complete:focus-within:not(.is-flipped):not(:has(:focus-visible)):nth-child(3) { animation-delay: -2.6s !important; }
  #solucoes .steps-showcase .step.reveal-complete:focus-within:not(.is-flipped):not(:has(:focus-visible)):nth-child(4) { animation-delay: -3.9s !important; }
}

/* Touch (hover: none ou pointer: coarse): giro 2D (a face nova abre a partir da borda). O 3D com backface-visibility
   mostra frente espelhada/cards vazios no Safari/iOS. Desktop com mouse mantém o giro 3D. */
@keyframes step-turn-2d { from { scale: 0 1; } to { scale: 1 1; } }
@media (hover: none), (pointer: coarse) {
  .steps-showcase .step-flip-inner, .steps-showcase .step.is-flipped .step-flip-inner { transform: none !important; transition: none; transform-style: flat; }
  .steps-showcase .step-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .steps-showcase .step-back { transform: none; }
  .steps-showcase .step-front, .steps-showcase .step-back { transition: none; }
  .steps-showcase .step.is-turning .step-flip-inner { animation: step-turn-2d .42s cubic-bezier(.2, .72, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .steps-showcase .step.is-turning .step-flip-inner { animation: none; }
}

/* Celular: grid 2×2 com os quatro cards visíveis de uma vez. Frente e verso dividem a mesma célula,
   então o card tem a altura da face maior (sem rolagem interna) e o giro não muda o tamanho. */
@media (max-width:600px) {
  #solucoes .steps-showcase .steps-grid.n-journey { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #solucoes .steps-showcase .step { height:auto; }
  #solucoes .steps-showcase .step-flip-inner { display:grid; height:auto; }
  #solucoes .steps-showcase .step-face { position:relative; inset:auto; grid-area:1 / 1; border-radius:18px; }
  #solucoes .steps-showcase .step-front { padding:58px 11px 54px; }
  #solucoes .steps-showcase .step-icon { top:11px; left:11px; width:40px; height:40px; }
  #solucoes .steps-showcase .step-icon .i { width:19px; height:19px; }
  #solucoes .steps-showcase .step-number { top:21px; left:58px; font-size:16px; }
  #solucoes .steps-showcase .step h3 { font-size:clamp(14px,4vw,16px); }
  #solucoes .steps-showcase .step-front p { font-size:clamp(11px,3vw,12px); line-height:1.4; }
  #solucoes .steps-showcase .n-journey .n-step-select { left:11px; right:11px; bottom:11px; justify-content:center; min-height:34px; font-size:11px; }
  #solucoes .steps-showcase .step-back { padding:10px; overflow:visible; }
  #solucoes .steps-showcase .step-back-heading { font-size:8.5px; }
  #solucoes .steps-showcase .step .step-back h3 { margin:7px 0 4px; font-size:13.5px; }
  #solucoes .steps-showcase .step .step-back p { font-size:10.5px; line-height:1.35; }
  #solucoes .steps-showcase .step-back-label { margin:7px 0 4px; font-size:8.5px; }
  #solucoes .steps-showcase .step-back-points { grid-template-columns:1fr; gap:3px; margin-bottom:8px; }
  #solucoes .steps-showcase .step-back-points li { min-height:22px; padding:2px 5px; font-size:10px; }
  #solucoes .steps-showcase .step-back-button { min-height:30px; font-size:10.5px; }
}

/* Celular (refino): o card tem a altura da FRENTE; o verso cobre o card e rola por dentro se precisar
   (mesma solução do desktop). Linhas com altura igual e flutuação sincronizada mantêm o grid alinhado. */
@media (max-width:600px) {
  #solucoes .steps-showcase .steps-grid.n-journey { grid-auto-rows:1fr; align-items:stretch; }
  #solucoes .steps-showcase .step { height:100%; }
  #solucoes .steps-showcase .step-flip-inner { display:block; position:relative; height:100%; }
  #solucoes .steps-showcase .step-front { position:relative; height:100%; padding:56px 12px 54px; }
  #solucoes .steps-showcase .step-back { position:absolute; inset:0; grid-area:auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  #solucoes .steps-showcase .step h3 { margin:0 0 6px; }
  #solucoes .steps-showcase .step-front p { line-height:1.38; }
  #solucoes .steps-showcase .step.reveal-complete,
  #solucoes .steps-showcase .step.reveal-complete:nth-child(n),
  #solucoes .steps-showcase .step.reveal-complete:focus-within:not(.is-flipped):not(:has(:focus-visible)):nth-child(n) { animation-delay:0s !important; }
}
/* Touch: o Safari mantém :hover depois do toque (card "preso" levantado). Só levanta com mouse ou foco de teclado. */
@media (hover:none) {
  .steps-showcase .step:hover,
  .steps-showcase .n-journey .step.n-step-active:hover { transform:none !important; z-index:auto; }
}

/* Corpo do verso: no desktop não altera o layout (display: contents). */
.steps-showcase .step-back-body { display:contents; }
@media (max-width:600px) {
  /* Verso maior que o card: o conteúdo rola numa área própria e o "Voltar" fica numa faixa fixa embaixo,
     sem cobrir texto e sem aumentar o card. */
  #solucoes .steps-showcase .step-back { overflow:hidden; padding-bottom:9px; }
  #solucoes .steps-showcase .step-back > .step-back-body { display:block; flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent); }
  #solucoes .steps-showcase .step-back > .step-back-body::-webkit-scrollbar { display:none; }
  #solucoes .steps-showcase .step-back-button { position:static; flex:none; margin-top:7px; box-shadow:none; }
}