:root{
  --amar:#FFED00; --amar-osc:#E5D400;
  --teal:#00A5AD; --teal-osc:#00838A; --teal-pal:#E4F6F7;
  --naranja:#FFA81C;
  --mora:#A45FD8; --mora-osc:#8E45C6; --mora-prof:#4A1A5E;
  --bg:#EFEFEF; --linea:#D8D8D8; --linea2:#EAEAEA;
  --txt:#3A3A3A; --txt2:#8A8A8A; --txt3:#B0B0B0;
  --rojo:#D64545; --verde:#2E9E5B;
  --f:Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Roboto Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--f);-webkit-font-smoothing:antialiased}
.app{max-width:1280px;margin:0 auto;padding:0 0 46px}

/* ---------- Cabecera ---------- */
header{background:var(--amar);padding:20px 34px 24px;display:flex;align-items:center;gap:20px;
  border-radius:0 0 26px 26px;flex-wrap:wrap}
.atras{width:40px;height:40px;flex:none;border:none;border-radius:12px;cursor:pointer;
  background:rgba(0,0,0,.10);color:var(--teal-osc);font-size:23px;line-height:1;display:grid;
  place-items:center;transition:.13s;font-family:var(--f)}
.atras:hover{background:rgba(0,0,0,.18)}
/* El titulo lleva al inicio: se comporta como enlace, pero sin recargar. */
header .titulo{display:block;padding:5px 9px;margin:-5px -9px;border-radius:14px;cursor:pointer;
  color:inherit;text-decoration:none;transition:.13s}
header .titulo:hover{background:rgba(0,0,0,.08)}
header .titulo:focus-visible{outline:3px solid var(--teal-osc);outline-offset:1px}
header h1{margin:0;font-size:25px;font-weight:700;color:var(--teal-osc);letter-spacing:.2px}
header .sub{margin:3px 0 0;font-size:13px;color:var(--teal-osc);opacity:.85}
.meta{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.meta .dato{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--teal-osc)}
.meta svg{width:16px;height:16px;flex:none}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.55);border-radius:30px;padding:7px 15px;font-size:12.5px;color:var(--teal-osc)}
.chip b{font-size:15px;font-weight:700}
.salir{background:rgba(0,0,0,.10);border:none;border-radius:30px;padding:8px 16px;cursor:pointer;
  font-family:var(--f);font-size:12.5px;font-weight:700;color:var(--teal-osc);transition:.13s}
.salir:hover{background:rgba(0,0,0,.2)}

