:root{
    --bg-void:      #07070B;
    --bg-deep:      #0C0D13;
    --surface:      #13141C;
    --surface-2:    #1A1B25;
    --line:         rgba(255,255,255,0.08);
    --line-strong:  rgba(255,255,255,0.16);

    --gold-deep:    #8A6A1E;
    --gold:         #D4AF37;
    --gold-light:   #F3DA8C;
    --gold-hi:      #FFF3CE;
    --gold-glow:    rgba(212,175,55,0.4);

    --violet:       #6E5AE0;
    --violet-glow:  rgba(110,90,224,0.35);

    --text-hi:      #F6F3EA;
    --text-mid:     #C3C2CD;
    --text-low:     #82818F;

    --whatsapp:     #25D366;
    --whatsapp-dark: #1DA851;

    --font-display: 'Sora', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --ease: cubic-bezier(.16,.84,.44,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }


  /* html{ scroll-behavior:smooth; } */
 /*  para que la franja negra desaparesca */
  html{ scroll-behavior:smooth; background: var(--bg-void); }

  body{
    background: var(--bg-void);
    color: var(--text-hi);
    font-family: var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    font-size:17px;
  }

  ::selection{ background: var(--gold-glow); color:#fff; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg-void); }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold-deep),var(--gold)); border-radius:10px; }

  /* ============ AMBIENT BACKGROUND ============ */
  .ambient{ position:fixed; top:0; left:0; right:0; bottom:-150px; z-index:0; pointer-events:none; overflow:hidden; }


  
  .orb{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.35; will-change: transform; }
  .orb-1{ width:520px; height:520px; background:var(--gold); top:-180px; left:-140px; animation: drift1 22s ease-in-out infinite; }
  .orb-2{ width:460px; height:460px; background:var(--violet); bottom:-160px; right:-120px; animation: drift2 26s ease-in-out infinite; }
  .orb-3{ width:340px; height:340px; background:var(--gold-deep); top:40%; left:50%; opacity:.16; animation: drift3 30s ease-in-out infinite; }
  @keyframes drift1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(60px,80px);} }
  @keyframes drift2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-70px,-50px);} }
  @keyframes drift3{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.25);} }

  .grid-overlay{
    position:fixed; top:0; left:0; right:0; bottom:-150px; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 10%, #000 40%, transparent 100%);
  }

  section, header, footer{ position:relative; z-index:1; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

  .reveal{ opacity:0; transform:translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }




/* ----------movimientos de la animacion del video de lado a lado ----------------*/
  /* ---------- movimiento + brillo premium del video al aparecer ---------------- */
 /*  @keyframes wiggleVideo{
    0%   { transform: translateY(0) scale(1) rotate(0deg);
           box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow); }
    30%  { transform: translateY(-10px) scale(1.02) rotate(-0.7deg);
           box-shadow: 0 40px 100px -20px rgba(0,0,0,.75), 0 0 90px 10px var(--gold-glow); }
    60%  { transform: translateY(-4px) scale(1.03) rotate(0.6deg);
           box-shadow: 0 45px 110px -20px rgba(0,0,0,.8), 0 0 120px 16px var(--gold-glow); }
    100% { transform: translateY(0) scale(1) rotate(0deg);
           box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow); }
  }
  .video-frame.wiggle{
    animation: borderflow 10s ease infinite, wiggleVideo 2.8s ease-in-out 1;
  } 

  /* ---------- anillo dorado que se expande al aparecer ---------------- */
/*   .video-frame::after{
    content:'';
    position:absolute; inset:-3px;
    border-radius:24px;
    border:2px solid var(--gold-light);
    opacity:0;
    pointer-events:none;
  }
  .video-frame.wiggle::after{
    animation: ringPulse 1.6s cubic-bezier(.16,1,.3,1) 1;
  }
  @keyframes ringPulse{
    0%   { opacity:.9; transform:scale(1); }
    100% { opacity:0; transform:scale(1.18); }
  } */

  /* ---------- destello de luz que recorre el video por dentro ---------------- */
  /* .video-inner::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    transform:translateX(-150%);
    opacity:0;
    pointer-events:none;
    z-index:5;
  }
  .video-frame.wiggle .video-inner::after{
    animation: shineSweep 1.4s ease-in-out 1;
    animation-delay:.15s;
  }
  @keyframes shineSweep{
    0%   { transform:translateX(-150%); opacity:0; }
    15%  { opacity:1; }
    55%  { opacity:1; }
    100% { transform:translateX(150%); opacity:0; }
  } */



/* animacion de lado a lado del video al aparecer */
 /*  @keyframes wiggleVideo{
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-10px); }
    40%  { transform: translateX(9px); }
    60%  { transform: translateX(-6px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
  }
  .video-frame.wiggle{
    animation: wiggleVideo 2.4s ease-in-out 1;
  } */

  /* ---------- movimiento elástico + brillo del marco dorado ---------------- */
 /*  @keyframes wiggleVideo{
    0%   { transform: translateY(0) scale(1) rotate(0deg);
           box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow); }
    35%  { transform: translateY(-14px) scale(1.035) rotate(-1deg);
           box-shadow: 0 42px 105px -20px rgba(0,0,0,.78), 0 0 170px 40px rgba(212,175,55,.95); }
    65%  { transform: translateY(4px) scale(.99) rotate(.7deg);
           box-shadow: 0 32px 85px -20px rgba(0,0,0,.72), 0 0 110px 20px rgba(212,175,55,.7); }
    100% { transform: translateY(0) scale(1) rotate(0deg);
           box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow); }
  }
  .video-frame.wiggle{
    animation: borderflow 10s ease infinite, wiggleVideo 1.7s cubic-bezier(.34,1.56,.64,1) 1;
  } */





  /* ----------------EFECTO DEL TITULO -------------- */
  .gold-text{
    /* background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-light) 35%, var(--gold-hi) 60%, var(--gold-light) 100%);
    -webkit-background-clip:text;  */
    background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-light) 30%, var(--gold-hi) 50%, var(--gold-light) 70%, var(--gold-deep) 100%);
    background-clip:text; color:transparent;
    background-size:200% auto;
    animation: shimmer 6s linear infinite;
  }
  @keyframes shimmer{ to{ background-position:200% center; } }

  /* ============ PREMIUM GOLD BUTTON ============ */
  .btn-gold{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--font-display); font-weight:800; font-size:16px;
    text-transform:uppercase; letter-spacing:.04em;
    color:#241804;
    background:linear-gradient(160deg, var(--gold-hi) 0%, var(--gold-light) 30%, var(--gold) 65%, var(--gold-deep) 100%);
    padding:19px 42px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.5);
    cursor:pointer;
    box-shadow:
      0 2px 0 rgba(255,255,255,.5) inset,
      0 -3px 8px rgba(0,0,0,.25) inset,
      0 14px 34px -8px var(--gold-glow),
      0 4px 14px -4px rgba(0,0,0,.5);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    overflow:hidden;
  }
  .btn-gold::before{
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
    transform:translateX(-130%);
    animation: idle-sheen 3.4s ease-in-out infinite;
  }
  @keyframes idle-sheen{ 0%,55%{ transform:translateX(-130%);} 85%,100%{ transform:translateX(130%);} }
  .btn-gold:hover{
    transform:translateY(-3px) scale(1.015);
    box-shadow:
      0 2px 0 rgba(255,255,255,.5) inset,
      0 -3px 8px rgba(0,0,0,.25) inset,
      0 20px 44px -8px var(--gold-glow),
      0 4px 14px -4px rgba(0,0,0,.5);
  }

  .btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:15px;
    color:var(--text-hi);
    padding:16px 26px; border-radius:14px;
    border:1px solid var(--line-strong);
    background:rgba(255,255,255,.02);
    transition: border-color .3s, background .3s;
  }
  .btn-ghost:hover{ border-color:var(--gold); background:rgba(212,175,55,.06); }

  /* ============ HERO (compact — presenter + title + video) ============ */
  .hero{
    padding:56px 0 0;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .presenter-tag{
    display:flex; align-items:center; gap:12px;
    margin-bottom:30px;
  }
  .presenter-avatar{
    width:46px; height:46px; border-radius:50%;
    border:2px solid var(--gold);
    background:linear-gradient(135deg, var(--surface-2), var(--bg-deep));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 4px rgba(212,175,55,.12), 0 4px 16px -4px var(--gold-glow);
    overflow:hidden;
    flex-shrink:0;
  }
  /* Reemplaza este bloque con: <img src="tu-foto.jpg" alt="Christian Rubén"> */
  .presenter-avatar svg{ width:22px; height:22px; stroke:var(--gold-light); }
  .presenter-name{
    font-family:var(--font-display); font-weight:700; font-size:15.5px;
    letter-spacing:.02em; color:var(--text-hi);
    display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  }
  .presenter-name small{
    font-family:var(--font-mono); font-weight:400; font-size:11px;
    color:var(--gold-light); letter-spacing:.08em; text-transform:uppercase;
  }

  .hero h1{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(2.3rem, 5.6vw, 4.2rem);
    line-height:1.08;
    letter-spacing:-0.02em;
    max-width:880px;
    margin-bottom:20px;
  }
  .hero p.sub{
    max-width:620px;
    color:var(--text-mid);
    font-size:clamp(1.05rem,1.7vw,1.25rem);
    margin-bottom:44px;
  }

  /* ============ VIDEO ============ */
  .video-section{ padding:0 0 40px; }

  .video-frame{
    position:relative;
    max-width:880px; margin:0 auto;
    border-radius:22px;
    padding:3px;
    background:linear-gradient(135deg, var(--gold-deep), var(--gold-light) 30%, var(--violet) 70%, var(--gold) 100%);
    background-size:300% 300%;
    animation: borderflow 10s ease infinite;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow);

    
  }
  @keyframes borderflow{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

  .video-inner{ position:relative; background:#000; border-radius:19px; overflow:hidden; aspect-ratio:16/9; }
  .video-inner iframe, .video-inner video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

  .video-facade{
    position:absolute; inset:0; cursor:pointer; touch-action: manipulation;
    display:flex; align-items:center; justify-content:center;
    background: #0d0d12 center/cover no-repeat;
    background-image: linear-gradient(rgba(6, 6, 10, 0.096), rgba(6, 6, 10, 0.196)), url('../images/ROBOT.jpg');
    transition: filter .4s;
  }
  .video-facade:hover{ filter:brightness(1.08); }

  .play-btn{
    width:92px; height:92px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
    box-shadow:0 0 0 0 var(--gold-glow), 0 10px 40px -8px rgba(0,0,0,.6);
    animation: pulse-ring 2.4s ease-out infinite;
    position:relative; z-index:2;
  }
  .play-btn svg{ width:30px; height:30px; margin-left:5px; fill:#241804; }
  @keyframes pulse-ring{
    0%{ box-shadow:0 0 0 0 var(--gold-glow), 0 10px 40px -8px rgba(0,0,0,.6);}
    70%{ box-shadow:0 0 0 26px rgba(212,175,55,0), 0 10px 40px -8px rgba(0,0,0,.6);}
    100%{ box-shadow:0 0 0 0 rgba(212,175,55,0), 0 10px 40px -8px rgba(0,0,0,.6);}
  }

  /* minimal unlock indicator — just ring + time, no explanatory copy */
  .unlock-wrap{
    max-width:880px; margin:22px auto 0;
    display:flex; align-items:center; justify-content:center; gap:12px;
    font-family:var(--font-mono); font-size:13px; color:var(--text-low); letter-spacing:.03em;
    transition:opacity .6s var(--ease);
  }
  .unlock-wrap.hide{ opacity:0; pointer-events:none; height:0; margin:0; overflow:hidden; }
  .unlock-ring{ position:relative; width:34px; height:34px; flex-shrink:0; }
  .unlock-ring svg{ transform:rotate(-90deg); width:34px; height:34px; }
  .unlock-ring circle{ fill:none; stroke-width:3; }
  .unlock-ring .track{ stroke:rgba(255,255,255,.08); }
  .unlock-ring .fill{ stroke:url(#goldGrad); stroke-linecap:round; transition: stroke-dashoffset 1s linear; }

  /* CTA reveal after 4 minutes */
  .cta-reveal{
    max-width:640px; margin:0 auto; text-align:center;
    opacity:0; max-height:0; overflow:hidden;
    transition: opacity 1.1s var(--ease), max-height 1.2s var(--ease), margin 1.2s var(--ease);
  }
  /* .cta-reveal.show{ opacity:1; max-height:400px; margin-top:40px; } */
  .cta-reveal.show{ opacity:1; max-height:400px; margin-top:40px; overflow:visible; }

  /* ============ DESCRIPTION ============ */
   .about{ padding:100px 0 60px; } 
  .about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start; }
  .about-copy h2{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.8rem,3.2vw,2.4rem); line-height:1.2; margin-bottom:22px; letter-spacing:-.01em;
  }
  .about-copy p{ color:var(--text-mid); font-size:1.08rem; margin-bottom:18px; }
  .about-copy p b{ color:var(--text-hi); font-weight:600; }




















.feature-list img {
    display: block;
    max-width: 100%;
    height: auto;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.20) 4%,
        rgba(0,0,0,0.60) 8%,
        black 12%,
        black 82%,
        rgba(0,0,0,0.85) 88%,
        rgba(0,0,0,0.55) 93%,
        rgba(0,0,0,0.25) 97%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.20) 4%,
        rgba(0,0,0,0.60) 8%,
        black 12%,
        black 82%,
        rgba(0,0,0,0.85) 88%,
        rgba(0,0,0,0.55) 93%,
        rgba(0,0,0,0.25) 97%,
        transparent 100%
    );
}
















  
  /*  .feature-list{
     margin-top: -150px;
   } */
 /*  .feature-item{
    display:flex; gap:18px; align-items:center;
    background:var(--surface); border:1px solid var(--line);
    padding:22px 24px; border-radius:18px;
    transition:border-color .3s, transform .3s, box-shadow .3s;
  } */ 
 /*  .feature-item:hover{ border-color:rgba(212,175,55,.35); transform:translateX(4px); box-shadow:0 14px 34px -18px var(--gold-glow); }
  .feature-icon{
    width:50px; height:50px; border-radius:13px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, rgba(212,175,55,.22), rgba(212,175,55,.05));
    border:1px solid rgba(212,175,55,.3);
  } */
  /* .feature-icon svg{ width:24px; height:24px; stroke:var(--gold-light); }
  .feature-txt h4{ font-family:var(--font-display); font-size:17px; font-weight:700; margin-bottom:4px; }
  .feature-txt p{ color:var(--text-low); font-size:14.5px; margin:0; }

  .skills-strip{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
  .skill-chip{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:.03em;
    padding:9px 15px; border-radius:100px;
    border:1px solid var(--line-strong); color:var(--text-mid);
    background:rgba(255,255,255,.02);
  } */
















