/* ============================================================
   SORA — VIGÍA · página de producto (monitoreo de personal)
   Depende de css/base.css. Acento del producto: cian sobre tinta.
   ============================================================ */

/* ---------- Encabezado del producto ---------- */
.phead{ padding:calc(var(--nav-h) + 56px) 0 0 }
.phead__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:end }
.phead__badge{
  display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper);
  padding:8px 14px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
}
.phead__badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--cyan); animation:pulse 1.6s infinite }
@keyframes pulse{ 50%{ opacity:.25; transform:scale(.75) } }
.phead h1{ margin-top:18px }
.phead h1 em{
  font-style:normal; background:var(--cyan); border:var(--bd);
  padding:0 .1em; display:inline-block; line-height:.95;
}
.phead__lead{ margin-top:24px; font-size:1.06rem; max-width:56ch }
.phead__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px }

/* Ficha rápida en la columna derecha */
.quick{ border:var(--bd); background:var(--white); box-shadow:var(--sh); padding:24px }
.quick h4{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; opacity:.6; margin-bottom:14px }
.quick dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:.86rem }
.quick dt{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; opacity:.6; padding-top:3px }
.quick dd{ font-weight:700 }
@media (max-width:1000px){ .phead__grid{ grid-template-columns:1fr } }

/* ============================================================
   MAQUETA DEL PANEL EN VIVO
   Todo se dibuja con CSS: no hay capturas reales de nadie.
   ============================================================ */
.vg{ margin-top:56px }
.vg__frame{ border:var(--bd); box-shadow:var(--sh-lg); background:#0d0f12; overflow:hidden }

.vg__bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; background:var(--ink); color:var(--paper);
  border-bottom:var(--bw) solid #000; font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
}
.vg__brand{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--cyan) }
.vg__brand::before{ content:''; width:10px; height:10px; background:var(--cyan); animation:pulse 1.6s infinite }
.vg__meta{ margin-left:auto; display:flex; gap:16px; flex-wrap:wrap; opacity:.75 }
.vg__meta b{ color:var(--yellow) }

.vg__fps{ display:flex; gap:0; border:2px solid #444 }
.vg__fps button{
  border:0; background:none; color:inherit; cursor:pointer; padding:5px 9px;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; border-right:2px solid #444;
}
.vg__fps button:last-child{ border-right:0 }
.vg__fps button[aria-pressed="true"]{ background:var(--cyan); color:var(--ink); font-weight:700 }

.vg__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:#000; padding:2px;
}
@media (max-width:900px){ .vg__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .vg__grid{ grid-template-columns:1fr } }

/* ---------- Mosaico de un equipo ---------- */
.tile{ background:#15181d; position:relative; cursor:pointer; transition:outline-color .15s }
.tile:focus-visible{ outline:3px solid var(--yellow); outline-offset:-3px }
.tile__screen{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0a0a0a }
.tile__screen::after{                       /* barrido de refresco */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 0 42%,rgba(255,255,255,.10) 50%,transparent 58% 100%);
  animation:sweep var(--rate,3s) linear infinite;
}
@keyframes sweep{ from{ transform:translateY(-100%) } to{ transform:translateY(100%) } }

