:root{
  --bg:#f3f4f6;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --blue:#2ea3f2;
  --blue2:#1d8fdd;
  --orange:#ff7a00;
  --input:#f3f4f6;
  --pill-green:#16a34a;
  --pill-green-bg:#dcfce7;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.hard-bloc{position:fixed;inset:0;background:#000;z-index:999999}
.app-wra{min-height:100%;padding:28px 16px 40px}
.funnel-shell{width:100%}

/* STEPS */
.step-wrap{padding:18px 0 20px}
.step{display:none}
.step.active{display:block}

.step-box{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  padding:0 10px;
}

.step-title{
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
  font-size:clamp(26px,3.2vw,36px);
  margin:0 0 12px;
}
.step-subtitle{
  font-weight:600;
  font-size:18px;
  color:var(--text);
  margin:0 0 18px;
}
.subtitle-muted{ color: var(--muted); }

.step-question{
  font-weight:900;
  letter-spacing:-.03em;
  font-size:clamp(22px,2.6vw,30px);
  margin:18px auto 14px;
}

/* PROGRESS (exacto: gris + naranja de izquierda a derecha) */
.progress-wrap{
  width:100%;
  margin: 10px 0 20px;
}

.progress-bar-wrapper{
  width:100%;
  max-width: 620px;
  height: 6px;
  background: #e6e6e6;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto;
}

.progress-bar-fill{
  height: 100%;
  width: 0%;
  background: var(--orange);
  border-radius: 999px;
  transition: width .25s ease;
}

.progress-percent{
  text-align:center;
  margin-top: 8px;
  font-weight: 700;
  font-size: 12px;
  color: #6b7280;
}

.progress-slot{
  display:block;
  margin: 12px auto 18px;
}

/* CHOICES */
.choice-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:760px;
  margin:18px auto 0;
}
.choice-grid--narrow{max-width:420px}

button{font-family:inherit}
.choice-btn{
  background:var(--blue);
  color:#fff;
  border:0;
  border-radius:6px;
  padding:16px 16px;
  font-weight:800;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
}
.choice-btn:hover{background:var(--blue2)}
.choice-btn:active{transform:translateY(1px)}

/* STATE */
.state-card{
  border:2px solid var(--blue);
  background:#e0f2ff;
  border-radius:10px;
  padding:16px 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:0 auto 14px;
  max-width:560px;
}
.state-home{font-size:22px}
.state-name{font-weight:900;font-size:clamp(22px,3.2vw,30px);color:var(--blue2)}
.state-pill{
  background:var(--pill-green-bg);
  color:var(--pill-green);
  padding:6px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}

.field{max-width:560px;margin:0 auto}
.select-soft{
  width:100%;
  padding:14px 14px;
  border-radius:10px;
  border:1px solid #d1d5db;
  font-weight:600;
  font-size:15px;
  background:#fff;
  color:#111827;
}

/* INPUTS */
.name-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  max-width:560px;
  margin:0 auto;
}
.input-soft{
  width:100%;
  background:var(--input);
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:14px 14px;
  font-weight:600;
  font-size:16px;
  color:#111827;
}
.input-soft::placeholder{color:#9ca3af}

/* PHONE */
.phone-row{display:flex;gap:10px;max-width:560px;margin:0 auto}
.phone-prefix{
  width:80px;border-radius:10px;border:1px solid #d1d5db;background:#fff;
  font-weight:800;padding:12px 10px;display:flex;align-items:center;justify-content:center;font-size:14px;
}

/* EMAIL */
.email-row{
  display:flex;gap:10px;background:var(--input);border:1px solid #d1d5db;border-radius:10px;
  padding:8px 10px;max-width:620px;margin:0 auto;
}
.email-icon{
  width:42px;height:42px;background:#fff;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.email-input{
  flex:1;border:0;background:transparent;font-weight:600;font-size:16px;outline:none;
}

.email-below-input{
  max-width:620px;
  margin:10px auto 0;
  text-align:center;
  font-weight:700;
  color:#111827;
  font-size:13px;
}

/* CTA */
.btn-cta{
  width:100%;
  max-width:560px;
  margin:22px auto 0;
  padding:16px 16px;
  border-radius:10px;
  font-weight:900;
  font-size:18px;
  background:var(--blue);
  color:#fff;
  border:0;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
}
.btn-cta:hover{background:var(--blue2)}
.btn-cta:active{transform:translateY(1px)}
.cta-arrow{margin-left:8px}

.below-cta{
  max-width:560px;
  margin:14px auto 0;
  font-weight:800;
  font-size:14px;
  color:#111827;
  text-align:center;
}
.below-cta.muted{
  color:var(--muted);
  font-weight:800;
}

.top-warning{
  margin:0 0 10px;
  font-weight:900;
  color:#111827;
  font-size:14px;
}

/* Trust logos */
.trust-logos{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:16px;
}
.trust-logos img{height:40px;object-fit:contain}

/* Hints */
.field-hint{margin-top:8px;font-weight:800;color:#ef4444;font-size:13px}

/* Footer */
.page-footer{
  margin-top:26px;
  text-align:center;
  font-size:11px;
  color:var(--muted);
}
.page-footer a{
  color:var(--muted);
  text-decoration:underline;
}

/* Modal */
.modal{position:fixed;inset:0;z-index:99999}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-card{
  position:relative;
  max-width:820px;
  width:calc(100% - 32px);
  margin:60px auto;
  background:#fff;
  border-radius:14px;
  padding:18px 18px 22px;
}
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#f3f4f6;
  cursor:pointer;
  font-weight:900;
  border:0;
}
.modal-body{padding-top:18px}
.small-muted{color:var(--muted);font-size:13px}

@media(min-width:768px){
  .app-wra{padding:36px 24px 50px}
  .name-grid{grid-template-columns:1fr 1fr}
}

/* =========================
FINAL PAGE (STEP 7) - CSS
(Agrega esto a tu styles.css)
========================= */

.final-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  padding:18px 12px 26px;
}