.titulo-galeria{
   font-family:var(--font-display); 
   font-weight:700;
    font-size:clamp(1.8rem,3.2vw,2.4rem); 
    line-height:1.2; 
    margin-bottom:22px; 
    letter-spacing:-.01em;
    text-align:center;
}

.parrafo-p-galeria{
text-align:center;
    color:var(--text-mid); 
    font-size:1.08rem; 
    
    max-width:880px; margin:0 auto;
    padding-bottom:40px;
     
}

.comosegana{
 font-size:1.08rem; 
 color:var(--gold-light);
  
}





























































  /* ============ GALLERY — 2 / 3 / 2, no header copy ============ */
  .gallery{ padding:40px 0 110px; }
  .course-grid{ display:flex; flex-direction:column; gap:26px; max-width:1100px; margin:0 auto; }
  .row{ display:flex; 
    flex-wrap:wrap; gap:26px; 
    justify-content:center;
    align-items:flex-start; 
  }
  /* tamaños invertidos: row-top ahora usa el tamaño chico (3 por fila) que antes tenía row-mid */
  .course-grid .row-top .card{ flex:0 1 calc(33.333% - 17.334px); max-width:calc(33.333% - 17.334px); }
  /* row-mid ahora usa el tamaño grande (2 por fila) que antes tenía row-top */
  .course-grid .row-mid .card{ flex:0 1 calc(50% - 13px); max-width:calc(50% - 13px); }
  .course-grid .row-bot .card{ flex:0 1 calc(50% - 13px); max-width:calc(50% - 13px); }

  .card{
    position:relative; background:var(--surface); border:1px solid var(--line);
    border-radius:20px; overflow:hidden;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
  }
  .card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.45);
    box-shadow:0 24px 50px -18px rgba(0,0,0,.6), 0 0 40px -14px var(--gold-glow);
  }
  .card-media{ aspect-ratio:1/1; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--surface-2), var(--bg-deep)); }
  .card-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s var(--ease); }
  .card:hover .card-media img{ transform:scale(1.05); }
  .card-badge{
    position:absolute; top:12px; left:12px;
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
    border:1px solid var(--line-strong); color:var(--gold-light);
    padding:5px 10px; border-radius:100px;
  }
  .card-body{ padding:22px 22px 24px; }
  .card-body h4{ font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:7px; }
  .card-body .desc{ color:var(--text-low); font-size:14px; margin-bottom:16px; }
  .card-meta{ display:flex; align-items:center; justify-content:space-between; }
  .card-meta .modules{ font-family:var(--font-mono); font-size:12px; color:var(--text-low); }
  .price{ font-family:var(--font-display); font-weight:800; font-size:19px; display:flex; align-items:baseline; gap:2px; }
  .price .sign{
    background:linear-gradient(120deg, var(--gold-deep), var(--gold-hi), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    background-size:200% auto; animation: shimmer 4s linear infinite;
    text-shadow:0 0 18px var(--gold-glow);
  }

  /* ============ FINAL CTA ============ */
  .final-cta{ padding:90px 0 120px; text-align:center; }
  .final-card{
    max-width:760px; margin:0 auto; padding:64px 40px;
    border-radius:28px; position:relative; overflow:hidden;
    background: radial-gradient(120% 140% at 50% 0%, rgba(212,175,55,.14), transparent 60%), var(--surface);
    border:1px solid var(--line-strong);
  }
  .final-card h2{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(1.8rem,3.6vw,2.7rem); margin-bottom:18px; letter-spacing:-.02em;
  }
  .final-card p{ color:var(--text-mid); font-size:1.08rem; max-width:520px; margin:0 auto 34px; }

  footer{ padding:40px 0; border-top:1px solid var(--line); }
  footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
  footer p{ color:var(--text-low); font-size:13px; }






  /* ============ WHATSAPP FLOAT antiguo ============ */
 /*  .wa-float{ position:fixed; bottom:26px; right:26px; z-index:80; display:flex; align-items:center; }
  .wa-tooltip{
    background:var(--surface); border:1px solid var(--line-strong);
    color:var(--text-hi); font-size:13.5px; font-weight:500;
    padding:11px 16px; border-radius:12px; margin-right:12px; white-space:nowrap;
    opacity:0; transform:translateX(8px);
    transition:opacity .35s var(--ease), transform .35s var(--ease);
    box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  }
  .wa-float:hover .wa-tooltip{ opacity:1; transform:translateX(0); }
  .wa-btn{
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(135deg,#2be08a,var(--whatsapp));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px -6px rgba(37,211,102,.55);
    animation: wa-pulse 2.6s ease-in-out infinite;
    position:relative; cursor:pointer;
  }
  .wa-btn svg{ width:30px; height:30px; fill:#fff; }
  @keyframes wa-pulse{
    0%,100%{ box-shadow:0 10px 30px -6px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.5); }
    50%{ box-shadow:0 10px 30px -6px rgba(37,211,102,.55), 0 0 0 12px rgba(37,211,102,0); }
  } */


















  @media (max-width: 880px){
    .about-grid{ grid-template-columns:1fr; gap:40px; }
    .course-grid .row-top .card, .course-grid .row-mid .card, .course-grid .row-bot .card{ flex:0 1 calc(50% - 13px); max-width:calc(50% - 13px); }
  }
  @media (max-width: 520px){
    .hero{ padding-top:36px; }
    /* .wa-tooltip{ display:none; } */
    .row{ gap:20px; }
    .course-grid{ gap:20px; }
    .course-grid .row-top .card, .course-grid .row-mid .card, .course-grid .row-bot .card{ flex:0 1 100%; max-width:100%; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }




















  /* =====================================================================
   ¿CÓMO GANAS DINERO? — versión premium dorada
   Paleta y tipografías calcadas de tu sitio (Sora / Inter / JetBrains Mono,
   #D4AF37 gold, fondos casi negros). Si tu página ya define estas variables
   en :root, estas simplemente no chocan (van con el prefijo --cgd-).
   ===================================================================== */

.cgd-section{
  --cgd-bg-void:      #07070B;
  --cgd-bg-deep:      #0C0D13;
  --cgd-surface:      #13141C;
  --cgd-surface-2:    #1A1B25;
  --cgd-line:         rgba(255,255,255,0.08);
  --cgd-line-strong:  rgba(255,255,255,0.16);

  --cgd-gold-deep:    #8A6A1E;
  --cgd-gold:         #D4AF37;
  --cgd-gold-light:   #F3DA8C;
  --cgd-gold-hi:      #FFF3CE;
  --cgd-gold-glow:    rgba(212,175,55,0.4);

  --cgd-text-hi:      #F6F3EA;
  --cgd-text-mid:     #C3C2CD;
  --cgd-text-low:     #82818F;

  --cgd-font-display: 'Sora', sans-serif;
  --cgd-font-body:    'Inter', sans-serif;
  --cgd-font-mono:    'JetBrains Mono', monospace;
  --cgd-ease: cubic-bezier(.16,.84,.44,1);
}

.cgd-section *{ box-sizing:border-box; }

.cgd-section{
  position:relative;
 /*  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,0.08), transparent 60%),
    var(--cgd-bg-void); */
 /*  padding:76px 24px 84px; */
 padding:0px 24px 84px;
  font-family:var(--cgd-font-body);
  color:var(--cgd-text-hi);
  overflow:hidden;
}

.cgd-wrap{ position:relative; max-width:1180px; margin:0 auto; }

/* ---------- Encabezado ---------- */

.cgd-eyebrow{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin:0 auto 20px; width:fit-content;
  font-family:var(--cgd-font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cgd-gold-light);
  padding:7px 18px; border:1px solid var(--cgd-line-strong); border-radius:100px;
  background:linear-gradient(180deg, rgba(212,175,55,.08), rgba(212,175,55,.02));
}

.cgd-title{
  text-align:center;
  font-family:var(--cgd-font-display);
  font-size:clamp(26px,3.6vw,42px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
  margin:0 0 12px;
  color:var(--cgd-text-hi);
}


/* ------------------------COMO GANAR DINERO TITULO ---------------------------*/
.cgd-gold-text{
      background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-light) 30%, var(--gold-hi) 50%, var(--gold-light) 70%, var(--gold-deep) 100%);

  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:cgd-shimmer 6s linear infinite;
}
@keyframes cgd-shimmer{ to{ background-position:200% center; } }

.cgd-subtitle{
  text-align:center;
  font-size:1.02rem;
  color:var(--cgd-text-mid);
  max-width:560px;
  margin:0 auto 56px;
}

/* ---------- Flujo de pasos con flechas ---------- */

.cgd-flow{
  position:relative;
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items:start;
  gap:0 6px;
}

.cgd-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 6px;
}