.tile__tag{
  position:absolute; top:7px; left:7px; z-index:3; display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.72); color:#fff; padding:4px 8px;
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
}
.tile__tag i{ width:6px; height:6px; border-radius:50%; background:#25e06a; animation:pulse 1.4s infinite }
.tile--off .tile__tag i{ background:#ff4040; animation:none }
.tile__zoom{
  position:absolute; top:7px; right:7px; z-index:3; background:rgba(0,0,0,.72); color:#fff;
  padding:4px 7px; font-family:var(--f-mono); font-size:.55rem; opacity:0; transition:.2s;
}
.tile:hover .tile__zoom{ opacity:1 }

.tile__foot{
  display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center;
  padding:9px 11px; border-top:2px solid #000; color:#e8e8e8;
}
.tile__who{ font-weight:700; font-size:.8rem; line-height:1.15 }
.tile__idle{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em;
  border:2px solid #3a3f47; padding:3px 7px; white-space:nowrap;
}
.tile__idle.warn{ border-color:var(--orange); color:var(--orange) }
.tile__app{
  grid-column:1/-1; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.09em;
  text-transform:uppercase; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Equipo sin conexión */
.tile--off .tile__screen{ background:#101215 }
.tile--off .tile__screen::after{ animation:none; background:none }
.tile--off .tile__screen::before{
  content:'SIN CONEXIÓN'; position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; color:#ff4040;
  background:repeating-linear-gradient(45deg,#0e1013 0 9px,#121519 9px 18px);
}

/* Un mosaico expandido ocupa toda la fila */
.vg__grid.zoomed .tile{ display:none }
.vg__grid.zoomed .tile.is-max{ display:block; grid-column:1/-1 }
.vg__grid.zoomed .tile.is-max .tile__who{ font-size:1rem }

/* ---------- Ventanas falsas dentro de cada pantalla ---------- */
.win{ position:absolute; inset:0; display:flex; flex-direction:column; background:#fff }
.win__bar{ flex:none; height:11px; background:#d9dade; border-bottom:1px solid #b7b9bf; display:flex; align-items:center; gap:3px; padding-left:5px }
.win__bar i{ width:4px; height:4px; border-radius:50%; background:#9b9ea6 }
.win__body{ flex:1; position:relative; overflow:hidden; padding:8px 9px }
.lines{ display:grid; gap:5px }
.lines i{ display:block; height:4px; background:currentColor; opacity:.5 }

/* Hoja de cálculo */
.win--sheet .win__body{
  padding:0; color:#2f3136;
  background:
    repeating-linear-gradient(90deg,#e9eaec 0 1px,transparent 1px 17%),
    repeating-linear-gradient(#e9eaec 0 1px,transparent 1px 13px), #fff;
}
.win--sheet .win__body::before{ content:''; position:absolute; inset:0 0 auto; height:13px; background:#217a4b }
.win--sheet .win__body::after{ content:''; position:absolute; left:17%; top:26px; width:16%; height:12px; background:var(--yellow) }

/* Editor de código */
.win--code{ background:#14161b }
.win--code .win__bar{ background:#22252c; border-bottom-color:#0f1115 }
.win--code .win__body{ color:#66d9c0 }
.win--code .lines i:nth-child(3n){ background:#ffd166 }
.win--code .lines i:nth-child(4n){ background:#ff7ac6 }

/* Navegador / CRM */
.win--web .win__body{ padding:0; color:#334 }
.win--web .win__body::before{ content:''; position:absolute; inset:0 0 auto; height:16px; background:#f3f4f6; border-bottom:1px solid #e2e4e8 }
.win--web .lines{ position:absolute; inset:24px 10px auto; }
.win--web .hero{ position:absolute; left:10px; right:10px; top:24px; height:26%; background:#37d5f2; opacity:.75 }
.win--web .lines{ top:calc(24px + 30%) }

/* Chat / mensajería */
.win--chat .win__body{ background:#eceff3; display:grid; gap:6px; align-content:start }
.bub{ height:11px; border-radius:6px; background:#fff; width:58% }
.bub--me{ justify-self:end; background:#25d366; opacity:.8; width:44% }

/* Videollamada — los recuadros "se mueven" como cámaras en vivo */
.win--call{ background:#1b1d22 }
.win--call .win__body{ display:grid; grid-template-columns:1fr 1fr; gap:5px }
.win--call span{ background:#2e323a; border-radius:3px; position:relative; overflow:hidden }
.win--call span::before{
  content:''; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg,#39404a,#586170,#2b2f36,#4a525d,#39404a);
  animation:feed 6s linear infinite;
}
.win--call span:nth-child(2)::before{ animation-duration:8s; animation-direction:reverse }
.win--call span:nth-child(3)::before{ animation-duration:7s }
.win--call span:nth-child(4)::before{ animation-duration:9s; animation-direction:reverse }
@keyframes feed{ to{ transform:rotate(360deg) } }

/* Editor de código — cursor que parpadea, como si estuvieran escribiendo */
.win--code .win__body::after{
  content:''; position:absolute; left:9px; top:9px; width:5px; height:9px;
  background:#66d9c0; animation:caret 1.05s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }

/* Reproductor de video — un mosaico con un video de verdad corriendo */
.win--media{ background:#0e1013 }
.win--media .win__bar{ background:#1b1e24; border-bottom-color:#000 }
.win--media .win__body{ padding:0; display:flex; flex-direction:column; background:#0e1013 }
.media__stage{ position:relative; flex:1; overflow:hidden; background:#000 }
.media__stage::before{
  content:''; position:absolute; inset:0; opacity:.6;
  background:linear-gradient(120deg,#37d5f2,#ff29ce,#ff5c00,#ffe500,#37d5f2);
  background-size:320% 320%; animation:mediaMove 7s ease-in-out infinite;
}
.media__play{
  position:absolute; inset:0; margin:auto; width:0; height:0;
  border-style:solid; border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent rgba(255,255,255,.92);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.media__prog{ position:absolute; left:0; bottom:0; height:4px; width:0; background:#ff3b30; animation:mediaProg 11s linear infinite }
.media__bar{ flex:none; height:16%; min-height:10px; background:#1b1e24; border-top:1px solid #000; position:relative }
.media__bar::before{ content:''; position:absolute; left:7px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:#ff3b30 }
.media__bar::after{ content:''; position:absolute; left:20px; right:7px; top:50%; height:3px; margin-top:-1.5px; background:#3a3f47 }
@keyframes mediaMove{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
@keyframes mediaProg{ to{ width:100% } }

@media (prefers-reduced-motion:reduce){
  .tile__screen::after,.phead__badge .dot,.vg__brand::before,.tile__tag i,
  .win--call span::before,.win--code .win__body::after,
  .media__stage::before,.media__prog{ animation:none }
  .media__prog{ width:38% }
}

.vg__note{
  display:flex; gap:12px; align-items:flex-start; margin-top:16px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.09em; line-height:1.8; opacity:.6;
}
.vg__note b{ color:var(--ink) }

/* ============================================================
   BLOQUES DE CONTENIDO
   ============================================================ */

/* Dolores */
.pain{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.pain > div{ border:var(--bd); background:var(--white); box-shadow:var(--sh); padding:26px 22px }
.pain b{ display:block; font-family:var(--f-display); font-size:2.4rem; line-height:1; color:var(--c,var(--magenta)); -webkit-text-stroke:2px var(--ink) }
.pain h3{ font-size:1rem; margin:12px 0 8px; text-transform:uppercase; letter-spacing:.02em }
.pain p{ font-size:.88rem; opacity:.82 }
@media (max-width:1000px){ .pain{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .pain{ grid-template-columns:1fr } }

/* Funciones */
.feats{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px }
.feat{ background:var(--white); border:var(--bd); box-shadow:var(--sh); padding:28px 26px; position:relative; overflow:hidden; grid-column:span 2 }
.feat--wide{ grid-column:span 3 }
.feat::before{ content:''; position:absolute; inset:auto 0 0; height:0; background:var(--c,var(--cyan)); transition:height .35s var(--ease); z-index:0 }
.feat:hover::before{ height:100% }
.feat > *{ position:relative; z-index:1 }
.feat__ico{ font-size:1.7rem; line-height:1 }
.feat__n{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5; display:block; margin:14px 0 8px }
.feat h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.35rem; line-height:1 }
.feat p{ font-size:.9rem; opacity:.85; margin-top:10px }
.feat ul{ list-style:none; display:grid; gap:6px; margin-top:14px }
.feat li{ font-size:.84rem; display:flex; gap:8px } .feat li::before{ content:'▸'; font-weight:700 }
@media (max-width:1100px){ .feats{ grid-template-columns:repeat(4,1fr) } .feat--wide{ grid-column:span 4 } }
@media (max-width:760px){ .feats{ grid-template-columns:1fr } .feat,.feat--wide{ grid-column:1/-1 } }

/* Etiqueta "en la ruta" */
.soon{ display:inline-block; background:var(--ink); color:var(--paper); font-family:var(--f-mono);
  font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; margin-bottom:10px }

/* Arquitectura */
.arch{ border:var(--bd); background:var(--white); box-shadow:var(--sh); padding:34px 28px }
.arch svg{ width:100%; height:auto; max-width:1000px; margin-inline:auto }

/* Pasos de instalación */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bw); border:var(--bd); background:var(--ink) }
.steps article{ background:var(--paper); padding:32px 26px }
.steps b{ font-family:var(--f-display); font-size:3.2rem; line-height:.85; -webkit-text-stroke:2px var(--ink); color:transparent; display:block }
.steps h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.25rem; margin:14px 0 10px }
.steps p{ font-size:.9rem; opacity:.85 }
.steps .tag{ margin-top:14px }
@media (max-width:860px){ .steps{ grid-template-columns:1fr } }

/* Tabla de consumo / requisitos */
.spec{ width:100%; border-collapse:collapse; border:var(--bd); background:var(--white); box-shadow:var(--sh) }
.spec th,.spec td{ border-bottom:3px solid var(--ink); padding:15px 18px; text-align:left; font-size:.9rem }
.spec thead th{ background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase }
.spec tbody tr:last-child th,.spec tbody tr:last-child td{ border-bottom:0 }
.spec tbody th{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; width:34% }
.spec td b{ font-family:var(--f-display); font-size:1.05rem }
@media (max-width:640px){
  .spec thead{ display:none }
  .spec tbody tr{ display:grid; border-bottom:3px solid var(--ink) }
  .spec tbody tr:last-child{ border-bottom:0 }
  .spec tbody th,.spec tbody td{ width:auto; border-bottom:0; padding:10px 14px }
  .spec tbody th{ padding-bottom:0; opacity:.6 }
}

/* Casos de uso */
.uses{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--bw); border:var(--bd); background:var(--ink) }
.uses article{ background:var(--white); padding:30px 28px; transition:background .2s }
.uses article:hover{ background:var(--c,var(--yellow)) }
.uses span{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6 }
.uses h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.4rem; margin:10px 0 10px; line-height:1 }
.uses p{ font-size:.9rem; opacity:.85 }
@media (max-width:760px){ .uses{ grid-template-columns:1fr } }

/* Paquetes */
.packs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.pack{ border:var(--bd); box-shadow:var(--sh); background:var(--white); padding:30px; display:flex; flex-direction:column }
.pack--mid{ background:var(--cyan) }
.pack h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.5rem }
.pack .scale{ font-family:var(--f-display); font-size:1.9rem; margin:12px 0 4px; line-height:1 }
.pack .scale small{ display:block; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; opacity:.65; margin-top:7px; text-transform:uppercase }
.pack ul{ list-style:none; display:grid; gap:8px; margin:18px 0 24px }
.pack li{ font-size:.87rem; display:flex; gap:9px } .pack li::before{ content:'▸'; font-weight:700 }
.pack .btn{ margin-top:auto; justify-content:center }
@media (max-width:900px){ .packs{ grid-template-columns:1fr } }

/* Bloque legal */
.legal-box{ border:var(--bd); background:var(--yellow); box-shadow:var(--sh); padding:34px 30px }
.legal-box h3{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.4rem,3vw,2.2rem); line-height:1 }
.legal-box .cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 34px; margin-top:22px }
.legal-box li{ list-style:none; font-size:.92rem; display:flex; gap:10px; padding:7px 0; border-bottom:2px solid rgba(17,17,17,.18) }
.legal-box li::before{ content:'✓'; font-weight:700 }
@media (max-width:760px){ .legal-box .cols{ grid-template-columns:1fr } }

/* Preguntas */
.faq{ border-top:var(--bd) }
.faq details{ border-bottom:3px solid var(--ink); background:var(--white) }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 20px; font-weight:700; font-size:1.02rem;
  display:flex; justify-content:space-between; gap:20px; align-items:center; transition:background .18s;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; font-family:var(--f-display); font-size:1.5rem; line-height:1 }
.faq details[open] summary{ background:var(--cyan) }
.faq details[open] summary::after{ content:'−' }
.faq summary:hover{ background:var(--paper) }
.faq p{ padding:0 20px 22px; font-size:.94rem; opacity:.87; max-width:88ch }