.final-card{
  width:100%;
  max-width:420px; /* columna angosta como la captura */
  background:#ffffff;
  border-radius:0;
}

.final-success{
  text-align:center;
  padding:18px 16px 10px;
}

.final-check{
  display:flex;
  justify-content:center;
  margin:6px 0 10px;
}

.final-check svg{
  width:42px;
  height:42px;
}
.final-check circle{
  fill:#16a34a;
  stroke:#16a34a;
  stroke-width:2;
}
.final-check path{
  fill:none;
  stroke:#ffffff;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.final-h1{
  margin:0;
  font-size:14px;
  line-height:1.25;
  font-weight:900;
  color:#111827;
}
.final-highlight{
  color:#10b981;
  font-weight:900;
}

.final-p{
  margin:8px 0 0;
  font-size:11px;
  line-height:1.3;
  color:#6b7280;
}

/* RED CALL */
.final-call{
  margin:10px 16px 0;
  background:#ef4444;
  border-radius:6px;
  padding:14px 12px 12px;
  text-align:center;
  color:#111827;
}

.final-call-title{
  font-size:14px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:10px;
  color:#111827;
}
.final-call-icon{font-size:14px}

.final-call-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.22);
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:800;
  color:#ffffff;
}

.final-switch{
  width:24px;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  position:relative;
  display:inline-block;
}
.final-switch-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ffffff;
  position:absolute;
  top:2px;
  left:2px;
}

.final-call-text{
  margin:10px 0 0;
  font-size:10px;
  line-height:1.35;
  color:#111827;
  opacity:.95;
}

/* YELLOW VIDEO */
.final-video{
  margin:0 16px;
  background:#fde68a;
  border-radius:0;
  padding:12px 12px 12px;
  border-top:3px solid #f59e0b;
}

.final-video-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#ef4444;
  color:#ffffff;
  font-weight:900;
  font-size:10px;
  padding:6px 10px;
  border-radius:999px;
}

.final-video-h2{
  margin:10px 0 0;
  font-size:13px;
  font-weight:900;
  color:#111827;
}
.final-video-p{
  margin:6px 0 10px;
  font-size:10px;
  line-height:1.35;
  color:#111827;
  opacity:.95;
}

.final-video-frame{
  width:100%;
  border-radius:6px;
  overflow:hidden;
  background:#0b1220;
  border:3px solid rgba(255,255,255,.45);
}

.final-video-skeleton{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}

