
/* ============================================================
   V10 · Flujo animado, tablero en vivo y tabla que respira en celular
   ============================================================ */

/* ---------- 1. FLUJO VIVO ---------- */
.v10-flujo{background:var(--obsidiana);color:#fff;position:relative;overflow:hidden}
.v10-flujo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 8%,rgba(14,156,106,.16),transparent 70%),
    radial-gradient(50% 40% at 92% 82%,rgba(56,132,255,.1),transparent 70%)}
.v10-flujo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.v10-flujo>.wrap{position:relative;z-index:2}
.v10-flujo .titulo,.v10-flujo h2{color:#fff}
.v10-flujo .entrada{color:rgba(255,255,255,.7)}

.v10-escena{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:20px;
  background:rgba(255,255,255,.028);padding:20px 16px 24px;backdrop-filter:blur(4px)}
@media(min-width:900px){.v10-escena{padding:26px 26px 30px}}

.v10-hud{display:flex;align-items:center;gap:10px;margin-bottom:22px;
  font:600 .74rem 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.13em}
.v10-hud b{color:rgba(255,255,255,.9);font-weight:600}
.v10-hud i{font-style:normal;color:rgba(255,255,255,.36);margin-left:auto;letter-spacing:.08em}
.v10-punto{width:9px;height:9px;border-radius:50%;background:var(--destello);flex:none;
  box-shadow:0 0 0 0 rgba(14,156,106,.65);animation:v10Latido 2s ease-out infinite}
@keyframes v10Latido{0%{box-shadow:0 0 0 0 rgba(14,156,106,.6)}70%{box-shadow:0 0 0 12px rgba(14,156,106,0)}100%{box-shadow:0 0 0 0 rgba(14,156,106,0)}}

/* rail: columna en celular, fila en escritorio */
.v10-rail{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:960px){
  .v10-rail{grid-template-columns:1fr 46px 1fr 46px 1fr 46px 1fr 46px 1fr;align-items:stretch;gap:0}
}
.v10-nodo{position:relative}
.v10-nodo-caja{height:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  background:rgba(255,255,255,.04);padding:15px 15px 16px;
  opacity:.4;transform:translateY(6px) scale(.985);
  transition:opacity .4s ease,transform .4s ease,border-color .4s ease,box-shadow .4s ease;
  animation:v10Nodo 14s linear infinite;animation-delay:calc(var(--i) * 2.4s)}
@keyframes v10Nodo{
  0%,4%   {opacity:.4;transform:translateY(6px) scale(.985);border-color:rgba(255,255,255,.12);box-shadow:none;background:rgba(255,255,255,.04)}
  9%,26%  {opacity:1;transform:none;border-color:rgba(14,156,106,.6);box-shadow:0 14px 40px rgba(0,0,0,.4),0 0 0 1px rgba(14,156,106,.28);background:rgba(14,156,106,.09)}
  36%,100%{opacity:.62;transform:none;border-color:rgba(255,255,255,.16);box-shadow:none;background:rgba(255,255,255,.05)}
}
.v10-etiq{display:block;font:700 .62rem 'Poppins',sans-serif;text-transform:uppercase;
  letter-spacing:.16em;color:var(--destello);margin-bottom:9px}
.v10-nodo-caja b{display:block;font-family:'Poppins',sans-serif;font-size:1.02rem;
  font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.v10-chip{display:inline-block;font-size:.82rem;padding:7px 11px;border-radius:8px;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);margin-bottom:9px;line-height:1.35}
.v10-nodo-caja small{display:block;font-size:.79rem;color:rgba(255,255,255,.45);line-height:1.4}
.v10-final .v10-etiq{color:#7BE0BC}

/* cable con paquete que viaja */
.v10-cable{position:relative;display:block;height:34px;margin:0 auto;width:2px;
  background:rgba(255,255,255,.12);border-radius:2px;overflow:visible}
@media(min-width:960px){
  .v10-cable{height:2px;width:auto;margin:auto 8px;align-self:center}
}
.v10-cable i{position:absolute;inset:0;border-radius:2px;background:var(--destello);
  transform-origin:top center;transform:scaleY(0);
  animation:v10CableV 14s linear infinite;animation-delay:calc(var(--i) * 2.4s + .55s)}
@keyframes v10CableV{0%,3%{transform:scaleY(0)}13%,100%{transform:scaleY(1)}}
@media(min-width:960px){
  .v10-cable i{transform-origin:left center;transform:scaleX(0);animation-name:v10CableH}
  @keyframes v10CableH{0%,3%{transform:scaleX(0)}13%,100%{transform:scaleX(1)}}
}
.v10-cable em{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;
  margin-left:-4.5px;background:#fff;box-shadow:0 0 12px 3px rgba(14,156,106,.85);opacity:0;
  animation:v10PaqV 14s linear infinite;animation-delay:calc(var(--i) * 2.4s + .55s)}
@keyframes v10PaqV{0%,3%{opacity:0;top:0}5%{opacity:1}12%{opacity:1;top:100%}14%,100%{opacity:0;top:100%}}
@media(min-width:960px){
  .v10-cable em{top:50%;left:0;margin:-4.5px 0 0 0;animation-name:v10PaqH}
  @keyframes v10PaqH{0%,3%{opacity:0;left:0}5%{opacity:1}12%{opacity:1;left:100%}14%,100%{opacity:0;left:100%}}
}

/* salida: teléfono + nota */
.v10-salida{display:grid;gap:22px;grid-template-columns:1fr;margin-top:26px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
@media(min-width:860px){.v10-salida{grid-template-columns:290px 1fr;gap:34px;align-items:center}}
.v10-tel{background:#0C0F10;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:15px}
.v10-tel-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.v10-tel-av{width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--destello),#0A7E55)}
.v10-tel-top b{display:block;font:600 .88rem 'Poppins',sans-serif}
.v10-tel-top small{display:block;font-size:.74rem;color:rgba(255,255,255,.42)}
.v10-burb{background:rgba(255,255,255,.07);border-radius:11px;border-bottom-left-radius:3px;
  padding:9px 12px;font-size:.85rem;margin-bottom:7px;max-width:92%;
  opacity:0;transform:translateY(8px);
  animation:v10Burb 14s ease-out infinite;animation-delay:calc(var(--b) * .5s + 8.4s)}
@keyframes v10Burb{0%,2%{opacity:0;transform:translateY(8px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
.v10-burb.v10-ok{background:rgba(14,156,106,.2);color:#8EE3C1;font-weight:600}
.v10-nota b{display:block;font-family:'Poppins',sans-serif;font-size:1.16rem;margin-bottom:10px}
.v10-nota p{color:rgba(255,255,255,.66);margin-bottom:20px;max-width:48ch}

@media(prefers-reduced-motion:reduce){
  .v10-nodo-caja,.v10-cable i,.v10-cable em,.v10-burb,.v10-punto{animation:none!important;
    opacity:1!important;transform:none!important}
  .v10-cable i{transform:scaleY(1)!important}
}

/* ---------- 2. TABLERO DE LUGARES ---------- */
.v10-tablero{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.v10-tablero{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.v10-tablero{grid-template-columns:repeat(5,1fr);gap:14px}}
.v10-lug{position:relative;border-radius:14px;padding:18px 16px 17px;background:#fff;
  border:1px solid var(--filo);overflow:hidden;display:flex;flex-direction:column;gap:9px}
.v10-lug-num{font:700 .64rem 'Poppins',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza)}
.v10-lug-nom{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.08rem;letter-spacing:-.02em;line-height:1.2}
.v10-lug-zona{font-size:.84rem;color:var(--ceniza)}
.v10-lug-estado{display:inline-flex;align-items:center;gap:7px;font:600 .72rem 'Poppins',sans-serif;
  text-transform:uppercase;letter-spacing:.09em;margin-top:auto;padding-top:10px}
.v10-lug-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.v10-lug-barra{height:4px;border-radius:99px;background:var(--filo);overflow:hidden;margin-top:8px}
.v10-lug-barra i{display:block;height:100%;border-radius:inherit;background:var(--destello);
  width:var(--av,0%);transition:width .8s cubic-bezier(.16,.86,.24,1)}
.v10-lug-pasos{display:flex;gap:4px;font:600 .64rem 'Poppins',sans-serif;color:var(--ceniza);margin-top:7px;flex-wrap:wrap}
.v10-lug-pasos span{opacity:.4}
.v10-lug-pasos span.hecho{opacity:1;color:var(--destello)}

/* libre */
.v10-lug.libre{border-style:dashed;border-width:1.5px;background:transparent}
.v10-lug.libre::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(14,156,106,.04) 0 10px,transparent 10px 20px)}
.v10-lug.libre .v10-lug-nom{color:var(--ceniza)}
.v10-lug.libre .v10-lug-estado{color:var(--destello)}
.v10-lug.libre a{margin-top:10px;display:inline-block;font:600 .84rem 'Poppins',sans-serif;
  color:var(--obsidiana);text-decoration:none;border-bottom:2px solid var(--destello);padding-bottom:2px}

/* en obra */
.v10-lug.obra{border-color:#D9DEDA;box-shadow:0 10px 30px rgba(20,24,26,.06)}
.v10-lug.obra .v10-lug-estado{color:var(--destello)}
.v10-lug.obra::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--destello) 0 10px,rgba(14,156,106,.2) 10px 20px);
  animation:v10Obra 1.1s linear infinite}
@keyframes v10Obra{to{background-position:20px 0}}

/* apartado y publicado */
.v10-lug.apartado{border-color:rgba(14,156,106,.4)}
.v10-lug.apartado .v10-lug-estado{color:var(--ceniza)}
.v10-lug.publicado{background:var(--obsidiana);border-color:var(--obsidiana);color:#fff}
.v10-lug.publicado .v10-lug-num{color:rgba(255,255,255,.45)}
.v10-lug.publicado .v10-lug-zona{color:rgba(255,255,255,.55)}
.v10-lug.publicado .v10-lug-estado{color:#7BE0BC}
.v10-lug.publicado .v10-lug-barra{background:rgba(255,255,255,.14)}
.v10-lug.publicado a{color:#fff;border-bottom:2px solid var(--destello);text-decoration:none;
  font:600 .84rem 'Poppins',sans-serif;margin-top:8px;display:inline-block}

.v10-tablero-pie{margin-top:20px;color:var(--ceniza);font-size:.95rem;
  border-left:3px solid var(--destello);padding-left:15px;max-width:62ch}
.v10-tablero-pie b{color:var(--obsidiana)}

/* ---------- 3. La tabla ya no se corta en celular ---------- */
.v10-versus-cards{display:grid;gap:12px}
@media(max-width:819px){
  .v9-tabla-scroll{display:none}
}
@media(min-width:820px){
  .v10-versus-cards{display:none}
}
.v10-vcard{background:#fff;border:1px solid var(--filo);border-radius:14px;overflow:hidden}
.v10-vcard>h3{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:600;
  padding:15px 16px;background:var(--papel);border-bottom:1px solid var(--filo);margin:0}
.v10-vfila{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  padding:11px 16px;border-bottom:1px solid var(--filo);font-size:.9rem}
.v10-vfila:last-child{border-bottom:0}
.v10-vfila>span{display:block}
.v10-vopt{font:600 .68rem 'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ceniza);display:block;margin-bottom:2px}
.v10-vval{color:var(--ceniza);line-height:1.35}
.v10-vfila.propio{background:rgba(14,156,106,.07);border-left:3px solid var(--destello);
  padding-left:13px}
.v10-vfila.propio .v10-vopt{color:var(--destello)}
.v10-vfila.propio .v10-vval{color:var(--obsidiana);font-weight:600}
.v10-vfila i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-style:normal;font-size:11px;font-weight:700;margin-top:2px}
.v10-vfila i.si{background:var(--destello);color:#fff}
.v10-vfila i.no{background:var(--ceniza);color:#fff}
.v10-vfila i.parcial{background:var(--obsidiana);color:#fff;padding-top:3px}