.cgd-badge{
  position:relative;
  width:100px; height:100px;
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--cgd-surface-2), var(--cgd-bg-deep));
  border:1px solid var(--cgd-line-strong);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.12) inset,
    0 16px 34px -18px var(--cgd-gold-glow),
    0 4px 14px -6px rgba(0,0,0,.6);
  transition:transform .4s var(--cgd-ease), box-shadow .4s var(--cgd-ease), border-color .4s var(--cgd-ease);
}

.cgd-badge--gold{
  border-color:rgba(212,175,55,.4);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.25) inset,
    0 18px 40px -16px var(--cgd-gold-glow),
    0 4px 14px -6px rgba(0,0,0,.6);
}

.cgd-step:hover .cgd-badge{
  transform:translateY(-4px);
  border-color:rgba(212,175,55,.45);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.3) inset,
    0 22px 46px -16px var(--cgd-gold-glow),
    0 6px 16px -6px rgba(0,0,0,.65);
}







/* ESTILO DEL LINK DE AFILIADO */

.cgd-link-icon{
  /* width:64px;
  height:64px; */
  width:70px;
  height:70px;
}

.cgd-link-icon path{
  fill:var(--cgd-gold-light);
}


.cgd-vector{
  width:56px; height:56px;
  object-fit:contain;
}
.cgd-photo{
  width:86px; height:86px;
  object-fit:contain;
  
}






