/* =====================================================================
   Site em 5 Dias — Home v7 · "Futuristic Digital Luxury"
   Vitrine de interfaces flutuantes em camadas 3D (CSS 3D + JS leve),
   com as capturas reais dos nove projetos.
   ===================================================================== */

/* ---------- Fundo e atmosfera ---------- */
.hero7 { background: #06080F; border-bottom: 1px solid var(--line); }
.hero7__bg { background:
  radial-gradient(38% 46% at 74% 40%, rgba(135, 91, 255, .20), transparent 70%),
  radial-gradient(30% 40% at 90% 12%, rgba(71, 123, 255, .16), transparent 70%),
  radial-gradient(40% 30% at 60% 96%, rgba(71, 123, 255, .10), transparent 70%),
  linear-gradient(180deg, #05070D 0%, #090D16 70%); }
.hero7__bg::after { opacity: .45; }

.hero7__grid { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); gap: clamp(8px, 2vw, 32px); min-height: min(calc(100svh - 120px), 860px); }

/* ---------- Tipografia editorial ---------- */
.hero7__title { font: 500 clamp(44px, 5vw, 86px)/.98 "Fraunces", Georgia, "Times New Roman", serif; font-optical-sizing: auto; letter-spacing: -.025em; color: #F5F7FF; text-wrap: balance; margin-top: 4px; }
.hero7__title em { display: block; font-style: normal; margin-top: .06em; padding-bottom: .08em;
  background: linear-gradient(95deg, #7FC4FF 0%, #477BFF 38%, #875BFF 72%, #C3AEFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(71, 123, 255, .35)) drop-shadow(0 0 40px rgba(135, 91, 255, .22)); }
.hero7__lead { margin-top: 22px; max-width: 520px; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.6; color: #C2C9DE; }
.facts7 { margin: 26px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0; max-width: 560px; border-top: 1px solid rgba(143, 174, 255, .16); }
.facts7__item { padding: 16px 26px 16px 0; }
.facts7__item + .facts7__item { padding-left: 26px; border-left: 1px solid rgba(143, 174, 255, .16); }
.facts7 dt { font: 500 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8EA6E8; margin-bottom: 8px; }
.facts7 dd { margin: 0; color: #C2C9DE; }
.facts7 dd small { font-size: 14px; color: #AEB6CE; }
.facts7 dd strong { font: 400 clamp(30px, 2.6vw, 42px)/1 "Fraunces", Georgia, serif; letter-spacing: -.02em; color: #F5F7FF; white-space: nowrap; }
.facts7 dd span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #98A1BC; }
.hero7__ctas { margin-top: 26px; }

/* ---------- Vitrine em camadas ---------- */
.hero7__show { position: relative; min-width: 0; animation: fadeUp 1.2s .1s var(--ease-out) both; }
.deck7 { --accent: #875BFF; position: relative; width: 112%; margin: 0 -6% 0 -2%; aspect-ratio: 1.22; isolation: isolate; }
.deck7__light { position: absolute; inset: -6% -10% 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 40% at 46% 46%, rgba(71, 123, 255, .26), transparent 70%),
    radial-gradient(34% 36% at 66% 34%, rgba(135, 91, 255, .24), transparent 70%),
    conic-gradient(from 200deg at 82% -6%, transparent 0deg, rgba(120, 150, 255, .10) 18deg, transparent 40deg);
  filter: blur(6px); }
.deck7__floor { position: absolute; left: 4%; right: 2%; bottom: 3%; height: 20%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 46% 30%, color-mix(in srgb, var(--accent) 22%, rgba(71, 123, 255, .18)), transparent 70%); filter: blur(18px); transition: background 1.2s ease; }
.deck7__stage { position: absolute; inset: 0; perspective: 1700px; perspective-origin: calc(78% + var(--px, 0%)) calc(36% + var(--py, 0%)); }

.pane7 { --t: translate3d(56%, 18%, -900px); position: absolute; left: -1%; top: 13%; width: 72%; aspect-ratio: 1.5; margin: 0; padding: 1.5px; border-radius: 14px;
  background: linear-gradient(140deg, rgba(170, 200, 255, .95) 0%, rgba(110, 140, 255, .5) 22%, rgba(71, 123, 255, .12) 55%, rgba(135, 91, 255, .45) 82%, rgba(200, 170, 255, .9) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 12px 14px 0 -3px rgba(105, 125, 255, .16), 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 46px -6px rgba(71, 123, 255, .35);
  transform-origin: 50% 50%; transform: var(--t) rotateY(-27deg) rotateX(5deg) rotateZ(-1.5deg); opacity: 0; filter: brightness(.5) saturate(.85);
  transition: transform 1s cubic-bezier(.62, .02, .22, 1), opacity .75s ease, filter 1s ease; will-change: transform, opacity; pointer-events: none; overflow: hidden; }
.pane7 img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 12.5px; background: #0B0F1C; }
.pane7::after { content: ""; position: absolute; inset: 1.5px; border-radius: 12.5px; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 24%, transparent 38%, transparent 70%, rgba(135, 91, 255, .10) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 6%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -40px 60px -40px rgba(6, 8, 15, .6); }
.pane7.is-instant { transition: none !important; }
/* a tela da frente "navega" devagar pelo site (movimento contínuo e suave) */
.pane7[data-slot="0"] img { animation: pan7 2.4s ease-in-out .1s both; transform-origin: 50% 0; }
.pane7[data-slot="exit"] img { transform: scale(1.09) translateY(-3.5%); transition: none; }
@keyframes pan7 { from { transform: scale(1) translateY(0); } to { transform: scale(1.09) translateY(-3.5%); } }

.pane7[data-slot="0"] { --t: translate3d(0, 0, 0); opacity: 1; filter: none; z-index: 5;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 14px 16px 0 -3px rgba(105, 125, 255, .22), 0 50px 110px -30px rgba(0, 0, 0, .95), 0 0 70px -6px rgba(71, 123, 255, .45), 0 0 120px -20px color-mix(in srgb, var(--accent) 35%, transparent); }
.pane7[data-slot="1"] { --t: translate3d(19%, 6%, -230px); opacity: .9; filter: brightness(.7) saturate(.9); z-index: 4; }
.pane7[data-slot="2"] { --t: translate3d(34%, 11%, -460px); opacity: .7; filter: brightness(.5) saturate(.85); z-index: 3; }
.pane7[data-slot="3"] { --t: translate3d(46%, 15%, -690px); opacity: .45; filter: brightness(.38) saturate(.8); z-index: 2; }
.pane7[data-slot="h"] { z-index: 1; }
.pane7[data-slot="exit"] { --t: translate3d(-34%, 14%, 280px); opacity: 0; filter: brightness(1.1); z-index: 6;
  transition: transform .7s cubic-bezier(.5, 0, .75, .4), opacity .55s ease .05s, filter .55s ease; }
.pane7[data-slot="exit"] { transform: var(--t) rotateY(-38deg) rotateX(7deg) rotateZ(-3deg); }
@supports (-webkit-box-reflect: below) {
  .deck7:not(.is-lite) .pane7[data-slot="0"] { -webkit-box-reflect: below 22px linear-gradient(transparent 72%, rgba(255, 255, 255, .14)); }
}
/* aparelhos mais modestos: menos camadas, sem filtros pesados */
.deck7.is-lite .pane7 { filter: none !important; transition-duration: .8s; }
.deck7.is-lite .pane7[data-slot="0"] img { animation: none; }
.deck7.is-lite .pane7[data-slot="1"] { opacity: .55; }

/* ---------- Legenda sincronizada ---------- */
.cap7 { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; width: min(100%, 640px); max-width: 100%; margin: -2% 0 0 4%; padding: 11px 16px 13px 18px; border-radius: 16px;
  background: rgba(10, 13, 24, .66); border: 1px solid rgba(143, 174, 255, .16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
.cap7__count { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; color: #8F98B5; }
.cap7__count b { color: #F5F7FF; font-weight: 500; }
.cap7__name { flex: 1 1 auto; min-width: 0; font: 500 21px/1.1 "Fraunces", Georgia, serif; letter-spacing: -.01em; color: #F5F7FF; }
.cap7__plan { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 45%, #DCE2F7); }
.cap7__link { font: 600 14.5px/1.2 var(--sans); color: #C9D4FF; text-decoration: none; border-bottom: 1px solid rgba(201, 212, 255, .45); padding: 4px 0 2px; }
.cap7__link:hover, .cap7__link:focus-visible { color: #fff; border-color: #fff; }
.cap7__pause { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(143, 174, 255, .25); background: transparent; color: #B9C3E2; font: 500 12.5px/1 var(--sans); cursor: pointer; }
.cap7__pause:hover, .cap7__pause:focus-visible { color: #fff; border-color: rgba(201, 212, 255, .6); }
.cap7__pi { width: 8px; height: 10px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.cap7.is-paused .cap7__pi { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.cap7__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(143, 174, 255, .10); }
.cap7__bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #477BFF, #875BFF); animation: cap7bar 1500ms linear both; }
.cap7.is-paused .cap7__bar { opacity: .35; }
@keyframes cap7bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .hero7__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .deck7 { width: 100%; margin: 8px 0 0; }
  .cap7 { margin: -3% auto 0; }
}
@media (max-width: 760px) {
  .hero7__title { font-size: clamp(38px, 10.4vw, 52px); }
  .facts7 { grid-template-columns: 1fr 1fr; }
  .facts7__item { padding-right: 14px; }
  .facts7__item + .facts7__item { padding-left: 14px; }
  .facts7 dd strong { font-size: 27px; }
  .deck7 { width: 112%; margin: 6px -6% 0; aspect-ratio: 1.15; }
  .deck7__stage { perspective: 1100px; }
  .pane7 { left: -2%; top: 12%; width: 82%; }
  .cap7 { gap: 6px 12px; padding: 10px 14px 12px; }
  .cap7__name { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pane7[data-slot="0"] img { animation: none; }
  .pane7, .pane7[data-slot="exit"] { transition: opacity .3s ease !important; }
  .hero7__show { animation: none; }
  .cap7__bar { display: none; }
}

/* portfólio: capturas ancoradas no topo e centralizadas (sem cortar laterais) */
.dev[data-scene] .dev__scr img { object-position: center top !important; }

/* ---------- Planos: o cartão em foco (mouse, toque ou teclado) assume o destaque roxo ---------- */
.sec--light .step-plan { transition: transform .6s var(--ease-out), border-color .4s, box-shadow .6s var(--ease-out), background-color .45s ease, color .45s ease; }
.sec--light .step-plan.is-featured:not(.is-on) { --ice: inherit; --muted: inherit; --soft: inherit; --line: inherit; --line-2: inherit; background: #fff; color: #090D16; box-shadow: 0 30px 60px -40px rgba(20, 30, 80, .35); }
.sec--light .step-plan.is-featured:not(.is-on)::after { opacity: 0; }
.sec--light .step-plan.is-featured:not(.is-on) .step-plan__list li { color: #2D3448; }
.sec--light .step-plan.is-featured:not(.is-on) .step-plan__list li::before { border-color: #3D6BFF; }
.sec--light .step-plan.is-featured:not(.is-on) .plan__prefix { color: #3D5AD6; }
.sec--light .step-plan.is-on { --ice: #F5F7FF; --muted: #AAB2C8; --soft: #7E879F; --line: rgba(245, 247, 255, .1); --line-2: rgba(245, 247, 255, .16);
  background: linear-gradient(180deg, #2A2260 0%, #1B2141 38%, #0E1322 100%); color: #F5F7FF; border-color: transparent; box-shadow: 0 50px 90px -40px rgba(80, 60, 200, .65); }
.sec--light .step-plan.is-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 1; background: linear-gradient(180deg, #8FAEFF, rgba(135, 91, 255, .7) 40%, rgba(71, 123, 255, .15)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.sec--light .step-plan.is-on .step-plan__list li { color: #D3D8E8; }
.sec--light .step-plan.is-on .step-plan__list li::before { border-color: #C3B2FF; }
.sec--light .step-plan.is-on .plan__prefix { color: #A9BEFF; }

/* ---------- Planos: três cartões do mesmo tamanho; só o cartão sob o mouse/foco sobe e cresce um pouco ---------- */
@media (min-width: 901px) {
  .sec--light .stair { align-items: stretch; }
  .sec--light .stair .step-plan { min-height: 0; }
}
.sec--light .stair .step-plan.is-picked { transform: none; }
.sec--light .stair .step-plan { translate: 0 0; scale: 1; transition: translate .45s var(--ease-out), scale .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .45s ease, color .45s ease, opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sec--light .stair .step-plan:hover { translate: 0 -10px; scale: 1.03; z-index: 2; }
}
.sec--light .stair .step-plan:focus-within { translate: 0 -10px; scale: 1.03; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .sec--light .stair .step-plan:hover, .sec--light .stair .step-plan:focus-within { translate: none; scale: 1; } }

/* ---------- WhatsApp comercial na seção Contato ---------- */
.contact__wa { margin-top: 22px; }
.contact__wa a { display: inline-flex; align-items: center; gap: 8px; color: #C9D4FF; text-decoration: none; border-bottom: 1px solid rgba(201, 212, 255, .4); padding-bottom: 3px; font-size: 16px; }
.contact__wa a:hover, .contact__wa a:focus-visible { color: #fff; border-color: #fff; }
.contact__wa strong { color: #F5F7FF; font-weight: 600; letter-spacing: .01em; }

/* ---------- Envio do orçamento: ação principal + alternativa de copiar ---------- */
.quote-copy { margin-top: 10px; order: 6; }
.brief__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.brief__acts .quote-copy { margin-top: 0; }
.brief__note { flex-basis: 100%; margin-top: 4px; font-size: 13.5px; color: var(--muted); }

/* ---------- Botão flutuante do WhatsApp (cores do site) ---------- */
.wa-float { --lift: 0px; translate: 0 var(--lift); position: fixed; z-index: 70; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 16px; border-radius: 999px;
  background: linear-gradient(120deg, #477BFF 0%, #6A6BFF 50%, #875BFF 100%); color: #fff; text-decoration: none; font: 600 15px/1 var(--sans);
  box-shadow: 0 14px 34px -10px rgba(105, 90, 255, .75), 0 0 0 1px rgba(255, 255, 255, .14) inset; transition: transform .35s var(--ease-out), translate .35s var(--ease-out), box-shadow .35s var(--ease-out), opacity .3s ease; }
.wa-float[hidden] { display: none; }
.wa-float img { width: 26px; height: 26px; flex: none; }
.wa-float::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1.5px solid rgba(135, 91, 255, .55); opacity: 0; pointer-events: none; }
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 44px -10px rgba(105, 90, 255, .9), 0 0 0 1px rgba(255, 255, 255, .2) inset; }
.wa-float:focus-visible { outline: 2px solid #F5F7FF; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .wa-float::before { animation: waPulse 2.8s ease-out 1.5s infinite; }
  @keyframes waPulse { 0% { opacity: .9; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.22); } }
}
.simbar-on .wa-float, .wa-float.is-away { opacity: 0; pointer-events: none; transform: translateY(10px); }
@media (max-width: 760px) {
  .wa-float { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Melhorias de conversão — 04/11/2026 */
.pz-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(9,13,22,.78);border:1px solid rgba(245,247,255,.22);backdrop-filter:blur(8px)}
.pz-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#C9A86A;box-shadow:0 0 10px #C9A86A}
.pz-badge--abs{position:absolute;z-index:5;left:16px;top:16px}
/* Prazo — quando vale */
.pz-prazo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start;margin-top:34px;padding:28px 30px;border-radius:22px;background:#fff;border:1px solid rgba(9,13,22,.1);box-shadow:0 30px 60px -45px rgba(20,30,80,.35);color:#090D16}
.pz-prazo__n{display:grid;place-items:center;width:84px;height:84px;border-radius:20px;background:linear-gradient(160deg,#2A2260,#0E1322);color:#fff;text-align:center;font:800 30px/1 var(--display)}
.pz-prazo__n small{display:block;margin-top:4px;font:500 9.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#A9BEFF}
.pz-prazo h3{font:700 22px/1.2 var(--display);letter-spacing:-.02em}
.pz-prazo ol{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pz-prazo li{padding:14px 16px;border-radius:14px;background:#F2F4FC;font-size:14.5px;color:#2D3448}
.pz-prazo li b{display:block;font:500 11px var(--mono);letter-spacing:.1em;color:#3D5AD6;margin-bottom:6px}
.pz-prazo p.pz-prazo__f{margin-top:12px;font-size:13.5px;color:#4A5268}
.pz-tag-ess{display:inline-flex;margin-left:12px;vertical-align:middle;padding:7px 12px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#CFE0FF;border:1px solid rgba(143,174,255,.4);background:rgba(71,123,255,.12)}

.pz-badge--deck{z-index:20}
@media (max-width:960px){.pz-prazo ol{grid-template-columns:1fr}}
@media (max-width:600px){.pz-prazo{grid-template-columns:1fr}}