.final-play{
  width:54px;
  height:54px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.final-play:before{
  content:"";
  position:absolute;
  top:50%;
  left:52%;
  transform:translate(-50%,-50%);
  width:0;height:0;
  border-left:16px solid rgba(255,255,255,.9);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

.final-video-benefits{
  margin-top:10px;
  display:grid;
  gap:8px;
}
.final-vb{
  background:rgba(255,255,255,.65);
  border-radius:6px;
  padding:10px 10px;
  border:1px solid rgba(0,0,0,.06);
}
.final-vb-title{
  font-weight:900;
  font-size:11px;
  color:#111827;
}
.final-vb-sub{
  margin-top:2px;
  font-size:10px;
  color:#374151;
}

/* SECTIONS */
.final-section{
  margin:10px 16px 0;
  border-top:3px solid #2563eb; /* linea azul como en la captura */
  padding-top:10px;
}

.final-sec-title{
  font-size:12px;
  font-weight:900;
  color:#111827;
  margin:2px 0 10px;
  display:flex;
  align-items:center;
  gap:6px;
}

.final-info-card{
  background:#f3f4f6;
  border-radius:6px;
  padding:10px 10px;
  margin-bottom:8px;
  border:1px solid rgba(0,0,0,.06);
}
.final-info-card--accent{
  background:#ffffff;
  border-left:4px solid #2563eb;
}
.final-info-card--soft{
  background:#ffffff;
  border-left:4px solid #f59e0b;
}

.final-info-title{
  font-weight:900;
  font-size:11px;
  color:#111827;
}
.final-info-text{
  margin-top:4px;
  font-size:10px;
  line-height:1.35;
  color:#6b7280;
}

/* CHECKLIST */
.final-checklist{
  display:grid;
  gap:8px;
}

.final-cl-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:#f8fafc;
  border:1px solid rgba(0,0,0,.06);
  border-radius:6px;
  padding:10px 10px;
}

.final-cl-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  background:#d1fae5;
  color:#10b981;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:11px;
  flex:0 0 18px;
  margin-top:1px;
}

.final-cl-strong{
  font-weight:900;
  font-size:10px;
  color:#111827;
}
.final-cl-sub{
  margin-top:2px;
  font-size:9.5px;
  color:#6b7280;
}

.final-mini-line{
  margin:10px 0 0;
  text-align:center;
  font-size:9.5px;
  color:#10b981;
  font-weight:800;
}

/* FAQ */
.final-faq{
  display:grid;
  gap:8px;
}
.final-faq-item{
  background:#f9fafb;
  border:1px solid rgba(0,0,0,.06);
  border-radius:6px;
  padding:10px 10px;
}
.final-faq-q{
  font-size:10.5px;
  font-weight:900;
  color:#111827;
}
.final-faq-a{
  margin-top:4px;
  font-size:9.5px;
  color:#6b7280;
}

/* BOTTOM DARK CTA */
.final-bottom{
  margin:12px 0 0;
  background:linear-gradient(180deg, #0b1220, #0a0f1a);
  border-top:3px solid #f59e0b;
  padding:18px 14px 16px;
  text-align:center;
  position:relative;
}

.final-bottom-phone{
  width:34px;
  height:34px;
  border-radius:999px;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:-17px;
  left:50%;
  transform:translateX(-50%);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  font-size:16px;
}

.final-bottom-text{
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  color:#e5e7eb;
  line-height:1.25;
}
.final-bottom-accent{
  display:inline-block;
  margin-top:6px;
  background:#f59e0b;
  color:#111827;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:6px;
}

.final-bottom-sub{
  margin-top:10px;
  font-size:9.5px;
  color:#9ca3af;
  line-height:1.35;
}

/* Asegura que el footer legal quede como en tu funnel */
.final-card .page-footer{
  margin:14px 0 0;
  text-align:center;
  font-size:11px;
  color:#9ca3af;
}
.final-card .page-footer a{
  color:#9ca3af;
  text-decoration:underline;
}
/* =========================
FINAL PAGE - Sharper text + slightly bigger (NO layout changes)
========================= */

/* Mejor render de fuente (Mac/Chrome) */
body, .final-wrap, .final-card{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Evita blur por transform en ancestros (si alguno tiene scale) */
.final-wrap,
.final-card,
.final-card *{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Subir escala SIN reflow: escalamos y compensamos ancho */
.final-card{
  transform-origin: top center;
}

/* Ajusta SOLO la “escala” visual de la página final */
@media (min-width: 360px){
  .final-card{
    transform: scale(1.06);
    width: calc(100% / 1.06);
  }
}
@media (min-width: 420px){
  .final-card{
    transform: scale(1.08);
    width: calc(100% / 1.08);
  }
}
@media (min-width: 520px){
  .final-card{
    transform: scale(1.10);
    width: calc(100% / 1.10);
  }
}

/* Un toque de tamaño de letra, sin cambiar jerarquías */
.final-card{
  font-size: 16px; /* base */
}

.legal-disclaimer {
  margin-top: 10px;
  font-size: 9px;
  line-height: 1.5;
  color: #9aa0a6; /* gris visible pero sobrio */
  text-align: center;
  max-width: 900px;
}

/* ===== Wistia placeholder UX fix ===== */
.final-video-frame{
  cursor: pointer;
}

.final-video-frame:hover .final-play{
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(255,255,255,.28);
}

.final-video-frame:active .final-play{
  transform: translate(-50%, -50%) scale(0.95);
}

/* Evita que algo bloquee el click */
.final-video-skeleton,
.final-play{
  pointer-events: none;
}