/* ---------- Pasos ---------- */
.pasos{display:flex;align-items:center;justify-content:center;margin:24px auto 4px;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:11px}
.paso .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:15px;font-weight:700;color:#fff;background:var(--teal);box-shadow:0 2px 5px rgba(0,0,0,.10);transition:.2s}
.paso .e{font-size:13.5px;font-weight:700;color:var(--teal-osc);transition:.2s}
.paso.off .n{background:#E2E2E2;color:#A8A8A8}
.paso.off .e{color:var(--txt3)}
.unir{width:74px;height:2px;background:var(--linea);margin:0 16px}

/* ---------- Tarjetas ---------- */
.zona{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;margin:18px 22px 0;align-items:start}
.card{background:#fff;border-radius:16px;padding:22px 24px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.card.ancho{margin:20px 22px 0}
.card[hidden]{display:none}
.rot{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--teal);
  margin:0 0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rot .n{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;color:var(--txt3);font-size:12.5px}

/* ---------- Píldoras ---------- */
.pil{display:flex;align-items:center;gap:12px;border:1px solid var(--linea);border-radius:26px;
  padding:10px 20px;background:#fff;min-height:46px;position:relative}
.pil[hidden]{display:none}
.pil .k{font-size:14.5px;font-weight:700;color:var(--txt);flex:none}
.pil .k i{font-style:normal;font-weight:400;font-size:12px;color:var(--txt3)}
.pil .v{margin-left:auto;font-size:14.5px;font-weight:700;color:var(--teal);text-align:right;word-break:break-word}
.pil .v.mono{font-family:var(--mono);letter-spacing:.6px;font-size:15px}

/* ---------- Lista desplegable propia ---------- */
.auto{position:absolute;left:12px;right:12px;z-index:40;max-height:230px;overflow-y:auto;background:#fff;
  border:1px solid var(--linea);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:5px}
.auto[hidden]{display:none}
.auto-op{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  font-family:var(--f);font-size:14px;font-weight:600;color:var(--txt);padding:9px 14px;border-radius:10px}
.auto-op:hover,.auto-op.sel{background:var(--teal-pal);color:var(--teal-osc)}
.auto::-webkit-scrollbar{width:8px}
.auto::-webkit-scrollbar-thumb{background:var(--linea);border-radius:8px}
.pil .v.na{color:var(--naranja)}
.pil .v.gris{color:var(--txt3);font-weight:400;font-style:italic}
.pil.destacado{border:2px solid var(--teal);background:var(--teal-pal);min-height:52px}
.pil.destacado .k{color:var(--teal-osc)}
.pil.destacado .v{font-size:18px;letter-spacing:1.2px;color:var(--teal-osc)}
.pil.destacado .ico{background:transparent;border-color:var(--teal-pal);color:var(--teal-osc);margin-left:14px}
.pil.destacado .ico:hover{background:#fff;border-color:var(--teal)}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rejilla .ancho2{grid-column:1 / -1}
.pil.entrada{padding:8px 10px 8px 24px}
.pil.entrada input{margin:0;flex:1;width:auto;border:none;outline:none;background:transparent;
  font-family:var(--mono);font-size:21px;letter-spacing:2px;color:var(--txt);font-weight:400}
.pil.entrada input::placeholder{letter-spacing:2px;color:var(--txt3)}
.pil.err{border-color:var(--rojo)}
.pil.ok{border-color:var(--teal)}
.validez{font-size:12.5px;color:var(--txt2)}
.validez.bien{color:var(--teal-osc);font-weight:700}
.validez.mal{color:var(--rojo);font-weight:700}
.etiqueta{font-size:12px;color:var(--txt3);letter-spacing:.3px}
#copiado{color:var(--teal-osc);font-weight:700}
.pil .vi.baja{text-transform:none}
.redondo{width:42px;height:42px;flex:none;border-radius:50%;border:none;cursor:pointer;background:var(--teal);
  color:#fff;display:grid;place-items:center;transition:.13s}
.redondo:hover{background:var(--teal-osc)}
.redondo:disabled{background:var(--linea);cursor:default}
.redondo svg{width:20px;height:20px}
.aviso{min-height:18px;margin:9px 0 0;font-size:13px;color:var(--rojo);padding-left:6px}
.bajo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:0 8px;
  font-size:12.5px;color:var(--txt2);flex-wrap:wrap}
.bajo input[type=checkbox]{width:15px;height:15px;accent-color:var(--teal);cursor:pointer;vertical-align:-3px}
.bajo label{cursor:pointer}
.bajo .cnt{font-family:var(--mono)}
.bajo .cnt b{color:var(--teal)}

/* ---------- Botones ---------- */
.botones{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.bt{padding:15px 34px;border:none;border-radius:999px;cursor:pointer;font-family:var(--f);font-size:16.5px;
  font-weight:500;color:#fff;background:var(--mora);box-shadow:0 3px 8px rgba(164,95,216,.30);transition:.13s}
.bt:hover{background:var(--mora-osc)}
.bt:disabled{background:#C9C9C9;box-shadow:none;cursor:default}
.bt.ancho3{flex:1 1 100%}
.bt.prof{background:var(--mora-prof);box-shadow:none}
.bt.prof:hover{background:#5e2276}
.bt.teal{background:var(--teal);box-shadow:0 3px 8px rgba(0,165,173,.28)}
.bt.teal:hover{background:var(--teal-osc)}
.bt.linea{background:#fff;color:var(--txt2);border:1px solid var(--linea);box-shadow:none}
.bt.linea:hover{background:#f7f7f7;color:var(--txt)}
.bt[hidden]{display:none}

/* ---------- Log ---------- */
.consola{background:#FAFAFA;border:1px solid var(--linea2);border-radius:12px;padding:12px 15px;height:298px;
  overflow-y:auto;font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--txt2)}
.consola .l{display:flex;gap:8px;white-space:pre-wrap;word-break:break-word}
.consola .h{color:var(--txt3);flex:0 0 auto}
.consola .ok{color:var(--teal-osc);font-weight:700}
.consola .wr{color:#C88400}
.consola .er{color:var(--rojo)}
.consola .in{color:var(--txt2)}
.consola::-webkit-scrollbar{width:9px}
.consola::-webkit-scrollbar-thumb{background:#DADADA;border-radius:9px}

/* ---------- Tabla ---------- */
.barra{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.barra input{flex:1 1 260px;padding:12px 18px;font-size:14px;border-radius:30px;font-family:var(--f);
  border:1px solid var(--linea);background:#fff;color:var(--txt)}
.barra input:focus{outline:none;border-color:var(--teal)}
.bs{background:#fff;border:1px solid var(--linea);color:var(--txt2);font-family:var(--f);font-size:12px;
  font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:11px 18px;border-radius:30px;
  cursor:pointer;transition:.13s}
.bs:hover{border-color:var(--teal);color:var(--teal)}
a.bs{text-decoration:none;display:inline-block}
.bs.peligro:hover{border-color:var(--rojo);color:var(--rojo)}
.bs.activo{background:var(--teal);border-color:var(--teal);color:#fff}
.tabla-cont{border:1px solid var(--linea2);border-radius:12px;overflow:auto;max-height:430px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{position:sticky;top:0;background:var(--teal-pal);color:var(--teal-osc);text-align:left;font-size:11px;
  letter-spacing:.9px;text-transform:uppercase;padding:12px 15px;border-bottom:1px solid #CFEAEC}
tbody td{padding:12px 15px;border-bottom:1px solid var(--linea2);color:var(--txt2)}
tbody tr:last-child td{border-bottom:none}
tbody tr.dato{cursor:pointer;transition:.12s}
tbody tr.dato:hover{background:#F7FCFC}
td.cod{font-family:var(--mono);font-size:12.5px;color:var(--txt3);white-space:nowrap}
td.imei{font-family:var(--mono);color:var(--txt);white-space:nowrap;font-weight:600}
td.tac{font-family:var(--mono);font-size:12.5px;color:var(--txt3)}
td.mar{color:var(--teal);font-weight:700;white-space:nowrap}
td.fec{font-size:12.5px;color:var(--txt3);white-space:nowrap}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.5px;padding:5px 12px;border-radius:30px;
  background:var(--teal-pal);color:var(--teal-osc);white-space:nowrap}
.tag.sinluhn{background:#FFF4E0;color:#B87500}
.tag.no{background:#FDECEC;color:var(--rojo)}
.tag.si{background:#E7F6EC;color:var(--verde)}
.acc{display:flex;gap:6px;justify-content:flex-end}
.ico{background:#fff;border:1px solid var(--linea);border-radius:50%;width:30px;height:30px;color:var(--txt3);
  cursor:pointer;display:grid;place-items:center;font-size:12px;transition:.13s}
.ico:hover{border-color:var(--teal);color:var(--teal)}
.ico.del:hover{border-color:var(--rojo);color:var(--rojo)}
.ico svg{width:14px;height:14px}
.vacio{padding:44px 20px;text-align:center;color:var(--txt3);font-size:13.5px}
.pie{margin:24px 22px 0;text-align:center;font-size:11.5px;color:var(--txt3)}

/* ---------- Modal ---------- */
.fondo{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:26px;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .15s}
.fondo.on{opacity:1;pointer-events:auto}
.modal{position:relative;width:min(430px,100%);background:#fff;border-radius:14px;padding:26px 0 22px;
  text-align:center;transform:scale(.93);transition:transform .18s cubic-bezier(.2,.9,.3,1.3)}
/* Aspa para cerrar, arriba a la derecha del recuadro. */
.cerrar-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border:none;border-radius:50%;
  cursor:pointer;background:transparent;color:var(--txt3);font-size:17px;line-height:1;display:grid;
  place-items:center;transition:.13s;font-family:var(--f)}
.cerrar-x:hover{background:var(--linea2);color:var(--txt)}
.cerrar-x:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.fondo.on .modal{transform:none}
.blob{width:120px;height:120px;margin:0 auto 4px;display:block}
.blob path.cuerpo{fill:var(--naranja)}
.blob g.marca{stroke:#fff;stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.blob g.marca circle{stroke-dasharray:214;stroke-dashoffset:214}
.blob g.marca path{stroke-dasharray:56;stroke-dashoffset:56}
.fondo.on .blob g.marca circle{animation:arco .55s ease-out forwards}
.fondo.on .blob g.marca path{animation:tick .3s ease-out .38s forwards}
@keyframes arco{to{stroke-dashoffset:0}}
@keyframes tick{to{stroke-dashoffset:0}}
.modal h3{margin:10px 22px 20px;font-size:24px;font-weight:700;color:var(--teal);line-height:1.3}
.corte{border:none;border-top:1px dashed #CFCFCF;margin:0 12px 20px}
.m-txt{margin:0 26px;font-size:17px;color:var(--txt);line-height:1.5}
.m-imei{display:block;margin:12px 0 2px;font-family:var(--mono);font-size:20px;font-weight:700;
  letter-spacing:1.3px;color:var(--txt);word-break:break-all}
.m-equipo{display:block;margin-top:5px;font-size:14px;font-weight:700;color:var(--teal)}
.m-cliente{display:block;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--txt2);letter-spacing:.3px}
.pil .vi{margin-left:auto;flex:1;min-width:0;border:none;outline:none;background:transparent;
  text-align:right;font-family:var(--f);font-size:14.5px;font-weight:700;color:var(--teal);text-transform:uppercase}
.pil .vi::placeholder{color:var(--txt3);font-weight:400;font-style:italic;text-transform:none}
.m-nota{margin:16px 26px 0;font-size:12.5px;color:var(--txt2);line-height:1.55}
.m-nota strong{color:var(--teal-osc)}
.btn-cerrar{width:calc(100% - 52px);margin:22px 26px 0;padding:16px;border:none;border-radius:999px;cursor:pointer;
  font-family:var(--f);font-size:19px;font-weight:500;color:#fff;background:var(--mora);
  box-shadow:0 4px 12px rgba(164,95,216,.35);transition:.13s}
.btn-cerrar:hover{background:var(--mora-osc)}
.btn-cerrar:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ---------- Acceso ---------- */
.acceso{min-height:100vh;display:grid;place-items:center;padding:26px}
.acceso .caja{width:min(400px,100%);background:#fff;border-radius:16px;padding:34px 30px 30px;
  box-shadow:0 4px 24px rgba(0,0,0,.10)}
.acceso .marca-top{width:62px;height:62px;border-radius:18px;background:var(--amar);margin:0 auto 18px;
  display:grid;place-items:center}
.acceso .marca-top svg{width:34px;height:34px}
.acceso h1{margin:0 0 4px;font-size:22px;font-weight:700;color:var(--teal);text-align:center}
.acceso p.s{margin:0 0 26px;font-size:13px;color:var(--txt2);text-align:center}
.acceso label{display:block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--txt2);margin:0 0 7px 6px}
.acceso input{width:100%;padding:14px 20px;border:1px solid var(--linea);border-radius:30px;font-size:15px;
  font-family:var(--f);color:var(--txt);margin-bottom:16px;background:#fff}
.acceso input:focus{outline:none;border-color:var(--teal)}
.acceso .error{min-height:20px;font-size:13px;color:var(--rojo);text-align:center;margin-bottom:6px}
.acceso .bt{width:100%}
.acceso .pie2{margin:22px 0 0;text-align:center;font-size:11.5px;color:var(--txt3);line-height:1.6}

/* ---------- Administración ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.form-linea{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.form-linea input,.form-linea select{padding:11px 16px;border:1px solid var(--linea);border-radius:30px;
  font-size:13.5px;font-family:var(--f);color:var(--txt);background:#fff}
.form-linea input{flex:1 1 150px;min-width:0}
.form-linea input:focus,.form-linea select:focus{outline:none;border-color:var(--teal)}
.nota-clave{background:#FFF9DE;border:1px solid #F0E4A8;border-radius:12px;padding:13px 16px;font-size:13.5px;
  margin-bottom:14px;color:#7A6D00}
.nota-clave b{font-family:var(--mono);font-size:15px;color:var(--txt)}

/* ---------- Formulario del cliente (compacto, sin scroll) ---------- */
header.compacta{padding:14px 26px 16px;border-radius:0 0 20px 20px}
header.compacta h1{font-size:20px}
header.compacta .sub{margin-top:1px;font-size:12px}
header.compacta .meta{margin-left:auto}
.caja-form{max-width:760px;margin:14px auto 0;padding:18px 24px 18px;background:#fff;border-radius:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.caja-form .rot{margin:0 0 9px}

.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.serv{display:flex;flex-direction:column;gap:2px;align-items:flex-start;cursor:pointer;font-family:var(--f);
  padding:12px 16px;border:2px solid var(--linea);border-radius:14px;background:#fff;transition:.13s;text-align:left}
.serv b{font-size:15.5px;color:var(--txt)}
.serv span{font-size:11.5px;color:var(--txt2)}
.serv:hover{border-color:var(--teal-pal);background:#FAFEFE}
.serv.activo{border-color:var(--teal);background:var(--teal-pal)}
.serv.activo b{color:var(--teal-osc)}
.serv.activo span{color:var(--teal-osc)}

.rejilla-form{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* relative: la lista desplegable (.auto) se ancla al campo, no a la página. */
.campo{display:flex;flex-direction:column;gap:4px;position:relative}
.campo[hidden]{display:none}
.campo.ancho2{grid-column:1 / -1}
.campo>span{font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--txt2);
  padding-left:14px}
.campo>span i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--txt3)}
.campo input,.campo select{width:100%;padding:10px 16px;border:1px solid var(--linea);border-radius:26px;
  font-size:15px;font-family:var(--f);color:var(--txt);background:#fff}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--teal)}
.campo input::placeholder{color:var(--txt3)}
.campo .pista{font-size:11.5px;color:var(--txt3);padding-left:14px;min-height:14px;font-style:normal}
.campo .pista.bien{color:var(--teal-osc);font-weight:700}
.campo .pista.mal{color:var(--rojo);font-weight:700}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:0 4px;font-size:12px;
  color:var(--txt2);line-height:1.45}
.consent[hidden]{display:none}
.consent input{width:16px;height:16px;accent-color:var(--teal);cursor:pointer;flex:none;margin-top:1px}
.caja-form .bt{margin-top:12px}
.caja-form .aviso{text-align:center;margin:6px 0 0}

@media (max-width:640px){
  .servicios{grid-template-columns:1fr}
  .rejilla-form{grid-template-columns:1fr}
  .caja-form{margin:12px 12px 0;padding:16px}
}

/* ---------- Panel de control ---------- */
header.oscuro{background:var(--teal);border-radius:0 0 26px 26px}
header.oscuro h1{color:#fff}
header.oscuro .sub{color:rgba(255,255,255,.85)}
header.oscuro .meta .dato{color:#fff}
header.oscuro .salir{background:rgba(255,255,255,.18);color:#fff;text-decoration:none;display:inline-block}
header.oscuro .salir:hover{background:rgba(255,255,255,.3)}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{border:1px solid var(--linea2);border-radius:14px;padding:16px 18px;background:#FCFDFD}
.kpi b{display:block;font-size:28px;line-height:1.1;color:var(--teal-osc);font-weight:700}
.kpi span{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--txt2)}
.kpi.alerta b{color:var(--naranja)}
select.mini{padding:6px 10px;border:1px solid var(--linea);border-radius:20px;font-size:12px;
  font-family:var(--f);color:var(--txt);background:#fff;cursor:pointer}
select.mini:focus{outline:none;border-color:var(--teal)}
.ayuda{margin:12px 4px 0;font-size:12px;color:var(--txt3);line-height:1.6}
.ayuda b{color:var(--txt2)}
.centrado{max-width:560px;margin:0 auto}

/* ---------- Modal claro (formularios) ---------- */
.modal.claro{padding:26px 0 20px;text-align:left}
.modal.claro h3{text-align:center;margin:0 26px 18px}
.form-clave{padding:0 26px}
.form-clave label{display:block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--txt2);margin:0 0 6px 6px}
.form-clave input{width:100%;padding:13px 18px;border:1px solid var(--linea);border-radius:30px;font-size:15px;
  font-family:var(--f);color:var(--txt);margin-bottom:14px;background:#fff}
.form-clave input:focus{outline:none;border-color:var(--teal)}
.form-clave .aviso{padding-left:6px;margin:0}
.btn-texto{display:block;width:calc(100% - 52px);margin:10px 26px 0;padding:12px;border:none;background:none;
  font-family:var(--f);font-size:14.5px;color:var(--txt2);cursor:pointer;border-radius:999px}
.btn-texto:hover{background:var(--linea2);color:var(--txt)}
.btn-texto:empty{display:none}
.m-txt.chico{font-size:15px;line-height:1.55;color:var(--txt2);text-align:center}
.m-txt.chico b{color:var(--txt);font-family:var(--mono)}
.modal.peligro h3{color:var(--rojo)}
.modal.peligro .btn-cerrar{background:var(--rojo);box-shadow:0 4px 12px rgba(214,69,69,.3)}
.modal.peligro .btn-cerrar:hover{background:#c03a3a}

/* Celdas con dato principal y detalle debajo */
td .sub2{display:block;font-size:11.5px;color:var(--txt3);margin-top:2px;font-family:var(--f);letter-spacing:0}
td .sub2 b{color:var(--txt2);font-weight:600}
.acc .bs{padding:7px 13px;font-size:11px}

@media (max-width:980px){
  .zona{grid-template-columns:1fr;margin:18px 14px 0}
  .card.ancho{margin:18px 14px 0}
  header{padding:16px 18px 20px}
  header h1{font-size:20px}
  .meta{width:100%;margin-left:0;gap:14px}
  .unir{width:34px;margin:0 8px}
  .paso .e{display:none}
  .rejilla{grid-template-columns:1fr}
  .bt{flex:1 1 100%}
}