/* Sessão 3 · como funciona. Estilos copiados do site bombeiros.avibedigital.com.br (css/style.css: 571-693), mais o fecho que chama para a ficha. */
/* ===== SEÇÃO 4: MÉTODO ===== */
.method { position: relative; overflow: clip; background: var(--black); }
.method__pin {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(80px, 9vw, 120px) 0 clamp(50px, 6vw, 80px);
}
.method__head {
  max-width: 1360px; width: 100%; margin: 0 auto clamp(32px, 4vw, 56px); padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;
}
.method__head .sec-title { margin: 0; }
.method__progress { display: grid; gap: 10px; min-width: 220px; }
.method__count { font-family: var(--font-title); font-size: 22px; letter-spacing: .08em; color: rgba(255,255,255,.5); text-align: right; }
.method__count b { color: #fff; font-weight: 400; font-size: 34px; }
.method__bar { display: block; height: 3px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.method__bar i { display: block; height: 100%; width: 100%; transform: scaleX(.1667); transform-origin: left; background: linear-gradient(90deg, var(--red), var(--orange)); }

.method__viewport { width: 100%; }
.method__track {
  list-style: none; margin: 0; padding: 0 var(--gutter);
  display: flex; gap: clamp(18px, 2vw, 28px); width: max-content;
  padding-left: max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter)));
  will-change: transform;
}
.step {
  position: relative; flex: 0 0 auto; width: clamp(300px, 30vw, 420px);
  padding: 20px 20px 28px; border-radius: 24px;
  background: linear-gradient(180deg, #161618, #0f0f11);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .5s, transform .6s var(--ease-out), opacity .6s;
  opacity: .55;
}
.step.is-active { opacity: 1; border-color: rgba(229, 9, 20, .55); transform: translateY(-8px); box-shadow: 0 30px 70px -30px rgba(229, 9, 20, .5); }
.step__scene {
  position: relative; height: 220px; border-radius: 16px; overflow: hidden; margin-bottom: 22px;
  background: radial-gradient(80% 80% at 50% 100%, rgba(229, 9, 20, .22), transparent 70%), #0b0b0c;
  border: 1px solid rgba(255,255,255,.06);
}
.step__num {
  position: absolute; right: 22px; top: 248px;
  font-family: var(--font-title); font-size: 64px; line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.18); transition: -webkit-text-stroke-color .5s;
}
.step.is-active .step__num { -webkit-text-stroke-color: var(--red); }
.step__title { font-family: var(--font-title); font-weight: 400; font-size: 34px; line-height: 1; margin: 0 0 12px; padding-right: 70px; text-transform: uppercase; }
.step__text { margin: 0; color: rgba(255,255,255,.68); font-size: 15px; }

/* Cena 1: radar */
.scene-radar { display: grid; place-items: center; }
.radar__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(229, 9, 20, .35); transform: translate(-50%, -50%); }
.radar__ring:nth-of-type(2) { width: 90px; height: 90px; }
.radar__ring:nth-of-type(3) { width: 170px; height: 170px; }
.radar__ring:nth-of-type(4) { width: 250px; height: 250px; }
.radar__sweep {
  position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(229, 9, 20, .55), transparent 70deg);
  animation: rotate 3s linear infinite; animation-play-state: paused;
}
.blip { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; border-radius: 50%; background: var(--orange); opacity: 0; box-shadow: 0 0 12px var(--orange); }
.radar__pin { position: relative; z-index: 1; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--red); }
.step.is-active .radar__sweep { animation-play-state: running; }
.step.is-active .blip { animation: blip 3s var(--d) infinite; }
@keyframes blip { 0%, 100% { opacity: 0; transform: scale(.4); } 10% { opacity: 1; transform: scale(1.4); } 60% { opacity: .7; transform: scale(1); } }

/* Cena 2: anúncios em leque */
.scene-ads .ad {
  position: absolute; left: 50%; top: 50%; width: 130px; height: 160px; object-fit: cover; border-radius: 12px;
  border: 2px solid #fff; box-shadow: 0 16px 30px rgba(0,0,0,.6);
  transform: translate(-50%, -50%); transition: transform .8s var(--ease-out);
}
.step.is-active .ad--1 { transform: translate(-130%, -46%) rotate(-12deg); }
.step.is-active .ad--2 { transform: translate(-50%, -54%) rotate(0deg) scale(1.06); z-index: 2; }
.step.is-active .ad--3 { transform: translate(30%, -46%) rotate(12deg); }

