:root{
  --brand:#00367C;
  --navy-900:#001b3f; --navy-800:#00367C; --navy-700:#0a4a91; --navy-600:#1158a8;
  --line:#1f4f97; --gold:#f2c14e; --gold-soft:#f6d585; --ice:#eef4fb; --mute:#8ea6c8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--brand);font-family:"Archivo",system-ui,sans-serif}
.viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--brand)}

.stage{flex:none;position:relative;transform-origin:center center;color:var(--ice);
  background:transparent}
.stage.landscape{width:1600px;height:900px;font-size:18px}
.stage.portrait {width:900px; height:1600px;font-size:24px}

/* ---------- animated background ---------- */
.bg{position:absolute;inset:0;overflow:hidden}
.bg .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;
  background:radial-gradient(closest-side, #1559a8, transparent)}
.bg .g1{width:70%;height:85%;left:-12%;top:-20%;animation:drift1 18s ease-in-out infinite alternate}
.bg .g2{width:65%;height:80%;right:-14%;bottom:-22%;opacity:.3;
  background:radial-gradient(closest-side, #1559a8, transparent);animation:drift2 22s ease-in-out infinite alternate}
.bg .g3{width:30%;height:40%;left:40%;top:30%;opacity:.25;
  background:radial-gradient(closest-side, rgba(242,193,78,.5), transparent);animation:drift3 26s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(12%,10%) scale(1.15)}}
@keyframes drift2{to{transform:translate(-10%,-8%) scale(1.1)}}
@keyframes drift3{to{transform:translate(-14%,12%) scale(1.2)}}
.bg .sheen{position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(120,170,255,.06) 49%, transparent 56%);
  background-size:300% 100%;animation:sheen 9s linear infinite}
@keyframes sheen{to{background-position:-150% 0}}
.dots{position:absolute;inset:0}
.dots i{position:absolute;width:.5em;height:.5em;border-radius:50%;background:var(--gold);opacity:.35;
  animation:floaty linear infinite}
@keyframes floaty{0%{transform:translateY(20px);opacity:0}15%{opacity:.4}85%{opacity:.4}100%{transform:translateY(-90px);opacity:0}}

/* ---------- persistent top bar ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;padding:2.2em 3em;animation:fadeIn 1s .2s both}
.tb-brand{display:flex;align-items:center;gap:.6em}
.tb-logo{height:3.4em;width:auto;display:block}

/* ---------- scenes ---------- */
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:7em 3em 3.4em;opacity:0;transition:opacity .6s ease;pointer-events:none}
.scene.active{opacity:1}