.cgd-badge-num{
  position:absolute;
  top:-6px; right:-6px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-family:var(--cgd-font-display); font-weight:800; font-size:12px;
  color:#241804;
  background:linear-gradient(160deg, var(--cgd-gold-hi) 0%, var(--cgd-gold-light) 40%, var(--cgd-gold) 100%);
  box-shadow:0 0 0 3px var(--cgd-bg-void), 0 4px 10px -3px rgba(0,0,0,.6);
}

.cgd-badge-num--gold{
  box-shadow:0 0 0 3px var(--cgd-bg-void), 0 0 14px -1px var(--cgd-gold-glow);
}

.cgd-step h3{
  margin:0 0 6px;
  font-family:var(--cgd-font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.35;
  color:var(--cgd-text-hi);
}

.cgd-step p{
  margin:0;
  font-size:12.5px;
  color:var(--cgd-text-low);
}

/* ---------- Flecha (reemplaza la rayita separadora) ---------- */

.cgd-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:50px; /* alinea la flecha con el centro del ícono */
}

.cgd-arrow svg{
  width:26px; height:26px;
  animation:cgd-arrow-move-x 1.8s ease-in-out infinite;
}
@keyframes cgd-arrow-move-x{
  0%,100%{ transform:translateX(0);   opacity:.55; }
  50%    { transform:translateX(7px); opacity:1;   }
}

/* ---------- Panel de ejemplo ---------- */

.cgd-example{
  max-width:560px;
  margin:60px auto 0;
  text-align:center;
  padding:36px 32px;
  border-radius:24px;
  position:relative;
  background: radial-gradient(120% 140% at 50% 0%, rgba(212,175,55,.12), transparent 60%), var(--cgd-surface);
  border:1px solid var(--cgd-line-strong);
}

.cgd-eyebrow-mini{
  font-family:var(--cgd-font-mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cgd-gold-light);
  margin-bottom:14px;
}

.cgd-line{
  font-size:16px;
  color:var(--cgd-text-mid);
  margin:4px 0;
}
.cgd-amount{ font-weight:700; color:var(--cgd-text-hi); }

.cgd-eq{
  color:var(--cgd-gold);
  font-size:18px;
  margin:10px 0;
}

.cgd-big{
  font-family:var(--cgd-font-display);
  font-size:clamp(20px,2.8vw,28px);
  font-weight:800;
  line-height:1.25;
}

/* ---------- Checks ---------- */

.cgd-checks{
  max-width:1140px;
  margin:44px auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.cgd-checks span{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--cgd-font-mono);
  font-size:12.5px;
  color:var(--cgd-text-mid);
  padding:9px 16px;
  border:1px solid var(--cgd-line-strong);
  border-radius:100px;
  background:rgba(255,255,255,.02);
}

.cgd-checks svg{
  width:14px; height:14px;
  color:var(--cgd-gold-light);
  flex-shrink:0;
}

/* ---------- Aparición al hacer scroll ---------- */

/* .cgd-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--cgd-ease), transform .8s var(--cgd-ease);
  transition-delay:calc(var(--d, 0) * 70ms);
}
.cgd-reveal.cgd-in{
  opacity:1;
  transform:translateY(0);
} */

/* ---------- Móvil: la fila se vuelve columna y la flecha apunta hacia abajo ---------- */

@media (max-width:860px){
  .cgd-section{ padding:56px 18px 60px; }
  .cgd-subtitle{ margin-bottom:40px; }

  .cgd-flow{
    grid-template-columns:1fr;
    justify-items:center;
    row-gap:8px;
  }

  .cgd-step{ max-width:280px; }

  .cgd-arrow{ padding-top:6px; padding-bottom:6px; }
  .cgd-arrow svg{
    transform:rotate(90deg);
    animation:cgd-arrow-move-y 1.8s ease-in-out infinite;
  }
  @keyframes cgd-arrow-move-y{
    0%,100%{ transform:rotate(90deg) translateX(0);   opacity:.55; }
    50%    { transform:rotate(90deg) translateX(7px); opacity:1;   }
  }
}

/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce){
  .cgd-gold-text,
  .cgd-arrow svg{ animation:none !important; }
  .cgd-reveal{
    opacity:1; transform:none; transition:none;
  }
}

/* Fondo solo para previsualizar este archivo fuera de tu sitio */
/* .cgd-preview-body{ margin:0; background:#07070B; }
 */











 /* ==================================================================
   WHATSAPP CHAT PREMIUM v2
=================================================================== */

.wa-widget{
  position:fixed; bottom:26px; right:26px; z-index:95;
  display:flex; flex-direction:column; align-items:flex-end;
  font-family:var(--font-body);
   opacity:0; transform:translateY(18px); 
  
  animation:wa-widget-in .7s var(--ease) .4s forwards;
  /* FIX MÓVIL: el contenedor en sí NO debe capturar toques. Aunque la
     burbuja de notificación esté invisible (opacity:0), sigue reservando
     su espacio dentro de este contenedor flex, y sin esto, ese espacio
     "fantasma" se tragaba los toques que iban dirigidos a los botones de
     pago o al video flotante que quedaban justo debajo. Cada elemento
     realmente visible (botón, notificación mostrada, ventana abierta)
     reactiva pointer-events por su cuenta más abajo. */
  pointer-events:none;
}
@keyframes wa-widget-in{ to{ opacity:1; transform:translateY(0); } }

/* ---------------- Botón flotante principal ---------------- */
.wa-toggle{
  width:66px; height:66px; border-radius:50%; border:none; cursor:pointer;
  position:relative;
  background:linear-gradient(135deg,#2be08a,var(--whatsapp) 55%,var(--whatsapp-dark));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 36px -8px rgba(37,211,102,.65), 0 0 0 1px rgba(255,255,255,.06) inset;
  animation:wa-pulse 2.8s ease-in-out infinite;
  opacity:1; visibility:visible;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease), visibility 0s linear 0s;
  pointer-events:auto; /* el botón sí debe responder, aunque su contenedor ya no capture toques */
}
.wa-toggle::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%);
  opacity:0; animation:wa-shine 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes wa-shine{
  0%,55%,100%{ opacity:0; }
  70%{ opacity:1; }
  85%{ opacity:0; }
}
.wa-toggle:hover{ transform:scale(1.08) rotate(-2deg); }
.wa-toggle:active{ transform:scale(.92); }
.wa-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

