/* ============================================================
   INVEL — páginas de producto (ConAcc 3)
   Carga después de invel.css
   ============================================================ */

/* ---------- hero de producto ---------- */
.pd-hero{
  background:linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
  padding:150px 0 90px;
  border-bottom:1px solid var(--line);
}
.pd-hero-grid{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:64px; align-items:center;
}
.pd-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--blue-700);
  text-decoration:none; margin-bottom:28px;
}
.pd-back:hover{ text-decoration:underline; }
.pd-hero h1{
  font-size:clamp(34px, 4.5vw, 52px); font-weight:700; letter-spacing:-.02em; line-height:1.05;
  margin-top:14px;
}
.pd-sub{ margin-top:12px; font-size:19px; font-weight:600; color:var(--blue-700); text-wrap:balance; }
.pd-desc{ margin-top:18px; font-size:16.5px; color:var(--ink-soft); text-wrap:pretty; }
.pd-feats{
  list-style:none; margin-top:26px;
  display:grid; grid-template-columns:1fr 1fr; gap:11px 20px;
}
.pd-feats li{
  position:relative; padding-left:24px;
  font-size:14.5px; color:var(--ink-soft);
}
.pd-feats li::before{
  content:""; position:absolute; left:0; top:5px;
  width:11px; height:11px; border-radius:50%;
  background:var(--grad-warm);
}
.pd-mod{
  margin-top:24px; padding:14px 18px; border-radius:12px;
  background:var(--blue-50); border:1px solid var(--blue-150);
  font-size:13.5px; color:var(--ink-soft);
}
.pd-mod strong{
  display:block; margin-bottom:3px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue-700);
}
.pd-hero .btn-warm{ margin-top:30px; }
.pd-render{
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-md); border:1px solid var(--line);
}
.pd-render img{ width:100%; }

