/* ============================================================
   Line by Fraxuo — signature.css
   Wow #1 (llamada cinematográfica en hero) + Wow #2 (modal "habla con Line")
   ============================================================ */

/* ---------- #1 · Tarjeta de llamada ---------- */
.line-call{
  position:relative; border-radius:24px; padding:1.4rem;
  background:linear-gradient(180deg, rgba(24,34,58,.9), rgba(13,18,30,.96));
  border:1px solid var(--linea-media); overflow:hidden;
  backdrop-filter:blur(6px);
  box-shadow:0 18px 50px -22px rgba(77,107,255,.30), 0 2px 6px -2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.line-call::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:.45;
}
.line-call__head{ display:flex; align-items:center; gap:.8rem; font-family:var(--font-mono); font-size:.74rem; color:var(--color-muted); }
.line-call__rec{ display:inline-flex; align-items:center; gap:.45rem; color:var(--pico); }
.line-call__rec i{ width:8px; height:8px; border-radius:50%; background:var(--pico); box-shadow:0 0 10px var(--pico); animation:line-blink 1.4s infinite; }
.line-call__biz{ margin-right:auto; }
.line-call__time{ font-variant-numeric:tabular-nums; color:var(--marfil-frio); }

.line-call__orb{ height:120px; display:grid; place-items:center; margin:.6rem 0; }
.line-call__orb canvas{ width:120px; height:120px; }

.line-call__wave{ width:100%; height:64px; display:block; opacity:.9; }

.line-call__transcript{
  display:flex; flex-direction:column; justify-content:flex-end; gap:.6rem; margin-top:.4rem;
  min-height:160px; max-height:212px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 16%);
}
.line-bubble{
  max-width:86%; padding:.6rem .85rem; border-radius:14px; font-size:.9rem; line-height:1.35;
  opacity:0; transform:translateY(8px);
}
.line-bubble.is-in{ opacity:1; transform:none; transition:opacity .35s var(--ease), transform .35s var(--ease); }
.line-bubble--bot{ align-self:flex-start; background:rgba(77,107,255,.16); border:1px solid rgba(77,107,255,.3); border-bottom-left-radius:4px; }
.line-bubble--cli{ align-self:flex-end; background:rgba(255,255,255,.05); border:1px solid var(--linea-debil); border-bottom-right-radius:4px; color:var(--color-muted); }
.line-bubble__role{ font-family:var(--font-mono); font-size:var(--step--2); letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:.2rem; opacity:.75; }
.line-bubble--bot .line-bubble__role{ color:var(--senal-claro); }

.line-call__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--linea-debil); }
.line-call__latlabel{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--color-muted); }
.line-call__lat{ font-family:var(--font-mono); font-weight:700; font-size:1.1rem; color:var(--pico); font-variant-numeric:tabular-nums; }

/* ---------- #2 · Modal "habla con Line" ---------- */
.line-modal{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:1.2rem; }
.line-modal.is-open{ display:flex; }
.line-modal__backdrop{ position:absolute; inset:0; background:rgba(5,8,14,.7); backdrop-filter:blur(8px); }
.line-modal__card{
  position:relative; width:min(100%,520px); max-height:90svh; overflow:auto;
  background:linear-gradient(180deg, rgba(24,34,58,.95), rgba(13,18,30,.98));
  border:1px solid var(--linea-media); border-radius:24px; padding:1.6rem; box-shadow:var(--sombra);
  animation:line-modalin .45s var(--ease);
}
@keyframes line-modalin{ from{ opacity:0; transform:translateY(20px) scale(.98); } to{ opacity:1; transform:none; } }
.line-modal__x{ position:absolute; top:1rem; right:1.1rem; background:none; border:0; color:var(--color-muted); font-size:1.8rem; line-height:1; cursor:pointer; transition:color .2s; }
.line-modal__x:hover{ color:#fff; }
.line-modal__head{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.74rem; }
.line-modal__status{ display:inline-flex; align-items:center; gap:.5rem; color:var(--color-muted); }
.line-modal__status i{ width:8px; height:8px; border-radius:50%; background:var(--pico); box-shadow:0 0 8px var(--pico); }
.line-modal__status.is-listening i{ background:#ff5d73; box-shadow:0 0 8px #ff5d73; animation:line-blink 1s infinite; }
.line-modal__lat{ color:var(--pico); font-weight:700; font-variant-numeric:tabular-nums; }
.line-modal__wave{ width:100%; height:72px; margin:1rem 0; }
.line-modal__transcript{ display:flex; flex-direction:column; gap:.6rem; min-height:120px; max-height:32svh; overflow:auto; margin-bottom:1.1rem; }
.line-modal__controls{ display:flex; gap:.8rem; align-items:center; }
.line-mic{ position:relative; width:54px; height:54px; flex:none; border-radius:50%; border:1px solid var(--senal); background:rgba(77,107,255,.14); color:var(--senal-claro); cursor:pointer; display:grid; place-items:center; transition:background .25s, color .25s, transform .2s; }
.line-mic:hover{ transform:scale(1.06); }
.line-mic.is-on{ background:var(--senal); color:#fff; }
.line-mic__ring{ position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--senal); opacity:0; }
.line-mic.is-on .line-mic__ring{ animation:line-pulsering 1.4s var(--ease) infinite; }
.line-modal__form{ display:flex; gap:.6rem; flex:1; }
.line-modal__form input{ flex:1; background:rgba(255,255,255,.05); border:1px solid var(--linea-media); border-radius:100px; padding:.7rem 1rem; color:var(--color-text); font-family:var(--font-body); font-size:.92rem; }
.line-modal__form input::placeholder{ color:var(--color-muted); }
.line-modal__form input:focus{ outline:none; border-color:var(--senal); }
.line-modal__form .line-btn{ padding:.7rem 1.1rem; }
.line-modal__note{ margin-top:1rem; font-size:.74rem; color:var(--color-muted); font-family:var(--font-mono); text-align:center; }

@media (max-width:560px){
  .line-modal__form input{ display:none; }
}

/* ---------- Firma · raíl de señal (la línea que nunca se corta) ---------- */
.line-rail{ position:fixed; left:26px; top:16vh; bottom:16vh; width:2px; z-index:70; pointer-events:none; }
.line-rail__track{ position:absolute; inset:0; background:rgba(234,240,250,.07); border-radius:3px; }
.line-rail__fill{ position:absolute; left:0; top:0; width:100%; height:0; border-radius:3px;
  background:linear-gradient(var(--senal), var(--voz) 55%, var(--pico)); box-shadow:0 0 10px rgba(77,107,255,.5); }
.line-rail__dot{ position:absolute; left:50%; top:0; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--pico); box-shadow:0 0 14px var(--pico), 0 0 4px #fff; }
@media (max-width:1180px){ .line-rail{ display:none; } }
@media (prefers-reduced-motion: reduce){ .line-rail__dot{ box-shadow:0 0 10px var(--pico); } }