.wa-icon-msg, .wa-icon-x{
  position:relative; z-index:1; width:28px; height:28px; fill:#fff;
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.wa-icon-x{ position:absolute; opacity:0; transform:rotate(-90deg) scale(.4); }
.wa-icon-msg{ opacity:1; transform:rotate(0) scale(1); }
.wa-widget.open .wa-icon-msg{ opacity:0; transform:rotate(90deg) scale(.4); }
.wa-widget.open .wa-icon-x{ opacity:1; transform:rotate(0) scale(1); }
.wa-widget.open .wa-toggle{
  animation:none; opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(.5) rotate(-15deg);
  box-shadow:0 14px 36px -8px rgba(37,211,102,0);
  transition:transform .3s var(--ease), opacity .3s var(--ease), visibility 0s linear .3s;
}

@keyframes wa-pulse{
  0%,100%{ box-shadow:0 14px 36px -8px rgba(37,211,102,.65), 0 0 0 0 rgba(37,211,102,.5); }
  50%{ box-shadow:0 14px 36px -8px rgba(37,211,102,.65), 0 0 0 16px rgba(37,211,102,0); }
}

.wa-toggle-badge{
  position:absolute; top:-2px; right:-2px; z-index:2;
  width:25px; height:25px;
  box-sizing:border-box;
  border-radius:50%; background:linear-gradient(135deg,#ff6b6b,#e63946);
  color:#fff; font-size:11px; font-weight:800; font-family:var(--font-display);
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-void);
  box-shadow:0 3px 8px -2px rgba(230,57,70,.65);
  animation:wa-badge-pop .45s var(--ease);
}
.wa-toggle-badge.bump{ animation:wa-badge-pop .45s var(--ease); }
@keyframes wa-badge-pop{
  0%{ transform:scale(0) rotate(-20deg); }
  60%{ transform:scale(1.25) rotate(6deg); }
  100%{ transform:scale(1) rotate(0); }
}

/* ---------------- Ventana de chat (glassmorphism) ---------------- */
.wa-window{
  width:346px; max-width:calc(100vw - 48px); border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, rgba(19,20,28,.92), rgba(12,13,19,.96));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid transparent;
  background-clip:padding-box;
  position:relative;
  box-shadow:0 34px 80px -18px rgba(0,0,0,.75);
  margin-bottom:18px; display:flex; flex-direction:column;
  opacity:0; transform:translateY(28px) scale(.9); transform-origin:bottom right;
  pointer-events:none; visibility:hidden;
  transition:opacity .35s var(--ease), transform .42s var(--ease), visibility 0s linear .42s;
}
.wa-window::before{
  content:''; position:absolute; inset:0; border-radius:24px; padding:1px;
  background:linear-gradient(135deg, var(--gold-light), var(--line-strong) 40%, var(--whatsapp) 130%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.55; pointer-events:none;
}
.wa-widget.open .wa-window{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible;
  transition:opacity .35s var(--ease), transform .42s var(--ease), visibility 0s;
}

/* ---------------- Header ---------------- */
.wa-window-header{
  display:flex; align-items:center; gap:12px; padding:16px 14px 16px 16px;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold) 70%);
  position:relative;
}
.wa-window-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; position:relative;
  border:2px solid rgba(255,255,255,.65);
}
.wa-window-avatar img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
}
.wa-avatar-ring{
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); animation:wa-ring 2.4s ease-in-out infinite;
}
@keyframes wa-ring{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.14); opacity:0; } }

.wa-window-info{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; }
.wa-window-name{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:#1a1305; }
.wa-window-status{ font-size:12px; color:#2c2308; display:flex; align-items:center; gap:5px; }
.wa-dot{ width:7px; height:7px; border-radius:50%; background:#1fae52; display:inline-block; animation:wa-dot-blink 1.8s ease-in-out infinite; }
@keyframes wa-dot-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

.wa-mute-btn, .wa-window-close{
  width:30px; height:30px; border-radius:9px; border:none; cursor:pointer; flex-shrink:0;
  background:rgba(0,0,0,.14); color:#1a1305; display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.wa-mute-btn:hover, .wa-window-close:hover{ background:rgba(0,0,0,.25); transform:scale(1.06); }
.wa-mute-btn svg, .wa-window-close svg{ width:15px; height:15px; }
.wa-mute-btn{ position:relative; }
.wa-icon-sound-off{ display:none; }
.wa-mute-btn.muted .wa-icon-sound-on{ display:none; }
.wa-mute-btn.muted .wa-icon-sound-off{ display:block; }

/* ---------------- Cuerpo del chat ---------------- */
.wa-window-body{
  padding:16px; background:transparent; min-height:120px; max-height:320px;
  overflow-y:auto; display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.wa-window-body::-webkit-scrollbar{ width:6px; }
.wa-window-body::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:6px; }

.wa-row{ display:flex; }
.wa-row.in{ justify-content:flex-start; }
.wa-row.out{ justify-content:flex-end; }

.wa-bubble{
  font-size:13.5px; line-height:1.5; padding:11px 14px; border-radius:14px;
  max-width:85%; animation:wa-bubble-in .38s var(--ease) both; position:relative;
}
.wa-row.in .wa-bubble{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-hi);
  border-bottom-left-radius:3px;
}
.wa-row.out .wa-bubble{
  background:linear-gradient(135deg,#2be08a,var(--whatsapp)); color:#fff;
  border-bottom-right-radius:3px;
}
@keyframes wa-bubble-in{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }

.wa-time{ display:block; font-size:10px; color:var(--text-low); margin-top:4px; text-align:right; }
.wa-row.in .wa-time{ color:var(--text-low); }
.wa-row.out .wa-time{ color:rgba(255,255,255,.75); }

.wa-typing{
  display:inline-flex; align-items:center; gap:4px; background:var(--surface-2);
  border:1px solid var(--line); padding:12px 16px; border-radius:14px; border-bottom-left-radius:3px;
  width:fit-content; animation:wa-bubble-in .3s var(--ease) both;
}
.wa-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--text-mid);
  animation:wa-typing-bounce 1.1s ease-in-out infinite;
}
.wa-typing span:nth-child(2){ animation-delay:.15s; }
.wa-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes wa-typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

.wa-quick-replies{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
.wa-quick-replies:empty{ display:none; }
.wa-chip{
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text-mid);
  font-size:12px; font-weight:500; padding:7px 12px; border-radius:999px; cursor:pointer;
  transition:all .25s var(--ease); white-space:nowrap;
}
.wa-chip:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-1px); }

/* ---------------- Input ---------------- */
.wa-window-input{
  display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); background:rgba(19,20,28,.6);
}
.wa-window-input input{
  flex:1; background:var(--bg-deep); border:1px solid var(--line-strong); border-radius:12px;
  color:var(--text-hi); font-size:13px; padding:11px 13px; outline:none; min-width:0;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-window-input input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow); }
.wa-window-input input::placeholder{ color:var(--text-low); }

.wa-send-btn{
  width:40px; height:40px; border-radius:11px; border:none; cursor:pointer; flex-shrink:0;
  background:linear-gradient(135deg,#2be08a,var(--whatsapp));
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.wa-send-btn:disabled{ opacity:.4; cursor:not-allowed; }
.wa-send-btn:not(:disabled):hover{ transform:scale(1.08); }
.wa-send-btn:not(:disabled):active{ transform:scale(.9); }
.wa-send-btn svg{ width:17px; height:17px; fill:#fff; transition:transform .45s var(--ease), opacity .45s var(--ease); }
.wa-send-btn.sent svg{ transform:translate(16px,-16px) scale(.3) rotate(20deg); opacity:0; }

/* ---------------- Notificación periódica (con foto y contador) ---------------- */
.wa-notify{
  position:relative; display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, rgba(19,20,28,.95), rgba(12,13,19,.98));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-strong); color:var(--text-hi);
  font-size:13px; font-weight:500; padding:12px 34px 12px 12px; border-radius:16px;
  margin-bottom:16px; max-width:270px; box-shadow:0 16px 38px -12px rgba(0,0,0,.65); cursor:pointer;
  opacity:0; transform:translateY(10px) scale(.94); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.wa-notify.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.wa-widget.open .wa-notify{ display:none; }

.wa-notify-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; position:relative;
  border:2px solid var(--gold);
}
.wa-notify-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.wa-notify-avatar .wa-notify-count{
  position:absolute; top:-3px; right:-3px;
  width:20px; height:20px; padding:0; border-radius:50%; box-sizing:border-box;
  background:linear-gradient(135deg,#ff6b6b,#e63946); color:#fff;
  font-size:9px; font-weight:800; font-family:var(--font-display); line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-void);
  box-shadow:0 2px 6px -1px rgba(230,57,70,.6);
}

.wa-notify-close{
  position:absolute; top:6px; right:8px; width:20px; height:20px; border:none; background:none;
  color:var(--text-low); font-size:16px; line-height:1; cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:color .2s var(--ease), background .2s var(--ease);
}
.wa-notify-close:hover{ color:var(--text-hi); background:var(--surface-2); }

/* ---------------- Responsive ---------------- */
@media (max-width: 520px){
  .wa-widget{ right:16px; bottom:16px; }

  /* Notificación de WhatsApp con foto: se activa también en celular a propósito (antes estaba oculta aquí) */
 /* notificación activada también en celular */
  /* .wa-notify{ display:none !important; } */

  .wa-window{ width:calc(100vw - 32px); }
  .wa-window-body{ max-height:46vh; }
}
@media (prefers-reduced-motion: reduce){
  .wa-toggle, .wa-avatar-ring, .wa-dot, .wa-typing span, .wa-toggle::before, .wa-widget{ animation:none !important; }
}
/* ============================================================
   VIDEO FLOTANTE AL HACER SCROLL (mini-reproductor que sigue)
   ============================================================ */

.video-sticky-zone{ position:relative; }

.video-frame.is-floating{
  position: fixed;
  top: auto;
  right: auto;
  bottom: 20px;
  left: 20px;
  width: 280px;
  max-width: 40vw;
  margin: 0;
  z-index: 90;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.75), 0 0 30px -6px var(--gold-glow);
  animation: borderflow 10s ease infinite, video-float-in .5s var(--ease);
}

