/* ═══════════════════════════════════════════════════════════
   Página del Simulador de luz.

   La herramienta vive en /simulador/app.html y aquí entra dentro
   de un marco. Va en un iframe a propósito: es una aplicación a
   pantalla completa con su propia rejilla y su propio manejo del
   teclado y la rueda, y meterla suelta en la página obligaría a
   reescribir su hoja de estilo entera para que no chocara con la
   del sitio. Aislada, funciona igual que probada.
   ═══════════════════════════════════════════════════════════ */

.sim-marco{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.sim-marco iframe{
  display:block;width:100%;border:0;
  height:min(86vh, 940px);
  min-height:620px;
}

.sim-pie{
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
  margin-top:12px;
}
.sim-pie p{
  margin:0;font-family:var(--tech);font-size:.66rem;letter-spacing:.08em;
  color:var(--cream-dim);line-height:1.6;
}
.sim-pie a{color:var(--cream-dim);text-decoration:underline;text-underline-offset:2px}

/* En un teléfono la herramienta funciona, pero fuera del iframe: dos
   zonas de desplazamiento anidadas se pelean por el mismo dedo y el
   visor, que se queda el gesto para girar, no deja pasar de largo. */
.sim-movil{display:none}
@media (max-width:900px){
  .sim-marco{display:none}
  .sim-movil{
    display:block;padding:28px 22px;border-radius:14px;
    border:1px solid var(--line-hard);background:var(--ink-2);
  }
  .sim-movil b{display:block;font-size:1.05rem;color:var(--cream);margin-bottom:8px}
  .sim-movil span{display:block;color:var(--cream-dim);font-size:.92rem;line-height:1.6}
  .sim-movil .btn{margin-top:18px}
}

/* Lo que hace y lo que no. Registro Consola: datos, sin adjetivos. */
.sim-notas{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:56px;
}
.sim-nota h3{
  font-family:var(--tech);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-dim);font-weight:400;
  margin:0 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
.sim-nota ul{display:flex;flex-direction:column;gap:11px}
.sim-nota li{
  position:relative;padding-left:18px;color:var(--cream);
  font-size:.95rem;line-height:1.55;
}
.sim-nota li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.sim-nota.no li::before{background:var(--cream-dim)}
.sim-nota.no li{color:var(--cream-dim)}