.funnel { background: var(--bg); }
.funnel main { padding: max(28px, env(safe-area-inset-top)) 16px 24px; }
.f-hero { max-width: 560px; margin: 0 auto 20px; animation: rise .8s var(--ease) both; }
.f-hero .eyebrow { margin-bottom: 10px; }
.f-hero h1 { font-size: clamp(1.75rem, 7vw, 2.6rem); margin: 0; }

.vsl {
  position: relative;
  width: min(100%, 400px, calc(68svh * 9 / 16));
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 30px 60px -30px rgba(18,21,39,.6);
  cursor: pointer;
}
.vsl video { width: 100%; height: 100%; object-fit: cover; }
.vsl__sonido {
  position: absolute;
  left: 50%;
  top: 74%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(18,21,39,.72);
  color: #fff;
  font: 600 .95rem var(--sans);
  cursor: pointer;
  white-space: nowrap;
  animation: pulso 2s var(--ease) infinite;
}
.vsl__sonido[hidden], .vsl__play[hidden] { display: none; }
.vsl__onda { width: 10px; height: 10px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 0 rgba(201,164,100,.7); animation: onda 1.4s infinite; }
.vsl__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%231c1b22'/%3E%3C/svg%3E") 56% 50% / 34px no-repeat;
  cursor: pointer;
}
.vsl__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
.vsl__barra i { display: block; height: 100%; width: 0; background: var(--gold-2); }

.f-precio { font: 500 1.6rem var(--serif); color: var(--ink); letter-spacing: .01em; margin: 24px 0 12px; }
.f-chips { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.f-chips li { font-size: .8rem; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }

.f-form { margin: 36px auto 0; padding: 28px 20px; background: var(--paper); border-radius: 18px; box-shadow: 0 20px 50px -34px rgba(28,27,34,.45); }
.f-form h2 { font-size: clamp(1.5rem, 5.5vw, 2rem); margin-bottom: 4px; }
.f-sub { color: var(--ink-2); font-size: .92rem; margin: 6px 0 0; }
.f-form form { margin-top: 18px; gap: 16px; }
.f-form .opts { grid-template-columns: 1fr 1fr; }
.f-fotos { display: inline-block; margin-top: 26px; font-size: .9rem; font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.f-pie { padding: 18px 16px 34px; }
.f-pie .pie__firma { color: var(--ink-2); margin-top: 0; }
.f-pie .pie__firma:hover { color: var(--gold); }

@keyframes pulso { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } }
@keyframes onda { to { box-shadow: 0 0 0 12px rgba(201,164,100,0); } }
@media (min-width: 720px) { .f-form { padding: 36px 32px; } }

.f-wa { font-size: .86rem; color: var(--ink-2); margin: 14px 0 0; }
.f-wa a { color: var(--gold); font-weight: 600; text-underline-offset: 3px; }
.f-wa-btn { margin-top: 18px; }