@keyframes video-float-in{
  from{ opacity:0; transform:translateY(16px) scale(.94); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.video-frame.is-floating.is-video-hidden{ display:none; }
.video-frame.is-floating.is-passthrough{
  pointer-events: none;
}
/* FIX: is-passthrough deja pasar el toque hacia las tarjetas de la galería
   que puedan quedar debajo del video flotante — pero antes esto también
   apagaba el propio reproductor (play/pausa dentro del video y los
   botones de cerrar "×" y agrandar), que es justamente lo que fallaba.
   Reactivamos el toque solo en las partes realmente interactivas del
   video; el resto del marco (borde/padding) sigue dejando pasar el clic. */
.video-frame.is-floating.is-passthrough .video-inner,
.video-frame.is-floating.is-passthrough .video-float-close,
.video-frame.is-floating.is-passthrough .video-float-expand{
  pointer-events: auto;
}

.video-frame.is-floating .play-btn{ width:46px; height:46px; }
.video-frame.is-floating .play-btn svg{ width:16px; height:16px; margin-left:2px; }

.video-float-close{
  display:none;
  position:absolute;
  top:-13px; right:-13px;
  width:30px; height:30px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
  color:#241804;
  font-size:18px;
  line-height:1;
  align-items:center;
  justify-content:center;
  z-index:6;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.65);
  transition: transform .25s var(--ease);
}
.video-frame.is-floating .video-float-close{ display:flex; }
.video-float-close:hover{ transform:scale(1.12); }

@media (max-width: 520px){
  .video-frame.is-floating{
    width:160px;
    max-width:46vw;
    left:14px;
    bottom:16px;
  }
  .video-frame.is-floating .play-btn{ width:36px; height:36px; }
  .video-frame.is-floating .play-btn svg{ width:13px; height:13px; }

  /* .video-frame.is-floating .video-float-expand{ font-size:23px; } */
  /* .video-frame.is-floating .video-float-expand svg{ width:19px; height:19px; } */
  .video-frame.is-floating .video-float-expand svg{ width:15px; height:15px; }
}


/* Arregla el video flotante: lo levanta por encima de las demás secciones
   mientras está en modo flotante, para que sí se puedan usar sus controles */
body.has-floating-video .video-section{
  z-index: 999;
}




/* video florante icono de agrandaer */
.video-float-expand{
  display:none;
  position:absolute;
  top:-13px; left:-13px;
  width:30px; height:30px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
  color:#241804;
  font-size:15px;
  line-height:1;
  align-items:center;
  justify-content:center;
  z-index:6;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.65);
  transition: transform .25s var(--ease);
}
.video-frame.is-floating .video-float-expand{ display:flex; }
.video-float-expand:hover{ transform:scale(1.12); }





/* Achica el botón de play grande en celulares, antes de darle play al video  con icino amarillo*/
  @media (max-width: 520px){
  .video-facade .play-btn{ width:66px; height:66px; }
  .video-facade .play-btn svg{ width:22px; height:22px; margin-left:3px; }
}  





 /* version 2 del boton de play en celulares  */
 /* @media (max-width: 520px){
  .video-facade .play-btn{
    width:66px;
    height:66px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(233,207,122,.65);
    box-shadow: 0 10px 30px -6px rgba(0,0,0,.5);
  }
  .video-facade .play-btn svg{
    width:20px;
    height:20px;
    margin-left:3px;
    fill: #e9cf7a;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.8));
  }
}  */

/* version 3 del boton de play en celulares */
/* Botón de play en móvil: circulo tipo "vidrio" (semi-transparente + desenfoque)
   con borde e ícono BLANCOS (no dorados) para que resalte contra la miniatura,
   que es dorada — dorado sobre dorado se camufla y pierde visibilidad.
   En laptop se queda igual, esto solo aplica en pantallas angostas. */
/* @media (max-width: 520px){
  .video-facade .play-btn{
    width:66px;
    height:66px;
    background: rgba(20,15,5,.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 5px rgba(255,255,255,.08), 0 10px 30px -6px rgba(0,0,0,.6);
  }
  .video-facade .play-btn svg{
    width:20px;
    height:20px;
    margin-left:3px;
    fill: #fff;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.9));
  }
}
 */


/* version 4 del boton de play en celulares */
 /* Botón de play en móvil: anillo fino sin relleno ni desenfoque (así la
   miniatura se ve nítida detrás), con las ondas pulsantes de siempre,
   ahora en tono crema para que combinen con el anillo. */
/* @media (max-width: 520px){
  .video-facade .play-btn{
    width:56px;
    height:56px;
    background: transparent;
    border: 1.5px solid rgba(255,241,214,.85);
    animation: pulse-ring-cream 2.4s ease-out infinite;
  }
  .video-facade .play-btn svg{
    width:16px;
    height:16px;
    margin-left:2px;
    fill: #fff1d6;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.9));
  }
  @keyframes pulse-ring-cream{
    0%{ box-shadow:0 0 0 0 rgba(255,241,214,.55), 0 4px 16px -4px rgba(0,0,0,.55); }
    70%{ box-shadow:0 0 0 22px rgba(255,241,214,0), 0 4px 16px -4px rgba(0,0,0,.55); }
    100%{ box-shadow:0 0 0 0 rgba(255,241,214,0), 0 4px 16px -4px rgba(0,0,0,.55); }
  }
} */




@media (max-width: 520px){
  .about{ padding-top:48px; }
  body.cta-visible .about{ padding-top:100px; }
}



/* Movimiento de lado a lado del video (rápido y suave, sin afectar el brillo de colores) */
/* @keyframes wiggleVideo{
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-7px); }
  50%  { transform: translateX(6px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.video-frame.wiggle{
  animation: borderflow 10s ease infinite, wiggleVideo 1.2s ease-in-out 1;
} */





/* ============================================================
   MOVIMIENTO PREMIUM DEL VIDEO AL APARECER
   4 efectos combinados, disparados juntos al hacer scroll:
   1) Lado a lado con rebote elástico + zoom + sombra dorada
   2) Anillo dorado que se expande hacia afuera
   3) Destello de luz que cruza el video por dentro
   No afecta el brillo de colores del borde (sigue aparte, siempre activo)
   ============================================================ */

