/* ═══════════════════════════════════════════════════════════
   Zonas seguras.

   A diferencia del simulador, esta herramienta vive dentro de la
   página, sin iframe: es un componente normal y funciona igual —o
   mejor— en un teléfono, que es donde va a llegar la mitad del
   tráfico. Un marco 9:16 con el vídeo dentro y las zonas encima.
   ═══════════════════════════════════════════════════════════ */

.zs{
  display:grid;gap:28px;align-items:start;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){ .zs{grid-template-columns:minmax(280px,360px) minmax(0,1fr)} }

/* ── El teléfono ────────────────────────────────────────────────────────── */
/* La proporción la pone el JS: la del teléfono elegido, no la del vídeo.
   El tope en vh es para que el teléfono entre en pantalla sin scroll: una
   pantalla de 19,5:9 a 310 px de ancho mide 674 px de alto, y eso no cabe
   en un portátil. */
.zs-marco{
  position:relative;aspect-ratio:9/16;width:100%;max-width:min(310px, 38vh);
  margin-inline:auto;border-radius:20px;overflow:hidden;
  border:1px solid var(--line-hard);
  background:
    repeating-linear-gradient(45deg, rgba(242,234,220,.02) 0 10px, transparent 10px 20px),
    var(--ink-2);
}
.zs-marco.con-medio{background:var(--ink)}
/* Encajado, no recortado: así se ven las barras que pone la app. */
.zs-medio{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}

.zs-suelta{
  position:absolute;inset:0;display:grid;place-content:center;gap:8px;
  text-align:center;padding:24px;pointer-events:none;
}
.zs-marco.con-medio .zs-suelta{display:none}
.zs-suelta b{font-size:1rem;color:var(--cream);font-weight:500}
.zs-suelta span{font-size:.8rem;color:var(--cream-dim);line-height:1.5}

/* ── Las zonas ──────────────────────────────────────────────────────────── */
.zs-capa{position:absolute;inset:0;pointer-events:none}
.zs-zona{
  position:absolute;background:rgba(229,72,77,.22);
  border:1px dashed rgba(229,72,77,.85);
}
.zs-zona span{
  position:absolute;left:6px;top:5px;
  font-family:var(--tech);font-size:.5rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.zs-segura{position:absolute;border:2px dashed rgba(76,195,138,.9);border-radius:3px}

/* El recorte de la cuadrícula: lo que se ve del Reel en el perfil. */
.zs-crop{position:absolute;inset:0;pointer-events:none}
.zs-crop::before,.zs-crop::after{
  content:'';position:absolute;left:0;right:0;height:var(--sobra);
  background:rgba(10,9,7,.72);
}
.zs-crop::before{top:var(--arriba);border-bottom:2px solid var(--gold)}
.zs-crop::after{bottom:var(--abajo);border-top:2px solid var(--gold)}

/* ── Mandos ─────────────────────────────────────────────────────────────── */
.zs-mandos h3{
  font-family:var(--tech);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-dim);font-weight:400;
  margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line);
}
.zs-mandos h3:not(:first-child){margin-top:26px}

.zs-superficies{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.zs-superficies button{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-height:52px;padding:8px 12px;border-radius:10px;
  background:var(--ink-3);color:var(--cream);border:1px solid var(--line);
  cursor:pointer;text-align:left;
  transition:border-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-ui) var(--ease-out);
}
.zs-superficies button:active{transform:scale(.97)}
.zs-superficies button b{font-size:.85rem;font-weight:500}
.zs-superficies button span{
  font-family:var(--tech);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream-dim);
}
.zs-superficies button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.zs-superficies button[aria-pressed=true] span{color:var(--gold)}

.zs-fila{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.zs-fila label{display:flex;align-items:center;gap:9px;font-size:.85rem;margin:0;cursor:pointer}
.zs-fila input[type=checkbox]{accent-color:var(--gold);width:17px;height:17px}

.zs-boton{
  min-height:42px;padding:0 16px;border-radius:10px;cursor:pointer;
  background:var(--ink-3);color:var(--cream);border:1px solid var(--line-hard);
  font-family:var(--tech);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-ui) var(--ease-out);
}
.zs-boton:active{transform:scale(.97)}
.zs-boton:disabled{opacity:.35;cursor:not-allowed}
.zs-boton[aria-pressed=false]{color:var(--cream-dim)}
@media (hover:hover) and (pointer:fine){
  .zs-boton:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
  .zs-superficies button:hover{border-color:var(--line-hard)}
}

#zsTiempo{width:100%;margin-top:12px;accent-color:var(--gold)}

.zs-nota{
  margin-top:16px;font-family:var(--tech);font-size:.62rem;letter-spacing:.08em;
  color:var(--cream-dim);line-height:1.6;
}
.zs-aviso{
  margin-top:14px;padding:11px 12px;border-radius:9px;font-size:.78rem;line-height:1.5;
  background:rgba(229,72,77,.10);border-left:3px solid var(--no);color:var(--cream);
}

@media (prefers-reduced-motion:reduce){
  .zs-boton,.zs-superficies button{transition:none}
  .zs-boton:active,.zs-superficies button:active{transform:none}
}