/* generic animated bits (play only while active) */
.up{opacity:0;transform:translateY(26px)}
.scene.active .up{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* scene: intro */
.s-intro .logo{width:30em;height:18em;border-radius:1.8em;display:flex;align-items:center;justify-content:center;
  background:#fff;padding:1.6em 2em;box-shadow:0 20px 50px rgba(20,70,160,.5), inset 0 0 0 1px rgba(255,255,255,.14);
  opacity:0;transform:scale(.6) rotate(-8deg)}
.s-intro.active .logo{animation:pop .9s cubic-bezier(.2,1.2,.3,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.s-intro .logo img{width:100%;height:100%;object-fit:contain;display:block}
.s-intro h1{font-size:5.4em;font-weight:900;letter-spacing:.02em;margin-top:.4em;line-height:1}
.s-intro .mut{font-size:1.2em;letter-spacing:.6em;color:var(--gold-soft);font-weight:600;margin-top:1em}
.rule{height:2px;width:0;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:1.6em 0;max-width:24em}
.s-intro.active .rule{animation:grow 1s .5s forwards}
@keyframes grow{to{width:80%}}
.s-intro .plan{font-size:1.55em;font-weight:800;max-width:22ch;line-height:1.25}
.s-intro .plan em{font-style:normal;color:var(--gold-soft)}
.s-intro .reg{font-size:.92em;color:var(--mute);margin-top:1.3em;letter-spacing:.04em;font-family:"Archivo Narrow",sans-serif}

/* scene: rate */
.s-rate .cap{font-size:1.25em;letter-spacing:.42em;color:var(--gold-soft);font-weight:700}
.s-rate .big{font-size:17em;font-weight:900;line-height:.9;letter-spacing:-.03em;margin:.02em 0;
  background:linear-gradient(180deg,#ffe9b0,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-rate.active .big{animation:popnum 1s cubic-bezier(.2,1,.3,1) both, glow 2.4s 1s ease-in-out infinite}
@keyframes popnum{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes glow{50%{filter:drop-shadow(0 0 40px rgba(242,193,78,.45))}}
.s-rate .big .pct{font-size:.4em;vertical-align:.85em;-webkit-text-fill-color:var(--gold)}
.s-rate .sub{font-size:1.5em;font-weight:700;letter-spacing:.2em;color:var(--ice)}
.s-rate .tag{margin-top:.9em;font-size:1.05em;letter-spacing:.34em;color:var(--mute);font-weight:600}

/* scene: loans */
.s-loans h2{font-size:1.45em;letter-spacing:.4em;color:var(--gold);font-weight:700;margin-bottom:1em}
.ladder{width:90%;max-width:38em}
.row{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  padding:.78em 1.1em;border-radius:.5em;border-bottom:1px solid rgba(33,64,122,.6);
  opacity:0;transform:translateX(-30px)}
.s-loans.active .row{animation:slideIn .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes slideIn{to{opacity:1;transform:none}}
.row .d{font-size:1.7em;font-weight:700}
.row .d small{font-size:.46em;color:var(--mute);font-weight:600;margin-left:.5em;letter-spacing:.04em}
.row .t{font-size:2em;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold)}
.row.on{background:linear-gradient(90deg, rgba(242,193,78,.18), rgba(242,193,78,.02));transform:translateX(1%)}
.row.on::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:.34em;border-radius:1em;
  background:var(--gold);box-shadow:0 0 16px rgba(242,193,78,.8)}
.min{margin-top:1.4em;display:inline-flex;align-items:center;gap:.7em;padding:.6em 1.4em;border-radius:2em;
  background:rgba(120,160,230,.14);border:1px solid rgba(120,160,230,.3)}
.min .k{font-size:.95em;letter-spacing:.3em;color:var(--mute);font-weight:600}
.min .v{font-size:1.7em;font-weight:800;color:var(--ice)}

/* scene: loans — portrait tuning (pantalla vertical) */
.stage.portrait .s-loans{padding-left:1.6em;padding-right:1.6em}
.stage.portrait .s-loans h2{font-size:1.25em;letter-spacing:.26em;line-height:1.3}
.stage.portrait .ladder{width:100%;max-width:none}
.stage.portrait .row{align-items:center;gap:.8em;padding:.85em 1em}
.stage.portrait .row .d{font-size:1.5em;line-height:1.15;text-align:left}
.stage.portrait .row .t{font-size:1.7em;white-space:nowrap}

/* scene: solidario */
.s-solid .badge{font-size:1.2em;letter-spacing:.4em;color:var(--gold);font-weight:700;
  padding:.5em 1.4em;border:1px solid var(--gold);border-radius:2em;margin-bottom:1.1em}
.s-solid p{font-size:2.3em;font-weight:800;line-height:1.28;max-width:20ch}
.s-solid p b{color:var(--gold-soft)}
.s-solid .guar{font-size:1.2em;color:var(--mute);margin-top:1.3em;max-width:30ch;line-height:1.5;font-weight:500}
.s-solid .cta{margin-top:1.7em;font-size:1.25em;font-weight:800;letter-spacing:.06em;color:var(--navy-900);
  background:var(--gold);padding:.7em 1.7em;border-radius:2em;box-shadow:0 12px 30px rgba(242,193,78,.3)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important}
  .scene{transition:none}
}