/* lo visual de las landings: foto + diagrama + cifras. Regla: se entiende sin leer el idioma.
   Lo usan las landings generadas (scripts/industries-ptsai.mjs) y /consumer-finance. */
.vh{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;max-width:1180px;margin:0 auto}
.vh-copy{text-align:left}
.vh-copy h1{font-size:clamp(34px,4.4vw,58px)!important;line-height:1.06!important;margin:16px 0 14px!important;text-wrap:balance}
.vh-copy h1 em{color:var(--gold);font-style:italic}
.vh-copy .hl-sub{margin:0 0 22px;max-width:36ch;text-align:left}
.vh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.vh-cta .hero-note{margin:0}
.vh-pic{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/3.2;box-shadow:0 40px 80px -40px rgba(0,0,0,.85);border:1px solid rgba(244,241,234,.1)}
.vh-pic img{width:100%;height:100%;object-fit:cover;display:block}
.vh-pic::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(13,27,39,.75))}
.vh-feed{position:absolute;left:16px;bottom:16px;right:16px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.vh-feed span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(13,27,39,.92);will-change:opacity,transform;border:1px solid rgba(244,241,234,.14);color:#f4f1ea;font-size:15px;opacity:0;transform:translateY(10px);animation:feed 7.5s infinite}
.vh-feed b{font-weight:600}
.vh-feed .b2{animation-delay:1.4s}.vh-feed .b3{animation-delay:2.8s;background:#e08a2e;color:#10202e;border-color:#e08a2e}
@keyframes feed{0%{opacity:0;transform:translateY(10px)}6%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-4px)}}
.wave{display:inline-flex;gap:2px;align-items:center;height:14px}.wave u{width:3px;height:14px;border-radius:2px;background:#e08a2e;transform:scaleY(.4);animation:wv .8s ease-in-out infinite}.wave u:nth-child(2){animation-delay:.15s}.wave u:nth-child(3){animation-delay:.3s}
@keyframes wv{50%{transform:scaleY(1)}}
.flow{display:flex;align-items:center;justify-content:center;max-width:980px;margin:44px auto 0}
.fn{flex:none;width:150px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:16px 10px;border-radius:20px;background:rgba(244,241,234,.05);border:1px solid rgba(244,241,234,.1);animation:fnp 4s infinite;position:relative;will-change:transform}
.fn::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 14px 30px -14px rgba(224,138,46,.7);opacity:0;animation:fng 4s infinite;animation-delay:inherit}
.fn i{font-style:normal;font-size:34px;line-height:1}
.fn b{font-size:14px;color:#f4f1ea;line-height:1.25}
.fn small{font-family:var(--mono,monospace);font-size:12px;color:#e08a2e;letter-spacing:.06em}
.fn:nth-of-type(3){animation-delay:1s}.fn:nth-of-type(5){animation-delay:2s}.fn:nth-of-type(7){animation-delay:3s}
.fn-end{background:rgba(224,138,46,.14);border-color:rgba(224,138,46,.6)}
@keyframes fnp{0%,20%,100%{transform:none}8%{transform:translateY(-4px)}}
@keyframes fng{0%,20%,100%{opacity:0}8%{opacity:1}}
.fl{flex:1;min-width:22px;height:10px;position:relative;margin:0 6px;overflow:hidden}
.fl::before{content:'';position:absolute;left:0;right:0;top:4px;height:2px;background:rgba(244,241,234,.14)}
.fl u{position:absolute;top:1px;left:0;width:100%;height:8px;transform:translateX(-100%);animation:dotrun 1.6s linear infinite;will-change:transform}
.fl u::after{content:'';position:absolute;right:0;top:0;width:8px;height:8px;border-radius:50%;background:#e08a2e;box-shadow:0 0 8px #e08a2e}
.fl:nth-of-type(4) u{animation-delay:.5s}.fl:nth-of-type(6) u{animation-delay:1s}
@keyframes dotrun{from{transform:translateX(-92%);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateX(0);opacity:0}}
.ofr-big .ofr-g div{position:relative;padding-top:14px}
.ofr-big .ofr-g em{font-style:normal;font-family:var(--serif);font-size:44px;line-height:1;color:#e08a2e;font-weight:500}
.ofr-big .ofr-g i{position:absolute;right:12px;top:12px;font-size:22px}
.ofr-big .ofr-g b{margin-top:2px}
.ofr-big .ofr-g span{font-size:13.5px;font-weight:500;color:#cfc9bc}
.ofr-box.ofr-big{max-width:980px;margin:24px auto 64px}
@media (max-width:640px){.ofr-box.ofr-big{margin-bottom:48px}}
.vrow{display:grid;grid-template-columns:1.2fr .8fr;}
.vrow:not(:has(figure)){grid-template-columns:1fr}
.vrow{gap:40px;align-items:center}
.vpic{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.vpic img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.vh{grid-template-columns:1fr;gap:26px}.vh-copy{text-align:center}.vh-copy .hl-sub{margin:0 auto 18px;text-align:center}.vh-cta{justify-content:center}.vrow{grid-template-columns:1fr;gap:22px}}
@media (max-width:640px){.flow{margin-top:28px}.fn{width:auto;flex:1;padding:12px 4px;border-radius:16px}.fn i{font-size:26px}.fn b{font-size:11.5px}.fn small{font-size:10.5px}.fl{min-width:10px;margin:0 3px;flex:.35}.vh-feed span{font-size:13.5px;padding:7px 11px}.ofr-big .ofr-g em{font-size:34px}.ofr-big .ofr-g div{grid-template-columns:auto 1fr!important}.ofr-big .ofr-g em{grid-row:span 3;align-self:center;min-width:56px;text-align:center}.ofr-big .ofr-g i{top:8px;right:10px;font-size:18px}}
@media (prefers-reduced-motion:reduce){.vh-feed span{animation:none;opacity:1;transform:none}.fn,.fn::after,.fl u,.wave u{animation:none}}
.book-alt{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 18px;color:#cfc9bc;font-size:15px}
.need-chip{display:inline-flex;max-width:100%;margin:0 0 14px;padding:8px 14px;border-radius:12px;background:rgba(224,138,46,.12);border:1px solid rgba(224,138,46,.45);color:#f4f1ea;font-size:14px;line-height:1.4;text-align:left}
.need-chip[hidden]{display:none}
.ofr-box[hidden]{display:none}

/* ── upgrade: también traemos los clientes (todo a nuestro favor, expectativa fijada por delante) ── */
.lgu{padding:72px 0;background:var(--navy2,#132636);border-top:1px solid rgba(244,241,234,.08)}
.lgu .w{max-width:980px;margin:0 auto;padding:0 24px}
@media (max-width:520px){.lgu .w{padding:0 16px}}
.lgu-k{display:inline-block;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#e08a2e;margin:0 0 12px}
.lgu h2{font-family:var(--serif,'Fraunces',serif);font-size:clamp(28px,3.6vw,42px);line-height:1.1;margin:0 0 10px;color:#fff;text-wrap:balance}
.lgu h2 em{color:#e08a2e;font-style:italic}
.lgu-sub{margin:0 0 28px;color:#c3c7c9;font-size:17px;max-width:60ch}
.lgu .flow{margin:0 0 24px;max-width:none;justify-content:flex-start}
.lgu-t{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.lgu-t li{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:rgba(16,32,46,.6);border:1px solid rgba(244,241,234,.1)}
.lgu-t i{font-style:normal;font-size:24px;line-height:1}
.lgu-t b{color:#fff;font-size:15px;line-height:1.3}
.lgu-t span{color:#a9b3bb;font-size:13.5px;line-height:1.45}
.lgu-t li.us{border-color:rgba(224,138,46,.55);background:rgba(224,138,46,.08)}
.lgu-n{margin:18px 0 0;color:#a9b3bb;font-size:14px}
.lgu-n b{color:#fff}
@media (max-width:860px){.lgu-t{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.lgu{padding:56px 0}.lgu-t{grid-template-columns:1fr}}

/* add-on de dos caminos: premium (lo hacemos) y te enseñamos (sin presupuesto) */
.lgu-2{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:4px}
.lgu-c{position:relative;padding:24px 22px 20px;border-radius:20px;background:rgba(16,32,46,.6);border:1px solid rgba(244,241,234,.12)}
.lgu-c.pro{background:linear-gradient(0deg,rgba(224,138,46,.07),rgba(224,138,46,.07)),#14283a;border-color:rgba(224,138,46,.6);box-shadow:0 24px 50px -30px rgba(224,138,46,.55)}
.lgu-badge{display:inline-block;margin:0 0 10px;padding:5px 10px;border-radius:999px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#a9b3bb;border:1px solid rgba(244,241,234,.16)}
.lgu-c.pro .lgu-badge{background:#e08a2e;border-color:#e08a2e;color:#10202e;font-weight:700}
.lgu-c h3{margin:0 0 8px;font-family:var(--serif,'Fraunces',serif);font-size:24px;line-height:1.15;color:#fff}
.lgu-p{margin:0 0 14px;color:#c3c7c9;font-size:15px;line-height:1.5}
.lgu-p b{color:#fff}
.lgu-c ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lgu-c li{position:relative;padding-left:26px;color:#e7e3da;font-size:14.5px;line-height:1.4}
.lgu-c li::before{content:'✓';position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:rgba(244,241,234,.1);color:#f4f1ea}
.lgu-c.pro li::before{background:#e08a2e;color:#10202e}
.lgu-fine{display:block;margin-top:14px;color:#8f9aa3;font-size:12.5px}
@media (max-width:760px){.lgu-2{grid-template-columns:1fr}}

/* la prueba de 100 llamadas: nombre + ciclo de 7 días que termina en "¿seguimos?" + la verdad primero */
.ofr-name{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.ofr-name b{font-family:var(--serif,'Fraunces',serif);font-size:clamp(20px,2.4vw,26px);font-weight:500;color:#fff}
.ofr-name span{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#10202e;background:#e08a2e;padding:5px 10px;border-radius:999px}
.loop{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;counter-reset:d}
.loop li{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 12px 12px;border-radius:14px;background:rgba(16,32,46,.55);border:1px solid rgba(244,241,234,.08)}
.loop li small{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#e08a2e}
.loop li b{font-size:14px;line-height:1.35;color:#f4f1ea;font-weight:600}
.loop li.go{background:#e08a2e;border-color:#e08a2e}
.loop li.go small,.loop li.go b{color:#10202e}
.truth{margin:14px 0 0;padding:12px 14px;border-radius:12px;border-left:3px solid #e08a2e;background:rgba(244,241,234,.04);color:#e7e3da;font-size:14.5px;line-height:1.5}
.truth b{color:#fff}
@media (max-width:860px){.loop{grid-template-columns:1fr 1fr}.loop li.go{grid-column:1/-1}}


/* ── menos cajas: la oferta respira (cifras en una fila, días como línea de tiempo, texto suelto) ── */
body .ofr-box.ofr-big{padding:26px 28px 22px}
body .ofr-big .ofr-g{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:4px 0 0}
body .ofr-big .ofr-g div{display:flex;flex-direction:column;gap:2px;padding:4px 18px;background:none;border:0;border-left:1px solid rgba(244,241,234,.12);border-radius:0;box-shadow:none}
body .ofr-big .ofr-g div:first-child{border-left:0;padding-left:0}
body .ofr-big .ofr-g i,body .ofr-big .ofr-g span{display:none}
body .ofr-big .ofr-g em{font-size:44px}
body .ofr-big .ofr-g b{font-size:12px}
.loop{gap:0;margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(244,241,234,.1)}
.loop li{background:none;border:0;border-radius:0;padding:16px 14px 0 0;position:relative}
.loop li::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:rgba(244,241,234,.14)}
.loop li::after{content:'';position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:#14283a;border:2px solid #e08a2e}
.loop li b{font-weight:500;color:#cfd6dc}
.loop li.go{background:none;border:0}
.loop li.go::before{background:#e08a2e}
.loop li.go::after{background:#e08a2e}
.loop li.go small{color:#e08a2e}
.loop li.go b{color:#fff;font-weight:700}
.truth{background:none;padding:0 0 0 12px;border-left:2px solid #e08a2e;border-radius:0;margin-top:20px}
@media (max-width:860px){
  body .ofr-big .ofr-g{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  body .ofr-big .ofr-g div:nth-child(3){border-left:0;padding-left:0}
  .loop{grid-template-columns:1fr;border-top:0;padding-top:0;margin-top:18px}
  .loop li{padding:0 0 14px 22px}
  .loop li::before{left:4px;right:auto;top:6px;bottom:0;width:2px;height:auto}
  .loop li::after{left:0;top:2px}
  .loop li:last-child::before{display:none}
  .loop li.go{grid-column:auto}
}
@media (max-width:420px){body .ofr-box.ofr-big{padding:18px 16px}body .ofr-big .ofr-g em{font-size:36px}.loop li{padding:0 0 12px 22px}}
@media (max-width:860px){body .ofr-big .ofr-g div{display:flex!important}body .ofr-big .ofr-g em{text-align:left;min-width:0;grid-row:auto;align-self:flex-start}}
