:root { --fondo:#0f1c24; --turquesa:#14b8a6; --turquesa-osc:#0d9488; --texto:#f4f7f8; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
html, body { margin:0; height:100%; background:var(--fondo); color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow:hidden; }
#app { height:100%; }
.pantalla { display:none; position:absolute; inset:0; padding:4vmin;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5vmin; }
.pantalla.activa { display:flex; }
h1 { font-size:7vmin; margin:0; }
p { font-size:5vmin; margin:0; }
.botones { display:flex; gap:4vmin; width:100%; justify-content:center; flex-wrap:wrap; }
.grande { flex:1 1 20vmin; max-width:42vmin; min-height:34vmin; border:0; border-radius:4vmin;
  background:var(--turquesa); color:#06201c; font-size:6vmin; font-weight:700; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vmin; }
.grande:active { background:var(--turquesa-osc); transform:scale(.97); }
.grande { font-family:inherit; }
.grande .icono { width:15vmin; height:15vmin; display:block; }
.grande .icono svg { width:100%; height:100%; }
.grande small { font-size:3.5vmin; font-weight:500; }
.atras { position:absolute; top:3vmin; left:3vmin; width:12vmin; height:12vmin; border-radius:50%;
  border:0; background:rgba(255,255,255,.14); color:var(--texto); font-size:6vmin; cursor:pointer; z-index:5; }
#pantalla-video { padding:0; background:#000; gap:0; }
#video { width:100%; height:100%; object-fit:contain; background:#000; }
#contador { position:absolute; bottom:3vmin; right:4vmin; font-size:3.5vmin; opacity:.7; }