/* ---------- sección demo (franja oscura) ---------- */
.pd-demo-sec{
  background:linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  color:#fff;
  padding:100px 0 110px;
}
.pd-demo-sec .kicker{ color:#9FB4E4; }
.pd-demo-sec .lead{ color:#B9C4DE; }
.pd-demo-sec .sec-head{ margin-bottom:44px; max-width:620px; }

.pd-demo{ max-width:780px; margin-inline:auto; }
.pd-status{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-bottom:14px;
}
.pd-status .demo-chip{ font-size:14px; }
.pd-mode{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#7E92C4; border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:6px 13px;
  transition:color .3s, border-color .3s;
}
.pd-demo.manual .pd-mode{ color:var(--warm-3); border-color:rgba(255,194,51,.45); }

.pd-stage{
  position:relative; height:440px;
  border-radius:var(--radius-lg); overflow:hidden;
  background:#0D1118;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-lg);
}
.pd-stage .led-bar{
  position:absolute; left:16px; right:16px; bottom:14px;
  height:10px; margin:0; z-index:5;
}

/* terminal escalada (Standalone) */
.pd-demo .term-screen{
  position:absolute; left:50%; top:46%;
  width:330px; height:230px; margin:0;
  transform:translate(-50%,-50%) scale(1.6);
}
.pd-demo .ts-pad span{ cursor:pointer; transition:background .15s; user-select:none; }
.pd-demo .ts-pad span:hover{ background:#2E3440; }
.pd-demo .ts-pad span:active{ background:#39404D; }
.pd-demo .ts-input .go{ cursor:pointer; transition:background .15s; user-select:none; }
.pd-demo .ts-input .go:hover{ background:#39404D; }
.pd-demo .ts-input .field{
  display:flex; align-items:center; padding:0 10px;
  color:#EDEFF3; font-size:12px; letter-spacing:3px;
}

/* escenas escaladas (Barrera / Molinete) */
.pd-demo .scene{
  position:absolute; left:50%; top:50%;
  width:320px; height:210px; margin:0;
  transform:translate(-50%,-50%) scale(1.75);
  background:transparent; border:0;
}
.pd-stage.stage-scene{
  background:linear-gradient(180deg, #10182E 0%, #0C1222 66%, #161A24 66%, #11141C 100%);
}

/* ---------- overlays por tipo de acción ---------- */
[data-demo-root]:not([data-action="face"]) .ts-scan{ opacity:0 !important; }
[data-demo-root][data-action="pin"] .ts-idle{ opacity:1 !important; filter:none !important; }
[data-demo-root][data-action="pin"][data-phase="ok"] .ts-idle{ opacity:.12 !important; filter:blur(2px) !important; }

.ts-rfid, .ts-qr{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
}
[data-demo-root][data-action="rfid"][data-phase="scan"] .ts-rfid{ opacity:1; }
[data-demo-root][data-action="qr"][data-phase="scan"] .ts-qr{ opacity:1; }

.rfid-card{
  width:92px; height:58px; border-radius:8px;
  background:linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 70%);
  position:relative;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
  animation:rfidTap 1.5s ease-in-out infinite;
}
.rfid-card::before{
  content:""; position:absolute; top:13px; left:12px;
  width:18px; height:13px; border-radius:3px;
  background:var(--warm-3);
}
.rfid-card::after{
  content:""; position:absolute; bottom:9px; left:12px; right:12px;
  height:6px; border-radius:3px;
  background:rgba(255,255,255,.35);
}
@keyframes rfidTap{
  0%, 100%{ transform:translateY(-12px) rotate(-4deg); }
  50%{ transform:translateY(8px) rotate(0deg); }
}
.rfid-pad{
  width:66px; height:9px; border-radius:5px;
  background:#2A2F37; border:1px solid #383E48;
}

.qr-wrap{ position:relative; padding:8px; }
.qr-box{
  width:86px; height:86px; border-radius:8px;
  background:#FFFFFF; padding:9px;
}
.qr-in{
  width:100%; height:100%;
  background:
    repeating-linear-gradient(0deg, #15181D 0 7px, transparent 7px 14px),
    repeating-linear-gradient(90deg, #15181D 0 7px, #FFFFFF 7px 14px);
}
.qr-wrap .scan-line{ left:0; right:0; }
[data-demo-root][data-action="qr"][data-phase="scan"] .qr-wrap .scan-line{
  opacity:1; animation:scanY 1.05s ease-in-out infinite alternate;
}

/* ---------- controles ---------- */
.pd-controls{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:28px;
}
.pd-btn{
  font-family:var(--font); font-size:14.5px; font-weight:600;
  color:#EDEFF3;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:11px; padding:13px 22px; cursor:pointer;
  transition:background .2s, transform .15s, border-color .2s;
}
.pd-btn:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }
.pd-btn:active{ transform:translateY(1px); }
.pd-demo.running .pd-btn{ opacity:.45; pointer-events:none; }
.pd-tip{
  margin-top:18px; text-align:center;
  font-size:13px; color:#7E92C4;
}

/* ---------- otros productos ---------- */
.pd-next{ padding:90px 0; }
.pd-next-h{ font-size:24px; font-weight:700; letter-spacing:-.012em; margin-bottom:28px; }
.pd-next-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pd-next-grid a{
  display:flex; align-items:center; gap:18px; padding:16px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.pd-next-grid a:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--blue-150); }
.pd-next-grid img{ width:112px; height:84px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.pd-next-grid b{ display:block; font-size:16.5px; color:var(--ink); letter-spacing:-.01em; }
.pd-next-grid span{ display:block; margin-top:3px; font-size:13px; color:var(--ink-faint); }

.pd-footer{ padding:30px 0; }
.pd-footer .footer-bottom{ padding-top:0; border:0; }
.pd-footer .footer-bottom a{ color:#8C9BC2; text-decoration:none; font-size:13px; }
.pd-footer .footer-bottom a:hover{ color:#fff; }

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .pd-hero-grid{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width: 640px){
  .pd-hero{ padding:118px 0 60px; }
  .pd-feats{ grid-template-columns:1fr; }
  .pd-stage{ height:330px; }
  .pd-demo .term-screen{ transform:translate(-50%,-50%) scale(1.12); }
  .pd-demo .scene{ transform:translate(-50%,-50%) scale(1.12); }
  .pd-next-grid{ grid-template-columns:1fr; }
  .pd-demo-sec{ padding:70px 0 80px; }
  .pd-next{ padding:64px 0; }
}