/* ============================================================
   Projeto na Foto · o que a montagem acrescenta ao css/style.css
   e ao css/marcenaria.css copiados: as fotos da capa, a demo em
   imagens no celular e a conversa da cliente com a imagem do móvel.
   ============================================================ */

/* ---------- fotos da capa, da agitação e da madeireira ---------- */
.ba__ov { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ba__item figcaption { z-index: 3; }
.ba__balaos {
  position: absolute; left: 7px; right: 7px; bottom: 7px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.ba__zap {
  max-width: 92%; width: fit-content;
  padding: 5px 8px; border-radius: 10px; border-bottom-left-radius: 2px;
  background: #fff; color: #111b21;
  font-size: 10.5px; font-weight: 600; line-height: 1.25;
  box-shadow: 0 3px 9px -4px rgba(11, 27, 58, .4);
  opacity: 0; transform: translateY(8px) scale(.9);
  will-change: transform, opacity;
}
.ba__nota {
  position: absolute; top: 6px; right: 6px; max-width: 54%;
  z-index: 2;
  padding: 4px 7px; border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 11px, #c3dcfb 11px 12px),
    #fff8d6;
  color: #3a3a3a; font-size: 9.5px; font-weight: 700; font-style: italic; line-height: 12px; white-space: nowrap;
  box-shadow: 0 4px 10px -5px rgba(11, 27, 58, .45);
  transform: rotate(-3deg);
}
.ba__nota span { display: block; opacity: 0; transform: translateX(-6px); will-change: transform, opacity; }
.ba__item img { animation: ba-zoom 8s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes ba-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
.ba__item--after::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(34, 197, 94, .95), inset 0 0 42px rgba(34, 197, 94, .55);
  opacity: 0; animation: ba-glow 5s ease-out infinite;
}
@keyframes ba-glow { 0%, 14% { opacity: 0; } 18% { opacity: .9; } 30%, 100% { opacity: 0; } }
.ba__item--before .ba__zap:nth-child(1) { animation: ba-balao 5s cubic-bezier(.2, 1.4, .4, 1) .15s infinite both; }
.ba__item--before .ba__zap:nth-child(2) { animation: ba-balao 5s cubic-bezier(.2, 1.4, .4, 1) .85s infinite both; }
.ba__item--before .ba__nota span:nth-child(1) { animation: ba-n1 7s cubic-bezier(.2, 1.4, .4, 1) infinite both; }
.ba__item--before .ba__nota span:nth-child(2) { animation: ba-n2 7s cubic-bezier(.2, 1.4, .4, 1) infinite both; }
.ba__item--before .ba__nota span:nth-child(3) { animation: ba-n3 7s cubic-bezier(.2, 1.4, .4, 1) infinite both; }
.ba__item--after .ba__zap:nth-child(1) { animation: ba-balao 5s cubic-bezier(.2, 1.4, .4, 1) .75s infinite both; }
.ba__item--after .ba__zap:nth-child(2) { animation: ba-balao 5s cubic-bezier(.2, 1.4, .4, 1) 1.45s infinite both; }
@keyframes ba-n1 { 0%, 5.2% { opacity: 0; transform: translateX(-6px); } 6%, 91.4% { opacity: 1; transform: none; } 98.6%, 100% { opacity: 0; transform: none; } }
@keyframes ba-n2 { 0%, 13.8% { opacity: 0; transform: translateX(-6px); } 14.6%, 91.4% { opacity: 1; transform: none; } 98.6%, 100% { opacity: 0; transform: none; } }
@keyframes ba-n3 { 0%, 22.3% { opacity: 0; transform: translateX(-6px); } 23.1%, 91.4% { opacity: 1; transform: none; } 98.6%, 100% { opacity: 0; transform: none; } }
@keyframes ba-balao {
  0% { opacity: 0; transform: translateY(8px) scale(.9); }
  4% { opacity: 1; transform: translateY(0) scale(1.06); }
  5.4%, 80% { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: none; }
}

.foto-selo {
  position: absolute; left: 17%; top: 36%;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 99px;
  background: #16a34a; color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1.1;
  box-shadow: 0 6px 14px -6px rgba(11, 27, 58, .6);
  transform-origin: 50% 50%;
  animation: selo-estala .6s cubic-bezier(.2, 1.4, .4, 1) both, selo-pulso 3s ease-in-out .9s infinite;
}
@keyframes selo-estala {
  0% { opacity: 0; transform: scale(.6); }
  55% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes selo-pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ---------- celular da história e das mini-demos ---------- */
.shot--story { width: min(260px, 76%); margin: 0 auto; }
.story--demo {
  aspect-ratio: auto; border: 0; background: transparent; box-shadow: none; overflow: visible;
  display: grid; place-items: center; container-type: normal;
}
.story--demo .shot { width: min(260px, 76%); }
.how__body .shot { margin-top: 12px; }



/* ---------- demo animada no celular (T7) ---------- */
.demo-fone { position: absolute; inset: 0; background: #EEF4FF; }
.demo-fone .demo__app {
  position: absolute; top: 0; left: 0;
  width: 390px; height: 844px;
  border: 0; transform-origin: 0 0;
  pointer-events: none; background: #EEF4FF;
}
/* sobra de 44 px entre a tela de 844 e a moldura de 888: fica a barra de status do celular */
.demo-fone__sk {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, #e9eef6 0%, #dfe5ef 100%);
  overflow: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.demo-fone__sk.off { opacity: 0; visibility: hidden; }
.demo-fone__sk::before,
.demo-fone__sk::after {
  content: "";
  position: absolute; left: 12%; right: 12%;
  border-radius: 14px;
  background: #d3dbe7;
}
.demo-fone__sk::before { top: 9%; height: 54%; }
.demo-fone__sk::after { bottom: 8%; height: 20%; opacity: .7; }
.demo-fone__sk i {
  position: absolute; left: 12%; top: 28%;
  width: 46%; height: 9%;
  border-radius: 9px;
  background: #c6d0de;
}
.demo-fone__sk i + i { top: 40%; width: 62%; }
.demo-legenda { margin-top: 10px; }
.demo-legenda .legenda__dots i { width: 7px; height: 7px; }

/* ---------- T12: plano impresso ---------- */
.plano { margin-top: 14px; }
.plano__folha {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  cursor: zoom-in;
}

.plano__img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
}
.plano figcaption {
  padding: 8px 2px 0;
  font-size: 12.5px; font-weight: 700; line-height: 1.4;
  text-align: center; color: var(--muted);
}
.plano-zoom {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 14px;
  background: rgba(7, 18, 40, .82);
}
.plano-zoom__area { max-width: 720px; width: 100%; max-height: 92vh; overflow: auto; }
.plano-zoom__area .plano__folha { max-height: 88vh; margin: 0 auto; cursor: zoom-out; }
.plano-zoom__fecha {
  position: fixed; top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
}

/* ---------- oferta: animação e narração em cartão ---------- */
.anim-narra {
  margin-top: 16px;
  padding: 16px 14px;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  text-align: left;
}
.anim-narra p { font-size: 14.5px; line-height: 1.5; color: #33456a; }

/* ---------- diagnóstico: linha do móvel ---------- */
.risk__movel { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }

/* ---------- oferta: botão cedo ---------- */
.cta-cedo { margin-top: 18px; }

/* ---------- legenda da demo: 6 pontos já existentes ---------- */
.demo-legenda .legenda__txt { font-size: 16.5px; }

@media (prefers-reduced-motion: reduce) {
  .demo-fone__sk { transition: none; }
  .ba__item img { animation: none; transform: none; }
  .ba__item--after::after { animation: none; opacity: 0; }
  .ba__zap, .ba__nota span { animation: none; opacity: 1; transform: none; }
  .foto-selo { animation: none; opacity: 1; transform: none; }
}


/* ---------- v2: verde do diagnóstico (marcador ok) ---------- */
.ok-txt { color: var(--green); background: linear-gradient(transparent 62%, #c9f6d8 62%); padding: 0 .08em; }

/* ---------- WhatsApp da cliente (T10): a imagem do móvel na parede ---------- */
.wa-demo { max-width: 390px; margin: 14px auto 0; border-radius: 18px; overflow: hidden; background: #EFE7DD; box-shadow: var(--shadow); text-align: left; }
.wa-demo__topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #075E54; color: #fff; }
.wa-demo__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #ffc59e, #e8835d); font-size: 15px; font-weight: 800; flex: none; }
.wa-demo__topo b { display: block; font-size: 16px; font-weight: 700; line-height: 1.1; }
.wa-demo__topo small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.wa-demo__chat { display: grid; gap: 8px; padding: 12px 12px 14px; }
.wa-demo__zap { position: relative; width: fit-content; max-width: 88%; margin: 0; padding: 8px 10px 18px; border-radius: 9px 9px 9px 2px; background: #fff; color: #111b21; font-size: 14.5px; font-weight: 500; line-height: 1.35; box-shadow: 0 1px 1px rgba(11, 27, 58, .13); }
.wa-demo__zap--eu { margin-left: auto; border-radius: 9px 9px 2px 9px; background: #DCF8C6; }
.wa-demo__zap em { position: absolute; right: 8px; bottom: 3px; color: #6f7a85; font-size: 11.5px; font-style: normal; font-weight: 600; }
.wa-demo__foto { position: relative; width: min(100%, 300px); margin: 0; border-radius: 9px; overflow: hidden; background: #0B1F35; box-shadow: 0 1px 1px rgba(11, 27, 58, .13); }
.wa-demo__foto img { display: block; width: 100%; height: auto; }
.wa-demo__faixa-box { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px; background: linear-gradient(to top, rgba(11, 31, 53, .84), rgba(11, 31, 53, 0)); }
.wa-demo__faixa { display: block; width: 100%; box-sizing: border-box; padding: 6px 9px; border-radius: 6px; background: rgba(11, 31, 53, .9); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.wa-demo__nota { margin: 0; padding: 0 0 12px; text-align: center; font-size: 12px; font-weight: 600; color: #5d6e82; }

/* v2: botão pequeno dentro do card */
.mini-btn { display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 99px; background: #15803d; color: #fff; font-size: 12px; font-weight: 800; vertical-align: 1px; }

/* ============================================================
   034 · quiz mais responsivo e mais vivo
   Só transform e opacity. Em prefers-reduced-motion, tudo para no
   quadro final.
   ============================================================ */

/* ---------- 1. toque imediato ---------- */
.opt {
  min-height: 48px;
  transition: border-color .15s, background .15s, transform .08s, opacity .12s;
}
.opt.is-dim { opacity: .55; }
.opt__check.pop { animation: opt-pop .2s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes opt-pop {
  0% { transform: scale(.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.fopt { transition: background-color .12s, border-color .12s, opacity .12s, transform .08s; }
.fopt:active { transform: scale(.985); }
.btn { transition: transform .08s ease-out, box-shadow .08s ease-out; }
.btn:active, .btn--pulse:active { transform: translateY(3px) scale(.99); }
.btn--pulse:active { animation: none; }

/* ---------- 2. troca de tela e barra de progresso ---------- */
.tela-in { animation: tela-in .18s cubic-bezier(.2, .8, .2, 1) both; }
.tela-in--back { animation: tela-in-back .18s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tela-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes tela-in-back { from { opacity: 0; transform: translateY(-10px); } }
.q__progress span { position: relative; transition: width .3s cubic-bezier(.2, .8, .2, 1); }
.q__glow {
  position: absolute; top: 50%; right: 0; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  transform: translateX(50%) scale(.6);
}
.q__progress span.is-anim .q__glow { animation: prog-glow .3s ease-out; }
@keyframes prog-glow {
  0% { opacity: 0; transform: translateX(50%) scale(.5); }
  45% { opacity: .95; }
  100% { opacity: 0; transform: translateX(50%) scale(1.4); }
}

/* ---------- 3. entrada da lista de opções em no máximo 260 ms ---------- */
.q__options li.reveal { animation-duration: .16s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* ---------- 4. capa viva: zoom e brilho do DEPOIS ---------- */
/* o zoom e o brilho ficam nas regras do topo deste arquivo (ba-zoom, ba-glow) */

/* ---------- 5. comparador de arrastar ---------- */
.cmp { margin: 18px 0 4px; }
.cmp__t {
  margin: 0 0 10px; font-size: clamp(17px, 4.8vw, 20px); font-weight: 800;
  line-height: 1.25; text-align: center; color: var(--ink);
}
.cmp__frame {
  position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden;
  border: 3px solid #fff; border-radius: 18px; background: #0b1f35;
  box-shadow: var(--shadow); cursor: ew-resize;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.cmp__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
.cmp__img--depois { clip-path: inset(0 0 0 calc(var(--x) * 1%)); }
.cmp__rot {
  position: absolute; top: 10px; z-index: 3; padding: 3px 9px; border-radius: 99px;
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.4;
  pointer-events: none; box-shadow: 0 4px 10px -5px rgba(11, 27, 58, .6);
}
.cmp__rot--antes { left: 10px; background: #B91C1C; }
.cmp__rot--depois { right: 10px; background: #15803D; }
.cmp__alca {
  position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 3px;
  margin-left: -1.5px; z-index: 4; background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 27, 58, .18); pointer-events: none;
}
.cmp__alca i {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  margin: -22px 0 0 -22px; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 16px -6px rgba(11, 27, 58, .65);
}
.cmp__alca i::before, .cmp__alca i::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px;
  border: 5px solid transparent;
}
.cmp__alca i::before { left: 7px; border-right-color: #02358f; }
.cmp__alca i::after { right: 7px; border-left-color: #02358f; }
.cmp__range {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44px;
  margin: 0; opacity: 0; pointer-events: none;
}
.cmp__frame:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.cmp + .ex-nota { margin-top: 8px; }

/* ---------- 6. CTA fixo da oferta ---------- */
.cta-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: linear-gradient(to top, #eef4ff 55%, rgba(238, 244, 255, 0));
  opacity: 0; pointer-events: none; transform: translateY(calc(100% + 24px));
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s;
}
.cta-fixo.is-on { opacity: 1; pointer-events: auto; transform: none; }
.cta-fixo .btn { max-width: 448px; margin: 0 auto; }
body.tem-cta-fixo { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* ---------- 7. medidor do resultado: 0 ao valor em 900 ms ---------- */
.risk__bar i { width: var(--w); transform: scaleX(0); transform-origin: left center; }
.diag__res.is-in .risk__bar i { animation: barra-034 .9s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes barra-034 { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 8. responsivo de verdade ---------- */
html, body { overflow-x: hidden; }
body { max-width: 100%; }
.app { min-height: 100svh; min-height: 100dvh; }
h1, h2, h3, .q__title, .pv__h1, .cover h1 { overflow-wrap: break-word; }
.cover h1, .pv__h1 { font-size: clamp(23px, 7.4vw, 29px); }
.pv__h2 { font-size: clamp(20px, 6vw, 23px); }
.pv__h2.viloes__t { font-size: clamp(18px, 5.4vw, 21px); }
.vs li, .pains li, .finds li { overflow-wrap: anywhere; }

@media (max-width: 340px) {
  .opt { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .opt__emoji { width: 38px; height: 38px; font-size: 19px; }
  .opt__text { font-size: 14.5px; }
  .ba { gap: 6px; }
  .ba__item figcaption { font-size: 10px; padding: 2px 6px; }
  .vs { grid-template-columns: 1fr; }
  .pains li { gap: 9px; font-size: 14px; }
}

@media (min-width: 768px) {
  .app { max-width: 460px; padding-left: 24px; padding-right: 24px; }
  .btn { max-width: 460px; margin-left: auto; margin-right: auto; }
  .cmp__frame { max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ---------- reduzir movimento: quadros finais ---------- */
@media (prefers-reduced-motion: reduce) {
  .opt, .fopt, .btn, .cta-fixo, .q__progress span { transition: none !important; }
  .opt__check.pop, .btn--pulse, .tela-in, .tela-in--back { animation: none !important; }
  .q__progress span.is-anim .q__glow { animation: none !important; opacity: 0; }
  .ba__item img { animation: none !important; transform: none; }
  .ba__item--after::after { animation: none !important; opacity: 0; }
  .ba__zap, .ba__nota span { animation: none !important; opacity: 1; transform: none; }
  .diag__res.is-in .risk__bar i { animation: none !important; width: var(--w); transform: none; }
  .foto-selo { animation: none !important; opacity: 1; transform: none; }
}