/* Components copied verbatim from index.html; source and sections documented in docs/portafolios-implementation.md. Shared overrides: /oneup-premium.css. */
/* ── TOKENS ─────────────────────────────────────────────── */
    :root {
      --bg:        #0B1726;
      --bg2:       #0D1C2E;
      --card:      #132538;
      --card2:     #1A3248;
      --green:     #008A55;
      --green2:    #00C46E;
      --green-dim: rgba(0,138,85,.1);
      --green-glow:rgba(0,138,85,.22);
      --text:      #FFFFFF;
      --text2:     #A8BDD0;
      --text3:     #5E7A94;
      --border:    rgba(255,255,255,.065);
      --border-g:  rgba(0,138,85,.28);
      --r:         16px;
      --r-sm:      10px;
      --shadow:    0 4px 28px rgba(0,0,0,.4);
      --fs-hero: clamp(56px, 5.4vw, 82px);
      --fs-section: clamp(2rem, 3.1vw, 2.55rem);
      --fs-card: clamp(1.05rem, 1.25vw, 1.25rem);
      --fs-small-title: .98rem;
      --fs-lead: clamp(1rem, 1.25vw, 1.15rem);
      --fs-body: .9rem;
      --fs-small: .8rem;
      --fs-label: .7rem;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
    body{
      font-family:'Manrope',sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
      width:100%;
      max-width:100%;
      overflow-x:hidden;
    }
    @supports (overflow:clip){
      html,body{overflow-x:clip}
    }
    img{display:block;max-width:100%}
    a{text-decoration:none;color:inherit}
    h1,h2,h3,h4{line-height:1.12;letter-spacing:-.025em;font-weight:800}
    h1{font-size:var(--fs-hero)}
    h2{font-size:var(--fs-section)}
    h3{font-size:var(--fs-card)}
    .title-emphasis{color:var(--green2)}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    p{color:var(--text2)}
    .container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
    section{padding:100px 0}

    /* ── PILL LABEL ─────────────────────────────────────────── */
    .pill{
      display:inline-flex;align-items:center;gap:7px;
      background:var(--green-dim);border:1px solid var(--border-g);
      color:var(--green2);font-size:.7rem;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;
      padding:5px 14px;border-radius:100px;
    }
    .pill::before{content:'';width:6px;height:6px;background:var(--green2);border-radius:50%;flex-shrink:0}

    /* ── SECTION HEADER ─────────────────────────────────────── */
    .sec-head{text-align:center;margin-bottom:56px}
    .sec-head .pill{margin-bottom:18px}
    .sec-head h2{margin-bottom:14px;font-size:var(--fs-section);line-height:1.12}
    .sec-head p{max-width:520px;margin:0 auto;font-size:var(--fs-lead);line-height:1.65}

    /* ── BUTTONS ────────────────────────────────────────────── */
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:14px 26px;border-radius:10px;
      font-family:inherit;font-size:.93rem;font-weight:600;
      cursor:pointer;border:none;transition:all .2s ease;
      white-space:nowrap;line-height:1;
    }
    .btn-primary{background:var(--green);color:#fff}
    .btn-primary:hover{background:#00A060;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,138,85,.38)}
    .btn-outline{background:transparent;color:var(--text);border:1.5px solid rgba(255,255,255,.15)}
    .btn-outline:hover{border-color:var(--green2);color:var(--green2)}
    .btn-ghost{background:transparent;color:var(--text2);font-size:.85rem;padding:10px 14px}
    .btn-ghost:hover{color:var(--text)}
    .btn-lg{padding:17px 34px;font-size:1rem}
    .btn svg{flex-shrink:0}

    /* ── NAV ─────────────────────────────────────────────────── */
    #nav{
      position:fixed;top:0;left:0;right:0;z-index:200;
      padding:14px 24px;
      display:flex;align-items:center;justify-content:space-between;
      background:rgba(11,23,38,.88);backdrop-filter:blur(22px);
      border-bottom:1px solid var(--border);
      transition:background .3s;
    }
    .nav-logo{display:flex;align-items:center;gap:10px}
    .nav-logo img{width:40px;height:40px;border-radius:50%;background:transparent;padding:0;object-fit:cover}
    .nav-links{display:flex;align-items:center;gap:4px;position:absolute;left:50%;transform:translateX(-50%)}
    .nav-links a{
      color:var(--text2);font-size:.85rem;font-weight:500;
      padding:7px 13px;border-radius:7px;transition:color .2s;
    }
    .nav-links a:hover{color:var(--text)}
    .nav-right{display:flex;align-items:center;gap:10px;position:relative;z-index:1}

    /* ── HERO ────────────────────────────────────────────────── */
    #hero{
      min-height:100vh;display:flex;flex-direction:column;
      justify-content:center;padding:130px 24px 80px;
      position:relative;overflow:hidden;
    }
    .hero-bg{
      position:absolute;inset:0;
      background-image:
        linear-gradient(to right, rgba(11,23,38,.97) 0%, rgba(11,23,38,.82) 45%, rgba(11,23,38,.38) 72%, rgba(8,19,32,.15) 100%),
        url('/uploads/hero-bg.png');
      background-size:cover;
      background-position:center right;
      background-repeat:no-repeat;
    }
    .hero-grid{
      position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
      background-size:56px 56px;
      mask-image:radial-gradient(ellipse 85% 85% at 50% 40%,black 10%,transparent 80%);
    }
    .hero-chart{display:none}
    .hero-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;width:100%}
    .hero-eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      background:var(--green-dim);border:1px solid var(--border-g);
      color:var(--green2);font-size:.7rem;font-weight:700;
      letter-spacing:.1em;text-transform:uppercase;
      padding:6px 16px;border-radius:100px;margin-bottom:26px;
    }
    .hero-eyebrow span{width:6px;height:6px;background:var(--green2);border-radius:50%;display:inline-block}
    .hero-h1{
      font-size:var(--fs-hero);
      line-height:1.06;
      max-width:980px;
      margin-bottom:22px;
    }
    .hero-h1 .hero-line{display:block}
    .hero-h1 .g{color:var(--green2)}
    .hero-sub{
      font-size:clamp(1.08rem,1.35vw,1.24rem);
      line-height:1.7;
      color:var(--text2);max-width:580px;
      margin-bottom:42px;
    }
    .hero-support{
      font-size:clamp(.96rem,1.05vw,1.02rem);color:var(--text3);
      max-width:560px;margin-top:-14px;margin-bottom:42px;line-height:1.7;
    }
    .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:60px}
    .trust-strip{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
    .trust-item{
      display:flex;align-items:center;gap:7px;
      color:var(--text3);font-size:.78rem;font-weight:500;
    }
    .trust-item::before{
      content:'';width:7px;height:7px;
      background:var(--green);border-radius:50%;flex-shrink:0;
    }

    /* ── VSL ─────────────────────────────────────────────────── */
    #vsl{background:var(--bg2)}
    .vsl-intro{max-width:620px;margin:0 auto 42px;text-align:center}
    .vsl-intro h2{margin-bottom:14px}
    wistia-player[media-id='m2t5bk2ewu']:not(:defined){
      background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/m2t5bk2ewu/swatch');
      display:block;filter:blur(5px);padding-top:56.25%;
    }
    .oneup-video-container{
      width:100%;max-width:840px;margin:0 auto;
      aspect-ratio:16/9;
      background:var(--card);border:1px solid var(--border);
      border-radius:var(--r);overflow:hidden;
    }
    .oneup-video-container wistia-player{width:100%;height:100%;display:block}
    .vsl-cta{text-align:center;margin-top:32px}

    
/* ── EVIDENCE / PUBLIC LIVE ACCOUNT ─────────────────────── */
    #evidencia{background:var(--bg2)}
    .live-account-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:20px;align-items:stretch;min-width:0}
    .live-account-layout>*{min-width:0}
    .live-account-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:0 18px 44px rgba(4,9,15,.14);min-width:0}
    .live-account-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
    .live-account-card-title{font-size:1.05rem;color:var(--text);font-weight:800}
    .live-status{display:inline-flex;align-items:center;gap:7px;color:var(--text3);font-size:.68rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
    .live-status::before{content:'';width:7px;height:7px;background:var(--text3);border-radius:50%;flex-shrink:0}
    .live-status.public-source{color:var(--green2)}
    .live-status.public-source::before{background:var(--green2)}
    .live-chart{position:relative;min-height:280px;overflow:hidden;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:#0A1928;padding:14px}
    .live-chart-grid{position:absolute;inset:14px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
    .live-chart-grid span{display:block;border-top:1px solid rgba(168,189,208,.09)}
    .live-chart-svg{position:absolute;z-index:1;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);overflow:visible}
    .live-chart-svg polyline{fill:none;stroke:var(--green2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
    .live-chart-empty{position:relative;z-index:1;min-height:248px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 24px}
    .live-chart-empty[hidden]{display:none}
    .live-chart-empty svg{width:46px;height:46px;margin-bottom:14px;stroke:var(--green2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
    .live-chart-empty strong{font-size:.92rem;color:var(--text);margin-bottom:6px}
    .live-chart-empty p{max-width:320px;font-size:.76rem;line-height:1.65;color:var(--text3)}
    .live-chart-empty a{color:var(--green2);font-weight:700}
.live-chart-retry{margin-top:14px;border:1px solid var(--gborder);border-radius:999px;background:transparent;color:var(--green2);padding:8px 14px;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer}
.live-chart-retry:hover{background:var(--gdim)}
.live-chart-retry[hidden]{display:none}
.live-metrics-note{margin:14px 0 0;color:var(--text3);font-size:.68rem;line-height:1.55}
    .live-chart-legend{display:flex;align-items:center;gap:18px;margin-top:14px;color:var(--text3);font-size:.7rem}
    .live-legend-item{display:inline-flex;align-items:center;gap:7px}
    .live-legend-item::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--text3)}
    .live-legend-item.growth::before{background:var(--green2)}
    .live-chart-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .live-chart-caption{flex:1 1 180px;margin-top:12px;color:var(--text3);font-size:.7rem;line-height:1.55}
    .live-account-card h3{font-size:1rem;color:var(--text);margin-bottom:18px}
    .live-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .live-account-metrics-card{display:flex;flex-direction:column;justify-content:center}
    .live-account-metrics-card .live-account-cta{margin-top:18px}
    .live-metric{padding:14px 12px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:var(--r-sm)}
    .live-metric-label{display:block;color:var(--text3);font-size:.67rem;line-height:1.35;margin-bottom:7px}
    .live-metric-value{display:block;color:var(--text);font-size:.95rem;font-weight:800;letter-spacing:-.02em}
    .live-metric-value.is-unavailable{color:var(--text3);font-size:.72rem;letter-spacing:0}
    .live-account-cta{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.4}
    .account-disclaimer{margin-top:28px}

    
/* ── BENEFITS ────────────────────────────────────────────── */
    #benefits{background:var(--bg)}
    .ben-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
    .ben{
      background:var(--card);border:1px solid var(--border);
      border-radius:var(--r);padding:26px 22px;
      display:flex;gap:16px;align-items:flex-start;
      transition:border-color .22s;
    }
    .ben:hover{border-color:var(--border-g)}
    .ben-n{
      font-size:2.2rem;font-weight:800;
      color:var(--green2);line-height:1;
      flex-shrink:0;min-width:44px;
    }
    .ben h4{font-size:var(--fs-small-title);color:var(--text);margin-bottom:6px;font-weight:700}
    .ben p{font-size:.85rem}

    /* ── WHY DIFFERENT ───────────────────────────────────────── */
    #why{background:var(--bg2)}
    .comp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:52px}
    .comp-col{
      background:var(--card);border:1px solid var(--border);
      border-radius:var(--r);overflow:hidden;
    }
    .comp-col.g{border-color:var(--border-g)}
    .comp-head{padding:15px 22px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
    .comp-head.bad{background:rgba(255,255,255,.04);color:var(--text3)}
    .comp-head.good{background:var(--green-dim);color:var(--green2)}
    .comp-body{padding:18px 22px;display:flex;flex-direction:column;gap:10px}
    .comp-row{display:flex;align-items:flex-start;gap:9px;font-size:.845rem;color:var(--text2)}
    .comp-row .ico{flex-shrink:0;margin-top:1px}
    .diffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
    .diff{
      background:var(--card);border:1px solid var(--border);
      border-left:3px solid var(--green);
      border-radius:0 var(--r-sm) var(--r-sm) 0;
      padding:18px 18px;
    }
    .diff h4{font-size:var(--fs-small-title);color:var(--text);margin-bottom:6px;font-weight:700}
    .diff p{font-size:.8rem}

    /* ── PROCESS ─────────────────────────────────────────────── */
    #proceso{background:var(--bg2)}
    .steps{
      display:grid;grid-template-columns:repeat(4,1fr);
      gap:0;margin-top:60px;position:relative;
    }
    .steps::before{
      content:'';position:absolute;top:31px;left:12.5%;right:12.5%;height:1px;
      background:linear-gradient(90deg,transparent,var(--border-g) 20%,var(--border-g) 80%,transparent);
    }
    .step{
      display:flex;flex-direction:column;align-items:center;
      text-align:center;padding:0 16px;
    }
    .step-n{
      width:62px;height:62px;border-radius:50%;
      background:var(--bg2);border:2px solid var(--border-g);
      display:flex;align-items:center;justify-content:center;
      font-size:1.35rem;font-weight:800;color:var(--green2);
      margin-bottom:20px;position:relative;z-index:1;flex-shrink:0;
    }
    .step h4{font-size:var(--fs-small-title);color:var(--text);margin-bottom:8px;font-weight:700}
    .step p{font-size:.82rem}
    .step-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px}
    .step-tag{
      font-size:.67rem;font-weight:700;
      padding:3px 8px;background:var(--green-dim);
      color:var(--green2);border-radius:4px;
    }

    /* ── FOR WHOM ────────────────────────────────────────────── */
    #quien{background:var(--bg)}
    .fw-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
    .fw-col{
      background:var(--card);border:1px solid var(--border);
      border-radius:var(--r);overflow:hidden;
    }
    .fw-head{padding:15px 22px;font-size:.82rem;font-weight:700}
    .fw-head.si{background:var(--green-dim);color:var(--green2)}
    .fw-head.no{background:rgba(255,255,255,.04);color:var(--text3)}
    .fw-list{list-style:none;padding:18px 22px;display:flex;flex-direction:column;gap:9px}
    .fw-list li{display:flex;align-items:flex-start;gap:9px;font-size:.855rem;color:var(--text2)}
    .fw-list li .m{flex-shrink:0;margin-top:2px}

    
/* ── FAQ ─────────────────────────────────────────────────── */
    #faq{background:var(--bg2)}
    .faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:3px}
    .faq-item{
      background:var(--card);border:1px solid var(--border);
      border-radius:var(--r-sm);overflow:hidden;
      transition:border-color .2s;
    }
    .faq-item[open]{border-color:var(--border-g)}
    .faq-q{
      width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
      padding:19px 22px;list-style:none;
      color:var(--text);font-family:inherit;font-size:.92rem;font-weight:600;
      cursor:pointer;text-align:left;
    }
    .faq-q::-webkit-details-marker{display:none}
    .faq-q:hover{color:var(--green2)}
    .faq-arrow{flex-shrink:0;transition:transform .3s}
    .faq-item[open] .faq-arrow{transform:rotate(180deg)}
    .faq-a{display:none}
    .faq-item[open] .faq-a{display:block}
    .faq-a-inner{
      padding:0 22px 18px;font-size:.875rem;color:var(--text2);
      line-height:1.72;border-top:1px solid var(--border);padding-top:14px;
    }

    /* ── CTA FINAL ───────────────────────────────────────────── */
    #cta-final{background:var(--bg);text-align:center;position:relative;overflow:hidden}
    .cta-bg{
      position:absolute;inset:0;
      background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(0,138,85,.09) 0%,transparent 65%);
    }
    .cta-inner{position:relative;z-index:1;max-width:680px;margin:0 auto}
    .cta-inner h2{margin-bottom:14px;font-size:var(--fs-section);line-height:1.12}
    .cta-inner > p{font-size:var(--fs-lead);line-height:1.65;margin-bottom:38px}
    .cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

    /* ── FOOTER ──────────────────────────────────────────────── */
    footer{
      background:#070E1A;border-top:1px solid var(--border);
      padding:44px 24px;
    }
    .foot-inner{
      max-width:1180px;margin:0 auto;
      display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
    }
    .foot-logo img{width:40px;height:40px;border-radius:50%;background:transparent;padding:0;object-fit:cover;opacity:.85}
    .foot-links{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
    .foot-links a{font-size:.78rem;color:var(--text3);transition:color .2s}
    .foot-links a:hover{color:var(--text2)}
    .foot-disc{font-size:.73rem;color:var(--text3);max-width:620px;line-height:1.65}
    .foot-copy{font-size:.72rem;color:rgba(94,122,148,.6)}

    
/* ── FOUNDER STRIP ───────────────────────────────────────── */
    .founder-strip{
      background:var(--card);border:1px solid var(--border);
      border-radius:var(--r);padding:36px 36px;
      display:flex;align-items:center;gap:32px;
      margin-top:56px;
    }
    .founder-photo{
      width:90px;height:90px;border-radius:50%;flex-shrink:0;
      border:2px solid var(--border-g);
      overflow:hidden;
    }
    .founder-photo img{
      width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;
    }
    .founder-photo-lbl{display:none}
    .founder-info h4{font-size:var(--fs-small-title);color:var(--text);margin-bottom:6px}
    .founder-info p{font-size:.85rem;line-height:1.6}
    .founder-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
    .founder-tag{
      font-size:.7rem;font-weight:600;padding:4px 10px;
      background:var(--green-dim);color:var(--green2);border-radius:5px;
    }
    @media(max-width:600px){
      .founder-strip{flex-direction:column;text-align:center}
      .founder-tags{justify-content:center}
    }

    /* ── WHY / FOUNDER BADGE ─── */
    .why-head{
      text-align:left;
      margin-bottom:56px;
    }

    .why-head .pill,
    .why-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      background:var(--green-dim);
      border:1px solid var(--border-g);
      color:var(--green2);
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.1em;
      text-transform:uppercase;
      padding:5px 14px;
      border-radius:100px;
      margin-bottom:18px;
    }

    .why-head .pill::before,
    .why-pill::before{
      content:'';
      width:6px;
      height:6px;
      background:var(--green2);
      border-radius:50%;
      flex-shrink:0;
    }

    .why-head p{
      max-width:920px;
      margin:0;
    }

    @media(max-width:768px){
      .why-head{
        text-align:center;
      }

      .why-head p{
        margin:0 auto;
      }
    }