/* ============================================================
   Line by Fraxuo — components.css  (botones, cards, chips, cursor, loader)
   ============================================================ */

/* ---------- Botones ---------- */
.line-btn{
  --b: var(--senal);
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:500; font-size:.98rem; letter-spacing:-.01em;
  padding:.85rem 1.5rem; border-radius:100px; cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  will-change:transform; white-space:nowrap;
}
.line-btn--lg{ padding:1.05rem 2rem; font-size:1.05rem; }
.line-btn--primary{ color:#fff; background:linear-gradient(180deg,var(--senal-claro),var(--senal)); box-shadow:0 10px 30px -10px rgba(77,107,255,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.line-btn--primary:hover{ box-shadow:0 16px 40px -10px rgba(77,107,255,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.line-btn--ghost{ color:var(--color-text); background:rgba(255,255,255,.03); border-color:var(--linea-media); backdrop-filter:blur(6px); }
.line-btn--ghost:hover{ border-color:var(--senal); color:#fff; background:rgba(77,107,255,.1); }

/* ---------- Cursor ---------- */
.line-cursor{
  position:fixed; top:0; left:0; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--senal); z-index:200; pointer-events:none;
  transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s, opacity .25s;
  mix-blend-mode:screen; opacity:0;
}
.line-cursor.is-active{ opacity:1; }
.line-cursor.is-hover{ width:54px; height:54px; background:rgba(77,107,255,.12); border-color:var(--pico); }
@media (hover:none){ .line-cursor{ display:none; } }

/* ---------- Loader ---------- */
.line-loader{
  position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; gap:1.6rem;
  align-items:center; justify-content:center; background:var(--abismo);
  transition:opacity .7s var(--ease), visibility .7s;
}
.line-loader.is-done{ opacity:0; visibility:hidden; }
.line-loader__signal{ display:flex; align-items:center; gap:6px; height:48px; }
.line-loader__signal span{ width:5px; height:14px; border-radius:3px; background:var(--grad-voz); animation:line-bounce 1s var(--ease) infinite; }
.line-loader__signal span:nth-child(2){ animation-delay:.12s; }
.line-loader__signal span:nth-child(3){ animation-delay:.24s; }
.line-loader__signal span:nth-child(4){ animation-delay:.36s; }
.line-loader__signal span:nth-child(5){ animation-delay:.48s; }
.line-loader__txt{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-muted); display:flex; gap:.6rem; }
.line-loader__pct{ color:var(--senal-claro); }

/* ---------- Stat ---------- */
.line-stat{ display:flex; flex-direction:column; gap:.4rem; }
.line-stat__v{ font-family:var(--font-display); font-weight:700; font-size:var(--step-2); line-height:1; background:var(--grad-voz); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.line-stat__l{ color:var(--color-muted); font-size:var(--step--1); max-width:18ch; }

/* ---------- Card (sectores) ---------- */
.line-card{
  position:relative; padding:1.8rem; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(24,34,58,.7), rgba(19,27,44,.5));
  border:1px solid var(--linea-debil); overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  transform-style:preserve-3d;
}
.line-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-voz); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s;
}
.line-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra); }
.line-card:hover::before{ opacity:.8; }
.line-card__ico{ width:46px; height:46px; margin-bottom:1.2rem; color:var(--senal-claro); }
.line-card h3{ font-size:1.25rem; margin-bottom:.6rem; }
.line-card p{ color:var(--color-muted); font-size:.96rem; }
.line-card__tools{ display:inline-block; margin-top:1.1rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--pico); opacity:.85; }

/* ---------- Chips (integraciones) ---------- */
.line-chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.3rem; border-radius:100px;
  border:1px solid var(--linea-media); background:rgba(255,255,255,.02);
  font-family:var(--font-display); font-weight:500; font-size:1rem; color:var(--color-text);
  transition:border-color .3s, color .3s, transform .3s var(--ease);
}
.line-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--grad-voz); }
.line-chip:hover{ border-color:var(--senal); transform:translateY(-3px); }

/* ---------- Quote ---------- */
.line-quote{
  font-family:var(--font-display); font-weight:500; font-size:var(--step-1); line-height:1.4;
  color:var(--marfil-frio); padding:1.8rem; border-radius:var(--radius);
  background:var(--grad-voz-soft); border:1px solid var(--linea-debil); position:relative;
}
.line-quote::before{ content:"\201C"; position:absolute; top:-.2rem; left:.8rem; font-size:4rem; color:var(--senal); opacity:.4; font-family:var(--font-display); }

/* ---------- Plan ---------- */
.line-plan{
  display:flex; flex-direction:column; gap:1.2rem; padding:2rem 1.8rem; border-radius:var(--radius);
  border:1px solid var(--linea-debil); background:rgba(19,27,44,.5); position:relative; overflow:hidden;
}
.line-plan--feat{ border-color:transparent; background:linear-gradient(180deg, rgba(77,107,255,.12), rgba(19,27,44,.6)); box-shadow:0 0 0 1px rgba(77,107,255,.45), var(--sombra); }
.line-plan__tag{ position:absolute; top:1.2rem; right:1.2rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pico); border:1px solid rgba(34,227,211,.35); border-radius:100px; padding:.25rem .6rem; }
.line-plan__name{ font-size:1.1rem; color:var(--color-muted); font-weight:500; }
.line-plan__price{ font-family:var(--font-display); font-weight:700; font-size:var(--step-3); line-height:1; }
.line-plan__price span{ font-size:1rem; font-weight:400; color:var(--color-muted); font-family:var(--font-mono); }
.line-plan__price .line-plan__from{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.1rem; }
.line-plan ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.line-plan li{ position:relative; padding-left:1.6rem; color:var(--color-muted); font-size:.95rem; }
.line-plan li::before{ content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%; background:var(--grad-voz); }
.line-plan .line-btn{ justify-content:center; }

/* ---------- Style card (estilos de agente) ---------- */
.line-style{ padding:1.5rem 1.4rem; border-radius:var(--radius); border:1px solid var(--linea-debil); background:linear-gradient(180deg,rgba(24,34,58,.55),rgba(19,27,44,.4)); transition:transform .35s var(--ease),border-color .35s; }
.line-style:hover{ transform:translateY(-4px); border-color:rgba(77,107,255,.4); }
.line-style__ico{ width:34px; height:34px; color:var(--senal-claro); margin-bottom:.9rem; }
.line-style h3{ font-size:1.08rem; margin-bottom:.45rem; }
.line-style p{ color:var(--color-muted); font-size:.9rem; }
.line-style__ex{ display:block; margin-top:.9rem; font-family:var(--font-mono); font-size:.72rem; color:var(--pico); opacity:.85; }

/* ---------- Tabs (ejemplos por negocio) ---------- */
.line-ex__tab{ font-family:var(--font-display); font-weight:500; font-size:.95rem; color:var(--color-muted); background:rgba(255,255,255,.02); border:1px solid var(--linea-media); border-radius:100px; padding:.75rem 1.3rem; min-height:44px; cursor:pointer; white-space:nowrap; transition:color .25s, border-color .25s, background .25s; }
.line-ex__tab:hover{ color:var(--color-text); }
.line-ex__tab.is-active{ color:#fff; border-color:transparent; background:var(--grad-voz); box-shadow:0 8px 22px -10px rgba(77,107,255,.7); }