/* =============================================================================
   DRS MOTORS · APP — LANZADOR (Demo 1, 2 y 3) y OPCIONES DE LA DEMO
   Radio 0. Sin Azul Acero: el énfasis de esta pantalla es elegir una demo, y cada
   tarjeta pesa lo mismo. El azul que aparece es de apoyo (acc-graf, acc-txt).
============================================================================= */

.lanzador{display:flex;flex-direction:column;gap:18px;padding:14px 15px 40px}
.lz-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px}
.lz-logo{display:block;width:118px;height:27px}
.lz-marca-sub{border:1px solid var(--panel-borde);padding:5px 7px;white-space:nowrap}
.lz-titulo .ceja{margin-bottom:10px}
.lz-titulo h1{color:var(--txt-1);line-height:.92}
.lz-titulo .t13{margin-top:10px;max-width:40ch}

.lz-demos{display:flex;flex-direction:column;gap:8px}
.lz-demo{
  display:grid;grid-template-columns:88px 1fr;gap:14px;width:100%;
  padding:12px;border:1px solid var(--panel-borde);background:var(--panel);text-align:left;color:inherit;
}
.lz-plano{display:block;width:88px;height:146px}
.lz-plano svg{display:block;width:100%;height:100%}
.lz-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.lz-nombre{color:var(--txt-1);line-height:.95}
.lz-lema{font-weight:600}
.lz-desc{display:block;margin-bottom:8px}
/* El botón de cada tarjeta, lleno en Platino (Negro Carbón en el tema claro): se ve que se toca */
.lz-ir{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 14px;
  background:var(--btn2-fondo);color:var(--btn2-txt);
  font:700 var(--fs-9)/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;
}
.lz-ir .ico{width:14px;height:14px}
.lz-pendiente{cursor:default}
.lz-pendiente .lz-plano{border:1px dashed var(--n-4)}
.lz-pendiente .lz-nombre{color:var(--txt-3)}
@media (hover:hover){ .lz-demo:not(.lz-pendiente):hover{border-color:var(--ctl-borde)} }

.lz-bloque{display:flex;flex-direction:column;border-top:1px solid var(--panel-borde)}
.lz-fila{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:62px;
  padding:10px 0;border-bottom:1px solid var(--panel-borde);color:inherit;text-decoration:none;text-align:left;
}
.lz-boton > .ico{width:16px;height:16px;color:var(--txt-3)}
.lz-pie{text-align:center;max-width:44ch;margin:0 auto}

/* Plano de cada propuesta: dibujo de líneas, como en los planos de la marca */
.plano-demo{display:block;width:100%;height:100%}
.pd-marco{fill:none;stroke:var(--n-4);stroke-width:1}
.pd-linea{fill:none;stroke:var(--txt-3);stroke-width:1}
.pd-txt{fill:var(--txt-3)}
.pd-trazo{fill:none;stroke:var(--txt-2);stroke-width:1.2}
.pd-acento{fill:var(--acc-graf)}
.pd-acento-trazo{fill:none;stroke:var(--acc-graf);stroke-width:1.6}
.pd-sobre{fill:none;stroke:var(--txt-acc);stroke-width:1.6}

/* ---------------- opciones de la demo (hoja en el celular y panel en computador) ---------------- */
.dm-grupo{display:flex;flex-direction:column;gap:8px}
.hoja-demo .dm-grupo{margin-bottom:20px}
.dm-demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dm-demo{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:64px;padding:10px;
  border:1px solid var(--ctl-borde);background:var(--ctl-fondo);
  font:600 var(--fs-9)/1.2 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);
}
.dm-demo b{color:var(--txt-1);line-height:.8}
.dm-demo[aria-pressed="true"]{background:var(--sel-fondo);border-color:var(--sel-fondo);color:var(--sel-txt)}
.dm-demo[aria-pressed="true"] b{color:var(--sel-txt)}
.dm-fila{
  display:grid;grid-template-columns:20px 1fr 14px;align-items:center;gap:10px;width:100%;min-height:46px;
  padding:0 10px;border:1px solid var(--ctl-borde);background:var(--ctl-fondo);font-size:var(--fs-13);color:var(--txt-1);text-decoration:none;text-align:left;
}
.dm-fila > .ico:first-child{width:18px;height:18px;color:var(--acc-graf)}
.dm-fila > .ico:last-child{width:14px;height:14px;color:var(--txt-3)}
.dm-switch{grid-template-columns:1fr auto;padding:0 10px}
.dm-switch > span{display:flex;align-items:center;gap:10px}
.dm-switch > span .ico{width:18px;height:18px;color:var(--acc-graf)}
.dm-accion{align-self:flex-start}
.dm-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dm-pasos li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;font-size:var(--fs-13)}
.dm-pasos b.d{color:var(--acc-txt)}
@media (hover:hover){ .dm-fila:hover,.dm-demo:not([aria-pressed="true"]):hover{border-color:var(--txt-1)} }