/* @keyframes wiggleVideo{
  0%   { transform: translateX(0) scale(1) rotate(0deg);
         box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow); }
  15%  { transform: translateX(-22px) scale(1.045) rotate(-1.4deg);
         box-shadow: 0 42px 105px -20px rgba(0,0,0,.78), 0 0 150px 30px rgba(212,175,55,.9); }
  32%  { transform: translateX(18px) scale(1.02) rotate(1.1deg);
         box-shadow: 0 38px 95px -20px rgba(0,0,0,.76), 0 0 120px 20px var(--gold-glow); }
  50%  { transform: translateX(-11px) scale(1.03) rotate(-0.7deg);
         box-shadow: 0 40px 100px -20px rgba(0,0,0,.77), 0 0 130px 24px var(--gold-glow); }
  68%  { transform: translateX(7px) scale(1.01) rotate(0.4deg); }
  85%  { transform: translateX(-3px) scale(1.005) rotate(-0.2deg); }
  100% { transform: translateX(0) scale(1) rotate(0deg);
         box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow); }
}
.video-frame.wiggle{
  animation: borderflow 10s ease infinite, wiggleVideo 1.6s cubic-bezier(.34,1.56,.64,1) 1;
} */

/* Anillo dorado que se expande al aparecer */
/* .video-frame::after{
  content:'';
  position:absolute; inset:-3px;
  border-radius:24px;
  border:2px solid var(--gold-light);
  opacity:0;
  pointer-events:none;
}
.video-frame.wiggle::after{
  animation: ringPulse 1.6s cubic-bezier(.16,1,.3,1) 1;
}
@keyframes ringPulse{
  0%   { opacity:.9; transform:scale(1); }
  100% { opacity:0; transform:scale(1.18); }
} */

/* Destello de luz que recorre el video por dentro */
/* .video-inner::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-150%);
  opacity:0;
  pointer-events:none;
  z-index:5;
}
.video-frame.wiggle .video-inner::after{
  animation: shineSweep 1.4s ease-in-out 1;
  animation-delay:.15s;
}
@keyframes shineSweep{
  0%   { transform:translateX(-150%); opacity:0; }
  15%  { opacity:1; }
  55%  { opacity:1; }
  100% { transform:translateX(150%); opacity:0; }
} */




/* ============================================================
   MOVIMIENTO PREMIUM DEL VIDEO AL APARECER
   1) Lado a lado con rebote elástico + zoom + sombra dorada
   2) Onda de resplandor dorado que se expande hacia afuera (suave, sin bordes)
   3) Destello de luz que cruza el video por dentro
   No afecta el brillo de colores del borde (sigue aparte, siempre activo)
   ============================================================ */

@keyframes wiggleVideo{
  0%   { transform: translateX(0) scale(1) rotate(0deg);
         box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow); }
  15%  { transform: translateX(-22px) scale(1.045) rotate(-1.4deg);
         box-shadow: 0 42px 105px -20px rgba(0,0,0,.78), 0 0 150px 30px rgba(212,175,55,.9); }
  32%  { transform: translateX(18px) scale(1.02) rotate(1.1deg);
         box-shadow: 0 38px 95px -20px rgba(0,0,0,.76), 0 0 120px 20px var(--gold-glow); }
  50%  { transform: translateX(-11px) scale(1.03) rotate(-0.7deg);
         box-shadow: 0 40px 100px -20px rgba(0,0,0,.77), 0 0 130px 24px var(--gold-glow); }
  68%  { transform: translateX(7px) scale(1.01) rotate(0.4deg); }
  85%  { transform: translateX(-3px) scale(1.005) rotate(-0.2deg); }
  100% { transform: translateX(0) scale(1) rotate(0deg);
         box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -10px var(--gold-glow); }
}
.video-frame.wiggle{
  animation: borderflow 10s ease infinite, wiggleVideo 1.6s cubic-bezier(.34,1.56,.64,1) 1;
}

/* Onda de resplandor dorado, sin bordes duros, sigue la forma redondeada del marco */
.video-frame::after{
  content:'';
  position:absolute; inset:-3px;
  border-radius:24px;
  box-shadow: 0 0 0 0 rgba(212,175,55,.6);
  opacity:0;
  pointer-events:none;
}
.video-frame.wiggle::after{
  animation: glowWave 1.7s cubic-bezier(.16,1,.3,1) 1;
}
@keyframes glowWave{
  0%   { opacity:.9; box-shadow: 0 0 0 0 rgba(212,175,55,.6), 0 0 40px 10px rgba(212,175,55,.5); }
  55%  { opacity:.55; box-shadow: 0 0 0 24px rgba(212,175,55,0), 0 0 80px 24px rgba(212,175,55,.18); }
  100% { opacity:0;  box-shadow: 0 0 0 34px rgba(212,175,55,0), 0 0 100px 34px rgba(212,175,55,0); }
}

/* Destello de luz que recorre el video por dentro */
.video-inner::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-150%);
  opacity:0;
  pointer-events:none;
  z-index:5;
}
.video-frame.wiggle .video-inner::after{
  animation: shineSweep 1.4s ease-in-out 1;
  animation-delay:.15s;
}
@keyframes shineSweep{
  0%   { transform:translateX(-150%); opacity:0; }
  15%  { opacity:1; }
  55%  { opacity:1; }
  100% { transform:translateX(150%); opacity:0; }
}








@media (max-width: 768px){
  .video-frame.wiggle{
    animation: borderflow 10s ease infinite, wiggleVideo-mobile 1.4s cubic-bezier(.34,1.56,.64,1) 1;
  }
  @keyframes wiggleVideo-mobile{
    0%   { transform: translateX(0) scale(1) rotate(0deg); }
    15%  { transform: translateX(-14px) scale(1.025) rotate(-1deg); }
    32%  { transform: translateX(12px) scale(1.012) rotate(0.8deg); }
    50%  { transform: translateX(-7px) scale(1.015) rotate(-0.5deg); }
    68%  { transform: translateX(4px) scale(1.005); }
    85%  { transform: translateX(-2px); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
  }
  .video-frame.wiggle::after{ animation:none; opacity:0; }
  .video-frame.wiggle .video-inner::after{ animation:none; opacity:0; }
}

/* Lista de beneficios dentro de la tarjeta, con check dorado en SVG */
.card-features{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.card-features li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  color:var(--text-mid);
  line-height:1.4;
}
.card-features li svg{
  width:17px; height:17px;
  flex-shrink:0;
   margin-top:2px;
  color: var(--gold-light);
  stroke: var(--gold-light);
  background:none;
  border-radius:0;
  padding:0;
  box-sizing:border-box;
}


/* Desplegable "Bonos de regalo" dentro de la tarjeta */
.card-bonus{ margin-bottom:14px; }
.card-bonus summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  color:var(--gold-light);
  padding:6px 0;
}
.card-bonus summary::-webkit-details-marker{ display:none; }
.card-bonus summary::after{
  content:'▾';
  font-size:14px;
  color:var(--gold-light);
  transition: transform .3s var(--ease);
}
.card-bonus[open] summary::after{
  transform: rotate(180deg);
}


/* Sección "Beneficios" dentro de la tarjeta */
.card-benefits-title{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:8px;
}
/* "Ver más" beneficios: se expande suave con grid-template-rows, sin JS midiendo alturas */
.card-more{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.16,.84,.44,1);
}
.card-more-inner{
  overflow: hidden;
  min-height: 0;
}
.card-benefits.is-open .card-more{
  grid-template-rows: 1fr;
}
.card-more-inner ul{
  padding-top: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease .05s, transform .35s ease .05s;
}
.card-benefits.is-open .card-more-inner ul{
  opacity: 1;
  transform: translateY(0);
}

.card-more-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0 4px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--gold-light);
  transition: color .2s var(--ease);
}
.card-more-toggle:hover{
  color: var(--gold-hi);
}
.card-more-chevron{
  width: 14px;
  height: 14px;
  transition: transform .35s var(--ease);
}
.card-benefits.is-open .card-more-chevron{
  transform: rotate(180deg);
}
.card-meta--price-only{
  justify-content:flex-end;
}