/* Cena 3: barras de custo */
.scene-chart { padding: 26px 26px 0; }
.bars { position: absolute; left: 26px; right: 26px; bottom: 0; top: 60px; display: flex; align-items: end; gap: 12px; }
.bars i { flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--orange), var(--red-deep)); transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease-out); }
.bars i:nth-child(2) { transition-delay: .08s; } .bars i:nth-child(3) { transition-delay: .16s; } .bars i:nth-child(4) { transition-delay: .24s; } .bars i:nth-child(5) { transition-delay: .32s; } .bars i:nth-child(6) { transition-delay: .4s; }
.step.is-active .bars i { transform: scaleY(1); }
.chart__tag { position: absolute; right: 18px; top: 16px; font-family: var(--font-title); font-size: 34px; line-height: 1; color: #fff; text-align: right; }
.chart__tag small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }

/* Cena 4: celular */
.scene-phone { display: grid; place-items: end center; }
.phone { width: 232px; height: 188px; border-radius: 22px 22px 0 0; background: #0f1a14; border: 3px solid #2a2a2e; border-bottom: 0; padding: 0 10px; overflow: hidden; }
.phone__top { display: flex; align-items: center; gap: 8px; margin: 0 -10px 7px; padding: 7px 12px; background: #1f2c25; font-size: 12px; font-weight: 700; }
.phone__top i { width: 18px; height: 18px; border-radius: 50%; background: var(--red); }
.phone__top small { color: #25D366; font-weight: 600; margin-left: auto; }
.msg { margin: 0 0 5px; padding: 5px 8px; border-radius: 10px; font-size: 10.5px; line-height: 1.3; max-width: 82%; opacity: 0; transform: translateY(8px) scale(.96); }
.msg--in { background: #22322a; border-top-left-radius: 2px; }
.msg--out { background: #005c4b; margin-left: auto; border-top-right-radius: 2px; }
.step.is-active .msg { animation: msgIn .45s var(--ease-out) var(--d) forwards; }

/* Cena 5: check */
.scene-check { display: grid; place-items: center; align-content: center; gap: 12px; }
.check { width: 110px; height: 110px; }
.check__ring { fill: none; stroke: var(--red); stroke-width: 6; stroke-dasharray: 315; stroke-dashoffset: 315; transform: rotate(-90deg); transform-origin: center; }
.check__mark { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; }
.step.is-active .check__ring { transition: stroke-dashoffset 1s var(--ease-out); stroke-dashoffset: 0; }
.step.is-active .check__mark { transition: stroke-dashoffset .6s var(--ease-out) .8s; stroke-dashoffset: 0; }
.check__label { font-family: var(--font-title); font-size: 26px; letter-spacing: .04em; opacity: 0; transform: translateY(8px); transition: all .5s var(--ease-out) 1.2s; }
.step.is-active .check__label { opacity: 1; transform: none; }

/* Cena 6: crescimento */
.growth { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 75%; }
.growth__line { fill: none; stroke: var(--orange); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; filter: drop-shadow(0 0 6px var(--orange)); }
.growth__area { fill: rgba(229, 9, 20, .18); opacity: 0; }
.step.is-active .growth__line { transition: stroke-dashoffset 1.6s var(--ease-out); stroke-dashoffset: 0; }
.step.is-active .growth__area { transition: opacity 1s 1s; opacity: 1; }
.growth__tag { position: absolute; left: 18px; top: 16px; font-family: var(--font-title); font-size: 30px; color: #fff; }

@media (max-width: 960px) {
  .method__pin { min-height: 0; }
  .method__progress { display: none; }
  .method__track { flex-direction: column; width: auto; padding: 0 var(--gutter); }
  .step { width: auto; opacity: 1; }
  .step__scene { height: 200px; }
  .step__num { top: 228px; font-size: 52px; }
}

/* no site original o giro do radar não tinha a animação definida */
@keyframes rotate { to { transform: rotate(360deg); } }

/* ---------- ajustes desta página ---------- */
.scene-ads .ad { width: 120px; height: 150px; }
.method__fecho {
  max-width: 1360px; width: 100%; margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 9vw, 130px);
  display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap;
}
.method__fecho p { margin: 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; }
.method__fecho p strong { color: var(--orange); }
@media (max-width: 560px) {
  .method__fecho .btn-jelly { width: 100%; justify-content: center; }
}