:root{
  --azul:#0b3a6e; --azul-2:#14508f; --azul-claro:#e8f0fa; --tinta:#13202e; --gris:#5d6b7a; --linea:#dbe3ec;
  --fondo:#f5f7fa; --blanco:#fff; --ambar:#f2a516; --verde:#178a4c; --verde-claro:#e6f5ec; --rojo:#c0392b; --rojo-claro:#fbeceb;
  --radio:12px; --sombra:0 1px 2px rgba(16,32,52,.06),0 6px 20px rgba(16,32,52,.06);
  --fuente:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--tinta);font:15px/1.5 var(--fuente);-webkit-font-smoothing:antialiased}
a{color:var(--azul-2)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.7rem,4.2vw,2.6rem);letter-spacing:-.02em}
h2{font-size:1.35rem;letter-spacing:-.01em}
h3{font-size:1.05rem}
.envoltura{max-width:1080px;margin:0 auto;padding:0 18px}
.oculto{display:none!important}

/* Barra superior */
.barra{position:sticky;top:0;z-index:20;background:var(--azul);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.barra .envoltura{display:flex;align-items:center;gap:14px;height:60px}
.marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.01em}
.marca img{width:34px;height:34px;border-radius:8px}
.marca small{display:block;font-weight:400;opacity:.75;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.barra nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.barra nav a,.barra nav button{color:#fff;text-decoration:none;background:none;border:0;font:inherit;padding:8px 12px;border-radius:8px;cursor:pointer;opacity:.92}
.barra nav a:hover,.barra nav button:hover{background:rgba(255,255,255,.12);opacity:1}
.barra nav .btn-instalar{background:var(--ambar);color:#1d1400;font-weight:600}

/* Botones y formularios */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:11px 18px;font:600 .95rem var(--fuente);cursor:pointer;text-decoration:none;background:var(--azul);color:#fff;transition:transform .05s,background .15s}
.btn:hover{background:var(--azul-2)} .btn:active{transform:translateY(1px)}
.btn.sec{background:var(--blanco);color:var(--azul);border:1px solid var(--linea)} .btn.sec:hover{background:var(--azul-claro)}
.btn.ambar{background:var(--ambar);color:#1d1400} .btn.ambar:hover{background:#e09a10}
.btn.verde{background:var(--verde)} .btn.rojo{background:var(--rojo)}
.btn.chico{padding:7px 12px;font-size:.85rem;border-radius:8px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ancho{width:100%}
label{display:block;font-size:.85rem;font-weight:600;color:#34465a;margin-bottom:12px}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--linea);border-radius:9px;font:400 1rem var(--fuente);background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc0ea;border-color:var(--azul-2)}
.fila{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ayuda{font-size:.8rem;color:var(--gris);font-weight:400}

/* Tarjetas */
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:22px}
.seccion{padding:36px 0}
.envoltura.seccion{padding:36px 18px 48px}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* Portada */
.portada{background:linear-gradient(160deg,var(--azul) 0%,#0e4a8a 60%,#1660a8 100%);color:#fff;padding:54px 0 64px;position:relative;overflow:hidden}
.portada:after{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;border:60px solid rgba(255,255,255,.05)}
.portada p{font-size:1.08rem;opacity:.9;max-width:600px}
.portada .acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.etiqueta{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.14);margin-bottom:14px}

/* Producto */
.producto{display:flex;flex-direction:column;gap:12px;position:relative}
.producto .logo{width:52px;height:52px;border-radius:12px;background:var(--azul-claro);color:var(--azul);display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.producto .logo img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.producto .nombre{font-size:1.25rem;font-weight:800;color:var(--azul)}
.producto .desc{color:var(--gris);margin:0}
.plan{border:1px solid var(--linea);border-radius:10px;padding:14px;display:grid;gap:6px}
.plan .precio{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.plan .precio small{font-size:.85rem;color:var(--gris);font-weight:500}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--azul-claro);color:var(--azul)}
.chip.verde{background:var(--verde-claro);color:var(--verde)} .chip.rojo{background:var(--rojo-claro);color:var(--rojo)} .chip.ambar{background:#fff4dc;color:#8a5a00} .chip.gris{background:#eef1f4;color:var(--gris)}
.proximamente{opacity:.92}
.proximamente .cinta{position:absolute;top:16px;right:16px}

.pasos{counter-reset:p}
.paso{padding-left:52px;position:relative}
.paso:before{counter-increment:p;content:counter(p);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font-weight:800}
.medios{display:flex;gap:10px;flex-wrap:wrap}
.medio{padding:8px 14px;border-radius:9px;background:#fff;border:1px solid var(--linea);font-weight:700;font-size:.9rem}

/* Checkout */
.resumen-compra{position:sticky;top:78px}
.linea-total{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--linea)}
.linea-total.final{font-size:1.2rem;font-weight:800;border:0;padding-top:12px}
.segmentado{display:grid;grid-template-columns:1fr 1fr;background:#eef2f7;border-radius:10px;padding:4px;gap:4px;margin-bottom:16px}
.segmentado button{border:0;background:none;padding:10px;border-radius:8px;font:600 .95rem var(--fuente);color:var(--gris);cursor:pointer}
.segmentado button.activo{background:#fff;color:var(--azul);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.caja-pago{background:var(--azul-claro);border-radius:10px;padding:14px 16px}
.caja-pago b{font-size:1.1rem}

/* Estados */
.linea-tiempo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.linea-tiempo div{font-size:.8rem;font-weight:600;color:var(--gris);border-top:4px solid var(--linea);padding-top:8px}
.linea-tiempo div.hecho{color:var(--verde);border-color:var(--verde)}
.aviso{padding:12px 14px;border-radius:10px;margin:0 0 14px;font-size:.92rem}
.aviso.error{background:var(--rojo-claro);color:#7d1f15} .aviso.ok{background:var(--verde-claro);color:#0f5a32} .aviso.info{background:var(--azul-claro);color:#123a63}

/* Panel */
.cabecera-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.pestanas{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--linea);margin-bottom:18px;scrollbar-width:none}
.pestanas button{border:0;background:none;padding:10px 14px;font:600 .92rem var(--fuente);color:var(--gris);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.pestanas button.activo{color:var(--azul);border-color:var(--azul)}
.kpi{padding:16px 18px}
.kpi .v{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--azul)}
.kpi .t{font-size:.8rem;color:var(--gris);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tabla-env{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
th{background:#f3f6fa;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:#4a5b6d;white-space:nowrap}
td.num,th.num{text-align:right;white-space:nowrap}
tr:last-child td{border-bottom:0}
.suscripcion{display:grid;gap:10px}
.barra-dias{height:8px;background:#eef1f4;border-radius:99px;overflow:hidden}
.barra-dias span{display:block;height:100%;background:var(--verde);border-radius:99px}

/* Modal */
.modal-fondo{position:fixed;inset:0;background:rgba(10,22,38,.5);display:grid;place-items:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:14px;max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .pie{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#13202e;color:#fff;padding:12px 18px;border-radius:10px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:92vw}

/* Comprobante */
.comprobante{max-width:760px;margin:0 auto;background:#fff;padding:28px;border:1px solid var(--linea);border-radius:8px}
.comprobante .cab{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--azul);padding-bottom:14px;margin-bottom:14px}
.comprobante .caja-num{border:2px solid var(--azul);border-radius:8px;padding:10px 16px;text-align:center;font-weight:700}

.pie-sitio{background:#0a2240;color:#c8d6e6;padding:32px 0;margin-top:40px;font-size:.88rem}
.pie-sitio a{color:#fff}
.whatsapp{position:fixed;right:16px;bottom:16px;width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:30}
.whatsapp svg{width:28px;height:28px;fill:#fff}
.demo-banda{background:#fff4dc;color:#6b4700;text-align:center;font-size:.82rem;padding:6px 10px}

@media (max-width:720px){
  .barra nav .txt-largo{display:none}
  .resumen-compra{position:static}
  .seccion{padding:26px 0}
  .envoltura.seccion{padding:26px 16px 80px}
  .tarjeta{padding:18px}
}
@media print{
  .barra,.pie-sitio,.whatsapp,.no-imprimir,.demo-banda{display:none!important}
  body{background:#fff}
  .comprobante{border:0}
}

/* ===== Vista previa interactiva de los aplicativos ===== */
.dm-fondo{position:fixed;inset:0;z-index:70;background:rgba(8,20,36,.6);display:grid;place-items:center;padding:12px}
.dm{width:min(1180px,100%);height:min(780px,100%);background:#f3f6fa;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.4);font-size:.9rem}
.dm-top{background:var(--c);color:#fff;display:flex;align-items:center;gap:12px;padding:12px 16px;flex-wrap:wrap}
.dm-top b{font-size:1.15rem;letter-spacing:.02em}.dm-top>span{opacity:.8;font-size:.85rem}
.dm-ej{background:var(--ambar);color:#1d1400!important;opacity:1!important;font-weight:700;font-size:.72rem!important;padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
.dm-x{margin-left:auto;background:rgba(255,255,255,.15);border:0;color:#fff;width:34px;height:34px;border-radius:8px;font-size:1rem;cursor:pointer}
.dm-cuerpo{flex:1;display:flex;min-height:0}
.dm-menu{width:200px;background:#fff;border-right:1px solid var(--linea);padding:10px;display:flex;flex-direction:column;gap:4px}
.dm-menu button{text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px;font:600 .88rem var(--fuente);color:var(--gris);cursor:pointer}
.dm-menu button.on{background:var(--azul-claro);color:var(--azul)}
.dm-vista{flex:1;overflow:auto;padding:16px 18px}
.dm-vista h3{color:var(--azul);font-size:1.05rem}.dm-vista h4{margin:0 0 10px;font-size:.92rem}
.dm-sel{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.dm-sel label{margin:0}.dm-sel select{padding:8px}
.dm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.dm-kpi{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:10px 12px}
.dm-kpi small{display:block;color:var(--gris);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.dm-kpi b{font-size:1.25rem;color:var(--azul)}.dm-kpi span{display:block;font-size:.75rem;color:var(--gris)}
.dm-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.dm-card{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:14px}
.dm-bars{display:grid;gap:8px}.dm-bar{display:grid;grid-template-columns:150px 1fr 34px;gap:8px;align-items:center;font-size:.82rem}
.dm-bt{height:14px;background:#eef1f4;border-radius:99px;overflow:hidden}.dm-bt i{display:block;height:100%;border-radius:99px}
.dm-bar b{text-align:right}
.dm-nota{color:var(--gris);font-size:.8rem}
.dm-tabla{overflow:auto;background:#fff;border:1px solid var(--linea);border-radius:10px}
.dm-tabla table{font-size:.82rem}.dm-tabla tbody tr{cursor:pointer}.dm-tabla tbody tr:hover{background:#f6f9fd}.dm-tabla .n{text-align:right;white-space:nowrap}
.dm-chip{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:99px;color:var(--k);background:color-mix(in srgb,var(--k) 13%,#fff);white-space:nowrap}
.dm-fil{display:grid;gap:8px;margin-bottom:10px}.dm-fil input{margin:0}
.dm-fil div{display:flex;gap:6px;flex-wrap:wrap}.dm-fil button{border:1px solid var(--linea);background:#fff;border-radius:99px;padding:5px 11px;font:600 .78rem var(--fuente);cursor:pointer;color:var(--gris)}
.dm-fil button.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.dm-prog{display:inline-block;width:70px;height:8px;background:#eef1f4;border-radius:99px;overflow:hidden;vertical-align:middle}.dm-prog i{display:block;height:100%}
.dm-av{display:grid;grid-template-columns:110px 1fr 1fr;gap:8px;align-items:center;font-size:.8rem;padding:6px 0;border-bottom:1px dashed var(--linea)}.dm-av small{color:var(--gris);margin-right:4px}
.dm-kanban{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:10px;overflow-x:auto}
.dm-col h4{border-top:4px solid;padding-top:8px;display:flex;justify-content:space-between}.dm-col h4 span{color:var(--gris)}
.dm-tk{background:#fff;border:1px solid var(--linea);border-radius:9px;padding:9px;margin-bottom:8px;cursor:pointer;display:grid;gap:3px;font-size:.78rem}
.dm-tk:hover{border-color:var(--azul-2)}.dm-tk small{color:var(--gris)}.dm-tk em{color:var(--rojo);font-style:normal;font-weight:700}
.dm-volver{border:0;background:none;color:var(--azul-2);font:600 .9rem var(--fuente);cursor:pointer;padding:0 0 10px}
.dm-hitos{margin:0;padding-left:20px}.dm-hitos li{padding:4px 0;color:var(--gris)}.dm-hitos li.ok{color:var(--verde);font-weight:600}.dm-hitos li.act{color:var(--azul);font-weight:700}
.dm-docs{list-style:none;padding:0;margin:0}.dm-docs li{padding:6px 0;border-bottom:1px solid var(--linea)}
@media (max-width:720px){
  .dm-fondo{padding:0}.dm{height:100%;border-radius:0}
  .dm-cuerpo{flex-direction:column}.dm-menu{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--linea)}
  .dm-menu button{white-space:nowrap}.dm-sel{grid-template-columns:1fr}.dm-bar{grid-template-columns:110px 1fr 28px}
  .dm-av{grid-template-columns:1fr}.dm-top>span:not(.dm-ej){display:none}
}
/* SIRCI: mapa, rankings, PMI, controles */
.dm-ind{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dm-ind button,.dm-seg button{border:1px solid var(--linea);background:#fff;border-radius:99px;padding:6px 12px;font:600 .8rem var(--fuente);cursor:pointer;color:var(--gris)}
.dm-ind button.on,.dm-seg button.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.dm-seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.dm-fil2{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.dm-fil2 select{margin:0;padding:7px 10px}
.dm-mapa-env{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:14px;align-items:start}
.dm-mapa{background:linear-gradient(180deg,#eaf2fb,#f7fafd);border:1px solid var(--linea);border-radius:12px;padding:14px}
.dm-mapa svg{width:100%;height:auto;display:block;overflow:visible}
.dm-tile{cursor:pointer;transition:transform .15s}.dm-tile rect{stroke:#fff;stroke-width:2;transition:filter .15s}
.dm-tile:hover rect{filter:brightness(1.12) drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.dm-tile.sel rect{stroke:#0b3a6e;stroke-width:5}
.dm-tile .t1{fill:#fff;font:800 17px var(--fuente);letter-spacing:.04em;pointer-events:none}
.dm-tile .t2{fill:#fff;font:700 14px var(--fuente);pointer-events:none;opacity:.95}
.dm-leyenda{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--gris);margin-top:10px}
.dm-leyenda i{flex:1;height:10px;border-radius:99px;background:linear-gradient(90deg,#c0392b,#f2a516,#178a4c)}
.dm-kpis-2{grid-template-columns:repeat(2,1fr)}
.dm-det .dm-bar{grid-template-columns:120px 1fr 44px}
.dm-rank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dm-rank li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:10px 12px;cursor:pointer;animation:dmEntra .35s both}
.dm-rank li:hover{border-color:var(--azul-2)}
.dm-rank li:nth-child(n){animation-delay:calc(var(--i,0) * 1ms)}
.dm-pos{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#eef2f7;color:var(--azul);font-size:.85rem}
.dm-pos.oro1{background:#f6c344;color:#5a4000}.dm-pos.oro2{background:#d5dbe3;color:#3b4654}.dm-pos.oro3{background:#e2a774;color:#4d2a0b}
.dm-rn{display:grid;gap:3px;min-width:0}.dm-rn small{color:var(--gris);font-size:.75rem}.dm-rn .dm-bt{height:8px}
.dm-rv{color:var(--azul);font-size:1rem;white-space:nowrap}
@keyframes dmEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dm-col3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;height:200px}
.dm-col3 div{display:grid;justify-items:center;gap:4px;height:100%;grid-template-rows:1fr auto auto}
.dm-colb{width:60%;height:100%;display:flex;align-items:flex-end;background:#eef2f7;border-radius:8px 8px 0 0;overflow:hidden}
.dm-colb i{width:100%;background:linear-gradient(180deg,#14508f,#0b3a6e);border-radius:8px 8px 0 0;animation:dmSube .7s ease-out both}
@keyframes dmSube{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.dm-col3 small{color:var(--gris);font-weight:700}
.dm-sem{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.dm-semc{text-align:left;background:#fff;border:1px solid var(--linea);border-left:6px solid var(--k);border-radius:10px;padding:12px;cursor:pointer;display:grid;gap:4px;font-family:var(--fuente)}
.dm-semc.on{box-shadow:0 0 0 2px var(--k)}
.dm-semc b{font-size:1.6rem;color:var(--k)}.dm-semc small{font-weight:700;color:var(--tinta);font-size:.8rem}.dm-semc em{font-style:normal;color:var(--gris);font-size:.75rem}
.dm-luz{width:12px;height:12px;border-radius:50%;background:var(--k);box-shadow:0 0 0 4px color-mix(in srgb,var(--k) 25%,transparent);animation:dmLate 1.8s infinite}
@keyframes dmLate{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--k) 10%,transparent)}}
@media (max-width:720px){.dm-mapa-env{grid-template-columns:1fr}.dm-rank li{grid-template-columns:38px 1fr}.dm-rv{grid-column:2}}