/* Precio grande y prominente, justo debajo del título de la tarjeta */
.card-price{
  font-family:var(--font-display);
  font-weight:800;
  font-size:32px;
  color:var(--text-hi);
  display:flex;
  align-items:baseline;
  gap:4px;
  margin:4px 0 12px;
}
.card-price .sign{
  background:linear-gradient(120deg, var(--gold-deep), var(--gold-hi), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto;
  animation: shimmer 4s linear infinite;
}
.card-price .usd{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:400;
  color:var(--text-low);
  margin-left:2px;
}


/* Centra el título + precio, y le da al precio un brillo dorado premium */
/* Centra el título + precio, con efecto metálico dorado 3D */
.card-headline{ text-align:center; }
.card-headline .card-price{
  justify-content:center;
  font-size:46px;
  font-weight:900;
  letter-spacing:-.01em;
  margin-top:6px;
}
.card-headline .card-price .sign,
.card-headline .card-price .amount{
  background: linear-gradient(180deg, #fff4d6 0%, #ffd97a 18%, #f0b94a 38%, #d99a2b 55%, #c17f1e 72%, #f0b94a 88%, #ffedb0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:
    0 1px 0 #a6741a,
    0 2px 0 #986915,
    0 3px 0 #8a5e12,
    0 4px 1px rgba(0,0,0,.3),
    0 5px 6px rgba(0,0,0,.35);
  animation:none;
}
/* ===== Métodos de pago (tarjeta Afiliado Automático) ===== */
.payment-methods{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-row{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
}

.payment-badge{
  cursor: pointer;
  touch-action: manipulation;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
   justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  
}

.payment-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 26px;
  flex-shrink: 0;
}

.payment-icon img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.payment-icon--btc{ height: 22px; }

.payment-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-hi);
  text-transform: lowercase;
  line-height: 1.2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-badge--btc .payment-label{ text-transform: uppercase; }

.payment-number{
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-mid);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-bank{
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-hi);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.payment-bank img{ flex-shrink: 0; }

.payment-bank:hover{
  border-color: var(--gold);
  background: rgba(212,175,55,.06);
}

.payment-paypal{
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 12px;
  background: #FFC439;
  /* box-shadow: 0 10px 24px -10px rgba(255,196,57,.55); */
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.payment-paypal:hover{
  background: #F2BA36;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(255,196,57,.6);
}

.payment-paypal-text{
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 20px;
  letter-spacing: -.5px;
  color: #003087;
}

.payment-paypal-text--accent{ color: #009cde; }

.payment-cards-strip{
  display: flex;
  justify-content: center;
  padding: 8px 0 2px;
}

.payment-cards-strip img{
  height: 20px;
  width: auto;
  border-radius: 4px;
  overflow: hidden;
}

/* ---- Mobile: pedido explícito del cliente ---- */
@media (max-width: 520px){
  /* Bitcoin y Yape van en una sola línea, uno al lado del otro */
  .payment-row{
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .payment-badge{
    padding: 9px 8px;
    gap: 6px;
  }
  .payment-icon{ width: 18px; height: 22px; }
  .payment-icon--btc{ height: 18px; }
  .payment-label{ font-size: 11.5px; }
  .payment-number{ font-size: 10.5px; }

  /* Transferencia bancaria: ícono y texto centrados */
  .payment-bank{
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   POPUPS DE PAGO — Bitcoin / Yape / Transferencia bancaria
   Un solo modal reutilizado por método de pago, centrado con
   position:fixed + flex (funciona igual en desktop y móvil,
   sin necesidad de hacer scroll para centrar).
   ============================================================ */

.pm-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(4,4,8,.78);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity .25s var(--ease);
}

.pm-overlay.is-open{
  display: flex;
}

.pm-overlay.is-visible{
  opacity: 1;
}

.pm-modal{
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  padding: 28px 24px 24px;
  text-align: center;
  color: var(--text-hi);
  font-family: var(--font-body);
  box-shadow: 0 20px 60px -15px rgba(0,0,0,.6);
  transform: translateY(18px) scale(.97);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.pm-overlay.is-visible .pm-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.pm-modal--btc{
  background:
    radial-gradient(ellipse at 80% 100%, rgba(255,243,206,.25), transparent 60%),
    linear-gradient(155deg, var(--surface-2), var(--bg-deep) 70%);
  border: 1px solid var(--gold-glow);
}

.pm-modal--yape{
  background:
    radial-gradient(ellipse at 80% 0%, var(--violet-glow), transparent 60%),
    linear-gradient(155deg, var(--surface-2), var(--bg-deep) 70%);
  border: 1px solid rgba(110,90,224,.45);
}

.pm-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: var(--text-hi);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.pm-close:hover{
  background: rgba(255,255,255,.16);
  transform: scale(1.08);
}

.pm-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--gold-light);
  margin: 4px 0 16px;
  padding-right: 20px;
}

.pm-modal--yape .pm-title{ color: #E9E3FF; }

.pm-qr{
  width: 220px;
  max-width: 80%;
  margin: 0 auto 16px;
  border-radius: 12px;
  display: block;
}

.pm-text{
  font-size: 13.5px;
  color: var(--text-mid);
  margin-bottom: 12px;
  line-height: 1.5;
}

.pm-yape-number{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-hi);
  margin-bottom: 4px;
}

.pm-bank-details{
  text-align: left;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13.5px;
  line-height: 1.7;
}

.pm-bank-details p{ margin: 0; }

.pm-copy-row{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.pm-copy-input{
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,.25);
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

.pm-copy-btn{
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  background: linear-gradient(var(--gold), var(--gold-deep));
  color: #241804;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.pm-copy-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px var(--gold-glow);
}

.pm-copied{
  display: none;
  color: #58e07a;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

.pm-copied.is-shown{ display: block; }

.pm-voucher{
  font-size: 13px;
  color: var(--gold-light);
  font-weight: 600;
  line-height: 1.5;
  margin-top: 6px;
}

.pm-modal--yape .pm-voucher{ color: #C9BCFF; }

/* Hace evidente que los botones de pago dentro de la tarjeta son clicables */
.payment-badge--btc,
.payment-badge--yape{
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.payment-badge--btc:hover,
.payment-badge--yape:hover{
  border-color: var(--gold);
  background: rgba(212,175,55,.06);
}

@media (max-width: 480px){
  .pm-modal{
    padding: 24px 18px 20px;
    max-width: 100%;
  }
  .pm-qr{ width: 190px; }
}





/* vermas de los epaginas de promocion */

/* .li-extra{ display:none; }
.li-extra.is-shown{ display:inline; }
.li-ver-mas{
  background:none;
  border:none;
  padding:0;
  margin-left:4px;
  color: var(--gold-light);
  font-weight:600;
  font-size:inherit;
  font-family:inherit;
  cursor:pointer;
  text-decoration:underline;
  white-space:nowrap;
} */



/* -------------------------- ribon ------------ */
.ribbon-pack{
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
}
.ribbon-pack span{
  position: absolute;
  top: 36px;
  right: -34px;
  width: 170px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff5b5b, #c8102e);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 4px 14px -2px rgba(0,0,0,.5);
}




/* tamaño de paypal imagen */
.payment-paypal img{
  height: 30px;
  width: auto;
  display: block;
}




/* estilo para la cotizacion de vivisa de soles a dolares para cotizar */

.pm-amount{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  color: var(--text-hi);
}



 /* subtitulo del popo up de transferencia y yape   enviar a  */
.pm-subtitle{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #d8d4e8;
  margin: 4px 0 10px;
  text-align: center;
}




/* animacion de parpadeo de popup de los titulos  de transferencia y yape*/ 
.pm-voucher.is-pulsing{
  animation: pmVoucherPulse 1.3s ease-in-out 3;
}
@keyframes pmVoucherPulse{
  0%, 100% { text-shadow: 0 0 0 rgba(233,207,122,0); }
  50% { text-shadow: 0 0 14px rgba(233,207,122,.85); }
}





.pm-amount.is-flashing{
  animation: pmAmountFlash 1.6s ease-out 1;
}
@keyframes pmAmountFlash{
  0% { box-shadow: 0 0 0 0 rgba(233,207,122,.55); }
  100% { box-shadow: 0 0 0 10px rgba(233,207,122,0); }
}