/* =============================================
   CanalProfit — Servicios en secciones separadas
   - 4 secciones (Weltrade, VTMarket, Bancus, iATrade)
   - Flecha moderna para continuar abajo
   - Listo para scroll-snap y full viewport
   ============================================= */

/* --------- Variables base (heredan de tu CSS) --------- */
:root{
  --neon-primary:#00f3ff; --neon-secondary:#ff00ff; --neon-accent:#39ff14;
  --dark-bg:#0a0a1a; --darker-bg:#050510; --card-bg:rgba(16,18,37,.6);
      /* colores estilo Weltrade */
    --wel-1:#00b8d9; /* cyan */
    --wel-2:#0066ff; /* azul */
    --success:#14f195;
    --danger:#ff5470;
  }
}

/* --------- Contenedor general con snap --------- */
.snap-container{scroll-snap-type:y mandatory; overflow-y:auto; height:100vh;}
.snap-section{scroll-snap-align:start; min-height:100vh; position:relative;}

/* --------- Secciones de servicio --------- */
.service-section{display:flex; align-items:center; min-height:100vh; padding:96px 20px 120px;}
.service-wrap{max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:40px; align-items:center;}
.service-copy h2{font-size:2.2rem; margin:0 0 12px; color:#fff}
.service-copy p{color:#cfe9ff; line-height:1.65}
.service-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.service-media{display:flex; align-items:center; justify-content:center}
.service-media img{max-width:88%; height:auto; filter:drop-shadow(0 20px 40px rgba(0,243,255,.12))}

/* --------- Minis (stats / tags) --------- */
.service-meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.badge-chip{border:1px solid rgba(0,243,255,.35); color:#aeefff; padding:6px 10px; border-radius:999px; font-size:.82rem; backdrop-filter:blur(6px)}

/* --------- Estilos por servicio (acento) --------- */
.service-section.weltrade{background:linear-gradient(180deg, rgba(0,243,255,.06), rgba(0,0,0,0));}
.service-section.vtmarket{background:linear-gradient(180deg, rgba(255,0,255,.06), rgba(0,0,0,0));}
.service-section.bancus{background:linear-gradient(180deg, rgba(57,255,20,.06), rgba(0,0,0,0));}
.service-section.iatrade{background:linear-gradient(180deg, rgba(0,136,255,.06), rgba(0,0,0,0));}

/* --------- Tarjeta quick-preview (opcional) --------- */
.preview-card{background:var(--card-bg); border-left:4px solid var(--neon-primary); border-radius:14px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.preview-card h6{margin:0 0 6px}

/* --------- Flecha moderna siguiente sección --------- */
.scroll-next{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none}
.scroll-next span{font-size:.8rem; color:#9fdfff; letter-spacing:.08em}
.down-arrow{width:34px; height:34px; border:1.5px solid rgba(0,243,255,.5); border-radius:999px; display:grid; place-items:center; box-shadow:0 0 18px rgba(0,243,255,.15) inset; position:relative;}
.down-arrow::before{content:""; width:10px; height:10px; border-right:2px solid #00e6ff; border-bottom:2px solid #00e6ff; transform:rotate(45deg); position:absolute; top:10px; animation:chev 1.4s ease-in-out infinite}
@keyframes chev{0%{transform:translateY(0) rotate(45deg)} 50%{transform:translateY(6px) rotate(45deg)} 100%{transform:translateY(0) rotate(45deg)}}

/* --------- CTA neon --------- */
.btn-neon{display:inline-block; padding:12px 20px; border-radius:28px; border:1px solid var(--neon-primary); color:var(--neon-primary); text-transform:uppercase; letter-spacing:.06em; background:rgba(0,243,255,.08); box-shadow:0 0 15px rgba(0,243,255,.25); transition:.25s}
.btn-neon:hover{background:var(--neon-primary); color:#021217; box-shadow:0 0 22px var(--neon-primary), 0 0 36px var(--neon-primary)}

/* --------- Responsive --------- */
@media (max-width: 992px){
  .service-wrap{grid-template-columns:1fr; text-align:center}
  .service-copy{order:2}
  .service-media{order:1}
  .service-media img{max-width:78%}
}
@media (max-width: 576px){
  .service-section{padding:96px 16px 120px}
  .service-copy h2{font-size:1.7rem}
}


    :root { --neon-primary:#00f3ff; --neon-secondary:#ff00ff; --neon-accent:#39ff14; --dark-bg:#0a0a1a; --darker-bg:#050510; --card-bg:rgba(16,18,37,.6);}    
    body{background:linear-gradient(180deg,var(--dark-bg),var(--darker-bg)); color:#e9f6ff}
    .trading-background{position:fixed; inset:0; z-index:-1; overflow:hidden}
    .trading-element{position:absolute; opacity:.15}
    .candle{width:4px; border-radius:2px}
    .chart-line{height:2px; background:linear-gradient(90deg,transparent,var(--neon-secondary),transparent); transform-origin:left center}
    .financial-number{color:var(--neon-accent); font:12px 'Courier New',monospace; opacity:.7}
    .top-menu{display:flex; justify-content:space-between; align-items:center; padding:15px 5%}
    .top-menu img{height:40px; filter:drop-shadow(0 0 5px var(--neon-primary))}
    .animated-text-container{text-align:center; flex-grow:1}
    #animatedHeaderText{font-size:1.3rem; background:linear-gradient(45deg,var(--neon-primary),var(--neon-secondary)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:bold}
    .snap-section{min-height:100vh; display:flex; align-items:center; padding:80px 0; position:relative; overflow:hidden}
    .titulo-gradient{font-size:3rem; background:linear-gradient(45deg,var(--neon-primary),var(--neon-secondary),var(--neon-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:bold; margin-bottom:1rem; text-shadow:0 0 10px rgba(0,243,255,.5)}
    h2{font-size:1.8rem; margin-bottom:1.2rem; color:#fff; position:relative}
    h2:after{content:''; position:absolute; bottom:-10px; left:0; width:60px; height:3px; background:linear-gradient(90deg,var(--neon-primary),transparent)}
    .btn-neon{display:inline-block; padding:12px 24px; border-radius:30px; text-decoration:none; font-weight:bold; letter-spacing:.5px; text-transform:uppercase; background:rgba(0,243,255,.08); color:var(--neon-primary); border:1px solid var(--neon-primary); box-shadow:0 0 15px rgba(0,243,255,.25); transition:.3s}
    .btn-neon:hover{background:var(--neon-primary); color:#001018; box-shadow:0 0 22px var(--neon-primary), 0 0 40px var(--neon-primary)}
    .minichart-card{background:var(--card-bg); border-radius:12px; padding:14px; border-left:4px solid #00ff00; backdrop-filter:blur(6px); transition:.25s; box-shadow:0 5px 15px rgba(0,0,0,.25)}
    .minichart-card:hover{transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,243,255,.2)}
    .image-floating{animation:floating 3s ease-in-out infinite; filter:drop-shadow(0 10px 20px rgba(0,243,255,.3))}
    @keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
    .scroll-strip{overflow:hidden; position:relative; background:rgba(0,243,255,.08); border-radius:30px; padding:10px 0; margin:20px 0}
    .scroll-track{display:flex; white-space:nowrap}
    .scroll-track span{padding:0 20px; font-weight:700; color:var(--neon-primary)}
    .site-footer{background:var(--darker-bg); padding:40px 0; text-align:center; border-top:1px solid rgba(0,243,255,.2)}
    .cursor-dot{width:8px; height:8px; background:var(--neon-primary); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .1s}
    .cursor-outline{width:40px; height:40px; border:2px solid var(--neon-primary); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:all .2s ease-out}
    .card-link{display:block; text-decoration:none; color:inherit}
    .service-card .btn-neon{padding:10px 16px; font-size:.85rem}
  /* 2) BOTONES: igual al look de la sección Weltrade */
  .btn-neon{
    --h:56px;
    height:var(--h);
    display:inline-flex;align-items:center;justify-content:center;
    padding:0 28px;border:0;border-radius:14px;
    color:#fff;font-weight:800;letter-spacing:.3px;text-decoration:none;
    background:linear-gradient(135deg,var(--wel-1) 0%,var(--wel-2) 65%);
    box-shadow:0 8px 22px #0066ff55,inset 0 0 0 1px #ffffff22;
    transition:filter .15s ease, transform .12s ease;
  }
  .btn-neon:hover{filter:brightness(1.08)}
  .btn-neon:active{transform:translateY(1px)}

  /* variante ghost si la usas en algún lado */
  .btn-neon.ghost{
    background:#0f172a;border:1px solid #1b2a44;color:#e8f7ff;
    box-shadow:none;
  }
  .btn-neon.ghost:hover{box-shadow:0 0 0 3px #40c4ff55}

  /* 3) PROFIT badge: texto visible y con color por signo */
  .iatrade .ia-badge{
    position:absolute;right:0;top:-18px;transform:translateY(-50%);
    display:inline-flex;gap:10px;align-items:center;
    padding:10px 16px;border-radius:999px;
    background:radial-gradient(120px 80px at 0% 50%, #0c1a17 0, #081016 60%);
    border:1px solid #114a3f;
    box-shadow:inset 0 0 18px #0a2b22, 0 6px 16px #0008;
  }
  .ia-badge-label{opacity:.85;font-weight:700;letter-spacing:.4px;color:#cde9e4}
  .ia-badge-value{font-weight:900}
  .ia-badge-value.pos{color:var(--success)}
  .ia-badge-value.neg{color:var(--danger)}

  /* Por si el container de tarjetas necesita contraste para la pill de cambio */
  .iatrade .market-card .trend.pill{
    background:#0b1422;border:1px solid #22324f;border-radius:999px;
    padding:6px 10px;font-weight:800
  }
  .iatrade .market-card.trend-up .trend{color:var(--success)}
  .iatrade .market-card.trend-down .trend{color:var(--danger)}